@po-ui/ng-components 21.23.1 → 21.25.0

package/fesm2022/po-ui-ng-components.mjs

@@ -7012,6 +7012,18 @@ class PoPopoverBaseComponent {
     appendBox = false;
     // Indica se o elemento filho será alinhado nos cantos do elemento pai.
     cornerAligned = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o espaçamento (em pixels) entre o componente alvo (`p-target`) e o `po-popover`.
+     * Útil para componentes com targets pequenos (como ícones) onde o espaçamento padrão é
+     * proporcionalmente muito grande e cria desalinhamento visual.
+     *
+     * @default `8`
+     */
+    offset = 8;
     /**
      * @description
      *
@@ -7150,7 +7162,7 @@ class PoPopoverBaseComponent {
      */
     customClasses = input(undefined, { ...(ngDevMode ? { debugName: "customClasses" } : /* istanbul ignore next */ {}), alias: 'p-custom-classes' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoPopoverBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: PoPopoverBaseComponent, isStandalone: false, selector: "po-popover-base", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, cornerAligned: { classPropertyName: "cornerAligned", publicName: "p-corner-aligned", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "p-target", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "p-width", isSignal: false, isRequired: false, transformFunction: null }, hideArrow: { classPropertyName: "hideArrow", publicName: "p-hide-arrow", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "p-position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "p-trigger", isSignal: false, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "p-custom-classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopover: "p-close", openPopover: "p-open" }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: PoPopoverBaseComponent, isStandalone: false, selector: "po-popover-base", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, cornerAligned: { classPropertyName: "cornerAligned", publicName: "p-corner-aligned", isSignal: false, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "p-offset", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "p-target", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "p-width", isSignal: false, isRequired: false, transformFunction: null }, hideArrow: { classPropertyName: "hideArrow", publicName: "p-hide-arrow", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "p-position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "p-trigger", isSignal: false, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "p-custom-classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopover: "p-close", openPopover: "p-open" }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoPopoverBaseComponent, decorators: [{
             type: Component,
@@ -7165,6 +7177,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }], cornerAligned: [{
                 type: Input,
                 args: ['p-corner-aligned']
+            }], offset: [{
+                type: Input,
+                args: ['p-offset']
             }], target: [{
                 type: Input,
                 args: ['p-target']
@@ -7316,6 +7331,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
     }
     showPopover() {
         requestAnimationFrame(() => {
+            this.stabilizePopoverWidth();
             this.setElementsControlPosition();
             this.setPopoverPosition();
             this.setOpacity(1);
@@ -7324,6 +7340,40 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
             this.cd.detectChanges();
         });
     }
+    stabilizePopoverWidth() {
+        if (this.width != null || this.widthPopover != null)
+            return;
+        const el = this.popoverElement?.nativeElement;
+        const target = this.targetElement;
+        if (!el || !target)
+            return;
+        el.style.left = '0px';
+        el.style.top = '0px';
+        const natural = el.getBoundingClientRect().width;
+        const tRect = target.getBoundingClientRect();
+        const cx = tRect.left + tRect.width / 2;
+        const halfTarget = tRect.width / 2;
+        const vp = window.innerWidth;
+        const safety = 2;
+        const candidates = [];
+        if (cx + 15 <= vp)
+            candidates.push(cx + 15 - safety);
+        if (cx - 15 >= 0)
+            candidates.push(vp - cx + 15 - safety);
+        const centered = 2 * Math.min(cx, vp - cx) - safety;
+        if (centered > 0)
+            candidates.push(centered);
+        const leftMax = cx - halfTarget - this.offset - safety;
+        if (leftMax > 0)
+            candidates.push(leftMax);
+        const rightMax = vp - cx - halfTarget - this.offset - safety;
+        if (rightMax > 0)
+            candidates.push(rightMax);
+        const minWidth = 240;
+        const maxFit = candidates.length ? Math.max(...candidates) : natural;
+        this.widthPopover = Math.max(minWidth, Math.min(natural, maxFit));
+        this.cd.detectChanges();
+    }
     ensurePopoverPosition() {
         setTimeout(() => {
             this.setElementsControlPosition();
@@ -7408,8 +7458,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         this.keydownPopoverListener?.();
     }
     setElementsControlPosition() {
-        const popoverOffset = 8;
-        this.poControlPosition.setElements(this.popoverElement.nativeElement, popoverOffset, this.target, undefined, false, this.cornerAligned);
+        this.poControlPosition.setElements(this.popoverElement.nativeElement, this.offset, this.target, undefined, false, this.cornerAligned);
     }
     focusOnTarget() {
         const el = this.targetElement;
@@ -7518,10 +7567,10 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         this.disconnectResizeObserver();
         if (!this.popoverElement?.nativeElement)
             return;
-        let initialCall = true;
+        let baselineFired = false;
         this.resizeObserver = new ResizeObserver(() => {
-            if (initialCall) {
-                initialCall = false;
+            if (!baselineFired) {
+                baselineFired = true;
                 return;
             }
             this.setElementsControlPosition();
@@ -7613,21 +7662,6 @@ class PoHelperComponent extends PoHelperBaseComponent {
     }
     ngAfterViewInit() {
         PoHelperComponent.instances.push(this);
-        queueMicrotask(() => {
-            this.setPopoverPositionByScreen();
-        });
-    }
-    setPopoverPositionByScreen() {
-        if (!this.target?.nativeElement)
-            return;
-        const rect = this.target.nativeElement.getBoundingClientRect();
-        const screenWidth = window.innerWidth || document.documentElement.clientWidth;
-        if (rect.right + 400 > screenWidth) {
-            this.popoverPosition = 'left';
-        }
-        else {
-            this.popoverPosition = 'right';
-        }
     }
     ngOnChanges(changes) {
         if (changes.size) {
@@ -7748,11 +7782,11 @@ class PoHelperComponent extends PoHelperBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoHelperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PoHelperComponent, isStandalone: false, selector: "po-helper", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ElementRef, static: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "poButton", first: true, predicate: PoButtonComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-helper-container po-helper-target\"\n  #target\n  [attr.tabindex]=\"disabled() ? null : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"!popover.isHidden\"\n  [attr.aria-controls]=\"'popover-content-' + id\"\n  [attr.aria-describedby]=\"!popover.isHidden ? 'popover-content-' + id : null\"\n  [class.po-helper-disabled]=\"disabled()\"\n  (keydown)=\"onKeyDown($event)\"\n  (click)=\"openHelperPopover(); emitClick($event); popover.ensurePopoverPosition()\"\n>\n  <po-icon [p-icon]=\"helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'\"></po-icon>\n  <po-popover\n    #popover\n    [p-position]=\"popoverPosition\"\n    [p-target]=\"target\"\n    [p-title]=\"helper()?.title\"\n    [p-append-in-body]=\"appendBox()\"\n    p-custom-classes=\"po-helper-popover\"\n    p-trigger=\"function\"\n    (p-close)=\"handleClose()\"\n    (p-open)=\"handleOpen()\"\n  >\n    <div [id]=\"'popover-content-' + id\" role=\"dialog\" aria-modal=\"false\" tabindex=\"-1\">\n      <span class=\"po-helper-content-text\">\n        @for (fragment of contentFragments(); track $index) {\n          <span\n            [class.po-text-bold]=\"fragment.bold\"\n            [class.po-text-italic]=\"fragment.italic\"\n            [class.po-text-underline]=\"fragment.underline\"\n            >{{ fragment.text }}</span\n          >\n        }\n      </span>\n      @if (helper()?.type === 'help' && helper()?.footerAction) {\n        <po-divider></po-divider>\n        <po-link\n          class=\"po-helper-footer-action-link\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n          (p-action)=\"helper()?.footerAction?.action()\"\n          [p-label]=\"helper()?.footerAction?.label\"\n        >\n        </po-link>\n      }\n    </div>\n  </po-popover>\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoDividerComponent, selector: "po-divider" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PoHelperComponent, isStandalone: false, selector: "po-helper", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ElementRef, static: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "poButton", first: true, predicate: PoButtonComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-helper-container po-helper-target\"\n  #target\n  [attr.tabindex]=\"disabled() ? null : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"!popover.isHidden\"\n  [attr.aria-controls]=\"'popover-content-' + id\"\n  [attr.aria-describedby]=\"!popover.isHidden ? 'popover-content-' + id : null\"\n  [class.po-helper-disabled]=\"disabled()\"\n  (keydown)=\"onKeyDown($event)\"\n  (click)=\"openHelperPopover(); emitClick($event)\"\n>\n  <po-icon [p-icon]=\"helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'\"></po-icon>\n  <po-popover\n    #popover\n    [p-position]=\"popoverPosition\"\n    [p-target]=\"target\"\n    [p-title]=\"helper()?.title\"\n    [p-append-in-body]=\"appendBox()\"\n    [p-offset]=\"8\"\n    p-custom-classes=\"po-helper-popover\"\n    p-trigger=\"function\"\n    (p-close)=\"handleClose()\"\n    (p-open)=\"handleOpen()\"\n  >\n    <div [id]=\"'popover-content-' + id\" role=\"dialog\" aria-modal=\"false\" tabindex=\"-1\">\n      <span class=\"po-helper-content-text\">\n        @for (fragment of contentFragments(); track $index) {\n          <span\n            [class.po-text-bold]=\"fragment.bold\"\n            [class.po-text-italic]=\"fragment.italic\"\n            [class.po-text-underline]=\"fragment.underline\"\n            >{{ fragment.text }}</span\n          >\n        }\n      </span>\n      @if (helper()?.type === 'help' && helper()?.footerAction) {\n        <po-divider></po-divider>\n        <po-link\n          class=\"po-helper-footer-action-link\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n          (p-action)=\"helper()?.footerAction?.action()\"\n          [p-label]=\"helper()?.footerAction?.label\"\n        >\n        </po-link>\n      }\n    </div>\n  </po-popover>\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoDividerComponent, selector: "po-divider" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoHelperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-helper', standalone: false, template: "<div\n  class=\"po-helper-container po-helper-target\"\n  #target\n  [attr.tabindex]=\"disabled() ? null : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"!popover.isHidden\"\n  [attr.aria-controls]=\"'popover-content-' + id\"\n  [attr.aria-describedby]=\"!popover.isHidden ? 'popover-content-' + id : null\"\n  [class.po-helper-disabled]=\"disabled()\"\n  (keydown)=\"onKeyDown($event)\"\n  (click)=\"openHelperPopover(); emitClick($event); popover.ensurePopoverPosition()\"\n>\n  <po-icon [p-icon]=\"helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'\"></po-icon>\n  <po-popover\n    #popover\n    [p-position]=\"popoverPosition\"\n    [p-target]=\"target\"\n    [p-title]=\"helper()?.title\"\n    [p-append-in-body]=\"appendBox()\"\n    p-custom-classes=\"po-helper-popover\"\n    p-trigger=\"function\"\n    (p-close)=\"handleClose()\"\n    (p-open)=\"handleOpen()\"\n  >\n    <div [id]=\"'popover-content-' + id\" role=\"dialog\" aria-modal=\"false\" tabindex=\"-1\">\n      <span class=\"po-helper-content-text\">\n        @for (fragment of contentFragments(); track $index) {\n          <span\n            [class.po-text-bold]=\"fragment.bold\"\n            [class.po-text-italic]=\"fragment.italic\"\n            [class.po-text-underline]=\"fragment.underline\"\n            >{{ fragment.text }}</span\n          >\n        }\n      </span>\n      @if (helper()?.type === 'help' && helper()?.footerAction) {\n        <po-divider></po-divider>\n        <po-link\n          class=\"po-helper-footer-action-link\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n          (p-action)=\"helper()?.footerAction?.action()\"\n          [p-label]=\"helper()?.footerAction?.label\"\n        >\n        </po-link>\n      }\n    </div>\n  </po-popover>\n</div>\n" }]
+            args: [{ selector: 'po-helper', standalone: false, template: "<div\n  class=\"po-helper-container po-helper-target\"\n  #target\n  [attr.tabindex]=\"disabled() ? null : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"!popover.isHidden\"\n  [attr.aria-controls]=\"'popover-content-' + id\"\n  [attr.aria-describedby]=\"!popover.isHidden ? 'popover-content-' + id : null\"\n  [class.po-helper-disabled]=\"disabled()\"\n  (keydown)=\"onKeyDown($event)\"\n  (click)=\"openHelperPopover(); emitClick($event)\"\n>\n  <po-icon [p-icon]=\"helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'\"></po-icon>\n  <po-popover\n    #popover\n    [p-position]=\"popoverPosition\"\n    [p-target]=\"target\"\n    [p-title]=\"helper()?.title\"\n    [p-append-in-body]=\"appendBox()\"\n    [p-offset]=\"8\"\n    p-custom-classes=\"po-helper-popover\"\n    p-trigger=\"function\"\n    (p-close)=\"handleClose()\"\n    (p-open)=\"handleOpen()\"\n  >\n    <div [id]=\"'popover-content-' + id\" role=\"dialog\" aria-modal=\"false\" tabindex=\"-1\">\n      <span class=\"po-helper-content-text\">\n        @for (fragment of contentFragments(); track $index) {\n          <span\n            [class.po-text-bold]=\"fragment.bold\"\n            [class.po-text-italic]=\"fragment.italic\"\n            [class.po-text-underline]=\"fragment.underline\"\n            >{{ fragment.text }}</span\n          >\n        }\n      </span>\n      @if (helper()?.type === 'help' && helper()?.footerAction) {\n        <po-divider></po-divider>\n        <po-link\n          class=\"po-helper-footer-action-link\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n          (p-action)=\"helper()?.footerAction?.action()\"\n          [p-label]=\"helper()?.footerAction?.label\"\n        >\n        </po-link>\n      }\n    </div>\n  </po-popover>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', { read: ElementRef, static: true }]
@@ -9734,6 +9768,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
  *  <file name="sample-po-button-group-attendance/sample-po-button-group-attendance.component.ts"> </file>
  * </example>
  *
+ * <example name="po-button-group-opening-service-ticket" title="PO Button Group - Opening Service Ticket">
+ *  <file name="sample-po-button-group-opening-service-ticket/sample-po-button-group-opening-service-ticket.component.html"> </file>
+ *  <file name="sample-po-button-group-opening-service-ticket/sample-po-button-group-opening-service-ticket.component.ts"> </file>
+ * </example>
+ *
  * <example name="po-button-group-post" title="PO Button Group - Post">
  *  <file name="sample-po-button-group-post/sample-po-button-group-post.component.html"> </file>
  *  <file name="sample-po-button-group-post/sample-po-button-group-post.component.ts"> </file>
@@ -9741,11 +9780,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
  */
 class PoButtonGroupComponent extends PoButtonGroupBaseComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PoButtonGroupComponent, isStandalone: false, selector: "po-button-group", usesInheritance: true, ngImport: i0, template: "<div class=\"po-button-group-container\">\n  @for (button of buttons(); track button; let i = $index) {\n    <po-button\n      class=\"po-sm-12 po-button-group\"\n      [class.po-button-group-button-selected]=\"button.selected\"\n      [class.po-button-group-disabled]=\"button.disabled\"\n      p-tooltip-position=\"bottom\"\n      [p-disabled]=\"button.disabled\"\n      [p-icon]=\"button.icon\"\n      [p-label]=\"button.label\"\n      [p-size]=\"size\"\n      [p-tooltip]=\"!button.disabled ? button.tooltip : undefined\"\n      (p-click)=\"onButtonClick(button, i); button.action(button)\"\n    >\n    </po-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PoButtonGroupComponent, isStandalone: false, selector: "po-button-group", usesInheritance: true, ngImport: i0, template: "<div class=\"po-button-group-container\">\n  @for (button of buttons(); track button; let i = $index) {\n    <po-button\n      class=\"po-sm-12 po-button-group\"\n      [class.po-button-group-button-selected]=\"button.selected\"\n      [class.po-button-group-disabled]=\"button.disabled\"\n      [p-disabled]=\"button.disabled\"\n      [p-icon]=\"button.icon\"\n      [p-label]=\"button.label\"\n      [p-size]=\"size\"\n      [p-tooltip]=\"!button.disabled ? button.tooltip : undefined\"\n      p-tooltip-position=\"bottom\"\n      [p-append-in-body]=\"true\"\n      (p-click)=\"onButtonClick(button, i); button.action(button)\"\n    >\n    </po-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-button-group', standalone: false, template: "<div class=\"po-button-group-container\">\n  @for (button of buttons(); track button; let i = $index) {\n    <po-button\n      class=\"po-sm-12 po-button-group\"\n      [class.po-button-group-button-selected]=\"button.selected\"\n      [class.po-button-group-disabled]=\"button.disabled\"\n      p-tooltip-position=\"bottom\"\n      [p-disabled]=\"button.disabled\"\n      [p-icon]=\"button.icon\"\n      [p-label]=\"button.label\"\n      [p-size]=\"size\"\n      [p-tooltip]=\"!button.disabled ? button.tooltip : undefined\"\n      (p-click)=\"onButtonClick(button, i); button.action(button)\"\n    >\n    </po-button>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-button-group', standalone: false, template: "<div class=\"po-button-group-container\">\n  @for (button of buttons(); track button; let i = $index) {\n    <po-button\n      class=\"po-sm-12 po-button-group\"\n      [class.po-button-group-button-selected]=\"button.selected\"\n      [class.po-button-group-disabled]=\"button.disabled\"\n      [p-disabled]=\"button.disabled\"\n      [p-icon]=\"button.icon\"\n      [p-label]=\"button.label\"\n      [p-size]=\"size\"\n      [p-tooltip]=\"!button.disabled ? button.tooltip : undefined\"\n      p-tooltip-position=\"bottom\"\n      [p-append-in-body]=\"true\"\n      (p-click)=\"onButtonClick(button, i); button.action(button)\"\n    >\n    </po-button>\n  }\n</div>\n" }]
         }] });
 
 /**
@@ -17556,7 +17595,7 @@ class PoChartGridUtils {
             left: this.component.options?.axis?.paddingLeft || 16,
             right: this.component.options?.axis?.paddingRight || 32,
             bottom: this.component.options?.axis?.paddingBottom || paddingBottom,
-            containLabel: true,
+            outerBoundsMode: 'same',
             borderWidth: tokenBorderWidthSm
         };
     }
@@ -17623,7 +17662,6 @@ class PoChartGridUtils {
                 realtime: true,
                 bottom: this.component.options?.bottomDataZoom || 'calc(100%)',
                 height: 25,
-                right: this.component.options?.axis?.paddingRight || 32,
                 xAxisIndex: [0]
             },
             {
@@ -25312,8 +25350,8 @@ class PoDialogService extends PoDialogBaseService {
     }
     openDialog(dialogType, dialogOptions) {
         const componentRef = this.poComponentInjector.createComponentInApplication(PoDialogComponent);
-        componentRef.changeDetectorRef.detectChanges();
         componentRef.instance.open(dialogOptions, dialogType, componentRef);
+        componentRef.changeDetectorRef.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoDialogService, deps: [{ token: PoComponentInjectorService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoDialogService, providedIn: 'root' });
@@ -41802,6 +41840,7 @@ class PoTableComponent extends PoTableBaseComponent {
         this.changeHeaderWidth();
         this.changeSizeLoading();
         this.applyFixedColumns();
+        this.initializeVisibleElement();
     }
     showMoreInfiniteScroll({ target }) {
         const scrollPosition = target.offsetHeight + target.scrollTop;
@@ -41815,10 +41854,8 @@ class PoTableComponent extends PoTableBaseComponent {
         this.verifyCalculateHeightTableContainer();
         // Permite que os cabeçalhos sejam calculados na primeira vez que o componente torna-se visível,
         // evitando com isso, problemas com Tabs ou Divs que iniciem escondidas.
-        if (this.tableWrapperElement?.nativeElement.offsetWidth && !this.visibleElement && this.initialized) {
-            this.debounceResize();
-            this.checkInfiniteScroll();
-            this.visibleElement = true;
+        if (this.initialized) {
+            this.initializeVisibleElement();
         }
     }
     ngOnDestroy() {
@@ -42400,6 +42437,7 @@ class PoTableComponent extends PoTableBaseComponent {
         this.timeoutResize = setTimeout(() => {
             // show the table
             this.setTableOpacity(1);
+            this.changeDetector.markForCheck();
         });
     }
     deleteItemsLocal(newItems, newItemsFiltered) {
@@ -42484,6 +42522,13 @@ class PoTableComponent extends PoTableBaseComponent {
         });
         return mergedIcons;
     }
+    initializeVisibleElement() {
+        if (this.tableWrapperElement?.nativeElement.offsetWidth && !this.visibleElement) {
+            this.debounceResize();
+            this.checkInfiniteScroll();
+            this.visibleElement = true;
+        }
+    }
     removeListeners() {
         if (this.resizeListener) {
             this.resizeListener();
@@ -60143,6 +60188,7 @@ class PoListViewComponent extends PoListViewBaseComponent {
     listViewContentTemplate;
     listViewDetailTemplate;
     poPopupComponent;
+    popupActions = [];
     differ;
     constructor() {
         const differs = inject(IterableDiffers);
@@ -60159,19 +60205,9 @@ class PoListViewComponent extends PoListViewBaseComponent {
     get displayShowMoreButton() {
         return this.items && this.items.length > 0 && this.showMore.observers.length > 0;
     }
-    get showButtonsActions() {
-        return this.visibleActions && this.visibleActions.length > 0 && this.visibleActions.length <= 2;
-    }
-    get showPopupActions() {
-        return this.visibleActions && this.visibleActions.length > 2;
-    }
     get titleHasAction() {
         return this.titleAction.observers.length > 0;
     }
-    get visibleActions() {
-        return (this.actions &&
-            this.actions.filter(action => this.returnBooleanValue(action, action.visible, 'visible') !== false));
-    }
     ngAfterContentInit() {
         this.initShowDetail();
     }
@@ -60202,12 +60238,17 @@ class PoListViewComponent extends PoListViewBaseComponent {
     }
     togglePopup(item, targetRef) {
         this.popupTarget = targetRef;
+        this.popupActions = this.getVisibleActions(item);
         this.changeDetector.detectChanges();
         this.poPopupComponent.toggle(item);
     }
     onAnimationEvent(event, detail) {
         this.showDetail.emit(detail);
     }
+    // Avalia a visibilidade das ações por item, passando o item corrente.
+    getVisibleActions(item) {
+        return this.actions?.filter(action => this.returnBooleanValue(action, item, 'visible') !== false) ?? [];
+    }
     checkItemsChange() {
         const changesItems = this.differ.diff(this.items);
         if (changesItems && this.selectAll) {
@@ -60223,7 +60264,7 @@ class PoListViewComponent extends PoListViewBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PoListViewComponent, isStandalone: false, selector: "po-list-view", queries: [{ propertyName: "listViewContentTemplate", first: true, predicate: PoListViewContentTemplateDirective, descendants: true, static: true }, { propertyName: "listViewDetailTemplate", first: true, predicate: PoListViewDetailTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "poPopupComponent", first: true, predicate: ["popup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [class.po-list-view-main-container-header]=\"showHeader\"\n  [class.po-list-view-main-container]=\"!showHeader\"\n  [style.height.px]=\"height\"\n>\n  @if (showHeader) {\n    <div class=\"po-list-view-main-header\">\n      <div class=\"po-checkbox-group-item\">\n        <div class=\"po-list-view-main-select\">\n          <po-checkbox\n            name=\"selectAll\"\n            [(ngModel)]=\"selectAll\"\n            [p-label]=\"literals.selectAll\"\n            [p-size]=\"componentsSize\"\n            (p-change)=\"selectAllListItems()\"\n            (click)=\"selectAllListItems()\"\n          ></po-checkbox>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"po-list-view-main-content\">\n    @if (!hasItems()) {\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </div>\n      </po-container>\n    }\n\n    @for (item of items; track trackBy($index); let index = $index) {\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container\">\n          <div class=\"po-list-view-header\">\n            <div class=\"po-list-view-title\" [ngSwitch]=\"checkTitleType(item)\">\n              @if (select) {\n                <div class=\"po-list-view-select\">\n                  <po-checkbox\n                    [(ngModel)]=\"item.$selected\"\n                    name=\"checkbox\"\n                    [p-size]=\"componentsSize\"\n                    (p-change)=\"selectListItem(item)\"\n                    (click)=\"selectListItem(item)\"\n                  ></po-checkbox>\n                </div>\n              }\n\n              <a\n                *ngSwitchCase=\"'externalLink'\"\n                class=\"po-list-view-title-link\"\n                target=\"_blank\"\n                [href]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <a\n                *ngSwitchCase=\"'internalLink'\"\n                class=\"po-list-view-title-link\"\n                [routerLink]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <span\n                *ngSwitchCase=\"'noLink'\"\n                class=\"po-list-view-title-no-link\"\n                [class.po-list-view-title-link]=\"titleHasAction\"\n                (click)=\"titleHasAction && runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </span>\n            </div>\n\n            @if (showButtonsActions) {\n              <div class=\"po-list-view-actions\">\n                @for (action of visibleActions; track action) {\n                  <po-button\n                    [p-disabled]=\"returnBooleanValue(action, item, 'disabled')\"\n                    [p-icon]=\"action.icon\"\n                    [p-label]=\"action.label\"\n                    [p-danger]=\"action.type === 'danger'\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"onClickAction(action, item)\"\n                  >\n                  </po-button>\n                }\n              </div>\n            }\n\n            @if (showPopupActions) {\n              <div class=\"po-list-view-more-actions\">\n                <div #popupTarget class=\"po-list-view-more-icon po-clickable\" (click)=\"togglePopup(item, popupTarget)\">\n                  <po-icon p-icon=\"ICON_MORE\"></po-icon>\n                </div>\n              </div>\n            }\n          </div>\n\n          @if (hasContentTemplate) {\n            <div class=\"po-list-view-content\">\n              <ng-template\n                [ngTemplateOutlet]=\"listViewContentTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n              >\n              </ng-template>\n            </div>\n          }\n\n          @if (hasDetailTemplate && item.$showDetail) {\n            <div\n              @showHideDetail\n              (@showHideDetail.start)=\"item.$showDetail ? onAnimationEvent($event, item) : 'undefined'\"\n              class=\"po-list-view-detail\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"listViewDetailTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n              >\n              </ng-template>\n            </div>\n          }\n        </div>\n\n        @if (hasDetailTemplate) {\n          <div class=\"po-list-view-detail-button\">\n            <po-button\n              p-kind=\"tertiary\"\n              [p-label]=\"item.$showDetail ? literals.hideDetails : literals.showDetails\"\n              [p-size]=\"componentsSize\"\n              (p-click)=\"item.$showDetail = !item.$showDetail\"\n            >\n            </po-button>\n          </div>\n        }\n      </po-container>\n    }\n  </div>\n</div>\n\n@if (displayShowMoreButton) {\n  <div class=\"po-mb-2 po-text-center\">\n    <po-button\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PoListViewComponent, isStandalone: false, selector: "po-list-view", queries: [{ propertyName: "listViewContentTemplate", first: true, predicate: PoListViewContentTemplateDirective, descendants: true, static: true }, { propertyName: "listViewDetailTemplate", first: true, predicate: PoListViewDetailTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "poPopupComponent", first: true, predicate: ["popup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [class.po-list-view-main-container-header]=\"showHeader\"\n  [class.po-list-view-main-container]=\"!showHeader\"\n  [style.height.px]=\"height\"\n>\n  @if (showHeader) {\n    <div class=\"po-list-view-main-header\">\n      <div class=\"po-checkbox-group-item\">\n        <div class=\"po-list-view-main-select\">\n          <po-checkbox\n            name=\"selectAll\"\n            [(ngModel)]=\"selectAll\"\n            [p-label]=\"literals.selectAll\"\n            [p-size]=\"componentsSize\"\n            (p-change)=\"selectAllListItems()\"\n            (click)=\"selectAllListItems()\"\n          ></po-checkbox>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"po-list-view-main-content\">\n    @if (!hasItems()) {\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </div>\n      </po-container>\n    }\n\n    @for (item of items; track trackBy($index); let index = $index) {\n      @let visibleActionsForItem = getVisibleActions(item);\n\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container\">\n          <div class=\"po-list-view-header\">\n            <div class=\"po-list-view-title\" [ngSwitch]=\"checkTitleType(item)\">\n              @if (select) {\n                <div class=\"po-list-view-select\">\n                  <po-checkbox\n                    [(ngModel)]=\"item.$selected\"\n                    name=\"checkbox\"\n                    [p-size]=\"componentsSize\"\n                    (p-change)=\"selectListItem(item)\"\n                    (click)=\"selectListItem(item)\"\n                  ></po-checkbox>\n                </div>\n              }\n\n              <a\n                *ngSwitchCase=\"'externalLink'\"\n                class=\"po-list-view-title-link\"\n                target=\"_blank\"\n                [href]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <a\n                *ngSwitchCase=\"'internalLink'\"\n                class=\"po-list-view-title-link\"\n                [routerLink]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <span\n                *ngSwitchCase=\"'noLink'\"\n                class=\"po-list-view-title-no-link\"\n                [class.po-list-view-title-link]=\"titleHasAction\"\n                (click)=\"titleHasAction && runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </span>\n            </div>\n\n            @if (visibleActionsForItem.length > 0 && visibleActionsForItem.length <= 2) {\n              <div class=\"po-list-view-actions\">\n                @for (action of visibleActionsForItem; track action) {\n                  <po-button\n                    [p-disabled]=\"returnBooleanValue(action, item, 'disabled')\"\n                    [p-icon]=\"action.icon\"\n                    [p-label]=\"action.label\"\n                    [p-danger]=\"action.type === 'danger'\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"onClickAction(action, item)\"\n                  >\n                  </po-button>\n                }\n              </div>\n            }\n\n            @if (visibleActionsForItem.length > 2) {\n              <div class=\"po-list-view-more-actions\">\n                <div #popupTarget class=\"po-list-view-more-icon po-clickable\" (click)=\"togglePopup(item, popupTarget)\">\n                  <po-icon p-icon=\"ICON_MORE\"></po-icon>\n                </div>\n              </div>\n            }\n          </div>\n\n          @if (hasContentTemplate) {\n            <div class=\"po-list-view-content\">\n              <ng-template\n                [ngTemplateOutlet]=\"listViewContentTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n              >\n              </ng-template>\n            </div>\n          }\n\n          @if (hasDetailTemplate && item.$showDetail) {\n            <div\n              @showHideDetail\n              (@showHideDetail.start)=\"item.$showDetail ? onAnimationEvent($event, item) : 'undefined'\"\n              class=\"po-list-view-detail\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"listViewDetailTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n              >\n              </ng-template>\n            </div>\n          }\n        </div>\n\n        @if (hasDetailTemplate) {\n          <div class=\"po-list-view-detail-button\">\n            <po-button\n              p-kind=\"tertiary\"\n              [p-label]=\"item.$showDetail ? literals.hideDetails : literals.showDetails\"\n              [p-size]=\"componentsSize\"\n              (p-click)=\"item.$showDetail = !item.$showDetail\"\n            >\n            </po-button>\n          </div>\n        }\n      </po-container>\n    }\n  </div>\n</div>\n\n@if (displayShowMoreButton) {\n  <div class=\"po-mb-2 po-text-center\">\n    <po-button\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<po-popup #popup [p-actions]=\"popupActions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }], animations: [
             trigger('showHideDetail', [
                 state('*', style({ 'overflow-y': 'visible' })),
                 state('void', style({ 'overflow-y': 'hidden' })),
@@ -60241,7 +60282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             transition('* => void', [style({ height: '*', 'overflow-y': 'hidden' }), animate(100, style({ height: 0 }))]),
                             transition('void => *', [style({ height: '0' }), animate(100, style({ height: '*' }))])
                         ])
-                    ], standalone: false, template: "<div\n  [class.po-list-view-main-container-header]=\"showHeader\"\n  [class.po-list-view-main-container]=\"!showHeader\"\n  [style.height.px]=\"height\"\n>\n  @if (showHeader) {\n    <div class=\"po-list-view-main-header\">\n      <div class=\"po-checkbox-group-item\">\n        <div class=\"po-list-view-main-select\">\n          <po-checkbox\n            name=\"selectAll\"\n            [(ngModel)]=\"selectAll\"\n            [p-label]=\"literals.selectAll\"\n            [p-size]=\"componentsSize\"\n            (p-change)=\"selectAllListItems()\"\n            (click)=\"selectAllListItems()\"\n          ></po-checkbox>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"po-list-view-main-content\">\n    @if (!hasItems()) {\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </div>\n      </po-container>\n    }\n\n    @for (item of items; track trackBy($index); let index = $index) {\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container\">\n          <div class=\"po-list-view-header\">\n            <div class=\"po-list-view-title\" [ngSwitch]=\"checkTitleType(item)\">\n              @if (select) {\n                <div class=\"po-list-view-select\">\n                  <po-checkbox\n                    [(ngModel)]=\"item.$selected\"\n                    name=\"checkbox\"\n                    [p-size]=\"componentsSize\"\n                    (p-change)=\"selectListItem(item)\"\n                    (click)=\"selectListItem(item)\"\n                  ></po-checkbox>\n                </div>\n              }\n\n              <a\n                *ngSwitchCase=\"'externalLink'\"\n                class=\"po-list-view-title-link\"\n                target=\"_blank\"\n                [href]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <a\n                *ngSwitchCase=\"'internalLink'\"\n                class=\"po-list-view-title-link\"\n                [routerLink]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <span\n                *ngSwitchCase=\"'noLink'\"\n                class=\"po-list-view-title-no-link\"\n                [class.po-list-view-title-link]=\"titleHasAction\"\n                (click)=\"titleHasAction && runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </span>\n            </div>\n\n            @if (showButtonsActions) {\n              <div class=\"po-list-view-actions\">\n                @for (action of visibleActions; track action) {\n                  <po-button\n                    [p-disabled]=\"returnBooleanValue(action, item, 'disabled')\"\n                    [p-icon]=\"action.icon\"\n                    [p-label]=\"action.label\"\n                    [p-danger]=\"action.type === 'danger'\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"onClickAction(action, item)\"\n                  >\n                  </po-button>\n                }\n              </div>\n            }\n\n            @if (showPopupActions) {\n              <div class=\"po-list-view-more-actions\">\n                <div #popupTarget class=\"po-list-view-more-icon po-clickable\" (click)=\"togglePopup(item, popupTarget)\">\n                  <po-icon p-icon=\"ICON_MORE\"></po-icon>\n                </div>\n              </div>\n            }\n          </div>\n\n          @if (hasContentTemplate) {\n            <div class=\"po-list-view-content\">\n              <ng-template\n                [ngTemplateOutlet]=\"listViewContentTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n              >\n              </ng-template>\n            </div>\n          }\n\n          @if (hasDetailTemplate && item.$showDetail) {\n            <div\n              @showHideDetail\n              (@showHideDetail.start)=\"item.$showDetail ? onAnimationEvent($event, item) : 'undefined'\"\n              class=\"po-list-view-detail\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"listViewDetailTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n              >\n              </ng-template>\n            </div>\n          }\n        </div>\n\n        @if (hasDetailTemplate) {\n          <div class=\"po-list-view-detail-button\">\n            <po-button\n              p-kind=\"tertiary\"\n              [p-label]=\"item.$showDetail ? literals.hideDetails : literals.showDetails\"\n              [p-size]=\"componentsSize\"\n              (p-click)=\"item.$showDetail = !item.$showDetail\"\n            >\n            </po-button>\n          </div>\n        }\n      </po-container>\n    }\n  </div>\n</div>\n\n@if (displayShowMoreButton) {\n  <div class=\"po-mb-2 po-text-center\">\n    <po-button\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n" }]
+                    ], standalone: false, template: "<div\n  [class.po-list-view-main-container-header]=\"showHeader\"\n  [class.po-list-view-main-container]=\"!showHeader\"\n  [style.height.px]=\"height\"\n>\n  @if (showHeader) {\n    <div class=\"po-list-view-main-header\">\n      <div class=\"po-checkbox-group-item\">\n        <div class=\"po-list-view-main-select\">\n          <po-checkbox\n            name=\"selectAll\"\n            [(ngModel)]=\"selectAll\"\n            [p-label]=\"literals.selectAll\"\n            [p-size]=\"componentsSize\"\n            (p-change)=\"selectAllListItems()\"\n            (click)=\"selectAllListItems()\"\n          ></po-checkbox>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"po-list-view-main-content\">\n    @if (!hasItems()) {\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </div>\n      </po-container>\n    }\n\n    @for (item of items; track trackBy($index); let index = $index) {\n      @let visibleActionsForItem = getVisibleActions(item);\n\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container\">\n          <div class=\"po-list-view-header\">\n            <div class=\"po-list-view-title\" [ngSwitch]=\"checkTitleType(item)\">\n              @if (select) {\n                <div class=\"po-list-view-select\">\n                  <po-checkbox\n                    [(ngModel)]=\"item.$selected\"\n                    name=\"checkbox\"\n                    [p-size]=\"componentsSize\"\n                    (p-change)=\"selectListItem(item)\"\n                    (click)=\"selectListItem(item)\"\n                  ></po-checkbox>\n                </div>\n              }\n\n              <a\n                *ngSwitchCase=\"'externalLink'\"\n                class=\"po-list-view-title-link\"\n                target=\"_blank\"\n                [href]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <a\n                *ngSwitchCase=\"'internalLink'\"\n                class=\"po-list-view-title-link\"\n                [routerLink]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <span\n                *ngSwitchCase=\"'noLink'\"\n                class=\"po-list-view-title-no-link\"\n                [class.po-list-view-title-link]=\"titleHasAction\"\n                (click)=\"titleHasAction && runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </span>\n            </div>\n\n            @if (visibleActionsForItem.length > 0 && visibleActionsForItem.length <= 2) {\n              <div class=\"po-list-view-actions\">\n                @for (action of visibleActionsForItem; track action) {\n                  <po-button\n                    [p-disabled]=\"returnBooleanValue(action, item, 'disabled')\"\n                    [p-icon]=\"action.icon\"\n                    [p-label]=\"action.label\"\n                    [p-danger]=\"action.type === 'danger'\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"onClickAction(action, item)\"\n                  >\n                  </po-button>\n                }\n              </div>\n            }\n\n            @if (visibleActionsForItem.length > 2) {\n              <div class=\"po-list-view-more-actions\">\n                <div #popupTarget class=\"po-list-view-more-icon po-clickable\" (click)=\"togglePopup(item, popupTarget)\">\n                  <po-icon p-icon=\"ICON_MORE\"></po-icon>\n                </div>\n              </div>\n            }\n          </div>\n\n          @if (hasContentTemplate) {\n            <div class=\"po-list-view-content\">\n              <ng-template\n                [ngTemplateOutlet]=\"listViewContentTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n              >\n              </ng-template>\n            </div>\n          }\n\n          @if (hasDetailTemplate && item.$showDetail) {\n            <div\n              @showHideDetail\n              (@showHideDetail.start)=\"item.$showDetail ? onAnimationEvent($event, item) : 'undefined'\"\n              class=\"po-list-view-detail\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"listViewDetailTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n              >\n              </ng-template>\n            </div>\n          }\n        </div>\n\n        @if (hasDetailTemplate) {\n          <div class=\"po-list-view-detail-button\">\n            <po-button\n              p-kind=\"tertiary\"\n              [p-label]=\"item.$showDetail ? literals.hideDetails : literals.showDetails\"\n              [p-size]=\"componentsSize\"\n              (p-click)=\"item.$showDetail = !item.$showDetail\"\n            >\n            </po-button>\n          </div>\n        }\n      </po-container>\n    }\n  </div>\n</div>\n\n@if (displayShowMoreButton) {\n  <div class=\"po-mb-2 po-text-center\">\n    <po-button\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<po-popup #popup [p-actions]=\"popupActions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n" }]
         }], ctorParameters: () => [], propDecorators: { listViewContentTemplate: [{
                 type: ContentChild,
                 args: [PoListViewContentTemplateDirective, { static: true }]
@@ -63063,6 +63104,7 @@ class PoPageContentComponent extends PoPageContentBaseComponent {
     renderer = inject(Renderer2);
     elementRef = inject(ElementRef);
     ngZone = inject(NgZone);
+    cd = inject(ChangeDetectorRef);
     contentOpacity = 0;
     height = '90%';
     constructor() {
@@ -63084,6 +63126,7 @@ class PoPageContentComponent extends PoPageContentBaseComponent {
         setTimeout(() => {
             this.setHeightContent();
             this.contentOpacity = 1;
+            this.cd.markForCheck();
         });
     }
     setHeightContent() {