@po-ui/ng-components 6.6.0 → 6.9.0

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

@@ -2775,7 +2775,7 @@ const PO_TOOLTIP_POSITION_DEFAULT = 'bottom';
  * @description
  *
  * A diretiva po-tooltip deve ser utilizada para oferecer informações adicionais quando os usuários
- * passam o mouse sobre o elemento alvo ao qual ela está atribuída.
+ * passam o mouse ou realizam o foco sobre o elemento alvo ao qual ela está atribuída.
  *
  * O conteúdo é formado por um pequeno texto que deve contribuir para uma tomada de decisão ou
  * orientação do usuário. A ativação dele pode estar em qualquer componente ou tag HTML.
@@ -3252,6 +3252,7 @@ PoTooltipControlPositionService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({
         }], null, null);
 })();
 
+const nativeElements = ['input', 'button'];
 /**
  * @docsExtends PoTooltipBaseDirective
  *
@@ -3291,6 +3292,16 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
             this.removeTooltipAction();
         }
     }
+    onFocusOut() {
+        if (!this.displayTooltip) {
+            this.removeTooltipAction();
+        }
+    }
+    onFocusIn() {
+        if (!this.displayTooltip) {
+            this.addTooltipAction();
+        }
+    }
     ngOnInit() {
         this.initScrollEventListenerFunction();
     }
@@ -3329,6 +3340,7 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
     createTooltip() {
         this.tooltipContent = this.renderer.createElement('div');
         this.renderer.addClass(this.tooltipContent, 'po-tooltip');
+        this.insertAriaLabelTooltip();
         this.divArrow = this.renderer.createElement('div');
         this.renderer.addClass(this.divArrow, 'po-tooltip-arrow');
         this.divContent = this.renderer.createElement('div');
@@ -3379,11 +3391,23 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
             this.renderer.appendChild(this.divContent, this.textContent);
         }
     }
+    insertAriaLabelTooltip() {
+        const nativeTextContent = this.elementRef.nativeElement.textContent;
+        let targetElement = '';
+        nativeElements.forEach(el => {
+            if (this.elementRef.nativeElement.getElementsByTagName(el)[0] !== undefined) {
+                targetElement = el;
+            }
+        });
+        if (this.elementRef.nativeElement.getElementsByTagName(targetElement)[0] && this.tooltip) {
+            this.renderer.setAttribute(this.elementRef.nativeElement.getElementsByTagName(targetElement)[0], 'aria-label', nativeTextContent + ' ' + this.tooltip);
+        }
+    }
 }
 PoTooltipDirective.ɵfac = function PoTooltipDirective_Factory(t) { return new (t || PoTooltipDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoTooltipControlPositionService)); };
 PoTooltipDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTooltipDirective, selectors: [["", "p-tooltip", ""]], hostBindings: function PoTooltipDirective_HostBindings(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵlistener("mouseenter", function PoTooltipDirective_mouseenter_HostBindingHandler() { return ctx.onMouseEnter(); })("mouseleave", function PoTooltipDirective_mouseleave_HostBindingHandler() { return ctx.onMouseLeave(); });
+            i0.ɵɵlistener("mouseenter", function PoTooltipDirective_mouseenter_HostBindingHandler() { return ctx.onMouseEnter(); })("mouseleave", function PoTooltipDirective_mouseleave_HostBindingHandler() { return ctx.onMouseLeave(); })("focusout", function PoTooltipDirective_focusout_HostBindingHandler() { return ctx.onFocusOut(); })("focusin", function PoTooltipDirective_focusin_HostBindingHandler() { return ctx.onFocusIn(); });
         }
     }, features: [i0.ɵɵProvidersFeature([PoTooltipControlPositionService]), i0.ɵɵInheritDefinitionFeature] });
 (function () {
@@ -3399,6 +3423,12 @@ PoTooltipDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoToolti
             }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
             }] });
 })();
 
@@ -6652,6 +6682,7 @@ const poColorPalette = Object.values(PoColorPaletteEnum);
 class PoColorService {
     constructor() {
         this.defaultColors = [];
+        this.colorBlack = '#000000';
     }
     /**
      * Avalia a propriedade `color` na lista de items passada. Caso sim, trata se é decimal ou string `po-color`. Caso não haja, retorna a cor default.
@@ -6665,7 +6696,7 @@ class PoColorService {
                 dataItem.color = this.verifyIfIsPoColorPalette(dataItem.color);
                 return dataItem;
             }
-            const color = this.defaultColors[index];
+            const color = this.defaultColors[index] === undefined ? this.colorBlack : this.defaultColors[index];
             return Object.assign(Object.assign({}, dataItem), { color });
         });
     }
@@ -14356,6 +14387,7 @@ class PoTableColumnManagerComponent {
         // Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis.
         // O po-table envia como parâmetro um array de string com as colunas visíveis atualizadas. Por exemplo: ["idCard", "name", "hireStatus", "age"].
         this.changeVisibleColumns = new EventEmitter();
+        this.initialColumns = new EventEmitter();
         this.columnsOptions = [];
         this.visibleColumns = [];
         this._maxColumns = PoTableColumnManagerMaxColumnsDefault;
@@ -14395,6 +14427,7 @@ class PoTableColumnManagerComponent {
     restore() {
         this.restoreDefaultEvent = true;
         const defaultColumns = this.getVisibleColumns(this.defaultColumns);
+        this.initialColumns.emit(this.getVisibleColumns(this.colunsDefault));
         this.checkChanges(defaultColumns, this.restoreDefaultEvent);
     }
     verifyToEmitChange(event) {
@@ -14562,7 +14595,7 @@ PoTableColumnManagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popover = _t.first);
         }
-    }, inputs: { columns: ["p-columns", "columns"], target: ["p-target", "target"], lastVisibleColumnsSelected: ["p-last-visible-columns-selected", "lastVisibleColumnsSelected"], maxColumns: ["p-max-columns", "maxColumns"] }, outputs: { visibleColumnsChange: "p-visible-columns-change", changeVisibleColumns: "p-change-visible-columns" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["p-position", "bottom-left", 3, "p-target", "p-close", 4, "ngIf"], ["p-position", "bottom-left", 3, "p-target", "p-close"], ["popover", ""], [1, "po-table-column-manager-header"], [1, "po-table-column-manager-header-title"], [1, "po-table-column-manager-header-close"], [1, "po-table-column-manager-header-close-button", "po-clickable", "po-icon", "po-icon-close", 3, "click"], [1, "po-table-column-manager-body"], ["name", "visibleColumns", "p-columns", "1", 3, "ngModel", "p-options", "ngModelChange", "p-change"], [1, "po-table-column-manager-footer"], ["p-small", "", "p-type", "link", 1, "po-table-column-manager-footer-restore", 3, "p-label", "p-click"]], template: function PoTableColumnManagerComponent_Template(rf, ctx) {
+    }, inputs: { columns: ["p-columns", "columns"], target: ["p-target", "target"], colunsDefault: ["p-columns-default", "colunsDefault"], lastVisibleColumnsSelected: ["p-last-visible-columns-selected", "lastVisibleColumnsSelected"], maxColumns: ["p-max-columns", "maxColumns"] }, outputs: { visibleColumnsChange: "p-visible-columns-change", changeVisibleColumns: "p-change-visible-columns", initialColumns: "p-initial-columns" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["p-position", "bottom-left", 3, "p-target", "p-close", 4, "ngIf"], ["p-position", "bottom-left", 3, "p-target", "p-close"], ["popover", ""], [1, "po-table-column-manager-header"], [1, "po-table-column-manager-header-title"], [1, "po-table-column-manager-header-close"], [1, "po-table-column-manager-header-close-button", "po-clickable", "po-icon", "po-icon-close", 3, "click"], [1, "po-table-column-manager-body"], ["name", "visibleColumns", "p-columns", "1", 3, "ngModel", "p-options", "ngModelChange", "p-change"], [1, "po-table-column-manager-footer"], ["p-small", "", "p-type", "link", 1, "po-table-column-manager-footer-restore", 3, "p-label", "p-click"]], template: function PoTableColumnManagerComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵtemplate(0, PoTableColumnManagerComponent_po_popover_0_Template, 11, 5, "po-popover", 0);
         }
@@ -14583,6 +14616,9 @@ PoTableColumnManagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             }], target: [{
                 type: Input,
                 args: ['p-target']
+            }], colunsDefault: [{
+                type: Input,
+                args: ['p-columns-default']
             }], lastVisibleColumnsSelected: [{
                 type: Input,
                 args: ['p-last-visible-columns-selected']
@@ -14592,6 +14628,9 @@ PoTableColumnManagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             }], changeVisibleColumns: [{
                 type: Output,
                 args: ['p-change-visible-columns']
+            }], initialColumns: [{
+                type: Output,
+                args: ['p-initial-columns']
             }], maxColumns: [{
                 type: Input,
                 args: ['p-max-columns']
@@ -14894,6 +14933,16 @@ class PoTableBaseComponent {
          * Por exemplo: ["idCard", "name", "hireStatus", "age"].
          */
         this.changeVisibleColumns = new EventEmitter();
+        /**
+         * @optional
+         *
+         * @description
+         * Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas.
+         *
+         * O componente envia como parâmetro um array de string com as colunas configuradas inicialmente.
+         * Por exemplo: ["idCard", "name", "hireStatus", "age"].
+         */
+        this.columnRestoreManager = new EventEmitter();
         this.hasMainColumns = false;
         this.mainColumns = [];
         this.selectAll = false;
@@ -14943,6 +14992,9 @@ class PoTableBaseComponent {
      *
      */
     set columns(columns) {
+        if (this.initialColumns === undefined) {
+            this.initialColumns = columns;
+        }
         this._columns = columns || [];
         if (this._columns.length) {
             this.setColumnLink();
@@ -15437,7 +15489,7 @@ class PoTableBaseComponent {
     }
 }
 PoTableBaseComponent.ɵfac = function PoTableBaseComponent_Factory(t) { return new (t || PoTableBaseComponent)(i0.ɵɵdirectiveInject(PoDateService), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(PoTableService)); };
-PoTableBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTableBaseComponent, inputs: { hideTextOverflow: ["p-hide-text-overflow", "hideTextOverflow"], hideColumnsManager: ["p-hide-columns-manager", "hideColumnsManager"], autoCollapse: ["p-auto-collapse", "autoCollapse"], loadingShowMore: ["p-loading-show-more", "loadingShowMore"], sort: ["p-sort", "sort"], showMoreDisabled: ["p-show-more-disabled", "showMoreDisabled"], striped: ["p-striped", "striped"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], singleSelect: ["p-single-select", "singleSelect"], actionRight: ["p-actions-right", "actionRight"], maxColumns: ["p-max-columns", "maxColumns"], items: ["p-items", "items"], columns: ["p-columns", "columns"], container: ["p-container", "container"], height: ["p-height", "height"], hideDetail: ["p-hide-detail", "hideDetail"], literals: ["p-literals", "literals"], loading: ["p-loading", "loading"], actions: ["p-actions", "actions"], selectable: ["p-selectable", "selectable"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], serviceApi: ["p-service-api", "serviceApi"] }, outputs: { allSelected: "p-all-selected", allUnselected: "p-all-unselected", collapsed: "p-collapsed", expanded: "p-expanded", selected: "p-selected", showMore: "p-show-more", sortBy: "p-sort-by", unselected: "p-unselected", changeVisibleColumns: "p-change-visible-columns" }, features: [i0.ɵɵNgOnChangesFeature] });
+PoTableBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTableBaseComponent, inputs: { hideTextOverflow: ["p-hide-text-overflow", "hideTextOverflow"], hideColumnsManager: ["p-hide-columns-manager", "hideColumnsManager"], autoCollapse: ["p-auto-collapse", "autoCollapse"], loadingShowMore: ["p-loading-show-more", "loadingShowMore"], sort: ["p-sort", "sort"], showMoreDisabled: ["p-show-more-disabled", "showMoreDisabled"], striped: ["p-striped", "striped"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], singleSelect: ["p-single-select", "singleSelect"], actionRight: ["p-actions-right", "actionRight"], maxColumns: ["p-max-columns", "maxColumns"], items: ["p-items", "items"], columns: ["p-columns", "columns"], container: ["p-container", "container"], height: ["p-height", "height"], hideDetail: ["p-hide-detail", "hideDetail"], literals: ["p-literals", "literals"], loading: ["p-loading", "loading"], actions: ["p-actions", "actions"], selectable: ["p-selectable", "selectable"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], serviceApi: ["p-service-api", "serviceApi"] }, outputs: { allSelected: "p-all-selected", allUnselected: "p-all-unselected", collapsed: "p-collapsed", expanded: "p-expanded", selected: "p-selected", showMore: "p-show-more", sortBy: "p-sort-by", unselected: "p-unselected", changeVisibleColumns: "p-change-visible-columns", columnRestoreManager: "p-restore-column-manager" }, features: [i0.ɵɵNgOnChangesFeature] });
 __decorate([
     InputBoolean()
 ], PoTableBaseComponent.prototype, "hideTextOverflow", void 0);
@@ -15531,6 +15583,9 @@ __decorate([
             }], changeVisibleColumns: [{
                 type: Output,
                 args: ['p-change-visible-columns']
+            }], columnRestoreManager: [{
+                type: Output,
+                args: ['p-restore-column-manager']
             }], items: [{
                 type: Input,
                 args: ['p-items']
@@ -16422,10 +16477,11 @@ const _c1$p = ["popup"];
 const _c2$a = ["tableFooter"];
 const _c3$6 = ["tableWrapper"];
 const _c4$4 = ["poTableTbody"];
-const _c5$2 = ["columnManagerTarget"];
-const _c6$1 = ["actionsIconElement"];
-const _c7$1 = ["actionsElement"];
-const _c8$1 = ["headersTable"];
+const _c5$2 = ["poTableThead"];
+const _c6$2 = ["columnManagerTarget"];
+const _c7$1 = ["actionsIconElement"];
+const _c8$1 = ["actionsElement"];
+const _c9 = ["headersTable"];
 function PoTableComponent_po_container_0_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0);
@@ -16433,8 +16489,8 @@ function PoTableComponent_po_container_0_ng_container_1_Template(rf, ctx) {
 }
 function PoTableComponent_po_container_0_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "po-container", 14);
-        i0.ɵɵtemplate(1, PoTableComponent_po_container_0_ng_container_1_Template, 1, 0, "ng-container", 15);
+        i0.ɵɵelementStart(0, "po-container", 16);
+        i0.ɵɵtemplate(1, PoTableComponent_po_container_0_ng_container_1_Template, 1, 0, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -16447,35 +16503,46 @@ function PoTableComponent_po_container_0_Template(rf, ctx) {
 }
 function PoTableComponent_ng_template_1_div_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 23);
-        i0.ɵɵelement(1, "po-loading", 24);
+        i0.ɵɵelementStart(0, "div", 25);
+        i0.ɵɵelement(1, "po-loading", 26);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r23 = i0.ɵɵnextContext(2);
+        const ctx_r27 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("p-text", ctx_r23.literals.loadingData);
+        i0.ɵɵproperty("p-text", ctx_r27.literals.loadingData);
+    }
+}
+function PoTableComponent_ng_template_1_div_5_ng_container_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainer(0);
     }
 }
-function PoTableComponent_ng_template_1_div_5_ng_container_4_Template(rf, ctx) {
+function PoTableComponent_ng_template_1_div_5_ng_container_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0);
     }
 }
 function PoTableComponent_ng_template_1_div_5_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 25);
-        i0.ɵɵelement(1, "div", 26);
-        i0.ɵɵelementStart(2, "div", 27, 28);
-        i0.ɵɵtemplate(4, PoTableComponent_ng_template_1_div_5_ng_container_4_Template, 1, 0, "ng-container", 15);
+        const _r37 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 27)(1, "div", 28, 29);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_1_div_5_ng_container_3_Template, 1, 0, "ng-container", 17);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "div", 30, 31);
+        i0.ɵɵlistener("scroll", function PoTableComponent_ng_template_1_div_5_Template_div_scroll_4_listener() { i0.ɵɵrestoreView(_r37); const ctx_r36 = i0.ɵɵnextContext(2); return ctx_r36.syncronizeHorizontalScroll(); });
+        i0.ɵɵtemplate(6, PoTableComponent_ng_template_1_div_5_ng_container_6_Template, 1, 0, "ng-container", 17);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const ctx_r25 = i0.ɵɵnextContext(2);
+        const ctx_r29 = i0.ɵɵnextContext(2);
         const _r4 = i0.ɵɵreference(5);
-        i0.ɵɵstyleProp("height", ctx_r25.heightTableContainer, "px");
-        i0.ɵɵadvance(4);
+        const _r6 = i0.ɵɵreference(7);
+        i0.ɵɵstyleProp("height", ctx_r29.heightTableContainer, "px");
+        i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngTemplateOutlet", _r4);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngTemplateOutlet", _r6);
     }
 }
 function PoTableComponent_ng_template_1_div_6_ng_container_1_Template(rf, ctx) {
@@ -16486,50 +16553,50 @@ function PoTableComponent_ng_template_1_div_6_ng_container_1_Template(rf, ctx) {
 function PoTableComponent_ng_template_1_div_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "div");
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_1_div_6_ng_container_1_Template, 1, 0, "ng-container", 15);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_1_div_6_ng_container_1_Template, 1, 0, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         i0.ɵɵnextContext(2);
-        const _r4 = i0.ɵɵreference(5);
+        const _r8 = i0.ɵɵreference(9);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", _r4);
+        i0.ɵɵproperty("ngTemplateOutlet", _r8);
     }
 }
 function PoTableComponent_ng_template_1_div_7_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵelement(1, "po-table-subtitle-footer", 31);
+        i0.ɵɵelement(1, "po-table-subtitle-footer", 34);
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
-        const column_r32 = ctx.$implicit;
-        const ctx_r31 = i0.ɵɵnextContext(3);
+        const column_r40 = ctx.$implicit;
+        const ctx_r39 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("p-literals", ctx_r31.literals)("p-subtitles", column_r32.subtitles);
+        i0.ɵɵproperty("p-literals", ctx_r39.literals)("p-subtitles", column_r40.subtitles);
     }
 }
 function PoTableComponent_ng_template_1_div_7_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 29);
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_1_div_7_ng_container_1_Template, 2, 2, "ng-container", 30);
+        i0.ɵɵelementStart(0, "div", 32);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_1_div_7_ng_container_1_Template, 2, 2, "ng-container", 33);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r27 = i0.ɵɵnextContext(2);
+        const ctx_r31 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r27.subtitleColumns)("ngForTrackBy", ctx_r27.trackBy);
+        i0.ɵɵproperty("ngForOf", ctx_r31.subtitleColumns)("ngForTrackBy", ctx_r31.trackBy);
     }
 }
 function PoTableComponent_ng_template_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "div");
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_1_div_1_Template, 2, 1, "div", 16);
-        i0.ɵɵelementStart(2, "div", 17)(3, "div", 18, 19);
-        i0.ɵɵtemplate(5, PoTableComponent_ng_template_1_div_5_Template, 5, 3, "div", 20);
-        i0.ɵɵtemplate(6, PoTableComponent_ng_template_1_div_6_Template, 2, 1, "div", 21);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_1_div_1_Template, 2, 1, "div", 18);
+        i0.ɵɵelementStart(2, "div", 19)(3, "div", 20, 21);
+        i0.ɵɵtemplate(5, PoTableComponent_ng_template_1_div_5_Template, 7, 4, "div", 22);
+        i0.ɵɵtemplate(6, PoTableComponent_ng_template_1_div_6_Template, 2, 1, "div", 23);
         i0.ɵɵelementEnd()()();
-        i0.ɵɵtemplate(7, PoTableComponent_ng_template_1_div_7_Template, 2, 2, "div", 22);
+        i0.ɵɵtemplate(7, PoTableComponent_ng_template_1_div_7_Template, 2, 2, "div", 24);
     }
     if (rf & 2) {
         const ctx_r2 = i0.ɵɵnextContext();
@@ -16549,9 +16616,9 @@ function PoTableComponent_ng_template_1_Template(rf, ctx) {
 }
 function PoTableComponent_div_3_Template(rf, ctx) {
     if (rf & 1) {
-        const _r35 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 32, 33)(2, "po-button", 34);
-        i0.ɵɵlistener("p-click", function PoTableComponent_div_3_Template_po_button_p_click_2_listener() { i0.ɵɵrestoreView(_r35); const ctx_r34 = i0.ɵɵnextContext(); return ctx_r34.onShowMore(); });
+        const _r43 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 35, 36)(2, "po-button", 37);
+        i0.ɵɵlistener("p-click", function PoTableComponent_div_3_Template_po_button_p_click_2_listener() { i0.ɵɵrestoreView(_r43); const ctx_r42 = i0.ɵɵnextContext(); return ctx_r42.onShowMore(); });
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
@@ -16563,41 +16630,41 @@ function PoTableComponent_div_3_Template(rf, ctx) {
 }
 function PoTableComponent_ng_template_4_th_3_input_2_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "input", 47);
+        i0.ɵɵelement(0, "input", 49);
     }
     if (rf & 2) {
-        const ctx_r46 = i0.ɵɵnextContext(3);
-        i0.ɵɵclassProp("po-table-checkbox-checked", ctx_r46.selectAll)("po-table-checkbox-indeterminate", ctx_r46.selectAll === null);
+        const ctx_r52 = i0.ɵɵnextContext(3);
+        i0.ɵɵclassProp("po-table-checkbox-checked", ctx_r52.selectAll)("po-table-checkbox-indeterminate", ctx_r52.selectAll === null);
     }
 }
 function PoTableComponent_ng_template_4_th_3_label_3_Template(rf, ctx) {
     if (rf & 1) {
-        const _r49 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "label", 48);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_th_3_label_3_Template_label_click_0_listener() { i0.ɵɵrestoreView(_r49); const ctx_r48 = i0.ɵɵnextContext(3); return ctx_r48.selectAllRows(); });
+        const _r55 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "label", 50);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_th_3_label_3_Template_label_click_0_listener() { i0.ɵɵrestoreView(_r55); const ctx_r54 = i0.ɵɵnextContext(3); return ctx_r54.selectAllRows(); });
         i0.ɵɵelementEnd();
     }
 }
 function PoTableComponent_ng_template_4_th_3_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "th", 44)(1, "div");
