@po-ui/ng-components 14.1.0 → 14.3.0

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

@@ -590,7 +590,9 @@ PoBreadcrumbBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: P
         }] }); })();
 
 function PoBreadcrumbDropdownComponent_li_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 2);
+    i0.ɵɵlistener("click", function PoBreadcrumbDropdownComponent_li_1_Template_li_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r3); const item_r1 = restoredCtx.$implicit; return i0.ɵɵresetView(item_r1.action == null ? null : item_r1.action()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -609,7 +611,7 @@ function PoBreadcrumbDropdownComponent_li_1_Template(rf, ctx) { if (rf & 1) {
 class PoBreadcrumbDropdownComponent {
 }
 PoBreadcrumbDropdownComponent.ɵfac = function PoBreadcrumbDropdownComponent_Factory(t) { return new (t || PoBreadcrumbDropdownComponent)(); };
-PoBreadcrumbDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoBreadcrumbDropdownComponent, selectors: [["po-breadcrumb-dropdown"]], inputs: { items: ["p-items", "items"] }, decls: 2, vars: 1, consts: [[1, "po-breadcrumb-dropdown"], ["class", "po-breadcrumb-dropdown-item", 3, "routerLink", 4, "ngFor", "ngForOf"], [1, "po-breadcrumb-dropdown-item", 3, "routerLink"]], template: function PoBreadcrumbDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+PoBreadcrumbDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoBreadcrumbDropdownComponent, selectors: [["po-breadcrumb-dropdown"]], inputs: { items: ["p-items", "items"] }, decls: 2, vars: 1, consts: [[1, "po-breadcrumb-dropdown"], ["class", "po-breadcrumb-dropdown-item", 3, "routerLink", "click", 4, "ngFor", "ngForOf"], [1, "po-breadcrumb-dropdown-item", 3, "routerLink", "click"]], template: function PoBreadcrumbDropdownComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "ul", 0);
         i0.ɵɵtemplate(1, PoBreadcrumbDropdownComponent_li_1_Template, 2, 2, "li", 1);
         i0.ɵɵelementEnd();
@@ -619,7 +621,7 @@ PoBreadcrumbDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
     } }, dependencies: [i1.NgForOf, i2.RouterLink], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoBreadcrumbDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'po-breadcrumb-dropdown', template: "<ul class=\"po-breadcrumb-dropdown\">\n  <li class=\"po-breadcrumb-dropdown-item\" *ngFor=\"let item of items\" [routerLink]=\"item.link\">\n    {{ item.label }}\n  </li>\n</ul>\n" }]
+        args: [{ selector: 'po-breadcrumb-dropdown', template: "<ul class=\"po-breadcrumb-dropdown\">\n  <li class=\"po-breadcrumb-dropdown-item\" *ngFor=\"let item of items\" [routerLink]=\"item.link\" (click)=\"item.action?.()\">\n    {{ item.label }}\n  </li>\n</ul>\n" }]
     }], null, { items: [{
             type: Input,
             args: ['p-items']
@@ -864,20 +866,10 @@ function convertIsoToDate(value, start, end) {
             return date;
         }
         else {
-            const milliseconds = Date.parse(value);
-            const timezone = new Date().getTimezoneOffset() * 60000;
-            return new Date(milliseconds + timezone);
+            return new Date(year, month - 1, day);
         }
     }
 }
-function convertIsoToDateNoTimezone(value) {
-    if (value) {
-        const day = parseInt(value.substring(8, 10), 10);
-        const month = parseInt(value.substring(5, 7), 10);
-        const year = parseInt(value.substring(0, 4), 10);
-        return new Date(year, month - 1, day);
-    }
-}
 function convertDateToISODate(date) {
     if (date) {
         const getMonth = date.getMonth() + 1;
@@ -1028,6 +1020,17 @@ function removeDuplicatedOptions(list) {
         }
     }
 }
+function removeDuplicatedOptionsWithFieldValue(list, newValue) {
+    for (let i = 0; i < list.length; i++) {
+        if (i === 0) {
+            continue;
+        }
+        if (list.findIndex(op => op[newValue] === list[i][newValue]) !== i) {
+            list.splice(i, 1);
+            i--;
+        }
+    }
+}
 function removeUndefinedAndNullOptions(list) {
     for (let i = 0; i < list.length; i++) {
         if (list[i].value === undefined || list[i].value === null) {
@@ -1036,6 +1039,14 @@ function removeUndefinedAndNullOptions(list) {
         }
     }
 }
+function removeUndefinedAndNullOptionsWithFieldValue(list, newValue) {
+    for (let i = 0; i < list.length; i++) {
+        if (list[i][newValue] === undefined || list[i][newValue] === null) {
+            list.splice(i, 1);
+            i--;
+        }
+    }
+}
 function validValue(value) {
     return (value !== null && value !== undefined && value !== '') || value === false;
 }
@@ -2324,6 +2335,12 @@ var PoButtonKind;
     PoButtonKind["danger"] = "danger";
 })(PoButtonKind || (PoButtonKind = {}));
 
+var PoButtonSize;
+(function (PoButtonSize) {
+    PoButtonSize["medium"] = "medium";
+    PoButtonSize["large"] = "large";
+})(PoButtonSize || (PoButtonSize = {}));
+
 /**
  * @description
  *
@@ -2351,8 +2368,10 @@ class PoButtonBaseComponent {
         this._danger = false;
         this._disabled = false;
         this._loading = false;
-        this._small = false;
         this._kind = PoButtonKind.secondary;
+        this._size = PoButtonSize.medium;
+        this._small = false;
+        this.hasSize = false;
     }
     /**
      * @optional
@@ -2372,16 +2391,26 @@ class PoButtonBaseComponent {
         return this._loading;
     }
     /**
+     * @deprecated 16.x.x
+     *
      * @optional
      *
      * @description
      *
-     * Deixa o botão menor.
+     * **Deprecated 16.x.x**.
+     *
+     * > Por regras de acessibilidade o botão não terá mais um tamanho menor do que 44px e por isso a propriedade será depreciada.
+     * > [Saiba mais](https://animaliads.notion.site/Bot-o-fb3a921e8ba54bd38b39758c24613368)
+     *
+     * Deixa o botão menor, com 32px de altura.
      *
      * @default `false`
      */
     set small(value) {
-        this._small = value === '' ? true : convertToBoolean(value);
+        this._small = !this.hasSize ? value : false;
+        if (this._small) {
+            this._size = 'small';
+        }
     }
     get small() {
         return this._small;
@@ -2426,6 +2455,34 @@ class PoButtonBaseComponent {
     get danger() {
         return this._danger;
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do `po-button`.
+     *
+     * Valores válidos:
+     * - `medium`: o `po-button` fica do tamanho padrão, com 44px de altura.;
+     * - `large`: o `po-button` fica maior, com 56px de altura.;
+     *
+     * @default `medium`
+     *
+     */
+    set size(value) {
+        const size = this.small ? 'small' : value;
+        if (size === 'small') {
+            this._size = 'small';
+            this._small = true;
+        }
+        else {
+            this._size = PoButtonSize[size] ? PoButtonSize[size] : PoButtonSize.medium;
+            this.hasSize = true;
+        }
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * @optional
      *
@@ -2433,7 +2490,7 @@ class PoButtonBaseComponent {
      *
      * Define o estilo do `po-button`.
      *
-     * Valore válidos:
+     * Valores válidos:
      *  - `primary`: deixa o `po-button` com destaque, deve ser usado para ações primárias.
      *  - `secondary`: estilo padrão do `po-button`.
      *  - `tertiary`: o `po-button` é exibido sem cor do fundo, recebendo menos destaque entre as ações.
@@ -2463,9 +2520,12 @@ class PoButtonBaseComponent {
     }
 }
 PoButtonBaseComponent.ɵfac = function PoButtonBaseComponent_Factory(t) { return new (t || PoButtonBaseComponent)(); };
-PoButtonBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoButtonBaseComponent, hostVars: 2, hostBindings: function PoButtonBaseComponent_HostBindings(rf, ctx) { if (rf & 2) {
-        i0.ɵɵattribute("p-danger", ctx.danger)("p-kind", ctx.kind);
-    } }, inputs: { label: ["p-label", "label"], icon: ["p-icon", "icon"], loading: ["p-loading", "loading"], small: ["p-small", "small"], type: ["p-type", "type"], danger: ["p-danger", "danger"], kind: ["p-kind", "kind"], disabled: ["p-disabled", "disabled"] }, outputs: { click: "p-click" } });
+PoButtonBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoButtonBaseComponent, hostVars: 3, hostBindings: function PoButtonBaseComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        i0.ɵɵattribute("p-danger", ctx.danger)("p-size", ctx.size)("p-kind", ctx.kind);
+    } }, inputs: { label: ["p-label", "label"], icon: ["p-icon", "icon"], loading: ["p-loading", "loading"], small: ["p-small", "small"], type: ["p-type", "type"], danger: ["p-danger", "danger"], size: ["p-size", "size"], kind: ["p-kind", "kind"], disabled: ["p-disabled", "disabled"] }, outputs: { click: "p-click" } });
+__decorate([
+    InputBoolean()
+], PoButtonBaseComponent.prototype, "small", null);
 __decorate([
     InputBoolean()
 ], PoButtonBaseComponent.prototype, "danger", null);
@@ -2495,6 +2555,12 @@ __decorate([
         }, {
             type: Input,
             args: ['p-danger']
+        }], size: [{
+            type: HostBinding,
+            args: ['attr.p-size']
+        }, {
+            type: Input,
+            args: ['p-size']
         }], kind: [{
             type: HostBinding,
             args: ['attr.p-kind']
@@ -2584,7 +2650,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttonElement = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 8, consts: [["type", "button", 1, "po-button", 3, "disabled", "click"], ["button", ""], ["class", "po-button-loading-icon", 4, "ngIf"], ["class", "po-button-icon", 3, "p-icon", 4, "ngIf"], ["class", "po-button-label", 4, "ngIf"], [1, "po-button-loading-icon"], ["p-neutral-color", ""], [1, "po-button-icon", 3, "p-icon"], [1, "po-button-label"]], template: function PoButtonComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 9, consts: [["type", "button", 1, "po-button", 3, "disabled", "click"], ["button", ""], ["class", "po-button-loading-icon", 4, "ngIf"], ["class", "po-button-icon", 3, "p-icon", 4, "ngIf"], ["class", "po-button-label", 4, "ngIf"], [1, "po-button-loading-icon"], ["p-neutral-color", ""], [1, "po-button-icon", 3, "p-icon"], [1, "po-button-label"]], template: function PoButtonComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "button", 0, 1);
         i0.ɵɵlistener("click", function PoButtonComponent_Template_button_click_0_listener() { return ctx.onClick(); });
         i0.ɵɵtemplate(2, PoButtonComponent_div_2_Template, 2, 0, "div", 2);
@@ -2594,7 +2660,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
     } if (rf & 2) {
         i0.ɵɵclassProp("po-button-sm", ctx.small);
         i0.ɵɵproperty("disabled", ctx.disabled || ctx.loading);
-        i0.ɵɵattribute("p-kind", ctx.kind)("p-danger", ctx.danger);
+        i0.ɵɵattribute("p-size", ctx.size)("p-kind", ctx.kind)("p-danger", ctx.danger);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.loading);
         i0.ɵɵadvance(1);
@@ -2604,7 +2670,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
     } }, dependencies: [i1.NgIf, PoLoadingIconComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoButtonComponent, [{
         type: Component,
-        args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #button\n  class=\"po-button\"\n  type=\"button\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [class.po-button-sm]=\"small\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  <div *ngIf=\"loading\" class=\"po-button-loading-icon\">\n    <po-loading-icon p-neutral-color></po-loading-icon>\n  </div>\n\n  <po-icon *ngIf=\"icon\" class=\"po-button-icon\" [p-icon]=\"icon\"></po-icon>\n  <span *ngIf=\"label\" class=\"po-button-label\">{{ label }}</span>\n</button>\n" }]
+        args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #button\n  class=\"po-button\"\n  type=\"button\"\n  [attr.p-size]=\"size\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [class.po-button-sm]=\"small\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  <div *ngIf=\"loading\" class=\"po-button-loading-icon\">\n    <po-loading-icon p-neutral-color></po-loading-icon>\n  </div>\n\n  <po-icon *ngIf=\"icon\" class=\"po-button-icon\" [p-icon]=\"icon\"></po-icon>\n  <span *ngIf=\"label\" class=\"po-button-label\">{{ label }}</span>\n</button>\n" }]
     }], null, { buttonElement: [{
             type: ViewChild,
             args: ['button', { static: true }]
@@ -3363,10 +3429,17 @@ class PoButtonGroupBaseComponent {
         this._toggle = PO_TOGGLE_TYPE_DEFAULT;
     }
     /**
+     * @deprecated 16.x.x
+     *
      * @optional
      *
      * @description
      *
+     * **Deprecated 16.x.x**.
+     *
+     * > Por regras de acessibilidade o botão não terá mais um tamanho menor do que 44px e por isso a propriedade será depreciada.
+     * > [Saiba mais](https://animaliads.notion.site/Bot-o-fb3a921e8ba54bd38b39758c24613368)
+     *
      * Torna o grupo de botões com tamanho minificado.
      *
      * @default `false`
@@ -9886,14 +9959,291 @@ __decorate([
             args: ['p-required']
         }] }); })();
 
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Enum que contém os valores numéricos dos *keyCodes*.
+ */
+var PoKeyCodeEnum;
+(function (PoKeyCodeEnum) {
+    /** Seta para baixo */
+    PoKeyCodeEnum[PoKeyCodeEnum["arrowDown"] = 40] = "arrowDown";
+    /** Seta para cima */
+    PoKeyCodeEnum[PoKeyCodeEnum["arrowUp"] = 38] = "arrowUp";
+    /** Backspace */
+    PoKeyCodeEnum[PoKeyCodeEnum["backspace"] = 8] = "backspace";
+    /** Delete */
+    PoKeyCodeEnum[PoKeyCodeEnum["delete"] = 46] = "delete";
+    /** Enter */
+    PoKeyCodeEnum[PoKeyCodeEnum["enter"] = 13] = "enter";
+    /** Esc */
+    PoKeyCodeEnum[PoKeyCodeEnum["esc"] = 27] = "esc";
+    /** Tecla K */
+    PoKeyCodeEnum[PoKeyCodeEnum["keyK"] = 75] = "keyK";
+    /** Tecla L */
+    PoKeyCodeEnum[PoKeyCodeEnum["keyL"] = 76] = "keyL";
+    /** Espaço */
+    PoKeyCodeEnum[PoKeyCodeEnum["space"] = 32] = "space";
+    /** Tab */
+    PoKeyCodeEnum[PoKeyCodeEnum["tab"] = 9] = "tab";
+})(PoKeyCodeEnum || (PoKeyCodeEnum = {}));
+
+/**
+ * @description
+ *
+ * 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/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/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() {
+        /**
+         * @optional
+         *
+         * @description
+         *
+         * Aplica foco no elemento ao ser iniciado.
+         *
+         * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco.
+         *
+         * @default `false`
+         */
+        this.autoFocus = false;
+        /**
+         * @optional
+         *
+         * @description
+         *
+         * Evento disparado quando o valor do *checkbox* for alterado.
+         */
+        this.change = new EventEmitter();
+        this.id = uuid();
+        this._disabled = false;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o estado do *checkbox* como desabilitado.
+     *
+     * @default `false`
+     */
+    set disabled(value) {
+        this._disabled = convertToBoolean(value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    changeValue() {
+        if (this.propagateChange) {
+            this.propagateChange(this.checkboxValue);
+        }
+        this.change.emit(this.checkboxValue);
+    }
+    checkOption(value) {
+        if (!this.disabled) {
+            value === 'mixed' ? this.changeModelValue(true) : this.changeModelValue(!value);
+            this.changeValue();
+        }
+    }
+    // Função implementada do ControlValueAccessor
+    // Usada para interceptar os estados de habilitado via forms api
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        if (value !== this.checkboxValue) {
+            this.changeModelValue(value);
+        }
+    }
+}
+PoCheckboxBaseComponent.ɵfac = function PoCheckboxBaseComponent_Factory(t) { return new (t || PoCheckboxBaseComponent)(); };
+PoCheckboxBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoCheckboxBaseComponent, inputs: { name: "name", autoFocus: ["p-auto-focus", "autoFocus"], label: ["p-label", "label"], checkboxValue: ["p-checkboxValue", "checkboxValue"], checkBoxRequired: ["p-required", "checkBoxRequired"], disabled: ["p-disabled", "disabled"] }, outputs: { change: "p-change" } });
+__decorate([
+    InputBoolean()
+], PoCheckboxBaseComponent.prototype, "autoFocus", void 0);
+__decorate([
+    InputBoolean()
+], PoCheckboxBaseComponent.prototype, "checkBoxRequired", void 0);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCheckboxBaseComponent, [{
+        type: Directive
+    }], null, { name: [{
+            type: Input,
+            args: ['name']
+        }], autoFocus: [{
+            type: Input,
+            args: ['p-auto-focus']
+        }], label: [{
+            type: Input,
+            args: ['p-label']
+        }], change: [{
+            type: Output,
+            args: ['p-change']
+        }], checkboxValue: [{
+            type: Input,
+            args: ['p-checkboxValue']
+        }], checkBoxRequired: [{
+            type: Input,
+            args: ['p-required']
+        }], disabled: [{
+            type: Input,
+            args: ['p-disabled']
+        }] }); })();
+
 const _c0$12 = ["checkboxLabel"];
