feat(tag): permite inversão de cores

Nova propriedade p-inverse, permite a inversão de cores no componente.
Possibilita representação de status ativo e inativo.

Fixes DTHFUI-1763

Author: alinelariguet

projects/ui/src/lib/components/po-tag/po-tag-base.component.spec.ts

@@ -49,6 +49,14 @@ describe('PoTagBaseComponent:', () => {
       expectPropertiesValues(component, 'icon', validValues, validValues);
     });
 
+    it('inverse: should update property with valid and invalid values.', () => {
+      const validValues = [true, 'true', 1, ''];
+      const invalidValues = [false, 'false', 0];
+
+      expectPropertiesValues(component, 'inverse', validValues, true);
+      expectPropertiesValues(component, 'inverse', invalidValues, false);
+    });
+
     it('orientation: should update property with valid values', () => {
       const validValues = (<any>Object).values(PoTagOrientation);
 

projects/ui/src/lib/components/po-tag/po-tag-base.component.ts

@@ -25,6 +25,7 @@ export class PoTagBaseComponent {
 
   private _color?: string;
   private _icon?: boolean | string;
+  private _inverse?: boolean;
   private _orientation?: PoTagOrientation = poTagOrientationDefault;
   private _type?: PoTagType;
 
@@ -92,6 +93,26 @@ export class PoTagBaseComponent {
     return this._icon;
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Ativa a inversão de cores configuradas no componente, possibilitando uma visualização de status ativo e inativo.
+   *
+   * > A cor do texto, do ícone e da borda ficam com a cor utilizada na propriedade `p-color` ou a cor correspondente ao `p-type`,
+   * e a cor do fundo fica branca.
+   *
+   * @default `false`
+   */
+  @Input('p-inverse') set inverse(value: boolean) {
+    this._inverse = convertToBoolean(value);
+  }
+
+  get inverse(): boolean {
+    return this._inverse;
+  }
+
   /**
    * @optional
    *

projects/ui/src/lib/components/po-tag/po-tag.component.html

@@ -6,6 +6,7 @@
   <div class="po-tag-sub-container">
     <div class="po-tag"
       [class.po-clickable]="isClickable"
+      [class.po-tag-inverse]="inverse"
       [ngClass]="tagColor"
       tabindex="0"
       (click)="onClick()"

projects/ui/src/lib/components/po-tag/po-tag.component.spec.ts

@@ -77,23 +77,46 @@ describe('PoTagComponent:', () => {
       expect(component.iconTypeString).toBe(false);
     });
 
-    it('tagColor: should return tag type.', () => {
+    it('tagColor: should return tag type without `inverse`.', () => {
       component.type = PoTagType.Danger;
+      component.inverse = false;
       expect(component.tagColor).toBe('po-tag-danger');
     });
 
-    it('tagColor: should return tag color.', () => {
+    it('tagColor: should return tag type with `inverse`.', () => {
+      component.type = PoTagType.Danger;
+      component.inverse = true;
+      expect(component.tagColor).toBe('po-tag-danger-inverse');
+    });
+
+    it('tagColor: should return tag color without `text`.', () => {
       component.color = 'color-07';
       component.type = undefined;
+      component.inverse = false;
       expect(component.tagColor).toBe('po-color-07');
     });
 
-    it('tagColor: should return tag type default.', () => {
+    it('tagColor: should return tag color with `text`.', () => {
+      component.color = 'color-07';
+      component.type = undefined;
+      component.inverse = true;
+      expect(component.tagColor).toBe('po-text-color-07');
+    });
+
+    it('tagColor: should return tag type default without `inverse`.', () => {
       component.color = undefined;
       component.type = undefined;
+      component.inverse = false;
       expect(component.tagColor).toBe('po-tag-info');
     });
 
+    it('tagColor: should return tag type default with `inverse`.', () => {
+      component.color = undefined;
+      component.type = undefined;
+      component.inverse = true;
+      expect(component.tagColor).toBe('po-tag-info-inverse');
+    });
+
     it('tagOrientation: should return true if orientation is horizontal.', () => {
       component.orientation = PoTagOrientation.Horizontal;
       expect(component.tagOrientation).toBe(true);
@@ -293,6 +316,20 @@ describe('PoTagComponent:', () => {
       expect(nativeElement.querySelector('.po-clickable')).toBeFalsy();
     });
 
+    it('should add `po-tag-inverse` if `inverse` is true.', () => {
+      component.inverse = true;
+
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-tag-inverse')).toBeTruthy();
+    });
+
+    it('shouldn`t add `po-tag-inverse` if `inverse` is false.', () => {
+      component.inverse = false;
+
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-tag-inverse')).toBeFalsy();
+    });
+
   });
 
 });

projects/ui/src/lib/components/po-tag/po-tag.component.ts

@@ -59,15 +59,15 @@ export class PoTagComponent extends PoTagBaseComponent implements OnInit {
 
   get tagColor() {
     if (this.type) {
-      return 'po-tag-' + this.type;
+      return this.inverse ? `po-tag-${this.type}-inverse` : `po-tag-${this.type}`;
     }
 
     if (this.color && !this.type) {
-      return 'po-' + this.color;
+      return this.inverse ? `po-text-${this.color}` : `po-${this.color}`;
     }
 
     if (!this.type && !this.color) {
-      return poTagTypeDefault;
+      return this.inverse ? `${poTagTypeDefault}-inverse` : poTagTypeDefault;
     }
   }
 

projects/ui/src/lib/components/po-tag/samples/sample-po-tag-bank-account/sample-po-tag-bank-account.component.html

@@ -30,6 +30,7 @@
       <div class="po-row">
         <po-tag *ngFor="let investiment of investiments"
           class="po-md-6 po-lg-3"
+          p-inverse
           [p-label]="investiment.label"
           [p-type]="investiment.type"
           [p-value]="investiment.value">

projects/ui/src/lib/components/po-tag/samples/sample-po-tag-labs/sample-po-tag-labs.component.html

@@ -1,6 +1,7 @@
 <po-tag
   [p-color]="color"
   [p-icon]="icon"
+  [p-inverse]="inverse"
   [p-label]="label"
   [p-orientation]="orientation"
   [p-type]="type"
@@ -83,13 +84,20 @@
     </po-radio-group>
 
     <po-radio-group
-      class="po-md-8"
+      class="po-md-6"
       name="type"
       [(ngModel)]="type"
       p-columns="3"
       p-label="Type"
       [p-options]="typeOptions">
     </po-radio-group>
+
+    <po-switch
+      class="po-md-2"
+      name="inverse"
+      [(ngModel)]="inverse"
+      p-label="Inverse">
+    </po-switch>
   </div>
 
   <div class="po-row">

projects/ui/src/lib/components/po-tag/samples/sample-po-tag-labs/sample-po-tag-labs.component.ts

@@ -21,6 +21,7 @@ export class SamplePoTagLabsComponent implements OnInit {
   color: string;
   event: string;
   icon: boolean | string;
+  inverse: boolean;
   label: string;
   orientation: PoTagOrientation;
   type: PoTagType;
@@ -79,6 +80,7 @@ export class SamplePoTagLabsComponent implements OnInit {
     this.value = 'Portinari Tag';
     this.type = undefined;
     this.event = '';
+    this.inverse = false;
   }
 
 }