-        i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_th_3_input_2_Template, 1, 4, "input", 45);
-        i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_th_3_label_3_Template, 1, 0, "label", 46);
+        i0.ɵɵelementStart(0, "th", 46)(1, "div");
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_th_3_input_2_Template, 1, 4, "input", 47);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_th_3_label_3_Template, 1, 0, "label", 48);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const ctx_r36 = i0.ɵɵnextContext(2);
+        const ctx_r44 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r36.height);
+        i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r44.height);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx_r36.hideSelectAll);
+        i0.ɵɵproperty("ngIf", !ctx_r44.hideSelectAll);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx_r36.hideSelectAll);
+        i0.ɵɵproperty("ngIf", !ctx_r44.hideSelectAll);
     }
 }
 function PoTableComponent_ng_template_4_th_4_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "th", 49);
+        i0.ɵɵelement(0, "th", 51);
     }
 }
 function PoTableComponent_ng_template_4_th_5_Template(rf, ctx) {
@@ -16605,8 +16672,8 @@ function PoTableComponent_ng_template_4_th_5_Template(rf, ctx) {
         i0.ɵɵelement(0, "th");
     }
     if (rf & 2) {
-        const ctx_r38 = i0.ɵɵnextContext(2);
-        i0.ɵɵclassProp("po-table-header-master-detail", !ctx_r38.isSingleAction)("po-table-header-single-action", ctx_r38.isSingleAction);
+        const ctx_r46 = i0.ɵɵnextContext(2);
+        i0.ɵɵclassProp("po-table-header-master-detail", !ctx_r46.isSingleAction)("po-table-header-single-action", ctx_r46.isSingleAction);
     }
 }
 function PoTableComponent_ng_template_4_th_6_ng_container_2_Template(rf, ctx) {
@@ -16616,16 +16683,16 @@ function PoTableComponent_ng_template_4_th_6_ng_container_2_Template(rf, ctx) {
 }
 function PoTableComponent_ng_template_4_th_6_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "th", 50, 51);
-        i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_th_6_ng_container_2_Template, 1, 0, "ng-container", 52);
+        i0.ɵɵelementStart(0, "th", 52, 53);
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_th_6_ng_container_2_Template, 1, 0, "ng-container", 54);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r39 = i0.ɵɵnextContext(2);
-        const _r15 = i0.ɵɵreference(17);
-        const _r17 = i0.ɵɵreference(19);
+        const ctx_r47 = i0.ɵɵnextContext(2);
+        const _r19 = i0.ɵɵreference(21);
+        const _r21 = i0.ɵɵreference(23);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx_r39.height)("ngIfThen", _r15)("ngIfElse", _r17);
+        i0.ɵɵproperty("ngIf", ctx_r47.height)("ngIfThen", _r19)("ngIfElse", _r21);
     }
 }
 function PoTableComponent_ng_template_4_th_7_ng_container_3_Template(rf, ctx) {
@@ -16633,31 +16700,31 @@ function PoTableComponent_ng_template_4_th_7_ng_container_3_Template(rf, ctx) {
         i0.ɵɵelementContainer(0);
     }
 }
-const _c9 = function (a0) { return { $implicit: a0 }; };
+const _c10 = function (a0) { return { $implicit: a0 }; };
 function PoTableComponent_ng_template_4_th_7_Template(rf, ctx) {
     if (rf & 1) {
-        const _r57 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "th", 53, 54);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_th_7_Template_th_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r57); const column_r52 = restoredCtx.$implicit; const ctx_r56 = i0.ɵɵnextContext(2); return ctx_r56.sortColumn(column_r52); });
-        i0.ɵɵelementStart(2, "div", 55);
-        i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_th_7_ng_container_3_Template, 1, 0, "ng-container", 56);
+        const _r63 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "th", 55, 56);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_th_7_Template_th_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r63); const column_r58 = restoredCtx.$implicit; const ctx_r62 = i0.ɵɵnextContext(2); return ctx_r62.sortColumn(column_r58); });
+        i0.ɵɵelementStart(2, "div", 57);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_th_7_ng_container_3_Template, 1, 0, "ng-container", 58);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const column_r52 = ctx.$implicit;
-        const ctx_r40 = i0.ɵɵnextContext(2);
-        const _r13 = i0.ɵɵreference(15);
-        i0.ɵɵstyleProp("width", column_r52.width)("max-width", column_r52.width)("min-width", column_r52.width);
-        i0.ɵɵclassProp("po-clickable", ctx_r40.sort && column_r52.sortable !== false || ctx_r40.hasService)("po-table-header-subtitle", column_r52.type === "subtitle");
+        const column_r58 = ctx.$implicit;
+        const ctx_r48 = i0.ɵɵnextContext(2);
+        const _r17 = i0.ɵɵreference(19);
+        i0.ɵɵstyleProp("width", column_r58.width)("max-width", column_r58.width)("min-width", column_r58.width);
+        i0.ɵɵclassProp("po-clickable", ctx_r48.sort && column_r58.sortable !== false || ctx_r48.hasService)("po-table-header-subtitle", column_r58.type === "subtitle");
         i0.ɵɵadvance(2);
-        i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r40.height)("po-table-header-flex-right", column_r52.type === "currency" || column_r52.type === "number")("po-table-header-flex-center", column_r52.type === "subtitle");
+        i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r48.height)("po-table-header-flex-right", column_r58.type === "currency" || column_r58.type === "number")("po-table-header-flex-center", column_r58.type === "subtitle");
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", _r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c9, column_r52));
+        i0.ɵɵproperty("ngTemplateOutlet", _r17)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c10, column_r58));
     }
 }
 function PoTableComponent_ng_template_4_th_8_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "th", 49);
+        i0.ɵɵelement(0, "th", 51);
     }
 }
 function PoTableComponent_ng_template_4_th_9_Template(rf, ctx) {
@@ -16665,169 +16732,205 @@ function PoTableComponent_ng_template_4_th_9_Template(rf, ctx) {
         i0.ɵɵelement(0, "th");
     }
     if (rf & 2) {
-        const ctx_r42 = i0.ɵɵnextContext(2);
-        i0.ɵɵclassProp("po-table-header-single-action", ctx_r42.isSingleAction)("po-table-header-actions", !ctx_r42.isSingleAction);
+        const ctx_r50 = i0.ɵɵnextContext(2);
+        i0.ɵɵclassProp("po-table-header-single-action", ctx_r50.isSingleAction)("po-table-header-actions", !ctx_r50.isSingleAction);
     }
 }
 function PoTableComponent_ng_template_4_th_10_Template(rf, ctx) {
     if (rf & 1) {
-        const _r61 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "th", null, 57)(2, "div")(3, "button", 58, 59);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_th_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r61); const ctx_r60 = i0.ɵɵnextContext(2); return ctx_r60.onOpenColumnManager(); });
+        const _r67 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "th", null, 59)(2, "div")(3, "button", 60, 61);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_th_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r67); const ctx_r66 = i0.ɵɵnextContext(2); return ctx_r66.onOpenColumnManager(); });
+        i0.ɵɵelementEnd()()();
+    }
+    if (rf & 2) {
+        const _r64 = i0.ɵɵreference(1);
+        const ctx_r51 = i0.ɵɵnextContext(2);
+        i0.ɵɵclassProp("po-table-header-column-manager", !ctx_r51.isSingleAction || !ctx_r51.actionRight)("po-table-header-column-manager-border", !ctx_r51.height && ctx_r51.container)("po-table-header-single-action", ctx_r51.isSingleAction && ctx_r51.actionRight);
+        i0.ɵɵadvance(2);
+        i0.ɵɵstyleProp("width", ctx_r51.height && ctx_r51.visibleActions.length ? _r64.offsetWidth : undefined, "px");
+        i0.ɵɵclassProp("po-table-header-column-manager-border", ctx_r51.height && ctx_r51.container)("po-table-header-column-manager-fixed-inner", ctx_r51.height);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("p-tooltip", ctx_r51.literals.columnsManager);
+    }
+}
+function PoTableComponent_ng_template_4_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "table", 38)(1, "thead")(2, "tr");
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_th_3_Template, 4, 4, "th", 39);
+        i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_th_4_Template, 1, 0, "th", 40);
+        i0.ɵɵtemplate(5, PoTableComponent_ng_template_4_th_5_Template, 1, 4, "th", 41);
+        i0.ɵɵtemplate(6, PoTableComponent_ng_template_4_th_6_Template, 3, 3, "th", 42);
+        i0.ɵɵtemplate(7, PoTableComponent_ng_template_4_th_7_Template, 4, 20, "th", 43);
+        i0.ɵɵtemplate(8, PoTableComponent_ng_template_4_th_8_Template, 1, 0, "th", 40);
+        i0.ɵɵtemplate(9, PoTableComponent_ng_template_4_th_9_Template, 1, 4, "th", 44);
+        i0.ɵɵtemplate(10, PoTableComponent_ng_template_4_th_10_Template, 5, 13, "th", 45);
         i0.ɵɵelementEnd()()();
     }
     if (rf & 2) {
-        const _r58 = i0.ɵɵreference(1);
-        const ctx_r43 = i0.ɵɵnextContext(2);
-        i0.ɵɵclassProp("po-table-header-column-manager", !ctx_r43.isSingleAction || !ctx_r43.actionRight)("po-table-header-column-manager-border", !ctx_r43.height && ctx_r43.container)("po-table-header-single-action", ctx_r43.isSingleAction && ctx_r43.actionRight);
+        const ctx_r5 = i0.ɵɵnextContext();
+        i0.ɵɵclassProp("po-table-striped", ctx_r5.striped)("po-table-layout-fixed", ctx_r5.hideTextOverflow);
         i0.ɵɵadvance(2);
-        i0.ɵɵstyleProp("width", ctx_r43.height && ctx_r43.visibleActions.length ? _r58.offsetWidth : undefined, "px");
-        i0.ɵɵclassProp("po-table-header-column-manager-border", ctx_r43.height && ctx_r43.container)("po-table-header-column-manager-fixed-inner", ctx_r43.height);
+        i0.ɵɵclassProp("po-table-header", !ctx_r5.height);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r5.hasSelectableColumn);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", (ctx_r5.hasMasterDetailColumn || ctx_r5.hasRowTemplate) && !ctx_r5.hasRowTemplateWithArrowDirectionRight);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r5.actionRight && (ctx_r5.visibleActions.length > 1 || ctx_r5.isSingleAction));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r5.hasMainColumns);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r5.mainColumns)("ngForTrackBy", ctx_r5.trackBy);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r5.hasRowTemplateWithArrowDirectionRight && (ctx_r5.hasVisibleActions || ctx_r5.hideColumnsManager));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r5.hasVisibleActions && ctx_r5.hideColumnsManager && ctx_r5.actionRight);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("p-tooltip", ctx_r43.literals.columnsManager);
+        i0.ɵɵproperty("ngIf", ctx_r5.hasValidColumns && !ctx_r5.hideColumnsManager);
     }
 }
-function PoTableComponent_ng_template_4_tbody_11_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_tbody_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "tbody", 60)(1, "tr", 61)(2, "td", 62)(3, "span");
+        i0.ɵɵelementStart(0, "tbody", 63)(1, "tr", 64)(2, "td", 65)(3, "span");
         i0.ɵɵtext(4);
         i0.ɵɵelementEnd()()()();
     }
     if (rf & 2) {
-        const ctx_r44 = i0.ɵɵnextContext(2);
+        const ctx_r68 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("colSpan", ctx_r44.columnCount);
+        i0.ɵɵproperty("colSpan", ctx_r68.columnCount);
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", ctx_r44.literals.noData, " ");
+        i0.ɵɵtextInterpolate1(" ", ctx_r68.literals.noData, " ");
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_2_ng_container_1_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_2_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0);
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_2_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_2_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "td", 68);
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_2_ng_container_1_Template, 1, 0, "ng-container", 56);
+        i0.ɵɵelementStart(0, "td", 46);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_2_ng_container_1_Template, 1, 0, "ng-container", 58);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r65 = i0.ɵɵnextContext(3);
-        const _r9 = i0.ɵɵreference(11);
-        const _r11 = i0.ɵɵreference(13);
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r73 = i0.ɵɵnextContext(3);
+        const _r13 = i0.ɵɵreference(15);
+        const _r15 = i0.ɵɵreference(17);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", ctx_r65.singleSelect ? _r9 : _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c9, row_r63));
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r73.singleSelect ? _r13 : _r15)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c10, row_r71));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_3_ng_template_1_Template(rf, ctx) { }
-const _c10 = function (a0, a1) { return { row: a0, rowIndex: a1 }; };
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_3_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_3_ng_template_1_Template(rf, ctx) { }
+const _c11 = function (a0, a1) { return { row: a0, rowIndex: a1 }; };
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_3_Template(rf, ctx) {
     if (rf & 1) {
-        const _r81 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 69);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_3_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r81); const row_r63 = i0.ɵɵnextContext().$implicit; const ctx_r79 = i0.ɵɵnextContext(3); return ctx_r79.toggleDetail(row_r63); });
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_3_ng_template_1_Template, 0, 0, "ng-template", 70);
+        const _r89 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 71);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_3_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r89); const row_r71 = i0.ɵɵnextContext().$implicit; const ctx_r87 = i0.ɵɵnextContext(3); return ctx_r87.toggleDetail(row_r71); });
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_3_ng_template_1_Template, 0, 0, "ng-template", 72);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r82 = i0.ɵɵnextContext();
-        const row_r63 = ctx_r82.$implicit;
-        const rowIndex_r64 = ctx_r82.index;
+        const ctx_r90 = i0.ɵɵnextContext();
+        const row_r71 = ctx_r90.$implicit;
+        const rowIndex_r72 = ctx_r90.index;
         i0.ɵɵnextContext(3);
-        const _r7 = i0.ɵɵreference(9);
+        const _r11 = i0.ɵɵreference(13);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", _r7)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, row_r63, rowIndex_r64));
+        i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r71, rowIndex_r72));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_4_ng_template_0_Template(rf, ctx) { }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_4_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_4_ng_template_0_Template(rf, ctx) { }
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_4_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, PoTableComponent_ng_template_4_ng_container_12_tbody_1_4_ng_template_0_Template, 0, 0, "ng-template", 70);
+        i0.ɵɵtemplate(0, PoTableComponent_ng_template_6_ng_container_2_tbody_1_4_ng_template_0_Template, 0, 0, "ng-template", 72);
     }
     if (rf & 2) {
-        const ctx_r84 = i0.ɵɵnextContext();
-        const row_r63 = ctx_r84.$implicit;
-        const rowIndex_r64 = ctx_r84.index;
+        const ctx_r92 = i0.ɵɵnextContext();
+        const row_r71 = ctx_r92.$implicit;
+        const rowIndex_r72 = ctx_r92.index;
         i0.ɵɵnextContext(3);
-        const _r19 = i0.ɵɵreference(21);
-        i0.ɵɵproperty("ngTemplateOutlet", _r19)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, row_r63, rowIndex_r64));
+        const _r23 = i0.ɵɵreference(25);
+        i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r71, rowIndex_r72));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_5_ng_template_1_Template(rf, ctx) { }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_5_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_5_ng_template_1_Template(rf, ctx) { }
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_5_Template(rf, ctx) {
     if (rf & 1) {
-        const _r88 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 69);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_5_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r88); const row_r63 = i0.ɵɵnextContext().$implicit; const ctx_r86 = i0.ɵɵnextContext(3); return ctx_r86.toggleDetail(row_r63); });
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_5_ng_template_1_Template, 0, 0, "ng-template", 70);
+        const _r96 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 71);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_5_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r96); const row_r71 = i0.ɵɵnextContext().$implicit; const ctx_r94 = i0.ɵɵnextContext(3); return ctx_r94.toggleDetail(row_r71); });
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_5_ng_template_1_Template, 0, 0, "ng-template", 72);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r89 = i0.ɵɵnextContext();
-        const row_r63 = ctx_r89.$implicit;
-        const rowIndex_r64 = ctx_r89.index;
+        const ctx_r97 = i0.ɵɵnextContext();
+        const row_r71 = ctx_r97.$implicit;
+        const rowIndex_r72 = ctx_r97.index;
         i0.ɵɵnextContext(3);
-        const _r7 = i0.ɵɵreference(9);
+        const _r11 = i0.ɵɵreference(13);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", _r7)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, row_r63, rowIndex_r64));
+        i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r71, rowIndex_r72));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_2_ng_container_1_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_2_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0);
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_2_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_2_ng_container_1_Template, 1, 0, "ng-container", 56);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_2_ng_container_1_Template, 1, 0, "ng-container", 58);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r92 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r100 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", ctx_r92.getTemplate(column_r90))("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c9, ctx_r92.getCellData(row_r63, column_r90)));
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r100.getTemplate(column_r98))("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c10, ctx_r100.getCellData(row_r71, column_r98)));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_3_ng_container_1_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_3_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0);
     }
 }
-const _c11 = function (a0, a1) { return { row: a0, column: a1 }; };
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_3_Template(rf, ctx) {
+const _c12 = function (a0, a1) { return { row: a0, column: a1 }; };
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_3_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_3_ng_container_1_Template, 1, 0, "ng-container", 56);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_3_ng_container_1_Template, 1, 0, "ng-container", 58);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r93 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r101 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", ctx_r93.tableCellTemplate == null ? null : ctx_r93.tableCellTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r63, column_r90));
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r101.tableCellTemplate == null ? null : ctx_r101.tableCellTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c12, row_r71, column_r98));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_4_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_4_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r94 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r102 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r94.getBooleanLabel(ctx_r94.getCellData(row_r63, column_r90), column_r90), " ");
+        i0.ɵɵtextInterpolate1(" ", ctx_r102.getBooleanLabel(ctx_r102.getCellData(row_r71, column_r98), column_r98), " ");
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_5_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_5_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
         i0.ɵɵtext(1);
@@ -16835,14 +16938,14 @@ function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_5_Temp
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r95 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r103 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind4(2, 1, ctx_r95.getCellData(row_r63, column_r90), column_r90.format, "symbol", "1.2-2"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind4(2, 1, ctx_r103.getCellData(row_r71, column_r98), column_r98.format, "symbol", "1.2-2"), " ");
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_6_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
         i0.ɵɵtext(1);
@@ -16850,14 +16953,14 @@ function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_6_Temp
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r96 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r104 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r96.getCellData(row_r63, column_r90), column_r90.format || "dd/MM/yyyy"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r104.getCellData(row_r71, column_r98), column_r98.format || "dd/MM/yyyy"), " ");
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_7_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_7_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
         i0.ɵɵtext(1);
@@ -16865,14 +16968,14 @@ function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_7_Temp
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r97 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r105 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r97.getCellData(row_r63, column_r90), column_r90.format || "HH:mm:ss.ffffff"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r105.getCellData(row_r71, column_r98), column_r98.format || "HH:mm:ss.ffffff"), " ");
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_8_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_8_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
         i0.ɵɵtext(1);
