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
po-ui · Jan 4, 2024 · 9c24b64 · 9c24b64
1 parent 51c7eb5
commit 9c24b64
Showing 1 changed file with 51 additions and 40 deletions.
diff --git a/projects/ui/src/lib/components/po-tag/po-tag.component.html b/projects/ui/src/lib/components/po-tag/po-tag.component.html
@@ -5,62 +5,73 @@
 
   <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()"
       (keydown.enter)="onKeyPressed($event)"
       (keydown.space)="$event.preventDefault()"
       (keyup.space)="onKeyPressed($event)"
     >
-      <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"
+        [attr.role]="isClickable && !disabled ? 'button' : ''"
+        [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()"
+        (keydown.enter)="onKeyPressed($event)"
+        (keydown.space)="$event.preventDefault()"
+        (keyup.space)="onKeyPressed($event)"
       >
-      </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>