fix(popover): corrige posicionamento no po-table com virtual scroll

Adiciona `p-append-in-body` para corrigir o posicionamento do `po-popover`
quando usado dentro de um `po-table` com altura definida e virtual scroll habilitado.

fixes DTHFUI-7133

Author: anabye

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

@@ -28,6 +28,19 @@ const PO_POPOVER_TRIGGERS = ['click', 'hover'];
  */
 @Directive()
 export class PoPopoverBaseComponent {
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define que o popover será inserido no body da página em vez do elemento definido em `p-target`. Essa opção pode
+   * ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o posicionamento
+   * correto do conteúdo próximo ao elemento.
+   *
+   * @default `false`
+   */
+
+  @Input({ alias: 'p-append-in-body', transform: convertToBoolean }) appendBox: boolean = false;
   /**
    * @description
    *

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

@@ -1,8 +1,22 @@
-<div [hidden]="isHidden" class="po-popover" #popoverElement>
-  <div *ngIf="!hideArrow" class="po-popover-arrow po-arrow-{{ arrowDirection }}"></div>
+<ng-container *ngIf="appendBox; then popoverCDK; else popoverDefault"> </ng-container>
 
-  <div class="po-popover-content">
-    <span *ngIf="title" class="po-popover-title">{{ title }}</span>
-    <ng-content></ng-content>
+<ng-template #sharedPopoverContent>
+  <div [hidden]="isHidden" class="po-popover" #popoverElement>
+    <div *ngIf="!hideArrow" class="po-popover-arrow po-arrow-{{ arrowDirection }}"></div>
+
+    <div class="po-popover-content">
+      <span *ngIf="title" class="po-popover-title">{{ title }}</span>
+      <ng-content></ng-content>
+    </div>
   </div>
-</div>
+</ng-template>
+
+<ng-template #popoverDefault>
+  <ng-container *ngTemplateOutlet="sharedPopoverContent"></ng-container>
+</ng-template>
+
+<ng-template #popoverCDK>
+  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="target" [cdkConnectedOverlayOpen]="true">
+    <ng-container *ngTemplateOutlet="sharedPopoverContent"></ng-container>
+  </ng-template>
+</ng-template>

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

@@ -40,7 +40,7 @@ import { PoPopoverBaseComponent } from './po-popover-base.component';
   standalone: false
 })
 export class PoPopoverComponent extends PoPopoverBaseComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('popoverElement', { read: ElementRef, static: true }) popoverElement: ElementRef;
+  @ViewChild('popoverElement', { read: ElementRef, static: false }) popoverElement: ElementRef;
 
   arrowDirection = 'left';
   timeoutResize;

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

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 import { PoPopoverComponent } from './po-popover.component';
 
@@ -8,7 +9,7 @@ import { PoPopoverComponent } from './po-popover.component';
  * Módulo do componente po-popover.
  */
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, OverlayModule],
   declarations: [PoPopoverComponent],
   exports: [PoPopoverComponent]
 })