feat(rich-text): possibilita que usuário mude a cor do texto

Adicionada a função de alterar a cor do texto através de um novo botão
na toolbar do componente, no qual executará as funções nativas de seleção
de cores do navegador e aplicará ao texto selecionado e/ou as próximas
digitações.

Fixes DTHFUI-1718

Author: mateusjmaf

projects/ui/src/lib/components/po-field/po-field.module.ts

@@ -9,6 +9,7 @@ import { PoDisclaimerModule } from './../po-disclaimer/po-disclaimer.module';
 import { PoLoadingModule } from '../../components/po-loading/index';
 import { PoModalModule } from '../../components/po-modal/po-modal.module';
 import { PoTableModule } from '../../components/po-table/po-table.module';
+import { PoTooltipModule } from './../../directives/po-tooltip/po-tooltip.module';
 
 import { PoCalendarComponent } from './po-datepicker/po-calendar/po-calendar.component';
 import { PoCheckboxGroupComponent } from './po-checkbox-group/po-checkbox-group.component';
@@ -67,6 +68,7 @@ import { PoUrlComponent } from './po-url/po-url.component';
     PoModalModule,
     PoServicesModule,
     PoTableModule,
+    PoTooltipModule
   ],
   exports: [
     PoCheckboxGroupComponent,

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-base.component.ts

@@ -10,6 +10,8 @@ import { requiredFailed } from '../validators';
  * O componente `po-rich-text` é um editor de textos enriquecidos.
  *
  * Para edição de texto simples sem formatação recomenda-se o uso do componente [**po-textarea**](/documentation/po-textarea).
+ *
+ * > No navegador Internet Explorer não é possível alterar a cor do texto.
  */
 export abstract class PoRichTextBaseComponent implements ControlValueAccessor, Validator {
 

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.spec.ts

@@ -28,7 +28,7 @@ describe('PoRichTextBodyComponent:', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('Methods: ', () => {
+  describe('Methods:', () => {
 
     it('onInit: should update `bodyElement`', () => {
       const expectedValue = 'on';
@@ -46,41 +46,56 @@ describe('PoRichTextBodyComponent:', () => {
       expect(component['updateValueWithModelValue']).toHaveBeenCalled();
     }));
 
-    it('executeCommand: should call `focus`', () => {
-      const spyFocus = spyOn(component.bodyElement.nativeElement, <any> 'focus');
-      const fakeValue = 'p';
+    describe('executeCommand:', () => {
 
-      component.executeCommand(fakeValue);
+      it('should call `focus`', () => {
+        const spyFocus = spyOn(component.bodyElement.nativeElement, <any> 'focus');
+        const fakeValue = 'p';
 
-      expect(spyFocus).toHaveBeenCalled();
-    });
+        component.executeCommand(fakeValue);
 
-    it('executeCommand: should call `execCommand`', () => {
-      const spyExecCommand = spyOn(component.bodyElement.nativeElement, <any> 'focus');
-      const fakeValue = 'p';
+        expect(spyFocus).toHaveBeenCalled();
+      });
 
-      component.executeCommand(fakeValue);
+      it('should call `execCommand` with string as parameter.', () => {
+        const spyExecCommand = spyOn(document, <any> 'execCommand');
+        const fakeValue = 'p';
 
-      expect(spyExecCommand).toHaveBeenCalled();
-    });
+        component.executeCommand(fakeValue);
 
-    it('executeCommand: should call `updateModel`', () => {
-      const fakeValue = 'p';
-      spyOn(component, <any>'updateModel');
+        expect(spyExecCommand).toHaveBeenCalledWith(fakeValue, false, null);
+      });
 
-      component.executeCommand(fakeValue);
+      it('should call `execCommand` with object as parameter.', () => {
+        const command = 'foreColor';
+        const value = '#000000';
+        const spyExecCommand = spyOn(document, <any> 'execCommand');
+        const fakeValue = { command, value } ;
 
-      expect(component['updateModel']).toHaveBeenCalled();
-    });
+        component.executeCommand(fakeValue);
 
-    it('executeCommand: should call `value.emit` with `modelValue`', () => {
-      component.modelValue = 'teste';
-      const fakeValue = 'p';
+        expect(spyExecCommand).toHaveBeenCalledWith(fakeValue.command, false, fakeValue.value);
+      });
 
-      spyOn(component.value, 'emit');
-      component.executeCommand(fakeValue);
+      it('should call `updateModel`', () => {
+        const fakeValue = 'p';
+        spyOn(component, <any>'updateModel');
+
+        component.executeCommand(fakeValue);
+
+        expect(component['updateModel']).toHaveBeenCalled();
+      });
+
+      it('should call `value.emit` with `modelValue`', () => {
+        component.modelValue = 'teste';
+        const fakeValue = 'p';
+
+        spyOn(component.value, 'emit');
+        component.executeCommand(fakeValue);
+
+        expect(component.value.emit).toHaveBeenCalledWith(component.modelValue);
+      });
 
-      expect(component.value.emit).toHaveBeenCalledWith(component.modelValue);
     });
 
     it('onClick: should call `emitSelectionCommands`', () => {
@@ -170,6 +185,14 @@ describe('PoRichTextBodyComponent:', () => {
       expect(component['valueBeforeChange']).toBe('value');
     });
 
+    it('rgbToHex: should return the hexadecimal value`', () => {
+      const rbg = 'rgb(0, 128, 255)';
+      const hex = '#0080ff';
+      const result = component['rgbToHex'](rbg);
+
+      expect(result).toBe(hex);
+    });
+
     it('onBlur: should emit modelValue change', fakeAsync((): void => {
       const fakeThis = {
         modelValue: 'value',
@@ -212,7 +235,7 @@ describe('PoRichTextBodyComponent:', () => {
 
   });
 
-  describe('Templates: ', () => {
+  describe('Templates:', () => {
 
   it('should contain `po-rich-text-body`', () => {
 

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.ts

@@ -36,9 +36,15 @@ export class PoRichTextBodyComponent implements OnInit {
     setTimeout(() => this.updateValueWithModelValue());
   }
 
-  executeCommand(command: string) {
+  executeCommand(command: (string | { command: any, value: string })) {
     this.bodyElement.nativeElement.focus();
-    document.execCommand(command, false, null);
+
+    if (typeof (command) === 'object') {
+      document.execCommand(command.command, false, command.value);
+    } else {
+      document.execCommand(command, false, null);
+    }
+
     this.updateModel();
     this.value.emit(this.modelValue);
   }
@@ -79,8 +85,31 @@ export class PoRichTextBodyComponent implements OnInit {
 
   private emitSelectionCommands() {
     const commands = poRichTextBodyCommands.filter(command => document.queryCommandState(command));
+    const rgbColor = document.queryCommandValue('ForeColor');
+    const hexColor = this.rgbToHex(rgbColor);
+    this.commands.emit({commands, hexColor});
+  }
+
+  private rgbToHex(rgb) {
+    // Tratamento necessário para converter o código rgb para hexadecimal.
+    const sep = rgb.indexOf(',') > -1 ? ',' : ' ';
+    rgb = rgb.substr(4).split(')')[0].split(sep);
+
+    let r = (+rgb[0]).toString(16);
+    let g = (+rgb[1]).toString(16);
+    let b = (+rgb[2]).toString(16);
+
+    if (r.length === 1) {
+      r = '0' + r;
+    }
+    if (g.length === 1) {
+      g = '0' + g;
+    }
+    if (b.length === 1) {
+      b = '0' + b;
+    }
 
-    this.commands.emit(commands);
+    return '#' + r + g + b;
   }
 
   private updateModel() {

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-literals.ts

@@ -7,6 +7,7 @@ export const poRichTextLiteralsDefault = {
     center: 'Center',
     right: 'Right',
     justify: 'Justify',
+    textColor: 'Text color',
     unorderedList: 'Bulleted list'
   },
   es: {
@@ -17,6 +18,7 @@ export const poRichTextLiteralsDefault = {
     center: 'Centro',
     right: 'Derecha',
     justify: 'Justificado',
+    textColor: 'Color del texto',
     unorderedList: 'Lista con viñetas'
   },
   pt: {
@@ -27,6 +29,7 @@ export const poRichTextLiteralsDefault = {
     center: 'Centro',
     right: 'Direita',
     justify: 'Justificado',
+    textColor: 'Cor do texto',
     unorderedList: 'Lista com marcadores'
   }
 };

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-toolbar/po-rich-text-toolbar.component.html

@@ -4,6 +4,21 @@
     </po-button-group>
   </div>
 
+  <div *ngIf="!isInternetExplorer" class="po-rich-text-toolbar-button-align">
+    <div class="po-rich-text-toolbar-color-picker-container">
+      <button class="po-button po-text-ellipsis po-rich-text-toolbar-color-picker-button"
+        [disabled]="readonly"
+        [p-tooltip]="literals.textColor">
+        <input
+          #colorPickerInput
+          class="po-rich-text-toolbar-color-picker-input"
+          type="color"
+          [disabled]="readonly"
+          (change)="changeTextColor($event.target.value)">
+      </button>
+    </div>
+  </div>
+
   <div class="po-rich-text-toolbar-button-align">
     <po-button-group p-toggle="single" [p-buttons]="alignButtons">
     </po-button-group>