-function PoCheckboxGroupComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+function PoCheckboxComponent_label_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 4, 5);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("for", ctx_r0.id);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.label, " ");
+} }
+/**
+ * @docsExtends PoCheckboxBaseComponent
+ *
+ * @example
+ *
+ * <example name="po-checkbox-basic" title="PO Checkbox Basic">
+ *   <file name="sample-po-checkbox-basic/sample-po-checkbox-basic.component.html"> </file>
+ *   <file name="sample-po-checkbox-basic/sample-po-checkbox-basic.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-checkbox-labs" title="PO Checkbox Labs">
+ *   <file name="sample-po-checkbox-labs/sample-po-checkbox-labs.component.html"> </file>
+ *   <file name="sample-po-checkbox-labs/sample-po-checkbox-labs.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-checkbox-acceptance-term" title="PO Checkbox - Acceptance Term">
+ *   <file name="sample-po-checkbox-acceptance-term/sample-po-checkbox-acceptance-term.component.html"> </file>
+ *   <file name="sample-po-checkbox-acceptance-term/sample-po-checkbox-acceptance-term.component.ts"> </file>
+ * </example>
+ */
+class PoCheckboxComponent extends PoCheckboxBaseComponent {
+    constructor(changeDetector) {
+        super();
+        this.changeDetector = changeDetector;
+    }
+    /**
+     * Função que atribui foco ao *checkbox*.
+     *
+     * Para utilizá-la é necessário capturar a referência do componente no DOM através do `ViewChild`, como por exemplo:
+     *
+     * ```
+     * ...
+     * import { ViewChild } from '@angular/core';
+     * import { PoCheckboxComponent } from '@po-ui/ng-components';
+     *
+     * ...
+     *
+     * @ViewChild(PoCheckboxComponent, { static: true }) checkbox: PoCheckboxComponent;
+     *
+     * focusCheckbox() {
+     *   this.checkbox.focus();
+     * }
+     * ```
+     */
+    focus() {
+        if (this.checkboxLabel && !this.disabled) {
+            this.checkboxLabel.nativeElement.focus();
+        }
+    }
+    onBlur() {
+        this.onTouched?.();
+    }
+    ngAfterViewInit() {
+        if (this.autoFocus) {
+            this.focus();
+        }
+    }
+    onKeyDown(event, value) {
+        if (event.which === PoKeyCodeEnum.space || event.keyCode === PoKeyCodeEnum.space) {
+            this.checkOption(value);
+            event.preventDefault();
+        }
+    }
+    changeModelValue(value) {
+        if (value === null) {
+            this.checkboxValue = 'mixed';
+        }
+        else {
+            this.checkboxValue = typeof value === 'boolean' || value === null ? value : false;
+        }
+        this.changeDetector.detectChanges();
+    }
+}
+PoCheckboxComponent.ɵfac = function PoCheckboxComponent_Factory(t) { return new (t || PoCheckboxComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+PoCheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheckboxComponent, selectors: [["po-checkbox"]], viewQuery: function PoCheckboxComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$12, 7);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxLabel = _t.first);
+    } }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PoCheckboxComponent),
+                multi: true
+            }
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 8, consts: [[1, "container-po-checkbox", 3, "click", "keydown"], ["role", "checkbox", 1, "po-checkbox-outline", 3, "tabindex"], ["aria-label", " ", 1, "po-checkbox", 3, "id"], ["class", "po-checkbox-label", "tabindex", "-1", 3, "for", 4, "ngIf"], ["tabindex", "-1", 1, "po-checkbox-label", 3, "for"], ["checkboxLabel", ""]], template: function PoCheckboxComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        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.ɵɵelementStart(1, "div", 1);
+        i0.ɵɵelement(2, "span", 2);
+        i0.ɵɵtemplate(3, PoCheckboxComponent_label_3_Template, 3, 2, "label", 3);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵattribute("checked", ctx.checkboxValue);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("tabindex", ctx.disabled ? -1 : 0);
+        i0.ɵɵattribute("aria-checked", ctx.checkboxValue);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("id", ctx.id);
+        i0.ɵɵattribute("aria-checked", ctx.checkboxValue)("aria-disabled", ctx.disabled)("required", ctx.checkBoxRequired);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.label);
+    } }, dependencies: [i1.NgIf], encapsulation: 2, changeDetection: 0 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCheckboxComponent, [{
+        type: Component,
+        args: [{ selector: 'po-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => PoCheckboxComponent),
+                        multi: true
+                    }
+                ], template: "<div\n  class=\"container-po-checkbox\"\n  [attr.checked]=\"checkboxValue\"\n  (click)=\"checkOption(checkboxValue)\"\n  (keydown)=\"onKeyDown($event, checkboxValue)\"\n>\n  <div role=\"checkbox\" class=\"po-checkbox-outline\" [tabindex]=\"disabled ? -1 : 0\" [attr.aria-checked]=\"checkboxValue\">\n    <span\n      [attr.aria-checked]=\"checkboxValue\"\n      aria-label=\" \"\n      [id]=\"id\"\n      class=\"po-checkbox\"\n      [attr.aria-disabled]=\"disabled\"\n      [attr.required]=\"checkBoxRequired\"\n    >\n    </span>\n\n    <label *ngIf=\"label\" #checkboxLabel [for]=\"id\" class=\"po-checkbox-label\" tabindex=\"-1\">\n      {{ label }}\n    </label>\n  </div>\n</div>\n" }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { checkboxLabel: [{
+            type: ViewChild,
+            args: ['checkboxLabel', { static: true }]
+        }] }); })();
+
+const _c0$11 = ["checkboxLabel"];
+function PoCheckboxGroupComponent_li_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "input", 4);
-    i0.ɵɵelementStart(2, "label", 5, 6);
-    i0.ɵɵlistener("click", function PoCheckboxGroupComponent_div_3_Template_label_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const option_r1 = restoredCtx.$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.checkOption(option_r1)); })("keydown", function PoCheckboxGroupComponent_div_3_Template_label_keydown_2_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const option_r1 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.onKeyDown($event, option_r1)); });
-    i0.ɵɵtext(4);
+    i0.ɵɵelementStart(0, "li")(1, "po-checkbox", 4, 5);
+    i0.ɵɵlistener("click", function PoCheckboxGroupComponent_li_3_Template_po_checkbox_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const option_r1 = restoredCtx.$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.checkOption(option_r1)); })("keydown", function PoCheckboxGroupComponent_li_3_Template_po_checkbox_keydown_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const option_r1 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.onKeyDown($event, option_r1)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const option_r1 = ctx.$implicit;
@@ -9901,13 +10251,7 @@ function PoCheckboxGroupComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMapInterpolate2("po-checkbox-group-item po-md-", ctx_r0.mdColumns, " po-lg-", ctx_r0.columns, "");
     i0.ɵɵclassProp("po-checkbox-group-item-disabled", option_r1.disabled || ctx_r0.disabled);
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("po-checkbox-group-input-checked", ctx_r0.checkedOptions[option_r1.value])("po-checkbox-group-input-indeterminate", ctx_r0.checkedOptions[option_r1.value] === null);
-    i0.ɵɵproperty("checked", option_r1.value)("disabled", option_r1.disabled || ctx_r0.disabled)("id", option_r1.id)("required", ctx_r0.required)("value", option_r1.value);
-    i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("po-clickable", !option_r1.disabled && !ctx_r0.disabled);
-    i0.ɵɵproperty("for", option_r1.id)("tabindex", option_r1.disabled || ctx_r0.disabled ? -1 : 0);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", option_r1.label, " ");
+    i0.ɵɵproperty("p-label", option_r1.label)("p-disabled", option_r1.disabled || ctx_r0.disabled)("p-checkboxValue", ctx_r0.checkedOptions[option_r1.value] === null ? "mixed" : ctx_r0.checkedOptions[option_r1.value])("p-required", ctx_r0.required);
 } }
 /**
  * @docsExtends PoCheckboxGroupBaseComponent
@@ -9980,7 +10324,7 @@ class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent {
 }
 PoCheckboxGroupComponent.ɵfac = function PoCheckboxGroupComponent_Factory(t) { return new (t || PoCheckboxGroupComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoCheckboxGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheckboxGroupComponent, selectors: [["po-checkbox-group"]], viewQuery: function PoCheckboxGroupComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$12, 5);
+        i0.ɵɵviewQuery(_c0$11, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxLabels = _t);
@@ -9995,17 +10339,19 @@ PoCheckboxGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Po
                 useExisting: forwardRef(() => PoCheckboxGroupComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 5, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content", "po-checkbox-group-content"], [1, "po-row", "po-pt-1", "po-pb-1"], [3, "class", "po-checkbox-group-item-disabled", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "checkbox", 1, "po-input", "po-checkbox-group-input", 3, "checked", "disabled", "id", "required", "value"], [1, "po-checkbox-group-label", 3, "for", "tabindex", "click", "keydown"], ["checkboxLabel", ""]], template: function PoCheckboxGroupComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2);
-        i0.ɵɵtemplate(3, PoCheckboxGroupComponent_div_3_Template, 5, 20, "div", 3);
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 6, consts: [[3, "p-help", "p-label", "p-optional"], ["role", "group", 1, "po-field-container-content", "po-checkbox-group-content"], [1, "po-row", "po-pt-2", "po-pb-1"], [3, "class", "po-checkbox-group-item-disabled", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-label", "p-disabled", "p-checkboxValue", "p-required", "click", "keydown"], ["checkboxLabel", ""]], template: function PoCheckboxGroupComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "ul", 2);
+        i0.ɵɵtemplate(3, PoCheckboxGroupComponent_li_3_Template, 3, 10, "li", 3);
         i0.ɵɵelementEnd()();
         i0.ɵɵelement(4, "po-field-container-bottom");
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("p-help", ctx.help)("p-label", ctx.label)("p-optional", !ctx.required && ctx.optional);
-        i0.ɵɵadvance(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵattribute("aria-label", ctx.label);
+        i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngForOf", ctx.checkboxGroupOptionsView)("ngForTrackBy", ctx.trackByFn);
-    } }, dependencies: [i1.NgForOf, PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoCheckboxComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCheckboxGroupComponent, [{
         type: Component,
         args: [{ selector: 'po-checkbox-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10019,12 +10365,27 @@ PoCheckboxGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Po
                         useExisting: forwardRef(() => PoCheckboxGroupComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content po-checkbox-group-content\">\n    <div class=\"po-row po-pt-1 po-pb-1\">\n      <div\n        *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\"\n        class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n        [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n      >\n        <input\n          class=\"po-input po-checkbox-group-input\"\n          type=\"checkbox\"\n          [class.po-checkbox-group-input-checked]=\"checkedOptions[option.value]\"\n          [class.po-checkbox-group-input-indeterminate]=\"checkedOptions[option.value] === null\"\n          [checked]=\"option.value\"\n          [disabled]=\"option.disabled || disabled\"\n          [id]=\"option.id\"\n          [required]=\"required\"\n          [value]=\"option.value\"\n        />\n\n        <label\n          #checkboxLabel\n          class=\"po-checkbox-group-label\"\n          [class.po-clickable]=\"!option.disabled && !disabled\"\n          [for]=\"option.id\"\n          [tabindex]=\"option.disabled || disabled ? -1 : 0\"\n          (click)=\"checkOption(option)\"\n          (keydown)=\"onKeyDown($event, option)\"\n        >\n          {{ option.label }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div role=\"group\" [attr.aria-label]=\"label\" class=\"po-field-container-content po-checkbox-group-content\">\n    <ul class=\"po-row po-pt-2 po-pb-1\">\n      <li\n        *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\"\n        class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n        [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n      >\n        <po-checkbox\n          #checkboxLabel\n          [p-label]=\"option.label\"\n          [p-disabled]=\"option.disabled || disabled\"\n          (click)=\"checkOption(option)\"\n          (keydown)=\"onKeyDown($event, option)\"\n          [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n          [p-required]=\"required\"\n        >\n        </po-checkbox>\n      </li>\n    </ul>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { checkboxLabels: [{
             type: ViewChildren,
             args: ['checkboxLabel']
         }] }); })();
 
+class PoCheckboxModule {
+}
+PoCheckboxModule.ɵfac = function PoCheckboxModule_Factory(t) { return new (t || PoCheckboxModule)(); };
+PoCheckboxModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoCheckboxModule });
+PoCheckboxModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, FormsModule] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCheckboxModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [PoCheckboxComponent],
+                imports: [CommonModule, FormsModule],
+                exports: [PoCheckboxComponent]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoCheckboxModule, { declarations: [PoCheckboxComponent], imports: [CommonModule, FormsModule], exports: [PoCheckboxComponent] }); })();
+
 /**
  * @description
  *
@@ -10034,16 +10395,16 @@ class PoCheckboxGroupModule {
 }
 PoCheckboxGroupModule.ɵfac = function PoCheckboxGroupModule_Factory(t) { return new (t || PoCheckboxGroupModule)(); };
 PoCheckboxGroupModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoCheckboxGroupModule });
-PoCheckboxGroupModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, FormsModule, PoFieldContainerModule] });
+PoCheckboxGroupModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, FormsModule, PoFieldContainerModule, PoCheckboxModule] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCheckboxGroupModule, [{
         type: NgModule,
         args: [{
-                imports: [CommonModule, FormsModule, PoFieldContainerModule],
+                imports: [CommonModule, FormsModule, PoFieldContainerModule, PoCheckboxModule],
                 exports: [PoCheckboxGroupComponent],
                 declarations: [PoCheckboxGroupComponent]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoCheckboxGroupModule, { declarations: [PoCheckboxGroupComponent], imports: [CommonModule, FormsModule, PoFieldContainerModule], exports: [PoCheckboxGroupComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoCheckboxGroupModule, { declarations: [PoCheckboxGroupComponent], imports: [CommonModule, FormsModule, PoFieldContainerModule, PoCheckboxModule], exports: [PoCheckboxGroupComponent] }); })();
 
 /**
  * @docsPrivate
@@ -10878,12 +11239,7 @@ class PoDatepickerBaseComponent {
         return this._locale || this.shortLanguage;
     }
     set date(value) {
-        if (this.isExtendedISO) {
-            this._date = typeof value === 'string' ? convertIsoToDate(value, false, false) : value;
-        }
-        else {
-            this._date = typeof value === 'string' ? convertIsoToDateNoTimezone(value) : value;
-        }
+        this._date = typeof value === 'string' ? convertIsoToDate(value, false, false) : value;
     }
     get date() {
         return this._date;
@@ -11053,7 +11409,7 @@ __decorate([
             args: ['p-locale']
         }] }); })();
 
-const _c0$11 = ["calendar"];
+const _c0$10 = ["calendar"];
 const _c1$u = ["dialogPicker"];
 const _c2$d = ["iconDatepicker"];
 const _c3$7 = ["inp"];
@@ -11191,6 +11547,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         }
     }
     dateSelected() {
+        this.onTouchedModel?.();
         if (!this.verifyMobile()) {
             this.inputEl.nativeElement.focus();
         }
@@ -11372,7 +11729,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
 }
 PoDatepickerComponent.ɵfac = function PoDatepickerComponent_Factory(t) { return new (t || PoDatepickerComponent)(i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
 PoDatepickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDatepickerComponent, selectors: [["po-datepicker"]], viewQuery: function PoDatepickerComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$11, 7);
+        i0.ɵɵviewQuery(_c0$10, 7);
         i0.ɵɵviewQuery(_c1$u, 7, ElementRef);
         i0.ɵɵviewQuery(_c2$d, 7, ElementRef);
         i0.ɵɵviewQuery(_c3$7, 7, ElementRef);
@@ -11636,7 +11993,7 @@ PoModalBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoModa
             args: ['p-hide-close']
         }] }); })();
 
-const _c0$10 = ["*"];
+const _c0$$ = ["*"];
 /**
  * @description
  *
@@ -11670,7 +12027,7 @@ class PoModalFooterComponent {
     }
 }
 PoModalFooterComponent.ɵfac = function PoModalFooterComponent_Factory(t) { return new (t || PoModalFooterComponent)(); };
-PoModalFooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalFooterComponent, selectors: [["po-modal-footer"]], inputs: { disabledAlign: ["p-disabled-align", "disabledAlign"] }, ngContentSelectors: _c0$10, decls: 2, vars: 2, consts: [[1, "po-modal-footer"]], template: function PoModalFooterComponent_Template(rf, ctx) { if (rf & 1) {
+PoModalFooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalFooterComponent, selectors: [["po-modal-footer"]], inputs: { disabledAlign: ["p-disabled-align", "disabledAlign"] }, ngContentSelectors: _c0$$, decls: 2, vars: 2, consts: [[1, "po-modal-footer"]], template: function PoModalFooterComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵprojection(1);
@@ -11700,7 +12057,7 @@ PoActiveOverlayService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: P
             }]
     }], null, null); })();
 
-const _c0$$ = ["modalContent"];
+const _c0$_ = ["modalContent"];
 function PoModalComponent_div_0_a_9_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 13);
@@ -11864,7 +12221,7 @@ PoModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalCom
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalFooter = _t.first);
     } }, viewQuery: function PoModalComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$$, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$_, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
@@ -12674,7 +13031,7 @@ var PoToasterType;
     PoToasterType[PoToasterType["Warning"] = 3] = "Warning";
 })(PoToasterType || (PoToasterType = {}));
 
-const _c0$_ = ["toaster"];
+const _c0$Z = ["toaster"];
 const _c1$s = ["buttonClose"];
 function PoToasterComponent_po_button_8_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -12810,7 +13167,7 @@ class PoToasterComponent extends PoToasterBaseComponent {
 }
 PoToasterComponent.ɵfac = function PoToasterComponent_Factory(t) { return new (t || PoToasterComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoToasterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoToasterComponent, selectors: [["po-toaster"]], viewQuery: function PoToasterComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$_, 5);
+        i0.ɵɵviewQuery(_c0$Z, 5);
         i0.ɵɵviewQuery(_c1$s, 5);
     } if (rf & 2) {
         let _t;
@@ -13052,7 +13409,7 @@ PoPopoverBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoPo
             args: ['p-trigger']
         }] }); })();
 
-const _c0$Z = ["popoverElement"];
+const _c0$Y = ["popoverElement"];
 function PoPopoverComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div");
 } if (rf & 2) {
@@ -13191,7 +13548,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
 }
 PoPopoverComponent.ɵfac = function PoPopoverComponent_Factory(t) { return new (t || PoPopoverComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoControlPositionService)); };
 PoPopoverComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPopoverComponent, selectors: [["po-popover"]], viewQuery: function PoPopoverComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$Z, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$Y, 7, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popoverElement = _t.first);
@@ -13315,281 +13672,6 @@ PoTimeModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoTimeModule, { declarations: [PoTimePipe], exports: [PoTimePipe] }); })();
 
-/**
- * @docsPrivate
- *
- * @description
- *
- * Enum que contém os valores numéricos dos *keyCodes*.
- */
-var PoKeyCodeEnum;
-(function (PoKeyCodeEnum) {
-    /** Seta para baixo */
-    PoKeyCodeEnum[PoKeyCodeEnum["arrowDown"] = 40] = "arrowDown";
-    /** Seta para cima */
-    PoKeyCodeEnum[PoKeyCodeEnum["arrowUp"] = 38] = "arrowUp";
-    /** Backspace */
-    PoKeyCodeEnum[PoKeyCodeEnum["backspace"] = 8] = "backspace";
-    /** Delete */
-    PoKeyCodeEnum[PoKeyCodeEnum["delete"] = 46] = "delete";
-    /** Enter */
-    PoKeyCodeEnum[PoKeyCodeEnum["enter"] = 13] = "enter";
-    /** Esc */
-    PoKeyCodeEnum[PoKeyCodeEnum["esc"] = 27] = "esc";
-    /** Tecla K */
-    PoKeyCodeEnum[PoKeyCodeEnum["keyK"] = 75] = "keyK";
-    /** Tecla L */
-    PoKeyCodeEnum[PoKeyCodeEnum["keyL"] = 76] = "keyL";
-    /** Espaço */
-    PoKeyCodeEnum[PoKeyCodeEnum["space"] = 32] = "space";
-    /** Tab */
-    PoKeyCodeEnum[PoKeyCodeEnum["tab"] = 9] = "tab";
-})(PoKeyCodeEnum || (PoKeyCodeEnum = {}));
-
-/**
- * @description
- *
- * 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/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/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() {
-        /**
-         * @optional
-         *
-         * @description
-         *
-         * Aplica foco no elemento ao ser iniciado.
-         *
-         * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco.
-         *
-         * @default `false`
-         */
-        this.autoFocus = false;
-        /**
-         * @optional
-         *
-         * @description
-         *
-         * Evento disparado quando o valor do *checkbox* for alterado.
-         */
-        this.change = new EventEmitter();
-        this.id = uuid();
-        this._disabled = false;
-    }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o estado do *checkbox* como desabilitado.
-     *
-     * @default `false`
-     */
-    set disabled(value) {
-        this._disabled = convertToBoolean(value);
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    changeValue() {
-        if (this.propagateChange) {
-            this.propagateChange(this.checkboxValue);
-        }
-        this.change.emit(this.checkboxValue);
-    }
-    checkOption(value) {
-        if (!this.disabled) {
-            value === 'mixed' ? this.changeModelValue(true) : this.changeModelValue(!value);
-            this.changeValue();
-        }
-    }
-    // Função implementada do ControlValueAccessor
-    // Usada para interceptar os estados de habilitado via forms api
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        if (value !== this.checkboxValue) {
-            this.changeModelValue(value);
-        }
-    }
-}
-PoCheckboxBaseComponent.ɵfac = function PoCheckboxBaseComponent_Factory(t) { return new (t || PoCheckboxBaseComponent)(); };
-PoCheckboxBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoCheckboxBaseComponent, inputs: { name: "name", autoFocus: ["p-auto-focus", "autoFocus"], label: ["p-label", "label"], disabled: ["p-disabled", "disabled"] }, outputs: { change: "p-change" } });
-__decorate([
-    InputBoolean()
-], PoCheckboxBaseComponent.prototype, "autoFocus", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCheckboxBaseComponent, [{
-        type: Directive
-    }], null, { name: [{
-            type: Input,
-            args: ['name']
-        }], autoFocus: [{
-            type: Input,
-            args: ['p-auto-focus']
-        }], label: [{
-            type: Input,
-            args: ['p-label']
-        }], change: [{
-            type: Output,
-            args: ['p-change']
-        }], disabled: [{
-            type: Input,
-            args: ['p-disabled']
-        }] }); })();
-
-const _c0$Y = ["checkboxLabel"];
-/**
- * @docsExtends PoCheckboxBaseComponent
- *
- * @example
- *
- * <example name="po-checkbox-basic" title="PO Checkbox Basic">
- *   <file name="sample-po-checkbox-basic/sample-po-checkbox-basic.component.html"> </file>
- *   <file name="sample-po-checkbox-basic/sample-po-checkbox-basic.component.ts"> </file>
- * </example>
- *
- * <example name="po-checkbox-labs" title="PO Checkbox Labs">
- *   <file name="sample-po-checkbox-labs/sample-po-checkbox-labs.component.html"> </file>
- *   <file name="sample-po-checkbox-labs/sample-po-checkbox-labs.component.ts"> </file>
- * </example>
- *
- * <example name="po-checkbox-acceptance-term" title="PO Checkbox - Acceptance Term">
- *   <file name="sample-po-checkbox-acceptance-term/sample-po-checkbox-acceptance-term.component.html"> </file>
- *   <file name="sample-po-checkbox-acceptance-term/sample-po-checkbox-acceptance-term.component.ts"> </file>
- * </example>
- */
-class PoCheckboxComponent extends PoCheckboxBaseComponent {
-    constructor(changeDetector) {
-        super();
-        this.changeDetector = changeDetector;
-    }
-    /**
-     * Função que atribui foco ao *checkbox*.
-     *
-     * Para utilizá-la é necessário capturar a referência do componente no DOM através do `ViewChild`, como por exemplo:
-     *
-     * ```
-     * ...
-     * import { ViewChild } from '@angular/core';
-     * import { PoCheckboxComponent } from '@po-ui/ng-components';
-     *
-     * ...
-     *
-     * @ViewChild(PoCheckboxComponent, { static: true }) checkbox: PoCheckboxComponent;
-     *
-     * focusCheckbox() {
-     *   this.checkbox.focus();
-     * }
-     * ```
-     */
-    focus() {
-        if (this.checkboxLabel && !this.disabled) {
-            this.checkboxLabel.nativeElement.focus();
-        }
-    }
-    onBlur() {
-        this.onTouched?.();
-    }
-    ngAfterViewInit() {
-        if (this.autoFocus) {
-            this.focus();
-        }
-    }
-    onKeyDown(event, value) {
-        if (event.which === PoKeyCodeEnum.space || event.keyCode === PoKeyCodeEnum.space) {
-            this.checkOption(value);
-            event.preventDefault();
-        }
-    }
-    changeModelValue(value) {
-        if (value === null) {
-            this.checkboxValue = 'mixed';
-        }
-        else {
-            this.checkboxValue = typeof value === 'boolean' || value === null ? value : false;
-        }
-        this.changeDetector.detectChanges();
-    }
-}
-PoCheckboxComponent.ɵfac = function PoCheckboxComponent_Factory(t) { return new (t || PoCheckboxComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-PoCheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheckboxComponent, selectors: [["po-checkbox"]], viewQuery: function PoCheckboxComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$Y, 7);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxLabel = _t.first);
-    } }, features: [i0.ɵɵProvidersFeature([
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => PoCheckboxComponent),
-                multi: true
-            }
-        ]), 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.ɵɵ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.ɵɵtext(4);
-        i0.ɵɵelementEnd()();
-    } if (rf & 2) {
-        i0.ɵɵattribute("checked", ctx.checkboxValue);
-        i0.ɵɵadvance(1);
-        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.ɵɵproperty("for", ctx.id);
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
-    } }, encapsulation: 2, changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCheckboxComponent, [{
-        type: Component,
-        args: [{ selector: 'po-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => PoCheckboxComponent),
-                        multi: true
-                    }
-                ], 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 }]
-        }] }); })();
-
-class PoCheckboxModule {
-}
-PoCheckboxModule.ɵfac = function PoCheckboxModule_Factory(t) { return new (t || PoCheckboxModule)(); };
-PoCheckboxModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoCheckboxModule });
-PoCheckboxModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, FormsModule] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCheckboxModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [PoCheckboxComponent],
-                imports: [CommonModule, FormsModule],
-                exports: [PoCheckboxComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoCheckboxModule, { declarations: [PoCheckboxComponent], imports: [CommonModule, FormsModule], exports: [PoCheckboxComponent] }); })();
-
 const _c0$X = function (a0, a1) { return { "po-clickable": a0, "po-table-icon-disabled": a1 }; };
 /**
  * @docsPrivate
@@ -14218,14 +14300,14 @@ PoTableColumnManagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popover = _t.first);
-    } }, 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-container-arrows-columns-manager"], [4, "ngFor", "ngForOf"], [1, "po-table-column-manager-footer"], ["p-small", "", "p-kind", "tertiary", 1, "po-table-column-manager-footer-restore", 3, "p-label", "p-click"], [1, "po-container-icons-arrows-columns-manager"], ["p-tooltip-position", "left", "p-kind", "tertiary", "p-icon", "po-icon po-icon-arrow-up", "p-small", "", 3, "p-tooltip", "p-disabled", "click"], ["p-tooltip-position", "top", "p-kind", "tertiary", "p-icon", "po-icon po-icon-arrow-down", "p-small", "", 3, "p-tooltip", "p-disabled", "click"]], template: function PoTableColumnManagerComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, 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", 1, "po-checkbox-group-column-manager", 3, "ngModel", "p-options", "ngModelChange", "p-change"], [1, "po-container-arrows-columns-manager"], [4, "ngFor", "ngForOf"], [1, "po-table-column-manager-footer"], ["p-kind", "tertiary", 1, "po-table-column-manager-footer-restore", 3, "p-label", "p-click"], [1, "po-container-icons-arrows-columns-manager"], ["p-tooltip-position", "left", "p-kind", "tertiary", "p-icon", "po-icon po-icon-arrow-up", 3, "p-tooltip", "p-disabled", "click"], ["p-tooltip-position", "top", "p-kind", "tertiary", "p-icon", "po-icon po-icon-arrow-down", 3, "p-tooltip", "p-disabled", "click"]], template: function PoTableColumnManagerComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, PoTableColumnManagerComponent_po_popover_0_Template, 13, 6, "po-popover", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.target);
     } }, dependencies: [i1.NgForOf, i1.NgIf, i2$1.NgControlStatus, i2$1.NgModel, PoButtonComponent, PoCheckboxGroupComponent, PoPopoverComponent, PoTooltipDirective], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableColumnManagerComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-column-manager', template: "<po-popover #popover *ngIf=\"target\" [p-target]=\"target\" p-position=\"bottom-left\" (p-close)=\"checkChanges([], true)\">\n  <div class=\"po-table-column-manager-header\">\n    <div class=\"po-table-column-manager-header-title\">{{ literals.columnsManager }}</div>\n\n    <div class=\"po-table-column-manager-header-close\">\n      <button\n        class=\"po-table-column-manager-header-close-button po-clickable po-icon po-icon-close\"\n        (click)=\"popover.close()\"\n      ></button>\n    </div>\n  </div>\n\n  <div class=\"po-table-column-manager-body\">\n    <po-checkbox-group\n      name=\"visibleColumns\"\n      [(ngModel)]=\"visibleColumns\"\n      p-columns=\"1\"\n      [p-options]=\"columnsOptions\"\n      (p-change)=\"checkChanges($event, false)\"\n    >\n    </po-checkbox-group>\n\n    <div class=\"po-container-arrows-columns-manager\">\n      <div *ngFor=\"let option of columnsOptions\">\n        <div class=\"po-container-icons-arrows-columns-manager\">\n          <po-button\n            [p-tooltip]=\"literals.up\"\n            p-tooltip-position=\"left\"\n            [p-disabled]=\"verifyArrowDisabled(option, 'up')\"\n            (click)=\"changePosition(option, 'up'); $event.stopPropagation()\"\n            p-kind=\"tertiary\"\n            p-icon=\"po-icon po-icon-arrow-up\"\n            p-small\n          >\n          </po-button>\n          <po-button\n            [p-tooltip]=\"literals.down\"\n            p-tooltip-position=\"top\"\n            [p-disabled]=\"verifyArrowDisabled(option, 'down')\"\n            (click)=\"changePosition(option, 'down'); $event.stopPropagation()\"\n            p-kind=\"tertiary\"\n            p-icon=\"po-icon po-icon-arrow-down\"\n            p-small\n          >\n          </po-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-column-manager-footer\">\n    <po-button\n      class=\"po-table-column-manager-footer-restore\"\n      p-small\n      p-kind=\"tertiary\"\n      [p-label]=\"literals.restoreDefault\"\n      (p-click)=\"restore()\"\n    >\n    </po-button>\n  </div>\n</po-popover>\n" }]
+        args: [{ selector: 'po-table-column-manager', template: "<po-popover #popover *ngIf=\"target\" [p-target]=\"target\" p-position=\"bottom-left\" (p-close)=\"checkChanges([], true)\">\n  <div class=\"po-table-column-manager-header\">\n    <div class=\"po-table-column-manager-header-title\">{{ literals.columnsManager }}</div>\n\n    <div class=\"po-table-column-manager-header-close\">\n      <button\n        class=\"po-table-column-manager-header-close-button po-clickable po-icon po-icon-close\"\n        (click)=\"popover.close()\"\n      ></button>\n    </div>\n  </div>\n\n  <div class=\"po-table-column-manager-body\">\n    <po-checkbox-group\n      class=\"po-checkbox-group-column-manager\"\n      name=\"visibleColumns\"\n      [(ngModel)]=\"visibleColumns\"\n      p-columns=\"1\"\n      [p-options]=\"columnsOptions\"\n      (p-change)=\"checkChanges($event, false)\"\n    >\n    </po-checkbox-group>\n\n    <div class=\"po-container-arrows-columns-manager\">\n      <div *ngFor=\"let option of columnsOptions\">\n        <div class=\"po-container-icons-arrows-columns-manager\">\n          <po-button\n            [p-tooltip]=\"literals.up\"\n            p-tooltip-position=\"left\"\n            [p-disabled]=\"verifyArrowDisabled(option, 'up')\"\n            (click)=\"changePosition(option, 'up'); $event.stopPropagation()\"\n            p-kind=\"tertiary\"\n            p-icon=\"po-icon po-icon-arrow-up\"\n          >\n          </po-button>\n          <po-button\n            [p-tooltip]=\"literals.down\"\n            p-tooltip-position=\"top\"\n            [p-disabled]=\"verifyArrowDisabled(option, 'down')\"\n            (click)=\"changePosition(option, 'down'); $event.stopPropagation()\"\n            p-kind=\"tertiary\"\n            p-icon=\"po-icon po-icon-arrow-down\"\n          >\n          </po-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-column-manager-footer\">\n    <po-button\n      class=\"po-table-column-manager-footer-restore\"\n      p-kind=\"tertiary\"\n      [p-label]=\"literals.restoreDefault\"\n      (p-click)=\"restore()\"\n    >\n    </po-button>\n  </div>\n</po-popover>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: PoLanguageService }]; }, { popover: [{
             type: ViewChild,
             args: [PoPopoverComponent]
@@ -14453,6 +14535,16 @@ class PoTableBaseComponent {
          * > Esta definição não se aplica aos itens filhos, os mesmos possuem comportamento independente do item pai.
          */
         this.singleSelect = false;
