feat(tag): ajusta area de click minima

Implementa área de click mínima de `44px` somente para a tag com `p-click` habilitada.

Fixes DTHFUI-7938

Author: jnrpalma

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

@@ -5,62 +5,68 @@
 
   <div class="po-tag-sub-container">
     <div
-      #poTag
-      class="po-tag"
-      [attr.role]="isClickable && !disabled ? 'button' : ''"
+      #poTagWrapper
+      class="po-tag-wrapper"
       [class.po-clickable]="isClickable && !disabled && !removable"
-      [class.po-tag-inverse]="inverse && !type && !customTextColor && !removable"
-      [class.po-tag-removable]="removable"
-      [class.po-tag-disabled]="disabled && removable"
-      [ngClass]="tagColor"
-      [ngStyle]="styleTag()"
-      [tabindex]="isClickable && !removable ? 0 : -1"
-      (click)="onClick()"
+      [attr.role]="isClickable && !disabled && !removable ? 'button' : ''"
       (keydown.enter)="onKeyPressed($event)"
       (keydown.space)="$event.preventDefault()"
       (keyup.space)="onKeyPressed($event)"
+      (click)="onClick()"
+      [tabindex]="isClickable && !removable ? 0 : -1"
     >
-      <po-icon
-        *ngIf="icon && !removable"
-        class="po-tag-icon"
-        [p-icon]="!type ? icon : iconFromType"
-        [ngStyle]="
-          !tagColor && inverse && !customTextColor
-            ? { 'color': customColor }
-            : !type && customTextColor
-            ? { 'color': customTextColor }
-            : ''
-        "
+      <div
+        #poTag
+        class="po-tag"
+        [class.po-clickable]="isClickable && !disabled && !removable"
+        [class.po-tag-inverse]="inverse && !type && !customTextColor && !removable"
+        [class.po-tag-removable]="removable"
+        [class.po-tag-disabled]="disabled && removable"
+        [ngClass]="tagColor"
+        [ngStyle]="styleTag()"
       >
-      </po-icon>
-
-      <div #tagContainer class="po-tag-value" [p-tooltip]="getWidthTag() ? value : ''" p-tooltip-position="top">
-        <span
+        <po-icon
+          *ngIf="icon && !removable"
+          class="po-tag-icon"
+          [p-icon]="!type ? icon : iconFromType"
           [ngStyle]="
             !tagColor && inverse && !customTextColor
               ? { 'color': customColor }
-              : !type && customTextColor && !removable
+              : !type && customTextColor
               ? { 'color': customTextColor }
               : ''
           "
-          >{{ value }}</span
         >
-      </div>
+        </po-icon>
 
-      <span
-        #tagClose
-        *ngIf="removable"
-        p-tooltip-position="top"
-        [p-tooltip]="literals.remove"
-        [attr.aria-label]="setAriaLabel()"
-        class="po-tag-remove po-icon po-icon-close"
-        [class.po-clickable]="!disabled"
-        [tabindex]="!disabled ? 0 : -1"
-        [attr.role]="!disabled ? 'button' : ''"
-        (click)="onClose()"
-        (keydown.enter)="onClose('enter')"
-      >
-      </span>
+        <div #tagContainer class="po-tag-value" [p-tooltip]="getWidthTag() ? value : ''" p-tooltip-position="top">
+          <span
+            [ngStyle]="
+              !tagColor && inverse && !customTextColor
+                ? { 'color': customColor }
+                : !type && customTextColor && !removable
+                ? { 'color': customTextColor }
+                : ''
+            "
+            >{{ value }}</span
+          >
+        </div>
+
+        <span
+          #tagClose
+          *ngIf="removable"
+          p-tooltip-position="top"
+          [p-tooltip]="literals.remove"
+          [attr.aria-label]="setAriaLabel()"
+          class="po-tag-remove po-icon po-icon-close"
+          [class.po-clickable]="!disabled"
+          [tabindex]="!disabled ? 0 : -1"
+          [attr.role]="!disabled ? 'button' : ''"
+          (click)="onClose()"
+          (keydown.enter)="onClose('enter')"
+        >
+        </span>
+      </div>
     </div>
   </div>
 </div>

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

@@ -149,7 +149,7 @@ describe('PoTagComponent:', () => {
     it('onKeyPressed: should call `onClick` if the event `keydown` is used with `enter` key.', () => {
       fixture.detectChanges();
 
-      const tagElement = fixture.debugElement.query(By.css('.po-tag'));
+      const tagElement = fixture.debugElement.query(By.css('.po-tag-wrapper'));
       const spyOnClick = spyOn(component, 'onClick');
 
       tagElement.triggerEventHandler('keydown.enter', fakeEvent);
@@ -171,7 +171,7 @@ describe('PoTagComponent:', () => {
     it('onKeyPressed: should call `onClick` if the event `keyup` is used with `space` key.', () => {
       fixture.detectChanges();
 
-      const tagElement = fixture.debugElement.query(By.css('.po-tag'));
+      const tagElement = fixture.debugElement.query(By.css('.po-tag-wrapper'));
       const spyOnClick = spyOn(component, 'onClick');
 
       tagElement.triggerEventHandler('keyup.space', fakeEvent);
@@ -191,12 +191,13 @@ describe('PoTagComponent:', () => {
     });
 
     it('onClose: Should have been called onClose', () => {
-      spyOn(component.click, <any>'emit');
       spyOn(component, <any>'onRemove');
+      spyOn(component.remove, 'emit');
 
       component.onClose();
 
-      expect(component.click.emit).toHaveBeenCalledWith('click');
+      expect(component['onRemove']).toHaveBeenCalled();
+      expect(component.remove.emit).toHaveBeenCalledWith('click');
     });
 
     it('onRemove: Should remove the element if not disabled', () => {

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

@@ -86,12 +86,14 @@ export class PoTagComponent extends PoTagBaseComponent implements OnInit {
     if (!this.removable && !this.disabled) {
       const submittedTagItem = { value: this.value, type: this.type, event: event };
       this.click.emit(submittedTagItem);
+      if (this.poTag && this.poTag.nativeElement) {
+        this.poTag.nativeElement.focus();
+      }
     }
   }
 
   onClose(event = 'click') {
     if (!this.disabled) {
-      this.click.emit(event);
       this.onRemove();
       this.remove.emit(event);
     }