@po-ui/ng-components 17.26.3 → 17.26.5

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ViewChildren, ContentChildren, HostBinding, inject, forwardRef, ViewContainerRef, ContentChild, Pipe, Injector, APP_INITIALIZER } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ChangeDetectorRef, inject, ViewChildren, ContentChildren, HostBinding, forwardRef, ViewContainerRef, ContentChild, Pipe, Injector, APP_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, DecimalPipe, NgOptimizedImage, CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
 import * as i2$3 from '@angular/animations';
@@ -435,7 +435,7 @@ function PoIconComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r1.class);
 } }
-const _c0$1K = ["*"];
+const _c0$1L = ["*"];
 /**
  * @docsPrivate
  *
@@ -524,7 +524,7 @@ class PoIconComponent {
         return iconName.includes(' ') ? iconName.split(' ') : iconName;
     }
     static ɵfac = function PoIconComponent_Factory(t) { return new (t || PoIconComponent)(i0.ɵɵdirectiveInject(ICONS_DICTIONARY, 8)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoIconComponent, selectors: [["po-icon"]], inputs: { icon: [i0.ɵɵInputFlags.None, "p-icon", "icon"] }, ngContentSelectors: _c0$1K, decls: 3, vars: 3, consts: [[4, "ngIf", "ngIfThen", "ngIfElse"], ["fontTemplate", ""], ["aria-hidden", "true"]], template: function PoIconComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoIconComponent, selectors: [["po-icon"]], inputs: { icon: [i0.ɵɵInputFlags.None, "p-icon", "icon"] }, ngContentSelectors: _c0$1L, decls: 3, vars: 3, consts: [[4, "ngIf", "ngIfThen", "ngIfElse"], ["fontTemplate", ""], ["aria-hidden", "true"]], template: function PoIconComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, PoIconComponent_ng_container_0_Template, 1, 0, "ng-container", 0)(1, PoIconComponent_ng_template_1_Template, 2, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
@@ -2589,8 +2589,8 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
             args: ['keydown', ['$event']]
         }] }); })();
 
-const _c0$1J = ["tagContainer"];
-const _c1$I = ["tagClose"];
+const _c0$1K = ["tagContainer"];
+const _c1$K = ["tagClose"];
 const _c2$l = ["poTag"];
 function PoTagComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "span", 13);
@@ -2726,8 +2726,8 @@ class PoTagComponent extends PoTagBaseComponent {
     }
     static ɵfac = function PoTagComponent_Factory(t) { return new (t || PoTagComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTagComponent, selectors: [["po-tag"]], viewQuery: function PoTagComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1J, 7);
-            i0.ɵɵviewQuery(_c1$I, 7);
+            i0.ɵɵviewQuery(_c0$1K, 7);
+            i0.ɵɵviewQuery(_c1$K, 7);
             i0.ɵɵviewQuery(_c2$l, 7);
         } if (rf & 2) {
             let _t;
@@ -2833,11 +2833,11 @@ function PoAccordionItemBodyComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     i0.ɵɵproperty("@toggleBody", undefined);
 } }
-const _c0$1I = ["*"];
+const _c0$1J = ["*"];
 class PoAccordionItemBodyComponent {
     expanded = false;
     static ɵfac = function PoAccordionItemBodyComponent_Factory(t) { return new (t || PoAccordionItemBodyComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemBodyComponent, selectors: [["po-accordion-item-body"]], inputs: { expanded: [i0.ɵɵInputFlags.None, "p-expanded", "expanded"] }, ngContentSelectors: _c0$1I, decls: 1, vars: 1, consts: [["class", "po-accordion-item-body", 4, "ngIf"], [1, "po-accordion-item-body"], [1, "po-accordion-item-body-content"]], template: function PoAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemBodyComponent, selectors: [["po-accordion-item-body"]], inputs: { expanded: [i0.ɵɵInputFlags.None, "p-expanded", "expanded"] }, ngContentSelectors: _c0$1J, decls: 1, vars: 1, consts: [["class", "po-accordion-item-body", 4, "ngIf"], [1, "po-accordion-item-body"], [1, "po-accordion-item-body-content"]], template: function PoAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, PoAccordionItemBodyComponent_div_0_Template, 3, 1, "div", 0);
         } if (rf & 2) {
@@ -2880,16 +2880,18 @@ class PoLanguageModule {
             }]
     }], null, null); })();
 
-const _c0$1H = ["accordionElement"];
-function PoAccordionItemHeaderComponent_po_tag_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "po-tag", 7);
+const _c0$1I = ["accordionElement"];
+const _c1$J = ["accordionHeaderElement"];
+function PoAccordionItemHeaderComponent_po_tag_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "po-tag", 8);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-value", ctx_r1.labelTag)("p-type", ctx_r1.typeTag);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-value", ctx_r2.labelTag)("p-type", ctx_r2.typeTag);
 } }
 class PoAccordionItemHeaderComponent {
     language = poLocaleDefault;
     accordionElement;
+    accordionHeaderElement;
     expanded = false;
     label;
     labelTag;
@@ -2903,38 +2905,53 @@ class PoAccordionItemHeaderComponent {
         this.expanded = !this.expanded;
         this.toggle.emit(this.expanded);
     }
+    getTooltip() {
+        const widthContainer = this.accordionElement.nativeElement.offsetWidth - 56;
+        const widthHeaderElement = this.accordionHeaderElement.nativeElement.offsetWidth;
+        if (widthHeaderElement >= widthContainer) {
+            return this.label;
+        }
+        return null;
+    }
     static ɵfac = function PoAccordionItemHeaderComponent_Factory(t) { return new (t || PoAccordionItemHeaderComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemHeaderComponent, selectors: [["po-accordion-item-header"]], viewQuery: function PoAccordionItemHeaderComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1H, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$1I, 7, ElementRef);
+            i0.ɵɵviewQuery(_c1$J, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.accordionElement = _t.first);
-        } }, inputs: { expanded: [i0.ɵɵInputFlags.None, "p-expanded", "expanded"], label: [i0.ɵɵInputFlags.None, "p-label", "label"], labelTag: [i0.ɵɵInputFlags.None, "p-label-tag", "labelTag"], typeTag: [i0.ɵɵInputFlags.None, "p-type-tag", "typeTag"], disabledItem: [i0.ɵɵInputFlags.None, "p-disabled", "disabledItem"] }, outputs: { toggle: "p-toggle" }, decls: 8, vars: 5, consts: [[1, "po-accordion-item-header"], [1, "po-accordion-item-header-button", "po-clickable", 3, "disabled", "click"], ["accordionElement", ""], [1, "po-accordion-item-header-button-content"], [1, "po-text-ellipsis", "po-accordion-item-header-title"], ["class", "po-accordion-item-header-tag", 3, "p-value", "p-type", 4, "ngIf"], ["p-icon", "ICON_ARROW_DOWN", 1, "po-icon", "po-accordion-item-header-icon"], [1, "po-accordion-item-header-tag", 3, "p-value", "p-type"]], template: function PoAccordionItemHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.accordionHeaderElement = _t.first);
+        } }, inputs: { expanded: [i0.ɵɵInputFlags.None, "p-expanded", "expanded"], label: [i0.ɵɵInputFlags.None, "p-label", "label"], labelTag: [i0.ɵɵInputFlags.None, "p-label-tag", "labelTag"], typeTag: [i0.ɵɵInputFlags.None, "p-type-tag", "typeTag"], disabledItem: [i0.ɵɵInputFlags.None, "p-disabled", "disabledItem"] }, outputs: { toggle: "p-toggle" }, decls: 9, vars: 6, consts: [[1, "po-accordion-item-header"], [1, "po-accordion-item-header-button", "po-clickable", 3, "disabled", "click"], ["accordionElement", ""], [1, "po-accordion-item-header-button-content", 3, "p-tooltip"], [1, "po-text-ellipsis", "po-accordion-item-header-title"], ["accordionHeaderElement", ""], ["class", "po-accordion-item-header-tag", 3, "p-value", "p-type", 4, "ngIf"], ["p-icon", "ICON_ARROW_DOWN", 1, "po-icon", "po-accordion-item-header-icon"], [1, "po-accordion-item-header-tag", 3, "p-value", "p-type"]], template: function PoAccordionItemHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "button", 1, 2);
             i0.ɵɵlistener("click", function PoAccordionItemHeaderComponent_Template_button_click_1_listener() { return ctx.onClick(); });
-            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4);
-            i0.ɵɵtext(5);
+            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4, 5);
+            i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, PoAccordionItemHeaderComponent_po_tag_6_Template, 1, 2, "po-tag", 5);
+            i0.ɵɵtemplate(7, PoAccordionItemHeaderComponent_po_tag_7_Template, 1, 2, "po-tag", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(7, "po-icon", 6);
+            i0.ɵɵelement(8, "po-icon", 7);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.disabledItem);
             i0.ɵɵattribute("aria-label", ctx.label)("aria-expanded", ctx.expanded || false);
-            i0.ɵɵadvance(4);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("p-tooltip", ctx.getTooltip());
+            i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(ctx.label);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.labelTag);
-        } }, dependencies: [i1.NgIf, PoTagComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.NgIf, PoTagComponent, PoIconComponent, PoTooltipDirective], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionItemHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'po-accordion-item-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-accordion-item-header\">\n  <button\n    #accordionElement\n    [disabled]=\"disabledItem\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-expanded]=\"expanded || false\"\n    class=\"po-accordion-item-header-button po-clickable\"\n    (click)=\"onClick()\"\n  >\n    <div class=\"po-accordion-item-header-button-content\">\n      <div class=\"po-text-ellipsis po-accordion-item-header-title\">{{ label }}</div>\n      <po-tag *ngIf=\"labelTag\" class=\"po-accordion-item-header-tag\" [p-value]=\"labelTag\" [p-type]=\"typeTag\"> </po-tag>\n    </div>\n    <po-icon p-icon=\"ICON_ARROW_DOWN\" class=\"po-icon po-accordion-item-header-icon\"></po-icon>\n  </button>\n</div>\n" }]
+        args: [{ selector: 'po-accordion-item-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-accordion-item-header\">\n  <button\n    #accordionElement\n    [disabled]=\"disabledItem\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-expanded]=\"expanded || false\"\n    class=\"po-accordion-item-header-button po-clickable\"\n    (click)=\"onClick()\"\n  >\n    <div class=\"po-accordion-item-header-button-content\" [p-tooltip]=\"getTooltip()\">\n      <div #accordionHeaderElement class=\"po-text-ellipsis po-accordion-item-header-title\">{{ label }}</div>\n      <po-tag *ngIf=\"labelTag\" class=\"po-accordion-item-header-tag\" [p-value]=\"labelTag\" [p-type]=\"typeTag\"> </po-tag>\n    </div>\n    <po-icon p-icon=\"ICON_ARROW_DOWN\" class=\"po-icon po-accordion-item-header-icon\"></po-icon>\n  </button>\n</div>\n" }]
     }], () => [{ type: PoLanguageService }], { accordionElement: [{
             type: ViewChild,
             args: ['accordionElement', { read: ElementRef, static: true }]
+        }], accordionHeaderElement: [{
+            type: ViewChild,
+            args: ['accordionHeaderElement', { read: ElementRef, static: true }]
         }], expanded: [{
             type: Input,
             args: ['p-expanded']
@@ -2984,7 +3001,7 @@ class PoAccordionService {
 function PoAccordionItemComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-const _c0$1G = ["*"];
+const _c0$1H = ["*"];
 /**
  * @description
  *
@@ -3113,7 +3130,7 @@ class PoAccordionItemComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templateRef = _t.first);
-        } }, inputs: { label: [i0.ɵɵInputFlags.None, "p-label", "label"], labelTag: [i0.ɵɵInputFlags.None, "p-label-tag", "labelTag"], disabledItem: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-disabled", "disabledItem", convertToBoolean], typeTag: [i0.ɵɵInputFlags.None, "p-type-tag", "typeTag"] }, outputs: { expandEvent: "p-expand", collapseEvent: "p-collapse" }, features: [i0.ɵɵInputTransformsFeature], ngContentSelectors: _c0$1G, decls: 1, vars: 0, template: function PoAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { label: [i0.ɵɵInputFlags.None, "p-label", "label"], labelTag: [i0.ɵɵInputFlags.None, "p-label-tag", "labelTag"], disabledItem: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-disabled", "disabledItem", convertToBoolean], typeTag: [i0.ɵɵInputFlags.None, "p-type-tag", "typeTag"] }, outputs: { expandEvent: "p-expand", collapseEvent: "p-collapse" }, features: [i0.ɵɵInputTransformsFeature], ngContentSelectors: _c0$1H, decls: 1, vars: 0, template: function PoAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, PoAccordionItemComponent_ng_template_0_Template, 1, 0, "ng-template");
         } }, encapsulation: 2 });
@@ -3145,35 +3162,69 @@ class PoAccordionItemComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoAccordionItemComponent, { className: "PoAccordionItemComponent", filePath: "lib/components/po-accordion/po-accordion-item/po-accordion-item.component.ts", lineNumber: 43 }); })();
 
+const _c0$1G = ["accordionHeaderButtonManagerElement"];
+const _c1$I = ["accordionHeaderManagerElement"];
 class PoAccordionManagerComponent {
+    labelValue = '';
+    changeDetector = inject(ChangeDetectorRef);
+    accordionElement;
+    accordionHeaderElement;
     expandedAllItems = false;
     literals;
     clickManager = new EventEmitter();
+    ngOnChanges(changes) {
+        this.labelValue = changes.expandedAllItems.currentValue
+            ? this.literals.closeAllItems
+            : this.literals.expandAllItems;
+        this.changeDetector.detectChanges();
+    }
     onClick() {
         this.clickManager.emit();
     }
+    getTooltip() {
+        const widthContainer = this.accordionElement.nativeElement.offsetWidth - 69;
+        const widthHeaderElement = this.accordionHeaderElement.nativeElement.offsetWidth;
+        if (widthHeaderElement >= widthContainer) {
+            return this.labelValue;
+        }
+        return null;
+    }
     static ɵfac = function PoAccordionManagerComponent_Factory(t) { return new (t || PoAccordionManagerComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionManagerComponent, selectors: [["po-accordion-manager"]], inputs: { expandedAllItems: [i0.ɵɵInputFlags.None, "p-expanded-all-items", "expandedAllItems"], literals: [i0.ɵɵInputFlags.None, "p-literals", "literals"] }, outputs: { clickManager: "p-click" }, decls: 5, vars: 3, consts: [[1, "po-accordion-manager-header"], [1, "po-accordion-manager-button", "po-clickable", 3, "click"], [1, "po-text-ellipsis", "po-accordion-manager-button-content"], ["p-icon", "ICON_LAST_PAGE", 1, "po-icon", "po-accordion-manager-icon", 3, "ngClass"]], template: function PoAccordionManagerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionManagerComponent, selectors: [["po-accordion-manager"]], viewQuery: function PoAccordionManagerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$1G, 7, ElementRef);
+            i0.ɵɵviewQuery(_c1$I, 7, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.accordionElement = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.accordionHeaderElement = _t.first);
+        } }, inputs: { expandedAllItems: [i0.ɵɵInputFlags.None, "p-expanded-all-items", "expandedAllItems"], literals: [i0.ɵɵInputFlags.None, "p-literals", "literals"] }, outputs: { clickManager: "p-click" }, features: [i0.ɵɵNgOnChangesFeature], decls: 7, vars: 4, consts: [[1, "po-accordion-manager-header"], [1, "po-accordion-manager-button", "po-clickable", 3, "p-tooltip", "click"], ["accordionHeaderButtonManagerElement", ""], [1, "po-text-ellipsis", "po-accordion-manager-button-content"], ["accordionHeaderManagerElement", ""], ["p-icon", "ICON_LAST_PAGE", 1, "po-icon", "po-accordion-manager-icon", 3, "ngClass"]], template: function PoAccordionManagerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1, 2);
             i0.ɵɵlistener("click", function PoAccordionManagerComponent_Template_button_click_1_listener() { return ctx.onClick(); });
-            i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵtext(3);
+            i0.ɵɵelementStart(3, "div", 3, 4);
+            i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "po-icon", 3);
+            i0.ɵɵelement(6, "po-icon", 5);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
+            i0.ɵɵproperty("p-tooltip", ctx.getTooltip());
             i0.ɵɵattribute("aria-expanded", ctx.expandedAllItems);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate1(" ", ctx.expandedAllItems ? ctx.literals.closeAllItems : ctx.literals.expandAllItems, " ");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.expandedAllItems ? "icon-down" : "icon-up");
-        } }, dependencies: [i1.NgClass, PoIconComponent], encapsulation: 2 });
+        } }, dependencies: [i1.NgClass, PoIconComponent, PoTooltipDirective], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionManagerComponent, [{
         type: Component,
-        args: [{ selector: 'po-accordion-manager', template: "<div class=\"po-accordion-manager-header\">\n  <button class=\"po-accordion-manager-button po-clickable\" (click)=\"onClick()\" [attr.aria-expanded]=\"expandedAllItems\">\n    <div class=\"po-text-ellipsis po-accordion-manager-button-content\">\n      {{ expandedAllItems ? literals.closeAllItems : literals.expandAllItems }}\n    </div>\n    <po-icon\n      p-icon=\"ICON_LAST_PAGE\"\n      [ngClass]=\"expandedAllItems ? 'icon-down' : 'icon-up'\"\n      class=\"po-icon po-accordion-manager-icon\"\n    >\n    </po-icon>\n  </button>\n</div>\n" }]
-    }], null, { expandedAllItems: [{
+        args: [{ selector: 'po-accordion-manager', template: "<div class=\"po-accordion-manager-header\">\n  <button\n    #accordionHeaderButtonManagerElement\n    class=\"po-accordion-manager-button po-clickable\"\n    (click)=\"onClick()\"\n    [attr.aria-expanded]=\"expandedAllItems\"\n    [p-tooltip]=\"getTooltip()\"\n  >\n    <div #accordionHeaderManagerElement class=\"po-text-ellipsis po-accordion-manager-button-content\">\n      {{ expandedAllItems ? literals.closeAllItems : literals.expandAllItems }}\n    </div>\n    <po-icon\n      p-icon=\"ICON_LAST_PAGE\"\n      [ngClass]=\"expandedAllItems ? 'icon-down' : 'icon-up'\"\n      class=\"po-icon po-accordion-manager-icon\"\n    >\n    </po-icon>\n  </button>\n</div>\n" }]
+    }], null, { accordionElement: [{
+            type: ViewChild,
+            args: ['accordionHeaderButtonManagerElement', { read: ElementRef, static: true }]
+        }], accordionHeaderElement: [{
+            type: ViewChild,
+            args: ['accordionHeaderManagerElement', { read: ElementRef, static: true }]
+        }], expandedAllItems: [{
             type: Input,
             args: ['p-expanded-all-items']
         }], literals: [{
@@ -3183,7 +3234,7 @@ class PoAccordionManagerComponent {
             type: Output,
             args: ['p-click']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoAccordionManagerComponent, { className: "PoAccordionManagerComponent", filePath: "lib/components/po-accordion/po-accordion-manager/po-accordion-manager.component.ts", lineNumber: 8 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoAccordionManagerComponent, { className: "PoAccordionManagerComponent", filePath: "lib/components/po-accordion/po-accordion-manager/po-accordion-manager.component.ts", lineNumber: 19 }); })();
 
 const poAccordionLiteralsDefault = {
     en: {
@@ -3598,12 +3649,12 @@ class PoAccordionComponent extends PoAccordionBaseComponent {
 class PoAccordionModule {
     static ɵfac = function PoAccordionModule_Factory(t) { return new (t || PoAccordionModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoAccordionModule });
-    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule] });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule, PoTooltipModule] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionModule, [{
         type: NgModule,
         args: [{
-                imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule],
+                imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule, PoTooltipModule],
                 declarations: [
                     PoAccordionComponent,
                     PoAccordionItemBodyComponent,
@@ -3618,7 +3669,7 @@ class PoAccordionModule {
         PoAccordionItemBodyComponent,
         PoAccordionItemComponent,
         PoAccordionItemHeaderComponent,
-        PoAccordionManagerComponent], imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule], exports: [PoAccordionComponent, PoAccordionItemComponent] }); })();
+        PoAccordionManagerComponent], imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule, PoTooltipModule], exports: [PoAccordionComponent, PoAccordionItemComponent] }); })();
 
 const PO_AVATAR_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
 const PO_AVATAR_SIZE_DEFAULT = 'md';
@@ -20740,6 +20791,17 @@ class PoSwitchComponent extends PoFieldModel {
     get formatModel() {
         return this._formatModel;
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Indica se o status do `model` será escondido visualmente ao lado do switch.
+     *
+     * > Por padrão será atribuído `false`.
+     * @default `false`
+     */
+    hideLabelStatus = false;
     /**
      * @optional
      *
@@ -20861,7 +20923,7 @@ class PoSwitchComponent extends PoFieldModel {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.switchContainer = _t.first);
-        } }, inputs: { value: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-value", "value", convertToBoolean], formatModel: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-format-model", "formatModel", convertToBoolean], labelPosition: [i0.ɵɵInputFlags.None, "p-label-position", "labelPosition"], labelOff: [i0.ɵɵInputFlags.None, "p-label-off", "labelOff"], labelOn: [i0.ɵɵInputFlags.None, "p-label-on", "labelOn"] }, features: [i0.ɵɵProvidersFeature([
+        } }, inputs: { value: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-value", "value", convertToBoolean], formatModel: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-format-model", "formatModel", convertToBoolean], hideLabelStatus: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-label-status", "hideLabelStatus", convertToBoolean], labelPosition: [i0.ɵɵInputFlags.None, "p-label-position", "labelPosition"], labelOff: [i0.ɵɵInputFlags.None, "p-label-off", "labelOff"], labelOn: [i0.ɵɵInputFlags.None, "p-label-on", "labelOn"] }, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => PoSwitchComponent),
@@ -20891,7 +20953,7 @@ class PoSwitchComponent extends PoFieldModel {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.value === true);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.label);
+            i0.ɵɵproperty("ngIf", !ctx.hideLabelStatus);
             i0.ɵɵadvance();
             i0.ɵɵproperty("p-help", ctx.help)("p-disabled", ctx.disabled);
         } }, dependencies: [i1.NgIf, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoLabelComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
@@ -20904,7 +20966,7 @@ class PoSwitchComponent extends PoFieldModel {
                         useExisting: forwardRef(() => PoSwitchComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-disabled]=\"disabled\" [p-id]=\"id\" [p-label]=\"label\">\n  <div class=\"po-field-container-content\" [attr.name]=\"name\">\n    <div class=\"po-switch\" [attr.data-label-position]=\"getLabelPosition()\">\n      <div\n        #switchContainer\n        class=\"po-switch-container\"\n        role=\"switch\"\n        [attr.aria-checked]=\"value\"\n        [attr.aria-disabled]=\"disabled\"\n        [id]=\"id\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (blur)=\"onBlur()\"\n        (click)=\"eventClick()\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        <div class=\"po-switch-track\">\n          <div class=\"po-switch-toggle\" [attr.aria-label]=\"value === true ? labelOn : labelOff\">\n            <po-icon *ngIf=\"value === true\" class=\"po-switch-icon\" p-icon=\"ICON_OK\"></po-icon>\n          </div>\n        </div>\n      </div>\n\n      <po-label\n        *ngIf=\"label\"\n        class=\"po-switch-label\"\n        [p-disabled]=\"disabled\"\n        [p-label]=\"value === true ? labelOn : labelOff\"\n        (click)=\"eventClick()\"\n      >\n      </po-label>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-disabled]=\"disabled\" [p-id]=\"id\" [p-label]=\"label\">\n  <div class=\"po-field-container-content\" [attr.name]=\"name\">\n    <div class=\"po-switch\" [attr.data-label-position]=\"getLabelPosition()\">\n      <div\n        #switchContainer\n        class=\"po-switch-container\"\n        role=\"switch\"\n        [attr.aria-checked]=\"value\"\n        [attr.aria-disabled]=\"disabled\"\n        [id]=\"id\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (blur)=\"onBlur()\"\n        (click)=\"eventClick()\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        <div class=\"po-switch-track\">\n          <div class=\"po-switch-toggle\" [attr.aria-label]=\"value === true ? labelOn : labelOff\">\n            <po-icon *ngIf=\"value === true\" class=\"po-switch-icon\" p-icon=\"ICON_OK\"></po-icon>\n          </div>\n        </div>\n      </div>\n\n      <po-label\n        *ngIf=\"!hideLabelStatus\"\n        class=\"po-switch-label\"\n        [p-disabled]=\"disabled\"\n        [p-label]=\"value === true ? labelOn : labelOff\"\n        (click)=\"eventClick()\"\n      >\n      </po-label>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], () => [{ type: i0.ChangeDetectorRef }], { switchContainer: [{
             type: ViewChild,
             args: ['switchContainer', { static: true }]
@@ -20914,6 +20976,9 @@ class PoSwitchComponent extends PoFieldModel {
         }], formatModel: [{
             type: Input,
             args: [{ alias: 'p-format-model', transform: convertToBoolean }]
+        }], hideLabelStatus: [{
+            type: Input,
+            args: [{ alias: 'p-hide-label-status', transform: convertToBoolean }]
         }], labelPosition: [{
             type: Input,
             args: ['p-label-position']
@@ -21048,7 +21113,7 @@ function PoTableListManagerComponent_ng_template_5_Template(rf, ctx) { if (rf &
     const option_r19 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("p-disabled", option_r19.disabled || ctx_r2.disabled || ctx_r2.isFixed(option_r19))("p-value", ctx_r2.checkedOptions[option_r19.value]);
+    i0.ɵɵproperty("p-disabled", option_r19.disabled || ctx_r2.disabled || ctx_r2.isFixed(option_r19))("p-value", ctx_r2.checkedOptions[option_r19.value])("p-hide-label-status", true);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", option_r19.label, " ");
     i0.ɵɵadvance(2);
@@ -21190,14 +21255,14 @@ class PoTableListManagerComponent extends PoCheckboxGroupComponent {
                     useExisting: forwardRef(() => PoTableListManagerComponent),
                     multi: true
                 }
-            ]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 4, consts: [["class", "po-table-list-manager-section", 4, "ngIf"], [1, "po-table-list-manager-section"], [1, "po-table-list-manager-title-group-items"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["listItemsManagerDefault", ""], ["templateIconNotFixed", ""], ["templateIconFixed", ""], [4, "ngIf"], [1, "po-table-list-manager-container"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-table-list-manager-item"], [1, "po-table-list-manager-item-switch"], ["name", "switch", "p-label-off", " ", "p-label-on", " ", 3, "p-disabled", "p-value", "p-change", "keydown"], [1, "po-table-list-manager-item-text"], [1, "po-table-list-manager-item-buttons"], [3, "p-icon", "p-disabled", "p-click", 4, "ngIf"], ["p-tooltip-position", "left", "p-icon", "ICON_ARROW_UP", 3, "p-tooltip", "p-disabled", "p-click"], ["p-tooltip-position", "top", "p-icon", "ICON_ARROW_DOWN", 3, "p-tooltip", "p-disabled", "p-click"], [3, "p-icon", "p-disabled", "p-click"], ["xmlns", "http://www.w3.org/2000/svg", "width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none"], ["clip-path", "url(#clip0_12562_15948)"], ["d", "M13.7143 5.71429V10C13.7143 10.96 14.0314 11.8514 14.5714 12.5714H9.42857C9.98571 11.8343 10.2857 10.9429 10.2857 10V5.71429H13.7143ZM16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z", "fill", "black"], ["id", "clip0_12562_15948"], ["width", "24", "height", "24", "fill", "white"], ["clip-path", "url(#clip0_12562_17487)"], ["d", "M16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z", "fill", "#B4B4C0"], ["id", "clip0_12562_17487"], ["width", "24", "height", "24", "fill", "black"]], template: function PoTableListManagerComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 4, consts: [["class", "po-table-list-manager-section", 4, "ngIf"], [1, "po-table-list-manager-section"], [1, "po-table-list-manager-title-group-items"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["listItemsManagerDefault", ""], ["templateIconNotFixed", ""], ["templateIconFixed", ""], [4, "ngIf"], [1, "po-table-list-manager-container"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-table-list-manager-item"], [1, "po-table-list-manager-item-switch"], ["name", "switch", 3, "p-disabled", "p-value", "p-hide-label-status", "p-change", "keydown"], [1, "po-table-list-manager-item-text"], [1, "po-table-list-manager-item-buttons"], [3, "p-icon", "p-disabled", "p-click", 4, "ngIf"], ["p-tooltip-position", "left", "p-icon", "ICON_ARROW_UP", 3, "p-tooltip", "p-disabled", "p-click"], ["p-tooltip-position", "top", "p-icon", "ICON_ARROW_DOWN", 3, "p-tooltip", "p-disabled", "p-click"], [3, "p-icon", "p-disabled", "p-click"], ["xmlns", "http://www.w3.org/2000/svg", "width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none"], ["clip-path", "url(#clip0_12562_15948)"], ["d", "M13.7143 5.71429V10C13.7143 10.96 14.0314 11.8514 14.5714 12.5714H9.42857C9.98571 11.8343 10.2857 10.9429 10.2857 10V5.71429H13.7143ZM16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z", "fill", "black"], ["id", "clip0_12562_15948"], ["width", "24", "height", "24", "fill", "white"], ["clip-path", "url(#clip0_12562_17487)"], ["d", "M16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z", "fill", "#B4B4C0"], ["id", "clip0_12562_17487"], ["width", "24", "height", "24", "fill", "black"]], template: function PoTableListManagerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PoTableListManagerComponent_section_0_Template, 4, 3, "section", 0);
             i0.ɵɵelementStart(1, "section", 1)(2, "p", 2);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(4, PoTableListManagerComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(5, PoTableListManagerComponent_ng_template_5_Template, 10, 9, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor)(7, PoTableListManagerComponent_ng_template_7_Template, 6, 0, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor)(9, PoTableListManagerComponent_ng_template_9_Template, 6, 0, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(5, PoTableListManagerComponent_ng_template_5_Template, 10, 10, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor)(7, PoTableListManagerComponent_ng_template_7_Template, 6, 0, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor)(9, PoTableListManagerComponent_ng_template_9_Template, 6, 0, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.existedFixedItem());
             i0.ɵɵadvance(3);
@@ -21214,7 +21279,7 @@ class PoTableListManagerComponent extends PoCheckboxGroupComponent {
                         useExisting: forwardRef(() => PoTableListManagerComponent),
                         multi: true
                     }
-                ], template: "<section class=\"po-table-list-manager-section\" *ngIf=\"existedFixedItem()\">\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.fixedColumns }}</p>\n  <ng-container *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\">\n    <ng-container *ngIf=\"isFixed(option)\">\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\n        <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n      </li>\n    </ng-container>\n  </ng-container>\n</section>\n\n<section class=\"po-table-list-manager-section\">\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.otherColumns }}</p>\n  <ng-container *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\">\n    <ng-container *ngIf=\"!isFixed(option)\">\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\n        <ng-container *ngIf=\"!isFixed(option)\">\n          <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ng-container>\n</section>\n\n<ng-template #listItemsManagerDefault let-option>\n  <div class=\"po-table-list-manager-item\">\n    <div class=\"po-table-list-manager-item-switch\">\n      <po-switch\n        name=\"switch\"\n        (p-change)=\"clickSwitch(option)\"\n        (keydown)=\"onKeyDown($event, option)\"\n        [p-disabled]=\"option.disabled || disabled || isFixed(option)\"\n        [p-value]=\"checkedOptions[option.value]\"\n        p-label-off=\" \"\n        p-label-on=\" \"\n      >\n      </po-switch>\n      <span class=\"po-table-list-manager-item-text\">\n        {{ option.label }}\n      </span>\n    </div>\n\n    <div class=\"po-table-list-manager-item-buttons\">\n      <po-button\n        *ngIf=\"!hideActionFixedColumns && iconNameLib === 'PoIcon'\"\n        [p-icon]=\"isFixed(option) ? templateIconFixed : templateIconNotFixed\"\n        (p-click)=\"emitFixed(option)\"\n        [p-disabled]=\"!option.visible || checksIfHasFiveFixed(option)\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"!hideActionFixedColumns && iconNameLib === 'PhosphorIcon'\"\n        [p-icon]=\"isFixed(option) ? 'ICON_PUSH_PIN_SLASH' : 'ICON_PUSH_PIN'\"\n        (p-click)=\"emitFixed(option)\"\n        [p-disabled]=\"!option.visible || checksIfHasFiveFixed(option)\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.up\"\n        p-tooltip-position=\"left\"\n        p-icon=\"ICON_ARROW_UP\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'up') || isFixed(option)\"\n        (p-click)=\"emitChangePosition(option, 'up')\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.down\"\n        p-tooltip-position=\"top\"\n        p-icon=\"ICON_ARROW_DOWN\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'down') || isFixed(option)\"\n        (p-click)=\"emitChangePosition(option, 'down')\"\n      >\n      </po-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #templateIconNotFixed>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <g clip-path=\"url(#clip0_12562_15948)\">\n      <path\n        d=\"M13.7143 5.71429V10C13.7143 10.96 14.0314 11.8514 14.5714 12.5714H9.42857C9.98571 11.8343 10.2857 10.9429 10.2857 10V5.71429H13.7143ZM16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z\"\n        fill=\"black\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_12562_15948\">\n        <rect width=\"24\" height=\"24\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n\n<ng-template #templateIconFixed>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <g clip-path=\"url(#clip0_12562_17487)\">\n      <path\n        d=\"M16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z\"\n        fill=\"#B4B4C0\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_12562_17487\">\n        <rect width=\"24\" height=\"24\" fill=\"black\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n" }]
+                ], template: "<section class=\"po-table-list-manager-section\" *ngIf=\"existedFixedItem()\">\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.fixedColumns }}</p>\n  <ng-container *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\">\n    <ng-container *ngIf=\"isFixed(option)\">\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\n        <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n      </li>\n    </ng-container>\n  </ng-container>\n</section>\n\n<section class=\"po-table-list-manager-section\">\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.otherColumns }}</p>\n  <ng-container *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\">\n    <ng-container *ngIf=\"!isFixed(option)\">\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\n        <ng-container *ngIf=\"!isFixed(option)\">\n          <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ng-container>\n</section>\n\n<ng-template #listItemsManagerDefault let-option>\n  <div class=\"po-table-list-manager-item\">\n    <div class=\"po-table-list-manager-item-switch\">\n      <po-switch\n        name=\"switch\"\n        (p-change)=\"clickSwitch(option)\"\n        (keydown)=\"onKeyDown($event, option)\"\n        [p-disabled]=\"option.disabled || disabled || isFixed(option)\"\n        [p-value]=\"checkedOptions[option.value]\"\n        [p-hide-label-status]=\"true\"\n      >\n      </po-switch>\n      <span class=\"po-table-list-manager-item-text\">\n        {{ option.label }}\n      </span>\n    </div>\n\n    <div class=\"po-table-list-manager-item-buttons\">\n      <po-button\n        *ngIf=\"!hideActionFixedColumns && iconNameLib === 'PoIcon'\"\n        [p-icon]=\"isFixed(option) ? templateIconFixed : templateIconNotFixed\"\n        (p-click)=\"emitFixed(option)\"\n        [p-disabled]=\"!option.visible || checksIfHasFiveFixed(option)\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"!hideActionFixedColumns && iconNameLib === 'PhosphorIcon'\"\n        [p-icon]=\"isFixed(option) ? 'ICON_PUSH_PIN_SLASH' : 'ICON_PUSH_PIN'\"\n        (p-click)=\"emitFixed(option)\"\n        [p-disabled]=\"!option.visible || checksIfHasFiveFixed(option)\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.up\"\n        p-tooltip-position=\"left\"\n        p-icon=\"ICON_ARROW_UP\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'up') || isFixed(option)\"\n        (p-click)=\"emitChangePosition(option, 'up')\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.down\"\n        p-tooltip-position=\"top\"\n        p-icon=\"ICON_ARROW_DOWN\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'down') || isFixed(option)\"\n        (p-click)=\"emitChangePosition(option, 'down')\"\n      >\n      </po-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #templateIconNotFixed>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <g clip-path=\"url(#clip0_12562_15948)\">\n      <path\n        d=\"M13.7143 5.71429V10C13.7143 10.96 14.0314 11.8514 14.5714 12.5714H9.42857C9.98571 11.8343 10.2857 10.9429 10.2857 10V5.71429H13.7143ZM16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z\"\n        fill=\"black\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_12562_15948\">\n        <rect width=\"24\" height=\"24\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n\n<ng-template #templateIconFixed>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <g clip-path=\"url(#clip0_12562_17487)\">\n      <path\n        d=\"M16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z\"\n        fill=\"#B4B4C0\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_12562_17487\">\n        <rect width=\"24\" height=\"24\" fill=\"black\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n" }]
     }], () => [{ type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -22830,6 +22895,10 @@ class PoTableBaseComponent {
             this.selectAll = !this.selectAll;
             this.items.forEach(item => {
                 item.$selected = this.selectAll;
+                if (item[this.nameColumnDetail]) {
+                    const childItems = item[this.nameColumnDetail];
+                    childItems.forEach(childItem => (childItem.$selected = this.selectAll));
+                }
             });
             this.emitSelectAllEvents(this.selectAll, [...this.items]);
             this.setSelectedList();
@@ -22839,13 +22908,37 @@ class PoTableBaseComponent {
         row.$selected = !row.$selected;
         this.emitSelectEvents(row);
         this.configAfterSelectRow(this.items, row);
+        if (row[this.nameColumnDetail] && (row.$selected === true || row.$selected === false)) {
+            const childItems = row[this.nameColumnDetail];
+            childItems.forEach(item => (item.$selected = row.$selected));
+        }
         this.setSelectedList();
     }
     hasSelectableRow() {
         return this.selectable && this.selectableEntireLine;
     }
-    selectDetailRow(row) {
-        this.emitSelectEvents(row);
+    selectDetailRow(event) {
+        const { item, parentRow } = event;
+        this.emitSelectEvents(item);
+        this.updateParentRowSelection(parentRow);
+    }
+    updateParentRowSelection(parentRow) {
+        const old = parentRow.$selected || null;
+        const childItems = parentRow[this.nameColumnDetail];
+        if (childItems.every(item => item.$selected)) {
+            parentRow.$selected = true;
+        }
+        else if (childItems.every(item => !item.$selected)) {
+            parentRow.$selected = false;
+        }
+        else {
+            parentRow.$selected = null;
+        }
+        if (old != parentRow.$selected && !(old == null && parentRow.$selected === false)) {
+            this.emitSelectEvents(parentRow);
+        }
+        this.configAfterSelectRow(this.items, parentRow);
+        this.setSelectedList();
     }
     setSelectedList() {
         this.itemsSelected = [];
@@ -24184,13 +24277,13 @@ function PoTableComponent_ng_template_8_ng_container_16_tbody_1_tr_10_Template(r
     i0.ɵɵadvance();
     i0.ɵɵproperty("colSpan", ctx_r103.columnCountForMasterDetail);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("p-selectable", ctx_r103.selectable && !ctx_r103.detailHideSelect)("p-detail", ctx_r103.columnMasterDetail.detail)("p-items", row_r93[ctx_r103.nameColumnDetail]);
+    i0.ɵɵproperty("p-selectable", ctx_r103.selectable && !ctx_r103.detailHideSelect)("p-detail", ctx_r103.columnMasterDetail.detail)("p-items", row_r93[ctx_r103.nameColumnDetail])("p-parent-row", row_r93);
 } }
 function PoTableComponent_ng_template_8_ng_container_16_tbody_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tbody", 91)(1, "tr", 95);
     i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_ng_container_16_tbody_1_td_2_Template, 2, 4, "td", 96)(3, PoTableComponent_ng_template_8_ng_container_16_tbody_1_td_3_Template, 2, 5, "td", 97)(4, PoTableComponent_ng_template_8_ng_container_16_tbody_1_4_Template, 1, 5, null, 43)(5, PoTableComponent_ng_template_8_ng_container_16_tbody_1_td_5_Template, 2, 5, "td", 97)(6, PoTableComponent_ng_template_8_ng_container_16_tbody_1_td_6_Template, 15, 31, "td", 98)(7, PoTableComponent_ng_template_8_ng_container_16_tbody_1_td_7_Template, 2, 5, "td", 97)(8, PoTableComponent_ng_template_8_ng_container_16_tbody_1_8_Template, 1, 5, null, 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, PoTableComponent_ng_template_8_ng_container_16_tbody_1_tr_9_Template, 3, 6, "tr", 43)(10, PoTableComponent_ng_template_8_ng_container_16_tbody_1_tr_10_Template, 3, 4, "tr", 43);
+    i0.ɵɵtemplate(9, PoTableComponent_ng_template_8_ng_container_16_tbody_1_tr_9_Template, 3, 6, "tr", 43)(10, PoTableComponent_ng_template_8_ng_container_16_tbody_1_tr_10_Template, 3, 5, "tr", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const row_r93 = ctx.$implicit;
@@ -24720,13 +24813,13 @@ function PoTableComponent_ng_template_10_ng_container_17_tbody_1_tr_10_Template(
     i0.ɵɵadvance();
     i0.ɵɵproperty("colSpan", ctx_r232.columnCountForMasterDetail);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("p-selectable", ctx_r232.selectable && !ctx_r232.detailHideSelect)("p-detail", ctx_r232.columnMasterDetail.detail)("p-items", row_r222[ctx_r232.nameColumnDetail]);
+    i0.ɵɵproperty("p-selectable", ctx_r232.selectable && !ctx_r232.detailHideSelect)("p-detail", ctx_r232.columnMasterDetail.detail)("p-items", row_r222[ctx_r232.nameColumnDetail])("p-parent-row", row_r222);
 } }
 function PoTableComponent_ng_template_10_ng_container_17_tbody_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tbody", 91)(1, "tr", 95);
     i0.ɵɵtemplate(2, PoTableComponent_ng_template_10_ng_container_17_tbody_1_td_2_Template, 2, 4, "td", 96)(3, PoTableComponent_ng_template_10_ng_container_17_tbody_1_td_3_Template, 2, 5, "td", 97)(4, PoTableComponent_ng_template_10_ng_container_17_tbody_1_4_Template, 1, 5, null, 43)(5, PoTableComponent_ng_template_10_ng_container_17_tbody_1_td_5_Template, 2, 5, "td", 97)(6, PoTableComponent_ng_template_10_ng_container_17_tbody_1_td_6_Template, 15, 31, "td", 123)(7, PoTableComponent_ng_template_10_ng_container_17_tbody_1_td_7_Template, 2, 5, "td", 97)(8, PoTableComponent_ng_template_10_ng_container_17_tbody_1_8_Template, 1, 5, null, 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, PoTableComponent_ng_template_10_ng_container_17_tbody_1_tr_9_Template, 3, 6, "tr", 43)(10, PoTableComponent_ng_template_10_ng_container_17_tbody_1_tr_10_Template, 3, 4, "tr", 43);
+    i0.ɵɵtemplate(9, PoTableComponent_ng_template_10_ng_container_17_tbody_1_tr_9_Template, 3, 6, "tr", 43)(10, PoTableComponent_ng_template_10_ng_container_17_tbody_1_tr_10_Template, 3, 5, "tr", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const row_r222 = ctx.$implicit;
@@ -24833,7 +24926,7 @@ function PoTableComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const row_r322 = ctx.$implicit;
-    i0.ɵɵproperty("p-checkboxValue", row_r322.$selected);
+    i0.ɵɵproperty("p-checkboxValue", row_r322.$selected === null ? "mixed" : row_r322.$selected);
 } }
 function PoTableComponent_ng_template_20_span_4_ng_container_1_po_icon_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-icon", 134);
@@ -25800,7 +25893,7 @@ class PoTableComponent extends PoTableBaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnManagerTargetFixed = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsIconElement = _t);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsElement = _t);
-        } }, features: [i0.ɵɵProvidersFeature([PoDateService]), i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 14, consts: [[1, "po-table-actions"], ["class", "po-table-actions-batch-actions", 4, "ngIf"], ["class", "po-table-actions-column-manager", 4, "ngIf"], ["class", "po-table-search", 4, "ngIf"], ["p-no-padding", "", 4, "ngIf", "ngIfElse"], ["tableContainerTemplate", ""], ["class", "po-row po-table-footer-show-more", 3, "po-invisible", 4, "ngIf"], ["tableTemplate", ""], ["tableVirtualScrollTemplate", ""], [3, "p-actions", "p-target"], ["popup", ""], ["poTableColumnDetail", ""], ["inputRadio", ""], ["inputCheckbox", ""], ["contentHeaderTemplate", ""], ["noColumnsWithHeight", ""], ["noColumnsWithoutHeight", ""], ["ActionsColumnTemplate", ""], [3, "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-columns-default", "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns", 4, "ngIf"], [3, "p-title", "p-primary-action", "p-secondary-action", "p-click-out"], ["modalDelete", ""], [1, "po-font-text-large"], [1, "po-table-actions-batch-actions"], ["columnBatchActions", ""], [1, "po-table-actions-batch-actions__label", 3, "ngPlural"], ["ngPluralCase", "=0"], ["ngPluralCase", "=1"], ["ngPluralCase", "other"], [1, "po-table-actions-batch-actions__buttons"], ["p-icon", "ICON_DELETE", 3, "p-danger", "p-disabled", "p-label", "p-click"], [1, "po-table-actions-column-manager"], ["columnManager", ""], ["p-icon", "ICON_SETTINGS", "p-kind", "tertiary", "p-tooltip-position", "left", 3, "p-aria-label", "p-tooltip", "p-click"], ["columnManagerTarget", ""], [1, "po-table-search"], [3, "p-items", "p-filter-keys", "p-filter-type", "p-filtered-items-change"], ["p-no-padding", ""], [4, "ngTemplateOutlet"], [3, "p-text", "p-size", 4, "ngIf"], [1, "po-table-main-container"], [1, "po-table-wrapper"], ["tableWrapper", ""], ["class", "po-table-container", 3, "height", 4, "ngIf"], [4, "ngIf"], ["class", "po-table-footer", 4, "ngIf"], [3, "p-text", "p-size"], [1, "po-table-container"], ["poTableTbody", ""], ["class", "po-table-container-overflow", 3, "height", 4, "ngIf"], [1, "po-table-container-overflow"], [1, "po-table-footer"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-literals", "p-subtitles"], [1, "po-row", "po-table-footer-show-more"], ["tableFooter", ""], [1, "po-offset-xl-4", "po-offset-lg-4", "po-offset-md-3", "po-lg-4", "po-md-6", 3, "p-disabled", "p-label", "p-loading", "p-click"], [1, "po-table", 3, "ngClass"], ["tableScrollable", ""], ["cdkDropList", "", "cdkDropListOrientation", "horizontal", 3, "ngClass", "cdkDropListDropped"], ["class", "po-table-column-selectable", 3, "pointer-events", 4, "ngIf"], ["class", "po-table-header-column po-table-header-master-detail", 4, "ngIf"], [3, "po-table-header-master-detail", "po-table-header-single-action", 4, "ngIf"], ["class", "po-table-header-column po-text-center", 4, "ngIf"], [4, "ngIf", "ngIfThen", "ngIfElse"], ["tableDefaultThDragDrop", ""], ["tableDefaultThDefault", ""], [3, "po-table-header-single-action", "po-table-header-actions", 4, "ngIf"], ["class", "po-table-group-row", 4, "ngIf"], [1, "po-table-column-selectable"], ["name", "selectAll", 3, "p-checkboxValue", "p-change", 4, "ngIf"], ["name", "selectAll", 3, "p-checkboxValue", "p-change"], [1, "po-table-header-column", "po-table-header-master-detail"], ["columnActionLeft", ""], [1, "po-table-header-column", "po-text-center"], ["noColumnsHeader", ""], ["class", "po-table-header-ellipsis p-element po-frozen-column", "cdkDrag", "", "cdkDragLockAxis", "x", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "po-table-column-drag-box", "cdkDragDisabled", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["cdkDrag", "", "cdkDragLockAxis", "x", 1, "po-table-header-ellipsis", "p-element", "po-frozen-column", 3, "ngClass", "ngStyle", "cdkDragDisabled", "pFrozenColumn", "click"], [1, "po-table-header-flex"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["cdkDragHandle", "", "p-icon", "ICON_DRAG", 4, "ngIf"], ["cdkDragHandle", "", "width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["cdkDragHandle", "", "p-icon", "ICON_DRAG"], ["cdkDragHandle", "", "width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["cx", "9", "cy", "6", "r", "2", "fill", "black"], ["cx", "15", "cy", "6", "r", "2", "fill", "black"], ["cx", "9", "cy", "12", "r", "2", "fill", "black"], ["cx", "15", "cy", "12", "r", "2", "fill", "black"], ["cx", "9", "cy", "18", "r", "2", "fill", "black"], ["cx", "15", "cy", "18", "r", "2", "fill", "black"], ["class", "po-table-header-ellipsis p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-header-ellipsis", "p-element", "po-frozen-column", 3, "ngClass", "ngStyle", "pFrozenColumn", "click"], [1, "po-table-group-row"], [1, "po-table-row", "po-table-row-no-data"], [1, "po-table-no-data", "po-text-center", 3, "colSpan"], ["class", "po-table-group-row", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-row"], ["class", "po-table-column-selectable", 4, "ngIf"], ["class", "po-table-column-detail-toggle", 3, "click", 4, "ngIf"], ["class", "p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "pFrozenColumn", "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-column-detail-toggle", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-element", "po-frozen-column", 3, "pFrozenColumn", "ngClass", "click"], [1, "po-table-column-cell", "po-table-body-ellipsis", "notranslate", 3, "ngSwitch", "p-tooltip", "p-append-in-body", "mouseenter", "mouseleave"], [4, "ngSwitchCase"], [3, "p-action", "p-disabled", "p-link", "p-row", "p-value", "click", 4, "ngSwitchCase"], [3, "p-column", "p-icons", "p-row", 4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "p-action", "p-disabled", "p-link", "p-row", "p-value", "click"], [3, "p-column", "p-icons", "p-row"], [3, "p-subtitle"], [3, "p-value"], [1, "po-table-row-template-container", 3, "colSpan"], [1, "po-table-column-detail", 3, "colSpan"], [3, "p-selectable", "p-detail", "p-items", "p-select-row"], [3, "itemSize", "minBufferPx", "maxBufferPx"], ["tableVirtualScroll", ""], [1, "po-table-header-sticky"], ["cdkDropList", "", "cdkDropListOrientation", "horizontal", 3, "cdkDropListDropped"], ["tableVirtualScrollThDragDrop", ""], ["tableVirtualScrollThDefault", ""], ["class", "po-table-header-ellipsis p-element po-frozen-column example-box", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-header-ellipsis", "p-element", "po-frozen-column", "example-box", 3, "ngClass", "ngStyle", "pFrozenColumn", "click"], ["class", "po-table-group-row", 4, "cdkVirtualFor", "cdkVirtualForOf", "cdkVirtualForTrackBy"], ["class", "p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "ngClass", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "p-element", "po-frozen-column", 3, "ngClass", "pFrozenColumn", "click"], ["class", "po-clickable", 3, "p-icon", 4, "ngIf"], [1, "po-clickable", 3, "p-icon"], [3, "name", "p-checked", "p-change-selected"], ["name", "checkbox", 3, "p-checkboxValue", "p-change"], [1, "po-table-header-ellipsis", 3, "p-tooltip", "p-append-in-body", "mouseenter", "mouseleave"], ["columnHeader", ""], [3, "po-table-header-icon-unselected", "po-table-header-icon-descending", "po-table-header-icon-ascending", 4, "ngIf"], ["p-icon", "ICON_SORT", 4, "ngIf"], ["width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["p-icon", "ICON_SORT"], ["width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z", "fill", "#1D1D30"], ["p-icon", "ICON_SORT_ASC", 4, "ngIf"], ["p-icon", "ICON_SORT_ASC"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z", "fill", "black"], ["cdkDragHandle", "", "p-icon", "ICON_SORT_DESC", 4, "ngIf"], ["cdkDragHandle", "", "p-icon", "ICON_SORT_DESC"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z", "fill", "black"], [1, "po-table-header-fixed-inner"], ["class", "po-table-column po-table-column-single-action", 3, "width", "max-width", 4, "ngIf"], ["class", "po-table-column-actions", 4, "ngIf"], [1, "po-table-column", "po-table-column-single-action"], ["class", "po-table-single-action po-clickable", 3, "po-table-action-disabled", "click", 4, "ngIf"], [1, "po-table-single-action", "po-clickable", 3, "click"], ["class", "po-table-single-action-content", 3, "p-icon", 4, "ngIf"], [1, "po-table-single-action-content", 3, "p-icon"], [1, "po-table-column-actions"], [1, "po-clickable", 3, "click"], ["popupTarget", ""], ["p-icon", "ICON_MORE"], [3, "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-columns-default", "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns"]], template: function PoTableComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵProvidersFeature([PoDateService]), i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 14, consts: [[1, "po-table-actions"], ["class", "po-table-actions-batch-actions", 4, "ngIf"], ["class", "po-table-actions-column-manager", 4, "ngIf"], ["class", "po-table-search", 4, "ngIf"], ["p-no-padding", "", 4, "ngIf", "ngIfElse"], ["tableContainerTemplate", ""], ["class", "po-row po-table-footer-show-more", 3, "po-invisible", 4, "ngIf"], ["tableTemplate", ""], ["tableVirtualScrollTemplate", ""], [3, "p-actions", "p-target"], ["popup", ""], ["poTableColumnDetail", ""], ["inputRadio", ""], ["inputCheckbox", ""], ["contentHeaderTemplate", ""], ["noColumnsWithHeight", ""], ["noColumnsWithoutHeight", ""], ["ActionsColumnTemplate", ""], [3, "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-columns-default", "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns", 4, "ngIf"], [3, "p-title", "p-primary-action", "p-secondary-action", "p-click-out"], ["modalDelete", ""], [1, "po-font-text-large"], [1, "po-table-actions-batch-actions"], ["columnBatchActions", ""], [1, "po-table-actions-batch-actions__label", 3, "ngPlural"], ["ngPluralCase", "=0"], ["ngPluralCase", "=1"], ["ngPluralCase", "other"], [1, "po-table-actions-batch-actions__buttons"], ["p-icon", "ICON_DELETE", 3, "p-danger", "p-disabled", "p-label", "p-click"], [1, "po-table-actions-column-manager"], ["columnManager", ""], ["p-icon", "ICON_SETTINGS", "p-kind", "tertiary", "p-tooltip-position", "left", 3, "p-aria-label", "p-tooltip", "p-click"], ["columnManagerTarget", ""], [1, "po-table-search"], [3, "p-items", "p-filter-keys", "p-filter-type", "p-filtered-items-change"], ["p-no-padding", ""], [4, "ngTemplateOutlet"], [3, "p-text", "p-size", 4, "ngIf"], [1, "po-table-main-container"], [1, "po-table-wrapper"], ["tableWrapper", ""], ["class", "po-table-container", 3, "height", 4, "ngIf"], [4, "ngIf"], ["class", "po-table-footer", 4, "ngIf"], [3, "p-text", "p-size"], [1, "po-table-container"], ["poTableTbody", ""], ["class", "po-table-container-overflow", 3, "height", 4, "ngIf"], [1, "po-table-container-overflow"], [1, "po-table-footer"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-literals", "p-subtitles"], [1, "po-row", "po-table-footer-show-more"], ["tableFooter", ""], [1, "po-offset-xl-4", "po-offset-lg-4", "po-offset-md-3", "po-lg-4", "po-md-6", 3, "p-disabled", "p-label", "p-loading", "p-click"], [1, "po-table", 3, "ngClass"], ["tableScrollable", ""], ["cdkDropList", "", "cdkDropListOrientation", "horizontal", 3, "ngClass", "cdkDropListDropped"], ["class", "po-table-column-selectable", 3, "pointer-events", 4, "ngIf"], ["class", "po-table-header-column po-table-header-master-detail", 4, "ngIf"], [3, "po-table-header-master-detail", "po-table-header-single-action", 4, "ngIf"], ["class", "po-table-header-column po-text-center", 4, "ngIf"], [4, "ngIf", "ngIfThen", "ngIfElse"], ["tableDefaultThDragDrop", ""], ["tableDefaultThDefault", ""], [3, "po-table-header-single-action", "po-table-header-actions", 4, "ngIf"], ["class", "po-table-group-row", 4, "ngIf"], [1, "po-table-column-selectable"], ["name", "selectAll", 3, "p-checkboxValue", "p-change", 4, "ngIf"], ["name", "selectAll", 3, "p-checkboxValue", "p-change"], [1, "po-table-header-column", "po-table-header-master-detail"], ["columnActionLeft", ""], [1, "po-table-header-column", "po-text-center"], ["noColumnsHeader", ""], ["class", "po-table-header-ellipsis p-element po-frozen-column", "cdkDrag", "", "cdkDragLockAxis", "x", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "po-table-column-drag-box", "cdkDragDisabled", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["cdkDrag", "", "cdkDragLockAxis", "x", 1, "po-table-header-ellipsis", "p-element", "po-frozen-column", 3, "ngClass", "ngStyle", "cdkDragDisabled", "pFrozenColumn", "click"], [1, "po-table-header-flex"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["cdkDragHandle", "", "p-icon", "ICON_DRAG", 4, "ngIf"], ["cdkDragHandle", "", "width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["cdkDragHandle", "", "p-icon", "ICON_DRAG"], ["cdkDragHandle", "", "width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["cx", "9", "cy", "6", "r", "2", "fill", "black"], ["cx", "15", "cy", "6", "r", "2", "fill", "black"], ["cx", "9", "cy", "12", "r", "2", "fill", "black"], ["cx", "15", "cy", "12", "r", "2", "fill", "black"], ["cx", "9", "cy", "18", "r", "2", "fill", "black"], ["cx", "15", "cy", "18", "r", "2", "fill", "black"], ["class", "po-table-header-ellipsis p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-header-ellipsis", "p-element", "po-frozen-column", 3, "ngClass", "ngStyle", "pFrozenColumn", "click"], [1, "po-table-group-row"], [1, "po-table-row", "po-table-row-no-data"], [1, "po-table-no-data", "po-text-center", 3, "colSpan"], ["class", "po-table-group-row", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-row"], ["class", "po-table-column-selectable", 4, "ngIf"], ["class", "po-table-column-detail-toggle", 3, "click", 4, "ngIf"], ["class", "p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "pFrozenColumn", "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-column-detail-toggle", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-element", "po-frozen-column", 3, "pFrozenColumn", "ngClass", "click"], [1, "po-table-column-cell", "po-table-body-ellipsis", "notranslate", 3, "ngSwitch", "p-tooltip", "p-append-in-body", "mouseenter", "mouseleave"], [4, "ngSwitchCase"], [3, "p-action", "p-disabled", "p-link", "p-row", "p-value", "click", 4, "ngSwitchCase"], [3, "p-column", "p-icons", "p-row", 4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "p-action", "p-disabled", "p-link", "p-row", "p-value", "click"], [3, "p-column", "p-icons", "p-row"], [3, "p-subtitle"], [3, "p-value"], [1, "po-table-row-template-container", 3, "colSpan"], [1, "po-table-column-detail", 3, "colSpan"], [3, "p-selectable", "p-detail", "p-items", "p-parent-row", "p-select-row"], [3, "itemSize", "minBufferPx", "maxBufferPx"], ["tableVirtualScroll", ""], [1, "po-table-header-sticky"], ["cdkDropList", "", "cdkDropListOrientation", "horizontal", 3, "cdkDropListDropped"], ["tableVirtualScrollThDragDrop", ""], ["tableVirtualScrollThDefault", ""], ["class", "po-table-header-ellipsis p-element po-frozen-column example-box", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-header-ellipsis", "p-element", "po-frozen-column", "example-box", 3, "ngClass", "ngStyle", "pFrozenColumn", "click"], ["class", "po-table-group-row", 4, "cdkVirtualFor", "cdkVirtualForOf", "cdkVirtualForTrackBy"], ["class", "p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "ngClass", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "p-element", "po-frozen-column", 3, "ngClass", "pFrozenColumn", "click"], ["class", "po-clickable", 3, "p-icon", 4, "ngIf"], [1, "po-clickable", 3, "p-icon"], [3, "name", "p-checked", "p-change-selected"], ["name", "checkbox", 3, "p-checkboxValue", "p-change"], [1, "po-table-header-ellipsis", 3, "p-tooltip", "p-append-in-body", "mouseenter", "mouseleave"], ["columnHeader", ""], [3, "po-table-header-icon-unselected", "po-table-header-icon-descending", "po-table-header-icon-ascending", 4, "ngIf"], ["p-icon", "ICON_SORT", 4, "ngIf"], ["width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["p-icon", "ICON_SORT"], ["width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z", "fill", "#1D1D30"], ["p-icon", "ICON_SORT_ASC", 4, "ngIf"], ["p-icon", "ICON_SORT_ASC"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z", "fill", "black"], ["cdkDragHandle", "", "p-icon", "ICON_SORT_DESC", 4, "ngIf"], ["cdkDragHandle", "", "p-icon", "ICON_SORT_DESC"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z", "fill", "black"], [1, "po-table-header-fixed-inner"], ["class", "po-table-column po-table-column-single-action", 3, "width", "max-width", 4, "ngIf"], ["class", "po-table-column-actions", 4, "ngIf"], [1, "po-table-column", "po-table-column-single-action"], ["class", "po-table-single-action po-clickable", 3, "po-table-action-disabled", "click", 4, "ngIf"], [1, "po-table-single-action", "po-clickable", 3, "click"], ["class", "po-table-single-action-content", 3, "p-icon", 4, "ngIf"], [1, "po-table-single-action-content", 3, "p-icon"], [1, "po-table-column-actions"], [1, "po-clickable", 3, "click"], ["popupTarget", ""], ["p-icon", "ICON_MORE"], [3, "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-columns-default", "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns"]], template: function PoTableComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, PoTableComponent_div_1_Template, 9, 4, "div", 1)(2, PoTableComponent_div_2_Template, 4, 2, "div", 2)(3, PoTableComponent_div_3_Template, 2, 3, "div", 3);
             i0.ɵɵelementEnd();
@@ -25834,7 +25927,7 @@ class PoTableComponent extends PoTableBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableComponent, [{
         type: Component,
-        args: [{ selector: 'po-table', providers: [PoDateService], template: "<div class=\"po-table-actions\">\n  <div\n    #columnBatchActions\n    *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n    class=\"po-table-actions-batch-actions\"\n  >\n    <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n      <strong>\n        <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n        <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n        <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n      </strong>\n    </div>\n\n    <div class=\"po-table-actions-batch-actions__buttons\">\n      <po-button\n        p-icon=\"ICON_DELETE\"\n        [p-danger]=\"true\"\n        [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n        [p-label]=\"literals.delete\"\n        (p-click)=\"modalDelete.open()\"\n      ></po-button>\n    </div>\n  </div>\n\n  <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" class=\"po-table-actions-column-manager\">\n    <po-button\n      #columnManagerTarget\n      p-icon=\"ICON_SETTINGS\"\n      p-kind=\"tertiary\"\n      p-tooltip-position=\"left\"\n      [p-aria-label]=\"literals.columnsManager\"\n      [p-tooltip]=\"literals.columnsManager\"\n      (p-click)=\"onOpenColumnManager()\"\n    ></po-button>\n  </div>\n\n  <div *ngIf=\"!hideTableSearch && hasValidColumns\" class=\"po-table-search\">\n    <po-search\n      [p-items]=\"items\"\n      [p-filter-keys]=\"filteredColumns\"\n      [p-filter-type]=\"filterType\"\n      (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n    >\n    </po-search>\n  </div>\n</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    <po-loading-overlay *ngIf=\"loading\" [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n            <div *ngIf=\"virtualScroll\">\n              <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n            </div>\n            <div *ngIf=\"!virtualScroll\" class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n              <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n            </div>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer [p-literals]=\"literals\" [p-subtitles]=\"column.subtitles\"> </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Show More Button -->\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    #tableScrollable\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped,\n      'po-table-data-fixed-columns': applyFixedColumns(),\n      'po-table-text-wrap-enabled': textWrap\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\">\n      <tr\n        [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <th\n          *ngIf=\"hasSelectableColumn\"\n          [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n          class=\"po-table-column-selectable\"\n        >\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              (p-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <ng-container\n          *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n        >\n        </ng-container>\n        <ng-template #tableDefaultThDragDrop>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n            class=\"po-table-header-ellipsis p-element po-frozen-column\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n            [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n            [ngClass]=\"{\n              'po-table-header-sorted':\n                sort &&\n                JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                (sortedColumn.ascending || !sortedColumn.ascending)\n            }\"\n            [ngStyle]=\"{\n              'width':\n                height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n            }\"\n            [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n            [class.po-table-column-drag-box]=\"this.isDraggable\"\n            (click)=\"sortColumn(column)\"\n            cdkDrag\n            cdkDragLockAxis=\"x\"\n            [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n            [pFrozenColumn]=\"column.fixed\"\n          >\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-fixed-inner]=\"height\"\n              [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n            >\n              <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                <svg\n                  *ngIf=\"iconNameLib === 'PoIcon'\"\n                  cdkDragHandle\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                </svg>\n              </ng-container>\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n        <ng-template #tableDefaultThDefault>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n            class=\"po-table-header-ellipsis p-element po-frozen-column\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n            [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n            [ngClass]=\"{\n              'po-table-header-sorted':\n                sort &&\n                JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                (sortedColumn.ascending || !sortedColumn.ascending)\n            }\"\n            [ngStyle]=\"{\n              'width':\n                height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n            }\"\n            [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n            (click)=\"sortColumn(column)\"\n            [pFrozenColumn]=\"column.fixed\"\n          >\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-fixed-inner]=\"height\"\n              [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n            >\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row po-table-row-no-data\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n          <td\n            *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n          <td\n            *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [pFrozenColumn]=\"column.fixed\"\n            class=\"p-element po-frozen-column\"\n            [ngClass]=\"getClassColor(row, column)\"\n            (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n          >\n            <div\n              class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              [p-append-in-body]=\"true\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(getCellData(row, column), column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(getCellData(row, column), column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"getCellData(row, column)\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna de a\u00E7oes na direita -->\n          <ng-template\n            *ngIf=\"actionRight\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped,\n        'po-table-data-fixed-columns': applyFixedColumns(),\n        'po-table-text-wrap-enabled': textWrap\n      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead class=\"po-table-header-sticky\" [style.top]=\"inverseOfTranslation\">\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          <th\n            *ngIf=\"hasSelectableColumn\"\n            [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n            class=\"po-table-column-selectable\"\n          >\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              <po-checkbox\n                name=\"selectAll\"\n                *ngIf=\"!hideSelectAll\"\n                (p-change)=\"selectAllRows()\"\n                [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <ng-container\n            *ngIf=\"\n              this.isDraggable || hasSomeFixed();\n              then tableVirtualScrollThDragDrop;\n              else tableVirtualScrollThDefault\n            \"\n          >\n          </ng-container>\n          <ng-template #tableVirtualScrollThDragDrop>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                  <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                  <svg\n                    *ngIf=\"iconNameLib === 'PoIcon'\"\n                    cdkDragHandle\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  </svg>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n          <ng-template #tableVirtualScrollThDefault>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n              class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n\n          <th\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <th\n            *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        </tr>\n      </thead>\n\n      <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n\n      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n            <td\n              *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n            <td\n              *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [pFrozenColumn]=\"column.fixed\"\n              class=\"p-element po-frozen-column\"\n              (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n            >\n              <div\n                class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                [ngSwitch]=\"column.type\"\n                [p-tooltip]=\"tooltipText\"\n                [p-append-in-body]=\"true\"\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                (mouseleave)=\"tooltipMouseLeave()\"\n              >\n                <span *ngSwitchCase=\"'columnTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n            <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n              <ng-template\n                [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n            <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n              <po-table-detail\n                [p-selectable]=\"selectable && !detailHideSelect\"\n                [p-detail]=\"columnMasterDetail.detail\"\n                [p-items]=\"row[nameColumnDetail]\"\n                (p-select-row)=\"selectDetailRow($event)\"\n              >\n              </po-table-detail>\n            </td>\n          </tr>\n        </tbody>\n      </ng-container>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <po-icon\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n    class=\"po-clickable\"\n  >\n  </po-icon>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio [name]=\"idRadio\" [p-checked]=\"row.$selected\" (p-change-selected)=\"selectRow(row)\"></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  <span\n    *ngIf=\"sort && column.sortable !== false\"\n    [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n    [class.po-table-header-icon-descending]=\"\n      JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n    \"\n    [class.po-table-header-icon-ascending]=\"\n      JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n    \"\n  >\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n      <po-icon *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_SORT\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n          fill=\"#1D1D30\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n      <po-icon *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_SORT_ASC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n      <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_SORT_DESC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"headerWidth\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <td\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n    <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n      <po-icon p-icon=\"ICON_MORE\"></po-icon>\n    </div>\n  </td>\n</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n  [p-columns-default]=\"initialColumns\"\n  (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<po-modal\n  #modalDelete\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n" }]
+        args: [{ selector: 'po-table', providers: [PoDateService], template: "<div class=\"po-table-actions\">\n  <div\n    #columnBatchActions\n    *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n    class=\"po-table-actions-batch-actions\"\n  >\n    <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n      <strong>\n        <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n        <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n        <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n      </strong>\n    </div>\n\n    <div class=\"po-table-actions-batch-actions__buttons\">\n      <po-button\n        p-icon=\"ICON_DELETE\"\n        [p-danger]=\"true\"\n        [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n        [p-label]=\"literals.delete\"\n        (p-click)=\"modalDelete.open()\"\n      ></po-button>\n    </div>\n  </div>\n\n  <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" class=\"po-table-actions-column-manager\">\n    <po-button\n      #columnManagerTarget\n      p-icon=\"ICON_SETTINGS\"\n      p-kind=\"tertiary\"\n      p-tooltip-position=\"left\"\n      [p-aria-label]=\"literals.columnsManager\"\n      [p-tooltip]=\"literals.columnsManager\"\n      (p-click)=\"onOpenColumnManager()\"\n    ></po-button>\n  </div>\n\n  <div *ngIf=\"!hideTableSearch && hasValidColumns\" class=\"po-table-search\">\n    <po-search\n      [p-items]=\"items\"\n      [p-filter-keys]=\"filteredColumns\"\n      [p-filter-type]=\"filterType\"\n      (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n    >\n    </po-search>\n  </div>\n</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    <po-loading-overlay *ngIf=\"loading\" [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n            <div *ngIf=\"virtualScroll\">\n              <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n            </div>\n            <div *ngIf=\"!virtualScroll\" class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n              <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n            </div>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer [p-literals]=\"literals\" [p-subtitles]=\"column.subtitles\"> </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Show More Button -->\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    #tableScrollable\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped,\n      'po-table-data-fixed-columns': applyFixedColumns(),\n      'po-table-text-wrap-enabled': textWrap\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\">\n      <tr\n        [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <th\n          *ngIf=\"hasSelectableColumn\"\n          [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n          class=\"po-table-column-selectable\"\n        >\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              (p-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <ng-container\n          *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n        >\n        </ng-container>\n        <ng-template #tableDefaultThDragDrop>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n            class=\"po-table-header-ellipsis p-element po-frozen-column\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n            [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n            [ngClass]=\"{\n              'po-table-header-sorted':\n                sort &&\n                JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                (sortedColumn.ascending || !sortedColumn.ascending)\n            }\"\n            [ngStyle]=\"{\n              'width':\n                height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n            }\"\n            [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n            [class.po-table-column-drag-box]=\"this.isDraggable\"\n            (click)=\"sortColumn(column)\"\n            cdkDrag\n            cdkDragLockAxis=\"x\"\n            [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n            [pFrozenColumn]=\"column.fixed\"\n          >\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-fixed-inner]=\"height\"\n              [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n            >\n              <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                <svg\n                  *ngIf=\"iconNameLib === 'PoIcon'\"\n                  cdkDragHandle\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                </svg>\n              </ng-container>\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n        <ng-template #tableDefaultThDefault>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n            class=\"po-table-header-ellipsis p-element po-frozen-column\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n            [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n            [ngClass]=\"{\n              'po-table-header-sorted':\n                sort &&\n                JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                (sortedColumn.ascending || !sortedColumn.ascending)\n            }\"\n            [ngStyle]=\"{\n              'width':\n                height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n            }\"\n            [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n            (click)=\"sortColumn(column)\"\n            [pFrozenColumn]=\"column.fixed\"\n          >\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-fixed-inner]=\"height\"\n              [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n            >\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row po-table-row-no-data\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n          <td\n            *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n          <td\n            *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [pFrozenColumn]=\"column.fixed\"\n            class=\"p-element po-frozen-column\"\n            [ngClass]=\"getClassColor(row, column)\"\n            (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n          >\n            <div\n              class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              [p-append-in-body]=\"true\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(getCellData(row, column), column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(getCellData(row, column), column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"getCellData(row, column)\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna de a\u00E7oes na direita -->\n          <ng-template\n            *ngIf=\"actionRight\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              [p-parent-row]=\"row\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped,\n        'po-table-data-fixed-columns': applyFixedColumns(),\n        'po-table-text-wrap-enabled': textWrap\n      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead class=\"po-table-header-sticky\" [style.top]=\"inverseOfTranslation\">\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          <th\n            *ngIf=\"hasSelectableColumn\"\n            [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n            class=\"po-table-column-selectable\"\n          >\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              <po-checkbox\n                name=\"selectAll\"\n                *ngIf=\"!hideSelectAll\"\n                (p-change)=\"selectAllRows()\"\n                [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <ng-container\n            *ngIf=\"\n              this.isDraggable || hasSomeFixed();\n              then tableVirtualScrollThDragDrop;\n              else tableVirtualScrollThDefault\n            \"\n          >\n          </ng-container>\n          <ng-template #tableVirtualScrollThDragDrop>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                  <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                  <svg\n                    *ngIf=\"iconNameLib === 'PoIcon'\"\n                    cdkDragHandle\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  </svg>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n          <ng-template #tableVirtualScrollThDefault>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n              class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n\n          <th\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <th\n            *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        </tr>\n      </thead>\n\n      <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n\n      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n            <td\n              *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n            <td\n              *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [pFrozenColumn]=\"column.fixed\"\n              class=\"p-element po-frozen-column\"\n              (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n            >\n              <div\n                class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                [ngSwitch]=\"column.type\"\n                [p-tooltip]=\"tooltipText\"\n                [p-append-in-body]=\"true\"\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                (mouseleave)=\"tooltipMouseLeave()\"\n              >\n                <span *ngSwitchCase=\"'columnTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n            <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n              <ng-template\n                [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n            <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n              <po-table-detail\n                [p-selectable]=\"selectable && !detailHideSelect\"\n                [p-detail]=\"columnMasterDetail.detail\"\n                [p-items]=\"row[nameColumnDetail]\"\n                [p-parent-row]=\"row\"\n                (p-select-row)=\"selectDetailRow($event)\"\n              >\n              </po-table-detail>\n            </td>\n          </tr>\n        </tbody>\n      </ng-container>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <po-icon\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n    class=\"po-clickable\"\n  >\n  </po-icon>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio [name]=\"idRadio\" [p-checked]=\"row.$selected\" (p-change-selected)=\"selectRow(row)\"></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  <span\n    *ngIf=\"sort && column.sortable !== false\"\n    [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n    [class.po-table-header-icon-descending]=\"\n      JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n    \"\n    [class.po-table-header-icon-ascending]=\"\n      JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n    \"\n  >\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n      <po-icon *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_SORT\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n          fill=\"#1D1D30\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n      <po-icon *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_SORT_ASC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n      <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'PhosphorIcon'\" p-icon=\"ICON_SORT_DESC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"headerWidth\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <td\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n    <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n      <po-icon p-icon=\"ICON_MORE\"></po-icon>\n    </div>\n  </td>\n</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n  [p-columns-default]=\"initialColumns\"\n  (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<po-modal\n  #modalDelete\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n" }]
     }], () => [{ type: PoDateService }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: i1.DecimalPipe }, { type: PoTableService }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -25939,14 +26032,13 @@ function PoTableDetailComponent_tr_3_ng_container_1_Template(rf, ctx) { if (rf &
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelement(1, "td", 13);
     i0.ɵɵelementStart(2, "td", 14)(3, "po-checkbox", 15);
-    i0.ɵɵlistener("click", function PoTableDetailComponent_tr_3_ng_container_1_Template_po_checkbox_click_3_listener() { i0.ɵɵrestoreView(_r12); const item_r5 = i0.ɵɵnextContext().$implicit; const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.onSelectRow(item_r5)); })("p-change", function PoTableDetailComponent_tr_3_ng_container_1_Template_po_checkbox_p_change_3_listener() { i0.ɵɵrestoreView(_r12); const item_r5 = i0.ɵɵnextContext().$implicit; const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onSelectRow(item_r5)); });
-    i0.ɵɵtwoWayListener("ngModelChange", function PoTableDetailComponent_tr_3_ng_container_1_Template_po_checkbox_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r12); const item_r5 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(item_r5.$selected, $event) || (item_r5.$selected = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("p-change", function PoTableDetailComponent_tr_3_ng_container_1_Template_po_checkbox_p_change_3_listener() { i0.ɵɵrestoreView(_r12); const item_r5 = i0.ɵɵnextContext().$implicit; const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.onSelectRow(item_r5)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const item_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtwoWayProperty("ngModel", item_r5.$selected);
+    i0.ɵɵproperty("p-checkboxValue", item_r5.$selected);
 } }
 function PoTableDetailComponent_tr_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "td", 16);
@@ -25956,10 +26048,10 @@ function PoTableDetailComponent_tr_3_td_4_strong_1_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const detail_r18 = i0.ɵɵnextContext().$implicit;
-    const ctx_r19 = i0.ɵɵnextContext(2);
+    const detail_r14 = i0.ɵɵnextContext().$implicit;
+    const ctx_r15 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r19.getColumnTitleLabel(detail_r18), ": ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r15.getColumnTitleLabel(detail_r14), ": ");
 } }
 function PoTableDetailComponent_tr_3_td_4_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -25967,11 +26059,11 @@ function PoTableDetailComponent_tr_3_td_4_span_3_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵpipe(2, "currency");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const detail_r18 = i0.ɵɵnextContext().$implicit;
+    const detail_r14 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
-    const ctx_r20 = i0.ɵɵnextContext();
+    const ctx_r16 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind4(2, 1, ctx_r20.getDetailData(item_r5, detail_r18), detail_r18.format, "symbol", "1.2-2"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind4(2, 1, ctx_r16.getDetailData(item_r5, detail_r14), detail_r14.format, "symbol", "1.2-2"));
 } }
 function PoTableDetailComponent_tr_3_td_4_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -25979,11 +26071,11 @@ function PoTableDetailComponent_tr_3_td_4_span_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const detail_r18 = i0.ɵɵnextContext().$implicit;
+    const detail_r14 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
-    const ctx_r21 = i0.ɵɵnextContext();
+    const ctx_r17 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r21.getDetailData(item_r5, detail_r18), detail_r18.format || "dd/MM/yyyy"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r17.getDetailData(item_r5, detail_r14), detail_r14.format || "dd/MM/yyyy"));
 } }
 function PoTableDetailComponent_tr_3_td_4_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -25991,11 +26083,11 @@ function PoTableDetailComponent_tr_3_td_4_span_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵpipe(2, "po_time");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const detail_r18 = i0.ɵɵnextContext().$implicit;
+    const detail_r14 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
-    const ctx_r22 = i0.ɵɵnextContext();
+    const ctx_r18 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r22.getDetailData(item_r5, detail_r18), detail_r18.format || "HH:mm:ss.ffffff"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r18.getDetailData(item_r5, detail_r14), detail_r14.format || "HH:mm:ss.ffffff"));
 } }
 function PoTableDetailComponent_tr_3_td_4_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26003,51 +26095,51 @@ function PoTableDetailComponent_tr_3_td_4_span_6_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const detail_r18 = i0.ɵɵnextContext().$implicit;
+    const detail_r14 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
-    const ctx_r23 = i0.ɵɵnextContext();
+    const ctx_r19 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r23.getDetailData(item_r5, detail_r18), detail_r18.format || "dd/MM/yyyy HH:mm:ss"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r19.getDetailData(item_r5, detail_r14), detail_r14.format || "dd/MM/yyyy HH:mm:ss"), " ");
 } }
 function PoTableDetailComponent_tr_3_td_4_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const detail_r18 = i0.ɵɵnextContext().$implicit;
+    const detail_r14 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
-    const ctx_r24 = i0.ɵɵnextContext();
+    const ctx_r20 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r24.formatNumberDetail(ctx_r24.getDetailData(item_r5, detail_r18), detail_r18.format));
+    i0.ɵɵtextInterpolate(ctx_r20.formatNumberDetail(ctx_r20.getDetailData(item_r5, detail_r14), detail_r14.format));
 } }
 function PoTableDetailComponent_tr_3_td_4_span_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const detail_r18 = i0.ɵɵnextContext().$implicit;
+    const detail_r14 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
-    const ctx_r25 = i0.ɵɵnextContext();
+    const ctx_r21 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r25.getDetailData(item_r5, detail_r18));
+    i0.ɵɵtextInterpolate(ctx_r21.getDetailData(item_r5, detail_r14));
 } }
 function PoTableDetailComponent_tr_3_td_4_Template(rf, ctx) { if (rf & 1) {
-    const _r40 = i0.ɵɵgetCurrentView();
+    const _r36 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "td", 17);
-    i0.ɵɵlistener("click", function PoTableDetailComponent_tr_3_td_4_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r40); const item_r5 = i0.ɵɵnextContext().$implicit; const ctx_r39 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r39.isSelectable ? ctx_r39.onSelectRow(item_r5) : "javascript:;"); });
+    i0.ɵɵlistener("click", function PoTableDetailComponent_tr_3_td_4_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r36); const item_r5 = i0.ɵɵnextContext().$implicit; const ctx_r35 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r35.isSelectable ? ctx_r35.onSelectRow(item_r5) : "javascript:;"); });
     i0.ɵɵtemplate(1, PoTableDetailComponent_tr_3_td_4_strong_1_Template, 2, 1, "strong", 1);
     i0.ɵɵelementContainerStart(2, 18);
     i0.ɵɵtemplate(3, PoTableDetailComponent_tr_3_td_4_span_3_Template, 3, 6, "span", 19)(4, PoTableDetailComponent_tr_3_td_4_span_4_Template, 3, 4, "span", 19)(5, PoTableDetailComponent_tr_3_td_4_span_5_Template, 3, 4, "span", 19)(6, PoTableDetailComponent_tr_3_td_4_span_6_Template, 3, 4, "span", 19)(7, PoTableDetailComponent_tr_3_td_4_span_7_Template, 2, 1, "span", 19)(8, PoTableDetailComponent_tr_3_td_4_span_8_Template, 2, 1, "span", 20);
     i0.ɵɵelementContainerEnd();
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const detail_r18 = ctx.$implicit;
+    const detail_r14 = ctx.$implicit;
     const ctx_r9 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("po-table-column-right", ctx_r9.typeHeaderTop && (detail_r18.type === "currency" || detail_r18.type === "number"));
+    i0.ɵɵclassProp("po-table-column-right", ctx_r9.typeHeaderTop && (detail_r14.type === "currency" || detail_r14.type === "number"));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r9.typeHeaderInline);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngSwitch", detail_r18.type);
+    i0.ɵɵproperty("ngSwitch", detail_r14.type);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngSwitchCase", "currency");
     i0.ɵɵadvance();
@@ -26086,6 +26178,11 @@ class PoTableDetailComponent {
      * Lista de itens do _detail_ da tabela.
      */
     items;