@@ -16880,126 +16983,127 @@ function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_8_Temp
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r98 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r106 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r98.getCellData(row_r63, column_r90), column_r90.format || "dd/MM/yyyy HH:mm:ss"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r106.getCellData(row_r71, column_r98), column_r98.format || "dd/MM/yyyy HH:mm:ss"), " ");
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_9_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_9_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r99 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r107 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r99.formatNumber(ctx_r99.getCellData(row_r63, column_r90), column_r90.format), " ");
+        i0.ɵɵtextInterpolate1(" ", ctx_r107.formatNumber(ctx_r107.getCellData(row_r71, column_r98), column_r98.format), " ");
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_po_table_column_link_10_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_po_table_column_link_10_Template(rf, ctx) {
     if (rf & 1) {
-        const _r125 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "po-table-column-link", 77);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_po_table_column_link_10_Template_po_table_column_link_click_0_listener($event) { i0.ɵɵrestoreView(_r125); const column_r90 = i0.ɵɵnextContext().$implicit; const row_r63 = i0.ɵɵnextContext().$implicit; const ctx_r123 = i0.ɵɵnextContext(3); return ctx_r123.onClickLink($event, row_r63, column_r90); });
+        const _r133 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "po-table-column-link", 79);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_po_table_column_link_10_Template_po_table_column_link_click_0_listener($event) { i0.ɵɵrestoreView(_r133); const column_r98 = i0.ɵɵnextContext().$implicit; const row_r71 = i0.ɵɵnextContext().$implicit; const ctx_r131 = i0.ɵɵnextContext(3); return ctx_r131.onClickLink($event, row_r71, column_r98); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r100 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("p-action", column_r90.action)("p-disabled", ctx_r100.checkDisabled(row_r63, column_r90))("p-link", row_r63[column_r90.link])("p-row", row_r63)("p-value", ctx_r100.getCellData(row_r63, column_r90));
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r108 = i0.ɵɵnextContext(3);
+        i0.ɵɵproperty("p-action", column_r98.action)("p-disabled", ctx_r108.checkDisabled(row_r71, column_r98))("p-link", row_r71[column_r98.link])("p-row", row_r71)("p-value", ctx_r108.getCellData(row_r71, column_r98));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_po_table_column_icon_11_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_po_table_column_icon_11_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "po-table-column-icon", 78);
+        i0.ɵɵelement(0, "po-table-column-icon", 80);
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r101 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("p-column", column_r90)("p-icons", ctx_r101.getColumnIcons(row_r63, column_r90))("p-row", row_r63);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r109 = i0.ɵɵnextContext(3);
+        i0.ɵɵproperty("p-column", column_r98)("p-icons", ctx_r109.getColumnIcons(row_r71, column_r98))("p-row", row_r71);
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_12_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_12_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
-        i0.ɵɵelement(1, "po-table-subtitle-circle", 79);
+        i0.ɵɵelement(1, "po-table-subtitle-circle", 81);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r102 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r110 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("p-subtitle", ctx_r102.getSubtitleColumn(row_r63, column_r90));
+        i0.ɵɵproperty("p-subtitle", ctx_r110.getSubtitleColumn(row_r71, column_r98));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_13_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_13_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
-        i0.ɵɵelement(1, "po-table-column-label", 80);
+        i0.ɵɵelement(1, "po-table-column-label", 82);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r103 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r111 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("p-value", ctx_r103.getColumnLabel(row_r63, column_r90));
+        i0.ɵɵproperty("p-value", ctx_r111.getColumnLabel(row_r71, column_r98));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_14_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_14_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span");
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const column_r90 = i0.ɵɵnextContext().$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r104 = i0.ɵɵnextContext(3);
+        const column_r98 = i0.ɵɵnextContext().$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r112 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(ctx_r104.getCellData(row_r63, column_r90));
+        i0.ɵɵtextInterpolate(ctx_r112.getCellData(row_r71, column_r98));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_Template(rf, ctx) {
     if (rf & 1) {
-        const _r138 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 71);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r138); const row_r63 = i0.ɵɵnextContext().$implicit; const ctx_r137 = i0.ɵɵnextContext(3); return ctx_r137.selectable ? ctx_r137.selectRow(row_r63) : "javascript:;"; });
-        i0.ɵɵelementStart(1, "div", 72);
-        i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_Template_div_mouseenter_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r138); const column_r90 = restoredCtx.$implicit; const row_r63 = i0.ɵɵnextContext().$implicit; const ctx_r140 = i0.ɵɵnextContext(3); return ctx_r140.tooltipMouseEnter($event, column_r90, row_r63); })("mouseleave", function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r138); const ctx_r142 = i0.ɵɵnextContext(4); return ctx_r142.tooltipMouseLeave(); });
-        i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_2_Template, 2, 4, "span", 73);
-        i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_3_Template, 2, 5, "span", 73);
-        i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_4_Template, 2, 1, "span", 73);
-        i0.ɵɵtemplate(5, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_5_Template, 3, 6, "span", 73);
-        i0.ɵɵtemplate(6, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_6_Template, 3, 4, "span", 73);
-        i0.ɵɵtemplate(7, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_7_Template, 3, 4, "span", 73);
-        i0.ɵɵtemplate(8, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_8_Template, 3, 4, "span", 73);
-        i0.ɵɵtemplate(9, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_9_Template, 2, 1, "span", 73);
-        i0.ɵɵtemplate(10, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_po_table_column_link_10_Template, 1, 5, "po-table-column-link", 74);
-        i0.ɵɵtemplate(11, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_po_table_column_icon_11_Template, 1, 3, "po-table-column-icon", 75);
-        i0.ɵɵtemplate(12, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_12_Template, 2, 1, "span", 73);
-        i0.ɵɵtemplate(13, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_13_Template, 2, 1, "span", 73);
-        i0.ɵɵtemplate(14, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_span_14_Template, 2, 1, "span", 76);
+        const _r146 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 73);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r146); const row_r71 = i0.ɵɵnextContext().$implicit; const ctx_r145 = i0.ɵɵnextContext(3); return ctx_r145.selectable ? ctx_r145.selectRow(row_r71) : "javascript:;"; });
+        i0.ɵɵelementStart(1, "div", 74);
+        i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_Template_div_mouseenter_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r146); const column_r98 = restoredCtx.$implicit; const row_r71 = i0.ɵɵnextContext().$implicit; const ctx_r148 = i0.ɵɵnextContext(3); return ctx_r148.tooltipMouseEnter($event, column_r98, row_r71); })("mouseleave", function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r146); const ctx_r150 = i0.ɵɵnextContext(4); return ctx_r150.tooltipMouseLeave(); });
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_2_Template, 2, 4, "span", 75);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_3_Template, 2, 5, "span", 75);
+        i0.ɵɵtemplate(4, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_4_Template, 2, 1, "span", 75);
+        i0.ɵɵtemplate(5, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_5_Template, 3, 6, "span", 75);
+        i0.ɵɵtemplate(6, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_6_Template, 3, 4, "span", 75);
+        i0.ɵɵtemplate(7, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_7_Template, 3, 4, "span", 75);
+        i0.ɵɵtemplate(8, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_8_Template, 3, 4, "span", 75);
+        i0.ɵɵtemplate(9, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_9_Template, 2, 1, "span", 75);
+        i0.ɵɵtemplate(10, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_po_table_column_link_10_Template, 1, 5, "po-table-column-link", 76);
+        i0.ɵɵtemplate(11, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_po_table_column_icon_11_Template, 1, 3, "po-table-column-icon", 77);
+        i0.ɵɵtemplate(12, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_12_Template, 2, 1, "span", 75);
+        i0.ɵɵtemplate(13, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_13_Template, 2, 1, "span", 75);
+        i0.ɵɵtemplate(14, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_span_14_Template, 2, 1, "span", 78);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const column_r90 = ctx.$implicit;
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r69 = i0.ɵɵnextContext(3);
-        i0.ɵɵstyleProp("width", column_r90.width)("max-width", column_r90.width)("min-width", column_r90.width);
-        i0.ɵɵclassProp("po-table-column", column_r90.type !== "icon")("po-table-column-right", column_r90.type === "currency" || column_r90.type === "number")("po-table-column-center", column_r90.type === "subtitle")("po-table-column-icons", column_r90.type === "icon");
-        i0.ɵɵproperty("ngClass", ctx_r69.getClassColor(row_r63, column_r90));
+        const column_r98 = ctx.$implicit;
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r77 = i0.ɵɵnextContext(3);
+        i0.ɵɵstyleProp("width", column_r98.width)("max-width", column_r98.width)("min-width", column_r98.width);
+        i0.ɵɵclassProp("po-table-column", column_r98.type !== "icon")("po-table-column-right", column_r98.type === "currency" || column_r98.type === "number")("po-table-column-center", column_r98.type === "subtitle")("po-table-column-icons", column_r98.type === "icon");
+        i0.ɵɵproperty("ngClass", ctx_r77.getClassColor(row_r71, column_r98));
         i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("po-table-body-ellipsis", ctx_r69.hideTextOverflow);
-        i0.ɵɵproperty("ngSwitch", column_r90.type)("p-tooltip", ctx_r69.tooltipText);
+        i0.ɵɵstyleProp("width", ctx_r77.noColumnsHeader == null ? null : ctx_r77.noColumnsHeader.nativeElement.parentElement == null ? null : ctx_r77.noColumnsHeader.nativeElement.parentElement.offsetWidth, "px");
+        i0.ɵɵclassProp("po-table-body-ellipsis", ctx_r77.hideTextOverflow);
+        i0.ɵɵproperty("ngSwitch", column_r98.type)("p-tooltip", ctx_r77.tooltipText);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngSwitchCase", "columnTemplate");
         i0.ɵɵadvance(1);
@@ -17026,375 +17130,991 @@ function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_Template(rf
         i0.ɵɵproperty("ngSwitchCase", "label");
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_7_ng_template_1_Template(rf, ctx) { }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_7_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_7_ng_template_1_Template(rf, ctx) { }
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_7_Template(rf, ctx) {
     if (rf & 1) {
-        const _r147 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 69);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_7_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r147); const row_r63 = i0.ɵɵnextContext().$implicit; const ctx_r145 = i0.ɵɵnextContext(3); return ctx_r145.toggleDetail(row_r63); });
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_7_ng_template_1_Template, 0, 0, "ng-template", 70);
+        const _r155 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 71);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_7_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r155); const row_r71 = i0.ɵɵnextContext().$implicit; const ctx_r153 = i0.ɵɵnextContext(3); return ctx_r153.toggleDetail(row_r71); });
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_7_ng_template_1_Template, 0, 0, "ng-template", 72);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r148 = i0.ɵɵnextContext();
-        const row_r63 = ctx_r148.$implicit;
-        const rowIndex_r64 = ctx_r148.index;
+        const ctx_r156 = i0.ɵɵnextContext();
+        const row_r71 = ctx_r156.$implicit;
+        const rowIndex_r72 = ctx_r156.index;
         i0.ɵɵnextContext(3);
-        const _r7 = i0.ɵɵreference(9);
+        const _r11 = i0.ɵɵreference(13);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", _r7)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, row_r63, rowIndex_r64));
+        i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r71, rowIndex_r72));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_8_ng_template_0_Template(rf, ctx) { }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_8_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_8_ng_template_0_Template(rf, ctx) { }
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_8_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, PoTableComponent_ng_template_4_ng_container_12_tbody_1_8_ng_template_0_Template, 0, 0, "ng-template", 70);
+        i0.ɵɵtemplate(0, PoTableComponent_ng_template_6_ng_container_2_tbody_1_8_ng_template_0_Template, 0, 0, "ng-template", 72);
     }
     if (rf & 2) {
-        const ctx_r150 = i0.ɵɵnextContext();
-        const row_r63 = ctx_r150.$implicit;
-        const rowIndex_r64 = ctx_r150.index;
+        const ctx_r158 = i0.ɵɵnextContext();
+        const row_r71 = ctx_r158.$implicit;
+        const rowIndex_r72 = ctx_r158.index;
         i0.ɵɵnextContext(3);
-        const _r19 = i0.ɵɵreference(21);
-        i0.ɵɵproperty("ngTemplateOutlet", _r19)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, row_r63, rowIndex_r64));
+        const _r23 = i0.ɵɵreference(25);
+        i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r71, rowIndex_r72));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_ng_container_9_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_ng_container_9_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵelement(1, "td", 81);
+        i0.ɵɵelement(1, "td", 83);
         i0.ɵɵelementContainerEnd();
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_10_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_10_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "td", 81);
+        i0.ɵɵelement(0, "td", 84);
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_tr_11_ng_template_2_Template(rf, ctx) { }
-const _c12 = function (a0, a1) { return { $implicit: a0, rowIndex: a1 }; };
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_tr_11_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_tr_11_ng_template_2_Template(rf, ctx) { }
+const _c13 = function (a0, a1) { return { $implicit: a0, rowIndex: a1 }; };
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_tr_11_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "tr")(1, "td", 82);
-        i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_ng_container_12_tbody_1_tr_11_ng_template_2_Template, 0, 0, "ng-template", 70);
+        i0.ɵɵelementStart(0, "tr")(1, "td", 85);
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_2_tbody_1_tr_11_ng_template_2_Template, 0, 0, "ng-template", 72);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const ctx_r152 = i0.ɵɵnextContext();
-        const row_r63 = ctx_r152.$implicit;
-        const rowIndex_r64 = ctx_r152.index;
-        const ctx_r74 = i0.ɵɵnextContext(3);
+        const ctx_r160 = i0.ɵɵnextContext();
+        const row_r71 = ctx_r160.$implicit;
+        const rowIndex_r72 = ctx_r160.index;
+        const ctx_r82 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("colSpan", ctx_r74.columnCountForMasterDetail);
+        i0.ɵɵproperty("colSpan", ctx_r82.columnCountForMasterDetail);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", ctx_r74.tableRowTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c12, row_r63, rowIndex_r64));
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r82.tableRowTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c13, row_r71, rowIndex_r72));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_tr_12_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_tr_12_Template(rf, ctx) {
     if (rf & 1) {
-        const _r154 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "tr")(1, "td", 83)(2, "po-table-detail", 84);
-        i0.ɵɵlistener("p-select-row", function PoTableComponent_ng_template_4_ng_container_12_tbody_1_tr_12_Template_po_table_detail_p_select_row_2_listener($event) { i0.ɵɵrestoreView(_r154); const ctx_r153 = i0.ɵɵnextContext(4); return ctx_r153.selectDetailRow($event); });
+        const _r162 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "tr")(1, "td", 86)(2, "po-table-detail", 87);
+        i0.ɵɵlistener("p-select-row", function PoTableComponent_ng_template_6_ng_container_2_tbody_1_tr_12_Template_po_table_detail_p_select_row_2_listener($event) { i0.ɵɵrestoreView(_r162); const ctx_r161 = i0.ɵɵnextContext(4); return ctx_r161.selectDetailRow($event); });
         i0.ɵɵelementEnd()()();
     }
     if (rf & 2) {
-        const row_r63 = i0.ɵɵnextContext().$implicit;
-        const ctx_r75 = i0.ɵɵnextContext(3);
+        const row_r71 = i0.ɵɵnextContext().$implicit;
+        const ctx_r83 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("colSpan", ctx_r75.columnCountForMasterDetail);
+        i0.ɵɵproperty("colSpan", ctx_r83.columnCountForMasterDetail);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("p-selectable", ctx_r75.selectable && !ctx_r75.detailHideSelect)("p-detail", ctx_r75.columnMasterDetail.detail)("p-items", row_r63[ctx_r75.nameColumnDetail]);
+        i0.ɵɵproperty("p-selectable", ctx_r83.selectable && !ctx_r83.detailHideSelect)("p-detail", ctx_r83.columnMasterDetail.detail)("p-items", row_r71[ctx_r83.nameColumnDetail]);
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_tbody_1_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_tbody_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "tbody", 60)(1, "tr", 61);
-        i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_2_Template, 2, 4, "td", 64);
-        i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_3_Template, 2, 5, "td", 65);
-        i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_ng_container_12_tbody_1_4_Template, 1, 5, null, 21);
-        i0.ɵɵtemplate(5, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_5_Template, 2, 5, "td", 65);
-        i0.ɵɵtemplate(6, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_Template, 15, 31, "td", 66);
-        i0.ɵɵtemplate(7, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_7_Template, 2, 5, "td", 65);
-        i0.ɵɵtemplate(8, PoTableComponent_ng_template_4_ng_container_12_tbody_1_8_Template, 1, 5, null, 21);
-        i0.ɵɵtemplate(9, PoTableComponent_ng_template_4_ng_container_12_tbody_1_ng_container_9_Template, 2, 0, "ng-container", 21);
-        i0.ɵɵtemplate(10, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_10_Template, 1, 0, "td", 67);
+        i0.ɵɵelementStart(0, "tbody", 63)(1, "tr", 67);
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_2_Template, 2, 4, "td", 39);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_3_Template, 2, 5, "td", 68);
+        i0.ɵɵtemplate(4, PoTableComponent_ng_template_6_ng_container_2_tbody_1_4_Template, 1, 5, null, 23);
+        i0.ɵɵtemplate(5, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_5_Template, 2, 5, "td", 68);
+        i0.ɵɵtemplate(6, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_6_Template, 15, 33, "td", 69);
+        i0.ɵɵtemplate(7, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_7_Template, 2, 5, "td", 68);
+        i0.ɵɵtemplate(8, PoTableComponent_ng_template_6_ng_container_2_tbody_1_8_Template, 1, 5, null, 23);
+        i0.ɵɵtemplate(9, PoTableComponent_ng_template_6_ng_container_2_tbody_1_ng_container_9_Template, 2, 0, "ng-container", 23);
+        i0.ɵɵtemplate(10, PoTableComponent_ng_template_6_ng_container_2_tbody_1_td_10_Template, 1, 0, "td", 70);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(11, PoTableComponent_ng_template_4_ng_container_12_tbody_1_tr_11_Template, 3, 6, "tr", 21);
-        i0.ɵɵtemplate(12, PoTableComponent_ng_template_4_ng_container_12_tbody_1_tr_12_Template, 3, 4, "tr", 21);
+        i0.ɵɵtemplate(11, PoTableComponent_ng_template_6_ng_container_2_tbody_1_tr_11_Template, 3, 6, "tr", 23);
+        i0.ɵɵtemplate(12, PoTableComponent_ng_template_6_ng_container_2_tbody_1_tr_12_Template, 3, 4, "tr", 23);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const row_r63 = ctx.$implicit;
-        const rowIndex_r64 = ctx.index;
-        const ctx_r62 = i0.ɵɵnextContext(3);
+        const row_r71 = ctx.$implicit;
+        const rowIndex_r72 = ctx.index;
+        const ctx_r70 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("po-table-row-active", row_r63.$selected || row_r63.$selected === null && ctx_r62.selectable);
+        i0.ɵɵclassProp("po-table-row-active", row_r71.$selected || row_r71.$selected === null && ctx_r70.selectable);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r62.selectable);
+        i0.ɵɵproperty("ngIf", ctx_r70.selectable);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r62.columnMasterDetail && !ctx_r62.hideDetail && !ctx_r62.hasRowTemplate);
+        i0.ɵɵproperty("ngIf", ctx_r70.columnMasterDetail && !ctx_r70.hideDetail && !ctx_r70.hasRowTemplate);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx_r62.actionRight && (ctx_r62.visibleActions.length > 1 || ctx_r62.isSingleAction));
+        i0.ɵɵproperty("ngIf", !ctx_r70.actionRight && (ctx_r70.visibleActions.length > 1 || ctx_r70.isSingleAction));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r62.hasRowTemplate && !ctx_r62.hasRowTemplateWithArrowDirectionRight);
+        i0.ɵɵproperty("ngIf", ctx_r70.hasRowTemplate && !ctx_r70.hasRowTemplateWithArrowDirectionRight);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r62.mainColumns)("ngForTrackBy", ctx_r62.trackBy);
+        i0.ɵɵproperty("ngForOf", ctx_r70.mainColumns)("ngForTrackBy", ctx_r70.trackBy);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r62.hasRowTemplateWithArrowDirectionRight);
+        i0.ɵɵproperty("ngIf", ctx_r70.hasRowTemplateWithArrowDirectionRight);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r62.actionRight);
+        i0.ɵɵproperty("ngIf", ctx_r70.actionRight);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx_r62.actionRight && (ctx_r62.visibleActions.length > 1 || ctx_r62.isSingleAction) && !ctx_r62.hideColumnsManager);
+        i0.ɵɵproperty("ngIf", !ctx_r70.actionRight && (ctx_r70.visibleActions.length > 1 || ctx_r70.isSingleAction) && !ctx_r70.hideColumnsManager);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx_r62.hasVisibleActions && !ctx_r62.hideColumnsManager && !ctx_r62.hasRowTemplateWithArrowDirectionRight);
+        i0.ɵɵproperty("ngIf", !ctx_r70.hasVisibleActions && !ctx_r70.hideColumnsManager && !ctx_r70.hasRowTemplateWithArrowDirectionRight);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r62.hasMainColumns && ctx_r62.hasRowTemplate && row_r63.$showDetail && ctx_r62.isShowRowTemplate(row_r63, rowIndex_r64));
+        i0.ɵɵproperty("ngIf", ctx_r70.hasMainColumns && ctx_r70.hasRowTemplate && row_r71.$showDetail && ctx_r70.isShowRowTemplate(row_r71, rowIndex_r72));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r62.hasMainColumns && ctx_r62.isShowMasterDetail(row_r63));
+        i0.ɵɵproperty("ngIf", ctx_r70.hasMainColumns && ctx_r70.isShowMasterDetail(row_r71));
     }
 }
-function PoTableComponent_ng_template_4_ng_container_12_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_ng_container_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_4_ng_container_12_tbody_1_Template, 13, 14, "tbody", 63);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_2_tbody_1_Template, 13, 14, "tbody", 66);
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
-        const ctx_r45 = i0.ɵɵnextContext(2);
+        const ctx_r69 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r45.items)("ngForTrackBy", ctx_r45.trackBy);
+        i0.ɵɵproperty("ngForOf", ctx_r69.items)("ngForTrackBy", ctx_r69.trackBy);
     }
 }
-function PoTableComponent_ng_template_4_Template(rf, ctx) {
+function PoTableComponent_ng_template_6_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "table", 35)(1, "thead")(2, "tr");
-        i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_th_3_Template, 4, 4, "th", 36);
-        i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_th_4_Template, 1, 0, "th", 37);
-        i0.ɵɵtemplate(5, PoTableComponent_ng_template_4_th_5_Template, 1, 4, "th", 38);
-        i0.ɵɵtemplate(6, PoTableComponent_ng_template_4_th_6_Template, 3, 3, "th", 39);
-        i0.ɵɵtemplate(7, PoTableComponent_ng_template_4_th_7_Template, 4, 20, "th", 40);
-        i0.ɵɵtemplate(8, PoTableComponent_ng_template_4_th_8_Template, 1, 0, "th", 37);
-        i0.ɵɵtemplate(9, PoTableComponent_ng_template_4_th_9_Template, 1, 4, "th", 41);
-        i0.ɵɵtemplate(10, PoTableComponent_ng_template_4_th_10_Template, 5, 13, "th", 42);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(11, PoTableComponent_ng_template_4_tbody_11_Template, 5, 2, "tbody", 43);
-        i0.ɵɵtemplate(12, PoTableComponent_ng_template_4_ng_container_12_Template, 2, 2, "ng-container", 21);
+        i0.ɵɵelementStart(0, "table", 38);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_tbody_1_Template, 5, 2, "tbody", 62);
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_2_Template, 2, 2, "ng-container", 23);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r5 = i0.ɵɵnextContext();
-        i0.ɵɵclassProp("po-table-striped", ctx_r5.striped)("po-table-layout-fixed", ctx_r5.hideTextOverflow);
-        i0.ɵɵadvance(2);
-        i0.ɵɵclassProp("po-table-header", !ctx_r5.height);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r5.hasSelectableColumn);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", (ctx_r5.hasMasterDetailColumn || ctx_r5.hasRowTemplate) && !ctx_r5.hasRowTemplateWithArrowDirectionRight);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx_r5.actionRight && (ctx_r5.visibleActions.length > 1 || ctx_r5.isSingleAction));
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx_r5.hasMainColumns);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r5.mainColumns)("ngForTrackBy", ctx_r5.trackBy);
+        const ctx_r7 = i0.ɵɵnextContext();
+        i0.ɵɵclassProp("po-table-striped", ctx_r7.striped)("po-table-layout-fixed", ctx_r7.hideTextOverflow);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r5.hasRowTemplateWithArrowDirectionRight && (ctx_r5.hasVisibleActions || ctx_r5.hideColumnsManager));
+        i0.ɵɵproperty("ngIf", !ctx_r7.hasItems || !ctx_r7.hasMainColumns);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r5.hasVisibleActions && ctx_r5.hideColumnsManager && ctx_r5.actionRight);
+        i0.ɵɵproperty("ngIf", ctx_r7.hasMainColumns);
+    }
+}
+function PoTableComponent_ng_template_8_th_3_input_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "input", 49);
+    }
+    if (rf & 2) {
+        const ctx_r174 = i0.ɵɵnextContext(3);
+        i0.ɵɵclassProp("po-table-checkbox-checked", ctx_r174.selectAll)("po-table-checkbox-indeterminate", ctx_r174.selectAll === null);
+    }
+}
+function PoTableComponent_ng_template_8_th_3_label_3_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r177 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "label", 50);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_3_label_3_Template_label_click_0_listener() { i0.ɵɵrestoreView(_r177); const ctx_r176 = i0.ɵɵnextContext(3); return ctx_r176.selectAllRows(); });
+        i0.ɵɵelementEnd();
+    }
+}
+function PoTableComponent_ng_template_8_th_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "th", 46)(1, "div");
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_th_3_input_2_Template, 1, 4, "input", 47);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_8_th_3_label_3_Template, 1, 0, "label", 48);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r164 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r5.hasValidColumns && !ctx_r5.hideColumnsManager);
+        i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r164.height);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx_r5.hasItems || !ctx_r5.hasMainColumns);
+        i0.ɵɵproperty("ngIf", !ctx_r164.hideSelectAll);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r5.hasMainColumns);
+        i0.ɵɵproperty("ngIf", !ctx_r164.hideSelectAll);
     }
 }
