@po-ui/ng-components 21.23.1 → 21.24.0

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

@@ -9734,6 +9734,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 +9746,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 +17561,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 +17628,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 +25316,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 +41806,7 @@ class PoTableComponent extends PoTableBaseComponent {
         this.changeHeaderWidth();
         this.changeSizeLoading();
         this.applyFixedColumns();
+        this.initializeVisibleElement();
     }
     showMoreInfiniteScroll({ target }) {
         const scrollPosition = target.offsetHeight + target.scrollTop;
@@ -41815,10 +41820,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 +42403,7 @@ class PoTableComponent extends PoTableBaseComponent {
         this.timeoutResize = setTimeout(() => {
             // show the table
             this.setTableOpacity(1);
+            this.changeDetector.markForCheck();
         });
     }
     deleteItemsLocal(newItems, newItemsFiltered) {
@@ -42484,6 +42488,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 +60154,7 @@ class PoListViewComponent extends PoListViewBaseComponent {
     listViewContentTemplate;
     listViewDetailTemplate;
     poPopupComponent;
+    popupActions = [];
     differ;
     constructor() {
         const differs = inject(IterableDiffers);
@@ -60159,19 +60171,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 +60204,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 +60230,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 +60248,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 +63070,7 @@ class PoPageContentComponent extends PoPageContentBaseComponent {
     renderer = inject(Renderer2);
     elementRef = inject(ElementRef);
     ngZone = inject(NgZone);
+    cd = inject(ChangeDetectorRef);
     contentOpacity = 0;
     height = '90%';
     constructor() {
@@ -63084,6 +63092,7 @@ class PoPageContentComponent extends PoPageContentBaseComponent {
         setTimeout(() => {
             this.setHeightContent();
             this.contentOpacity = 1;
+            this.cd.markForCheck();
         });
     }
     setHeightContent() {