+    /**
+     * Linha do registro pai correspondente ao item de detalhe selecionado. Utilizado para gerenciar o estado de seleção do elemento pai,
+     * permitindo que o mesmo seja atualizado para refletir a seleção de todos os filhos ou estado indeterminado.
+     */
+    parentRow;
     /**
      * Define se a tabela possui a opção de `selectable` habilitada.
      */
@@ -26145,7 +26242,7 @@ class PoTableDetailComponent {
     }
     onSelectRow(item) {
         item.$selected = !item.$selected;
-        this.selectRow.emit(item);
+        this.selectRow.emit({ item: item, parentRow: this.parentRow });
     }
     returnPoTableDetailObject(value) {
         if (value && isTypeof(value, 'object')) {
@@ -26161,7 +26258,7 @@ class PoTableDetailComponent {
         }
     }
     static ɵfac = function PoTableDetailComponent_Factory(t) { return new (t || PoTableDetailComponent)(i0.ɵɵdirectiveInject(i1.DecimalPipe)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableDetailComponent, selectors: [["po-table-detail"]], inputs: { items: [i0.ɵɵInputFlags.None, "p-items", "items"], isSelectable: [i0.ɵɵInputFlags.None, "p-selectable", "isSelectable"], detail: [i0.ɵɵInputFlags.None, "p-detail", "detail"] }, outputs: { selectRow: "p-select-row" }, decls: 4, vars: 2, consts: [[1, "po-table-master-detail"], [4, "ngIf"], ["class", "po-table-detail-row", 3, "po-table-row-active", 4, "ngFor", "ngForOf"], ["class", "po-table-header po-table-column-selectable", 4, "ngIf"], [1, "po-table-header", "po-table-header-column", "po-table-header-master-detail"], ["class", "po-table-header po-table-header-ellipsis", 4, "ngFor", "ngForOf"], [1, "po-table-header", "po-table-column-selectable"], [1, "po-table-header", "po-table-header-ellipsis"], [1, "po-table-header-flex"], [1, "po-table-detail-row"], [4, "ngIf", "ngIfElse"], ["masterDetailSpace", ""], ["class", "po-table-column-master-detail po-table-master-detail-label", 3, "po-table-column-right", "click", 4, "ngFor", "ngForOf"], [1, "po-table-column-master-detail-space-checkbox"], [1, "po-table-column", "po-table-column-selectable"], ["name", "checkbox", 3, "ngModel", "click", "p-change", "ngModelChange"], [1, "po-table-column-master-detail-space"], [1, "po-table-column-master-detail", "po-table-master-detail-label", 3, "click"], [3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"]], template: function PoTableDetailComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableDetailComponent, selectors: [["po-table-detail"]], inputs: { items: [i0.ɵɵInputFlags.None, "p-items", "items"], parentRow: [i0.ɵɵInputFlags.None, "p-parent-row", "parentRow"], isSelectable: [i0.ɵɵInputFlags.None, "p-selectable", "isSelectable"], detail: [i0.ɵɵInputFlags.None, "p-detail", "detail"] }, outputs: { selectRow: "p-select-row" }, decls: 4, vars: 2, consts: [[1, "po-table-master-detail"], [4, "ngIf"], ["class", "po-table-detail-row", 3, "po-table-row-active", 4, "ngFor", "ngForOf"], ["class", "po-table-header po-table-column-selectable", 4, "ngIf"], [1, "po-table-header", "po-table-header-column", "po-table-header-master-detail"], ["class", "po-table-header po-table-header-ellipsis", 4, "ngFor", "ngForOf"], [1, "po-table-header", "po-table-column-selectable"], [1, "po-table-header", "po-table-header-ellipsis"], [1, "po-table-header-flex"], [1, "po-table-detail-row"], [4, "ngIf", "ngIfElse"], ["masterDetailSpace", ""], ["class", "po-table-column-master-detail po-table-master-detail-label", 3, "po-table-column-right", "click", 4, "ngFor", "ngForOf"], [1, "po-table-column-master-detail-space-checkbox"], [1, "po-table-column", "po-table-column-selectable"], ["name", "checkbox", 3, "p-checkboxValue", "p-change"], [1, "po-table-column-master-detail-space"], [1, "po-table-column-master-detail", "po-table-master-detail-label", 3, "click"], [3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"]], template: function PoTableDetailComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "table", 0);
             i0.ɵɵtemplate(1, PoTableDetailComponent_thead_1_Template, 5, 2, "thead", 1);
             i0.ɵɵelementStart(2, "tbody");
@@ -26172,14 +26269,17 @@ class PoTableDetailComponent {
             i0.ɵɵproperty("ngIf", ctx.typeHeaderTop);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", ctx.items);
-        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, i2$1.NgControlStatus, i2$1.NgModel, PoCheckboxComponent, i1.CurrencyPipe, i1.DatePipe, PoTimePipe], encapsulation: 2 });
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, PoCheckboxComponent, i1.CurrencyPipe, i1.DatePipe, PoTimePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableDetailComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-detail', template: "<table class=\"po-table-master-detail\">\n  <thead *ngIf=\"typeHeaderTop\">\n    <tr>\n      <th class=\"po-table-header po-table-column-selectable\" *ngIf=\"isSelectable\"></th>\n      <th class=\"po-table-header po-table-header-column po-table-header-master-detail\"></th>\n      <th class=\"po-table-header po-table-header-ellipsis\" *ngFor=\"let detail of detail.columns\">\n        <div\n          class=\"po-table-header-flex\"\n          [class.po-table-header-flex-right]=\"detail.type === 'currency' || detail.type === 'number'\"\n        >\n          {{ getColumnTitleLabel(detail) }}\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr\n      class=\"po-table-detail-row\"\n      [class.po-table-row-active]=\"item.$selected && isSelectable\"\n      *ngFor=\"let item of items\"\n    >\n      <ng-container *ngIf=\"isSelectable; else masterDetailSpace\">\n        <td class=\"po-table-column-master-detail-space-checkbox\"></td>\n        <td class=\"po-table-column po-table-column-selectable\">\n          <po-checkbox\n            name=\"checkbox\"\n            (click)=\"onSelectRow(item)\"\n            (p-change)=\"onSelectRow(item)\"\n            [(ngModel)]=\"item.$selected\"\n          ></po-checkbox>\n        </td>\n      </ng-container>\n\n      <ng-template #masterDetailSpace>\n        <td class=\"po-table-column-master-detail-space\"></td>\n      </ng-template>\n\n      <td\n        class=\"po-table-column-master-detail po-table-master-detail-label\"\n        (click)=\"isSelectable ? onSelectRow(item) : 'javascript:;'\"\n        *ngFor=\"let detail of detailColumns\"\n        [class.po-table-column-right]=\"typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')\"\n      >\n        <strong *ngIf=\"typeHeaderInline\"> {{ getColumnTitleLabel(detail) }}: </strong>\n\n        <ng-container [ngSwitch]=\"detail.type\">\n          <span *ngSwitchCase=\"'currency'\">{{\n            getDetailData(item, detail) | currency: detail.format : 'symbol' : '1.2-2'\n          }}</span>\n          <span *ngSwitchCase=\"'date'\">{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>\n          <span *ngSwitchCase=\"'time'\">{{\n            getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff'\n          }}</span>\n          <span *ngSwitchCase=\"'dateTime'\">\n            {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\n          </span>\n          <span *ngSwitchCase=\"'number'\">{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>\n          <span *ngSwitchDefault>{{ getDetailData(item, detail) }}</span>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
+        args: [{ selector: 'po-table-detail', template: "<table class=\"po-table-master-detail\">\n  <thead *ngIf=\"typeHeaderTop\">\n    <tr>\n      <th class=\"po-table-header po-table-column-selectable\" *ngIf=\"isSelectable\"></th>\n      <th class=\"po-table-header po-table-header-column po-table-header-master-detail\"></th>\n      <th class=\"po-table-header po-table-header-ellipsis\" *ngFor=\"let detail of detail.columns\">\n        <div\n          class=\"po-table-header-flex\"\n          [class.po-table-header-flex-right]=\"detail.type === 'currency' || detail.type === 'number'\"\n        >\n          {{ getColumnTitleLabel(detail) }}\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr\n      class=\"po-table-detail-row\"\n      [class.po-table-row-active]=\"item.$selected && isSelectable\"\n      *ngFor=\"let item of items\"\n    >\n      <ng-container *ngIf=\"isSelectable; else masterDetailSpace\">\n        <td class=\"po-table-column-master-detail-space-checkbox\"></td>\n        <td class=\"po-table-column po-table-column-selectable\">\n          <po-checkbox name=\"checkbox\" (p-change)=\"onSelectRow(item)\" [p-checkboxValue]=\"item.$selected\"></po-checkbox>\n        </td>\n      </ng-container>\n\n      <ng-template #masterDetailSpace>\n        <td class=\"po-table-column-master-detail-space\"></td>\n      </ng-template>\n\n      <td\n        class=\"po-table-column-master-detail po-table-master-detail-label\"\n        (click)=\"isSelectable ? onSelectRow(item) : 'javascript:;'\"\n        *ngFor=\"let detail of detailColumns\"\n        [class.po-table-column-right]=\"typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')\"\n      >\n        <strong *ngIf=\"typeHeaderInline\"> {{ getColumnTitleLabel(detail) }}: </strong>\n\n        <ng-container [ngSwitch]=\"detail.type\">\n          <span *ngSwitchCase=\"'currency'\">{{\n            getDetailData(item, detail) | currency: detail.format : 'symbol' : '1.2-2'\n          }}</span>\n          <span *ngSwitchCase=\"'date'\">{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>\n          <span *ngSwitchCase=\"'time'\">{{\n            getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff'\n          }}</span>\n          <span *ngSwitchCase=\"'dateTime'\">\n            {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\n          </span>\n          <span *ngSwitchCase=\"'number'\">{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>\n          <span *ngSwitchDefault>{{ getDetailData(item, detail) }}</span>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
     }], () => [{ type: i1.DecimalPipe }], { items: [{
             type: Input,
             args: ['p-items']
+        }], parentRow: [{
+            type: Input,
+            args: ['p-parent-row']
         }], isSelectable: [{
             type: Input,
             args: ['p-selectable']
@@ -32018,7 +32118,7 @@ class PoDynamicFormBaseComponent {
      * o `po-textarea`, caso o valor da propriedade `rows` seja menor que 3 o componente criado será o `po-input`.
      * - Caso seja informada a propriedade `secret` o componente criado será o `po-password`.
      * - Caso o *type* informado seja *string* o componente criado será o `po-input`.
-     *
+     * > Ao alterar o valor das `properties` e/ou agrupamentos via container, os `fields` que utilizam serviço podem refazer as chamadas para as API's.
      * @default `[]`
      */
     fields;
@@ -42750,7 +42850,7 @@ function PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_switch_9_T
     const ctx_r17 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("name", field_r8.property);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r17.value[field_r8.property]);
-    i0.ɵɵproperty("ngClass", field_r8.componentClass)("p-disabled", ctx_r17.isDisabled(field_r8))("p-format-model", field_r8.formatModel)("p-help", field_r8.help)("p-label", field_r8.label)("p-label-off", field_r8.booleanFalse)("p-label-on", field_r8.booleanTrue)("p-label-position", field_r8.labelPosition);
+    i0.ɵɵproperty("ngClass", field_r8.componentClass)("p-disabled", ctx_r17.isDisabled(field_r8))("p-format-model", field_r8.formatModel)("p-help", field_r8.help)("p-label", field_r8.label)("p-label-off", field_r8.booleanFalse)("p-label-on", field_r8.booleanTrue)("p-label-position", field_r8.labelPosition)("p-hide-label-status", field_r8.hideLabelStatus);
 } }
 function PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_checkbox_10_Template(rf, ctx) { if (rf & 1) {
     const _r91 = i0.ɵɵgetCurrentView();
@@ -42857,7 +42957,7 @@ function PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_upload_17_
 } }
 function PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_divider_1_Template, 1, 1, "po-divider", 6)(2, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_datepicker_2_Template, 2, 20, "po-datepicker", 7)(3, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_datepicker_range_3_Template, 2, 16, "po-datepicker-range", 8)(4, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_input_4_Template, 2, 21, "po-input", 9)(5, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_number_5_Template, 2, 21, "po-number", 10)(6, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_decimal_6_Template, 2, 23, "po-decimal", 11)(7, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_select_7_Template, 2, 14, "po-select", 12)(8, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_radio_group_8_Template, 2, 12, "po-radio-group", 13)(9, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_switch_9_Template, 2, 10, "po-switch", 14)(10, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_checkbox_10_Template, 2, 7, "po-checkbox", 15)(11, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_combo_11_Template, 2, 28, "po-combo", 16)(12, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_lookup_12_Template, 2, 24, "po-lookup", 17)(13, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_checkbox_group_13_Template, 2, 12, "po-checkbox-group", 13)(14, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_multiselect_14_Template, 2, 23, "po-multiselect", 18)(15, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_textarea_15_Template, 2, 15, "po-textarea", 19)(16, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_password_16_Template, 2, 20, "po-password", 20)(17, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_upload_17_Template, 2, 22, "po-upload", 21);