-function PoTableComponent_ng_template_8_span_0_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_th_4_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "span", 86);
+        i0.ɵɵelement(0, "th", 51);
+    }
+}
+function PoTableComponent_ng_template_8_th_5_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "th");
     }
     if (rf & 2) {
-        const row_r156 = i0.ɵɵnextContext().row;
-        i0.ɵɵclassProp("po-icon-arrow-up", row_r156.$showDetail)("po-icon-arrow-down", !row_r156.$showDetail);
+        const ctx_r166 = i0.ɵɵnextContext(2);
+        i0.ɵɵclassProp("po-table-header-master-detail", !ctx_r166.isSingleAction)("po-table-header-single-action", ctx_r166.isSingleAction);
     }
 }
-function PoTableComponent_ng_template_8_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_th_6_ng_container_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainer(0);
+    }
+}
+function PoTableComponent_ng_template_8_th_6_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, PoTableComponent_ng_template_8_span_0_Template, 1, 4, "span", 85);
+        i0.ɵɵelementStart(0, "th", 52, 53);
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_th_6_ng_container_2_Template, 1, 0, "ng-container", 54);
+        i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const row_r156 = ctx.row;
-        const rowIndex_r157 = ctx.rowIndex;
-        const ctx_r8 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngIf", ctx_r8.containsMasterDetail(row_r156) && !ctx_r8.hasRowTemplate || ctx_r8.isShowRowTemplate(row_r156, rowIndex_r157) && ctx_r8.hasRowTemplate);
+        const ctx_r167 = i0.ɵɵnextContext(2);
+        const _r19 = i0.ɵɵreference(21);
+        const _r21 = i0.ɵɵreference(23);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx_r167.height)("ngIfThen", _r19)("ngIfElse", _r21);
     }
 }
-function PoTableComponent_ng_template_10_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_th_7_ng_container_3_Template(rf, ctx) {
     if (rf & 1) {
-        const _r162 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelement(0, "input", 87);
-        i0.ɵɵelementStart(1, "label", 88);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_10_Template_label_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r162); const row_r160 = restoredCtx.$implicit; const ctx_r161 = i0.ɵɵnextContext(); return ctx_r161.selectable ? ctx_r161.selectRow(row_r160) : "javascript:;"; });
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementContainer(0);
+    }
+}
+function PoTableComponent_ng_template_8_th_7_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r185 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "th", 55, 56);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_7_Template_th_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r185); const column_r180 = restoredCtx.$implicit; const ctx_r184 = i0.ɵɵnextContext(2); return ctx_r184.sortColumn(column_r180); });
+        i0.ɵɵelementStart(2, "div", 57);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_8_th_7_ng_container_3_Template, 1, 0, "ng-container", 58);
+        i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const row_r160 = ctx.$implicit;
-        i0.ɵɵclassProp("po-table-radio-checked", row_r160.$selected);
+        const column_r180 = ctx.$implicit;
+        const ctx_r168 = i0.ɵɵnextContext(2);
+        const _r17 = i0.ɵɵreference(19);
+        i0.ɵɵstyleProp("width", column_r180.width)("max-width", column_r180.width)("min-width", column_r180.width);
+        i0.ɵɵclassProp("po-clickable", ctx_r168.sort && column_r180.sortable !== false || ctx_r168.hasService)("po-table-header-subtitle", column_r180.type === "subtitle");
+        i0.ɵɵadvance(2);
+        i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r168.height)("po-table-header-flex-right", column_r180.type === "currency" || column_r180.type === "number")("po-table-header-flex-center", column_r180.type === "subtitle");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngTemplateOutlet", _r17)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c10, column_r180));
     }
 }
-function PoTableComponent_ng_template_12_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_th_8_Template(rf, ctx) {
     if (rf & 1) {
-        const _r165 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelement(0, "input", 47);
-        i0.ɵɵelementStart(1, "label", 48);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_12_Template_label_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r165); const row_r163 = restoredCtx.$implicit; const ctx_r164 = i0.ɵɵnextContext(); return ctx_r164.selectable ? ctx_r164.selectRow(row_r163) : "javascript:;"; });
-        i0.ɵɵelementEnd();
+        i0.ɵɵelement(0, "th", 51);
+    }
+}
+function PoTableComponent_ng_template_8_th_9_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "th");
     }
     if (rf & 2) {
-        const row_r163 = ctx.$implicit;
-        i0.ɵɵclassProp("po-table-checkbox-checked", row_r163.$selected);
+        const ctx_r170 = i0.ɵɵnextContext(2);
+        i0.ɵɵclassProp("po-table-header-single-action", ctx_r170.isSingleAction)("po-table-header-actions", !ctx_r170.isSingleAction);
     }
 }
-function PoTableComponent_ng_template_14_span_4_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_th_10_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "span");
+        const _r189 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "th", null, 59)(2, "div")(3, "button", 60, 61);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r189); const ctx_r188 = i0.ɵɵnextContext(2); return ctx_r188.onOpenColumnManager(); });
+        i0.ɵɵelementEnd()()();
     }
     if (rf & 2) {
-        const column_r166 = i0.ɵɵnextContext().$implicit;
-        const ctx_r168 = i0.ɵɵnextContext();
-        i0.ɵɵclassProp("po-table-header-icon-unselected", (ctx_r168.sortedColumn == null ? null : ctx_r168.sortedColumn.property) !== column_r166)("po-table-header-icon-descending", (ctx_r168.sortedColumn == null ? null : ctx_r168.sortedColumn.property) === column_r166 && ctx_r168.sortedColumn.ascending)("po-table-header-icon-ascending", (ctx_r168.sortedColumn == null ? null : ctx_r168.sortedColumn.property) === column_r166 && !ctx_r168.sortedColumn.ascending);
+        const _r186 = i0.ɵɵreference(1);
+        const ctx_r171 = i0.ɵɵnextContext(2);
+        i0.ɵɵclassProp("po-table-header-column-manager", !ctx_r171.isSingleAction || !ctx_r171.actionRight)("po-table-header-column-manager-border", !ctx_r171.height && ctx_r171.container)("po-table-header-single-action", ctx_r171.isSingleAction && ctx_r171.actionRight);
+        i0.ɵɵadvance(2);
+        i0.ɵɵstyleProp("width", ctx_r171.height && ctx_r171.visibleActions.length ? _r186.offsetWidth : undefined, "px");
+        i0.ɵɵclassProp("po-table-header-column-manager-border", ctx_r171.height && ctx_r171.container)("po-table-header-column-manager-fixed-inner", ctx_r171.height);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("p-tooltip", ctx_r171.literals.columnsManager);
     }
 }
-function PoTableComponent_ng_template_14_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_tbody_11_Template(rf, ctx) {
     if (rf & 1) {
-        const _r171 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "span", 89, 90);
-        i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_14_Template_span_mouseenter_0_listener($event) { i0.ɵɵrestoreView(_r171); const ctx_r170 = i0.ɵɵnextContext(); return ctx_r170.tooltipMouseEnter($event); })("mouseleave", function PoTableComponent_ng_template_14_Template_span_mouseleave_0_listener() { i0.ɵɵrestoreView(_r171); const ctx_r172 = i0.ɵɵnextContext(); return ctx_r172.tooltipMouseLeave(); });
-        i0.ɵɵtext(2);
-        i0.ɵɵpipe(3, "titlecase");
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(4, PoTableComponent_ng_template_14_span_4_Template, 1, 6, "span", 91);
+        i0.ɵɵelementStart(0, "tbody", 63)(1, "tr", 64)(2, "td", 65)(3, "span");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()()()();
     }
     if (rf & 2) {
-        const column_r166 = ctx.$implicit;
-        const ctx_r14 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("p-tooltip", ctx_r14.tooltipText);
+        const ctx_r172 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", column_r166.label || i0.ɵɵpipeBind1(3, 3, column_r166.property), " ");
+        i0.ɵɵproperty("colSpan", ctx_r172.columnCount);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx_r14.sort && column_r166.sortable !== false);
+        i0.ɵɵtextInterpolate1(" ", ctx_r172.literals.noData, " ");
     }
 }
-function PoTableComponent_ng_template_16_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_2_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 92);
-        i0.ɵɵtext(1);
+        i0.ɵɵelementContainer(0);
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "td", 46);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_2_ng_container_1_Template, 1, 0, "ng-container", 58);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r16 = i0.ɵɵnextContext();
-        i0.ɵɵstyleProp("width", ctx_r16.noColumnsHeader == null ? null : ctx_r16.noColumnsHeader.nativeElement.offsetWidth, "px");
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r193 = i0.ɵɵnextContext(3);
+        const _r13 = i0.ɵɵreference(15);
+        const _r15 = i0.ɵɵreference(17);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r16.hasValidColumns ? ctx_r16.literals.noVisibleColumn : ctx_r16.literals.noColumns, " ");
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r193.singleSelect ? _r13 : _r15)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c10, row_r191));
     }
 }
-function PoTableComponent_ng_template_18_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_3_ng_template_1_Template(rf, ctx) { }
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_3_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtext(0);
+        const _r209 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 71);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_3_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r209); const row_r191 = i0.ɵɵnextContext().$implicit; const ctx_r207 = i0.ɵɵnextContext(3); return ctx_r207.toggleDetail(row_r191); });
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_3_ng_template_1_Template, 0, 0, "ng-template", 72);
+        i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r18 = i0.ɵɵnextContext();
-        i0.ɵɵtextInterpolate1(" ", ctx_r18.hasValidColumns ? ctx_r18.literals.noVisibleColumn : ctx_r18.literals.noColumns, "\n");
+        const ctx_r210 = i0.ɵɵnextContext();
+        const row_r191 = ctx_r210.$implicit;
+        const rowIndex_r192 = ctx_r210.index;
+        i0.ɵɵnextContext(3);
+        const _r11 = i0.ɵɵreference(13);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r191, rowIndex_r192));
     }
 }
-function PoTableComponent_ng_template_20_td_0_div_1_po_icon_1_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_4_ng_template_0_Template(rf, ctx) { }
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_4_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "po-icon", 99);
+        i0.ɵɵtemplate(0, PoTableComponent_ng_template_8_ng_container_12_tbody_1_4_ng_template_0_Template, 0, 0, "ng-template", 72);
     }
     if (rf & 2) {
-        const ctx_r178 = i0.ɵɵnextContext(4);
-        i0.ɵɵproperty("p-icon", ctx_r178.firstAction.icon);
+        const ctx_r212 = i0.ɵɵnextContext();
+        const row_r191 = ctx_r212.$implicit;
+        const rowIndex_r192 = ctx_r212.index;
+        i0.ɵɵnextContext(3);
+        const _r23 = i0.ɵɵreference(25);
+        i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r191, rowIndex_r192));
     }
 }
-function PoTableComponent_ng_template_20_td_0_div_1_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_5_ng_template_1_Template(rf, ctx) { }
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_5_Template(rf, ctx) {
     if (rf & 1) {
-        const _r181 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 97);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_20_td_0_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r181); const row_r173 = i0.ɵɵnextContext(2).row; const ctx_r179 = i0.ɵɵnextContext(); return ctx_r179.executeTableAction(row_r173, ctx_r179.firstAction); });
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_20_td_0_div_1_po_icon_1_Template, 1, 1, "po-icon", 98);
-        i0.ɵɵtext(2);
+        const _r216 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 71);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_5_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r216); const row_r191 = i0.ɵɵnextContext().$implicit; const ctx_r214 = i0.ɵɵnextContext(3); return ctx_r214.toggleDetail(row_r191); });
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_5_ng_template_1_Template, 0, 0, "ng-template", 72);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const row_r173 = i0.ɵɵnextContext(2).row;
-        const ctx_r177 = i0.ɵɵnextContext();
-        i0.ɵɵclassProp("po-table-action-disabled", ctx_r177.firstAction.disabled ? ctx_r177.validateTableAction(row_r173, ctx_r177.firstAction) : false);
+        const ctx_r217 = i0.ɵɵnextContext();
+        const row_r191 = ctx_r217.$implicit;
+        const rowIndex_r192 = ctx_r217.index;
+        i0.ɵɵnextContext(3);
+        const _r11 = i0.ɵɵreference(13);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r177.firstAction.icon);
+        i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r191, rowIndex_r192));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_2_ng_container_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainer(0);
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_2_ng_container_1_Template, 1, 0, "ng-container", 58);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r220 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r177.firstAction.label, " ");
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r220.getTemplate(column_r218))("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c10, ctx_r220.getCellData(row_r191, column_r218)));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_3_ng_container_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainer(0);
     }
 }
-function PoTableComponent_ng_template_20_td_0_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_3_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "td", 95);
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_20_td_0_div_1_Template, 3, 4, "div", 96);
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_3_ng_container_1_Template, 1, 0, "ng-container", 58);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r175 = i0.ɵɵnextContext(2);
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r221 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r175.firstAction.visible !== false);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r221.tableCellTemplate == null ? null : ctx_r221.tableCellTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c12, row_r191, column_r218));
     }
 }
-function PoTableComponent_ng_template_20_td_1_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_4_Template(rf, ctx) {
     if (rf & 1) {
-        const _r186 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 100)(1, "span", 101, 102);
-        i0.ɵɵlistener("click", function PoTableComponent_ng_template_20_td_1_Template_span_click_1_listener() { i0.ɵɵrestoreView(_r186); const _r183 = i0.ɵɵreference(2); const row_r173 = i0.ɵɵnextContext().row; const ctx_r184 = i0.ɵɵnextContext(); return ctx_r184.togglePopup(row_r173, _r183); });
-        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r222 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r222.getBooleanLabel(ctx_r222.getCellData(row_r191, column_r218), column_r218), " ");
     }
 }
-function PoTableComponent_ng_template_20_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_5_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, PoTableComponent_ng_template_20_td_0_Template, 2, 1, "td", 93);
-        i0.ɵɵtemplate(1, PoTableComponent_ng_template_20_td_1_Template, 3, 0, "td", 94);
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1);
+        i0.ɵɵpipe(2, "currency");
+        i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r20 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngIf", ctx_r20.isSingleAction);
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r223 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r20.visibleActions.length > 1);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind4(2, 1, ctx_r223.getCellData(row_r191, column_r218), column_r218.format, "symbol", "1.2-2"), " ");
     }
 }
-function PoTableComponent_po_table_column_manager_22_Template(rf, ctx) {
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_6_Template(rf, ctx) {
     if (rf & 1) {
-        const _r188 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "po-table-column-manager", 103);
-        i0.ɵɵlistener("p-visible-columns-change", function PoTableComponent_po_table_column_manager_22_Template_po_table_column_manager_p_visible_columns_change_0_listener($event) { i0.ɵɵrestoreView(_r188); const ctx_r187 = i0.ɵɵnextContext(); return ctx_r187.onVisibleColumnsChange($event); })("p-change-visible-columns", function PoTableComponent_po_table_column_manager_22_Template_po_table_column_manager_p_change_visible_columns_0_listener($event) { i0.ɵɵrestoreView(_r188); const ctx_r189 = i0.ɵɵnextContext(); return ctx_r189.onChangeVisibleColumns($event); });
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1);
+        i0.ɵɵpipe(2, "date");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r21 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("p-columns", ctx_r21.columns)("p-max-columns", ctx_r21.maxColumns)("p-target", ctx_r21.columnManagerTarget)("p-last-visible-columns-selected", ctx_r21.lastVisibleColumnsSelected);
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r224 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r224.getCellData(row_r191, column_r218), column_r218.format || "dd/MM/yyyy"), " ");
     }
 }