+        /**
+         * @description
+         *
+         * Permite selecionar um item da tabela clicando na linha.
+         *
+         * > Caso haja necessidade de selecionar o item apenas via radio ou checkbox, deve-se definir esta propriedade como `false`.
+         *
+         * @default `true`
+         */
+        this.selectableEntireLine = true;
         /**
          * @optional
          *
@@ -14909,6 +15001,9 @@ class PoTableBaseComponent {
         this.emitSelectEvents(row);
         this.configAfterSelectRow(this.items, row);
     }
+    hasSelectableRow() {
+        return this.selectable && this.selectableEntireLine;
+    }
     selectDetailRow(row) {
         this.emitSelectEvents(row);
     }
@@ -15106,7 +15201,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", columnRestoreManager: "p-restore-column-manager" }, 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"], selectableEntireLine: ["p-selectable-entire-line", "selectableEntireLine"], 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);
@@ -15134,6 +15229,9 @@ __decorate([
 __decorate([
     InputBoolean()
 ], PoTableBaseComponent.prototype, "singleSelect", void 0);
+__decorate([
+    InputBoolean()
+], PoTableBaseComponent.prototype, "selectableEntireLine", void 0);
 __decorate([
     InputBoolean()
 ], PoTableBaseComponent.prototype, "actionRight", void 0);
@@ -15166,6 +15264,9 @@ __decorate([
         }], singleSelect: [{
             type: Input,
             args: ['p-single-select']
+        }], selectableEntireLine: [{
+            type: Input,
+            args: ['p-selectable-entire-line']
         }], actionRight: [{
             type: Input,
             args: ['p-actions-right']
@@ -16010,17 +16111,21 @@ PoTableSubtitleFooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
         }] }); })();
 
 const _c0$W = ["noColumnsHeader"];
-const _c1$q = ["popup"];
-const _c2$b = ["tableFooter"];
-const _c3$6 = ["tableWrapper"];
-const _c4$4 = ["poTableTbody"];
-const _c5$2 = ["poTableThead"];
-const _c6$2 = ["poTableTbodyVirtual"];
-const _c7$1 = ["columnManager"];
-const _c8$1 = ["columnActionLeft"];
-const _c9 = ["columnManagerTarget"];
-const _c10 = ["actionsIconElement"];
-const _c11 = ["actionsElement"];
+const _c1$q = ["noColumnsHeaderFixed"];
+const _c2$b = ["popup"];
+const _c3$6 = ["tableFooter"];
+const _c4$4 = ["tableWrapper"];
+const _c5$2 = ["poTableTbody"];
+const _c6$2 = ["poTableThead"];
+const _c7$1 = ["poTableTbodyVirtual"];
+const _c8$1 = ["columnManager"];
+const _c9 = ["columnManagerFixed"];
+const _c10 = ["columnActionLeft"];
+const _c11 = ["columnActionLeftFixed"];
+const _c12 = ["columnManagerTarget"];
+const _c13 = ["columnManagerTargetFixed"];
+const _c14 = ["actionsIconElement"];
+const _c15 = ["actionsElement"];
 function PoTableComponent_po_container_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -16177,27 +16282,27 @@ function PoTableComponent_ng_template_4_th_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r45.height)("ngIfThen", _r19)("ngIfElse", _r21);
 } }
-function PoTableComponent_ng_template_4_th_7_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+function PoTableComponent_ng_template_4_th_7_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c12 = function (a0) { return { $implicit: a0 }; };
+const _c16 = function (a0) { return { $implicit: a0 }; };
 function PoTableComponent_ng_template_4_th_7_Template(rf, ctx) { if (rf & 1) {
-    const _r63 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 54, 55);
-    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 i0.ɵɵresetView(ctx_r62.sortColumn(column_r58)); });
-    i0.ɵɵelementStart(2, "div", 56);
-    i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_th_7_ng_container_3_Template, 1, 0, "ng-container", 57);
+    const _r62 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th", 54);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_4_th_7_Template_th_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r62); const column_r58 = restoredCtx.$implicit; const ctx_r61 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r61.sortColumn(column_r58)); });
+    i0.ɵɵelementStart(1, "div", 55);
+    i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_th_7_ng_container_2_Template, 1, 0, "ng-container", 56);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const column_r58 = ctx.$implicit;
     const ctx_r46 = i0.ɵɵnextContext(2);
     const _r17 = i0.ɵɵreference(19);
-    i0.ɵɵstyleProp("width", column_r58.width)("max-width", column_r58.width)("min-width", column_r58.width || "50px");
+    i0.ɵɵstyleProp("width", column_r58.width)("max-width", column_r58.width)("min-width", column_r58.width);
     i0.ɵɵclassProp("po-clickable", ctx_r46.sort && column_r58.sortable !== false || ctx_r46.hasService)("po-table-header-subtitle", column_r58.type === "subtitle");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(1);
     i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r46.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", _r17)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c12, column_r58));
+    i0.ɵɵproperty("ngTemplateOutlet", _r17)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c16, column_r58));
 } }
 function PoTableComponent_ng_template_4_th_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "th", 50);
@@ -16209,16 +16314,16 @@ function PoTableComponent_ng_template_4_th_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("po-table-header-single-action", ctx_r48.isSingleAction && !ctx_r48.hideColumnsManager)("po-table-header-actions", !ctx_r48.isSingleAction);
 } }
 function PoTableComponent_ng_template_4_th_10_Template(rf, ctx) { if (rf & 1) {
-    const _r67 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", null, 58)(2, "div")(3, "button", 59, 60);
-    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 i0.ɵɵresetView(ctx_r66.onOpenColumnManager()); });
+    const _r66 = 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(_r66); const ctx_r65 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r65.onOpenColumnManager()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const _r64 = i0.ɵɵreference(1);
+    const _r63 = i0.ɵɵreference(1);
     const ctx_r49 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("po-table-header-column-manager", !ctx_r49.isSingleAction || !ctx_r49.actionRight)("po-table-header-column-manager-border", !ctx_r49.height && ctx_r49.container)("po-table-header-single-action", ctx_r49.isSingleAction && ctx_r49.actionRight);
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("width", ctx_r49.height && ctx_r49.visibleActions.length ? _r64.offsetWidth : undefined, "px");
+    i0.ɵɵstyleProp("width", ctx_r49.height && ctx_r49.visibleActions.length ? _r63.offsetWidth : undefined, "px");
     i0.ɵɵclassProp("po-table-header-column-manager-border", ctx_r49.height && ctx_r49.container)("po-table-header-column-manager-fixed-inner", ctx_r49.height);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("p-tooltip", ctx_r49.literals.columnsManager);
@@ -16230,7 +16335,7 @@ function PoTableComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_th_4_Template, 1, 0, "th", 41);
     i0.ɵɵtemplate(5, PoTableComponent_ng_template_4_th_5_Template, 2, 4, "th", 42);
     i0.ɵɵtemplate(6, PoTableComponent_ng_template_4_th_6_Template, 3, 3, "th", 43);
-    i0.ɵɵtemplate(7, PoTableComponent_ng_template_4_th_7_Template, 4, 20, "th", 44);
+    i0.ɵɵtemplate(7, PoTableComponent_ng_template_4_th_7_Template, 3, 20, "th", 44);
     i0.ɵɵtemplate(8, PoTableComponent_ng_template_4_th_8_Template, 1, 0, "th", 41);
     i0.ɵɵtemplate(9, PoTableComponent_ng_template_4_th_9_Template, 1, 4, "th", 45);
     i0.ɵɵtemplate(10, PoTableComponent_ng_template_4_th_10_Template, 5, 14, "th", 46);
@@ -16258,114 +16363,114 @@ function PoTableComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r5.hasValidColumns && !ctx_r5.hideColumnsManager);
 } }
 function PoTableComponent_ng_template_6_tbody_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tbody", 64)(1, "tr", 65)(2, "td", 66)(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_r69 = i0.ɵɵnextContext(2);
+    const ctx_r68 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("colSpan", ctx_r69.columnCount);
+    i0.ɵɵproperty("colSpan", ctx_r68.columnCount);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r69.literals.noData, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r68.literals.noData, " ");
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "td", 47);
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_2_ng_container_1_Template, 1, 0, "ng-container", 57);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_2_ng_container_1_Template, 1, 0, "ng-container", 56);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r74 = i0.ɵɵnextContext(3);
+    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_r74.singleSelect ? _r13 : _r15)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c12, row_r72));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r73.singleSelect ? _r13 : _r15)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c16, row_r71));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_3_ng_template_1_Template(rf, ctx) { }
-const _c13 = function (a0, a1) { return { row: a0, rowIndex: a1 }; };
+const _c17 = function (a0, a1) { return { row: a0, rowIndex: a1 }; };
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_3_Template(rf, ctx) { if (rf & 1) {
-    const _r90 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 72);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_3_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r90); const row_r72 = i0.ɵɵnextContext().$implicit; const ctx_r88 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r88.toggleDetail(row_r72)); });
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_3_ng_template_1_Template, 0, 0, "ng-template", 73);
+    const _r89 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 71);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_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 i0.ɵɵresetView(ctx_r87.toggleDetail(row_r71)); });
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_3_ng_template_1_Template, 0, 0, "ng-template", 72);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r91 = i0.ɵɵnextContext();
-    const row_r72 = ctx_r91.$implicit;
-    const rowIndex_r73 = ctx_r91.index;
+    const ctx_r90 = i0.ɵɵnextContext();
+    const row_r71 = ctx_r90.$implicit;
+    const rowIndex_r72 = ctx_r90.index;
     i0.ɵɵnextContext(3);
     const _r11 = i0.ɵɵreference(13);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r72, rowIndex_r73));
+    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r71, rowIndex_r72));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_4_ng_template_0_Template(rf, ctx) { }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoTableComponent_ng_template_6_ng_container_4_tbody_1_4_ng_template_0_Template, 0, 0, "ng-template", 73);
+    i0.ɵɵtemplate(0, PoTableComponent_ng_template_6_ng_container_4_tbody_1_4_ng_template_0_Template, 0, 0, "ng-template", 72);
 } if (rf & 2) {
-    const ctx_r93 = i0.ɵɵnextContext();
-    const row_r72 = ctx_r93.$implicit;
-    const rowIndex_r73 = ctx_r93.index;
+    const ctx_r92 = i0.ɵɵnextContext();
+    const row_r71 = ctx_r92.$implicit;
+    const rowIndex_r72 = ctx_r92.index;
     i0.ɵɵnextContext(3);
     const _r23 = i0.ɵɵreference(25);
-    i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r72, rowIndex_r73));
+    i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r71, rowIndex_r72));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_5_ng_template_1_Template(rf, ctx) { }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_5_Template(rf, ctx) { if (rf & 1) {
-    const _r97 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 72);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_5_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r97); const row_r72 = i0.ɵɵnextContext().$implicit; const ctx_r95 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r95.toggleDetail(row_r72)); });
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_5_ng_template_1_Template, 0, 0, "ng-template", 73);
+    const _r96 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 71);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_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 i0.ɵɵresetView(ctx_r94.toggleDetail(row_r71)); });
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_5_ng_template_1_Template, 0, 0, "ng-template", 72);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r98 = i0.ɵɵnextContext();
-    const row_r72 = ctx_r98.$implicit;
-    const rowIndex_r73 = ctx_r98.index;
+    const ctx_r97 = i0.ɵɵnextContext();
+    const row_r71 = ctx_r97.$implicit;
+    const rowIndex_r72 = ctx_r97.index;
     i0.ɵɵnextContext(3);
     const _r11 = i0.ɵɵreference(13);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r72, rowIndex_r73));
+    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r71, rowIndex_r72));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_2_ng_container_1_Template, 1, 0, "ng-container", 57);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_2_ng_container_1_Template, 1, 0, "ng-container", 56);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r101 = 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_r101.getTemplate(column_r99))("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c12, ctx_r101.getCellData(row_r72, column_r99)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r100.getTemplate(column_r98))("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c16, ctx_r100.getCellData(row_r71, column_r98)));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c14 = function (a0, a1) { return { row: a0, column: a1 }; };
+const _c18 = function (a0, a1) { return { row: a0, column: a1 }; };
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_3_ng_container_1_Template, 1, 0, "ng-container", 57);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_3_ng_container_1_Template, 1, 0, "ng-container", 56);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r102 = 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_r102.tableCellTemplate == null ? null : ctx_r102.tableCellTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c14, row_r72, column_r99));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r101.tableCellTemplate == null ? null : ctx_r101.tableCellTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c18, row_r71, column_r98));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_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_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r103 = 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_r103.getBooleanLabel(ctx_r103.getCellData(row_r72, column_r99), column_r99), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r102.getBooleanLabel(ctx_r102.getCellData(row_r71, column_r98), column_r98), " ");
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -16373,11 +16478,11 @@ function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_5_Templ
     i0.ɵɵpipe(2, "currency");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r104 = 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_r104.getCellData(row_r72, column_r99), column_r99.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_6_ng_container_4_tbody_1_td_6_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -16385,11 +16490,11 @@ function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_6_Templ
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r105 = 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_r105.getCellData(row_r72, column_r99), column_r99.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_6_ng_container_4_tbody_1_td_6_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -16397,11 +16502,11 @@ function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_7_Templ
     i0.ɵɵpipe(2, "po_time");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r106 = 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_r106.getCellData(row_r72, column_r99), column_r99.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_6_ng_container_4_tbody_1_td_6_span_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -16409,106 +16514,106 @@ function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_8_Templ
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r107 = 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_r107.getCellData(row_r72, column_r99), column_r99.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_6_ng_container_4_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_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r108 = 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_r108.formatNumber(ctx_r108.getCellData(row_r72, column_r99), column_r99.format), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r107.formatNumber(ctx_r107.getCellData(row_r71, column_r98), column_r98.format), " ");
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_po_table_column_link_10_Template(rf, ctx) { if (rf & 1) {
-    const _r134 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-table-column-link", 80);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_po_table_column_link_10_Template_po_table_column_link_click_0_listener($event) { i0.ɵɵrestoreView(_r134); const column_r99 = i0.ɵɵnextContext().$implicit; const row_r72 = i0.ɵɵnextContext().$implicit; const ctx_r132 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r132.onClickLink($event, row_r72, column_r99)); });
+    const _r133 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-table-column-link", 79);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_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 i0.ɵɵresetView(ctx_r131.onClickLink($event, row_r71, column_r98)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r109 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("p-action", column_r99.action)("p-disabled", ctx_r109.checkDisabled(row_r72, column_r99))("p-link", row_r72[column_r99.link])("p-row", row_r72)("p-value", ctx_r109.getCellData(row_r72, column_r99));
+    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_6_ng_container_4_tbody_1_td_6_po_table_column_icon_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "po-table-column-icon", 81);
+    i0.ɵɵelement(0, "po-table-column-icon", 80);
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r110 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("p-column", column_r99)("p-icons", ctx_r110.getColumnIcons(row_r72, column_r99))("p-row", row_r72);
+    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_6_ng_container_4_tbody_1_td_6_span_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "po-table-subtitle-circle", 82);
+    i0.ɵɵelement(1, "po-table-subtitle-circle", 81);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r111 = 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_r111.getSubtitleColumn(row_r72, column_r99));
+    i0.ɵɵproperty("p-subtitle", ctx_r110.getSubtitleColumn(row_r71, column_r98));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "po-table-column-label", 83);
+    i0.ɵɵelement(1, "po-table-column-label", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r112 = 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_r112.getColumnLabel(row_r72, column_r99));
+    i0.ɵɵproperty("p-value", ctx_r111.getColumnLabel(row_r71, column_r98));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_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_r99 = i0.ɵɵnextContext().$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r113 = 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_r113.getCellData(row_r72, column_r99));
+    i0.ɵɵtextInterpolate(ctx_r112.getCellData(row_r71, column_r98));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_Template(rf, ctx) { if (rf & 1) {
-    const _r147 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 74);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r147); const row_r72 = i0.ɵɵnextContext().$implicit; const ctx_r146 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r146.selectable ? ctx_r146.selectRow(row_r72) : "javascript:;"); });
-    i0.ɵɵelementStart(1, "div", 75);
-    i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_Template_div_mouseenter_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r147); const column_r99 = restoredCtx.$implicit; const row_r72 = i0.ɵɵnextContext().$implicit; const ctx_r149 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r149.tooltipMouseEnter($event, column_r99, row_r72)); })("mouseleave", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r147); const ctx_r151 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r151.tooltipMouseLeave()); });
-    i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_2_Template, 2, 4, "span", 76);
-    i0.ɵɵtemplate(3, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_3_Template, 2, 5, "span", 76);
-    i0.ɵɵtemplate(4, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_4_Template, 2, 1, "span", 76);
-    i0.ɵɵtemplate(5, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_5_Template, 3, 6, "span", 76);
-    i0.ɵɵtemplate(6, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_6_Template, 3, 4, "span", 76);
-    i0.ɵɵtemplate(7, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_7_Template, 3, 4, "span", 76);
-    i0.ɵɵtemplate(8, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_8_Template, 3, 4, "span", 76);
-    i0.ɵɵtemplate(9, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_9_Template, 2, 1, "span", 76);
-    i0.ɵɵtemplate(10, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_po_table_column_link_10_Template, 1, 5, "po-table-column-link", 77);
-    i0.ɵɵtemplate(11, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_po_table_column_icon_11_Template, 1, 3, "po-table-column-icon", 78);
-    i0.ɵɵtemplate(12, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_12_Template, 2, 1, "span", 76);
-    i0.ɵɵtemplate(13, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_13_Template, 2, 1, "span", 76);
-    i0.ɵɵtemplate(14, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_14_Template, 2, 1, "span", 79);
+    const _r146 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 73);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_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 i0.ɵɵresetView(ctx_r145.hasSelectableRow() ? ctx_r145.selectRow(row_r71) : "javascript:;"); });
+    i0.ɵɵelementStart(1, "div", 74);
+    i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_6_ng_container_4_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 i0.ɵɵresetView(ctx_r148.tooltipMouseEnter($event, column_r98, row_r71)); })("mouseleave", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r146); const ctx_r150 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r150.tooltipMouseLeave()); });
+    i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_2_Template, 2, 4, "span", 75);
+    i0.ɵɵtemplate(3, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_3_Template, 2, 5, "span", 75);
+    i0.ɵɵtemplate(4, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_4_Template, 2, 1, "span", 75);
+    i0.ɵɵtemplate(5, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_5_Template, 3, 6, "span", 75);
+    i0.ɵɵtemplate(6, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_6_Template, 3, 4, "span", 75);
+    i0.ɵɵtemplate(7, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_7_Template, 3, 4, "span", 75);
+    i0.ɵɵtemplate(8, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_8_Template, 3, 4, "span", 75);
+    i0.ɵɵtemplate(9, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_9_Template, 2, 1, "span", 75);
+    i0.ɵɵtemplate(10, PoTableComponent_ng_template_6_ng_container_4_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_4_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_4_tbody_1_td_6_span_12_Template, 2, 1, "span", 75);
+    i0.ɵɵtemplate(13, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_13_Template, 2, 1, "span", 75);
+    i0.ɵɵtemplate(14, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_span_14_Template, 2, 1, "span", 78);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const column_r99 = ctx.$implicit;
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r78 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("width", column_r99.width)("max-width", column_r99.width)("min-width", column_r99.width);
-    i0.ɵɵclassProp("po-table-column", column_r99.type !== "icon")("po-table-column-right", column_r99.type === "currency" || column_r99.type === "number")("po-table-column-center", column_r99.type === "subtitle")("po-table-column-icons", column_r99.type === "icon");
-    i0.ɵɵproperty("ngClass", ctx_r78.getClassColor(row_r72, column_r99));
+    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.ɵɵstyleProp("width", ctx_r78.noColumnsHeader == null ? null : ctx_r78.noColumnsHeader.nativeElement.parentElement == null ? null : ctx_r78.noColumnsHeader.nativeElement.parentElement.offsetWidth, "px");
-    i0.ɵɵclassProp("po-table-body-ellipsis", ctx_r78.hideTextOverflow);
-    i0.ɵɵproperty("ngSwitch", column_r99.type)("p-tooltip", ctx_r78.tooltipText);
+    i0.ɵɵstyleProp("width", ctx_r77.noColumnsHeaderFixed == null ? null : ctx_r77.noColumnsHeaderFixed.nativeElement.parentElement == null ? null : ctx_r77.noColumnsHeaderFixed.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);
@@ -16536,127 +16641,127 @@ function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_Template(rf,
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_7_ng_template_1_Template(rf, ctx) { }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_7_Template(rf, ctx) { if (rf & 1) {
-    const _r156 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 72);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_7_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r156); const row_r72 = i0.ɵɵnextContext().$implicit; const ctx_r154 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r154.toggleDetail(row_r72)); });
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_7_ng_template_1_Template, 0, 0, "ng-template", 73);
+    const _r155 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 71);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_6_ng_container_4_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 i0.ɵɵresetView(ctx_r153.toggleDetail(row_r71)); });
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_7_ng_template_1_Template, 0, 0, "ng-template", 72);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r157 = i0.ɵɵnextContext();
-    const row_r72 = ctx_r157.$implicit;
-    const rowIndex_r73 = ctx_r157.index;
+    const ctx_r156 = i0.ɵɵnextContext();
+    const row_r71 = ctx_r156.$implicit;
+    const rowIndex_r72 = ctx_r156.index;
     i0.ɵɵnextContext(3);
     const _r11 = i0.ɵɵreference(13);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r72, rowIndex_r73));
+    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r71, rowIndex_r72));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_8_ng_template_0_Template(rf, ctx) { }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoTableComponent_ng_template_6_ng_container_4_tbody_1_8_ng_template_0_Template, 0, 0, "ng-template", 73);
+    i0.ɵɵtemplate(0, PoTableComponent_ng_template_6_ng_container_4_tbody_1_8_ng_template_0_Template, 0, 0, "ng-template", 72);
 } if (rf & 2) {
-    const ctx_r159 = i0.ɵɵnextContext();
-    const row_r72 = ctx_r159.$implicit;
-    const rowIndex_r73 = ctx_r159.index;
+    const ctx_r158 = i0.ɵɵnextContext();
+    const row_r71 = ctx_r158.$implicit;
+    const rowIndex_r72 = ctx_r158.index;
     i0.ɵɵnextContext(3);
     const _r23 = i0.ɵɵreference(25);
-    i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r72, rowIndex_r73));
+    i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r71, rowIndex_r72));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_ng_container_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "td", 84);
+    i0.ɵɵelement(1, "td", 83);
     i0.ɵɵelementContainerEnd();
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "td", 85);
+    i0.ɵɵelement(0, "td", 84);
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_tr_11_ng_template_2_Template(rf, ctx) { }
-const _c15 = function (a0, a1) { return { $implicit: a0, rowIndex: a1 }; };
+const _c19 = function (a0, a1) { return { $implicit: a0, rowIndex: a1 }; };
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_tr_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 86);
-    i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_4_tbody_1_tr_11_ng_template_2_Template, 0, 0, "ng-template", 73);
+    i0.ɵɵelementStart(0, "tr")(1, "td", 85);
+    i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_4_tbody_1_tr_11_ng_template_2_Template, 0, 0, "ng-template", 72);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r161 = i0.ɵɵnextContext();
-    const row_r72 = ctx_r161.$implicit;
-    const rowIndex_r73 = ctx_r161.index;
-    const ctx_r83 = 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_r83.columnCountForMasterDetail);
+    i0.ɵɵproperty("colSpan", ctx_r82.columnCountForMasterDetail);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r83.tableRowTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c15, row_r72, rowIndex_r73));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r82.tableRowTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c19, row_r71, rowIndex_r72));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_tbody_1_tr_12_Template(rf, ctx) { if (rf & 1) {
-    const _r163 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td", 87)(2, "po-table-detail", 88);
-    i0.ɵɵlistener("p-select-row", function PoTableComponent_ng_template_6_ng_container_4_tbody_1_tr_12_Template_po_table_detail_p_select_row_2_listener($event) { i0.ɵɵrestoreView(_r163); const ctx_r162 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r162.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_4_tbody_1_tr_12_Template_po_table_detail_p_select_row_2_listener($event) { i0.ɵɵrestoreView(_r162); const ctx_r161 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r161.selectDetailRow($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const row_r72 = i0.ɵɵnextContext().$implicit;
-    const ctx_r84 = i0.ɵɵnextContext(3);
+    const row_r71 = i0.ɵɵnextContext().$implicit;
+    const ctx_r83 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("colSpan", ctx_r84.columnCountForMasterDetail);
+    i0.ɵɵproperty("colSpan", ctx_r83.columnCountForMasterDetail);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-selectable", ctx_r84.selectable && !ctx_r84.detailHideSelect)("p-detail", ctx_r84.columnMasterDetail.detail)("p-items", row_r72[ctx_r84.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_6_ng_container_4_tbody_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tbody", 64)(1, "tr", 68);
+    i0.ɵɵelementStart(0, "tbody", 63)(1, "tr", 67);
     i0.ɵɵtemplate(2, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_2_Template, 2, 4, "td", 40);
-    i0.ɵɵtemplate(3, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_3_Template, 2, 5, "td", 69);
+    i0.ɵɵtemplate(3, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_3_Template, 2, 5, "td", 68);
     i0.ɵɵtemplate(4, PoTableComponent_ng_template_6_ng_container_4_tbody_1_4_Template, 1, 5, null, 23);
-    i0.ɵɵtemplate(5, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_5_Template, 2, 5, "td", 69);
-    i0.ɵɵtemplate(6, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_Template, 15, 33, "td", 70);
-    i0.ɵɵtemplate(7, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_7_Template, 2, 5, "td", 69);
+    i0.ɵɵtemplate(5, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_5_Template, 2, 5, "td", 68);
+    i0.ɵɵtemplate(6, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_6_Template, 15, 33, "td", 69);
+    i0.ɵɵtemplate(7, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_7_Template, 2, 5, "td", 68);
     i0.ɵɵtemplate(8, PoTableComponent_ng_template_6_ng_container_4_tbody_1_8_Template, 1, 5, null, 23);
     i0.ɵɵtemplate(9, PoTableComponent_ng_template_6_ng_container_4_tbody_1_ng_container_9_Template, 2, 0, "ng-container", 23);
-    i0.ɵɵtemplate(10, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_10_Template, 1, 0, "td", 71);
+    i0.ɵɵtemplate(10, PoTableComponent_ng_template_6_ng_container_4_tbody_1_td_10_Template, 1, 0, "td", 70);
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(11, PoTableComponent_ng_template_6_ng_container_4_tbody_1_tr_11_Template, 3, 6, "tr", 23);
     i0.ɵɵtemplate(12, PoTableComponent_ng_template_6_ng_container_4_tbody_1_tr_12_Template, 3, 4, "tr", 23);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r72 = ctx.$implicit;
-    const rowIndex_r73 = ctx.index;
-    const ctx_r71 = 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_r72.$selected || row_r72.$selected === null && ctx_r71.selectable);
+    i0.ɵɵclassProp("po-table-row-active", row_r71.$selected || row_r71.$selected === null && ctx_r70.selectable);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r71.selectable);
+    i0.ɵɵproperty("ngIf", ctx_r70.selectable);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r71.columnMasterDetail && !ctx_r71.hideDetail && !ctx_r71.hasRowTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r70.columnMasterDetail && !ctx_r70.hideDetail && !ctx_r70.hasRowTemplate);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r71.actionRight && (ctx_r71.visibleActions.length > 1 || ctx_r71.isSingleAction));
+    i0.ɵɵproperty("ngIf", !ctx_r70.actionRight && (ctx_r70.visibleActions.length > 1 || ctx_r70.isSingleAction));
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r71.hasRowTemplate && !ctx_r71.hasRowTemplateWithArrowDirectionRight);
+    i0.ɵɵproperty("ngIf", ctx_r70.hasRowTemplate && !ctx_r70.hasRowTemplateWithArrowDirectionRight);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r71.mainColumns)("ngForTrackBy", ctx_r71.trackBy);
+    i0.ɵɵproperty("ngForOf", ctx_r70.mainColumns)("ngForTrackBy", ctx_r70.trackBy);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r71.hasRowTemplateWithArrowDirectionRight);
+    i0.ɵɵproperty("ngIf", ctx_r70.hasRowTemplateWithArrowDirectionRight);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r71.actionRight);
+    i0.ɵɵproperty("ngIf", ctx_r70.actionRight);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r71.actionRight && (ctx_r71.visibleActions.length > 1 || ctx_r71.isSingleAction) && !ctx_r71.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_r71.hasVisibleActions && !ctx_r71.hideColumnsManager && !ctx_r71.hasRowTemplateWithArrowDirectionRight);
+    i0.ɵɵproperty("ngIf", !ctx_r70.hasVisibleActions && !ctx_r70.hideColumnsManager && !ctx_r70.hasRowTemplateWithArrowDirectionRight);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r71.hasMainColumns && ctx_r71.hasRowTemplate && row_r72.$showDetail && ctx_r71.isShowRowTemplate(row_r72, rowIndex_r73));
+    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_r71.hasMainColumns && ctx_r71.isShowMasterDetail(row_r72));
+    i0.ɵɵproperty("ngIf", ctx_r70.hasMainColumns && ctx_r70.isShowMasterDetail(row_r71));
 } }
 function PoTableComponent_ng_template_6_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_Template, 13, 14, "tbody", 67);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_6_ng_container_4_tbody_1_Template, 13, 14, "tbody", 66);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r70 = i0.ɵɵnextContext(2);
+    const ctx_r69 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("cdkVirtualForOf", ctx_r70.items)("cdkVirtualForTrackBy", ctx_r70.trackBy);
+    i0.ɵɵproperty("cdkVirtualForOf", ctx_r69.items)("cdkVirtualForTrackBy", ctx_r69.trackBy);
 } }
 function PoTableComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    const _r166 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "cdk-virtual-scroll-viewport", 61, 62);
-    i0.ɵɵlistener("scroll", function PoTableComponent_ng_template_6_Template_cdk_virtual_scroll_viewport_scroll_0_listener() { i0.ɵɵrestoreView(_r166); const ctx_r165 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r165.syncronizeHorizontalScroll()); });
+    const _r165 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "cdk-virtual-scroll-viewport", 60, 61);
+    i0.ɵɵlistener("scroll", function PoTableComponent_ng_template_6_Template_cdk_virtual_scroll_viewport_scroll_0_listener() { i0.ɵɵrestoreView(_r165); const ctx_r164 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r164.syncronizeHorizontalScroll()); });
     i0.ɵɵelementStart(2, "table", 39);
-    i0.ɵɵtemplate(3, PoTableComponent_ng_template_6_tbody_3_Template, 5, 2, "tbody", 63);
+    i0.ɵɵtemplate(3, PoTableComponent_ng_template_6_tbody_3_Template, 5, 2, "tbody", 62);
     i0.ɵɵtemplate(4, PoTableComponent_ng_template_6_ng_container_4_Template, 2, 2, "ng-container", 23);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -16671,68 +16776,68 @@ function PoTableComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r7.hasMainColumns);
 } }
 function PoTableComponent_ng_template_8_th_3_po_checkbox_2_Template(rf, ctx) { if (rf & 1) {
-    const _r179 = i0.ɵɵgetCurrentView();
+    const _r178 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-checkbox", 49);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_3_po_checkbox_2_Template_po_checkbox_click_0_listener() { i0.ɵɵrestoreView(_r179); const ctx_r178 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r178.selectAllRows()); })("p-change", function PoTableComponent_ng_template_8_th_3_po_checkbox_2_Template_po_checkbox_p_change_0_listener() { i0.ɵɵrestoreView(_r179); const ctx_r180 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r180.selectAllRows()); })("ngModelChange", function PoTableComponent_ng_template_8_th_3_po_checkbox_2_Template_po_checkbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r179); const ctx_r181 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r181.selectAll = $event); });
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_3_po_checkbox_2_Template_po_checkbox_click_0_listener() { i0.ɵɵrestoreView(_r178); const ctx_r177 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r177.selectAllRows()); })("p-change", function PoTableComponent_ng_template_8_th_3_po_checkbox_2_Template_po_checkbox_p_change_0_listener() { i0.ɵɵrestoreView(_r178); const ctx_r179 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r179.selectAllRows()); })("ngModelChange", function PoTableComponent_ng_template_8_th_3_po_checkbox_2_Template_po_checkbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r178); const ctx_r180 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r180.selectAll = $event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r177 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngModel", ctx_r177.selectAll);
+    const ctx_r176 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngModel", ctx_r176.selectAll);
 } }
 function PoTableComponent_ng_template_8_th_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th", 47)(1, "div");
     i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_th_3_po_checkbox_2_Template, 1, 1, "po-checkbox", 48);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r167 = i0.ɵɵnextContext(2);
+    const ctx_r166 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r167.height);
+    i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r166.height);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r167.hideSelectAll);
+    i0.ɵɵproperty("ngIf", !ctx_r166.hideSelectAll);
 } }
 function PoTableComponent_ng_template_8_th_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "th", 50);
 } }
 function PoTableComponent_ng_template_8_th_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "th", null, 51);
+    i0.ɵɵelement(0, "th", null, 88);
 } if (rf & 2) {
-    const ctx_r169 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("po-table-header-master-detail", !ctx_r169.isSingleAction)("po-table-header-single-action", ctx_r169.isSingleAction);
+    const ctx_r168 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("po-table-header-master-detail", !ctx_r168.isSingleAction)("po-table-header-single-action", ctx_r168.isSingleAction);
 } }
 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.ɵɵelementStart(0, "th", 52, 53);
+    i0.ɵɵelementStart(0, "th", 52, 89);
     i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_th_6_ng_container_2_Template, 1, 0, "ng-container", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r170 = i0.ɵɵnextContext(2);
+    const ctx_r169 = i0.ɵɵnextContext(2);
     const _r19 = i0.ɵɵreference(21);
     const _r21 = i0.ɵɵreference(23);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r170.height)("ngIfThen", _r19)("ngIfElse", _r21);
+    i0.ɵɵproperty("ngIf", ctx_r169.height)("ngIfThen", _r19)("ngIfElse", _r21);
 } }
-function PoTableComponent_ng_template_8_th_7_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+function PoTableComponent_ng_template_8_th_7_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function PoTableComponent_ng_template_8_th_7_Template(rf, ctx) { if (rf & 1) {
-    const _r190 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 54, 55);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_7_Template_th_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r190); const column_r185 = restoredCtx.$implicit; const ctx_r189 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r189.sortColumn(column_r185)); });
-    i0.ɵɵelementStart(2, "div", 56);
-    i0.ɵɵtemplate(3, PoTableComponent_ng_template_8_th_7_ng_container_3_Template, 1, 0, "ng-container", 57);
+    const _r188 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th", 54);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_7_Template_th_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r188); const column_r184 = restoredCtx.$implicit; const ctx_r187 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r187.sortColumn(column_r184)); });
+    i0.ɵɵelementStart(1, "div", 55);
+    i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_th_7_ng_container_2_Template, 1, 0, "ng-container", 56);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const column_r185 = ctx.$implicit;
-    const ctx_r171 = i0.ɵɵnextContext(2);
+    const column_r184 = ctx.$implicit;
+    const ctx_r170 = i0.ɵɵnextContext(2);
     const _r17 = i0.ɵɵreference(19);
-    i0.ɵɵstyleProp("width", column_r185.width)("max-width", column_r185.width)("min-width", column_r185.width);
-    i0.ɵɵclassProp("po-clickable", ctx_r171.sort && column_r185.sortable !== false || ctx_r171.hasService)("po-table-header-subtitle", column_r185.type === "subtitle");
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r171.height)("po-table-header-flex-right", column_r185.type === "currency" || column_r185.type === "number")("po-table-header-flex-center", column_r185.type === "subtitle");
+    i0.ɵɵstyleProp("width", column_r184.width)("max-width", column_r184.width)("min-width", column_r184.width);
+    i0.ɵɵclassProp("po-clickable", ctx_r170.sort && column_r184.sortable !== false || ctx_r170.hasService)("po-table-header-subtitle", column_r184.type === "subtitle");
+    i0.ɵɵadvance(1);
+    i0.ɵɵclassProp("po-table-header-fixed-inner", ctx_r170.height)("po-table-header-flex-right", column_r184.type === "currency" || column_r184.type === "number")("po-table-header-flex-center", column_r184.type === "subtitle");
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r17)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c12, column_r185));
+    i0.ɵɵproperty("ngTemplateOutlet", _r17)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c16, column_r184));
 } }
 function PoTableComponent_ng_template_8_th_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "th", 50);
@@ -16740,132 +16845,132 @@ function PoTableComponent_ng_template_8_th_8_Template(rf, ctx) { if (rf & 1) {
 function PoTableComponent_ng_template_8_th_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "th");
 } if (rf & 2) {
-    const ctx_r173 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("po-table-header-single-action", ctx_r173.isSingleAction)("po-table-header-actions", !ctx_r173.isSingleAction);
+    const ctx_r172 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("po-table-header-single-action", ctx_r172.isSingleAction)("po-table-header-actions", !ctx_r172.isSingleAction);
 } }
 function PoTableComponent_ng_template_8_th_10_Template(rf, ctx) { if (rf & 1) {
-    const _r194 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", null, 58)(2, "div")(3, "button", 59, 60);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r194); const ctx_r193 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r193.onOpenColumnManager()); });
+    const _r192 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th", null, 90)(2, "div")(3, "button", 58, 91);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_th_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r192); const ctx_r191 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r191.onOpenColumnManager()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const _r191 = i0.ɵɵreference(1);
-    const ctx_r174 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("po-table-header-column-manager", !ctx_r174.isSingleAction || !ctx_r174.actionRight)("po-table-header-column-manager-border", !ctx_r174.height && ctx_r174.container)("po-table-header-single-action", ctx_r174.isSingleAction && ctx_r174.actionRight);
+    const _r189 = i0.ɵɵreference(1);
+    const ctx_r173 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("po-table-header-column-manager", !ctx_r173.isSingleAction || !ctx_r173.actionRight)("po-table-header-column-manager-border", !ctx_r173.height && ctx_r173.container)("po-table-header-single-action", ctx_r173.isSingleAction && ctx_r173.actionRight);
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("width", ctx_r174.height && ctx_r174.visibleActions.length ? _r191.offsetWidth : undefined, "px");
-    i0.ɵɵclassProp("po-table-header-column-manager-border", ctx_r174.height && ctx_r174.container)("po-table-header-column-manager-fixed-inner", ctx_r174.height);
+    i0.ɵɵstyleProp("width", ctx_r173.height && ctx_r173.visibleActions.length ? _r189.offsetWidth : undefined, "px");
+    i0.ɵɵclassProp("po-table-header-column-manager-border", ctx_r173.height && ctx_r173.container)("po-table-header-column-manager-fixed-inner", ctx_r173.height);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-tooltip", ctx_r174.literals.columnsManager);
-    i0.ɵɵattribute("aria-label", ctx_r174.literals.columnsManager);
+    i0.ɵɵproperty("p-tooltip", ctx_r173.literals.columnsManager);
+    i0.ɵɵattribute("aria-label", ctx_r173.literals.columnsManager);
 } }
 function PoTableComponent_ng_template_8_tbody_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tbody", 64)(1, "tr", 65)(2, "td", 66)(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_r175 = i0.ɵɵnextContext(2);
+    const ctx_r174 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("colSpan", ctx_r175.columnCount);
+    i0.ɵɵproperty("colSpan", ctx_r174.columnCount);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r175.literals.noData, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r174.literals.noData, " ");
 } }
 function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_2_ng_container_1_Template(rf, ctx) { if (rf & 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", 47);
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_2_ng_container_1_Template, 1, 0, "ng-container", 57);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_2_ng_container_1_Template, 1, 0, "ng-container", 56);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r198 = i0.ɵɵnextContext(3);
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r196 = i0.ɵɵnextContext(3);
     const _r13 = i0.ɵɵreference(15);
     const _r15 = i0.ɵɵreference(17);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r198.singleSelect ? _r13 : _r15)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c12, row_r196));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r196.singleSelect ? _r13 : _r15)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c16, row_r194));
 } }
 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) {
-    const _r214 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 72);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_3_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r214); const row_r196 = i0.ɵɵnextContext().$implicit; const ctx_r212 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r212.toggleDetail(row_r196)); });
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_3_ng_template_1_Template, 0, 0, "ng-template", 73);
+    const _r212 = 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(_r212); const row_r194 = i0.ɵɵnextContext().$implicit; const ctx_r210 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r210.toggleDetail(row_r194)); });
+    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_r215 = i0.ɵɵnextContext();
-    const row_r196 = ctx_r215.$implicit;
-    const rowIndex_r197 = ctx_r215.index;
+    const ctx_r213 = i0.ɵɵnextContext();
+    const row_r194 = ctx_r213.$implicit;
+    const rowIndex_r195 = ctx_r213.index;
     i0.ɵɵnextContext(3);
     const _r11 = i0.ɵɵreference(13);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r196, rowIndex_r197));
+    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r194, rowIndex_r195));
 } }
 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.ɵɵtemplate(0, PoTableComponent_ng_template_8_ng_container_12_tbody_1_4_ng_template_0_Template, 0, 0, "ng-template", 73);
+    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_r217 = i0.ɵɵnextContext();
-    const row_r196 = ctx_r217.$implicit;
-    const rowIndex_r197 = ctx_r217.index;
+    const ctx_r215 = i0.ɵɵnextContext();
+    const row_r194 = ctx_r215.$implicit;
+    const rowIndex_r195 = ctx_r215.index;
     i0.ɵɵnextContext(3);
     const _r23 = i0.ɵɵreference(25);
-    i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r196, rowIndex_r197));
+    i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r194, rowIndex_r195));
 } }
 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 _r221 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 72);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_5_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r221); const row_r196 = i0.ɵɵnextContext().$implicit; const ctx_r219 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r219.toggleDetail(row_r196)); });
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_5_ng_template_1_Template, 0, 0, "ng-template", 73);
+    const _r219 = 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(_r219); const row_r194 = i0.ɵɵnextContext().$implicit; const ctx_r217 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r217.toggleDetail(row_r194)); });
+    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 ctx_r222 = i0.ɵɵnextContext();
-    const row_r196 = ctx_r222.$implicit;
-    const rowIndex_r197 = ctx_r222.index;
+    const ctx_r220 = i0.ɵɵnextContext();
+    const row_r194 = ctx_r220.$implicit;
+    const rowIndex_r195 = ctx_r220.index;
     i0.ɵɵnextContext(3);
     const _r11 = i0.ɵɵreference(13);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r196, rowIndex_r197));
+    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r194, rowIndex_r195));
 } }
 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", 57);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_2_ng_container_1_Template, 1, 0, "ng-container", 56);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r225 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r223 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r225.getTemplate(column_r223))("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c12, ctx_r225.getCellData(row_r196, column_r223)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r223.getTemplate(column_r221))("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c16, ctx_r223.getCellData(row_r194, column_r221)));
 } }
 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_8_ng_container_12_tbody_1_td_6_span_3_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_3_ng_container_1_Template, 1, 0, "ng-container", 57);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_3_ng_container_1_Template, 1, 0, "ng-container", 56);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r226 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r224 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r226.tableCellTemplate == null ? null : ctx_r226.tableCellTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c14, row_r196, column_r223));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r224.tableCellTemplate == null ? null : ctx_r224.tableCellTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c18, row_r194, column_r221));
 } }
 function PoTableComponent_ng_template_8_ng_container_12_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_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r227 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r225 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r227.getBooleanLabel(ctx_r227.getCellData(row_r196, column_r223), column_r223), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r225.getBooleanLabel(ctx_r225.getCellData(row_r194, column_r221), column_r221), " ");
 } }
 function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -16873,11 +16978,11 @@ function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_5_Temp
     i0.ɵɵpipe(2, "currency");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r228 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r226 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind4(2, 1, ctx_r228.getCellData(row_r196, column_r223), column_r223.format, "symbol", "1.2-2"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind4(2, 1, ctx_r226.getCellData(row_r194, column_r221), column_r221.format, "symbol", "1.2-2"), " ");
 } }
 function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -16885,11 +16990,11 @@ function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_6_Temp
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r229 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r227 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r229.getCellData(row_r196, column_r223), column_r223.format || "dd/MM/yyyy"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r227.getCellData(row_r194, column_r221), column_r221.format || "dd/MM/yyyy"), " ");
 } }
 function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -16897,11 +17002,11 @@ function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_7_Temp
     i0.ɵɵpipe(2, "po_time");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r230 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r228 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r230.getCellData(row_r196, column_r223), column_r223.format || "HH:mm:ss.ffffff"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r228.getCellData(row_r194, column_r221), column_r221.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");
@@ -16909,105 +17014,105 @@ function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_8_Temp
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r231 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r229 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r231.getCellData(row_r196, column_r223), column_r223.format || "dd/MM/yyyy HH:mm:ss"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r229.getCellData(row_r194, column_r221), column_r221.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_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r232 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r230 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r232.formatNumber(ctx_r232.getCellData(row_r196, column_r223), column_r223.format), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r230.formatNumber(ctx_r230.getCellData(row_r194, column_r221), column_r221.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 _r258 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-table-column-link", 80);
-    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(_r258); const column_r223 = i0.ɵɵnextContext().$implicit; const row_r196 = i0.ɵɵnextContext().$implicit; const ctx_r256 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r256.onClickLink($event, row_r196, column_r223)); });
+    const _r256 = 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(_r256); const column_r221 = i0.ɵɵnextContext().$implicit; const row_r194 = i0.ɵɵnextContext().$implicit; const ctx_r254 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r254.onClickLink($event, row_r194, column_r221)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r233 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("p-action", column_r223.action)("p-disabled", ctx_r233.checkDisabled(row_r196, column_r223))("p-link", row_r196[column_r223.link])("p-row", row_r196)("p-value", ctx_r233.getCellData(row_r196, column_r223));
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r231 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("p-action", column_r221.action)("p-disabled", ctx_r231.checkDisabled(row_r194, column_r221))("p-link", row_r194[column_r221.link])("p-row", row_r194)("p-value", ctx_r231.getCellData(row_r194, column_r221));
 } }
 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", 81);
+    i0.ɵɵelement(0, "po-table-column-icon", 80);
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r234 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("p-column", column_r223)("p-icons", ctx_r234.getColumnIcons(row_r196, column_r223))("p-row", row_r196);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r232 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("p-column", column_r221)("p-icons", ctx_r232.getColumnIcons(row_r194, column_r221))("p-row", row_r194);
 } }
 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", 82);
+    i0.ɵɵelement(1, "po-table-subtitle-circle", 81);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r235 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r233 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-subtitle", ctx_r235.getSubtitleColumn(row_r196, column_r223));
+    i0.ɵɵproperty("p-subtitle", ctx_r233.getSubtitleColumn(row_r194, column_r221));
 } }
 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", 83);
+    i0.ɵɵelement(1, "po-table-column-label", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const column_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r236 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r234 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-value", ctx_r236.getColumnLabel(row_r196, column_r223));
+    i0.ɵɵproperty("p-value", ctx_r234.getColumnLabel(row_r194, column_r221));
 } }
 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_r223 = i0.ɵɵnextContext().$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r237 = i0.ɵɵnextContext(3);
+    const column_r221 = i0.ɵɵnextContext().$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r235 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r237.getCellData(row_r196, column_r223));
+    i0.ɵɵtextInterpolate(ctx_r235.getCellData(row_r194, column_r221));
 } }
 function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template(rf, ctx) { if (rf & 1) {
-    const _r271 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 74);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r271); const row_r196 = i0.ɵɵnextContext().$implicit; const ctx_r270 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r270.selectable ? ctx_r270.selectRow(row_r196) : "javascript:;"); });
-    i0.ɵɵelementStart(1, "div", 75);
-    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(_r271); const column_r223 = restoredCtx.$implicit; const row_r196 = i0.ɵɵnextContext().$implicit; const ctx_r273 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r273.tooltipMouseEnter($event, column_r223, row_r196)); })("mouseleave", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r271); const ctx_r275 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r275.tooltipMouseLeave()); });
-    i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_2_Template, 2, 4, "span", 76);
-    i0.ɵɵtemplate(3, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_3_Template, 2, 5, "span", 76);
-    i0.ɵɵtemplate(4, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_4_Template, 2, 1, "span", 76);
-    i0.ɵɵtemplate(5, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_5_Template, 3, 6, "span", 76);
-    i0.ɵɵtemplate(6, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_6_Template, 3, 4, "span", 76);
-    i0.ɵɵtemplate(7, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_7_Template, 3, 4, "span", 76);
-    i0.ɵɵtemplate(8, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_8_Template, 3, 4, "span", 76);
-    i0.ɵɵtemplate(9, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_9_Template, 2, 1, "span", 76);
-    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", 77);
-    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", 78);
-    i0.ɵɵtemplate(12, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_12_Template, 2, 1, "span", 76);
-    i0.ɵɵtemplate(13, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_13_Template, 2, 1, "span", 76);
-    i0.ɵɵtemplate(14, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_span_14_Template, 2, 1, "span", 79);
+    const _r269 = 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(_r269); const row_r194 = i0.ɵɵnextContext().$implicit; const ctx_r268 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r268.hasSelectableRow() ? ctx_r268.selectRow(row_r194) : "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(_r269); const column_r221 = restoredCtx.$implicit; const row_r194 = i0.ɵɵnextContext().$implicit; const ctx_r271 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r271.tooltipMouseEnter($event, column_r221, row_r194)); })("mouseleave", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r269); const ctx_r273 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r273.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_r223 = ctx.$implicit;
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r202 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("width", column_r223.width)("max-width", column_r223.width)("min-width", column_r223.width);
-    i0.ɵɵclassProp("po-table-column", column_r223.type !== "icon")("po-table-column-right", column_r223.type === "currency" || column_r223.type === "number")("po-table-column-center", column_r223.type === "subtitle")("po-table-column-icons", column_r223.type === "icon");
-    i0.ɵɵproperty("ngClass", ctx_r202.getClassColor(row_r196, column_r223));
+    const column_r221 = ctx.$implicit;
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r200 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("width", column_r221.width)("max-width", column_r221.width)("min-width", column_r221.width);
+    i0.ɵɵclassProp("po-table-column", column_r221.type !== "icon")("po-table-column-right", column_r221.type === "currency" || column_r221.type === "number")("po-table-column-center", column_r221.type === "subtitle")("po-table-column-icons", column_r221.type === "icon");
+    i0.ɵɵproperty("ngClass", ctx_r200.getClassColor(row_r194, column_r221));
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("po-table-body-ellipsis", ctx_r202.hideTextOverflow);
-    i0.ɵɵproperty("ngSwitch", column_r223.type)("p-tooltip", ctx_r202.tooltipText);
+    i0.ɵɵclassProp("po-table-body-ellipsis", ctx_r200.hideTextOverflow);
+    i0.ɵɵproperty("ngSwitch", column_r221.type)("p-tooltip", ctx_r200.tooltipText);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngSwitchCase", "columnTemplate");
     i0.ɵɵadvance(1);
@@ -17035,119 +17140,119 @@ function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template(rf
 } }
 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 _r280 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 72);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_7_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r280); const row_r196 = i0.ɵɵnextContext().$implicit; const ctx_r278 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r278.toggleDetail(row_r196)); });
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_7_ng_template_1_Template, 0, 0, "ng-template", 73);
+    const _r278 = 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(_r278); const row_r194 = i0.ɵɵnextContext().$implicit; const ctx_r276 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r276.toggleDetail(row_r194)); });
+    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_r281 = i0.ɵɵnextContext();
-    const row_r196 = ctx_r281.$implicit;
-    const rowIndex_r197 = ctx_r281.index;
+    const ctx_r279 = i0.ɵɵnextContext();
+    const row_r194 = ctx_r279.$implicit;
+    const rowIndex_r195 = ctx_r279.index;
     i0.ɵɵnextContext(3);
     const _r11 = i0.ɵɵreference(13);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r196, rowIndex_r197));
+    i0.ɵɵproperty("ngTemplateOutlet", _r11)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r194, rowIndex_r195));
 } }
 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", 73);
+    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_r283 = i0.ɵɵnextContext();
-    const row_r196 = ctx_r283.$implicit;
-    const rowIndex_r197 = ctx_r283.index;
+    const ctx_r281 = i0.ɵɵnextContext();
+    const row_r194 = ctx_r281.$implicit;
+    const rowIndex_r195 = ctx_r281.index;
     i0.ɵɵnextContext(3);
     const _r23 = i0.ɵɵreference(25);
-    i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c13, row_r196, rowIndex_r197));
+    i0.ɵɵproperty("ngTemplateOutlet", _r23)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c17, row_r194, rowIndex_r195));
 } }
 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", 90);
+    i0.ɵɵelement(1, "td", 93);
     i0.ɵɵelementContainerEnd();
 } }
 function PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "td", 85);
+    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", 86);
-    i0.ɵɵtemplate(2, PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_11_ng_template_2_Template, 0, 0, "ng-template", 73);
+    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_r285 = i0.ɵɵnextContext();
-    const row_r196 = ctx_r285.$implicit;
-    const rowIndex_r197 = ctx_r285.index;
-    const ctx_r207 = i0.ɵɵnextContext(3);
+    const ctx_r283 = i0.ɵɵnextContext();
+    const row_r194 = ctx_r283.$implicit;
+    const rowIndex_r195 = ctx_r283.index;
+    const ctx_r205 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("colSpan", ctx_r207.columnCountForMasterDetail);
+    i0.ɵɵproperty("colSpan", ctx_r205.columnCountForMasterDetail);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r207.tableRowTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c15, row_r196, rowIndex_r197));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r205.tableRowTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c19, row_r194, rowIndex_r195));
 } }
 function PoTableComponent_ng_template_8_ng_container_12_tbody_1_tr_12_Template(rf, ctx) { if (rf & 1) {
-    const _r287 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td", 87)(2, "po-table-detail", 88);
-    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(_r287); const ctx_r286 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r286.selectDetailRow($event)); });
+    const _r285 = 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(_r285); const ctx_r284 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r284.selectDetailRow($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const row_r196 = i0.ɵɵnextContext().$implicit;
-    const ctx_r208 = i0.ɵɵnextContext(3);
+    const row_r194 = i0.ɵɵnextContext().$implicit;
+    const ctx_r206 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("colSpan", ctx_r208.columnCountForMasterDetail);
+    i0.ɵɵproperty("colSpan", ctx_r206.columnCountForMasterDetail);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-selectable", ctx_r208.selectable && !ctx_r208.detailHideSelect)("p-detail", ctx_r208.columnMasterDetail.detail)("p-items", row_r196[ctx_r208.nameColumnDetail]);
+    i0.ɵɵproperty("p-selectable", ctx_r206.selectable && !ctx_r206.detailHideSelect)("p-detail", ctx_r206.columnMasterDetail.detail)("p-items", row_r194[ctx_r206.nameColumnDetail]);
 } }
 function PoTableComponent_ng_template_8_ng_container_12_tbody_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tbody", 64)(1, "tr", 68);
+    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", 40);
-    i0.ɵɵtemplate(3, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_3_Template, 2, 5, "td", 69);
+    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", 69);
-    i0.ɵɵtemplate(6, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_6_Template, 15, 31, "td", 70);
-    i0.ɵɵtemplate(7, PoTableComponent_ng_template_8_ng_container_12_tbody_1_td_7_Template, 2, 5, "td", 69);
+    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", 71);
+    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_r196 = ctx.$implicit;
-    const rowIndex_r197 = ctx.index;
-    const ctx_r195 = i0.ɵɵnextContext(3);
+    const row_r194 = ctx.$implicit;
+    const rowIndex_r195 = ctx.index;
+    const ctx_r193 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("po-table-row-active", row_r196.$selected || row_r196.$selected === null && ctx_r195.selectable);
+    i0.ɵɵclassProp("po-table-row-active", row_r194.$selected || row_r194.$selected === null && ctx_r193.selectable);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r195.selectable);
+    i0.ɵɵproperty("ngIf", ctx_r193.selectable);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r195.columnMasterDetail && !ctx_r195.hideDetail && !ctx_r195.hasRowTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r193.columnMasterDetail && !ctx_r193.hideDetail && !ctx_r193.hasRowTemplate);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r195.actionRight && (ctx_r195.visibleActions.length > 1 || ctx_r195.isSingleAction));
+    i0.ɵɵproperty("ngIf", !ctx_r193.actionRight && (ctx_r193.visibleActions.length > 1 || ctx_r193.isSingleAction));
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r195.hasRowTemplate && !ctx_r195.hasRowTemplateWithArrowDirectionRight);
+    i0.ɵɵproperty("ngIf", ctx_r193.hasRowTemplate && !ctx_r193.hasRowTemplateWithArrowDirectionRight);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r195.mainColumns)("ngForTrackBy", ctx_r195.trackBy);
+    i0.ɵɵproperty("ngForOf", ctx_r193.mainColumns)("ngForTrackBy", ctx_r193.trackBy);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r195.hasRowTemplateWithArrowDirectionRight);
+    i0.ɵɵproperty("ngIf", ctx_r193.hasRowTemplateWithArrowDirectionRight);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r195.actionRight);
+    i0.ɵɵproperty("ngIf", ctx_r193.actionRight);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r195.actionRight && (ctx_r195.visibleActions.length > 1 || ctx_r195.isSingleAction) && !ctx_r195.hideColumnsManager);
+    i0.ɵɵproperty("ngIf", !ctx_r193.actionRight && (ctx_r193.visibleActions.length > 1 || ctx_r193.isSingleAction) && !ctx_r193.hideColumnsManager);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r195.hasVisibleActions && !ctx_r195.hideColumnsManager && !ctx_r195.hasRowTemplateWithArrowDirectionRight);
+    i0.ɵɵproperty("ngIf", !ctx_r193.hasVisibleActions && !ctx_r193.hideColumnsManager && !ctx_r193.hasRowTemplateWithArrowDirectionRight);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r195.hasMainColumns && ctx_r195.hasRowTemplate && row_r196.$showDetail && ctx_r195.isShowRowTemplate(row_r196, rowIndex_r197));
+    i0.ɵɵproperty("ngIf", ctx_r193.hasMainColumns && ctx_r193.hasRowTemplate && row_r194.$showDetail && ctx_r193.isShowRowTemplate(row_r194, rowIndex_r195));
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r195.hasMainColumns && ctx_r195.isShowMasterDetail(row_r196));
+    i0.ɵɵproperty("ngIf", ctx_r193.hasMainColumns && ctx_r193.isShowMasterDetail(row_r194));
 } }
 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", 89);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_8_ng_container_12_tbody_1_Template, 13, 14, "tbody", 92);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r176 = i0.ɵɵnextContext(2);
+    const ctx_r175 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r176.items)("ngForTrackBy", ctx_r176.trackBy);
+    i0.ɵɵproperty("ngForOf", ctx_r175.items)("ngForTrackBy", ctx_r175.trackBy);
 } }
 function PoTableComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "table", 39)(1, "thead")(2, "tr");
@@ -17155,12 +17260,12 @@ function PoTableComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(4, PoTableComponent_ng_template_8_th_4_Template, 1, 0, "th", 41);
     i0.ɵɵtemplate(5, PoTableComponent_ng_template_8_th_5_Template, 2, 4, "th", 42);
     i0.ɵɵtemplate(6, PoTableComponent_ng_template_8_th_6_Template, 3, 3, "th", 43);
-    i0.ɵɵtemplate(7, PoTableComponent_ng_template_8_th_7_Template, 4, 20, "th", 44);
+    i0.ɵɵtemplate(7, PoTableComponent_ng_template_8_th_7_Template, 3, 20, "th", 44);
     i0.ɵɵtemplate(8, PoTableComponent_ng_template_8_th_8_Template, 1, 0, "th", 41);
     i0.ɵɵtemplate(9, PoTableComponent_ng_template_8_th_9_Template, 1, 4, "th", 45);
     i0.ɵɵtemplate(10, PoTableComponent_ng_template_8_th_10_Template, 5, 14, "th", 46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(11, PoTableComponent_ng_template_8_tbody_11_Template, 5, 2, "tbody", 63);
+    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) {
@@ -17190,64 +17295,64 @@ function PoTableComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r9.hasMainColumns);
 } }
 function PoTableComponent_ng_template_12_span_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 92);
+    i0.ɵɵelement(0, "span", 95);
 } if (rf & 2) {
-    const row_r289 = i0.ɵɵnextContext().row;
-    i0.ɵɵclassProp("po-icon-arrow-up", row_r289.$showDetail)("po-icon-arrow-down", !row_r289.$showDetail);
+    const row_r287 = i0.ɵɵnextContext().row;
+    i0.ɵɵclassProp("po-icon-arrow-up", row_r287.$showDetail)("po-icon-arrow-down", !row_r287.$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", 91);
+    i0.ɵɵtemplate(0, PoTableComponent_ng_template_12_span_0_Template, 1, 4, "span", 94);
 } if (rf & 2) {
-    const row_r289 = ctx.row;
-    const rowIndex_r290 = ctx.rowIndex;
+    const row_r287 = ctx.row;
+    const rowIndex_r288 = ctx.rowIndex;
     const ctx_r12 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngIf", ctx_r12.containsMasterDetail(row_r289) && !ctx_r12.hasRowTemplate || ctx_r12.isShowRowTemplate(row_r289, rowIndex_r290) && ctx_r12.hasRowTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r12.containsMasterDetail(row_r287) && !ctx_r12.hasRowTemplate || ctx_r12.isShowRowTemplate(row_r287, rowIndex_r288) && ctx_r12.hasRowTemplate);
 } }
 function PoTableComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    const _r295 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "input", 93);
-    i0.ɵɵelementStart(1, "label", 94);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_14_Template_label_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r295); const row_r293 = restoredCtx.$implicit; const ctx_r294 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r294.selectable ? ctx_r294.selectRow(row_r293) : "javascript:;"); });
+    const _r293 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "input", 96);
+    i0.ɵɵelementStart(1, "label", 97);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_14_Template_label_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r293); const row_r291 = restoredCtx.$implicit; const ctx_r292 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r292.selectable ? ctx_r292.selectRow(row_r291) : "javascript:;"); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r293 = ctx.$implicit;
-    i0.ɵɵclassProp("po-table-radio-checked", row_r293.$selected);
+    const row_r291 = ctx.$implicit;
+    i0.ɵɵclassProp("po-table-radio-checked", row_r291.$selected);
 } }
 function PoTableComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    const _r298 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-checkbox", 95);
-    i0.ɵɵlistener("p-change", function PoTableComponent_ng_template_16_Template_po_checkbox_p_change_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r298); const row_r296 = restoredCtx.$implicit; const ctx_r297 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r297.selectable ? ctx_r297.selectRow(row_r296) : "javascript:;"); })("ngModelChange", function PoTableComponent_ng_template_16_Template_po_checkbox_ngModelChange_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r298); const row_r296 = restoredCtx.$implicit; return i0.ɵɵresetView(row_r296.$selected = $event); })("click", function PoTableComponent_ng_template_16_Template_po_checkbox_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r298); const row_r296 = restoredCtx.$implicit; const ctx_r300 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r300.selectable ? ctx_r300.selectRow(row_r296) : "javascript:;"); });
+    const _r296 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-checkbox", 98);
+    i0.ɵɵlistener("p-change", function PoTableComponent_ng_template_16_Template_po_checkbox_p_change_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r296); const row_r294 = restoredCtx.$implicit; const ctx_r295 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r295.selectable ? ctx_r295.selectRow(row_r294) : "javascript:;"); })("ngModelChange", function PoTableComponent_ng_template_16_Template_po_checkbox_ngModelChange_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r296); const row_r294 = restoredCtx.$implicit; return i0.ɵɵresetView(row_r294.$selected = $event); })("click", function PoTableComponent_ng_template_16_Template_po_checkbox_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r296); const row_r294 = restoredCtx.$implicit; const ctx_r298 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r298.selectable ? ctx_r298.selectRow(row_r294) : "javascript:;"); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r296 = ctx.$implicit;
-    i0.ɵɵproperty("ngModel", row_r296.$selected);
+    const row_r294 = ctx.$implicit;
+    i0.ɵɵproperty("ngModel", row_r294.$selected);
 } }
 function PoTableComponent_ng_template_18_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span");
 } if (rf & 2) {
-    const column_r301 = i0.ɵɵnextContext().$implicit;
-    const ctx_r303 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("po-table-header-icon-unselected", (ctx_r303.sortedColumn == null ? null : ctx_r303.sortedColumn.property) !== column_r301)("po-table-header-icon-descending", (ctx_r303.sortedColumn == null ? null : ctx_r303.sortedColumn.property) === column_r301 && ctx_r303.sortedColumn.ascending)("po-table-header-icon-ascending", (ctx_r303.sortedColumn == null ? null : ctx_r303.sortedColumn.property) === column_r301 && !ctx_r303.sortedColumn.ascending);
+    const column_r299 = i0.ɵɵnextContext().$implicit;
+    const ctx_r301 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("po-table-header-icon-unselected", (ctx_r301.sortedColumn == null ? null : ctx_r301.sortedColumn.property) !== column_r299)("po-table-header-icon-descending", (ctx_r301.sortedColumn == null ? null : ctx_r301.sortedColumn.property) === column_r299 && ctx_r301.sortedColumn.ascending)("po-table-header-icon-ascending", (ctx_r301.sortedColumn == null ? null : ctx_r301.sortedColumn.property) === column_r299 && !ctx_r301.sortedColumn.ascending);
 } }
 function PoTableComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
-    const _r306 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 96, 97);
-    i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_18_Template_span_mouseenter_0_listener($event) { i0.ɵɵrestoreView(_r306); const ctx_r305 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r305.tooltipMouseEnter($event)); })("mouseleave", function PoTableComponent_ng_template_18_Template_span_mouseleave_0_listener() { i0.ɵɵrestoreView(_r306); const ctx_r307 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r307.tooltipMouseLeave()); });
+    const _r304 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 99, 100);
+    i0.ɵɵlistener("mouseenter", function PoTableComponent_ng_template_18_Template_span_mouseenter_0_listener($event) { i0.ɵɵrestoreView(_r304); const ctx_r303 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r303.tooltipMouseEnter($event)); })("mouseleave", function PoTableComponent_ng_template_18_Template_span_mouseleave_0_listener() { i0.ɵɵrestoreView(_r304); const ctx_r305 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r305.tooltipMouseLeave()); });
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "titlecase");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, PoTableComponent_ng_template_18_span_4_Template, 1, 6, "span", 98);
+    i0.ɵɵtemplate(4, PoTableComponent_ng_template_18_span_4_Template, 1, 6, "span", 101);
 } if (rf & 2) {
-    const column_r301 = ctx.$implicit;
+    const column_r299 = ctx.$implicit;
     const ctx_r18 = i0.ɵɵnextContext();
     i0.ɵɵproperty("p-tooltip", ctx_r18.tooltipText);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", column_r301.label || i0.ɵɵpipeBind1(3, 3, column_r301.property), " ");
+    i0.ɵɵtextInterpolate1(" ", column_r299.label || i0.ɵɵpipeBind1(3, 3, column_r299.property), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r18.sort && column_r301.sortable !== false);
+    i0.ɵɵproperty("ngIf", ctx_r18.sort && column_r299.sortable !== false);
 } }
 function PoTableComponent_ng_template_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelementStart(0, "div", 102);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -17263,46 +17368,46 @@ function PoTableComponent_ng_template_22_Template(rf, ctx) { if (rf & 1) {
     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", 106);
+    i0.ɵɵelement(0, "po-icon", 109);
 } if (rf & 2) {
-    const ctx_r313 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("p-icon", ctx_r313.firstAction.icon);
+    const ctx_r311 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("p-icon", ctx_r311.firstAction.icon);
 } }
 function PoTableComponent_ng_template_24_td_0_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r316 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 104);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_24_td_0_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r316); const row_r308 = i0.ɵɵnextContext(2).row; const ctx_r314 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r314.executeTableAction(row_r308, ctx_r314.firstAction)); });
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_0_div_1_po_icon_1_Template, 1, 1, "po-icon", 105);
+    const _r314 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 107);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_24_td_0_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r314); const row_r306 = i0.ɵɵnextContext(2).row; const ctx_r312 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r312.executeTableAction(row_r306, ctx_r312.firstAction)); });
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_0_div_1_po_icon_1_Template, 1, 1, "po-icon", 108);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r308 = i0.ɵɵnextContext(2).row;
-    const ctx_r312 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("po-table-action-disabled", ctx_r312.firstAction.disabled ? ctx_r312.validateTableAction(row_r308, ctx_r312.firstAction) : false);
+    const row_r306 = i0.ɵɵnextContext(2).row;
+    const ctx_r310 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("po-table-action-disabled", ctx_r310.firstAction.disabled ? ctx_r310.validateTableAction(row_r306, ctx_r310.firstAction) : false);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r312.firstAction.icon);
+    i0.ɵɵproperty("ngIf", ctx_r310.firstAction.icon);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r312.firstAction.label, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r310.firstAction.label, " ");
 } }
 function PoTableComponent_ng_template_24_td_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 102);
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_0_div_1_Template, 3, 4, "div", 103);
+    i0.ɵɵelementStart(0, "td", 105);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_0_div_1_Template, 3, 4, "div", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r310 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("width", ctx_r310.height && ctx_r310.actionRight ? ctx_r310.getWidthColumnManager() : "", "px")("max-width", ctx_r310.height && !ctx_r310.actionRight ? ctx_r310.getColumnWidthActionsLeft() : "", "px")("width", ctx_r310.height && !ctx_r310.actionRight ? ctx_r310.getColumnWidthActionsLeft() : "", "px");
+    const ctx_r308 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("width", ctx_r308.height && ctx_r308.actionRight ? ctx_r308.getWidthColumnManager() : "", "px")("max-width", ctx_r308.height && !ctx_r308.actionRight ? ctx_r308.getColumnWidthActionsLeft() : "", "px")("width", ctx_r308.height && !ctx_r308.actionRight ? ctx_r308.getColumnWidthActionsLeft() : "", "px");
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r310.firstAction.visible !== false);
+    i0.ɵɵproperty("ngIf", ctx_r308.firstAction.visible !== false);
 } }
 function PoTableComponent_ng_template_24_td_1_Template(rf, ctx) { if (rf & 1) {
-    const _r321 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 107)(1, "span", 108, 109);
-    i0.ɵɵlistener("click", function PoTableComponent_ng_template_24_td_1_Template_span_click_1_listener() { i0.ɵɵrestoreView(_r321); const _r318 = i0.ɵɵreference(2); const row_r308 = i0.ɵɵnextContext().row; const ctx_r319 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r319.togglePopup(row_r308, _r318)); });
+    const _r319 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 110)(1, "span", 111, 112);
+    i0.ɵɵlistener("click", function PoTableComponent_ng_template_24_td_1_Template_span_click_1_listener() { i0.ɵɵrestoreView(_r319); const _r316 = i0.ɵɵreference(2); const row_r306 = i0.ɵɵnextContext().row; const ctx_r317 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r317.togglePopup(row_r306, _r316)); });
     i0.ɵɵelementEnd()();
 } }
 function PoTableComponent_ng_template_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoTableComponent_ng_template_24_td_0_Template, 2, 7, "td", 100);
-    i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_1_Template, 3, 0, "td", 101);
+    i0.ɵɵtemplate(0, PoTableComponent_ng_template_24_td_0_Template, 2, 7, "td", 103);
+    i0.ɵɵtemplate(1, PoTableComponent_ng_template_24_td_1_Template, 3, 0, "td", 104);
 } if (rf & 2) {
     const ctx_r24 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngIf", ctx_r24.isSingleAction);
@@ -17310,13 +17415,13 @@ function PoTableComponent_ng_template_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r24.visibleActions.length > 1);
 } }
 function PoTableComponent_po_table_column_manager_26_Template(rf, ctx) { if (rf & 1) {
-    const _r323 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-table-column-manager", 110);
-    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(_r323); const ctx_r322 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r322.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(_r323); const ctx_r324 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r324.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(_r323); const ctx_r325 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r325.onColumnRestoreManager($event)); });
+    const _r321 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-table-column-manager", 113);
+    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(_r321); const ctx_r320 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r320.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(_r321); const ctx_r322 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r322.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(_r321); const ctx_r323 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r323.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);
+    i0.ɵɵproperty("p-columns", ctx_r25.columns)("p-max-columns", ctx_r25.maxColumns)("p-target", ctx_r25.height ? ctx_r25.columnManagerTargetFixed : ctx_r25.columnManagerTarget)("p-last-visible-columns-selected", ctx_r25.lastVisibleColumnsSelected)("p-columns-default", ctx_r25.initialColumns);
 } }
 /**
  * @docsExtends PoTableBaseComponent
@@ -17388,6 +17493,13 @@ class PoTableComponent extends PoTableBaseComponent {
     get columnManagerTarget() {
         return this._columnManagerTarget;
     }
+    set columnManagerTargetFixed(value) {
+        this._columnManagerTargetFixed = value;
+        this.changeDetector.detectChanges();
+    }
+    get columnManagerTargetFixed() {
+        return this._columnManagerTargetFixed;
+    }
     get hasRowTemplateWithArrowDirectionRight() {
         return this.tableRowTemplate?.tableRowTemplateArrowDirection === PoTableRowTemplateArrowDirection.Right;
     }
@@ -17716,10 +17828,14 @@ class PoTableComponent extends PoTableBaseComponent {
         this.poTableThead.nativeElement.scrollLeft = this.poTableTbodyVirtual.nativeElement.scrollLeft;
     }
     getWidthColumnManager() {
-        return this.columnManager?.nativeElement.offsetWidth;
+        return this.height
+            ? this.columnManagerFixed?.nativeElement.offsetWidth
+            : this.columnManager?.nativeElement.offsetWidth;
     }
     getColumnWidthActionsLeft() {
-        return this.columnActionLeft?.nativeElement.offsetWidth;
+        return this.height
+            ? this.columnActionLeftFixed?.nativeElement.offsetWidth
+            : this.columnActionLeft?.nativeElement.offsetWidth;
     }
     calculateHeightTableContainer(height) {
         const value = parseFloat(height);
@@ -17856,20 +17972,25 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableColumnTemplates = _t);
     } }, viewQuery: function PoTableComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$W, 5, ElementRef);
-        i0.ɵɵviewQuery(_c1$q, 5);
-        i0.ɵɵviewQuery(_c2$b, 5, ElementRef);
+        i0.ɵɵviewQuery(_c1$q, 5, ElementRef);
+        i0.ɵɵviewQuery(_c2$b, 5);
         i0.ɵɵviewQuery(_c3$6, 5, ElementRef);
         i0.ɵɵviewQuery(_c4$4, 5, ElementRef);
         i0.ɵɵviewQuery(_c5$2, 5, ElementRef);
         i0.ɵɵviewQuery(_c6$2, 5, ElementRef);
         i0.ɵɵviewQuery(_c7$1, 5, ElementRef);
         i0.ɵɵviewQuery(_c8$1, 5, ElementRef);
-        i0.ɵɵviewQuery(_c9, 5);
+        i0.ɵɵviewQuery(_c9, 5, ElementRef);
         i0.ɵɵviewQuery(_c10, 5, ElementRef);
         i0.ɵɵviewQuery(_c11, 5, ElementRef);
+        i0.ɵɵviewQuery(_c12, 5);
+        i0.ɵɵviewQuery(_c13, 5);
+        i0.ɵɵviewQuery(_c14, 5, ElementRef);
+        i0.ɵɵviewQuery(_c15, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.noColumnsHeader = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.noColumnsHeaderFixed = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poPopupComponent = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableFooterElement = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableWrapperElement = _t.first);
@@ -17877,11 +17998,14 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poTableThead = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poTableTbodyVirtual = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnManager = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnManagerFixed = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnActionLeft = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnActionLeftFixed = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnManagerTarget = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnManagerTargetFixed = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsIconElement = _t);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsElement = _t);
-    } }, features: [i0.ɵɵProvidersFeature([PoDateService]), i0.ɵɵInheritDefinitionFeature], decls: 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"], ["poTableTbody", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], [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"], ["name", "selectAll", 3, "ngModel", "click", "p-change", "ngModelChange", 4, "ngIf"], ["name", "selectAll", 3, "ngModel", "click", "p-change", "ngModelChange"], [1, "po-table-header-column", "po-table-header-master-detail"], ["columnActionLeft", ""], [1, "po-table-header-column", "po-text-center"], ["noColumnsHeader", ""], [1, "po-table-header-ellipsis", 3, "click"], ["headersTable", ""], [1, "po-table-header-flex"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["columnManager", ""], ["type", "button", "p-tooltip-position", "left", 1, "po-table-header-column-manager-button", "po-icon", "po-icon-settings", "po-clickable", 3, "p-tooltip", "click"], ["columnManagerTarget", ""], [3, "itemSize", "minBufferPx", "maxBufferPx", "scroll"], ["poTableTbodyVirtual", ""], ["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, "cdkVirtualFor", "cdkVirtualForOf", "cdkVirtualForTrackBy"], [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"], ["class", "po-table-group-row", 4, "ngFor", "ngForOf", "ngForTrackBy"], [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"], ["name", "checkbox", 3, "ngModel", "p-change", "ngModelChange", "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", 3, "width", "max-width", 4, "ngIf"], ["class", "po-table-column-actions", 4, "ngIf"], [1, "po-table-column", "po-table-column-single-action"], ["class", "po-table-single-action po-clickable", 3, "po-table-action-disabled", "click", 4, "ngIf"], [1, "po-table-single-action", "po-clickable", 3, "click"], ["class", "po-table-single-action-content", 3, "p-icon", 4, "ngIf"], [1, "po-table-single-action-content", 3, "p-icon"], [1, "po-table-column-actions"], [1, "po-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) {
+    } }, 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"], ["poTableTbody", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], [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"], ["name", "selectAll", 3, "ngModel", "click", "p-change", "ngModelChange", 4, "ngIf"], ["name", "selectAll", 3, "ngModel", "click", "p-change", "ngModelChange"], [1, "po-table-header-column", "po-table-header-master-detail"], ["columnActionLeftFixed", ""], [1, "po-table-header-column", "po-text-center"], ["noColumnsHeaderFixed", ""], [1, "po-table-header-ellipsis", 3, "click"], [1, "po-table-header-flex"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["columnManagerFixed", ""], ["type", "button", "p-tooltip-position", "left", 1, "po-table-header-column-manager-button", "po-icon", "po-icon-settings", "po-clickable", 3, "p-tooltip", "click"], ["columnManagerTargetFixed", ""], [3, "itemSize", "minBufferPx", "maxBufferPx", "scroll"], ["poTableTbodyVirtual", ""], ["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, "cdkVirtualFor", "cdkVirtualForOf", "cdkVirtualForTrackBy"], [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"], ["columnActionLeft", ""], ["noColumnsHeader", ""], ["columnManager", ""], ["columnManagerTarget", ""], ["class", "po-table-group-row", 4, "ngFor", "ngForOf", "ngForTrackBy"], [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"], ["name", "checkbox", 3, "ngModel", "p-change", "ngModelChange", "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", 3, "width", "max-width", 4, "ngIf"], ["class", "po-table-column-actions", 4, "ngIf"], [1, "po-table-column", "po-table-column-single-action"], ["class", "po-table-single-action po-clickable", 3, "po-table-action-disabled", "click", 4, "ngIf"], [1, "po-table-single-action", "po-clickable", 3, "click"], ["class", "po-table-single-action-content", 3, "p-icon", 4, "ngIf"], [1, "po-table-single-action-content", 3, "p-icon"], [1, "po-table-column-actions"], [1, "po-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);
@@ -17909,7 +18033,7 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
     } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, i2$1.NgControlStatus, i2$1.NgModel, i7.CdkFixedSizeVirtualScroll, i7.CdkVirtualForOf, i7.CdkVirtualScrollViewport, PoButtonComponent, PoContainerComponent, PoLoadingComponent, PoPopupComponent, PoTooltipDirective, PoIconComponent, PoCheckboxComponent, PoTableColumnIconComponent, PoTableColumnLabelComponent, PoTableColumnLinkComponent, PoTableColumnManagerComponent, PoTableDetailComponent, PoTableSubtitleCircleComponent, PoTableSubtitleFooterComponent, i1.TitleCasePipe, i1.CurrencyPipe, i1.DatePipe, PoTimePipe], encapsulation: 2 });
 (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 #poTableThead class=\"po-table-header-fixed po-table-header\">\n            <ng-container *ngTemplateOutlet=\"tableHeaderTemplate\"></ng-container>\n          </div>\n\n          <div #poTableTbody class=\"po-table-container-fixed-inner\">\n            <ng-container *ngIf=\"height; then tableBodyTemplate; else 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 #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            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              (click)=\"selectAllRows()\"\n              (p-change)=\"selectAllRows()\"\n              [(ngModel)]=\"selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <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 || '50px'\"\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 && !hideColumnsManager\"\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              type=\"button\"\n              [attr.aria-label]=\"literals.columnsManager\"\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<!-- s\u00F3 virtual -->\n<ng-template #tableBodyTemplate>\n  <cdk-virtual-scroll-viewport\n    #poTableTbodyVirtual\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableVirtual\"\n    [minBufferPx]=\"heightTableVirtual < 100 ? 100 : heightTableVirtual\"\n    [maxBufferPx]=\"heightTableVirtual < 200 ? 200 : heightTableVirtual\"\n    (scroll)=\"syncronizeHorizontalScroll()\"\n  >\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      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody class=\"po-table-group-row\" *cdkVirtualFor=\"let row of items; let rowIndex = index; trackBy: trackBy\">\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n            <td\n              *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n            <td\n              *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              (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\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format:'symbol':'1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\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  </cdk-virtual-scroll-viewport>\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            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              (click)=\"selectAllRows()\"\n              (p-change)=\"selectAllRows()\"\n              [(ngModel)]=\"selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <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              type=\"button\"\n              [attr.aria-label]=\"literals.columnsManager\"\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  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [(ngModel)]=\"row.$selected\"\n    (click)=\"selectable ? selectRow(row) : 'javascript:;'\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    (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\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n    <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" }]
+        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\n          <div #poTableTbody class=\"po-table-container-fixed-inner\">\n            <ng-container *ngIf=\"height; then tableBodyTemplate; else 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 #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            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              (click)=\"selectAllRows()\"\n              (p-change)=\"selectAllRows()\"\n              [(ngModel)]=\"selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeftFixed\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\" #noColumnsHeaderFixed 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          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 && !hideColumnsManager\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n\n        <th\n          #columnManagerFixed\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 ? columnManagerFixed.offsetWidth : undefined\"\n          >\n            <button\n              #columnManagerTargetFixed\n              type=\"button\"\n              [attr.aria-label]=\"literals.columnsManager\"\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<!-- s\u00F3 virtual -->\n<ng-template #tableBodyTemplate>\n  <cdk-virtual-scroll-viewport\n    #poTableTbodyVirtual\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableVirtual\"\n    [minBufferPx]=\"heightTableVirtual < 100 ? 100 : heightTableVirtual\"\n    [maxBufferPx]=\"heightTableVirtual < 200 ? 200 : heightTableVirtual\"\n    (scroll)=\"syncronizeHorizontalScroll()\"\n  >\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      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody class=\"po-table-group-row\" *cdkVirtualFor=\"let row of items; let rowIndex = index; trackBy: trackBy\">\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n            <td\n              *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n            <td\n              *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              (click)=\"hasSelectableRow() ? 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]=\"noColumnsHeaderFixed?.nativeElement.parentElement?.offsetWidth\"\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                (mouseleave)=\"tooltipMouseLeave()\"\n              >\n                <span *ngSwitchCase=\"'columnTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format:'symbol':'1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\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  </cdk-virtual-scroll-viewport>\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            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              (click)=\"selectAllRows()\"\n              (p-change)=\"selectAllRows()\"\n              [(ngModel)]=\"selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <th\n          *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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              type=\"button\"\n              [attr.aria-label]=\"literals.columnsManager\"\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)=\"hasSelectableRow() ? 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  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [(ngModel)]=\"row.$selected\"\n    (click)=\"selectable ? selectRow(row) : 'javascript:;'\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    (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\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n    <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]=\"height ? columnManagerTargetFixed : 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 }]
@@ -17922,6 +18046,9 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
         }], noColumnsHeader: [{
             type: ViewChild,
             args: ['noColumnsHeader', { read: ElementRef }]
+        }], noColumnsHeaderFixed: [{
+            type: ViewChild,
+            args: ['noColumnsHeaderFixed', { read: ElementRef }]
         }], poPopupComponent: [{
             type: ViewChild,
             args: ['popup']
@@ -17943,9 +18070,15 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
         }], columnManager: [{
             type: ViewChild,
             args: ['columnManager', { read: ElementRef, static: false }]
+        }], columnManagerFixed: [{
+            type: ViewChild,
+            args: ['columnManagerFixed', { read: ElementRef, static: false }]
         }], columnActionLeft: [{
             type: ViewChild,
             args: ['columnActionLeft', { read: ElementRef, static: false }]
+        }], columnActionLeftFixed: [{
+            type: ViewChild,
+            args: ['columnActionLeftFixed', { read: ElementRef, static: false }]
         }], actionsIconElement: [{
             type: ViewChildren,
             args: ['actionsIconElement', { read: ElementRef }]
@@ -17955,6 +18088,9 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
         }], columnManagerTarget: [{
             type: ViewChild,
             args: ['columnManagerTarget']
+        }], columnManagerTargetFixed: [{
+            type: ViewChild,
+            args: ['columnManagerTargetFixed']
         }] }); })();
 
 /**
@@ -18184,6 +18320,8 @@ class PoComboBaseComponent {
         this.page = 1;
         this.pageSize = 10;
         this.loading = false;
+        this.dynamicLabel = 'label';
+        this.dynamicValue = 'value';
         this.cacheStaticOptions = [];
         this.comboOptionsList = [];
         this.onModelTouched = null;
@@ -18288,6 +18426,9 @@ class PoComboBaseComponent {
      * @default `value`
      */
     set fieldValue(value) {
+        if (!this.service && !this.filterService) {
+            this.dynamicValue = value;
+        }
         this._fieldValue = value || PO_COMBO_FIELD_VALUE_DEFAULT;
         if (isTypeof(this.filterService, 'string') && this.service) {
             this.service.fieldValue = this._fieldValue;
@@ -18309,6 +18450,9 @@ class PoComboBaseComponent {
      * @default `label`
      */
     set fieldLabel(value) {
+        if (!this.service && !this.filterService) {
+            this.dynamicLabel = value;
+        }
         this._fieldLabel = value || PO_COMBO_FIELD_LABEL_DEFAULT;
         if (isTypeof(this.filterService, 'string') && this.service) {
             this.service.fieldLabel = this._fieldLabel;
@@ -18387,14 +18531,16 @@ class PoComboBaseComponent {
     /**
      * Nesta propriedade define a lista de opções do `po-combo`.
      *
-     * > A lista pode ser definida em dois formatos, simples ou com agrupamentos.
-     * - Utilize `PoComboOption` para lista de opções simples.
-     * - Utilize `PoComboOptionGroup` para lista de opções com agrupamento.
+     * > A lista pode ser definida utilizando um array com o valor representando o `value` e o `label` das seguintes formas:
+     *
+     * ```
+     * <po-combo name="combo" p-label="PO Combo" [p-options]="[{value: 1, label: 'One'}, {value: 2, label: 'two'}]"> </po-combo>
+     * ```
+     *
+     * ```
+     * <po-combo name="combo" p-label="PO Combo" [p-options]="[{name: 'Roger', age: 28}, {name: 'Anne', age: 35}]" p-field-label="name" p-field-value="age"> </po-combo>
+     * ```
      *
-     * **Importante:**
-     * - A lista deve seguir as definições descritas nas respectivas interfaces, caso contrário não exibirá a(as) opção(ões) fora dos padrões.
-     * - O componente interpretará o formato da lista de acordo com a interface utilizada e só exibirá as opções correspondentes à ela.
-     * - Um agrupamento só será exibido se houver pelo menos uma opção válida.
      * - Aconselha-se utilizar valores distintos no `label` e `value` dos itens.
      */
     set options(options) {
@@ -18492,6 +18638,8 @@ class PoComboBaseComponent {
         return this._options.length && this._options[0].hasOwnProperty('options');
     }
     ngOnInit() {
+        this.dynamicValue = this.checkIfService('value');
+        this.dynamicLabel = this.checkIfService('label');
         this.updateComboList();
     }
     onInitService() {
@@ -18522,27 +18670,27 @@ class PoComboBaseComponent {
         }
     }
     startsWith(search, option) {
-        return option.label.toLowerCase().startsWith(search.toLowerCase());
+        return option[this.dynamicLabel].toLowerCase().startsWith(search.toLowerCase());
     }
     contains(search, option) {
-        return option.label.toLowerCase().indexOf(search.toLowerCase()) > -1;
+        return option[this.dynamicLabel].toLowerCase().indexOf(search.toLowerCase()) > -1;
     }
     endsWith(search, option) {
-        return option.label.toLowerCase().endsWith(search.toLowerCase());
+        return option[this.dynamicLabel].toLowerCase().endsWith(search.toLowerCase());
     }
     getOptionFromValue(value, options) {
-        return options ? options.find((option) => this.isEqual(option.value, value)) : null;
+        return options ? options.find((option) => this.isEqual(option[this.dynamicValue], value)) : null;
     }
     getOptionFromLabel(label, options) {
         if (options) {
-            return options.find((option) => option.label.toString().toLowerCase() === label.toString().toLowerCase());
+            return options.find((option) => option[this.dynamicLabel].toString().toLowerCase() === label.toString().toLowerCase());
         }
         else {
             return null;
         }
     }
     updateSelectedValue(option, isUpdateModel = true) {
-        const optionLabel = (option && option.label) || '';
+        const optionLabel = (option && option[this.dynamicLabel]) || '';
         this.updateInternalVariables(option);
         // atualiza o valor do input quando for changeOnEnter apenas se for para atualizar o model.
         if (this.changeOnEnter && isUpdateModel) {
@@ -18552,7 +18700,7 @@ class PoComboBaseComponent {
             this.setInputValue(optionLabel);
         }
         if (isUpdateModel) {
-            const optionValue = option?.value !== undefined ? option.value : undefined;
+            const optionValue = option?.[this.dynamicValue] !== undefined ? option[this.dynamicValue] : undefined;
             this.updateModel(optionValue);
         }
     }
@@ -18579,7 +18727,7 @@ class PoComboBaseComponent {
                     addedOptionsGroupTitle = false;
                     return (optionsGroupTitle = option);
                 }
-                if (option.label && (this.compareMethod(search, option, filterMode) || this.service)) {
+                if (option[this.dynamicLabel] && (this.compareMethod(search, option, filterMode) || this.service)) {
                     if (this.isOptionGroupList && !addedOptionsGroupTitle) {
                         newOptions.push(optionsGroupTitle);
                         addedOptionsGroupTitle = true;
@@ -18599,7 +18747,7 @@ class PoComboBaseComponent {
         const newOptions = !options && !this.infiniteScroll && this.selectedValue ? [{ ...this.selectedOption }] : copyOptions;
         this.visibleOptions = newOptions;
         if (!this.selectedView && this.visibleOptions.length) {
-            this.selectedView = copyOptions.find(option => option.value !== undefined);
+            this.selectedView = copyOptions.find(option => option[this.dynamicValue] !== undefined);
         }
     }
     getNextOption(value, options, reverse = false) {
@@ -18607,13 +18755,13 @@ class PoComboBaseComponent {
         let optionFound = null;
         let found = false;
         for (const option of optionsList) {
-            if (option.value && !optionFound) {
+            if (option[this.dynamicValue] && !optionFound) {
                 optionFound = option;
             }
-            if (option.value && found) {
+            if (option[this.dynamicValue] && found) {
                 return option;
             }
-            if (this.isEqual(option.value, value)) {
+            if (this.isEqual(option[this.dynamicValue], value)) {
                 found = true;
             }
         }
@@ -18636,17 +18784,17 @@ class PoComboBaseComponent {
         if (!this.service) {
             this.updateComboList([...this.cacheStaticOptions]);
         }
-        if (optionFound && optionFound.value !== this.selectedValue) {
+        if (optionFound && optionFound[this.dynamicValue] !== this.selectedValue) {
             this.updateSelectedValue(optionFound);
-            this.previousSearchValue = optionFound.label;
+            this.previousSearchValue = optionFound[this.dynamicLabel];
         }
-        else if (this.selectedValue && this.selectedOption && this.selectedOption.label !== inputValue) {
+        else if (this.selectedValue && this.selectedOption && this.selectedOption[this.dynamicLabel] !== inputValue) {
             this.updateSelectedValueWithOldOption();
-            this.previousSearchValue = this.selectedOption.label;
+            this.previousSearchValue = this.selectedOption[this.dynamicLabel];
             return;
         }
         else if (inputValue && !optionFound) {
-            const isInputValueDiffSelectedLabel = !!(this.selectedOption && this.selectedOption.label !== inputValue);
+            const isInputValueDiffSelectedLabel = !!(this.selectedOption && this.selectedOption[this.dynamicLabel] !== inputValue);
             this.updateSelectedValue(null, isInputValueDiffSelectedLabel || this.changeOnEnter);
             this.previousSearchValue = '';
             return;
@@ -18727,17 +18875,33 @@ class PoComboBaseComponent {
         this.cacheStaticOptions = this.comboOptionsList;
         this.updateComboList();
     }
-    compareOptions(optionA, optionB) {
-        const labelA = optionA.label.toString().toLowerCase();
-        const labelB = optionB.label.toString().toLowerCase();
-        return labelA < labelB ? -1 : labelA > labelB ? 1 : 0;
+    checkIfService(dynamicValue) {
+        if ((this.service || this.filterService) && dynamicValue === 'label') {
+            return PO_COMBO_FIELD_LABEL_DEFAULT;
+        }
+        if ((this.service || this.filterService) && dynamicValue === 'value') {
+            return PO_COMBO_FIELD_VALUE_DEFAULT;
+        }
+        if (!this.service && dynamicValue === 'label') {
+            return this.fieldLabel;
+        }
+        if (!this.service && dynamicValue === 'value') {
+            return this.fieldValue;
+        }
+    }
+    compareOptions(dynamicLabel) {
+        return function (optionA, optionB) {
+            const labelA = optionA[dynamicLabel].toString().toLowerCase();
+            const labelB = optionB[dynamicLabel].toString().toLowerCase();
+            return labelA < labelB ? -1 : labelA > labelB ? 1 : 0;
+        };
     }
     hasDuplicatedOption(options, currentOption, accumulatedGroupOptions) {
         if (accumulatedGroupOptions) {
-            return accumulatedGroupOptions.some(option => option.label === currentOption);
+            return accumulatedGroupOptions.some(option => option[this.dynamicLabel] === currentOption);
         }
         else {
-            return options.some(option => option.value === currentOption);
+            return options.some(option => option[this.dynamicValue] === currentOption);
         }
     }
     listingComboOptions(comboOptions) {
@@ -18751,20 +18915,21 @@ class PoComboBaseComponent {
     }
     sortOptions(comboOptionsList) {
         if (comboOptionsList.length > 0 && this.sort) {
-            return comboOptionsList.sort(this.compareOptions);
+            return comboOptionsList.sort(this.compareOptions(this.dynamicLabel));
         }
     }
     validateValue(currentOption, verifyingOptionsGroup = false) {
-        const { label, options, value } = currentOption;
+        const { options } = currentOption;
         if (this.isOptionGroupList) {
-            return ((validValue(label) && options && options.length > 0) || (verifyingOptionsGroup === true && validValue(value)));
+            return ((validValue(currentOption[this.dynamicLabel]) && options && options.length > 0) ||
+                (verifyingOptionsGroup === true && validValue(currentOption[this.dynamicValue])));
         }
-        return validValue(value) && !options;
+        return validValue(currentOption[this.dynamicValue]) && !options;
     }
     verifyComboOptions(comboOptions, verifyingOptionsGroup = false, accumulatedGroupOptions) {
         return comboOptions.reduce((accumulatedOptions, currentOption) => {
             if (!this.verifyIfHasLabel(currentOption) ||
-                this.hasDuplicatedOption(accumulatedOptions, currentOption['value'] || currentOption['label'], accumulatedGroupOptions) ||
+                this.hasDuplicatedOption(accumulatedOptions, currentOption[this.dynamicValue] || currentOption[this.dynamicLabel], accumulatedGroupOptions) ||
                 !this.validateValue(currentOption, verifyingOptionsGroup)) {
                 return accumulatedOptions;
             }
@@ -18774,22 +18939,24 @@ class PoComboBaseComponent {
     }
     verifyComboOptionsGroup(comboOptionsList) {
         return comboOptionsList.reduce((accumulatedGroupOptions, currentOption) => {
-            const { options, label } = currentOption;
+            const { options } = currentOption;
             const verifiedComboOptionsGroupList = this.verifyComboOptions(options, true, accumulatedGroupOptions);
             if (verifiedComboOptionsGroupList.length > 0) {
                 this.sortOptions(verifiedComboOptionsGroupList);
-                accumulatedGroupOptions.push({ label: label, options: true }, ...verifiedComboOptionsGroupList);
+                accumulatedGroupOptions.push({ label: currentOption[this.dynamicLabel], options: true }, ...verifiedComboOptionsGroupList);
             }
             return accumulatedGroupOptions;
         }, []);
     }
     verifyIfHasLabel(currentOption = {}) {
-        const { label, options, value } = currentOption;
-        if ((this.isOptionGroupList && options && !label) || (!label && !value) || (!this.isOptionGroupList && options)) {
+        const { options } = currentOption;
+        if ((this.isOptionGroupList && options && !currentOption[this.dynamicLabel]) ||
+            (!currentOption[this.dynamicLabel] && !currentOption[this.dynamicValue]) ||
+            (!this.isOptionGroupList && options)) {
             return false;
         }
-        if (!currentOption.label) {
-            currentOption.label = currentOption.value.toString();
+        if (!currentOption[this.dynamicLabel]) {
+            currentOption[this.dynamicLabel] = currentOption[this.dynamicValue].toString();
             return true;
         }
         return true;
@@ -18816,7 +18983,7 @@ class PoComboBaseComponent {
     }
     updateSelectedValueWithOldOption() {
         const oldOption = this.getOptionFromValue(this.selectedValue, this.comboOptionsList);
-        if (oldOption && oldOption.label) {
+        if (oldOption && oldOption[this.dynamicLabel]) {
             return this.updateSelectedValue(oldOption);
         }
     }
@@ -19142,8 +19309,9 @@ function PoComboComponent_ng_template_18_li_3_ng_template_2_label_0_Template(rf,
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const option_r21 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r27 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(option_r21.label);
+    i0.ɵɵtextInterpolate(option_r21[ctx_r27.dynamicLabel]);
 } }
 function PoComboComponent_ng_template_18_li_3_ng_template_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "a", 29);
@@ -19153,7 +19321,7 @@ function PoComboComponent_ng_template_18_li_3_ng_template_2_ng_template_1_Templa
     const option_r21 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r29 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("innerHTML", ctx_r29.getLabelFormatted(option_r21 == null ? null : option_r21.label), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r29.getLabelFormatted(option_r21 == null ? null : option_r21[ctx_r29.dynamicLabel]), i0.ɵɵsanitizeHtml);
 } }
 function PoComboComponent_ng_template_18_li_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, PoComboComponent_ng_template_18_li_3_ng_template_2_label_0_Template, 2, 1, "label", 26);
@@ -19485,7 +19653,7 @@ class PoComboComponent extends PoComboBaseComponent {
         }
     }
     controlApplyFilter(value) {
-        if (!this.isProcessingValueByTab && (!this.selectedOption || value !== this.selectedOption.label)) {
+        if (!this.isProcessingValueByTab && (!this.selectedOption || value !== this.selectedOption[this.dynamicLabel])) {
             this.defaultService.hasNext = true;
             this.page = this.setPage();
             this.options = [];
@@ -19500,7 +19668,7 @@ class PoComboComponent extends PoComboBaseComponent {
             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());
+            this.filterSubscription = this.service?.getFilteredData(param, this.filterParams).subscribe(items => this.setOptionsByApplyFilter(value, items, reset), error => this.onErrorFilteredData());
         }
     }
     setOptionsByApplyFilter(value, items, reset = false) {
@@ -19517,7 +19685,7 @@ class PoComboComponent extends PoComboBaseComponent {
         }
     }
     getObjectByValue(value) {
-        if (this.selectedValue !== value && this.selectedOption?.label !== value) {
+        if (this.selectedValue !== value && this.selectedOption?.[this.dynamicLabel] !== value) {
             this.isProcessingValueByTab = true;
             this.getSubscription = this.service.getObjectByValue(value, this.filterParams).subscribe(item => this.updateOptionByFilteredValue(item), error => this.onErrorGetObjectByValue());
         }
@@ -19535,26 +19703,26 @@ class PoComboComponent extends PoComboBaseComponent {
         }, this.debounceTime);
     }
     selectPreviousOption() {
-        const currentViewValue = this.selectedView && this.selectedView.value;
+        const currentViewValue = this.selectedView && this.selectedView[this.dynamicValue];
         if (currentViewValue) {
             const nextOption = this.getNextOption(currentViewValue, this.visibleOptions, true);
-            this.updateSelectedValue(nextOption, nextOption && nextOption.value !== currentViewValue && !this.changeOnEnter);
+            this.updateSelectedValue(nextOption, nextOption && nextOption[this.dynamicValue] !== currentViewValue && !this.changeOnEnter);
         }
         else if (this.visibleOptions.length) {
             const visibleOption = this.visibleOptions[this.visibleOptions.length - 1];
-            this.updateSelectedValue(visibleOption, visibleOption.value !== currentViewValue && !this.changeOnEnter);
+            this.updateSelectedValue(visibleOption, visibleOption[this.dynamicValue] !== currentViewValue && !this.changeOnEnter);
         }
     }
     selectNextOption() {
-        const currentViewValue = this.selectedView && this.selectedView.value;
+        const currentViewValue = this.selectedView && this.selectedView[this.dynamicValue];
         if (currentViewValue) {
             const nextOption = this.getNextOption(currentViewValue, this.visibleOptions);
-            this.updateSelectedValue(nextOption, nextOption && nextOption.value !== currentViewValue && !this.changeOnEnter);
+            this.updateSelectedValue(nextOption, nextOption && nextOption[this.dynamicValue] !== currentViewValue && !this.changeOnEnter);
         }
         else if (this.visibleOptions.length) {
             const index = this.changeOnEnter ? 1 : 0;
             const visibleOption = this.visibleOptions[index];
-            this.updateSelectedValue(visibleOption, visibleOption.value !== currentViewValue && !this.changeOnEnter);
+            this.updateSelectedValue(visibleOption, visibleOption[this.dynamicValue] !== currentViewValue && !this.changeOnEnter);
         }
     }
     toggleComboVisibility() {
@@ -19578,7 +19746,8 @@ class PoComboComponent extends PoComboBaseComponent {
     }
     onOptionClick(option, event) {
         const inputValue = this.getInputValue();
-        const isUpdateModel = option.value !== this.selectedValue || !!(this.selectedView && inputValue !== this.selectedView.label);
+        const isUpdateModel = option[this.dynamicValue] !== this.selectedValue ||
+            !!(this.selectedView && inputValue !== this.selectedView[this.dynamicLabel]);
         if (event) {
             event.stopPropagation();
         }
@@ -19587,7 +19756,7 @@ class PoComboComponent extends PoComboBaseComponent {
         if (!this.service) {
             this.updateComboList([...this.cacheStaticOptions]);
         }
-        this.previousSearchValue = this.selectedView.label;
+        this.previousSearchValue = this.selectedView[this.dynamicLabel];
     }
     scrollTo(index) {
         const selectedItem = this.element.nativeElement.querySelectorAll('.po-combo-item-selected');
@@ -19892,7 +20061,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=\"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" }]
+                ], 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\">{{\n          option[this.dynamicLabel]\n        }}</label>\n        <ng-template #optionLink>\n          <a class=\"po-combo-item\">\n            <span style=\"pointer-events: none\" [innerHTML]=\"getLabelFormatted(option?.[this.dynamicLabel])\"></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.DomSanitizer }, { type: PoLanguageService }]; }, { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
@@ -20220,6 +20389,26 @@ class PoDatepickerRangeBaseComponent {
     get startDate() {
         return this._startDate;
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Idioma que o calendário utilizará para exibir as datas.
+     *
+     * > O locale padrão será recuperado com base no [`PoI18nService`](/documentation/po-i18n) ou *browser*.
+     */
+    set locale(value) {
+        if (value) {
+            this._locale = value.length >= 2 ? value : poLocaleDefault;
+        }
+        else {
+            this._locale = this.language;
+        }
+    }
+    get locale() {
+        return this._locale || this.language;
+    }
     // Função implementada do ControlValueAccessor
     // Usada para interceptar os estados de habilitado via forms api
     setDisabledState(isDisabled) {
@@ -20383,7 +20572,7 @@ class PoDatepickerRangeBaseComponent {
     }
 }
 PoDatepickerRangeBaseComponent.ɵfac = function PoDatepickerRangeBaseComponent_Factory(t) { return new (t || PoDatepickerRangeBaseComponent)(i0.ɵɵdirectiveInject(PoDateService), i0.ɵɵdirectiveInject(PoLanguageService)); };
-PoDatepickerRangeBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoDatepickerRangeBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], help: ["p-help", "help"], label: ["p-label", "label"], optional: ["p-optional", "optional"], clean: ["p-clean", "clean"], disabled: ["p-disabled", "disabled"], endDate: ["p-end-date", "endDate"], literals: ["p-literals", "literals"], minDate: ["p-min-date", "minDate"], maxDate: ["p-max-date", "maxDate"], noAutocomplete: ["p-no-autocomplete", "noAutocomplete"], readonly: ["p-readonly", "readonly"], required: ["p-required", "required"], startDate: ["p-start-date", "startDate"] }, outputs: { onChange: "p-change" } });
+PoDatepickerRangeBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoDatepickerRangeBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], help: ["p-help", "help"], label: ["p-label", "label"], optional: ["p-optional", "optional"], clean: ["p-clean", "clean"], disabled: ["p-disabled", "disabled"], endDate: ["p-end-date", "endDate"], literals: ["p-literals", "literals"], minDate: ["p-min-date", "minDate"], maxDate: ["p-max-date", "maxDate"], noAutocomplete: ["p-no-autocomplete", "noAutocomplete"], readonly: ["p-readonly", "readonly"], required: ["p-required", "required"], startDate: ["p-start-date", "startDate"], locale: ["p-locale", "locale"] }, outputs: { onChange: "p-change" } });
 __decorate([
     InputBoolean()
 ], PoDatepickerRangeBaseComponent.prototype, "autoFocus", void 0);
@@ -20434,6 +20623,9 @@ __decorate([
         }], startDate: [{
             type: Input,
             args: ['p-start-date']
+        }], locale: [{
+            type: Input,
+            args: ['p-locale']
         }] }); })();
 
 const _c0$U = ["dateRangeField"];
@@ -20457,7 +20649,7 @@ function PoDatepickerRangeComponent_ng_container_17_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngModel", ctx_r5.dateRange)("p-max-date", ctx_r5.maxDate)("p-min-date", ctx_r5.minDate);
+    i0.ɵɵproperty("ngModel", ctx_r5.dateRange)("p-max-date", ctx_r5.maxDate)("p-min-date", ctx_r5.minDate)("p-locale", ctx_r5.locale);
 } }
 const arrowLeftKey = 37;
 const arrowRightKey = 39;
@@ -20882,7 +21074,7 @@ PoDatepickerRangeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.startDateInput = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconCalendar = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.calendarPicker = _t.first);
-    } }, features: [i0.ɵɵProvidersFeature(providers$5), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 20, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-datepicker-range-field", "po-input"], ["dateRangeField", ""], [1, "po-datepicker-range-start-date"], ["maxlength", "10", "type", "text", 1, "po-datepicker-range-input", 3, "autocomplete", "disabled", "name", "readonly", "blur", "focus", "keydown", "keyup", "click"], ["startDateInput", ""], [1, "po-datepicker-range-separator"], [1, "po-datepicker-range-end-date"], ["endDateInput", ""], [1, "po-datepicker-range-icon"], [3, "p-change-event", 4, "ngIf"], [1, "po-icon", "po-field-icon", "po-icon-calendar", 3, "click"], ["iconCalendar", ""], [3, "p-error-pattern"], [4, "ngIf"], [3, "p-change-event"], [1, "po-calendar-range-picker"], ["calendarPicker", ""], ["p-mode", "range", 3, "ngModel", "p-max-date", "p-min-date", "ngModelChange"]], template: function PoDatepickerRangeComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵProvidersFeature(providers$5), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 20, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-datepicker-range-field", "po-input"], ["dateRangeField", ""], [1, "po-datepicker-range-start-date"], ["maxlength", "10", "type", "text", 1, "po-datepicker-range-input", 3, "autocomplete", "disabled", "name", "readonly", "blur", "focus", "keydown", "keyup", "click"], ["startDateInput", ""], [1, "po-datepicker-range-separator"], [1, "po-datepicker-range-end-date"], ["endDateInput", ""], [1, "po-datepicker-range-icon"], [3, "p-change-event", 4, "ngIf"], [1, "po-icon", "po-field-icon", "po-icon-calendar", 3, "click"], ["iconCalendar", ""], [3, "p-error-pattern"], [4, "ngIf"], [3, "p-change-event"], [1, "po-calendar-range-picker"], ["calendarPicker", ""], ["p-mode", "range", 3, "ngModel", "p-max-date", "p-min-date", "p-locale", "ngModelChange"]], template: function PoDatepickerRangeComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2)(3, "div", 3)(4, "input", 4, 5);
         i0.ɵɵlistener("blur", function PoDatepickerRangeComponent_Template_input_blur_4_listener($event) { return ctx.onBlur($event); })("focus", function PoDatepickerRangeComponent_Template_input_focus_4_listener($event) { return ctx.onFocus($event); })("keydown", function PoDatepickerRangeComponent_Template_input_keydown_4_listener($event) { return ctx.onKeydown($event); })("keyup", function PoDatepickerRangeComponent_Template_input_keyup_4_listener($event) { return ctx.onKeyup($event); })("click", function PoDatepickerRangeComponent_Template_input_click_4_listener($event) { return ctx.eventOnClick($event); });
         i0.ɵɵelementEnd()();
@@ -20900,7 +21092,7 @@ PoDatepickerRangeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵelementEnd()()();
         i0.ɵɵelement(16, "po-field-container-bottom", 13);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(17, PoDatepickerRangeComponent_ng_container_17_Template, 4, 3, "ng-container", 14);
+        i0.ɵɵtemplate(17, PoDatepickerRangeComponent_ng_container_17_Template, 4, 4, "ng-container", 14);
     } if (rf & 2) {
         i0.ɵɵproperty("p-help", ctx.help)("p-label", ctx.label)("p-optional", !ctx.required && ctx.optional);
         i0.ɵɵadvance(1);
@@ -20920,7 +21112,7 @@ PoDatepickerRangeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1.NgIf, i2$1.NgControlStatus, i2$1.NgModel, PoCleanComponent, PoCalendarComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDatepickerRangeComponent, [{
         type: Component,
-        args: [{ selector: 'po-datepicker-range', providers: providers$5, changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div #dateRangeField class=\"po-datepicker-range-field po-input\" [class.po-datepicker-range-field-disabled]=\"disabled\">\n    <div class=\"po-datepicker-range-start-date\">\n      <input\n        #startDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"startDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-separator\">-</div>\n\n    <div class=\"po-datepicker-range-end-date\">\n      <input\n        #endDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"endDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <po-clean *ngIf=\"enableCleaner\" (p-change-event)=\"clear()\"></po-clean>\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <span\n        #iconCalendar\n        class=\"po-icon po-field-icon po-icon-calendar\"\n        [class.po-clickable]=\"!disabled && !readonly\"\n        [class.po-field-icon-disabled]=\"disabled || readonly\"\n        (click)=\"toggleCalendar()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorMessage\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-container *ngIf=\"isCalendarVisible\">\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n</ng-container>\n" }]
+        args: [{ selector: 'po-datepicker-range', providers: providers$5, changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div #dateRangeField class=\"po-datepicker-range-field po-input\" [class.po-datepicker-range-field-disabled]=\"disabled\">\n    <div class=\"po-datepicker-range-start-date\">\n      <input\n        #startDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"startDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-separator\">-</div>\n\n    <div class=\"po-datepicker-range-end-date\">\n      <input\n        #endDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"endDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <po-clean *ngIf=\"enableCleaner\" (p-change-event)=\"clear()\"></po-clean>\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <span\n        #iconCalendar\n        class=\"po-icon po-field-icon po-icon-calendar\"\n        [class.po-clickable]=\"!disabled && !readonly\"\n        [class.po-field-icon-disabled]=\"disabled || readonly\"\n        (click)=\"toggleCalendar()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorMessage\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-container *ngIf=\"isCalendarVisible\">\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n</ng-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoDateService }, { type: i0.ElementRef }, { type: PoLanguageService }]; }, { dateRangeField: [{
             type: ViewChild,
             args: ['dateRangeField', { read: ElementRef, static: true }]
@@ -22557,6 +22749,26 @@ class PoLookupBaseComponent {
          *  Por parâmetro será passado o novo valor.
          */
         this.change = new EventEmitter();
+        /**
+         * @optional
+         *
+         * @description
+         * Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis.
+         *
+         * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas.
+         * 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.selectedOptions = [];
         this.oldValue = '';
         this.oldValueToModel = null;
@@ -22866,7 +23078,7 @@ class PoLookupBaseComponent {
     }
 }
 PoLookupBaseComponent.ɵfac = function PoLookupBaseComponent_Factory(t) { return new (t || PoLookupBaseComponent)(i0.ɵɵdirectiveInject(PoLookupFilterService), i0.ɵɵdirectiveInject(Injector)); };
-PoLookupBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoLookupBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], label: ["p-label", "label"], literals: ["p-literals", "literals"], help: ["p-help", "help"], placeholder: ["p-placeholder", "placeholder"], name: "name", fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], filterParams: ["p-filter-params", "filterParams"], fieldFormat: ["p-field-format", "fieldFormat"], columns: ["p-columns", "columns"], optional: ["p-optional", "optional"], advancedFilters: ["p-advanced-filters", "advancedFilters"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], clean: ["p-clean", "clean"], multiple: ["p-multiple", "multiple"], autoHeight: ["p-auto-height", "autoHeight"], filterService: ["p-filter-service", "filterService"], noAutocomplete: ["p-no-autocomplete", "noAutocomplete"], required: ["p-required", "required"], disabled: ["p-disabled", "disabled"] }, outputs: { onError: "p-error", selected: "p-selected", change: "p-change" }, features: [i0.ɵɵNgOnChangesFeature] });
+PoLookupBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoLookupBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], label: ["p-label", "label"], literals: ["p-literals", "literals"], help: ["p-help", "help"], placeholder: ["p-placeholder", "placeholder"], name: "name", fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], filterParams: ["p-filter-params", "filterParams"], fieldFormat: ["p-field-format", "fieldFormat"], columns: ["p-columns", "columns"], optional: ["p-optional", "optional"], advancedFilters: ["p-advanced-filters", "advancedFilters"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], clean: ["p-clean", "clean"], multiple: ["p-multiple", "multiple"], autoHeight: ["p-auto-height", "autoHeight"], filterService: ["p-filter-service", "filterService"], noAutocomplete: ["p-no-autocomplete", "noAutocomplete"], required: ["p-required", "required"], disabled: ["p-disabled", "disabled"] }, outputs: { onError: "p-error", selected: "p-selected", change: "p-change", changeVisibleColumns: "p-change-visible-columns", columnRestoreManager: "p-restore-column-manager" }, features: [i0.ɵɵNgOnChangesFeature] });
 __decorate([
     InputBoolean()
 ], PoLookupBaseComponent.prototype, "autoFocus", void 0);
@@ -22947,6 +23159,12 @@ __decorate([
         }], change: [{
             type: Output,
             args: ['p-change']
+        }], changeVisibleColumns: [{
+            type: Output,
+            args: ['p-change-visible-columns']
+        }], columnRestoreManager: [{
+            type: Output,
+            args: ['p-restore-column-manager']
         }], filterService: [{
             type: Input,
             args: ['p-filter-service']
@@ -23037,6 +23255,26 @@ class PoLookupModalBaseComponent {
         this.multiple = false;
         /** Evento utilizado ao selecionar um registro da tabela. */
         this.model = new EventEmitter();
+        /**
+         * @optional
+         *
+         * @description
+         * Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis.
+         *
+         * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas.
+         * 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.hasNext = true;
         this.isLoading = false;
         this.page = 1;
@@ -23294,7 +23532,7 @@ PoLookupModalBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type:
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poModal = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poTable = _t.first);
-    } }, inputs: { advancedFilters: ["p-advanced-filters", "advancedFilters"], columns: ["p-columns", "columns"], items: ["p-items", "items"], filterService: ["p-filter-service", "filterService"], filterParams: ["p-filter-params", "filterParams"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], multiple: ["p-multiple", "multiple"], selectedItems: ["p-selected-items", "selectedItems"], fieldLabel: ["p-field-label", "fieldLabel"], fieldValue: ["p-field-value", "fieldValue"], literals: ["p-literals", "literals"], title: ["p-title", "title"] }, outputs: { model: "p-change-model" } });
+    } }, inputs: { advancedFilters: ["p-advanced-filters", "advancedFilters"], columns: ["p-columns", "columns"], items: ["p-items", "items"], filterService: ["p-filter-service", "filterService"], filterParams: ["p-filter-params", "filterParams"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], multiple: ["p-multiple", "multiple"], selectedItems: ["p-selected-items", "selectedItems"], fieldLabel: ["p-field-label", "fieldLabel"], fieldValue: ["p-field-value", "fieldValue"], literals: ["p-literals", "literals"], title: ["p-title", "title"] }, outputs: { model: "p-change-model", changeVisibleColumns: "p-change-visible-columns", columnRestoreManager: "p-restore-column-manager" } });
 __decorate([
     InputBoolean()
 ], PoLookupModalBaseComponent.prototype, "infiniteScroll", void 0);
@@ -23342,6 +23580,12 @@ __decorate([
         }], fieldValue: [{
             type: Input,
             args: ['p-field-value']
+        }], changeVisibleColumns: [{
+            type: Output,
+            args: ['p-change-visible-columns']
+        }], columnRestoreManager: [{
+            type: Output,
+            args: ['p-restore-column-manager']
         }], literals: [{
             type: Input,
             args: ['p-literals']
@@ -23915,7 +24159,7 @@ PoLookupModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLo
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poTable = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputSearchEl = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 24, consts: [["p-click-out", "false", "p-hide-close", "false", "p-size", "lg", 3, "p-primary-action", "p-secondary-action", "p-title"], [3, "hidden"], [1, "po-lookup-header", "po-pull-right", 3, "p-optional"], [1, "po-lookup-filter-content"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-field-icon", "po-icon-search", 3, "click"], ["iconLookup", ""], ["name", "contentSearch", "type", "text", 1, "po-input", "po-input-icon-right", 3, "ngModel", "placeholder", "ngModelChange"], ["inpsearch", ""], ["class", "po-lookup-advanced-search", 4, "ngIf"], ["class", "po-md-12", 3, "p-disclaimers", "p-title", "p-change", 4, "ngIf"], [1, "po-row", "po-lookup-container-table"], [1, "po-md-12", 3, "p-selectable", "p-hide-detail", "p-single-select", "p-sort", "p-columns", "p-height", "p-items", "p-literals", "p-loading", "p-show-more-disabled", "p-infinite-scroll", "p-selected", "p-unselected", "p-all-selected", "p-all-unselected", "p-show-more", "p-sort-by"], ["poTable", ""], ["class", "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all", 4, "ngIf"], ["container", ""], [1, "po-lookup-advanced-search"], ["tabindex", "0", "tabindex", "0", 1, "po-lookup-advanced-search-link", 3, "click", "keydown.enter"], [1, "po-md-12", 3, "p-disclaimers", "p-title", "p-change"], [1, "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all"]], template: function PoLookupModalComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 24, consts: [["p-click-out", "false", "p-hide-close", "false", "p-size", "lg", 3, "p-primary-action", "p-secondary-action", "p-title"], [3, "hidden"], [1, "po-lookup-header", "po-pull-right", 3, "p-optional"], [1, "po-lookup-filter-content"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-field-icon", "po-icon-search", 3, "click"], ["iconLookup", ""], ["name", "contentSearch", "type", "text", 1, "po-input", "po-input-icon-right", 3, "ngModel", "placeholder", "ngModelChange"], ["inpsearch", ""], ["class", "po-lookup-advanced-search", 4, "ngIf"], ["class", "po-md-12", 3, "p-disclaimers", "p-title", "p-change", 4, "ngIf"], [1, "po-row", "po-lookup-container-table"], [1, "po-md-12", 3, "p-selectable", "p-hide-detail", "p-single-select", "p-sort", "p-columns", "p-height", "p-items", "p-literals", "p-loading", "p-show-more-disabled", "p-infinite-scroll", "p-selected", "p-unselected", "p-all-selected", "p-all-unselected", "p-show-more", "p-sort-by", "p-change-visible-columns", "p-restore-column-manager"], ["poTable", ""], ["class", "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all", 4, "ngIf"], ["container", ""], [1, "po-lookup-advanced-search"], ["tabindex", "0", "tabindex", "0", 1, "po-lookup-advanced-search-link", 3, "click", "keydown.enter"], [1, "po-md-12", 3, "p-disclaimers", "p-title", "p-change"], [1, "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all"]], template: function PoLookupModalComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-modal", 0)(1, "div", 1)(2, "po-field-container", 2)(3, "div", 3)(4, "div", 4)(5, "span", 5, 6);
         i0.ɵɵlistener("click", function PoLookupModalComponent_Template_span_click_5_listener() { return ctx.search(); });
         i0.ɵɵelementEnd()();
@@ -23926,7 +24170,7 @@ PoLookupModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLo
         i0.ɵɵelementEnd();
         i0.ɵɵtemplate(10, PoLookupModalComponent_po_disclaimer_group_10_Template, 1, 2, "po-disclaimer-group", 10);
         i0.ɵɵelementStart(11, "div", 11)(12, "po-table", 12, 13);
-        i0.ɵɵlistener("p-selected", function PoLookupModalComponent_Template_po_table_p_selected_12_listener($event) { return ctx.onSelect($event); })("p-unselected", function PoLookupModalComponent_Template_po_table_p_unselected_12_listener($event) { return ctx.onUnselect($event); })("p-all-selected", function PoLookupModalComponent_Template_po_table_p_all_selected_12_listener($event) { return ctx.onAllSelected($event); })("p-all-unselected", function PoLookupModalComponent_Template_po_table_p_all_unselected_12_listener($event) { return ctx.onAllUnselected($event); })("p-show-more", function PoLookupModalComponent_Template_po_table_p_show_more_12_listener() { return ctx.showMoreEvent(); })("p-sort-by", function PoLookupModalComponent_Template_po_table_p_sort_by_12_listener($event) { return ctx.sortBy($event); });
+        i0.ɵɵlistener("p-selected", function PoLookupModalComponent_Template_po_table_p_selected_12_listener($event) { return ctx.onSelect($event); })("p-unselected", function PoLookupModalComponent_Template_po_table_p_unselected_12_listener($event) { return ctx.onUnselect($event); })("p-all-selected", function PoLookupModalComponent_Template_po_table_p_all_selected_12_listener($event) { return ctx.onAllSelected($event); })("p-all-unselected", function PoLookupModalComponent_Template_po_table_p_all_unselected_12_listener($event) { return ctx.onAllUnselected($event); })("p-show-more", function PoLookupModalComponent_Template_po_table_p_show_more_12_listener() { return ctx.showMoreEvent(); })("p-sort-by", function PoLookupModalComponent_Template_po_table_p_sort_by_12_listener($event) { return ctx.sortBy($event); })("p-change-visible-columns", function PoLookupModalComponent_Template_po_table_p_change_visible_columns_12_listener($event) { return ctx.changeVisibleColumns.emit($event); })("p-restore-column-manager", function PoLookupModalComponent_Template_po_table_p_restore_column_manager_12_listener($event) { return ctx.columnRestoreManager.emit($event); });
         i0.ɵɵelementEnd()();
         i0.ɵɵtemplate(14, PoLookupModalComponent_po_disclaimer_group_14_Template, 1, 1, "po-disclaimer-group", 14);
         i0.ɵɵelementEnd();
@@ -23956,7 +24200,7 @@ PoLookupModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLo
     } }, dependencies: [i1.NgIf, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel, PoDisclaimerGroupComponent, PoFieldContainerComponent, PoModalComponent, PoTableComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupModalComponent, [{
         type: Component,
-        args: [{ selector: 'po-lookup-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <span #iconLookup class=\"po-icon po-field-icon po-icon-search\" (click)=\"search()\"> </span>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          type=\"text\"\n        />\n      </div>\n\n      <div *ngIf=\"advancedFilters && advancedFilters.length > 0\" class=\"po-lookup-advanced-search\">\n        <span\n          class=\"po-lookup-advanced-search-link\"\n          tabindex=\"0\"\n          (click)=\"onAdvancedFilter()\"\n          (keydown.enter)=\"onAdvancedFilter()\"\n          tabindex=\"0\"\n        >\n          {{ literals.modalAdvancedSearch }}\n        </span>\n      </div>\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup()\"\n    >\n    </po-disclaimer-group>\n\n    <div class=\"po-row po-lookup-container-table\" [style.height.px]=\"containerHeight\">\n      <po-table\n        #poTable\n        class=\"po-md-12\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"!multiple\"\n        [p-sort]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        (p-selected)=\"onSelect($event)\"\n        (p-unselected)=\"onUnselect($event)\"\n        (p-all-selected)=\"onAllSelected($event)\"\n        (p-all-unselected)=\"onAllUnselected($event)\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n      >\n      </po-table>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"multiple\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"selecteds\"\n      (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\n      (p-remove-all)=\"onAllUnselected($event)\"\n    >\n    </po-disclaimer-group>\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n" }]
+        args: [{ selector: 'po-lookup-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <span #iconLookup class=\"po-icon po-field-icon po-icon-search\" (click)=\"search()\"> </span>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          type=\"text\"\n        />\n      </div>\n\n      <div *ngIf=\"advancedFilters && advancedFilters.length > 0\" class=\"po-lookup-advanced-search\">\n        <span\n          class=\"po-lookup-advanced-search-link\"\n          tabindex=\"0\"\n          (click)=\"onAdvancedFilter()\"\n          (keydown.enter)=\"onAdvancedFilter()\"\n          tabindex=\"0\"\n        >\n          {{ literals.modalAdvancedSearch }}\n        </span>\n      </div>\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup()\"\n    >\n    </po-disclaimer-group>\n\n    <div class=\"po-row po-lookup-container-table\" [style.height.px]=\"containerHeight\">\n      <po-table\n        #poTable\n        class=\"po-md-12\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"!multiple\"\n        [p-sort]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        (p-selected)=\"onSelect($event)\"\n        (p-unselected)=\"onUnselect($event)\"\n        (p-all-selected)=\"onAllSelected($event)\"\n        (p-all-unselected)=\"onAllUnselected($event)\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n        (p-change-visible-columns)=\"changeVisibleColumns.emit($event)\"\n        (p-restore-column-manager)=\"columnRestoreManager.emit($event)\"\n      >\n      </po-table>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"multiple\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"selecteds\"\n      (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\n      (p-remove-all)=\"onAllUnselected($event)\"\n    >\n    </po-disclaimer-group>\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n" }]
     }], function () { return [{ type: i0.ComponentFactoryResolver }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }]; }, { poTable: [{
             type: ViewChild,
             args: [PoTableComponent, { static: true }]
@@ -23991,9 +24235,11 @@ class PoLookupModalService {
      * @param selectedItems {any} Valor que está selecionado que será repassado para o modal para apresentar na tabela.
      * @param fieldLabel {string} Valor que será utilizado como descrição do campo.
      * @param fieldValue {string} Valor que será utilizado como valor do campo.
+     * @param changeVisibleColumns {function} Função que será executada quando for alterada a visibilidade das colunas.
+     * @param columnRestoreManager {function} Função que será executada quando for restaurar as colunas padrão.
      */
     openModal(params) {
-        const { advancedFilters, service, columns, filterParams, title, literals, infiniteScroll, multiple, selectedItems, fieldLabel, fieldValue } = params;
+        const { advancedFilters, service, columns, filterParams, title, literals, infiniteScroll, multiple, selectedItems, fieldLabel, fieldValue, changeVisibleColumns, columnRestoreManager } = params;
         this.componentRef = this.poComponentInjector.createComponentInApplication(PoLookupModalComponent);
         this.componentRef.instance.advancedFilters = advancedFilters;
         this.componentRef.instance.title = title;
@@ -24009,6 +24255,8 @@ class PoLookupModalService {
         this.componentRef.instance.selectedItems = selectedItems;
         this.componentRef.instance.fieldLabel = fieldLabel;
         this.componentRef.instance.fieldValue = fieldValue;
+        this.componentRef.instance.changeVisibleColumns = changeVisibleColumns;
+        this.componentRef.instance.columnRestoreManager = columnRestoreManager;
         this.componentRef.changeDetectorRef.detectChanges();
         this.componentRef.instance.openModal();
     }
@@ -24241,7 +24489,7 @@ class PoLookupComponent extends PoLookupBaseComponent {
     }
     openLookup() {
         if (this.isAllowedOpenModal()) {
-            const { advancedFilters, service, columns, filterParams, literals, infiniteScroll, multiple, fieldLabel, fieldValue } = this;
+            const { advancedFilters, service, columns, filterParams, literals, infiniteScroll, multiple, fieldLabel, fieldValue, changeVisibleColumns, columnRestoreManager } = this;
             const selectedItems = this.checkSelectedItems();
             this.poLookupModalService.openModal({
                 advancedFilters,
@@ -24254,7 +24502,9 @@ class PoLookupComponent extends PoLookupBaseComponent {
                 multiple,
                 selectedItems,
                 fieldLabel,
-                fieldValue
+                fieldValue,
+                changeVisibleColumns,
+                columnRestoreManager
             });
             if (!this.modalSubscription) {
                 this.modalSubscription = this.poLookupModalService.selectValueEvent.subscribe(selectedOptions => {
@@ -25469,7 +25719,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.initialized = true;
     }
     ngOnChanges(changes) {
-        if (changes.filterService || changes.fieldValue || changes.fieldLabel) {
+        if (this.filterService && (changes.filterService || changes.fieldValue || changes.fieldLabel)) {
             this.setService(this.filterService);
         }
     }
@@ -26648,7 +26898,8 @@ class PoUploadBaseService {
         }
     }
     sendFile(url, file, headers, formData, uploadCallback, successCallback, errorCallback) {
-        const request = this.getRequest(url, headers, formData).subscribe(event => {
+        let request = new Subscription();
+        request = this.getRequest(url, headers, formData).subscribe(event => {
             if (event.type === HttpEventType.UploadProgress) {
                 this.addRequest(file, request);
                 const percentDone = Math.round((100 * event.loaded) / event.total);
@@ -29032,7 +29283,7 @@ function PoRichTextToolbarComponent_div_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-small", true)("p-buttons", ctx_r2.alignButtons);
+    i0.ɵɵproperty("p-buttons", ctx_r2.alignButtons);
 } }
 const poRichTextDefaultColor = '#000000';
 class PoRichTextToolbarComponent {
@@ -29194,12 +29445,12 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.toolbarElement = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richTextImageModal = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richTextLinkModal = _t.first);
-    } }, inputs: { disabledTextAlign: ["p-disabled-text-align", "disabledTextAlign"], readonly: ["p-readonly", "readonly"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, decls: 16, vars: 10, consts: [[1, "po-rich-text-toolbar"], ["toolbarElement", ""], ["data-rich-text-toolbar", "format", 1, "po-rich-text-toolbar-button-align"], ["p-toggle", "multiple", 3, "p-small", "p-buttons"], ["class", "po-rich-text-toolbar-button-align", "data-rich-text-toolbar", "color", 4, "ngIf"], ["class", "po-rich-text-toolbar-button-align", "data-rich-text-toolbar", "align", 4, "ngIf"], ["data-rich-text-toolbar", "list", 1, "po-rich-text-toolbar-button-align"], ["p-toggle", "single", 3, "p-small", "p-buttons"], ["data-rich-text-toolbar", "link", 1, "po-rich-text-toolbar-button-align"], [3, "p-small", "p-buttons"], ["data-rich-text-toolbar", "media", 1, "po-rich-text-toolbar-button-align"], [3, "p-command"], ["richTextImageModal", ""], [3, "p-command", "p-link-editing"], ["richTextLinkModal", ""], ["data-rich-text-toolbar", "color", 1, "po-rich-text-toolbar-button-align"], [1, "po-rich-text-toolbar-color-picker-container"], [1, "po-button", "po-button-default", "po-button-sm", "po-text-ellipsis", "po-rich-text-toolbar-color-picker-button", 3, "disabled", "p-tooltip"], ["type", "color", 1, "po-rich-text-toolbar-color-picker-input", 3, "disabled", "change"], ["colorPickerInput", ""], ["data-rich-text-toolbar", "align", 1, "po-rich-text-toolbar-button-align"]], template: function PoRichTextToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { disabledTextAlign: ["p-disabled-text-align", "disabledTextAlign"], readonly: ["p-readonly", "readonly"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, decls: 16, vars: 6, consts: [[1, "po-rich-text-toolbar"], ["toolbarElement", ""], ["data-rich-text-toolbar", "format", 1, "po-rich-text-toolbar-button-align"], ["p-toggle", "multiple", 3, "p-buttons"], ["class", "po-rich-text-toolbar-button-align", "data-rich-text-toolbar", "color", 4, "ngIf"], ["class", "po-rich-text-toolbar-button-align", "data-rich-text-toolbar", "align", 4, "ngIf"], ["data-rich-text-toolbar", "list", 1, "po-rich-text-toolbar-button-align"], ["p-toggle", "single", 3, "p-buttons"], ["data-rich-text-toolbar", "link", 1, "po-rich-text-toolbar-button-align"], [3, "p-buttons"], ["data-rich-text-toolbar", "media", 1, "po-rich-text-toolbar-button-align"], [3, "p-command"], ["richTextImageModal", ""], [3, "p-command", "p-link-editing"], ["richTextLinkModal", ""], ["data-rich-text-toolbar", "color", 1, "po-rich-text-toolbar-button-align"], [1, "po-rich-text-toolbar-color-picker-container"], [1, "po-button", "po-button-default", "po-rich-text-toolbar-color-picker-button", 3, "disabled", "p-tooltip"], ["type", "color", 1, "po-rich-text-toolbar-color-picker-input", 3, "disabled", "change"], ["colorPickerInput", ""], ["data-rich-text-toolbar", "align", 1, "po-rich-text-toolbar-button-align"]], template: function PoRichTextToolbarComponent_Template(rf, ctx) { if (rf & 1) {
         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, 5, "div", 4);
-        i0.ɵɵtemplate(5, PoRichTextToolbarComponent_div_5_Template, 2, 2, "div", 5);
+        i0.ɵɵtemplate(5, PoRichTextToolbarComponent_div_5_Template, 2, 1, "div", 5);
         i0.ɵɵelementStart(6, "div", 6);
         i0.ɵɵelement(7, "po-button-group", 7);
         i0.ɵɵelementEnd();
@@ -29217,21 +29468,21 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.formatButtons);
+        i0.ɵɵproperty("p-buttons", ctx.formatButtons);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !ctx.isInternetExplorer);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !ctx.disabledTextAlign);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.listButtons);
+        i0.ɵɵproperty("p-buttons", ctx.listButtons);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.linkButtons);
+        i0.ɵɵproperty("p-buttons", ctx.linkButtons);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("p-small", true)("p-buttons", ctx.mediaButtons);
+        i0.ɵɵproperty("p-buttons", ctx.mediaButtons);
     } }, dependencies: [i1.NgIf, PoButtonGroupComponent, PoTooltipDirective, PoRichTextImageModalComponent, PoRichTextLinkModalComponent], encapsulation: 2 });
 (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\" data-rich-text-toolbar=\"format\">\n    <po-button-group p-toggle=\"multiple\" [p-small]=\"true\" [p-buttons]=\"formatButtons\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-button-default po-button-sm 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 *ngIf=\"!disabledTextAlign\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"align\">\n    <po-button-group p-toggle=\"single\" [p-small]=\"true\" [p-buttons]=\"alignButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"list\">\n    <po-button-group p-toggle=\"single\" [p-small]=\"true\" [p-buttons]=\"listButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"link\">\n    <po-button-group [p-small]=\"true\" [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\n    <po-button-group [p-small]=\"true\" [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\" data-rich-text-toolbar=\"format\">\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\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-button-default 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 *ngIf=\"!disabledTextAlign\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"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\" data-rich-text-toolbar=\"list\">\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\" data-rich-text-toolbar=\"link\">\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\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 }]
@@ -30359,9 +30610,9 @@ function PoSelectComponent_option_4_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const option_r7 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", ctx_r2.readonly)("value", option_r7.value);
+    i0.ɵɵproperty("disabled", ctx_r2.readonly)("value", option_r7 == null ? null : option_r7[ctx_r2.fieldValue]);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", option_r7 == null ? null : option_r7.label, " ");
+    i0.ɵɵtextInterpolate1(" ", option_r7 == null ? null : option_r7[ctx_r2.fieldLabel], " ");
 } }
 function PoSelectComponent_li_15_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -30372,8 +30623,9 @@ function PoSelectComponent_li_15_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const option_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r13 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(option_r10 == null ? null : option_r10.label);
+    i0.ɵɵtextInterpolate(option_r10 == null ? null : option_r10[ctx_r13.fieldLabel]);
 } }
 function PoSelectComponent_li_15_ng_template_5_Template(rf, ctx) { }
 const _c4$1 = function (a0) { return { $implicit: a0 }; };
@@ -30391,8 +30643,8 @@ function PoSelectComponent_li_15_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵreference(4);
     const _r14 = i0.ɵɵreference(6);
     const ctx_r6 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("po-select-item-selected", ctx_r6.selectedValue === option_r10.value);
-    i0.ɵɵproperty("value", option_r10.value);
+    i0.ɵɵclassProp("po-select-item-selected", ctx_r6.selectedValue === (option_r10 == null ? null : option_r10[ctx_r6.fieldLabel]));
+    i0.ɵɵproperty("value", option_r10 == null ? null : option_r10[ctx_r6.fieldValue]);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r6.selectOptionTemplate)("ngIfThen", _r14)("ngIfElse", _r12);
     i0.ɵɵadvance(3);
@@ -30404,6 +30656,8 @@ const _c7 = function (a0, a1) { return { "po-field-icon-disabled": a0, "po-field
 const _c8 = function (a0) { return { "po-invisible": a0 }; };
 const poSelectContentOffset = 8;
 const poSelectContentPositionDefault = 'bottom';
+const PO_SELECT_FIELD_LABEL_DEFAULT = 'label';
+const PO_SELECT_FIELD_VALUE_DEFAULT = 'value';
 /**
  * @docsExtends PoFieldValidateModel
  *
@@ -30427,6 +30681,11 @@ const poSelectContentPositionDefault = 'bottom';
  *   <file name='sample-po-select-customer-registration/sample-po-select-customer-registration.component.po.ts'> </file>
  * </example>
  *
+ * <example name="po-select-companies" title="PO Select Companies">
+ *   <file name="sample-po-select-companies/sample-po-select-companies.component.html"> </file>
+ *   <file name="sample-po-select-companies/sample-po-select-companies.component.ts"> </file>
+ * </example>
+ *
  * @description
  *
  * O componente po-select exibe uma lista de valores e permite que o usuário selecione um desses valores.
@@ -30477,6 +30736,8 @@ class PoSelectComponent extends PoFieldValidateModel {
         this.isMobile = isMobile();
         this.open = false;
         this.selectIcon = 'po-icon-arrow-down';
+        this._fieldLabel = PO_SELECT_FIELD_LABEL_DEFAULT;
+        this._fieldValue = PO_SELECT_FIELD_VALUE_DEFAULT;
         this.onScroll = () => {
             this.controlPosition.adjustPosition(poSelectContentPositionDefault);
         };
@@ -30499,14 +30760,55 @@ class PoSelectComponent extends PoFieldValidateModel {
      * ```
      */
     set options(options) {
-        this._options = options;
-        removeDuplicatedOptions(this._options);
-        removeUndefinedAndNullOptions(this._options);
+        if (this.fieldLabel && this.fieldValue) {
+            options.map(option => {
+                option.label = option[this.fieldLabel];
+                option.value = option[this.fieldValue];
+            });
+        }
+        this.validateOptions([...options]);
         this.onUpdateOptions();
+        this._options = [...options];
     }
     get options() {
         return this._options;
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente
+     * (`p-options`), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
+     *
+     * @default `label`
+     */
+    set fieldLabel(value) {
+        this._fieldLabel = value || PO_SELECT_FIELD_LABEL_DEFAULT;
+        if (this.options && this.options.length > 0) {
+            this.options = [...this.options];
+        }
+    }
+    get fieldLabel() {
+        return this._fieldLabel;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente
+     * (`p-options`), esta propriedade será responsável pelo valor de cada item da lista.
+     *
+     * @default `value`
+     */
+    set fieldValue(value) {
+        this._fieldValue = value || PO_SELECT_FIELD_VALUE_DEFAULT;
+        if (this.options && this.options.length > 0) {
+            this.options = [...this.options];
+        }
+    }
+    get fieldValue() {
+        return this._fieldValue;
+    }
     get isInvisibleSelectNative() {
         return this.readonly && this.isMobile;
     }
@@ -30540,6 +30842,8 @@ class PoSelectComponent extends PoFieldValidateModel {
         if (change) {
             removeDuplicatedOptions(this.options);
             removeUndefinedAndNullOptions(this.options);
+            removeDuplicatedOptionsWithFieldValue(this.options, this.fieldValue);
+            removeUndefinedAndNullOptionsWithFieldValue(this.options, this.fieldValue);
         }
     }
     /**
@@ -30606,12 +30910,12 @@ class PoSelectComponent extends PoFieldValidateModel {
     }
     // Atualiza valores
     updateValues(option) {
-        if (this.selectedValue !== option.value) {
-            this.selectedValue = option.value;
-            this.selectElement.nativeElement.value = option.value;
-            this.updateModel(option.value);
-            this.displayValue = option.label;
-            this.emitChange(option.value);
+        if (this.selectedValue !== option[this.fieldValue]) {
+            this.selectedValue = option[this.fieldValue];
+            this.selectElement.nativeElement.value = option[this.fieldValue];
+            this.updateModel(option[this.fieldValue]);
+            this.displayValue = option[this.fieldLabel];
+            this.emitChange(option[this.fieldValue]);
         }
     }
     // Esconde Content do Select quando for clicado fora
@@ -30626,9 +30930,9 @@ class PoSelectComponent extends PoFieldValidateModel {
         const optionFound = this.findOptionValue(value);
         if (optionFound) {
             this.selectElement.nativeElement.value = optionFound.value;
-            this.selectedValue = optionFound.value;
-            this.displayValue = optionFound.label;
-            this.setScrollPosition(optionFound.value);
+            this.selectedValue = optionFound[this.fieldValue];
+            this.displayValue = optionFound[this.fieldLabel];
+            this.setScrollPosition(optionFound[this.fieldValue]);
         }
         else if (validValue(this.selectedValue)) {
             this.selectElement.nativeElement.value = undefined;
@@ -30711,6 +31015,12 @@ class PoSelectComponent extends PoFieldValidateModel {
             }
         }
     }
+    validateOptions(options) {
+        removeDuplicatedOptions(options);
+        removeUndefinedAndNullOptions(options);
+        removeDuplicatedOptionsWithFieldValue(options, this.fieldValue);
+        removeUndefinedAndNullOptionsWithFieldValue(options, this.fieldValue);
+    }
 }
 PoSelectComponent.ɵfac = function PoSelectComponent_Factory(t) { return new (t || PoSelectComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoControlPositionService)); };
 PoSelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSelectComponent, selectors: [["po-select"]], viewQuery: function PoSelectComponent_Query(rf, ctx) { if (rf & 1) {
@@ -30726,7 +31036,7 @@ PoSelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSelectC
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectButtonElement = _t.first);
     } }, hostBindings: function PoSelectComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("keydown", function PoSelectComponent_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
-    } }, inputs: { readonly: ["p-readonly", "readonly"], placeholder: ["p-placeholder", "placeholder"], options: ["p-options", "options"] }, outputs: { ngModelChange: "ngModelChange" }, features: [i0.ɵɵProvidersFeature([
+    } }, inputs: { readonly: ["p-readonly", "readonly"], placeholder: ["p-placeholder", "placeholder"], options: ["p-options", "options"], fieldLabel: ["p-field-label", "fieldLabel"], fieldValue: ["p-field-value", "fieldValue"] }, outputs: { ngModelChange: "ngModelChange" }, features: [i0.ɵɵProvidersFeature([
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PoSelectComponent),
@@ -30795,7 +31105,7 @@ __decorate([
                         multi: true
                     },
                     PoControlPositionService
-                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <select\n    #select\n    class=\"po-select\"\n    [attr.name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{ 'po-select-mobile': isMobile, 'po-invisible': isInvisibleSelectNative }\"\n    [required]=\"required\"\n    (change)=\"onSelectChange($event.target.value)\"\n    (blur)=\"onBlur()\"\n  >\n    <option *ngIf=\"isMobile\" disabled hidden selected></option>\n    <option *ngFor=\"let option of options\" [disabled]=\"readonly\" [value]=\"option.value\" (click)=\"onOptionClick(option)\">\n      {{ option?.label }}\n    </option>\n  </select>\n\n  <div class=\"po-select-container\">\n    <div\n      #selectButton\n      class=\"po-select-button\"\n      [ngClass]=\"{ 'po-select-button-disabled': disabled, 'po-select-button-readonly': readonly }\"\n      (click)=\"toggleButton()\"\n    >\n      <span>{{ displayValue || placeholder }}</span>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #icon\n          class=\"po-icon {{ selectIcon }} po-field-icon\"\n          [ngClass]=\"{ 'po-field-icon-disabled': disabled, 'po-field-icon-readonly': readonly }\"\n        ></span>\n      </div>\n    </div>\n\n    <ul #contentList class=\"po-select-content\" [ngClass]=\"{ 'po-invisible': isMobile }\">\n      <li\n        *ngFor=\"let option of options\"\n        [class.po-select-item-selected]=\"selectedValue === option.value\"\n        [value]=\"option.value\"\n        (click)=\"onOptionClick(option)\"\n      >\n        <div class=\"po-select-item\">\n          <ng-container *ngIf=\"selectOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n          <ng-template #defaultOptionTemplate>\n            <span>{{ option?.label }}</span>\n          </ng-template>\n\n          <ng-template\n            #optionTemplate\n            [ngTemplateOutlet]=\"selectOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option }\"\n          >\n          </ng-template>\n        </div>\n      </li>\n    </ul>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <select\n    #select\n    class=\"po-select\"\n    [attr.name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{ 'po-select-mobile': isMobile, 'po-invisible': isInvisibleSelectNative }\"\n    [required]=\"required\"\n    (change)=\"onSelectChange($event.target.value)\"\n    (blur)=\"onBlur()\"\n  >\n    <option *ngIf=\"isMobile\" disabled hidden selected></option>\n    <option\n      *ngFor=\"let option of options\"\n      [disabled]=\"readonly\"\n      [value]=\"option?.[this.fieldValue]\"\n      (click)=\"onOptionClick(option)\"\n    >\n      {{ option?.[this.fieldLabel] }}\n    </option>\n  </select>\n\n  <div class=\"po-select-container\">\n    <div\n      #selectButton\n      class=\"po-select-button\"\n      [ngClass]=\"{ 'po-select-button-disabled': disabled, 'po-select-button-readonly': readonly }\"\n      (click)=\"toggleButton()\"\n    >\n      <span>{{ displayValue || placeholder }}</span>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #icon\n          class=\"po-icon {{ selectIcon }} po-field-icon\"\n          [ngClass]=\"{ 'po-field-icon-disabled': disabled, 'po-field-icon-readonly': readonly }\"\n        ></span>\n      </div>\n    </div>\n\n    <ul #contentList class=\"po-select-content\" [ngClass]=\"{ 'po-invisible': isMobile }\">\n      <li\n        *ngFor=\"let option of options\"\n        [class.po-select-item-selected]=\"selectedValue === option?.[this.fieldLabel]\"\n        [value]=\"option?.[this.fieldValue]\"\n        (click)=\"onOptionClick(option)\"\n      >\n        <div class=\"po-select-item\">\n          <ng-container *ngIf=\"selectOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n          <ng-template #defaultOptionTemplate>\n            <span>{{ option?.[this.fieldLabel] }}</span>\n          </ng-template>\n\n          <ng-template\n            #optionTemplate\n            [ngTemplateOutlet]=\"selectOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option }\"\n          >\n          </ng-template>\n        </div>\n      </li>\n    </ul>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }, { type: PoControlPositionService }]; }, { contentList: [{
             type: ViewChild,
             args: ['contentList', { read: ElementRef, static: true }]
@@ -30820,6 +31130,12 @@ __decorate([
         }], options: [{
             type: Input,
             args: ['p-options']
+        }], fieldLabel: [{
+            type: Input,
+            args: ['p-field-label']
+        }], fieldValue: [{
+            type: Input,
+            args: ['p-field-value']
         }], onKeydown: [{
             type: HostListener,
             args: ['keydown', ['$event']]
@@ -32868,7 +33184,7 @@ function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_combo_10_Template(
 function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_lookup_11_Template(rf, ctx) { if (rf & 1) {
     const _r90 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-lookup", 28, 19);
-    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_lookup_11_Template_po_lookup_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r90); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r89 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r89.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_lookup_11_Template_po_lookup_p_change_0_listener() { i0.ɵɵrestoreView(_r90); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r92 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r92.onChangeField(field_r2)); });
+    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_lookup_11_Template_po_lookup_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r90); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r89 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r89.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_lookup_11_Template_po_lookup_p_change_0_listener() { i0.ɵɵrestoreView(_r90); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r92 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r92.onChangeField(field_r2)); })("p-change-visible-columns", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_lookup_11_Template_po_lookup_p_change_visible_columns_0_listener($event) { i0.ɵɵrestoreView(_r90); const field_r2 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(field_r2.changeVisibleColumns($event)); })("p-restore-column-manager", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_lookup_11_Template_po_lookup_p_restore_column_manager_0_listener($event) { i0.ɵɵrestoreView(_r90); const field_r2 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(field_r2.columnRestoreManager($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r2 = i0.ɵɵnextContext().$implicit;
@@ -32876,9 +33192,9 @@ function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_lookup_11_Template
     i0.ɵɵproperty("name", field_r2.property)("ngModel", ctx_r13.value[field_r2.property])("ngClass", field_r2.componentClass)("p-clean", field_r2.clean)("p-columns", field_r2.columns)("p-disabled", ctx_r13.isDisabled(field_r2))("p-field-label", field_r2.fieldLabel || "label")("p-field-value", field_r2.fieldValue || "value")("p-filter-params", field_r2.params)("p-filter-service", field_r2.searchService)("p-auto-focus", field_r2.focus)("p-auto-height", field_r2.autoHeight)("p-help", field_r2.help)("p-field-format", field_r2.format)("p-infinite-scroll", field_r2.infiniteScroll)("p-label", field_r2.label)("p-literals", field_r2.literals)("p-multiple", field_r2.multiple)("p-no-autocomplete", field_r2.noAutocomplete)("p-optional", field_r2.optional)("p-required", field_r2.required)("p-placeholder", field_r2.placeholder)("p-advanced-filters", field_r2.advancedFilters);
 } }
 function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_checkbox_group_12_Template(rf, ctx) { if (rf & 1) {
-    const _r97 = i0.ɵɵgetCurrentView();
+    const _r101 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-checkbox-group", 25, 19);
-    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_checkbox_group_12_Template_po_checkbox_group_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r97); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r96 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r96.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_checkbox_group_12_Template_po_checkbox_group_p_change_0_listener() { i0.ɵɵrestoreView(_r97); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r99 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r99.onChangeField(field_r2)); });
+    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_checkbox_group_12_Template_po_checkbox_group_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r101); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r100 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r100.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_checkbox_group_12_Template_po_checkbox_group_p_change_0_listener() { i0.ɵɵrestoreView(_r101); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r103 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r103.onChangeField(field_r2)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r2 = i0.ɵɵnextContext().$implicit;
@@ -32886,9 +33202,9 @@ function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_checkbox_group_12_
     i0.ɵɵproperty("name", field_r2.property)("ngModel", ctx_r14.value[field_r2.property])("ngClass", field_r2.componentClass)("p-columns", field_r2.columns || 3)("p-auto-focus", field_r2.focus)("p-disabled", ctx_r14.isDisabled(field_r2))("p-help", field_r2.help)("p-label", field_r2.label)("p-optional", field_r2.optional)("p-options", field_r2.options)("p-required", field_r2.required);
 } }
 function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_multiselect_13_Template(rf, ctx) { if (rf & 1) {
-    const _r104 = i0.ɵɵgetCurrentView();
+    const _r108 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-multiselect", 29, 19);
-    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_multiselect_13_Template_po_multiselect_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r104); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r103 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r103.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_multiselect_13_Template_po_multiselect_p_change_0_listener() { i0.ɵɵrestoreView(_r104); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r106 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r106.onChangeField(field_r2)); });
+    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_multiselect_13_Template_po_multiselect_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r108); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r107 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r107.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_multiselect_13_Template_po_multiselect_p_change_0_listener() { i0.ɵɵrestoreView(_r108); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r110 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r110.onChangeField(field_r2)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r2 = i0.ɵɵnextContext().$implicit;
@@ -32896,9 +33212,9 @@ function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_multiselect_13_Tem
     i0.ɵɵproperty("name", field_r2.property)("ngModel", ctx_r15.value[field_r2.property])("ngClass", field_r2.componentClass)("p-disabled", ctx_r15.isDisabled(field_r2))("p-auto-focus", field_r2.focus)("p-auto-height", field_r2.autoHeight)("p-help", field_r2.help)("p-label", field_r2.label)("p-literals", field_r2.literals)("p-optional", field_r2.optional)("p-options", field_r2.options)("p-required", field_r2.required)("p-placeholder", field_r2.placeholder)("p-field-label", field_r2.fieldLabel)("p-field-value", field_r2.fieldValue)("p-filter-service", field_r2.optionsService)("p-filter-mode", field_r2.filterMode)("p-debounce-time", field_r2.debounceTime)("p-sort", field_r2.sort)("p-placeholder-search", field_r2.placeholderSearch)("p-hide-search", field_r2.hideSearch)("p-hide-select-all", field_r2.hideSelectAll);
 } }
 function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Template(rf, ctx) { if (rf & 1) {
-    const _r111 = i0.ɵɵgetCurrentView();
+    const _r115 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-textarea", 30, 19);
-    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Template_po_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r111); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r110 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r110.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Template_po_textarea_p_change_0_listener() { i0.ɵɵrestoreView(_r111); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r113 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r113.onChangeField(field_r2)); })("p-change-model", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Template_po_textarea_p_change_model_0_listener() { i0.ɵɵrestoreView(_r111); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r115 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r115.onChangeFieldModel(field_r2)); });
+    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Template_po_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r115); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r114 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r114.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Template_po_textarea_p_change_0_listener() { i0.ɵɵrestoreView(_r115); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r117 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r117.onChangeField(field_r2)); })("p-change-model", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Template_po_textarea_p_change_model_0_listener() { i0.ɵɵrestoreView(_r115); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r119 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r119.onChangeFieldModel(field_r2)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r2 = i0.ɵɵnextContext().$implicit;
@@ -32906,9 +33222,9 @@ function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Templa
     i0.ɵɵproperty("name", field_r2.property)("ngModel", ctx_r16.value[field_r2.property])("ngClass", field_r2.componentClass)("p-disabled", ctx_r16.isDisabled(field_r2))("p-auto-focus", field_r2.focus)("p-help", field_r2.help)("p-label", field_r2.label)("p-maxlength", field_r2.maxLength)("p-minlength", field_r2.minLength)("p-optional", field_r2.optional)("p-readonly", field_r2.readonly)("p-required", field_r2.required)("p-rows", field_r2.rows)("p-placeholder", field_r2.placeholder);
 } }
 function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_password_15_Template(rf, ctx) { if (rf & 1) {
-    const _r120 = i0.ɵɵgetCurrentView();
+    const _r124 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-password", 31, 19);
-    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_password_15_Template_po_password_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r120); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r119 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r119.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_password_15_Template_po_password_p_change_0_listener() { i0.ɵɵrestoreView(_r120); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r122 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r122.onChangeField(field_r2)); })("p-change-model", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_password_15_Template_po_password_p_change_model_0_listener() { i0.ɵɵrestoreView(_r120); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r124 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r124.onChangeFieldModel(field_r2)); });
+    i0.ɵɵlistener("ngModelChange", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_password_15_Template_po_password_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r124); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r123 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r123.value[field_r2.property] = $event)); })("p-change", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_password_15_Template_po_password_p_change_0_listener() { i0.ɵɵrestoreView(_r124); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r126 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r126.onChangeField(field_r2)); })("p-change-model", function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_password_15_Template_po_password_p_change_model_0_listener() { i0.ɵɵrestoreView(_r124); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r128 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r128.onChangeFieldModel(field_r2)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r2 = i0.ɵɵnextContext().$implicit;
@@ -33090,14 +33406,14 @@ PoDynamicFormFieldsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.components = _t);
-    } }, features: [i0.ɵɵProvidersFeature([PoDynamicFormValidationService], [{ provide: ControlContainer, useExisting: NgForm }]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "po-row", 4, "ngIf"], [1, "po-row"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-sm-12", 3, "p-label", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change", 4, "ngIf"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change", 4, "ngIf"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [1, "po-sm-12", 3, "p-label"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change"], ["component", ""], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"]], template: function PoDynamicFormFieldsComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵProvidersFeature([PoDynamicFormValidationService], [{ provide: ControlContainer, useExisting: NgForm }]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "po-row", 4, "ngIf"], [1, "po-row"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-sm-12", 3, "p-label", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change", 4, "ngIf"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change", 4, "ngIf"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [1, "po-sm-12", 3, "p-label"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change"], ["component", ""], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"]], template: function PoDynamicFormFieldsComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, PoDynamicFormFieldsComponent_div_0_Template, 2, 2, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.visibleFields && ctx.visibleFields.length > 0);
     } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2$1.NgControlStatus, i2$1.NgModel, PoDividerComponent, PoCheckboxGroupComponent, PoDatepickerComponent, PoComboComponent, PoDecimalComponent, PoDatepickerRangeComponent, PoInputComponent, PoLookupComponent, PoMultiselectComponent, PoNumberComponent, PoPasswordComponent, PoRadioGroupComponent, PoSelectComponent, PoSwitchComponent, PoTextareaComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDynamicFormFieldsComponent, [{
         type: Component,
-        args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-iso-format]=\"field.isoFormat\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-step]=\"field.step\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      [p-label-position]=\"field.labelPosition\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-options]=\"field.options\"\n      [p-optional]=\"field.optional\"\n      [p-sort]=\"field.sort\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-filter-minlength]=\"field.filterMinlength\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-disabled-init-filter]=\"field.disabledInitFilter\"\n      [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-change-on-enter]=\"field.changeOnEnter\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-multiple]=\"field.multiple\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-advanced-filters]=\"field.advancedFilters\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-sort]=\"field.sort\"\n      [p-placeholder-search]=\"field.placeholderSearch\"\n      [p-hide-search]=\"field.hideSearch\"\n      [p-hide-select-all]=\"field.hideSelectAll\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-hide-password-peek]=\"field.hidePasswordPeek\"\n      [p-icon]=\"field.icon\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n  </ng-container>\n</div>\n" }]
+        args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-iso-format]=\"field.isoFormat\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-step]=\"field.step\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      [p-label-position]=\"field.labelPosition\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-options]=\"field.options\"\n      [p-optional]=\"field.optional\"\n      [p-sort]=\"field.sort\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-filter-minlength]=\"field.filterMinlength\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-disabled-init-filter]=\"field.disabledInitFilter\"\n      [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-change-on-enter]=\"field.changeOnEnter\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-multiple]=\"field.multiple\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-advanced-filters]=\"field.advancedFilters\"\n      (p-change-visible-columns)=\"field.changeVisibleColumns($event)\"\n      (p-restore-column-manager)=\"field.columnRestoreManager($event)\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-sort]=\"field.sort\"\n      [p-placeholder-search]=\"field.placeholderSearch\"\n      [p-hide-search]=\"field.hideSearch\"\n      [p-hide-select-all]=\"field.hideSelectAll\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-hide-password-peek]=\"field.hidePasswordPeek\"\n      [p-icon]=\"field.icon\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n  </ng-container>\n</div>\n" }]
     }], function () { return [{ type: i1.TitleCasePipe }, { type: PoDynamicFormValidationService }, { type: i0.ChangeDetectorRef }, { type: i2$1.NgForm }]; }, { components: [{
             type: ViewChildren,
             args: ['component']
@@ -35854,7 +36170,7 @@ PoListViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoListV
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poPopupComponent = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 13, consts: [["class", "po-list-view-main-header", 4, "ngIf"], [1, "po-list-view-main-content"], ["class", "po-list-view", 4, "ngIf"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-mb-2 po-text-center", 4, "ngIf"], [3, "p-actions", "p-target"], ["popup", ""], [1, "po-list-view-main-header"], [1, "po-checkbox-group-item"], [1, "po-list-view-main-select"], ["name", "selectAll", 3, "ngModel", "p-label", "ngModelChange", "p-change", "click"], [1, "po-list-view"], [1, "po-list-view-container-no-data", "po-text-center"], [1, "po-list-view-container"], [1, "po-list-view-header"], [1, "po-list-view-title", 3, "ngSwitch"], ["class", "po-list-view-select", 4, "ngIf"], ["class", "po-list-view-title-link", "target", "_blank", 3, "href", "click", 4, "ngSwitchCase"], ["class", "po-list-view-title-link", 3, "routerLink", "click", 4, "ngSwitchCase"], ["class", "po-list-view-title-no-link", 3, "po-list-view-title-link", "click", 4, "ngSwitchCase"], ["class", "po-list-view-actions", 4, "ngIf"], ["class", "po-list-view-more-actions", 4, "ngIf"], ["class", "po-list-view-content", 4, "ngIf"], ["class", "po-list-view-detail", 4, "ngIf"], ["class", "po-list-view-detail-button", 4, "ngIf"], [1, "po-list-view-select"], ["name", "checkbox", 3, "ngModel", "ngModelChange", "p-change", "click"], ["target", "_blank", 1, "po-list-view-title-link", 3, "href", "click"], [1, "po-list-view-title-link", 3, "routerLink", "click"], [1, "po-list-view-title-no-link", 3, "click"], [1, "po-list-view-actions"], ["p-small", "true", 3, "p-disabled", "p-icon", "p-label", "p-kind", "p-click", 4, "ngFor", "ngForOf"], ["p-small", "true", 3, "p-disabled", "p-icon", "p-label", "p-kind", "p-click"], [1, "po-list-view-more-actions"], [1, "po-icon", "po-icon-more", "po-list-view-more-icon", "po-clickable", 3, "click"], ["popupTarget", ""], [1, "po-list-view-content"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-list-view-detail"], [1, "po-list-view-detail-button"], [1, "po-clickable", 3, "click"], [1, "po-mb-2", "po-text-center"], [3, "p-disabled", "p-label", "p-click"]], template: function PoListViewComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 13, consts: [["class", "po-list-view-main-header", 4, "ngIf"], [1, "po-list-view-main-content"], ["class", "po-list-view", 4, "ngIf"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-mb-2 po-text-center", 4, "ngIf"], [3, "p-actions", "p-target"], ["popup", ""], [1, "po-list-view-main-header"], [1, "po-checkbox-group-item"], [1, "po-list-view-main-select"], ["name", "selectAll", 3, "ngModel", "p-label", "ngModelChange", "p-change", "click"], [1, "po-list-view"], [1, "po-list-view-container-no-data", "po-text-center"], [1, "po-list-view-container"], [1, "po-list-view-header"], [1, "po-list-view-title", 3, "ngSwitch"], ["class", "po-list-view-select", 4, "ngIf"], ["class", "po-list-view-title-link", "target", "_blank", 3, "href", "click", 4, "ngSwitchCase"], ["class", "po-list-view-title-link", 3, "routerLink", "click", 4, "ngSwitchCase"], ["class", "po-list-view-title-no-link", 3, "po-list-view-title-link", "click", 4, "ngSwitchCase"], ["class", "po-list-view-actions", 4, "ngIf"], ["class", "po-list-view-more-actions", 4, "ngIf"], ["class", "po-list-view-content", 4, "ngIf"], ["class", "po-list-view-detail", 4, "ngIf"], ["class", "po-list-view-detail-button", 4, "ngIf"], [1, "po-list-view-select"], ["name", "checkbox", 3, "ngModel", "ngModelChange", "p-change", "click"], ["target", "_blank", 1, "po-list-view-title-link", 3, "href", "click"], [1, "po-list-view-title-link", 3, "routerLink", "click"], [1, "po-list-view-title-no-link", 3, "click"], [1, "po-list-view-actions"], [3, "p-disabled", "p-icon", "p-label", "p-kind", "p-click", 4, "ngFor", "ngForOf"], [3, "p-disabled", "p-icon", "p-label", "p-kind", "p-click"], [1, "po-list-view-more-actions"], [1, "po-icon", "po-icon-more", "po-list-view-more-icon", "po-clickable", 3, "click"], ["popupTarget", ""], [1, "po-list-view-content"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-list-view-detail"], [1, "po-list-view-detail-button"], [1, "po-clickable", 3, "click"], [1, "po-mb-2", "po-text-center"], [3, "p-disabled", "p-label", "p-click"]], template: function PoListViewComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div");
         i0.ɵɵtemplate(1, PoListViewComponent_div_1_Template, 4, 2, "div", 0);
         i0.ɵɵelementStart(2, "div", 1);
@@ -35893,7 +36209,7 @@ PoListViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoListV
                         transition('* => void', [style({ height: '*', 'overflow-y': 'hidden' }), animate(100, style({ height: 0 }))]),
                         transition('void => *', [style({ height: '0' }), animate(100, style({ height: '*' }))])
                     ])
-                ], template: "<div\n  [class.po-list-view-main-container-header]=\"showHeader\"\n  [class.po-list-view-main-container]=\"!showHeader\"\n  [style.height.px]=\"height\"\n>\n  <div *ngIf=\"showHeader\" class=\"po-list-view-main-header\">\n    <div class=\"po-checkbox-group-item\">\n      <div class=\"po-list-view-main-select\">\n        <po-checkbox\n          name=\"selectAll\"\n          [(ngModel)]=\"selectAll\"\n          [p-label]=\"literals.selectAll\"\n          (p-change)=\"selectAllListItems()\"\n          (click)=\"selectAllListItems()\"\n        ></po-checkbox>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-list-view-main-content\">\n    <div class=\"po-list-view\" *ngIf=\"!hasItems()\">\n      <div class=\"po-list-view-container-no-data po-text-center\">\n        <span> {{ literals.noData }} </span>\n      </div>\n    </div>\n\n    <ng-container *ngFor=\"let item of items; let index = index; trackBy: trackBy\">\n      <div class=\"po-list-view\">\n        <div class=\"po-list-view-container\">\n          <div class=\"po-list-view-header\">\n            <div class=\"po-list-view-title\" [ngSwitch]=\"checkTitleType(item)\">\n              <div *ngIf=\"select\" class=\"po-list-view-select\">\n                <po-checkbox\n                  [(ngModel)]=\"item.$selected\"\n                  name=\"checkbox\"\n                  (p-change)=\"selectListItem(item)\"\n                  (click)=\"selectListItem(item)\"\n                ></po-checkbox>\n              </div>\n              <a\n                *ngSwitchCase=\"'externalLink'\"\n                class=\"po-list-view-title-link\"\n                target=\"_blank\"\n                [href]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <a\n                *ngSwitchCase=\"'internalLink'\"\n                class=\"po-list-view-title-link\"\n                [routerLink]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <span\n                *ngSwitchCase=\"'noLink'\"\n                class=\"po-list-view-title-no-link\"\n                [class.po-list-view-title-link]=\"titleHasAction\"\n                (click)=\"titleHasAction && runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </span>\n            </div>\n\n            <div *ngIf=\"showButtonsActions\" class=\"po-list-view-actions\">\n              <po-button\n                *ngFor=\"let action of visibleActions\"\n                p-small=\"true\"\n                [p-disabled]=\"returnBooleanValue(action, item)\"\n                [p-icon]=\"action.icon\"\n                [p-label]=\"action.label\"\n                [p-kind]=\"action.type\"\n                (p-click)=\"onClickAction(action, item)\"\n              >\n              </po-button>\n            </div>\n\n            <div *ngIf=\"showPopupActions\" class=\"po-list-view-more-actions\">\n              <span\n                #popupTarget\n                class=\"po-icon po-icon-more po-list-view-more-icon po-clickable\"\n                (click)=\"togglePopup(item, popupTarget)\"\n              >\n              </span>\n            </div>\n          </div>\n\n          <div *ngIf=\"hasContentTemplate\" class=\"po-list-view-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"listViewContentTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n            >\n            </ng-template>\n          </div>\n\n          <div @showHideDetail *ngIf=\"hasDetailTemplate && item.$showDetail\" class=\"po-list-view-detail\">\n            <ng-template\n              [ngTemplateOutlet]=\"listViewDetailTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n            >\n            </ng-template>\n          </div>\n        </div>\n\n        <div *ngIf=\"hasDetailTemplate\" class=\"po-list-view-detail-button\">\n          <span class=\"po-clickable\" (click)=\"item.$showDetail = !item.$showDetail\">\n            {{ item.$showDetail ? literals.hideDetails : literals.showDetails }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div *ngIf=\"displayShowMoreButton\" class=\"po-mb-2 po-text-center\">\n  <po-button [p-disabled]=\"showMoreDisabled\" [p-label]=\"literals.loadMoreData\" (p-click)=\"onShowMore()\"> </po-button>\n</div>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n" }]
+                ], template: "<div\n  [class.po-list-view-main-container-header]=\"showHeader\"\n  [class.po-list-view-main-container]=\"!showHeader\"\n  [style.height.px]=\"height\"\n>\n  <div *ngIf=\"showHeader\" class=\"po-list-view-main-header\">\n    <div class=\"po-checkbox-group-item\">\n      <div class=\"po-list-view-main-select\">\n        <po-checkbox\n          name=\"selectAll\"\n          [(ngModel)]=\"selectAll\"\n          [p-label]=\"literals.selectAll\"\n          (p-change)=\"selectAllListItems()\"\n          (click)=\"selectAllListItems()\"\n        ></po-checkbox>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-list-view-main-content\">\n    <div class=\"po-list-view\" *ngIf=\"!hasItems()\">\n      <div class=\"po-list-view-container-no-data po-text-center\">\n        <span> {{ literals.noData }} </span>\n      </div>\n    </div>\n\n    <ng-container *ngFor=\"let item of items; let index = index; trackBy: trackBy\">\n      <div class=\"po-list-view\">\n        <div class=\"po-list-view-container\">\n          <div class=\"po-list-view-header\">\n            <div class=\"po-list-view-title\" [ngSwitch]=\"checkTitleType(item)\">\n              <div *ngIf=\"select\" class=\"po-list-view-select\">\n                <po-checkbox\n                  [(ngModel)]=\"item.$selected\"\n                  name=\"checkbox\"\n                  (p-change)=\"selectListItem(item)\"\n                  (click)=\"selectListItem(item)\"\n                ></po-checkbox>\n              </div>\n              <a\n                *ngSwitchCase=\"'externalLink'\"\n                class=\"po-list-view-title-link\"\n                target=\"_blank\"\n                [href]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <a\n                *ngSwitchCase=\"'internalLink'\"\n                class=\"po-list-view-title-link\"\n                [routerLink]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <span\n                *ngSwitchCase=\"'noLink'\"\n                class=\"po-list-view-title-no-link\"\n                [class.po-list-view-title-link]=\"titleHasAction\"\n                (click)=\"titleHasAction && runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </span>\n            </div>\n\n            <div *ngIf=\"showButtonsActions\" class=\"po-list-view-actions\">\n              <po-button\n                *ngFor=\"let action of visibleActions\"\n                [p-disabled]=\"returnBooleanValue(action, item)\"\n                [p-icon]=\"action.icon\"\n                [p-label]=\"action.label\"\n                [p-kind]=\"action.type\"\n                (p-click)=\"onClickAction(action, item)\"\n              >\n              </po-button>\n            </div>\n\n            <div *ngIf=\"showPopupActions\" class=\"po-list-view-more-actions\">\n              <span\n                #popupTarget\n                class=\"po-icon po-icon-more po-list-view-more-icon po-clickable\"\n                (click)=\"togglePopup(item, popupTarget)\"\n              >\n              </span>\n            </div>\n          </div>\n\n          <div *ngIf=\"hasContentTemplate\" class=\"po-list-view-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"listViewContentTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n            >\n            </ng-template>\n          </div>\n\n          <div @showHideDetail *ngIf=\"hasDetailTemplate && item.$showDetail\" class=\"po-list-view-detail\">\n            <ng-template\n              [ngTemplateOutlet]=\"listViewDetailTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n            >\n            </ng-template>\n          </div>\n        </div>\n\n        <div *ngIf=\"hasDetailTemplate\" class=\"po-list-view-detail-button\">\n          <span class=\"po-clickable\" (click)=\"item.$showDetail = !item.$showDetail\">\n            {{ item.$showDetail ? literals.hideDetails : literals.showDetails }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div *ngIf=\"displayShowMoreButton\" class=\"po-mb-2 po-text-center\">\n  <po-button [p-disabled]=\"showMoreDisabled\" [p-label]=\"literals.loadMoreData\" (p-click)=\"onShowMore()\"> </po-button>\n</div>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: PoLanguageService }]; }, { listViewContentTemplate: [{
             type: ContentChild,
             args: [PoListViewContentTemplateDirective, { static: true }]
@@ -43816,6 +44132,7 @@ class PoWidgetBaseComponent {
          */
         this.titleAction = new EventEmitter();
         this.containerHeight = 'auto';
+        this.id = uuid();
         this._disabled = false;
         this._noShadow = false;
         this._primary = false;
@@ -44020,17 +44337,23 @@ function PoWidgetComponent_div_1_div_4_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 13);
     i0.ɵɵlistener("click", function PoWidgetComponent_div_1_div_4_span_1_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r10.settingOutput($event)); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r8 = i0.ɵɵnextContext(3);
+    i0.ɵɵpropertyInterpolate1("id", "settingAction-", ctx_r8.id, "");
 } }
 function PoWidgetComponent_div_1_div_4_span_2_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 14);
     i0.ɵɵlistener("click", function PoWidgetComponent_div_1_div_4_span_2_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r12.openHelp($event)); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r9 = i0.ɵɵnextContext(3);
+    i0.ɵɵpropertyInterpolate1("id", "helpLink-", ctx_r9.id, "");
 } }
 function PoWidgetComponent_div_1_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵtemplate(1, PoWidgetComponent_div_1_div_4_span_1_Template, 1, 0, "span", 11);
-    i0.ɵɵtemplate(2, PoWidgetComponent_div_1_div_4_span_2_Template, 1, 0, "span", 12);
+    i0.ɵɵtemplate(1, PoWidgetComponent_div_1_div_4_span_1_Template, 1, 1, "span", 11);
+    i0.ɵɵtemplate(2, PoWidgetComponent_div_1_div_4_span_2_Template, 1, 1, "span", 12);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(2);
@@ -44061,7 +44384,9 @@ function PoWidgetComponent_div_5_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r14 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵpropertyInterpolate1("id", "primaryAct-", ctx_r14.id, "");
+    i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r14.primaryLabel);
 } }
 function PoWidgetComponent_div_5_div_2_Template(rf, ctx) { if (rf & 1) {
@@ -44072,25 +44397,29 @@ function PoWidgetComponent_div_5_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r15 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵpropertyInterpolate1("id", "primaryAct-", ctx_r15.id, "");
+    i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r15.primaryLabel);
 } }
 function PoWidgetComponent_div_5_div_3_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "a", 21);
+    i0.ɵɵelementStart(0, "div", 20)(1, "a", 19);
     i0.ɵɵlistener("click", function PoWidgetComponent_div_5_div_3_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.runSecondaryAction($event)); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r16 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵpropertyInterpolate1("id", "secondaryAct-", ctx_r16.id, "");
+    i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r16.secondaryLabel);
 } }
 function PoWidgetComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵtemplate(1, PoWidgetComponent_div_5_div_1_Template, 3, 1, "div", 16);
-    i0.ɵɵtemplate(2, PoWidgetComponent_div_5_div_2_Template, 3, 1, "div", 17);
-    i0.ɵɵtemplate(3, PoWidgetComponent_div_5_div_3_Template, 3, 1, "div", 17);
+    i0.ɵɵtemplate(1, PoWidgetComponent_div_5_div_1_Template, 3, 2, "div", 16);
+    i0.ɵɵtemplate(2, PoWidgetComponent_div_5_div_2_Template, 3, 2, "div", 17);
+    i0.ɵɵtemplate(3, PoWidgetComponent_div_5_div_3_Template, 3, 2, "div", 17);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -44205,7 +44534,7 @@ class PoWidgetComponent extends PoWidgetBaseComponent {
     }
 }
 PoWidgetComponent.ɵfac = function PoWidgetComponent_Factory(t) { return new (t || PoWidgetComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-PoWidgetComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoWidgetComponent, selectors: [["po-widget"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1, decls: 6, vars: 15, consts: [[3, "click"], ["class", "po-widget-header", 4, "ngIf"], ["p-no-border", "", 3, "p-height"], [1, "po-widget-body"], ["class", "po-widget-footer", 4, "ngIf"], [1, "po-widget-header"], ["class", "po-widget-title-action", 3, "click", 4, "ngIf", "ngIfElse"], ["noTitleAction", ""], ["class", "po-pull-right", 4, "ngIf"], [1, "po-widget-title-action", 3, "click"], [1, "po-pull-right"], ["id", "settingAction", "class", "po-clickable po-icon po-icon-settings", 3, "click", 4, "ngIf"], ["id", "helpLink", "class", "po-clickable po-icon po-icon-help", 3, "click", 4, "ngIf"], ["id", "settingAction", 1, "po-clickable", "po-icon", "po-icon-settings", 3, "click"], ["id", "helpLink", 1, "po-clickable", "po-icon", "po-icon-help", 3, "click"], [1, "po-widget-footer"], ["class", "po-widget-xl", 4, "ngIf"], ["class", "po-widget-md", 4, "ngIf"], [1, "po-widget-xl"], ["id", "primaryAct", 1, "po-widget-action", 3, "click"], [1, "po-widget-md"], ["id", "secondaryAct", 1, "po-widget-action", 3, "click"]], template: function PoWidgetComponent_Template(rf, ctx) { if (rf & 1) {
+PoWidgetComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoWidgetComponent, selectors: [["po-widget"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1, decls: 6, vars: 15, consts: [[3, "click"], ["class", "po-widget-header", 4, "ngIf"], ["p-no-border", "", 3, "p-height"], [1, "po-widget-body"], ["class", "po-widget-footer", 4, "ngIf"], [1, "po-widget-header"], ["class", "po-widget-title-action", 3, "click", 4, "ngIf", "ngIfElse"], ["noTitleAction", ""], ["class", "po-pull-right", 4, "ngIf"], [1, "po-widget-title-action", 3, "click"], [1, "po-pull-right"], ["class", "po-clickable po-icon po-icon-settings", 3, "id", "click", 4, "ngIf"], ["class", "po-clickable po-icon po-icon-help", 3, "id", "click", 4, "ngIf"], [1, "po-clickable", "po-icon", "po-icon-settings", 3, "id", "click"], [1, "po-clickable", "po-icon", "po-icon-help", 3, "id", "click"], [1, "po-widget-footer"], ["class", "po-widget-xl", 4, "ngIf"], ["class", "po-widget-md", 4, "ngIf"], [1, "po-widget-xl"], [1, "po-widget-action", 3, "id", "click"], [1, "po-widget-md"]], template: function PoWidgetComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵlistener("click", function PoWidgetComponent_Template_div_click_0_listener($event) { return ctx.onClick($event); });
@@ -44227,7 +44556,7 @@ PoWidgetComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoWidgetC
     } }, dependencies: [i1.NgIf, PoContainerComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoWidgetComponent, [{
         type: Component,
-        args: [{ selector: 'po-widget', template: "<div\n  [class.po-clickable]=\"click.observers.length\"\n  [class.po-widget]=\"!primary\"\n  [class.po-widget-disabled]=\"disabled\"\n  [class.po-widget-primary]=\"primary\"\n  [class.po-widget-no-shadow]=\"noShadow\"\n  [style.background-image]=\"background ? 'url(' + background + ')' : undefined\"\n  (click)=\"onClick($event)\"\n>\n  <div *ngIf=\"hasTitleHelpOrSetting()\" class=\"po-widget-header\">\n    <span *ngIf=\"showTitleAction; else noTitleAction\" class=\"po-widget-title-action\" (click)=\"runTitleAction($event)\">\n      {{ title }}\n    </span>\n    <ng-template #noTitleAction>{{ title }}</ng-template>\n\n    <div *ngIf=\"setting.observers[0] || help\" class=\"po-pull-right\">\n      <span\n        id=\"settingAction\"\n        *ngIf=\"setting.observers[0]\"\n        class=\"po-clickable po-icon po-icon-settings\"\n        (click)=\"settingOutput($event)\"\n      >\n      </span>\n      <span id=\"helpLink\" *ngIf=\"help\" class=\"po-clickable po-icon po-icon-help\" (click)=\"openHelp($event)\"> </span>\n    </div>\n  </div>\n\n  <po-container p-no-border [p-height]=\"containerHeight\">\n    <div class=\"po-widget-body\">\n      <ng-content></ng-content>\n    </div>\n  </po-container>\n\n  <div *ngIf=\"primaryLabel\" class=\"po-widget-footer\">\n    <div class=\"po-widget-xl\" *ngIf=\"!secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"secondaryAct\" (click)=\"runSecondaryAction($event)\">{{ secondaryLabel }}</a>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-widget', template: "<div\n  [class.po-clickable]=\"click.observers.length\"\n  [class.po-widget]=\"!primary\"\n  [class.po-widget-disabled]=\"disabled\"\n  [class.po-widget-primary]=\"primary\"\n  [class.po-widget-no-shadow]=\"noShadow\"\n  [style.background-image]=\"background ? 'url(' + background + ')' : undefined\"\n  (click)=\"onClick($event)\"\n>\n  <div *ngIf=\"hasTitleHelpOrSetting()\" class=\"po-widget-header\">\n    <span *ngIf=\"showTitleAction; else noTitleAction\" class=\"po-widget-title-action\" (click)=\"runTitleAction($event)\">\n      {{ title }}\n    </span>\n    <ng-template #noTitleAction>{{ title }}</ng-template>\n\n    <div *ngIf=\"setting.observers[0] || help\" class=\"po-pull-right\">\n      <span\n        id=\"settingAction-{{ id }}\"\n        *ngIf=\"setting.observers[0]\"\n        class=\"po-clickable po-icon po-icon-settings\"\n        (click)=\"settingOutput($event)\"\n      >\n      </span>\n      <span id=\"helpLink-{{ id }}\" *ngIf=\"help\" class=\"po-clickable po-icon po-icon-help\" (click)=\"openHelp($event)\">\n      </span>\n    </div>\n  </div>\n\n  <po-container p-no-border [p-height]=\"containerHeight\">\n    <div class=\"po-widget-body\">\n      <ng-content></ng-content>\n    </div>\n  </po-container>\n\n  <div *ngIf=\"primaryLabel\" class=\"po-widget-footer\">\n    <div class=\"po-widget-xl\" *ngIf=\"!secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"secondaryAct-{{ id }}\" (click)=\"runSecondaryAction($event)\">{{\n        secondaryLabel\n      }}</a>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ViewContainerRef }]; }, null); })();
 
 /**