+    i0.ɵɵtemplate(1, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_divider_1_Template, 1, 1, "po-divider", 6)(2, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_datepicker_2_Template, 2, 20, "po-datepicker", 7)(3, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_datepicker_range_3_Template, 2, 16, "po-datepicker-range", 8)(4, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_input_4_Template, 2, 21, "po-input", 9)(5, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_number_5_Template, 2, 21, "po-number", 10)(6, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_decimal_6_Template, 2, 23, "po-decimal", 11)(7, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_select_7_Template, 2, 14, "po-select", 12)(8, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_radio_group_8_Template, 2, 12, "po-radio-group", 13)(9, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_switch_9_Template, 2, 11, "po-switch", 14)(10, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_checkbox_10_Template, 2, 7, "po-checkbox", 15)(11, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_combo_11_Template, 2, 28, "po-combo", 16)(12, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_lookup_12_Template, 2, 24, "po-lookup", 17)(13, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_checkbox_group_13_Template, 2, 12, "po-checkbox-group", 13)(14, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_multiselect_14_Template, 2, 23, "po-multiselect", 18)(15, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_textarea_15_Template, 2, 15, "po-textarea", 19)(16, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_password_16_Template, 2, 20, "po-password", 20)(17, PoDynamicFormFieldsComponent_ng_template_1_ng_container_0_po_upload_17_Template, 2, 22, "po-upload", 21);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const field_r8 = ctx.$implicit;
@@ -42934,7 +43034,12 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
     ngOnChanges(changes) {
         if (changes.fields) {
             this.visibleFields = this.getVisibleFields();
-            this.setContainerFields();
+            if (changes.fields.previousValue && this.hasContainer()) {
+                this.hasChangeContainer(changes.fields.previousValue, changes.fields.currentValue);
+            }
+            if (!changes.fields.previousValue || !changes.fields.currentValue) {
+                this.setContainerFields();
+            }
         }
     }
     focus(property) {
@@ -43025,13 +43130,119 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
             visibleField.disabled = previousDisabled;
         }
     }