-/**
- * @docsExtends PoTableBaseComponent
- *
- * @example
- *
- * <example name="po-table-basic" title="PO Table Basic">
- *  <file name="sample-po-table-basic/sample-po-table-basic.component.ts"> </file>
- *  <file name="sample-po-table-basic/sample-po-table-basic.component.html"> </file>
- * </example>
- *
- * <example name="po-table-labs" title="PO Table Labs">
- *  <file name="sample-po-table-labs/sample-po-table-labs.component.ts"> </file>
- *  <file name="sample-po-table-labs/sample-po-table-labs.component.html"> </file>
- *  <file name="sample-po-table-labs/sample-po-table-labs.component.e2e-spec.ts"> </file>
- *  <file name="sample-po-table-labs/sample-po-table-labs.component.po.ts"> </file>
- *  <file name="sample-po-table-labs/sample-po-table-labs.service.ts"> </file>
- * </example>
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_7_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1);
+        i0.ɵɵpipe(2, "po_time");
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r225 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r225.getCellData(row_r191, column_r218), column_r218.format || "HH:mm:ss.ffffff"), " ");
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_8_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1);
+        i0.ɵɵpipe(2, "date");
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r226 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r226.getCellData(row_r191, column_r218), column_r218.format || "dd/MM/yyyy HH:mm:ss"), " ");
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_9_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r227 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r227.formatNumber(ctx_r227.getCellData(row_r191, column_r218), column_r218.format), " ");
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_po_table_column_link_10_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r253 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "po-table-column-link", 79);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_po_table_column_link_10_Template_po_table_column_link_click_0_listener($event) { i0.ɵɵrestoreView(_r253); const column_r218 = i0.ɵɵnextContext().$implicit; const row_r191 = i0.ɵɵnextContext().$implicit; const ctx_r251 = i0.ɵɵnextContext(3); return ctx_r251.onClickLink($event, row_r191, column_r218); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r228 = i0.ɵɵnextContext(3);
+        i0.ɵɵproperty("p-action", column_r218.action)("p-disabled", ctx_r228.checkDisabled(row_r191, column_r218))("p-link", row_r191[column_r218.link])("p-row", row_r191)("p-value", ctx_r228.getCellData(row_r191, column_r218));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_po_table_column_icon_11_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "po-table-column-icon", 80);
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r229 = i0.ɵɵnextContext(3);
+        i0.ɵɵproperty("p-column", column_r218)("p-icons", ctx_r229.getColumnIcons(row_r191, column_r218))("p-row", row_r191);
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_12_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵelement(1, "po-table-subtitle-circle", 81);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r230 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("p-subtitle", ctx_r230.getSubtitleColumn(row_r191, column_r218));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_13_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵelement(1, "po-table-column-label", 82);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r231 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("p-value", ctx_r231.getColumnLabel(row_r191, column_r218));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_14_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r218 = i0.ɵɵnextContext().$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r232 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(ctx_r232.getCellData(row_r191, column_r218));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r266 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 73);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r266); const row_r191 = i0.ɵɵnextContext().$implicit; const ctx_r265 = i0.ɵɵnextContext(3); return ctx_r265.selectable ? ctx_r265.selectRow(row_r191) : "javascript:;"; });
+        i0.ɵɵelementStart(1, "div", 74);
+        i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template_div_mouseenter_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r266); const column_r218 = restoredCtx.$implicit; const row_r191 = i0.ɵɵnextContext().$implicit; const ctx_r268 = i0.ɵɵnextContext(3); return ctx_r268.tooltipMouseEnter($event, column_r218, row_r191); })("mouseleave", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r266); const ctx_r270 = i0.ɵɵnextContext(4); return ctx_r270.tooltipMouseLeave(); });
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_2_Template, 2, 4, "span", 75);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_3_Template, 2, 5, "span", 75);
+        i0.ɵɵtemplate(4, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_4_Template, 2, 1, "span", 75);
+        i0.ɵɵtemplate(5, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_5_Template, 3, 6, "span", 75);
+        i0.ɵɵtemplate(6, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_6_Template, 3, 4, "span", 75);
+        i0.ɵɵtemplate(7, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_7_Template, 3, 4, "span", 75);
+        i0.ɵɵtemplate(8, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_8_Template, 3, 4, "span", 75);
+        i0.ɵɵtemplate(9, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_9_Template, 2, 1, "span", 75);
+        i0.ɵɵtemplate(10, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_po_table_column_link_10_Template, 1, 5, "po-table-column-link", 76);
+        i0.ɵɵtemplate(11, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_po_table_column_icon_11_Template, 1, 3, "po-table-column-icon", 77);
+        i0.ɵɵtemplate(12, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_12_Template, 2, 1, "span", 75);
+        i0.ɵɵtemplate(13, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_13_Template, 2, 1, "span", 75);
+        i0.ɵɵtemplate(14, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_14_Template, 2, 1, "span", 78);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const column_r218 = ctx.$implicit;
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r197 = i0.ɵɵnextContext(3);
+        i0.ɵɵstyleProp("width", column_r218.width)("max-width", column_r218.width)("min-width", column_r218.width);
+        i0.ɵɵclassProp("po-table-column", column_r218.type !== "icon")("po-table-column-right", column_r218.type === "currency" || column_r218.type === "number")("po-table-column-center", column_r218.type === "subtitle")("po-table-column-icons", column_r218.type === "icon");
+        i0.ɵɵproperty("ngClass", ctx_r197.getClassColor(row_r191, column_r218));
+        i0.ɵɵadvance(1);
+        i0.ɵɵclassProp("po-table-body-ellipsis", ctx_r197.hideTextOverflow);
+        i0.ɵɵproperty("ngSwitch", column_r218.type)("p-tooltip", ctx_r197.tooltipText);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "columnTemplate");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "cellTemplate");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "boolean");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "currency");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "date");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "time");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "dateTime");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "number");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "link");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "icon");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "subtitle");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "label");
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_7_ng_template_1_Template(rf, ctx) { }
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_7_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r275 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 71);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_7_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r275); const row_r191 = i0.ɵɵnextContext().$implicit; const ctx_r273 = i0.ɵɵnextContext(3); return ctx_r273.toggleDetail(row_r191); });
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_7_ng_template_1_Template, 0, 0, "ng-template", 72);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r276 = i0.ɵɵnextContext();
+        const row_r191 = ctx_r276.$implicit;
+        const rowIndex_r192 = ctx_r276.index;
+        i0.ɵɵnextContext(3);
+        const _r11 = i0.ɵɵreference(13);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r191, rowIndex_r192));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_8_ng_template_0_Template(rf, ctx) { }
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_8_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵtemplate(0, PoTableComponent_ng_template_8_ng_container_12_tbody_1_8_ng_template_0_Template, 0, 0, "ng-template", 72);
+    }
+    if (rf & 2) {
+        const ctx_r278 = i0.ɵɵnextContext();
+        const row_r191 = ctx_r278.$implicit;
+        const rowIndex_r192 = ctx_r278.index;
+        i0.ɵɵnextContext(3);
+        const _r23 = i0.ɵɵreference(25);
+        i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c11, row_r191, rowIndex_r192));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_ng_container_9_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelement(1, "td", 88);
+        i0.ɵɵelementContainerEnd();
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_10_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "td", 84);
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_11_ng_template_2_Template(rf, ctx) { }
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_11_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "tr")(1, "td", 85);
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_11_ng_template_2_Template, 0, 0, "ng-template", 72);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r280 = i0.ɵɵnextContext();
+        const row_r191 = ctx_r280.$implicit;
+        const rowIndex_r192 = ctx_r280.index;
+        const ctx_r202 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("colSpan", ctx_r202.columnCountForMasterDetail);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r202.tableRowTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c13, row_r191, rowIndex_r192));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_12_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r282 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "tr")(1, "td", 86)(2, "po-table-detail", 87);
+        i0.ɵɵlistener("p-select-row", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_12_Template_po_table_detail_p_select_row_2_listener($event) { i0.ɵɵrestoreView(_r282); const ctx_r281 = i0.ɵɵnextContext(4); return ctx_r281.selectDetailRow($event); });
+        i0.ɵɵelementEnd()()();
+    }
+    if (rf & 2) {
+        const row_r191 = i0.ɵɵnextContext().$implicit;
+        const ctx_r203 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("colSpan", ctx_r203.columnCountForMasterDetail);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("p-selectable", ctx_r203.selectable && !ctx_r203.detailHideSelect)("p-detail", ctx_r203.columnMasterDetail.detail)("p-items", row_r191[ctx_r203.nameColumnDetail]);
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_tbody_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "tbody", 63)(1, "tr", 67);
+        i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_2_Template, 2, 4, "td", 39);
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_3_Template, 2, 5, "td", 68);
+        i0.ɵɵtemplate(4, PoTableComponent_ng_template_8_ng_container_12_tbody_1_4_Template, 1, 5, null, 23);
+        i0.ɵɵtemplate(5, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_5_Template, 2, 5, "td", 68);
+        i0.ɵɵtemplate(6, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template, 15, 31, "td", 69);
+        i0.ɵɵtemplate(7, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_7_Template, 2, 5, "td", 68);
+        i0.ɵɵtemplate(8, PoTableComponent_ng_template_8_ng_container_12_tbody_1_8_Template, 1, 5, null, 23);
+        i0.ɵɵtemplate(9, PoTableComponent_ng_template_8_ng_container_12_tbody_1_ng_container_9_Template, 2, 0, "ng-container", 23);
+        i0.ɵɵtemplate(10, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_10_Template, 1, 0, "td", 70);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(11, PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_11_Template, 3, 6, "tr", 23);
+        i0.ɵɵtemplate(12, PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_12_Template, 3, 4, "tr", 23);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const row_r191 = ctx.$implicit;
+        const rowIndex_r192 = ctx.index;
+        const ctx_r190 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵclassProp("po-table-row-active", row_r191.$selected || row_r191.$selected === null && ctx_r190.selectable);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r190.selectable);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r190.columnMasterDetail && !ctx_r190.hideDetail && !ctx_r190.hasRowTemplate);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r190.actionRight && (ctx_r190.visibleActions.length > 1 || ctx_r190.isSingleAction));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r190.hasRowTemplate && !ctx_r190.hasRowTemplateWithArrowDirectionRight);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r190.mainColumns)("ngForTrackBy", ctx_r190.trackBy);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r190.hasRowTemplateWithArrowDirectionRight);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r190.actionRight);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r190.actionRight && (ctx_r190.visibleActions.length > 1 || ctx_r190.isSingleAction) && !ctx_r190.hideColumnsManager);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r190.hasVisibleActions && !ctx_r190.hideColumnsManager && !ctx_r190.hasRowTemplateWithArrowDirectionRight);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r190.hasMainColumns && ctx_r190.hasRowTemplate && row_r191.$showDetail && ctx_r190.isShowRowTemplate(row_r191, rowIndex_r192));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r190.hasMainColumns && ctx_r190.isShowMasterDetail(row_r191));
+    }
+}
+function PoTableComponent_ng_template_8_ng_container_12_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_Template, 13, 14, "tbody", 66);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const ctx_r173 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r173.items)("ngForTrackBy", ctx_r173.trackBy);
+    }
+}
+function PoTableComponent_ng_template_8_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "table", 38)(1, "thead")(2, "tr");
+        i0.ɵɵtemplate(3, PoTableComponent_ng_template_8_th_3_Template, 4, 4, "th", 39);
+        i0.ɵɵtemplate(4, PoTableComponent_ng_template_8_th_4_Template, 1, 0, "th", 40);
+        i0.ɵɵtemplate(5, PoTableComponent_ng_template_8_th_5_Template, 1, 4, "th", 41);
+        i0.ɵɵtemplate(6, PoTableComponent_ng_template_8_th_6_Template, 3, 3, "th", 42);
+        i0.ɵɵtemplate(7, PoTableComponent_ng_template_8_th_7_Template, 4, 20, "th", 43);
+        i0.ɵɵtemplate(8, PoTableComponent_ng_template_8_th_8_Template, 1, 0, "th", 40);
+        i0.ɵɵtemplate(9, PoTableComponent_ng_template_8_th_9_Template, 1, 4, "th", 44);
+        i0.ɵɵtemplate(10, PoTableComponent_ng_template_8_th_10_Template, 5, 13, "th", 45);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵtemplate(11, PoTableComponent_ng_template_8_tbody_11_Template, 5, 2, "tbody", 62);
+        i0.ɵɵtemplate(12, PoTableComponent_ng_template_8_ng_container_12_Template, 2, 2, "ng-container", 23);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r9 = i0.ɵɵnextContext();
+        i0.ɵɵclassProp("po-table-striped", ctx_r9.striped)("po-table-layout-fixed", ctx_r9.hideTextOverflow);
+        i0.ɵɵadvance(2);
+        i0.ɵɵclassProp("po-table-header", !ctx_r9.height);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r9.hasSelectableColumn);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", (ctx_r9.hasMasterDetailColumn || ctx_r9.hasRowTemplate) && !ctx_r9.hasRowTemplateWithArrowDirectionRight);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r9.actionRight && (ctx_r9.visibleActions.length > 1 || ctx_r9.isSingleAction));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r9.hasMainColumns);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r9.mainColumns)("ngForTrackBy", ctx_r9.trackBy);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r9.hasRowTemplateWithArrowDirectionRight && (ctx_r9.hasVisibleActions || ctx_r9.hideColumnsManager));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r9.hasVisibleActions && ctx_r9.hideColumnsManager && ctx_r9.actionRight);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r9.hasValidColumns && !ctx_r9.hideColumnsManager);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r9.hasItems || !ctx_r9.hasMainColumns);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r9.hasMainColumns);
+    }
+}
+function PoTableComponent_ng_template_12_span_0_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "span", 90);
+    }
+    if (rf & 2) {
+        const row_r284 = i0.ɵɵnextContext().row;
+        i0.ɵɵclassProp("po-icon-arrow-up", row_r284.$showDetail)("po-icon-arrow-down", !row_r284.$showDetail);
+    }
+}
+function PoTableComponent_ng_template_12_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵtemplate(0, PoTableComponent_ng_template_12_span_0_Template, 1, 4, "span", 89);
+    }
+    if (rf & 2) {
+        const row_r284 = ctx.row;
+        const rowIndex_r285 = ctx.rowIndex;
+        const ctx_r12 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("ngIf", ctx_r12.containsMasterDetail(row_r284) && !ctx_r12.hasRowTemplate || ctx_r12.isShowRowTemplate(row_r284, rowIndex_r285) && ctx_r12.hasRowTemplate);
+    }
+}
+function PoTableComponent_ng_template_14_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r290 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelement(0, "input", 91);
+        i0.ɵɵelementStart(1, "label", 92);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_14_Template_label_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r290); const row_r288 = restoredCtx.$implicit; const ctx_r289 = i0.ɵɵnextContext(); return ctx_r289.selectable ? ctx_r289.selectRow(row_r288) : "javascript:;"; });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const row_r288 = ctx.$implicit;
+        i0.ɵɵclassProp("po-table-radio-checked", row_r288.$selected);
+    }
+}
+function PoTableComponent_ng_template_16_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r293 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelement(0, "input", 49);
+        i0.ɵɵelementStart(1, "label", 50);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_16_Template_label_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r293); const row_r291 = restoredCtx.$implicit; const ctx_r292 = i0.ɵɵnextContext(); return ctx_r292.selectable ? ctx_r292.selectRow(row_r291) : "javascript:;"; });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const row_r291 = ctx.$implicit;
+        i0.ɵɵclassProp("po-table-checkbox-checked", row_r291.$selected);
+    }
+}
+function PoTableComponent_ng_template_18_span_4_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "span");
+    }
+    if (rf & 2) {
+        const column_r294 = i0.ɵɵnextContext().$implicit;
+        const ctx_r296 = i0.ɵɵnextContext();
+        i0.ɵɵclassProp("po-table-header-icon-unselected", (ctx_r296.sortedColumn == null ? null : ctx_r296.sortedColumn.property) !== column_r294)("po-table-header-icon-descending", (ctx_r296.sortedColumn == null ? null : ctx_r296.sortedColumn.property) === column_r294 && ctx_r296.sortedColumn.ascending)("po-table-header-icon-ascending", (ctx_r296.sortedColumn == null ? null : ctx_r296.sortedColumn.property) === column_r294 && !ctx_r296.sortedColumn.ascending);
+    }
+}
+function PoTableComponent_ng_template_18_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r299 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "span", 93, 94);
+        i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_18_Template_span_mouseenter_0_listener($event) { i0.ɵɵrestoreView(_r299); const ctx_r298 = i0.ɵɵnextContext(); return ctx_r298.tooltipMouseEnter($event); })("mouseleave", function PoTableComponent_ng_template_18_Template_span_mouseleave_0_listener() { i0.ɵɵrestoreView(_r299); const ctx_r300 = i0.ɵɵnextContext(); return ctx_r300.tooltipMouseLeave(); });
+        i0.ɵɵtext(2);
+        i0.ɵɵpipe(3, "titlecase");
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(4, PoTableComponent_ng_template_18_span_4_Template, 1, 6, "span", 95);
+    }
+    if (rf & 2) {
+        const column_r294 = ctx.$implicit;
+        const ctx_r18 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("p-tooltip", ctx_r18.tooltipText);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate1(" ", column_r294.label || i0.ɵɵpipeBind1(3, 3, column_r294.property), " ");
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx_r18.sort && column_r294.sortable !== false);
+    }
+}
+function PoTableComponent_ng_template_20_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 96);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r20 = i0.ɵɵnextContext();
+        i0.ɵɵstyleProp("width", ctx_r20.noColumnsHeader == null ? null : ctx_r20.noColumnsHeader.nativeElement.offsetWidth, "px");
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r20.hasValidColumns ? ctx_r20.literals.noVisibleColumn : ctx_r20.literals.noColumns, " ");
+    }
+}
+function PoTableComponent_ng_template_22_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵtext(0);
+    }
+    if (rf & 2) {
+        const ctx_r22 = i0.ɵɵnextContext();
+        i0.ɵɵtextInterpolate1(" ", ctx_r22.hasValidColumns ? ctx_r22.literals.noVisibleColumn : ctx_r22.literals.noColumns, "\n");
+    }
+}
+function PoTableComponent_ng_template_24_td_0_div_1_po_icon_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "po-icon", 103);
+    }
+    if (rf & 2) {
+        const ctx_r306 = i0.ɵɵnextContext(4);
+        i0.ɵɵproperty("p-icon", ctx_r306.firstAction.icon);
+    }
+}
+function PoTableComponent_ng_template_24_td_0_div_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r309 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 101);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_24_td_0_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r309); const row_r301 = i0.ɵɵnextContext(2).row; const ctx_r307 = i0.ɵɵnextContext(); return ctx_r307.executeTableAction(row_r301, ctx_r307.firstAction); });
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_0_div_1_po_icon_1_Template, 1, 1, "po-icon", 102);
+        i0.ɵɵtext(2);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const row_r301 = i0.ɵɵnextContext(2).row;
+        const ctx_r305 = i0.ɵɵnextContext();
+        i0.ɵɵclassProp("po-table-action-disabled", ctx_r305.firstAction.disabled ? ctx_r305.validateTableAction(row_r301, ctx_r305.firstAction) : false);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r305.firstAction.icon);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r305.firstAction.label, " ");
+    }
+}
+function PoTableComponent_ng_template_24_td_0_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "td", 99);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_0_div_1_Template, 3, 4, "div", 100);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r303 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r303.firstAction.visible !== false);
+    }
+}
+function PoTableComponent_ng_template_24_td_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r314 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td", 104)(1, "span", 105, 106);
+        i0.ɵɵlistener("click", function PoTableComponent_ng_template_24_td_1_Template_span_click_1_listener() { i0.ɵɵrestoreView(_r314); const _r311 = i0.ɵɵreference(2); const row_r301 = i0.ɵɵnextContext().row; const ctx_r312 = i0.ɵɵnextContext(); return ctx_r312.togglePopup(row_r301, _r311); });
+        i0.ɵɵelementEnd()();
+    }
+}
+function PoTableComponent_ng_template_24_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵtemplate(0, PoTableComponent_ng_template_24_td_0_Template, 2, 1, "td", 97);
+        i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_1_Template, 3, 0, "td", 98);
+    }
+    if (rf & 2) {
+        const ctx_r24 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("ngIf", ctx_r24.isSingleAction);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r24.visibleActions.length > 1);
+    }
+}
+function PoTableComponent_po_table_column_manager_26_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r316 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "po-table-column-manager", 107);
+        i0.ɵɵlistener("p-visible-columns-change", function PoTableComponent_po_table_column_manager_26_Template_po_table_column_manager_p_visible_columns_change_0_listener($event) { i0.ɵɵrestoreView(_r316); const ctx_r315 = i0.ɵɵnextContext(); return ctx_r315.onVisibleColumnsChange($event); })("p-change-visible-columns", function PoTableComponent_po_table_column_manager_26_Template_po_table_column_manager_p_change_visible_columns_0_listener($event) { i0.ɵɵrestoreView(_r316); const ctx_r317 = i0.ɵɵnextContext(); return ctx_r317.onChangeVisibleColumns($event); })("p-initial-columns", function PoTableComponent_po_table_column_manager_26_Template_po_table_column_manager_p_initial_columns_0_listener($event) { i0.ɵɵrestoreView(_r316); const ctx_r318 = i0.ɵɵnextContext(); return ctx_r318.onColumnRestoreManager($event); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r25 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("p-columns", ctx_r25.columns)("p-max-columns", ctx_r25.maxColumns)("p-target", ctx_r25.columnManagerTarget)("p-last-visible-columns-selected", ctx_r25.lastVisibleColumnsSelected)("p-columns-default", ctx_r25.initialColumns);
+    }
+}
+/**
+ * @docsExtends PoTableBaseComponent
+ *
+ * @example
+ *
+ * <example name="po-table-basic" title="PO Table Basic">
+ *  <file name="sample-po-table-basic/sample-po-table-basic.component.ts"> </file>
+ *  <file name="sample-po-table-basic/sample-po-table-basic.component.html"> </file>
+ * </example>
+ *
+ * <example name="po-table-labs" title="PO Table Labs">
+ *  <file name="sample-po-table-labs/sample-po-table-labs.component.ts"> </file>
+ *  <file name="sample-po-table-labs/sample-po-table-labs.component.html"> </file>
+ *  <file name="sample-po-table-labs/sample-po-table-labs.component.e2e-spec.ts"> </file>
+ *  <file name="sample-po-table-labs/sample-po-table-labs.component.po.ts"> </file>
+ *  <file name="sample-po-table-labs/sample-po-table-labs.service.ts"> </file>
+ * </example>
  *
  * <example name="po-table-with-api" title="PO Table using API">
  *  <file name="sample-po-table-with-api/sample-po-table-with-api.component.ts"> </file>
@@ -17695,6 +18415,9 @@ class PoTableComponent extends PoTableBaseComponent {
     onChangeVisibleColumns(columns) {
         this.changeVisibleColumns.emit(columns);
     }
+    onColumnRestoreManager(value) {
+        this.columnRestoreManager.emit(value);
+    }
     onVisibleColumnsChange(columns) {
         this.columns = columns;
         this.changeDetector.detectChanges();
@@ -17769,6 +18492,9 @@ class PoTableComponent extends PoTableBaseComponent {
         }
         return template.templateRef;
     }
+    syncronizeHorizontalScroll() {
+        this.poTableThead.nativeElement.scrollLeft = this.poTableTbody.nativeElement.scrollLeft;
+    }
     calculateHeightTableContainer(height) {
         const value = parseFloat(height);
         this.heightTableContainer = value ? value - this.getHeightTableFooter() : undefined;
@@ -17910,10 +18636,11 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
             i0.ɵɵviewQuery(_c2$a, 5, ElementRef);
             i0.ɵɵviewQuery(_c3$6, 5, ElementRef);
             i0.ɵɵviewQuery(_c4$4, 5, ElementRef);
-            i0.ɵɵviewQuery(_c5$2, 5);
-            i0.ɵɵviewQuery(_c6$1, 5, ElementRef);
+            i0.ɵɵviewQuery(_c5$2, 5, ElementRef);
+            i0.ɵɵviewQuery(_c6$2, 5);
             i0.ɵɵviewQuery(_c7$1, 5, ElementRef);
-            i0.ɵɵviewQuery(_c8$1, 5);
+            i0.ɵɵviewQuery(_c8$1, 5, ElementRef);
+            i0.ɵɵviewQuery(_c9, 5);
         }
         if (rf & 2) {
             let _t;
@@ -17922,33 +18649,36 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableFooterElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableWrapperElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poTableTbody = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poTableThead = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnManagerTarget = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsIconElement = _t);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsElement = _t);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headersTable = _t);
         }
-    }, features: [i0.ɵɵProvidersFeature([PoDateService]), i0.ɵɵInheritDefinitionFeature], decls: 23, vars: 6, consts: [["p-no-padding", "", 3, "p-no-shadow", 4, "ngIf", "ngIfElse"], ["tableContainerTemplate", ""], ["class", "po-row po-table-footer-show-more", 3, "po-invisible", 4, "ngIf"], ["tableTemplate", ""], [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-visible-columns-change", "p-change-visible-columns", 4, "ngIf"], ["p-no-padding", "", 3, "p-no-shadow"], [4, "ngTemplateOutlet"], ["class", "po-table-overlay", 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"], [1, "po-table-overlay"], [1, "po-table-overlay-content", 3, "p-text"], [1, "po-table-container"], [1, "po-table-header-fixed", "po-table-header"], [1, "po-table-container-fixed-inner"], ["poTableTbody", ""], [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"], ["class", "po-table-column-selectable", 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"], ["class", "po-table-header-ellipsis", 3, "width", "max-width", "min-width", "po-clickable", "po-table-header-subtitle", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "po-table-header-single-action", "po-table-header-actions", 4, "ngIf"], [3, "po-table-header-column-manager", "po-table-header-column-manager-border", "po-table-header-single-action", 4, "ngIf"], ["class", "po-table-group-row", 4, "ngIf"], [1, "po-table-column-selectable"], ["type", "checkbox", "class", "po-table-checkbox", 3, "po-table-checkbox-checked", "po-table-checkbox-indeterminate", 4, "ngIf"], ["class", "po-table-checkbox-label po-clickable", 3, "click", 4, "ngIf"], ["type", "checkbox", 1, "po-table-checkbox"], [1, "po-table-checkbox-label", "po-clickable", 3, "click"], [1, "po-table-header-column", "po-table-header-master-detail"], [1, "po-table-header-column", "po-text-center"], ["noColumnsHeader", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], [1, "po-table-header-ellipsis", 3, "click"], ["headersTable", ""], [1, "po-table-header-flex"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["columnManager", ""], ["p-tooltip-position", "left", 1, "po-table-header-column-manager-button", "po-icon", "po-icon-settings", "po-clickable", 3, "p-tooltip", "click"], ["columnManagerTarget", ""], [1, "po-table-group-row"], [1, "po-table-row"], [1, "po-table-no-data", "po-text-center", 3, "colSpan"], ["class", "po-table-group-row", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-table-column po-table-column-selectable", 4, "ngIf"], ["class", "po-table-column-detail-toggle", 3, "click", 4, "ngIf"], [3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-table-column", 4, "ngIf"], [1, "po-table-column", "po-table-column-selectable"], [1, "po-table-column-detail-toggle", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "ngClass", "click"], [1, "po-table-column-cell", "notranslate", 3, "ngSwitch", "p-tooltip", "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-column"], [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"], ["class", "po-icon po-clickable", 3, "po-icon-arrow-up", "po-icon-arrow-down", 4, "ngIf"], [1, "po-icon", "po-clickable"], ["type", "radio", 1, "po-table-radio"], [1, "po-table-radio-label", "po-clickable", 3, "click"], [1, "po-table-header-ellipsis", 3, "p-tooltip", "mouseenter", "mouseleave"], ["columnHeader", ""], [3, "po-table-header-icon-unselected", "po-table-header-icon-descending", "po-table-header-icon-ascending", 4, "ngIf"], [1, "po-table-header-fixed-inner"], ["class", "po-table-column po-table-column-single-action", 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-icon", "po-icon-more", "po-clickable", 3, "click"], ["popupTarget", ""], [3, "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-visible-columns-change", "p-change-visible-columns"]], template: function PoTableComponent_Template(rf, ctx) {
+    }, features: [i0.ɵɵProvidersFeature([PoDateService]), i0.ɵɵInheritDefinitionFeature], decls: 27, vars: 6, consts: [["p-no-padding", "", 3, "p-no-shadow", 4, "ngIf", "ngIfElse"], ["tableContainerTemplate", ""], ["class", "po-row po-table-footer-show-more", 3, "po-invisible", 4, "ngIf"], ["tableHeaderTemplate", ""], ["tableBodyTemplate", ""], ["tableTemplate", ""], [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-columns-default", "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns", 4, "ngIf"], ["p-no-padding", "", 3, "p-no-shadow"], [4, "ngTemplateOutlet"], ["class", "po-table-overlay", 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"], [1, "po-table-overlay"], [1, "po-table-overlay-content", 3, "p-text"], [1, "po-table-container"], [1, "po-table-header-fixed", "po-table-header"], ["poTableThead", ""], [1, "po-table-container-fixed-inner", 3, "scroll"], ["poTableTbody", ""], [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"], ["class", "po-table-column-selectable", 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"], ["class", "po-table-header-ellipsis", 3, "width", "max-width", "min-width", "po-clickable", "po-table-header-subtitle", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "po-table-header-single-action", "po-table-header-actions", 4, "ngIf"], [3, "po-table-header-column-manager", "po-table-header-column-manager-border", "po-table-header-single-action", 4, "ngIf"], [1, "po-table-column-selectable"], ["type", "checkbox", "class", "po-table-checkbox", 3, "po-table-checkbox-checked", "po-table-checkbox-indeterminate", 4, "ngIf"], ["class", "po-table-checkbox-label po-clickable", 3, "click", 4, "ngIf"], ["type", "checkbox", 1, "po-table-checkbox"], [1, "po-table-checkbox-label", "po-clickable", 3, "click"], [1, "po-table-header-column", "po-table-header-master-detail"], [1, "po-table-header-column", "po-text-center"], ["noColumnsHeader", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], [1, "po-table-header-ellipsis", 3, "click"], ["headersTable", ""], [1, "po-table-header-flex"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["columnManager", ""], ["p-tooltip-position", "left", 1, "po-table-header-column-manager-button", "po-icon", "po-icon-settings", "po-clickable", 3, "p-tooltip", "click"], ["columnManagerTarget", ""], ["class", "po-table-group-row", 4, "ngIf"], [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-detail-toggle", 3, "click", 4, "ngIf"], [3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-table-column", 4, "ngIf"], [1, "po-table-column-detail-toggle", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "ngClass", "click"], [1, "po-table-column-cell", "notranslate", 3, "ngSwitch", "p-tooltip", "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-column", "po-table-column-empty"], [1, "po-table-column"], [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"], [1, "po-table-row-no-data", "po-table-column-empty"], ["class", "po-icon po-clickable", 3, "po-icon-arrow-up", "po-icon-arrow-down", 4, "ngIf"], [1, "po-icon", "po-clickable"], ["type", "radio", 1, "po-table-radio"], [1, "po-table-radio-label", "po-clickable", 3, "click"], [1, "po-table-header-ellipsis", 3, "p-tooltip", "mouseenter", "mouseleave"], ["columnHeader", ""], [3, "po-table-header-icon-unselected", "po-table-header-icon-descending", "po-table-header-icon-ascending", 4, "ngIf"], [1, "po-table-header-fixed-inner"], ["class", "po-table-column po-table-column-single-action", 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-icon", "po-icon-more", "po-clickable", 3, "click"], ["popupTarget", ""], [3, "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-columns-default", "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns"]], template: function PoTableComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵtemplate(0, PoTableComponent_po_container_0_Template, 2, 2, "po-container", 0);
             i0.ɵɵtemplate(1, PoTableComponent_ng_template_1_Template, 8, 10, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵtemplate(3, PoTableComponent_div_3_Template, 3, 5, "div", 2);
-            i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_Template, 13, 17, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelement(6, "po-popup", 4, 5);
-            i0.ɵɵtemplate(8, PoTableComponent_ng_template_8_Template, 1, 1, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(10, PoTableComponent_ng_template_10_Template, 2, 2, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(12, PoTableComponent_ng_template_12_Template, 2, 2, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(14, PoTableComponent_ng_template_14_Template, 5, 5, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(16, PoTableComponent_ng_template_16_Template, 2, 3, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(18, PoTableComponent_ng_template_18_Template, 1, 1, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(20, PoTableComponent_ng_template_20_Template, 2, 2, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(22, PoTableComponent_po_table_column_manager_22_Template, 1, 4, "po-table-column-manager", 13);
+            i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_Template, 11, 15, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(6, PoTableComponent_ng_template_6_Template, 3, 6, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(8, PoTableComponent_ng_template_8_Template, 13, 17, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelement(10, "po-popup", 6, 7);
+            i0.ɵɵtemplate(12, PoTableComponent_ng_template_12_Template, 1, 1, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(14, PoTableComponent_ng_template_14_Template, 2, 2, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(16, PoTableComponent_ng_template_16_Template, 2, 2, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(18, PoTableComponent_ng_template_18_Template, 5, 5, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(20, PoTableComponent_ng_template_20_Template, 2, 3, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(22, PoTableComponent_ng_template_22_Template, 1, 1, "ng-template", null, 13, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(24, PoTableComponent_ng_template_24_Template, 2, 2, "ng-template", null, 14, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(26, PoTableComponent_po_table_column_manager_26_Template, 1, 5, "po-table-column-manager", 15);
         }
         if (rf & 2) {
             const _r1 = i0.ɵɵreference(2);
             i0.ɵɵproperty("ngIf", ctx.container)("ngIfElse", _r1);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", !ctx.infiniteScroll);
-            i0.ɵɵadvance(3);
+            i0.ɵɵadvance(7);
             i0.ɵɵproperty("p-actions", ctx.actions)("p-target", ctx.popupTarget);
             i0.ɵɵadvance(16);
             i0.ɵɵproperty("ngIf", !ctx.hideColumnsManager);
@@ -17957,7 +18687,7 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableComponent, [{
             type: Component,
-            args: [{ selector: 'po-table', providers: [PoDateService], template: "<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding [p-no-shadow]=\"container === 'border'\">\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-relative]=\"loading\">\n    <div *ngIf=\"loading\" class=\"po-table-overlay\">\n      <po-loading class=\"po-table-overlay-content\" [p-text]=\"literals.loadingData\"></po-loading>\n    </div>\n\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 class=\"po-table-header-fixed po-table-header\"></div>\n          <div #poTableTbody class=\"po-table-container-fixed-inner\">\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\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<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<ng-template #tableTemplate>\n  <table class=\"po-table\" [class.po-table-striped]=\"striped\" [class.po-table-layout-fixed]=\"hideTextOverflow\">\n    <thead>\n      <tr [class.po-table-header]=\"!height\">\n        <th *ngIf=\"hasSelectableColumn\" class=\"po-table-column-selectable\">\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <input\n              *ngIf=\"!hideSelectAll\"\n              type=\"checkbox\"\n              class=\"po-table-checkbox\"\n              [class.po-table-checkbox-checked]=\"selectAll\"\n              [class.po-table-checkbox-indeterminate]=\"selectAll === null\"\n            />\n            <label *ngIf=\"!hideSelectAll\" class=\"po-table-checkbox-label po-clickable\" (click)=\"selectAllRows()\">\n            </label>\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          *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        <th\n          *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n          #headersTable\n          class=\"po-table-header-ellipsis\"\n          [style.width]=\"column.width\"\n          [style.max-width]=\"column.width\"\n          [style.min-width]=\"column.width\"\n          [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n          [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n          (click)=\"sortColumn(column)\"\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\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 && hideColumnsManager && actionRight\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n\n        <th\n          #columnManager\n          *ngIf=\"hasValidColumns && !hideColumnsManager\"\n          [class.po-table-header-column-manager]=\"!isSingleAction || !actionRight\"\n          [class.po-table-header-column-manager-border]=\"!height && container\"\n          [class.po-table-header-single-action]=\"isSingleAction && actionRight\"\n        >\n          <div\n            [class.po-table-header-column-manager-border]=\"height && container\"\n            [class.po-table-header-column-manager-fixed-inner]=\"height\"\n            [style.width.px]=\"height && visibleActions.length ? columnManager.offsetWidth : undefined\"\n          >\n            <button\n              #columnManagerTarget\n              class=\"po-table-header-column-manager-button po-icon po-icon-settings po-clickable\"\n              p-tooltip-position=\"left\"\n              [p-tooltip]=\"literals.columnsManager\"\n              (click)=\"onOpenColumnManager()\"\n            ></button>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row\">\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 items; 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 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            (click)=\"selectable ? selectRow(row) : 'javascript:;'\"\n          >\n            <div\n              class=\"po-table-column-cell notranslate\"\n              [class.po-table-body-ellipsis]=\"hideTextOverflow\"\n              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\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\n          <!-- Coluna para n\u00E3o ficar em branco nas linhas de gerenciamento -->\n          <ng-container *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction) && !hideColumnsManager\">\n            <td class=\"po-table-column\"></td>\n          </ng-container>\n\n          <!-- Column Manager -->\n          <td\n            *ngIf=\"!hasVisibleActions && !hideColumnsManager && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column\"\n          ></td>\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<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    class=\"po-icon po-clickable\"\n    [class.po-icon-arrow-up]=\"row.$showDetail\"\n    [class.po-icon-arrow-down]=\"!row.$showDetail\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <input type=\"radio\" class=\"po-table-radio\" [class.po-table-radio-checked]=\"row.$selected\" />\n  <label class=\"po-table-radio-label po-clickable\" (click)=\"selectable ? selectRow(row) : 'javascript:;'\"></label>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <input type=\"checkbox\" class=\"po-table-checkbox\" [class.po-table-checkbox-checked]=\"row.$selected\" />\n  <label class=\"po-table-checkbox-label po-clickable\" (click)=\"selectable ? selectRow(row) : 'javascript:;'\"></label>\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    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n  <span\n    *ngIf=\"sort && column.sortable !== false\"\n    [class.po-table-header-icon-unselected]=\"sortedColumn?.property !== column\"\n    [class.po-table-header-icon-descending]=\"sortedColumn?.property === column && sortedColumn.ascending\"\n    [class.po-table-header-icon-ascending]=\"sortedColumn?.property === column && !sortedColumn.ascending\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"noColumnsHeader?.nativeElement.offsetWidth\">\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 *ngIf=\"isSingleAction\" class=\"po-table-column po-table-column-single-action\">\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    <span #popupTarget class=\"po-icon po-icon-more po-clickable\" (click)=\"togglePopup(row, popupTarget)\"></span>\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-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n>\n</po-table-column-manager>\n" }]
+            args: [{ selector: 'po-table', providers: [PoDateService], template: "<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding [p-no-shadow]=\"container === 'border'\">\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-relative]=\"loading\">\n    <div *ngIf=\"loading\" class=\"po-table-overlay\">\n      <po-loading class=\"po-table-overlay-content\" [p-text]=\"literals.loadingData\"></po-loading>\n    </div>\n\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 #poTableThead class=\"po-table-header-fixed po-table-header\">\n            <ng-container *ngTemplateOutlet=\"tableHeaderTemplate\"></ng-container>\n          </div>\n          <div #poTableTbody class=\"po-table-container-fixed-inner\" (scroll)=\"syncronizeHorizontalScroll()\">\n            <ng-container *ngTemplateOutlet=\"tableBodyTemplate\"></ng-container>\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<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<ng-template #tableHeaderTemplate>\n  <table class=\"po-table\" [class.po-table-striped]=\"striped\" [class.po-table-layout-fixed]=\"hideTextOverflow\">\n    <thead>\n      <tr [class.po-table-header]=\"!height\">\n        <th *ngIf=\"hasSelectableColumn\" class=\"po-table-column-selectable\">\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <input\n              *ngIf=\"!hideSelectAll\"\n              type=\"checkbox\"\n              class=\"po-table-checkbox\"\n              [class.po-table-checkbox-checked]=\"selectAll\"\n              [class.po-table-checkbox-indeterminate]=\"selectAll === null\"\n            />\n            <label *ngIf=\"!hideSelectAll\" class=\"po-table-checkbox-label po-clickable\" (click)=\"selectAllRows()\">\n            </label>\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          *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        <th\n          *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n          #headersTable\n          class=\"po-table-header-ellipsis\"\n          [style.width]=\"column.width\"\n          [style.max-width]=\"column.width\"\n          [style.min-width]=\"column.width\"\n          [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n          [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n          (click)=\"sortColumn(column)\"\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\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 && hideColumnsManager && actionRight\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n\n        <th\n          #columnManager\n          *ngIf=\"hasValidColumns && !hideColumnsManager\"\n          [class.po-table-header-column-manager]=\"!isSingleAction || !actionRight\"\n          [class.po-table-header-column-manager-border]=\"!height && container\"\n          [class.po-table-header-single-action]=\"isSingleAction && actionRight\"\n        >\n          <div\n            [class.po-table-header-column-manager-border]=\"height && container\"\n            [class.po-table-header-column-manager-fixed-inner]=\"height\"\n            [style.width.px]=\"height && visibleActions.length ? columnManager.offsetWidth : undefined\"\n          >\n            <button\n              #columnManagerTarget\n              class=\"po-table-header-column-manager-button po-icon po-icon-settings po-clickable\"\n              p-tooltip-position=\"left\"\n              [p-tooltip]=\"literals.columnsManager\"\n              (click)=\"onOpenColumnManager()\"\n            ></button>\n          </div>\n        </th>\n      </tr>\n    </thead>\n  </table>\n</ng-template>\n\n<ng-template #tableBodyTemplate>\n  <table class=\"po-table\" [class.po-table-striped]=\"striped\" [class.po-table-layout-fixed]=\"hideTextOverflow\">\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 items; 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            [ngClass]=\"getClassColor(row, column)\"\n            (click)=\"selectable ? selectRow(row) : 'javascript:;'\"\n          >\n            <div\n              class=\"po-table-column-cell notranslate\"\n              [class.po-table-body-ellipsis]=\"hideTextOverflow\"\n              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              [style.width.px]=\"noColumnsHeader?.nativeElement.parentElement?.offsetWidth\"\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\n          <!-- Coluna para n\u00E3o ficar em branco nas linhas de gerenciamento -->\n          <ng-container *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction) && !hideColumnsManager\">\n            <td class=\"po-table-column po-table-column-empty\"></td>\n          </ng-container>\n\n          <!-- Column Manager -->\n          <td\n            *ngIf=\"!hasVisibleActions && !hideColumnsManager && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column\"\n          ></td>\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<ng-template #tableTemplate>\n  <table class=\"po-table\" [class.po-table-striped]=\"striped\" [class.po-table-layout-fixed]=\"hideTextOverflow\">\n    <thead>\n      <tr [class.po-table-header]=\"!height\">\n        <th *ngIf=\"hasSelectableColumn\" class=\"po-table-column-selectable\">\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <input\n              *ngIf=\"!hideSelectAll\"\n              type=\"checkbox\"\n              class=\"po-table-checkbox\"\n              [class.po-table-checkbox-checked]=\"selectAll\"\n              [class.po-table-checkbox-indeterminate]=\"selectAll === null\"\n            />\n            <label *ngIf=\"!hideSelectAll\" class=\"po-table-checkbox-label po-clickable\" (click)=\"selectAllRows()\">\n            </label>\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          *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        <th\n          *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n          #headersTable\n          class=\"po-table-header-ellipsis\"\n          [style.width]=\"column.width\"\n          [style.max-width]=\"column.width\"\n          [style.min-width]=\"column.width\"\n          [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n          [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n          (click)=\"sortColumn(column)\"\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\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 && hideColumnsManager && actionRight\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n\n        <th\n          #columnManager\n          *ngIf=\"hasValidColumns && !hideColumnsManager\"\n          [class.po-table-header-column-manager]=\"!isSingleAction || !actionRight\"\n          [class.po-table-header-column-manager-border]=\"!height && container\"\n          [class.po-table-header-single-action]=\"isSingleAction && actionRight\"\n        >\n          <div\n            [class.po-table-header-column-manager-border]=\"height && container\"\n            [class.po-table-header-column-manager-fixed-inner]=\"height\"\n            [style.width.px]=\"height && visibleActions.length ? columnManager.offsetWidth : undefined\"\n          >\n            <button\n              #columnManagerTarget\n              class=\"po-table-header-column-manager-button po-icon po-icon-settings po-clickable\"\n              p-tooltip-position=\"left\"\n              [p-tooltip]=\"literals.columnsManager\"\n              (click)=\"onOpenColumnManager()\"\n            ></button>\n          </div>\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 items; 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            [ngClass]=\"getClassColor(row, column)\"\n            (click)=\"selectable ? selectRow(row) : 'javascript:;'\"\n          >\n            <div\n              class=\"po-table-column-cell notranslate\"\n              [class.po-table-body-ellipsis]=\"hideTextOverflow\"\n              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\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\n          <!-- Coluna para n\u00E3o ficar em branco nas linhas de gerenciamento -->\n          <ng-container *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction) && !hideColumnsManager\">\n            <td class=\"po-table-row-no-data po-table-column-empty\"></td>\n          </ng-container>\n\n          <!-- Column Manager -->\n          <td\n            *ngIf=\"!hasVisibleActions && !hideColumnsManager && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column\"\n          ></td>\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<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    class=\"po-icon po-clickable\"\n    [class.po-icon-arrow-up]=\"row.$showDetail\"\n    [class.po-icon-arrow-down]=\"!row.$showDetail\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <input type=\"radio\" class=\"po-table-radio\" [class.po-table-radio-checked]=\"row.$selected\" />\n  <label class=\"po-table-radio-label po-clickable\" (click)=\"selectable ? selectRow(row) : 'javascript:;'\"></label>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <input type=\"checkbox\" class=\"po-table-checkbox\" [class.po-table-checkbox-checked]=\"row.$selected\" />\n  <label class=\"po-table-checkbox-label po-clickable\" (click)=\"selectable ? selectRow(row) : 'javascript:;'\"></label>\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    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n  <span\n    *ngIf=\"sort && column.sortable !== false\"\n    [class.po-table-header-icon-unselected]=\"sortedColumn?.property !== column\"\n    [class.po-table-header-icon-descending]=\"sortedColumn?.property === column && sortedColumn.ascending\"\n    [class.po-table-header-icon-ascending]=\"sortedColumn?.property === column && !sortedColumn.ascending\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"noColumnsHeader?.nativeElement.offsetWidth\">\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 *ngIf=\"isSingleAction\" class=\"po-table-column po-table-column-single-action\">\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    <span #popupTarget class=\"po-icon po-icon-more po-clickable\" (click)=\"togglePopup(row, popupTarget)\"></span>\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-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" }]
         }], function () { return [{ type: PoDateService }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: i1.DecimalPipe }, { type: i2.Router }, { type: PoTableService }]; }, { tableRowTemplate: [{
                 type: ContentChild,
                 args: [PoTableRowTemplateDirective, { static: true }]
@@ -17982,6 +18712,9 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
             }], poTableTbody: [{
                 type: ViewChild,
                 args: ['poTableTbody', { read: ElementRef, static: false }]
+            }], poTableThead: [{
+                type: ViewChild,
+                args: ['poTableThead', { read: ElementRef, static: false }]
             }], actionsIconElement: [{
                 type: ViewChildren,
                 args: ['actionsIconElement', { read: ElementRef }]
@@ -18132,10 +18865,18 @@ var PoKeyCodeEnum;
  * O componente `po-checkbox` exibe uma caixa de opção com um texto ao lado, na qual é possível marcar e desmarcar através tanto
  * no *click* do *mouse* quanto por meio da tecla *space* quando estiver com foco.
  *
- * Cada opção poderá receber um estado de marcado, desmarcado, indeterminado e desabilitado, como também uma ação que será disparada quando
+ * Cada opção poderá receber um estado de marcado, desmarcado, indeterminado/mixed e desabilitado, como também uma ação que será disparada quando
  * ocorrer mudanças do valor.
  *
- * > O *model* deste componente aceitará valores igual à `true`, `false` ou `null` para quando for indeterminado.
+ * > O *model* deste componente aceitará valores igual à `true`, `false` ou `null` para quando for indeterminado/mixed.
+ *
+ * **Acessibilidade tratada no componente:**
+ *
+ * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
+ *
+ * - O componente foi desenvolvido utilizando controles padrões HTML para permitir a identificação do mesmo na interface por tecnologias assistivas. [WCAG 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+ * - A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
+ * - A cor não deve ser o único meio para diferenciar o componente do seu estado marcado e desmarcado. [WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)
  */
 class PoCheckboxBaseComponent {
     constructor() {
@@ -18185,7 +18926,7 @@ class PoCheckboxBaseComponent {
     }
     checkOption(value) {
         if (!this.disabled) {
-            this.changeModelValue(!value);
+            value === 'mixed' ? this.changeModelValue(true) : this.changeModelValue(!value);
             this.changeValue();
         }
     }
@@ -18298,7 +19039,12 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
         }
     }
     changeModelValue(value) {
-        this.checkboxValue = typeof value === 'boolean' || value === null ? value : false;
+        if (value === null) {
+            this.checkboxValue = 'mixed';
+        }
+        else {
+            this.checkboxValue = typeof value === 'boolean' || value === null ? value : false;
+        }
         this.changeDetector.detectChanges();
     }
 }
