fix(header): implementa correção para posicionamento do popover

Implementa correção para posicionamento do popover no header;
Nova propriedade 'width' na interface PoHeaderActionPopoverAction;

Fixes: DTHFUI-12554

Author: arthur-polidorio

projects/ui/src/lib/components/po-header/interfaces/po-header-action-tool.interface.ts

@@ -111,12 +111,21 @@ export interface PoHeaderActionTool {
  */
 export interface PoHeaderActionPopoverAction {
   /**
-   *
    * @description
    *
-   * Template que será renderizado dentro do popover
+   * Template que será renderizado dentro do popover.
    */
   content: TemplateRef<any>;
+
+  /**
+   * @description
+   *
+   * Largura, em pixels, do template renderizado dentro do popover.
+   *
+   * Valores permitidos: de 240 a 800.
+   *
+   */
+  width?: number;
 }
 
 /**

projects/ui/src/lib/components/po-header/po-header-customer/po-header-customer.component.html

@@ -46,7 +46,14 @@
 }
 
 @if (headerUser?.popover) {
-  <po-popover #poPopoverAction [p-target]="targetRef" p-position="bottom-left" [p-hide-arrow]="true">
+  <po-popover
+    #poPopoverAction
+    p-position="bottom-right"
+    [p-width]="headerUser.popover.width"
+    [p-target]="targetRef"
+    [p-hide-arrow]="true"
+    [p-corner-aligned]="true"
+  >
     <ng-container *ngTemplateOutlet="headerUser.popover.content"></ng-container>
   </po-popover>
 }

projects/ui/src/lib/components/po-header/po-header-tools/po-header-tools.component.html

@@ -36,9 +36,11 @@
       @if (action?.popover) {
         <po-popover
           #poPopoverAction
+          p-position="bottom-right"
+          [p-width]="action.popover.width"
           [p-target]="buttonActionElements?.get(i)"
-          p-position="bottom-left"
           [p-hide-arrow]="true"
+          [p-corner-aligned]="true"
         >
           <ng-container *ngTemplateOutlet="action.popover?.content"></ng-container>
         </po-popover>

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

@@ -45,6 +45,10 @@ export class PoPopoverBaseComponent {
    */
 
   @Input({ alias: 'p-append-in-body', transform: convertToBoolean }) appendBox: boolean = false;
+
+  // Indica se o elemento filho será alinhado nos cantos do elemento pai.
+  @Input('p-corner-aligned') cornerAligned = false;
+
   /**
    * @description
    *
@@ -93,6 +97,9 @@ export class PoPopoverBaseComponent {
   /** Título do popover. */
   @Input('p-title') title?: string;
 
+  // Define o width do popover.
+  @Input('p-width') width?: number;
+
   /** Evento disparado ao fechar o popover. */
   @Output('p-close') closePopover = new EventEmitter<any>();
 

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

@@ -12,7 +12,13 @@
 }
 
 <ng-template #sharedPopoverContent>
-  <div #popoverElement [hidden]="isHidden" class="po-popover" [ngClass]="customClasses()">
+  <div
+    #popoverElement
+    [hidden]="isHidden"
+    class="po-popover"
+    [style.width.px]="width ?? widthPopover"
+    [ngClass]="customClasses()"
+  >
     @if (!hideArrow) {
       <div class="po-popover-arrow po-arrow-{{ arrowDirection }}"></div>
     }