+    hasChangeContainer(previous, current) {
+        const prevArray = previous.map((item, index) => ({
+            container: item.container || null,
+            property: item.property,
+            index,
+            order: item.order
+        }));
+        const currArray = current.map((item, index) => ({
+            container: item.container || null,
+            property: item.property,
+            index,
+            order: item.order
+        }));
+        const prevContainers = prevArray.filter(item => item.container);
+        const currContainers = currArray.filter(item => item.container);
+        const prevOrder = prevArray.filter(item => item.order);
+        const currOrder = currArray.filter(item => item.order);
+        // Verifica mudança na quantidade de containers
+        if (prevContainers.length !== currContainers.length) {
+            this.setContainerFields();
+            return;
+        }
+        // Verifica mudança na quantidade de order
+        if (prevOrder.length !== currOrder.length) {
+            this.setContainerFields();
+            return;
+        }
+        if (currContainers.length) {
+            this.handleChangesContainer(prevContainers, currContainers, 'container');
+        }
+        if (currOrder.length) {
+            this.handleChangesContainer(prevOrder, currOrder, 'order');
+        }
+        //atualiza container sem mudança na estrutura da interface
+        const result = this.diffObjectsArray(previous, this.getVisibleFields());
+        this.containerFields = this.updateFieldContainer(result, this.containerFields);
+    }
+    updateFieldContainer(changes, containerFields) {
+        const mapchanges = new Map(changes.map(obj => [obj.property, obj]));
+        containerFields.forEach(subArray => {
+            subArray.forEach((subItem, index) => {
+                const item = mapchanges.get(subItem.property);
+                if (item) {
+                    subArray[index] = { ...subItem, ...item };
+                }
+            });
+        });
+        return containerFields;
+    }
+    diffObjectsArray(oldArray, newArray) {
+        const differences = [];
+        newArray.forEach(newObj => {
+            const oldObj = oldArray.find(o => o.property === newObj.property);
+            if (!oldObj) {
+                // Se o objeto é novo, adiciona todo o objeto com a propriedade "property"
+                differences.push({ ...newObj });
+            }
+            else {
+                // Verificar se há diferenças nas propriedades
+                const diff = { property: newObj.property };
+                let hasDifferences = false;
+                for (const key in newObj) {
+                    if (newObj[key] !== oldObj[key]) {
+                        diff[key] = newObj[key];
+                        hasDifferences = true;
+                    }
+                }
+                if (hasDifferences) {
+                    differences.push(diff);
+                }
+            }
+        });
+        //retorna mudanças nos fields para atualização do containerFields
+        return differences;
+    }
+    hasContainer() {
+        return this.visibleFields && this.visibleFields.some(field => field.container);
+    }
+    handleChangesContainer(prevContainers, currContainers, key) {
+        for (let i = 0; i < prevContainers.length; i++) {
+            const prev = prevContainers[i];
+            const curr = currContainers[i];
+            //Verifica se container mudou de posição
+            if (prev[key] === curr[key] && prev.index !== curr.index) {
+                this.setContainerFields();
+                return;
+            }
+            //Verifica se foi apenas mudança da string em caso do container ou valor no order
+            if (prev[key] !== curr[key] && prev.index === curr.index) {
+                if (key === 'order') {
+                    this.setContainerFields();
+                    return;
+                }
+                this.containerFields.forEach(subItem => subItem.forEach(item => {
+                    if (item.property === curr.property) {
+                        item[key] = curr[key];
+                    }
+                }));
+            }
+            //verifica se manteve o mesmo número de container, mas alterou property do container
+            if (prev[key] !== curr[key] && prev.property !== curr.property) {
+                this.setContainerFields();
+                return;
+            }
+        }
+    }
     static ɵfac = function PoDynamicFormFieldsComponent_Factory(t) { return new (t || PoDynamicFormFieldsComponent)(i0.ɵɵdirectiveInject(i1.TitleCasePipe), i0.ɵɵdirectiveInject(PoDynamicFormValidationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$1.NgForm)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDynamicFormFieldsComponent, selectors: [["po-dynamic-form-fields"]], viewQuery: function PoDynamicFormFieldsComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$y, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.components = _t);
-        } }, features: [i0.ɵɵProvidersFeature([PoDynamicFormValidationService], [{ provide: ControlContainer, useExisting: NgForm }]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 5, vars: 1, consts: [["class", "po-row", 3, "po-dynamic", 4, "ngIf"], ["poContent", ""], ["poContentContainer", ""], [1, "po-row"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-sm-12", 3, "p-label", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-show-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-field-label", "p-field-value", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-format-model", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-auto-focus", "p-disabled", "p-label", "p-size", "ngModelChange", "p-change", 4, "ngIf"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change", 4, "ngIf"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-show-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-show-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "ngModel", "ngClass", "p-auto-upload", "p-directory", "p-disabled", "p-drag-drop", "p-drag-drop-height", "p-restrictions", "p-form-field", "p-headers", "p-help", "p-hide-restrictions-info", "p-hide-select-button", "p-hide-send-button", "p-multiple", "p-label", "p-literals", "name", "p-optional", "p-required", "p-show-required", "p-url", "ngModelChange", "p-error", "p-success", "p-upload", "p-change", "p-change-model", 4, "ngIf"], [1, "po-sm-12", 3, "p-label"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change"], ["component", ""], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-show-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-field-label", "p-field-value", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-format-model", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-auto-focus", "p-disabled", "p-label", "p-size", "ngModelChange", "p-change"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-show-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-show-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "ngModel", "ngClass", "p-auto-upload", "p-directory", "p-disabled", "p-drag-drop", "p-drag-drop-height", "p-restrictions", "p-form-field", "p-headers", "p-help", "p-hide-restrictions-info", "p-hide-select-button", "p-hide-send-button", "p-multiple", "p-label", "p-literals", "name", "p-optional", "p-required", "p-show-required", "p-url", "ngModelChange", "p-error", "p-success", "p-upload", "p-change", "p-change-model"], [3, "p-fields", "p-content"]], template: function PoDynamicFormFieldsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵProvidersFeature([PoDynamicFormValidationService], [{ provide: ControlContainer, useExisting: NgForm }]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 5, vars: 1, consts: [["class", "po-row", 3, "po-dynamic", 4, "ngIf"], ["poContent", ""], ["poContentContainer", ""], [1, "po-row"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-sm-12", 3, "p-label", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-show-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-field-label", "p-field-value", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-format-model", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "p-hide-label-status", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-auto-focus", "p-disabled", "p-label", "p-size", "ngModelChange", "p-change", 4, "ngIf"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change", 4, "ngIf"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-show-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-show-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "ngModel", "ngClass", "p-auto-upload", "p-directory", "p-disabled", "p-drag-drop", "p-drag-drop-height", "p-restrictions", "p-form-field", "p-headers", "p-help", "p-hide-restrictions-info", "p-hide-select-button", "p-hide-send-button", "p-multiple", "p-label", "p-literals", "name", "p-optional", "p-required", "p-show-required", "p-url", "ngModelChange", "p-error", "p-success", "p-upload", "p-change", "p-change-model", 4, "ngIf"], [1, "po-sm-12", 3, "p-label"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change"], ["component", ""], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-show-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-field-label", "p-field-value", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-format-model", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "p-hide-label-status", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-auto-focus", "p-disabled", "p-label", "p-size", "ngModelChange", "p-change"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-show-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-show-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "ngModel", "ngClass", "p-auto-upload", "p-directory", "p-disabled", "p-drag-drop", "p-drag-drop-height", "p-restrictions", "p-form-field", "p-headers", "p-help", "p-hide-restrictions-info", "p-hide-select-button", "p-hide-send-button", "p-multiple", "p-label", "p-literals", "name", "p-optional", "p-required", "p-show-required", "p-url", "ngModelChange", "p-error", "p-success", "p-upload", "p-change", "p-change-model"], [3, "p-fields", "p-content"]], template: function PoDynamicFormFieldsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PoDynamicFormFieldsComponent_div_0_Template, 2, 6, "div", 0)(1, PoDynamicFormFieldsComponent_ng_template_1_Template, 1, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(3, PoDynamicFormFieldsComponent_ng_template_3_Template, 1, 2, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.visibleFields && ctx.visibleFields.length > 0);
@@ -43039,7 +43250,7 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDynamicFormFieldsComponent, [{
         type: Component,
-        args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], template: "<div class=\"po-row\" [class.po-dynamic]=\"hasContainers\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      hasContainers ? poContentContainer : poContent;\n      context: { $implicit: hasContainers ? containerFields : visibleFields }\n    \"\n  ></ng-container>\n</div>\n\n<ng-template #poContent let-fields>\n  <ng-container *ngFor=\"let field of fields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-iso-format]=\"field.isoFormat\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-step]=\"field.step\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-format-model]=\"field.formatModel\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      [p-label-position]=\"field.labelPosition\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-checkbox\n      #component\n      *ngIf=\"compareTo(field.control, 'checkbox')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-label]=\"field.label\"\n      [p-size]=\"field.size\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-options]=\"field.options\"\n      [p-optional]=\"field.optional\"\n      [p-sort]=\"field.sort\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-filter-minlength]=\"field.filterMinlength\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-disabled-init-filter]=\"field.disabledInitFilter\"\n      [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-change-on-enter]=\"field.changeOnEnter\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-multiple]=\"field.multiple\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-advanced-filters]=\"field.advancedFilters\"\n      (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n      (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-sort]=\"field.sort\"\n      [p-placeholder-search]=\"field.placeholderSearch\"\n      [p-hide-search]=\"field.hideSearch\"\n      [p-hide-select-all]=\"field.hideSelectAll\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-hide-password-peek]=\"field.hidePasswordPeek\"\n      [p-icon]=\"field.icon\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n\n    <po-upload\n      #component\n      *ngIf=\"compareTo(field.control, 'upload')\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-upload]=\"field.autoUpload\"\n      [p-directory]=\"field.directory\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-drag-drop]=\"field.dragDrop\"\n      [p-drag-drop-height]=\"field.dragDropHeight\"\n      [p-restrictions]=\"field.restrictions\"\n      [p-form-field]=\"field.formField\"\n      [p-headers]=\"field.headers\"\n      [p-help]=\"field.help\"\n      [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n      [p-hide-select-button]=\"field.hideSelectButton\"\n      [p-hide-send-button]=\"field.hideSendButton\"\n      [p-multiple]=\"field.multiple\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [name]=\"field.property\"\n      (p-error)=\"field.onError($event)\"\n      (p-success)=\"field.onSuccess($event)\"\n      (p-upload)=\"field.onUpload($event)\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-url]=\"field.url\"\n    >\n    </po-upload>\n  </ng-container>\n</ng-template>\n\n<ng-template #poContentContainer let-fields>\n  <po-dynamic-container [p-fields]=\"fields\" [p-content]=\"poContent\"></po-dynamic-container>\n</ng-template>\n" }]
+        args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], template: "<div class=\"po-row\" [class.po-dynamic]=\"hasContainers\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      hasContainers ? poContentContainer : poContent;\n      context: { $implicit: hasContainers ? containerFields : visibleFields }\n    \"\n  ></ng-container>\n</div>\n\n<ng-template #poContent let-fields>\n  <ng-container *ngFor=\"let field of fields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-iso-format]=\"field.isoFormat\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-step]=\"field.step\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-format-model]=\"field.formatModel\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      [p-label-position]=\"field.labelPosition\"\n      [p-hide-label-status]=\"field.hideLabelStatus\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-checkbox\n      #component\n      *ngIf=\"compareTo(field.control, 'checkbox')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-label]=\"field.label\"\n      [p-size]=\"field.size\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-options]=\"field.options\"\n      [p-optional]=\"field.optional\"\n      [p-sort]=\"field.sort\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-filter-minlength]=\"field.filterMinlength\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-disabled-init-filter]=\"field.disabledInitFilter\"\n      [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-change-on-enter]=\"field.changeOnEnter\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-multiple]=\"field.multiple\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-advanced-filters]=\"field.advancedFilters\"\n      (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n      (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-sort]=\"field.sort\"\n      [p-placeholder-search]=\"field.placeholderSearch\"\n      [p-hide-search]=\"field.hideSearch\"\n      [p-hide-select-all]=\"field.hideSelectAll\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-hide-password-peek]=\"field.hidePasswordPeek\"\n      [p-icon]=\"field.icon\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n\n    <po-upload\n      #component\n      *ngIf=\"compareTo(field.control, 'upload')\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-upload]=\"field.autoUpload\"\n      [p-directory]=\"field.directory\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-drag-drop]=\"field.dragDrop\"\n      [p-drag-drop-height]=\"field.dragDropHeight\"\n      [p-restrictions]=\"field.restrictions\"\n      [p-form-field]=\"field.formField\"\n      [p-headers]=\"field.headers\"\n      [p-help]=\"field.help\"\n      [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n      [p-hide-select-button]=\"field.hideSelectButton\"\n      [p-hide-send-button]=\"field.hideSendButton\"\n      [p-multiple]=\"field.multiple\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [name]=\"field.property\"\n      (p-error)=\"field.onError($event)\"\n      (p-success)=\"field.onSuccess($event)\"\n      (p-upload)=\"field.onUpload($event)\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-url]=\"field.url\"\n    >\n    </po-upload>\n  </ng-container>\n</ng-template>\n\n<ng-template #poContentContainer let-fields>\n  <po-dynamic-container [p-fields]=\"fields\" [p-content]=\"poContent\"></po-dynamic-container>\n</ng-template>\n" }]
     }], () => [{ type: i1.TitleCasePipe }, { type: PoDynamicFormValidationService }, { type: i0.ChangeDetectorRef }, { type: i2$1.NgForm }], { components: [{
             type: ViewChildren,
             args: ['component']
@@ -49871,7 +50082,7 @@ class PoPageDefaultBaseComponent {
      */
     set actions(actions) {
         this._actions = Array.isArray(actions) ? actions : [];
-        this.visibleActions = this.actions.filter(action => action.visible !== false);
+        this.visibleActions = this.getVisibleActions();
         this.setDropdownActions();
     }
     get actions() {
@@ -50217,6 +50428,9 @@ class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
     actionIsDisabled(action) {
         return isTypeof(action.disabled, 'function') ? action.disabled(action) : action.disabled;
     }
+    actionIsVisible(action) {
+        return isTypeof(action.visible, 'function') ? action.visible(action) : action.visible;
+    }
     callAction(item) {
         if (item.url) {
             isExternalLink(item.url) ? openExternalLink(item.url) : this.router.navigate([item.url]);
@@ -50226,6 +50440,8 @@ class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
         }
     }
     hasPageHeader() {
+        this.visibleActions = this.getVisibleActions();
+        this.setDropdownActions();
         return !!(this.title ||
             (this.visibleActions && this.visibleActions.length) ||
             (this.breadcrumb && this.breadcrumb.items.length));
@@ -50235,6 +50451,9 @@ class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
             this.dropdownActions = this.visibleActions.slice(this.limitPrimaryActions - 1);
         }
     }
+    getVisibleActions() {
+        return this.actions.filter(action => this.actionIsVisible(action) !== false);
+    }
     onResize(event) {
         const width = event.target.innerWidth;
         if (width < this.maxWidthMobile) {