@@ -18317,22 +19063,22 @@ PoCheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheck
                 useExisting: forwardRef(() => PoCheckboxComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 13, consts: [[1, "po-checkbox"], ["type", "checkbox", 1, "po-input", "po-checkbox-input", 3, "checked", "disabled", "id", "value"], [1, "po-checkbox-label", 3, "for", "tabindex", "blur", "click", "keydown"], ["checkboxLabel", ""]], template: function PoCheckboxComponent_Template(rf, ctx) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 8, consts: [[1, "container-po-checkbox", 3, "click", "keydown"], ["role", "checkbox", 1, "po-checkbox", 3, "id", "tabindex"], ["tabindex", "-1", 1, "po-checkbox-label", 3, "for"], ["checkboxLabel", ""]], template: function PoCheckboxComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelement(1, "input", 1);
+            i0.ɵɵlistener("click", function PoCheckboxComponent_Template_div_click_0_listener() { return ctx.checkOption(ctx.checkboxValue); })("keydown", function PoCheckboxComponent_Template_div_keydown_0_listener($event) { return ctx.onKeyDown($event, ctx.checkboxValue); });
+            i0.ɵɵelement(1, "span", 1);
             i0.ɵɵelementStart(2, "label", 2, 3);
-            i0.ɵɵlistener("blur", function PoCheckboxComponent_Template_label_blur_2_listener() { return ctx.onBlur(); })("click", function PoCheckboxComponent_Template_label_click_2_listener() { return ctx.checkOption(ctx.checkboxValue); })("keydown", function PoCheckboxComponent_Template_label_keydown_2_listener($event) { return ctx.onKeyDown($event, ctx.checkboxValue); });
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd()();
         }
         if (rf & 2) {
+            i0.ɵɵattribute("checked", ctx.checkboxValue);
             i0.ɵɵadvance(1);
-            i0.ɵɵclassProp("po-checkbox-input-checked", ctx.checkboxValue)("po-checkbox-input-indeterminate", ctx.checkboxValue === null);
-            i0.ɵɵproperty("checked", ctx.checkboxValue)("disabled", ctx.disabled)("id", ctx.id)("value", ctx.checkboxValue);
+            i0.ɵɵproperty("id", ctx.id)("tabindex", ctx.disabled ? -1 : 0);
+            i0.ɵɵattribute("aria-checked", ctx.checkboxValue)("aria-label", ctx.label)("aria-disabled", ctx.disabled);
             i0.ɵɵadvance(1);
-            i0.ɵɵclassProp("po-clickable", !ctx.disabled);
-            i0.ɵɵproperty("for", ctx.id)("tabindex", ctx.disabled ? -1 : 0);
+            i0.ɵɵproperty("for", ctx.id);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
         }
@@ -18346,7 +19092,7 @@ PoCheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheck
                             useExisting: forwardRef(() => PoCheckboxComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"po-checkbox\">\n  <input\n    class=\"po-input po-checkbox-input\"\n    type=\"checkbox\"\n    [class.po-checkbox-input-checked]=\"checkboxValue\"\n    [class.po-checkbox-input-indeterminate]=\"checkboxValue === null\"\n    [checked]=\"checkboxValue\"\n    [disabled]=\"disabled\"\n    [id]=\"id\"\n    [value]=\"checkboxValue\"\n  />\n\n  <label\n    #checkboxLabel\n    class=\"po-checkbox-label\"\n    [class.po-clickable]=\"!disabled\"\n    [for]=\"id\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    (blur)=\"onBlur()\"\n    (click)=\"checkOption(checkboxValue)\"\n    (keydown)=\"onKeyDown($event, checkboxValue)\"\n  >\n    {{ label }}\n  </label>\n</div>\n" }]
+                    ], template: "<div\n  class=\"container-po-checkbox\"\n  [attr.checked]=\"checkboxValue\"\n  (click)=\"checkOption(checkboxValue)\"\n  (keydown)=\"onKeyDown($event, checkboxValue)\"\n>\n  <span\n    [attr.aria-checked]=\"checkboxValue\"\n    [attr.aria-label]=\"label\"\n    [id]=\"id\"\n    class=\"po-checkbox\"\n    role=\"checkbox\"\n    [attr.aria-disabled]=\"disabled\"\n    [tabindex]=\"disabled ? -1 : 0\"\n  >\n  </span>\n\n  <label #checkboxLabel [for]=\"id\" class=\"po-checkbox-label\" tabindex=\"-1\">\n    {{ label }}\n  </label>\n</div>\n" }]
         }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { checkboxLabel: [{
                 type: ViewChild,
                 args: ['checkboxLabel', { static: true }]
@@ -18470,6 +19216,9 @@ class PoComboBaseComponent {
         this.isFiltering = false;
         this.previousSearchValue = '';
         this.visibleOptions = [];
+        this.page = 1;
+        this.pageSize = 10;
+        this.loading = false;
         this.cacheStaticOptions = [];
         this.comboOptionsList = [];
         this.onModelTouched = null;
@@ -18485,11 +19234,44 @@ class PoComboBaseComponent {
         this._placeholder = '';
         this._required = false;
         this._sort = false;
+        this._infiniteScrollDistance = 100;
+        this._infiniteScroll = false;
         // utilizado para fazer o controle de atualizar o model.
         // não deve forçar a atualização se o gatilho for o writeValue para não deixar o campo dirty.
         this.fromWriteValue = false;
         this.language = languageService.getShortLanguage();
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Se verdadeiro ativa a funcionalidade de scroll infinito para o combo, Ao chegar ao fim da tabela executará nova busca dos dados conforme paginação.
+     *
+     * @default `false`
+     */
+    set infiniteScroll(value) {
+        this._infiniteScroll = convertToBoolean(value);
+    }
+    get infiniteScroll() {
+        return this._infiniteScroll;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o percentual necessário para disparar o evento `show-more`, que é responsável por carregar mais dados no combo. Caso o valor seja maior que 100 ou menor que 0, o valor padrão será 100%.
+     *
+     * **Exemplos**
+     * - p-infinite-scroll-distance = 80: Quando atingir 80% do scroll do combo, o `show-more` será disparado.
+     */
+    set infiniteScrollDistance(value) {
+        this._infiniteScrollDistance = value > 100 || value < 0 ? 100 : value;
+    }
+    get infiniteScrollDistance() {
+        return this._infiniteScrollDistance;
+    }
     /** Mensagem apresentada enquanto o campo estiver vazio. */
     set placeholder(value) {
         this._placeholder = value || '';
@@ -18844,7 +19626,7 @@ class PoComboBaseComponent {
     }
     updateComboList(options) {
         const copyOptions = options || [...this.comboOptionsList];
-        const newOptions = !options && this.selectedValue ? [Object.assign({}, this.selectedOption)] : copyOptions;
+        const newOptions = !options && !this.infiniteScroll && this.selectedValue ? [Object.assign({}, this.selectedOption)] : copyOptions;
         this.visibleOptions = newOptions;
         if (!this.selectedView && this.visibleOptions.length) {
             this.selectedView = copyOptions.find(option => option.value !== undefined);
@@ -19065,7 +19847,7 @@ class PoComboBaseComponent {
     }
 }
 PoComboBaseComponent.ɵfac = function PoComboBaseComponent_Factory(t) { return new (t || PoComboBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
-PoComboBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoComboBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], label: ["p-label", "label"], help: ["p-help", "help"], name: "name", filterService: ["p-filter-service", "filterService"], icon: ["p-icon", "icon"], optional: ["p-optional", "optional"], clean: ["p-clean", "clean"], emitObjectValue: ["p-emit-object-value", "emitObjectValue"], disabledTabFilter: ["p-disabled-tab-filter", "disabledTabFilter"], placeholder: ["p-placeholder", "placeholder"], debounceTime: ["p-debounce-time", "debounceTime"], disabledInitFilter: ["p-disabled-init-filter", "disabledInitFilter"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], filterMinlength: ["p-filter-minlength", "filterMinlength"], required: ["p-required", "required"], changeOnEnter: ["p-change-on-enter", "changeOnEnter"], disabled: ["p-disabled", "disabled"], sort: ["p-sort", "sort"], options: ["p-options", "options"], filterMode: ["p-filter-mode", "filterMode"], filterParams: ["p-filter-params", "filterParams"], literals: ["p-literals", "literals"] }, outputs: { change: "p-change", ngModelChange: "ngModelChange" } });
+PoComboBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoComboBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], label: ["p-label", "label"], help: ["p-help", "help"], name: "name", filterService: ["p-filter-service", "filterService"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], icon: ["p-icon", "icon"], optional: ["p-optional", "optional"], clean: ["p-clean", "clean"], emitObjectValue: ["p-emit-object-value", "emitObjectValue"], disabledTabFilter: ["p-disabled-tab-filter", "disabledTabFilter"], placeholder: ["p-placeholder", "placeholder"], debounceTime: ["p-debounce-time", "debounceTime"], disabledInitFilter: ["p-disabled-init-filter", "disabledInitFilter"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], filterMinlength: ["p-filter-minlength", "filterMinlength"], required: ["p-required", "required"], changeOnEnter: ["p-change-on-enter", "changeOnEnter"], disabled: ["p-disabled", "disabled"], sort: ["p-sort", "sort"], options: ["p-options", "options"], filterMode: ["p-filter-mode", "filterMode"], filterParams: ["p-filter-params", "filterParams"], literals: ["p-literals", "literals"] }, outputs: { change: "p-change", ngModelChange: "ngModelChange" } });
 __decorate([
     InputBoolean()
 ], PoComboBaseComponent.prototype, "autoFocus", void 0);
@@ -19096,6 +19878,12 @@ __decorate([
             }], filterService: [{
                 type: Input,
                 args: ['p-filter-service']
+            }], infiniteScroll: [{
+                type: Input,
+                args: ['p-infinite-scroll']
+            }], infiniteScrollDistance: [{
+                type: Input,
+                args: ['p-infinite-scroll-distance']
             }], icon: [{
                 type: Input,
                 args: ['p-icon']
@@ -19174,6 +19962,7 @@ class PoComboFilterService {
         this.http = http;
         this.fieldLabel = 'label';
         this.fieldValue = 'value';
+        this.hasNext = true;
         this.headers = new HttpHeaders({
             'X-PO-No-Message': 'true'
         });
@@ -19183,12 +19972,8 @@ class PoComboFilterService {
         return this._url;
     }
     getFilteredData(param, filterParams) {
-        const value = param.value;
-        const filterParamsValidated = validateObjectType(filterParams);
-        const params = Object.assign(Object.assign({}, filterParamsValidated), { filter: value });
-        return this.http
-            .get(`${this.url}`, { responseType: 'json', params, headers: this.headers })
-            .pipe(map((response) => this.parseToArrayComboOption(response.items)));
+        const params = this.prepareParams(param, filterParams);
+        return this.http.get(`${this.url}`, { responseType: 'json', params, headers: this.headers }).pipe(tap(res => (this.hasNext = res['hasNext'])), map((response) => this.parseToArrayComboOption(response.items)));
     }
     getObjectByValue(value, filterParams) {
         const filterParamsValidated = validateObjectType(filterParams);
@@ -19201,6 +19986,15 @@ class PoComboFilterService {
         this.fieldLabel = fieldLabel;
         this.fieldValue = fieldValue;
     }
+    scrollListener(componentListner) {
+        return fromEvent(componentListner, 'scroll').pipe(debounceTime(100));
+    }
+    prepareParams(param, filterParams) {
+        const { page, pageSize, value } = param;
+        const filterParamsValidated = validateObjectType(filterParams);
+        return page
+            ? Object.assign(Object.assign({}, filterParamsValidated), { page, pageSize, filter: value }) : Object.assign(Object.assign({}, filterParamsValidated), { filter: value });
+    }
     parseToArrayComboOption(items) {
         if (items && items.length > 0) {
             const parsedOptions = items.map(item => this.parseToComboOption(item));
@@ -19323,10 +20117,11 @@ const _c0$U = ["containerElement"];
 const _c1$o = ["contentElement"];
 const _c2$9 = ["iconArrow"];
 const _c3$5 = ["inp"];
+const _c4$3 = ["poComboBody"];
 function PoComboComponent_div_2_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 16);
-        i0.ɵɵelement(1, "po-icon", 17);
+        i0.ɵɵelementStart(0, "div", 17);
+        i0.ɵɵelement(1, "po-icon", 18);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -19338,9 +20133,9 @@ function PoComboComponent_div_2_Template(rf, ctx) {
 }
 function PoComboComponent_po_clean_6_Template(rf, ctx) {
     if (rf & 1) {
-        const _r15 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "po-clean", 18);
-        i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_6_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(); return ctx_r14.clear($event); });
+        const _r16 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "po-clean", 19);
+        i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_6_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(); return ctx_r15.clear($event); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -19353,157 +20148,175 @@ function PoComboComponent_ng_container_11_Template(rf, ctx) {
         i0.ɵɵelementContainer(0);
     }
 }
-function PoComboComponent_ng_template_13_Template(rf, ctx) {
+function PoComboComponent_div_12_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 19);
-        i0.ɵɵelement(1, "po-loading");
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementContainer(0);
     }
 }
-function PoComboComponent_ng_template_15_ng_container_0_Template(rf, ctx) {
+function PoComboComponent_div_12_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementContainer(0);
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵtemplate(1, PoComboComponent_div_12_ng_container_1_Template, 1, 0, "ng-container", 11);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r6 = i0.ɵɵnextContext();
+        const _r9 = i0.ɵɵreference(17);
+        const _r7 = i0.ɵɵreference(15);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r6.infiniteLoading)("ngIfThen", _r9)("ngIfElse", _r7);
     }
 }
-function PoComboComponent_ng_template_15_Template(rf, ctx) {
+function PoComboComponent_ng_template_14_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, PoComboComponent_ng_template_15_ng_container_0_Template, 1, 0, "ng-container", 11);
+        i0.ɵɵelement(0, "po-loading", 20);
     }
-    if (rf & 2) {
-        const ctx_r9 = i0.ɵɵnextContext();
-        const _r10 = i0.ɵɵreference(18);
-        const _r12 = i0.ɵɵreference(20);
-        i0.ɵɵproperty("ngIf", ctx_r9.visibleOptions.length)("ngIfThen", _r10)("ngIfElse", _r12);
+}
+function PoComboComponent_ng_template_16_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "po-loading-overlay", 20);
     }
 }
-function PoComboComponent_ng_template_17_li_2_ng_container_1_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0);
     }
 }
-function PoComboComponent_ng_template_17_li_2_ng_template_2_label_0_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_ng_template_2_label_0_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "label", 27);
+        i0.ɵɵelementStart(0, "label", 28);
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const option_r19 = i0.ɵɵnextContext(2).$implicit;
+        const option_r21 = i0.ɵɵnextContext(2).$implicit;
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(option_r19.label);
+        i0.ɵɵtextInterpolate(option_r21.label);
     }
 }
-function PoComboComponent_ng_template_17_li_2_ng_template_2_ng_template_1_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_ng_template_2_ng_template_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "a", 28);
-        i0.ɵɵelement(1, "span", 29);
+        i0.ɵɵelementStart(0, "a", 29);
+        i0.ɵɵelement(1, "span", 30);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const option_r19 = i0.ɵɵnextContext(2).$implicit;
-        const ctx_r27 = i0.ɵɵnextContext(2);
+        const option_r21 = i0.ɵɵnextContext(2).$implicit;
+        const ctx_r29 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("innerHTML", ctx_r27.getLabelFormatted(option_r19 == null ? null : option_r19.label), i0.ɵɵsanitizeHtml);
+        i0.ɵɵproperty("innerHTML", ctx_r29.getLabelFormatted(option_r21 == null ? null : option_r21.label), i0.ɵɵsanitizeHtml);
     }
 }
-function PoComboComponent_ng_template_17_li_2_ng_template_2_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_ng_template_2_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, PoComboComponent_ng_template_17_li_2_ng_template_2_label_0_Template, 2, 1, "label", 25);
-        i0.ɵɵtemplate(1, PoComboComponent_ng_template_17_li_2_ng_template_2_ng_template_1_Template, 2, 1, "ng-template", null, 26, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(0, PoComboComponent_ng_template_18_li_3_ng_template_2_label_0_Template, 2, 1, "label", 26);
+        i0.ɵɵtemplate(1, PoComboComponent_ng_template_18_li_3_ng_template_2_ng_template_1_Template, 2, 1, "ng-template", null, 27, i0.ɵɵtemplateRefExtractor);
     }
     if (rf & 2) {
-        const _r26 = i0.ɵɵreference(2);
-        const option_r19 = i0.ɵɵnextContext().$implicit;
-        i0.ɵɵproperty("ngIf", option_r19 == null ? null : option_r19.options)("ngIfElse", _r26);
+        const _r28 = i0.ɵɵreference(2);
+        const option_r21 = i0.ɵɵnextContext().$implicit;
+        i0.ɵɵproperty("ngIf", option_r21 == null ? null : option_r21.options)("ngIfElse", _r28);
     }
 }
-function PoComboComponent_ng_template_17_li_2_ng_template_4_ng_container_0_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_container_0_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0);
     }
 }
-function PoComboComponent_ng_template_17_li_2_ng_template_4_ng_template_1_ng_template_0_Template(rf, ctx) { }
-const _c4$3 = function (a0, a1) { return { $implicit: a0, selected: a1 }; };
-function PoComboComponent_ng_template_17_li_2_ng_template_4_ng_template_1_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_1_ng_template_0_Template(rf, ctx) { }
+const _c5$1 = function (a0, a1) { return { $implicit: a0, selected: a1 }; };
+function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, PoComboComponent_ng_template_17_li_2_ng_template_4_ng_template_1_ng_template_0_Template, 0, 0, "ng-template", 32);
+        i0.ɵɵtemplate(0, PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_1_ng_template_0_Template, 0, 0, "ng-template", 33);
     }
     if (rf & 2) {
-        const option_r19 = i0.ɵɵnextContext(2).$implicit;
-        const ctx_r33 = i0.ɵɵnextContext(2);
-        i0.ɵɵproperty("ngTemplateOutlet", ctx_r33.comboOptionTemplate == null ? null : ctx_r33.comboOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c4$3, option_r19, ctx_r33.compareObjects(ctx_r33.selectedView, option_r19)));
+        const option_r21 = i0.ɵɵnextContext(2).$implicit;
+        const ctx_r35 = i0.ɵɵnextContext(2);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r35.comboOptionTemplate == null ? null : ctx_r35.comboOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c5$1, option_r21, ctx_r35.compareObjects(ctx_r35.selectedView, option_r21)));
     }
 }
-function PoComboComponent_ng_template_17_li_2_ng_template_4_ng_template_3_ng_template_1_Template(rf, ctx) { }
-const _c5$1 = function (a0) { return { $implicit: a0 }; };
-function PoComboComponent_ng_template_17_li_2_ng_template_4_ng_template_3_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_3_ng_template_1_Template(rf, ctx) { }
+const _c6$1 = function (a0) { return { $implicit: a0 }; };
+function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_3_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "a", 28);
-        i0.ɵɵtemplate(1, PoComboComponent_ng_template_17_li_2_ng_template_4_ng_template_3_ng_template_1_Template, 0, 0, "ng-template", 32);
+        i0.ɵɵelementStart(0, "a", 29);
+        i0.ɵɵtemplate(1, PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_3_ng_template_1_Template, 0, 0, "ng-template", 33);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const option_r19 = i0.ɵɵnextContext(2).$implicit;
-        const ctx_r35 = i0.ɵɵnextContext(2);
+        const option_r21 = i0.ɵɵnextContext(2).$implicit;
+        const ctx_r37 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", ctx_r35.comboOptionTemplate == null ? null : ctx_r35.comboOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5$1, option_r19));
+        i0.ɵɵproperty("ngTemplateOutlet", ctx_r37.comboOptionTemplate == null ? null : ctx_r37.comboOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6$1, option_r21));
     }
 }
-function PoComboComponent_ng_template_17_li_2_ng_template_4_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_ng_template_4_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, PoComboComponent_ng_template_17_li_2_ng_template_4_ng_container_0_Template, 1, 0, "ng-container", 11);
-        i0.ɵɵtemplate(1, PoComboComponent_ng_template_17_li_2_ng_template_4_ng_template_1_Template, 1, 5, "ng-template", null, 30, i0.ɵɵtemplateRefExtractor);
-        i0.ɵɵtemplate(3, PoComboComponent_ng_template_17_li_2_ng_template_4_ng_template_3_Template, 2, 4, "ng-template", null, 31, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(0, PoComboComponent_ng_template_18_li_3_ng_template_4_ng_container_0_Template, 1, 0, "ng-container", 11);
+        i0.ɵɵtemplate(1, PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_1_Template, 1, 5, "ng-template", null, 31, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(3, PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_3_Template, 2, 4, "ng-template", null, 32, i0.ɵɵtemplateRefExtractor);
     }
     if (rf & 2) {
-        const _r32 = i0.ɵɵreference(2);
-        const _r34 = i0.ɵɵreference(4);
-        const ctx_r24 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("ngIf", ctx_r24.isOptionGroupList)("ngIfThen", _r32)("ngIfElse", _r34);
+        const _r34 = i0.ɵɵreference(2);
+        const _r36 = i0.ɵɵreference(4);
+        const ctx_r26 = i0.ɵɵnextContext(3);
+        i0.ɵɵproperty("ngIf", ctx_r26.isOptionGroupList)("ngIfThen", _r34)("ngIfElse", _r36);
     }
 }
-function PoComboComponent_ng_template_17_li_2_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_li_3_Template(rf, ctx) {
     if (rf & 1) {
-        const _r41 = i0.ɵɵgetCurrentView();
+        const _r43 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "li", 7);
-        i0.ɵɵlistener("click", function PoComboComponent_ng_template_17_li_2_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r41); const option_r19 = restoredCtx.$implicit; const ctx_r40 = i0.ɵɵnextContext(2); return (option_r19 == null ? null : option_r19.options) ? undefined : ctx_r40.onOptionClick(option_r19, $event); });
-        i0.ɵɵtemplate(1, PoComboComponent_ng_template_17_li_2_ng_container_1_Template, 1, 0, "ng-container", 11);
-        i0.ɵɵtemplate(2, PoComboComponent_ng_template_17_li_2_ng_template_2_Template, 3, 2, "ng-template", null, 23, i0.ɵɵtemplateRefExtractor);
-        i0.ɵɵtemplate(4, PoComboComponent_ng_template_17_li_2_ng_template_4_Template, 5, 3, "ng-template", null, 24, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵlistener("click", function PoComboComponent_ng_template_18_li_3_Template_li_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r43); const option_r21 = restoredCtx.$implicit; const ctx_r42 = i0.ɵɵnextContext(2); return (option_r21 == null ? null : option_r21.options) ? undefined : ctx_r42.onOptionClick(option_r21, $event); });
+        i0.ɵɵtemplate(1, PoComboComponent_ng_template_18_li_3_ng_container_1_Template, 1, 0, "ng-container", 11);
+        i0.ɵɵtemplate(2, PoComboComponent_ng_template_18_li_3_ng_template_2_Template, 3, 2, "ng-template", null, 24, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(4, PoComboComponent_ng_template_18_li_3_ng_template_4_Template, 5, 3, "ng-template", null, 25, i0.ɵɵtemplateRefExtractor);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const option_r19 = ctx.$implicit;
-        const _r21 = i0.ɵɵreference(3);
-        const _r23 = i0.ɵɵreference(5);
-        const ctx_r18 = i0.ɵɵnextContext(2);
-        i0.ɵɵclassProp("po-combo-item-selected", ctx_r18.compareObjects(ctx_r18.selectedView, option_r19));
+        const option_r21 = ctx.$implicit;
+        const _r23 = i0.ɵɵreference(3);
+        const _r25 = i0.ɵɵreference(5);
+        const ctx_r20 = i0.ɵɵnextContext(2);
+        i0.ɵɵclassProp("po-combo-item-selected", ctx_r20.compareObjects(ctx_r20.selectedView, option_r21));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r18.comboOptionTemplate)("ngIfThen", _r23)("ngIfElse", _r21);
+        i0.ɵɵproperty("ngIf", ctx_r20.comboOptionTemplate)("ngIfThen", _r25)("ngIfElse", _r23);
     }
 }
-function PoComboComponent_ng_template_17_Template(rf, ctx) {
+function PoComboComponent_ng_template_18_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "ul", 20, 21);
-        i0.ɵɵtemplate(2, PoComboComponent_ng_template_17_li_2_Template, 6, 5, "li", 22);
+        i0.ɵɵelementStart(0, "ul", 21, 22);
+        i0.ɵɵtemplate(3, PoComboComponent_ng_template_18_li_3_Template, 6, 5, "li", 23);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r11 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngForOf", ctx_r11.visibleOptions);
+        const ctx_r12 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngForOf", ctx_r12.visibleOptions);
     }
 }
-function PoComboComponent_ng_template_19_Template(rf, ctx) {
+function PoComboComponent_ng_template_20_span_2_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 33)(1, "div", 34)(2, "span");
-        i0.ɵɵtext(3);
-        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r13 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate1(" ", ctx_r13.literals.noData, " ");
+        const ctx_r44 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r44.literals.noData, " ");
+    }
+}
+function PoComboComponent_ng_template_20_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
+        i0.ɵɵtemplate(2, PoComboComponent_ng_template_20_span_2_Template, 2, 1, "span", 12);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r14 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", !ctx_r14.isServerSearching);
     }
 }
 const poComboContainerOffset = 8;
@@ -19549,6 +20362,11 @@ const poComboContainerPositionDefault = 'bottom';
  *   <file name="sample-po-combo-heroes-reactive-form/sample-po-combo-heroes-reactive-form.component.ts"> </file>
  * </example>
  *
+ * <example name="po-combo-infinity-scroll" title="PO Combo - Inifity Scroll">
+ *   <file name="sample-po-combo-infinity-scroll/sample-po-combo-infinity-scroll.component.html"> </file>
+ *   <file name="sample-po-combo-infinity-scroll/sample-po-combo-infinity-scroll.component.ts"> </file>
+ * </example>
+ *
  * <example name="po-combo-hotels" title="PO Combo - Booking Hotel">
  *   <file name="sample-po-combo-hotels/sample-po-combo-hotels.component.html"> </file>
  *   <file name="sample-po-combo-hotels/sample-po-combo-hotels.component.ts"> </file>
@@ -19569,6 +20387,7 @@ class PoComboComponent extends PoComboBaseComponent {
         this.isProcessingValueByTab = false;
         this.scrollTop = 0;
         this.shouldMarkLetters = true;
+        this.infiniteLoading = false;
         this._isServerSearching = false;
         this.onScroll = () => {
             this.adjustContainerPosition();
@@ -19593,6 +20412,9 @@ class PoComboComponent extends PoComboBaseComponent {
         if (this.autoFocus) {
             this.focus();
         }
+        if (this.infiniteScroll) {
+            this.checkInfiniteScroll();
+        }
     }
     ngOnChanges(changes) {
         if (changes.debounceTime) {
@@ -19604,6 +20426,7 @@ class PoComboComponent extends PoComboBaseComponent {
         }
     }
     ngOnDestroy() {
+        var _a;
         this.removeListeners();
         if (this.filterSubscription) {
             this.filterSubscription.unsubscribe();
@@ -19611,6 +20434,9 @@ class PoComboComponent extends PoComboBaseComponent {
         if (this.getSubscription) {
             this.getSubscription.unsubscribe();
         }
+        if (this.infiniteScroll) {
+            (_a = this.subscriptionScrollEvent) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        }
     }
     /**
      * Função que atribui foco ao componente.
@@ -19739,23 +20565,31 @@ class PoComboComponent extends PoComboBaseComponent {
     }
     controlApplyFilter(value) {
         if (!this.isProcessingValueByTab && (!this.selectedOption || value !== this.selectedOption.label)) {
-            this.applyFilter(value);
+            this.defaultService.hasNext = true;
+            this.page = this.setPage();
+            this.options = [];
+            this.applyFilter(value, true);
         }
         this.isProcessingValueByTab = false;
     }
-    applyFilter(value) {
-        this.controlComboVisibility(false);
-        this.isServerSearching = true;
-        const param = { property: this.fieldLabel, value };
-        this.filterSubscription = this.service.getFilteredData(param, this.filterParams).subscribe(items => this.setOptionsByApplyFilter(value, items), error => this.onErrorFilteredData());
+    applyFilter(value, reset = false) {
+        if (this.defaultService.hasNext) {
+            this.controlComboVisibility(false, reset);
+            this.isServerSearching = true;
+            const param = this.infiniteScroll
+                ? { property: this.fieldLabel, value, page: this.page, pageSize: this.pageSize }
+                : { property: this.fieldLabel, value };
+            this.filterSubscription = this.service.getFilteredData(param, this.filterParams).subscribe(items => this.setOptionsByApplyFilter(value, items, reset), error => this.onErrorFilteredData());
+        }
     }
-    setOptionsByApplyFilter(value, items) {
+    setOptionsByApplyFilter(value, items, reset = false) {
         this.shouldMarkLetters = true;
         this.isServerSearching = false;
-        this.options = items;
+        this.infiniteLoading = false;
+        this.options = this.prepareOptions(items);
         this.searchForLabel(value, items, this.filterMode);
         this.changeDetector.detectChanges();
-        this.controlComboVisibility(true);
+        this.controlComboVisibility(true, reset);
         if (this.isFirstFilter) {
             this.isFirstFilter = !this.isFirstFilter;
             this.cacheOptions = this.comboOptionsList;
@@ -19814,11 +20648,13 @@ class PoComboComponent extends PoComboBaseComponent {
     }
     applyFilterInFirstClick() {
         if (this.isFirstFilter && !this.selectedValue) {
-            this.applyFilter('');
+            this.options = [];
+            const scrollingControl = this.setScrollingControl();
+            this.applyFilter('', scrollingControl);
         }
     }
-    controlComboVisibility(toOpen) {
-        toOpen ? this.open() : this.close();
+    controlComboVisibility(toOpen, reset = false) {
+        toOpen ? this.open(reset) : this.close(reset);
     }
     onOptionClick(option, event) {
         const inputValue = this.getInputValue();
@@ -19836,7 +20672,9 @@ class PoComboComponent extends PoComboBaseComponent {
     scrollTo(index) {
         const selectedItem = this.element.nativeElement.querySelectorAll('.po-combo-item-selected');
         const scrollTop = !selectedItem.length || index <= 1 ? 0 : selectedItem[0].offsetTop - 88;
-        this.setScrollTop(scrollTop);
+        if (!this.infiniteScroll) {
+            this.setScrollTop(scrollTop);
+        }
     }
     getInputValue() {
         return this.inputEl.nativeElement.value;
@@ -19857,7 +20695,8 @@ class PoComboComponent extends PoComboBaseComponent {
         }
         else {
             if (this.service && !this.getInputValue() && !this.isFirstFilter) {
-                this.applyFilter('');
+                const scrollingControl = this.setScrollingControl();
+                this.applyFilter('', scrollingControl);
             }
         }
     }
@@ -19921,11 +20760,48 @@ class PoComboComponent extends PoComboBaseComponent {
             this.controlApplyFilter(value);
         }
     }
+    showMoreInfiniteScroll({ target }) {
+        if (this.defaultService.hasNext) {
+            this.infiniteLoading = true;
+        }
+        const scrollPosition = target.offsetHeight + target.scrollTop;
+        if (scrollPosition >= target.scrollHeight * (this.infiniteScrollDistance / 110)) {
+            this.page++;
+            this.applyFilter('', true);
+        }
+    }
+    checkInfiniteScroll() {
+        var _a;
+        if (this.hasInfiniteScroll() && ((_a = this.poComboBody) === null || _a === void 0 ? void 0 : _a.nativeElement.scrollHeight) >= 175) {
+            this.includeInfiniteScroll();
+        }
+    }
+    hasInfiniteScroll() {
+        var _a;
+        return this.infiniteScroll && ((_a = this.poComboBody) === null || _a === void 0 ? void 0 : _a.nativeElement.scrollHeight) && this.defaultService.hasNext;
+    }
+    includeInfiniteScroll() {
+        var _a;
+        (_a = this.subscriptionScrollEvent) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.scrollEvent$ = this.defaultService.scrollListener(this.poComboBody.nativeElement);
+        this.subscriptionScrollEvent = this.scrollEvent$.subscribe(event => {
+            this.showMoreInfiniteScroll(event);
+        });
+    }
     adjustContainerPosition() {
         this.controlPosition.adjustPosition(poComboContainerPositionDefault);
     }
-    close() {
+    close(reset) {
         this.comboOpen = false;
+        if (!reset) {
+            if (!this.getInputValue()) {
+                this.page = this.setPage();
+                this.defaultService.hasNext = true;
+            }
+            if (this.infiniteScroll) {
+                this.options = this.setOptions();
+            }
+        }
         this.changeDetector.detectChanges();
         this.comboIcon = 'po-icon-arrow-down';
         this.removeListeners();
@@ -19933,6 +20809,9 @@ class PoComboComponent extends PoComboBaseComponent {
     }
     initializeListeners() {
         this.removeListeners();
+        if (this.infiniteScroll) {
+            this.checkInfiniteScroll();
+        }
         this.clickoutListener = this.renderer.listen('document', 'click', (event) => {
             this.wasClickedOnToggle(event);
         });
@@ -19950,22 +20829,35 @@ class PoComboComponent extends PoComboBaseComponent {
         this.updateComboList([]);
         this.controlComboVisibility(true);
     }
-    open() {
+    open(reset) {
         this.comboOpen = true;
+        if (!reset && this.infiniteScroll) {
+            if (!this.getInputValue()) {
+                this.page = 1;
+            }
+            this.options = this.setOptions();
+            this.scrollTo(0);
+        }
         this.changeDetector.detectChanges();
         this.comboIcon = 'po-icon-arrow-up';
         this.initializeListeners();
         this.inputEl.nativeElement.focus();
-        this.scrollTo(this.getIndexSelectedView());
+        if (!this.infiniteScroll) {
+            this.scrollTo(this.getIndexSelectedView());
+        }
         this.setContainerPosition();
     }
     removeListeners() {
+        var _a;
         if (this.clickoutListener) {
             this.clickoutListener();
         }
         if (this.eventResizeListener) {
             this.eventResizeListener();
         }
+        if (this.infiniteScroll && !this.defaultService.hasNext) {
+            (_a = this.subscriptionScrollEvent) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        }
         window.removeEventListener('scroll', this.onScroll, true);
     }
     sanitizeTagHTML(value = '') {
@@ -19975,11 +20867,23 @@ class PoComboComponent extends PoComboBaseComponent {
         this.controlPosition.setElements(this.containerElement.nativeElement, poComboContainerOffset, this.inputEl, ['top', 'bottom'], true);
         this.adjustContainerPosition();
     }
+    setOptions() {
+        return this.getInputValue() ? this.options : [];
+    }
     setScrollTop(scrollTop) {
         if (this.contentElement) {
             this.contentElement.nativeElement.scrollTop = scrollTop;
         }
     }
+    prepareOptions(items) {
+        return this.infiniteScroll ? [...this.options, ...items] : items;
+    }
+    setPage() {
+        return this.infiniteScroll ? 1 : undefined;
+    }
+    setScrollingControl() {
+        return this.infiniteScroll ? true : false;
+    }
 }
 PoComboComponent.ɵfac = function PoComboComponent_Factory(t) { return new (t || PoComboComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(PoComboFilterService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(i3$1.DomSanitizer), i0.ɵɵdirectiveInject(PoLanguageService)); };
 PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboComponent, selectors: [["po-combo"]], contentQueries: function PoComboComponent_ContentQueries(rf, ctx, dirIndex) {
@@ -19996,6 +20900,7 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
             i0.ɵɵviewQuery(_c1$o, 5, ElementRef);
             i0.ɵɵviewQuery(_c2$9, 7, ElementRef);
             i0.ɵɵviewQuery(_c3$5, 7, ElementRef);
+            i0.ɵɵviewQuery(_c4$3, 5, ElementRef);
         }
         if (rf & 2) {
             let _t;
@@ -20003,6 +20908,7 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poComboBody = _t.first);
         }
     }, features: [i0.ɵɵProvidersFeature([
             PoComboFilterService,
@@ -20017,7 +20923,7 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
                 useExisting: forwardRef(() => PoComboComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 21, vars: 23, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["loadingTemplate", ""], ["optionsTemplate", ""], ["visibleOptionsTemplate", ""], ["noDataTemplate", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"], [1, "po-combo-container-loading"], [1, "po-combo-container-content"], ["contentElement", ""], [3, "po-combo-item-selected", "click", 4, "ngFor", "ngForOf"], ["defaultOptionTemplate", ""], ["optionTemplate", ""], ["class", "po-combo-item-title", 4, "ngIf", "ngIfElse"], ["optionLink", ""], [1, "po-combo-item-title"], [1, "po-combo-item"], [3, "innerHTML"], ["optionsGroupTemplate", ""], ["defaultOptionsTemplate", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-combo-container-no-data"], [1, "po-combo-no-data", "po-text-center"]], template: function PoComboComponent_Template(rf, ctx) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 22, vars: 24, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], [4, "ngIf"], ["normalLoadingTemplate", ""], ["infiniteLoadingTemplate", ""], ["visibleOptionsTemplate", ""], ["noDataTemplate", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"], [1, "po-combo-container-loading"], [1, "po-combo-container-content"], ["contentElement", "", "poComboBody", ""], [3, "po-combo-item-selected", "click", 4, "ngFor", "ngForOf"], ["defaultOptionTemplate", ""], ["optionTemplate", ""], ["class", "po-combo-item-title", 4, "ngIf", "ngIfElse"], ["optionLink", ""], [1, "po-combo-item-title"], [1, "po-combo-item"], [2, "pointer-events", "none", 3, "innerHTML"], ["optionsGroupTemplate", ""], ["defaultOptionsTemplate", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-combo-container-no-data"], [1, "po-combo-no-data", "po-text-center"]], template: function PoComboComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, PoComboComponent_div_2_Template, 2, 3, "div", 2);
@@ -20031,18 +20937,19 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(9, "div", 9, 10);
             i0.ɵɵtemplate(11, PoComboComponent_ng_container_11_Template, 1, 0, "ng-container", 11);
+            i0.ɵɵtemplate(12, PoComboComponent_div_12_Template, 2, 3, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(12, "po-field-container-bottom");
+            i0.ɵɵelement(13, "po-field-container-bottom");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(13, PoComboComponent_ng_template_13_Template, 2, 0, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(15, PoComboComponent_ng_template_15_Template, 1, 3, "ng-template", null, 13, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(17, PoComboComponent_ng_template_17_Template, 3, 1, "ng-template", null, 14, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(19, PoComboComponent_ng_template_19_Template, 4, 1, "ng-template", null, 15, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(14, PoComboComponent_ng_template_14_Template, 1, 0, "ng-template", null, 13, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(16, PoComboComponent_ng_template_16_Template, 1, 0, "ng-template", null, 14, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(18, PoComboComponent_ng_template_18_Template, 4, 1, "ng-template", null, 15, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(20, PoComboComponent_ng_template_20_Template, 3, 1, "ng-template", null, 16, i0.ɵɵtemplateRefExtractor);
         }
         if (rf & 2) {
             const _r1 = i0.ɵɵreference(4);
-            const _r6 = i0.ɵɵreference(14);
-            const _r8 = i0.ɵɵreference(16);
+            const _r11 = i0.ɵɵreference(19);
+            const _r13 = i0.ɵɵreference(21);
             i0.ɵɵproperty("p-label", ctx.label)("p-help", ctx.help)("p-optional", !ctx.required && ctx.optional);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.icon);
@@ -20058,9 +20965,11 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("hidden", !ctx.comboOpen && !ctx.isServerSearching);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.isServerSearching)("ngIfThen", _r6)("ngIfElse", _r8);
+            i0.ɵɵproperty("ngIf", ctx.visibleOptions.length)("ngIfThen", _r11)("ngIfElse", _r13);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.isServerSearching);
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoIconComponent, i1.NgClass, PoCleanComponent, PoFieldContainerBottomComponent, PoLoadingComponent, i1.NgForOf, i1.NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoIconComponent, i1.NgClass, PoCleanComponent, PoFieldContainerBottomComponent, PoLoadingComponent, PoLoadingOverlayComponent, i1.NgForOf, i1.NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboComponent, [{
             type: Component,
@@ -20077,7 +20986,7 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
                             useExisting: forwardRef(() => PoComboComponent),
                             multi: true
                         }
-                    ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled\" (p-change-event)=\"clear($event)\" [p-element-ref]=\"inputEl\"> </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon]=\"!disabled\"\n        (click)=\"toggleComboVisibility()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <ng-container *ngIf=\"isServerSearching; then loadingTemplate; else optionsTemplate\"> </ng-container>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"po-combo-container-loading\">\n    <po-loading></po-loading>\n  </div>\n</ng-template>\n\n<ng-template #optionsTemplate>\n  <ng-container *ngIf=\"visibleOptions.length; then visibleOptionsTemplate; else noDataTemplate\"> </ng-container>\n</ng-template>\n\n<ng-template #visibleOptionsTemplate>\n  <ul #contentElement class=\"po-combo-container-content\">\n    <li\n      *ngFor=\"let option of visibleOptions\"\n      [class.po-combo-item-selected]=\"compareObjects(selectedView, option)\"\n      (click)=\"option?.options ? undefined : onOptionClick(option, $event)\"\n    >\n      <ng-container *ngIf=\"comboOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n      <ng-template #defaultOptionTemplate>\n        <label *ngIf=\"option?.options; else optionLink\" class=\"po-combo-item-title\">{{ option.label }}</label>\n        <ng-template #optionLink>\n          <a class=\"po-combo-item\">\n            <span [innerHTML]=\"getLabelFormatted(option?.label)\"></span>\n          </a>\n        </ng-template>\n      </ng-template>\n\n      <ng-template #optionTemplate>\n        <ng-container *ngIf=\"isOptionGroupList; then optionsGroupTemplate; else defaultOptionsTemplate\"></ng-container>\n\n        <ng-template #optionsGroupTemplate>\n          <ng-template\n            [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: compareObjects(selectedView, option) }\"\n          >\n          </ng-template>\n        </ng-template>\n\n        <ng-template #defaultOptionsTemplate>\n          <a class=\"po-combo-item\">\n            <ng-template\n              [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-template>\n          </a>\n        </ng-template>\n      </ng-template>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #noDataTemplate>\n  <div class=\"po-combo-container-no-data\">\n    <div class=\"po-combo-no-data po-text-center\">\n      <span>\n        {{ literals.noData }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
+                    ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled\" (p-change-event)=\"clear($event)\" [p-element-ref]=\"inputEl\"> </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon]=\"!disabled\"\n        (click)=\"toggleComboVisibility()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <ng-container *ngIf=\"visibleOptions.length; then visibleOptionsTemplate; else noDataTemplate\"> </ng-container>\n    <div *ngIf=\"isServerSearching\">\n      <ng-container *ngIf=\"infiniteLoading; then infiniteLoadingTemplate; else normalLoadingTemplate\"></ng-container>\n    </div>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #normalLoadingTemplate>\n  <po-loading class=\"po-combo-container-loading\"> </po-loading>\n</ng-template>\n\n<ng-template #infiniteLoadingTemplate>\n  <po-loading-overlay class=\"po-combo-container-loading\"> </po-loading-overlay>\n</ng-template>\n\n<ng-template #visibleOptionsTemplate>\n  <ul #contentElement #poComboBody class=\"po-combo-container-content\">\n    <li\n      *ngFor=\"let option of visibleOptions\"\n      [class.po-combo-item-selected]=\"compareObjects(selectedView, option)\"\n      (click)=\"option?.options ? undefined : onOptionClick(option, $event)\"\n    >\n      <ng-container *ngIf=\"comboOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n      <ng-template #defaultOptionTemplate>\n        <label *ngIf=\"option?.options; else optionLink\" class=\"po-combo-item-title\">{{ option.label }}</label>\n        <ng-template #optionLink>\n          <a class=\"po-combo-item\">\n            <span style=\"pointer-events: none\" [innerHTML]=\"getLabelFormatted(option?.label)\"></span>\n          </a>\n        </ng-template>\n      </ng-template>\n\n      <ng-template #optionTemplate>\n        <ng-container *ngIf=\"isOptionGroupList; then optionsGroupTemplate; else defaultOptionsTemplate\"></ng-container>\n\n        <ng-template #optionsGroupTemplate>\n          <ng-template\n            [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: compareObjects(selectedView, option) }\"\n          >\n          </ng-template>\n        </ng-template>\n\n        <ng-template #defaultOptionsTemplate>\n          <a class=\"po-combo-item\">\n            <ng-template\n              [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-template>\n          </a>\n        </ng-template>\n      </ng-template>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #noDataTemplate>\n  <div class=\"po-combo-container-no-data\">\n    <div class=\"po-combo-no-data po-text-center\">\n      <span *ngIf=\"!isServerSearching\">\n        {{ literals.noData }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: i3$1.DomSanitizer }, { type: PoLanguageService }]; }, { comboOptionTemplate: [{
                 type: ContentChild,
                 args: [PoComboOptionTemplateDirective, { static: true }]
@@ -20093,6 +21002,9 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
             }], inputEl: [{
                 type: ViewChild,
                 args: ['inp', { read: ElementRef, static: true }]
+            }], poComboBody: [{
+                type: ViewChild,
+                args: ['poComboBody', { read: ElementRef }]
             }] });
 })();
 
@@ -29483,8 +30395,10 @@ function PoRichTextToolbarComponent_div_4_Template(rf, ctx) {
         const ctx_r1 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("disabled", ctx_r1.readonly)("p-tooltip", ctx_r1.literals.textColor);
+        i0.ɵɵattribute("aria-label", ctx_r1.literals.textColor);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("disabled", ctx_r1.readonly);
+        i0.ɵɵattribute("aria-label", ctx_r1.literals.textColor);
     }
 }
 const poRichTextDefaultColor = '#000000';
@@ -29647,7 +30561,7 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
             i0.ɵɵelement(3, "po-button-group", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, PoRichTextToolbarComponent_div_4_Template, 5, 3, "div", 4);
+            i0.ɵɵtemplate(4, PoRichTextToolbarComponent_div_4_Template, 5, 5, "div", 4);
             i0.ɵɵelementStart(5, "div", 2);
             i0.ɵɵelement(6, "po-button-group", 5);
             i0.ɵɵelementEnd();
@@ -29685,7 +30599,7 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextToolbarComponent, [{
             type: Component,
-            args: [{ selector: 'po-rich-text-toolbar', template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-text-ellipsis po-rich-text-toolbar-color-picker-button\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (change)=\"changeTextColor($event.target.value)\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-buttons]=\"mediaButtons\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal (p-command)=\"emitCommand($event)\"> </po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
+            args: [{ selector: 'po-rich-text-toolbar', template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-text-ellipsis po-rich-text-toolbar-color-picker-button\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (change)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-buttons]=\"mediaButtons\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal (p-command)=\"emitCommand($event)\"> </po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
         }], function () { return [{ type: PoLanguageService }]; }, { colorPickerInput: [{
                 type: ViewChild,
                 args: ['colorPickerInput', { read: ElementRef }]