@po-ui/ng-components 6.9.0 → 6.11.0

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

@@ -2463,8 +2463,16 @@ function validateProperty(property, target) {
     }
 }
 
-const PO_BUTTON_TYPES = ['default', 'primary', 'danger', 'link'];
-const PO_BUTTON_TYPE_DEFAULT = 'default';
+var PoButtonKind;
+(function (PoButtonKind) {
+    PoButtonKind["primary"] = "primary";
+    PoButtonKind["default"] = "secondary";
+    PoButtonKind["secondary"] = "secondary";
+    PoButtonKind["link"] = "tertiary";
+    PoButtonKind["tertiary"] = "tertiary";
+    PoButtonKind["danger"] = "danger";
+})(PoButtonKind || (PoButtonKind = {}));
+
 /**
  * @description
  *
@@ -2502,7 +2510,7 @@ class PoButtonBaseComponent {
         this._disabled = false;
         this._loading = false;
         this._small = false;
-        this._type = 'default';
+        this._kind = PoButtonKind.secondary;
     }
     /**
      * @optional
@@ -2537,25 +2545,50 @@ class PoButtonBaseComponent {
         return this._small;
     }
     /**
+     * @deprecated 15.x.x
+     *
      * @optional
      *
      * @description
+     * **Deprecated 15.x.x**. Utilizar `p-kind` no lugar.
      *
      * Define o estilo do `po-button`.
      *
      * Valore válidos:
-     *  - `default`: estilo padrão do `po-button`.
+     *  - `default`: **Deprecated 15.x.x**. Utilizar `p-kind="secondary"`.
      *  - `primary`: deixa o `po-button` com destaque, deve ser usado para ações primárias.
      *  - `danger`: deve ser usado para ações que o usuário precisa ter cuidado ao executa-lá.
-     *  - `link`: o `po-button` recebe o estilo de um link.
+     *  - `link`: **Deprecated 15.x.x**. Utilizar `p-kind="tertiary"`.
      *
-     * @default `default`
+     * @default `secondary`
      */
     set type(value) {
-        this._type = PO_BUTTON_TYPES.includes(value) ? value : PO_BUTTON_TYPE_DEFAULT;
+        this.kind = value;
     }
     get type() {
-        return this._type;
+        return this.kind;
+    }
+    /**
+     *
+     * @optional
+     *
+     * @description
+     *
+     * Define o estilo do `po-button`.
+     *
+     * Valore válidos:
+     *  - `primary`: deixa o `po-button` com destaque, deve ser usado para ações primárias.
+     *  - `secondary`: estilo padrão do `po-button`.
+     *  - `danger`: deve ser usado para ações que o usuário precisa ter cuidado ao executa-lá.
+     *  - `tertiary`: o `po-button` é exibido sem cor do fundo, recebendo menos destaque entre as ações.
+     *
+     * @default `secondary`
+     */
+    set kind(value) {
+        this._kind = PoButtonKind[value] ? PoButtonKind[value] : PoButtonKind.secondary;
+    }
+    get kind() {
+        return this._kind;
     }
     /**
      * @optional
@@ -2574,7 +2607,7 @@ class PoButtonBaseComponent {
     }
 }
 PoButtonBaseComponent.ɵfac = function PoButtonBaseComponent_Factory(t) { return new (t || PoButtonBaseComponent)(); };
-PoButtonBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoButtonBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], label: ["p-label", "label"], icon: ["p-icon", "icon"], loading: ["p-loading", "loading"], small: ["p-small", "small"], type: ["p-type", "type"], disabled: ["p-disabled", "disabled"] }, outputs: { click: "p-click" } });
+PoButtonBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoButtonBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], label: ["p-label", "label"], icon: ["p-icon", "icon"], loading: ["p-loading", "loading"], small: ["p-small", "small"], type: ["p-type", "type"], kind: ["p-kind", "kind"], disabled: ["p-disabled", "disabled"] }, outputs: { click: "p-click" } });
 __decorate([
     InputBoolean()
 ], PoButtonBaseComponent.prototype, "autoFocus", void 0);
@@ -2602,6 +2635,9 @@ __decorate([
             }], type: [{
                 type: Input,
                 args: ['p-type']
+            }], kind: [{
+                type: Input,
+                args: ['p-kind']
             }], disabled: [{
                 type: Input,
                 args: ['p-disabled']
@@ -2702,7 +2738,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttonElement = _t.first);
         }
-    }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 14, consts: [["type", "button", 1, "po-button", "po-text-ellipsis", 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) {
+    }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 16, consts: [["type", "button", 1, "po-button", "po-text-ellipsis", 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(); });
@@ -2712,7 +2748,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            i0.ɵɵclassProp("po-button-danger", ctx.type === "danger")("po-button-link", ctx.type === "link")("po-button-primary", ctx.type === "primary")("po-button-sm", ctx.small)("po-clickable", ctx.type === "link");
+            i0.ɵɵclassProp("po-button-default", ctx.kind === "secondary")("po-button-danger", ctx.kind === "danger")("po-button-link", ctx.kind === "tertiary")("po-button-primary", ctx.kind === "primary")("po-button-sm", ctx.small)("po-clickable", ctx.kind === "link");
             i0.ɵɵproperty("disabled", ctx.disabled || ctx.loading);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.loading);
@@ -2725,7 +2761,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
 (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 po-text-ellipsis\"\n  type=\"button\"\n  [class.po-button-danger]=\"type === 'danger'\"\n  [class.po-button-link]=\"type === 'link'\"\n  [class.po-button-primary]=\"type === 'primary'\"\n  [class.po-button-sm]=\"small\"\n  [class.po-clickable]=\"type === 'link'\"\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 po-text-ellipsis\"\n  type=\"button\"\n  [class.po-button-default]=\"kind === 'secondary'\"\n  [class.po-button-danger]=\"kind === 'danger'\"\n  [class.po-button-link]=\"kind === 'tertiary'\"\n  [class.po-button-primary]=\"kind === 'primary'\"\n  [class.po-button-sm]=\"small\"\n  [class.po-clickable]=\"kind === 'link'\"\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 }]
@@ -12239,7 +12275,7 @@ const _c0$$ = ["*"];
  *  <po-modal-footer>
  *    <po-button p-label="Close" (p-click)="modal.close()"> </po-button>
  *    <po-button p-label="Clean" (p-click)="clean()"> </po-button>
- *    <po-button p-label="Confirm" p-type="primary" (p-click)="confirm()"> </po-button>
+ *    <po-button p-label="Confirm" p-kind="primary" (p-click)="confirm()"> </po-button>
  *  </po-modal-footer>
  * </po-modal>
  * ```
@@ -12324,7 +12360,7 @@ function PoModalComponent_div_0_ng_template_13_po_button_1_Template(rf, ctx) {
     }
     if (rf & 2) {
         const ctx_r8 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("p-disabled", ctx_r8.secondaryAction.disabled)("p-label", ctx_r8.secondaryAction.label)("p-loading", ctx_r8.secondaryAction.loading)("p-type", ctx_r8.getSecondaryActionButtonType());
+        i0.ɵɵproperty("p-disabled", ctx_r8.secondaryAction.disabled)("p-label", ctx_r8.secondaryAction.label)("p-loading", ctx_r8.secondaryAction.loading)("p-kind", ctx_r8.getSecondaryActionButtonType());
     }
 }
 function PoModalComponent_div_0_ng_template_13_Template(rf, ctx) {
@@ -12341,7 +12377,7 @@ function PoModalComponent_div_0_ng_template_13_Template(rf, ctx) {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx_r5.secondaryAction);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("p-disabled", ctx_r5.primaryAction.disabled)("p-label", ctx_r5.primaryAction.label)("p-loading", ctx_r5.primaryAction.loading)("p-type", ctx_r5.getPrimaryActionButtonType());
+        i0.ɵɵproperty("p-disabled", ctx_r5.primaryAction.disabled)("p-label", ctx_r5.primaryAction.label)("p-loading", ctx_r5.primaryAction.loading)("p-kind", ctx_r5.getPrimaryActionButtonType());
     }
 }
 function PoModalComponent_div_0_Template(rf, ctx) {
@@ -12424,7 +12460,7 @@ class PoModalComponent extends PoModalBaseComponent {
         return this.primaryAction.danger ? 'danger' : 'primary';
     }
     getSecondaryActionButtonType() {
-        return this.secondaryAction && this.secondaryAction.danger && !this.primaryAction.danger ? 'danger' : 'default';
+        return this.secondaryAction && this.secondaryAction.danger && !this.primaryAction.danger ? 'danger' : 'secondary';
     }
     onClickOut(event) {
         if (this.clickOut && !this.modalContent.nativeElement.contains(event.target)) {
@@ -12488,7 +12524,7 @@ PoModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalCom
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
         }
-    }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2$b, decls: 1, vars: 1, consts: [["class", "po-modal", "tabindex", "0", 3, "keydown.esc", 4, "ngIf"], ["tabindex", "0", 1, "po-modal", 3, "keydown.esc"], [1, "po-modal-overlay"], [1, "po-modal-container", "po-pb-2", "po-pt-2", 3, "mousedown"], [1, "po-modal-vertical-align"], ["tabindex", "-1"], ["modalContent", ""], [1, "po-modal-header"], [1, "po-modal-title", "po-text-ellipsis"], ["class", "po-modal-header-close-button", "tabindex", "0", 3, "click", 4, "ngIf"], [1, "po-modal-body"], [4, "ngIf", "ngIfElse"], ["defaultModalFooterTemplate", ""], ["tabindex", "0", 1, "po-modal-header-close-button", 3, "click"], [1, "po-icon", "po-icon-close"], [3, "p-disabled", "p-label", "p-loading", "p-type", "p-click", 4, "ngIf"], [1, "po-button-modal-first-action", 3, "p-disabled", "p-label", "p-loading", "p-type", "p-click"], [3, "p-disabled", "p-label", "p-loading", "p-type", "p-click"]], template: function PoModalComponent_Template(rf, ctx) {
+    }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2$b, decls: 1, vars: 1, consts: [["class", "po-modal", "tabindex", "0", 3, "keydown.esc", 4, "ngIf"], ["tabindex", "0", 1, "po-modal", 3, "keydown.esc"], [1, "po-modal-overlay"], [1, "po-modal-container", "po-pb-2", "po-pt-2", 3, "mousedown"], [1, "po-modal-vertical-align"], ["tabindex", "-1"], ["modalContent", ""], [1, "po-modal-header"], [1, "po-modal-title", "po-text-ellipsis"], ["class", "po-modal-header-close-button", "tabindex", "0", 3, "click", 4, "ngIf"], [1, "po-modal-body"], [4, "ngIf", "ngIfElse"], ["defaultModalFooterTemplate", ""], ["tabindex", "0", 1, "po-modal-header-close-button", 3, "click"], [1, "po-icon", "po-icon-close"], [3, "p-disabled", "p-label", "p-loading", "p-kind", "p-click", 4, "ngIf"], [1, "po-button-modal-first-action", 3, "p-disabled", "p-label", "p-loading", "p-kind", "p-click"], [3, "p-disabled", "p-label", "p-loading", "p-kind", "p-click"]], template: function PoModalComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef(_c1$r);
             i0.ɵɵtemplate(0, PoModalComponent_div_0_Template, 15, 7, "div", 0);
@@ -12500,7 +12536,7 @@ PoModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalCom
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoModalComponent, [{
             type: Component,
-            args: [{ selector: 'po-modal', template: "<div *ngIf=\"!isHidden\" class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n  <div class=\"po-modal-overlay\">\n    <div class=\"po-modal-container po-pb-2 po-pt-2\" (mousedown)=\"onClickOut($event)\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              {{ title }}\n            </div>\n\n            <a *ngIf=\"!hideClose\" class=\"po-modal-header-close-button\" tabindex=\"0\" (click)=\"close(true)\">\n              <span class=\"po-icon po-icon-close\"></span>\n            </a>\n          </div>\n\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n\n          <ng-container *ngIf=\"modalFooter; else defaultModalFooterTemplate\">\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          </ng-container>\n\n          <ng-template #defaultModalFooterTemplate>\n            <po-modal-footer>\n              <po-button\n                *ngIf=\"secondaryAction\"\n                [p-disabled]=\"secondaryAction.disabled\"\n                [p-label]=\"secondaryAction.label\"\n                [p-loading]=\"secondaryAction.loading\"\n                [p-type]=\"getSecondaryActionButtonType()\"\n                (p-click)=\"secondaryAction.action()\"\n              >\n              </po-button>\n\n              <po-button\n                class=\"po-button-modal-first-action\"\n                [p-disabled]=\"primaryAction.disabled\"\n                [p-label]=\"primaryAction.label\"\n                [p-loading]=\"primaryAction.loading\"\n                [p-type]=\"getPrimaryActionButtonType()\"\n                (p-click)=\"primaryAction.action()\"\n              >\n              </po-button>\n            </po-modal-footer>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'po-modal', template: "<div *ngIf=\"!isHidden\" class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n  <div class=\"po-modal-overlay\">\n    <div class=\"po-modal-container po-pb-2 po-pt-2\" (mousedown)=\"onClickOut($event)\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              {{ title }}\n            </div>\n\n            <a *ngIf=\"!hideClose\" class=\"po-modal-header-close-button\" tabindex=\"0\" (click)=\"close(true)\">\n              <span class=\"po-icon po-icon-close\"></span>\n            </a>\n          </div>\n\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n\n          <ng-container *ngIf=\"modalFooter; else defaultModalFooterTemplate\">\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          </ng-container>\n\n          <ng-template #defaultModalFooterTemplate>\n            <po-modal-footer>\n              <po-button\n                *ngIf=\"secondaryAction\"\n                [p-disabled]=\"secondaryAction.disabled\"\n                [p-label]=\"secondaryAction.label\"\n                [p-loading]=\"secondaryAction.loading\"\n                [p-kind]=\"getSecondaryActionButtonType()\"\n                (p-click)=\"secondaryAction.action()\"\n              >\n              </po-button>\n\n              <po-button\n                class=\"po-button-modal-first-action\"\n                [p-disabled]=\"primaryAction.disabled\"\n                [p-label]=\"primaryAction.label\"\n                [p-loading]=\"primaryAction.loading\"\n                [p-kind]=\"getPrimaryActionButtonType()\"\n                (p-click)=\"primaryAction.action()\"\n              >\n              </po-button>\n            </po-modal-footer>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], function () { return [{ type: PoActiveOverlayService }, { type: PoLanguageService }]; }, { modalContent: [{
                 type: ViewChild,
                 args: ['modalContent', { read: ElementRef }]
@@ -14595,7 +14631,7 @@ PoTableColumnManagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popover = _t.first);
         }
-    }, inputs: { columns: ["p-columns", "columns"], target: ["p-target", "target"], colunsDefault: ["p-columns-default", "colunsDefault"], lastVisibleColumnsSelected: ["p-last-visible-columns-selected", "lastVisibleColumnsSelected"], maxColumns: ["p-max-columns", "maxColumns"] }, outputs: { visibleColumnsChange: "p-visible-columns-change", changeVisibleColumns: "p-change-visible-columns", initialColumns: "p-initial-columns" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["p-position", "bottom-left", 3, "p-target", "p-close", 4, "ngIf"], ["p-position", "bottom-left", 3, "p-target", "p-close"], ["popover", ""], [1, "po-table-column-manager-header"], [1, "po-table-column-manager-header-title"], [1, "po-table-column-manager-header-close"], [1, "po-table-column-manager-header-close-button", "po-clickable", "po-icon", "po-icon-close", 3, "click"], [1, "po-table-column-manager-body"], ["name", "visibleColumns", "p-columns", "1", 3, "ngModel", "p-options", "ngModelChange", "p-change"], [1, "po-table-column-manager-footer"], ["p-small", "", "p-type", "link", 1, "po-table-column-manager-footer-restore", 3, "p-label", "p-click"]], template: function PoTableColumnManagerComponent_Template(rf, ctx) {
+    }, inputs: { columns: ["p-columns", "columns"], target: ["p-target", "target"], colunsDefault: ["p-columns-default", "colunsDefault"], lastVisibleColumnsSelected: ["p-last-visible-columns-selected", "lastVisibleColumnsSelected"], maxColumns: ["p-max-columns", "maxColumns"] }, outputs: { visibleColumnsChange: "p-visible-columns-change", changeVisibleColumns: "p-change-visible-columns", initialColumns: "p-initial-columns" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["p-position", "bottom-left", 3, "p-target", "p-close", 4, "ngIf"], ["p-position", "bottom-left", 3, "p-target", "p-close"], ["popover", ""], [1, "po-table-column-manager-header"], [1, "po-table-column-manager-header-title"], [1, "po-table-column-manager-header-close"], [1, "po-table-column-manager-header-close-button", "po-clickable", "po-icon", "po-icon-close", 3, "click"], [1, "po-table-column-manager-body"], ["name", "visibleColumns", "p-columns", "1", 3, "ngModel", "p-options", "ngModelChange", "p-change"], [1, "po-table-column-manager-footer"], ["p-small", "", "p-kind", "tertiary", 1, "po-table-column-manager-footer-restore", 3, "p-label", "p-click"]], template: function PoTableColumnManagerComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵtemplate(0, PoTableColumnManagerComponent_po_popover_0_Template, 11, 5, "po-popover", 0);
         }
@@ -14606,7 +14642,7 @@ PoTableColumnManagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
 (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  </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-type=\"link\"\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      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  </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" }]
         }], function () { return [{ type: i0.Renderer2 }, { type: PoLanguageService }]; }, { popover: [{
                 type: ViewChild,
                 args: [PoPopoverComponent]
@@ -19430,6 +19466,7 @@ class PoComboBaseComponent {
      * - 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) {
         this._options = Array.isArray(options) ? options : [];
@@ -19727,6 +19764,7 @@ class PoComboBaseComponent {
         this.callModelChange(value);
         this.updateSelectedValue(null);
         this.updateComboList();
+        this.initInputObservable();
     }
     configAfterSetFilterService(service) {
         if (service) {
@@ -19762,8 +19800,12 @@ class PoComboBaseComponent {
         return labelA < labelB ? -1 : labelA > labelB ? 1 : 0;
     }
     hasDuplicatedOption(options, currentOption, accumulatedGroupOptions) {
-        return (options.some(option => option.label === currentOption) ||
-            (accumulatedGroupOptions && accumulatedGroupOptions.some(option => option.label === currentOption)));
+        if (accumulatedGroupOptions) {
+            return accumulatedGroupOptions.some(option => option.label === currentOption);
+        }
+        else {
+            return options.some(option => option.value === currentOption);
+        }
     }
     listingComboOptions(comboOptions) {
         const comboOptionsList = comboOptions.concat();
@@ -19789,7 +19831,7 @@ class PoComboBaseComponent {
     verifyComboOptions(comboOptions, verifyingOptionsGroup = false, accumulatedGroupOptions) {
         return comboOptions.reduce((accumulatedOptions, currentOption) => {
             if (!this.verifyIfHasLabel(currentOption) ||
-                this.hasDuplicatedOption(accumulatedOptions, currentOption.label, accumulatedGroupOptions) ||
+                this.hasDuplicatedOption(accumulatedOptions, currentOption['value'] || currentOption['label'], accumulatedGroupOptions) ||
                 !this.validateValue(currentOption, verifyingOptionsGroup)) {
                 return accumulatedOptions;
             }
@@ -22664,16 +22706,27 @@ class PoDecimalComponent extends PoInputBaseComponent {
         this.controlChangeEmitter();
     }
     extraValidation(abstractControl) {
+        const value = abstractControl.value;
+        const thousandValue = Math.trunc(value);
         // Verifica se já possui algum error pattern padrão.
         this.errorPattern = this.errorPattern !== 'Valor Inválido' ? this.errorPattern : '';
-        if (minFailed(this.min, abstractControl.value)) {
+        if (minFailed(this.min, value)) {
             return {
                 min: {
                     valid: false
                 }
             };
         }
-        if (maxFailed(this.max, abstractControl.value)) {
+        if (maxFailed(this.max, value)) {
+            return {
+                max: {
+                    valid: false
+                }
+            };
+        }
+        if ((maxlengpoailed(this.thousandMaxlength, thousandValue) &&
+            this.thousandMaxlength < poDecimalDefaultThousandMaxlength) ||
+            maxlengpoailed(poDecimalTotalLengthLimit, value)) {
             return {
                 max: {
                     valid: false
@@ -29775,7 +29828,7 @@ PoUploadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadC
                 useExisting: forwardRef(() => PoUploadComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 13, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-upload"], ["type", "file", 1, "po-upload-input", 3, "accept", "disabled", "multiple", "required", "change"], ["inputFile", ""], [3, "p-directory-compatible", "p-disabled", "p-drag-drop-height", "p-literals", "p-file-change", "p-select-files", 4, "ngIf"], ["class", "po-upload-button", "for", "file", 3, "p-disabled", "p-label", "p-click", 4, "ngIf"], ["class", "po-upload-file-restrictions", 3, "ngClass", "p-allowed-extensions", "p-max-files", "p-max-file-size", "p-min-file-size", 4, "ngIf"], ["class", "po-upload-progress-container", 4, "ngIf"], ["class", "po-upload-send-button", "p-type", "primary", 3, "po-mt-3", "p-disabled", "p-label", "p-click", 4, "ngIf"], [3, "p-directory-compatible", "p-disabled", "p-drag-drop-height", "p-literals", "p-file-change", "p-select-files"], ["for", "file", 1, "po-upload-button", 3, "p-disabled", "p-label", "p-click"], ["uploadButton", ""], [1, "po-upload-file-restrictions", 3, "ngClass", "p-allowed-extensions", "p-max-files", "p-max-file-size", "p-min-file-size"], [1, "po-upload-progress-container"], ["p-no-shadow", "", 3, "p-height", "p-no-border", "p-no-padding"], [3, "ngClass"], [3, "p-info", "p-info-icon", "p-status", "p-text", "p-value", "p-cancel", "p-retry", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-info", "p-info-icon", "p-status", "p-text", "p-value", "p-cancel", "p-retry"], ["p-type", "primary", 1, "po-upload-send-button", 3, "p-disabled", "p-label", "p-click"]], template: function PoUploadComponent_Template(rf, ctx) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 13, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-upload"], ["type", "file", 1, "po-upload-input", 3, "accept", "disabled", "multiple", "required", "change"], ["inputFile", ""], [3, "p-directory-compatible", "p-disabled", "p-drag-drop-height", "p-literals", "p-file-change", "p-select-files", 4, "ngIf"], ["class", "po-upload-button", "for", "file", 3, "p-disabled", "p-label", "p-click", 4, "ngIf"], ["class", "po-upload-file-restrictions", 3, "ngClass", "p-allowed-extensions", "p-max-files", "p-max-file-size", "p-min-file-size", 4, "ngIf"], ["class", "po-upload-progress-container", 4, "ngIf"], ["class", "po-upload-send-button", "p-kind", "primary", 3, "po-mt-3", "p-disabled", "p-label", "p-click", 4, "ngIf"], [3, "p-directory-compatible", "p-disabled", "p-drag-drop-height", "p-literals", "p-file-change", "p-select-files"], ["for", "file", 1, "po-upload-button", 3, "p-disabled", "p-label", "p-click"], ["uploadButton", ""], [1, "po-upload-file-restrictions", 3, "ngClass", "p-allowed-extensions", "p-max-files", "p-max-file-size", "p-min-file-size"], [1, "po-upload-progress-container"], ["p-no-shadow", "", 3, "p-height", "p-no-border", "p-no-padding"], [3, "ngClass"], [3, "p-info", "p-info-icon", "p-status", "p-text", "p-value", "p-cancel", "p-retry", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-info", "p-info-icon", "p-status", "p-text", "p-value", "p-cancel", "p-retry"], ["p-kind", "primary", 1, "po-upload-send-button", 3, "p-disabled", "p-label", "p-click"]], template: function PoUploadComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "input", 2, 3);
             i0.ɵɵlistener("change", function PoUploadComponent_Template_input_change_2_listener($event) { return ctx.onFileChange($event); });
@@ -29820,7 +29873,7 @@ PoUploadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadC
                             useExisting: forwardRef(() => PoUploadComponent),
                             multi: true
                         }
-                    ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-upload\">\n    <input\n      #inputFile\n      class=\"po-upload-input\"\n      type=\"file\"\n      [accept]=\"allowedExtensions\"\n      [attr.name]=\"name\"\n      [disabled]=\"isDisabled\"\n      [multiple]=\"isMultiple\"\n      [required]=\"required\"\n      (change)=\"onFileChange($event)\"\n    />\n\n    <po-upload-drag-drop\n      *ngIf=\"displayDragDrop\"\n      [p-directory-compatible]=\"canHandleDirectory\"\n      [p-disabled]=\"isDisabled\"\n      [p-drag-drop-height]=\"dragDropHeight\"\n      [p-literals]=\"literals\"\n      (p-file-change)=\"onFileChangeDragDrop($event)\"\n      (p-select-files)=\"selectFiles()\"\n    >\n    </po-upload-drag-drop>\n\n    <po-button\n      *ngIf=\"!hideSelectButton && !displayDragDrop\"\n      #uploadButton\n      class=\"po-upload-button\"\n      for=\"file\"\n      [p-disabled]=\"isDisabled\"\n      [p-label]=\"selectFileButtonLabel\"\n      (p-click)=\"selectFiles()\"\n    >\n    </po-button>\n\n    <po-upload-file-restrictions\n      *ngIf=\"fileRestrictions && !hideRestrictionsInfo\"\n      class=\"po-upload-file-restrictions\"\n      [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n      [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n      [p-max-files]=\"maxFiles\"\n      [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n      [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n    >\n    </po-upload-file-restrictions>\n\n    <div *ngIf=\"currentFiles && currentFiles.length\" class=\"po-upload-progress-container\">\n      <po-container\n        p-no-shadow\n        [p-height]=\"hasMoreThanFourItems ? 280 : 'auto'\"\n        [p-no-border]=\"!hasMoreThanFourItems\"\n        [p-no-padding]=\"!hasMoreThanFourItems\"\n      >\n        <div [ngClass]=\"{ 'po-upload-progress-container-area po-pt-2 po-pl-1': hasMoreThanFourItems }\">\n          <po-progress\n            *ngFor=\"let file of currentFiles; trackBy: trackByFn\"\n            [p-info]=\"infoByUploadStatus[file.status]?.text(file.percent)\"\n            [p-info-icon]=\"infoByUploadStatus[file.status]?.icon\"\n            [p-status]=\"progressStatusByFileStatus[file.status]\"\n            [p-text]=\"file.displayName\"\n            [p-value]=\"file.percent\"\n            (p-cancel)=\"cancel(file)\"\n            (p-retry)=\"uploadFiles([file])\"\n          >\n          </po-progress>\n        </div>\n      </po-container>\n    </div>\n\n    <po-button\n      *ngIf=\"displaySendButton\"\n      class=\"po-upload-send-button\"\n      [class.po-mt-3]=\"hasMoreThanFourItems\"\n      p-type=\"primary\"\n      [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n      [p-label]=\"literals.startSending\"\n      (p-click)=\"uploadFiles(currentFiles)\"\n    >\n    </po-button>\n  </div>\n</po-field-container>\n" }]
+                    ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-upload\">\n    <input\n      #inputFile\n      class=\"po-upload-input\"\n      type=\"file\"\n      [accept]=\"allowedExtensions\"\n      [attr.name]=\"name\"\n      [disabled]=\"isDisabled\"\n      [multiple]=\"isMultiple\"\n      [required]=\"required\"\n      (change)=\"onFileChange($event)\"\n    />\n\n    <po-upload-drag-drop\n      *ngIf=\"displayDragDrop\"\n      [p-directory-compatible]=\"canHandleDirectory\"\n      [p-disabled]=\"isDisabled\"\n      [p-drag-drop-height]=\"dragDropHeight\"\n      [p-literals]=\"literals\"\n      (p-file-change)=\"onFileChangeDragDrop($event)\"\n      (p-select-files)=\"selectFiles()\"\n    >\n    </po-upload-drag-drop>\n\n    <po-button\n      *ngIf=\"!hideSelectButton && !displayDragDrop\"\n      #uploadButton\n      class=\"po-upload-button\"\n      for=\"file\"\n      [p-disabled]=\"isDisabled\"\n      [p-label]=\"selectFileButtonLabel\"\n      (p-click)=\"selectFiles()\"\n    >\n    </po-button>\n\n    <po-upload-file-restrictions\n      *ngIf=\"fileRestrictions && !hideRestrictionsInfo\"\n      class=\"po-upload-file-restrictions\"\n      [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n      [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n      [p-max-files]=\"maxFiles\"\n      [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n      [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n    >\n    </po-upload-file-restrictions>\n\n    <div *ngIf=\"currentFiles && currentFiles.length\" class=\"po-upload-progress-container\">\n      <po-container\n        p-no-shadow\n        [p-height]=\"hasMoreThanFourItems ? 280 : 'auto'\"\n        [p-no-border]=\"!hasMoreThanFourItems\"\n        [p-no-padding]=\"!hasMoreThanFourItems\"\n      >\n        <div [ngClass]=\"{ 'po-upload-progress-container-area po-pt-2 po-pl-1': hasMoreThanFourItems }\">\n          <po-progress\n            *ngFor=\"let file of currentFiles; trackBy: trackByFn\"\n            [p-info]=\"infoByUploadStatus[file.status]?.text(file.percent)\"\n            [p-info-icon]=\"infoByUploadStatus[file.status]?.icon\"\n            [p-status]=\"progressStatusByFileStatus[file.status]\"\n            [p-text]=\"file.displayName\"\n            [p-value]=\"file.percent\"\n            (p-cancel)=\"cancel(file)\"\n            (p-retry)=\"uploadFiles([file])\"\n          >\n          </po-progress>\n        </div>\n      </po-container>\n    </div>\n\n    <po-button\n      *ngIf=\"displaySendButton\"\n      class=\"po-upload-send-button\"\n      [class.po-mt-3]=\"hasMoreThanFourItems\"\n      p-kind=\"primary\"\n      [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n      [p-label]=\"literals.startSending\"\n      (p-click)=\"uploadFiles(currentFiles)\"\n    >\n    </po-button>\n  </div>\n</po-field-container>\n" }]
         }], function () { return [{ type: PoUploadService }, { type: i0.Renderer2 }, { type: PoI18nPipe }, { type: PoNotificationService }, { type: i0.ChangeDetectorRef }, { type: PoLanguageService }]; }, { inputFile: [{
                 type: ViewChild,
                 args: ['inputFile', { read: ElementRef, static: true }]
@@ -30556,7 +30609,7 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richTextImageModal = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richTextLinkModal = _t.first);
         }
-    }, inputs: { readonly: ["p-readonly", "readonly"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, decls: 17, vars: 6, consts: [[1, "po-rich-text-toolbar"], ["toolbarElement", ""], [1, "po-rich-text-toolbar-button-align"], ["p-toggle", "multiple", 3, "p-buttons"], ["class", "po-rich-text-toolbar-button-align", 4, "ngIf"], ["p-toggle", "single", 3, "p-buttons"], [3, "p-buttons"], [3, "p-command"], ["richTextImageModal", ""], [3, "p-command", "p-link-editing"], ["richTextLinkModal", ""], [1, "po-rich-text-toolbar-color-picker-container"], [1, "po-button", "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", ""]], template: function PoRichTextToolbarComponent_Template(rf, ctx) {
+    }, inputs: { readonly: ["p-readonly", "readonly"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, decls: 17, vars: 11, consts: [[1, "po-rich-text-toolbar"], ["toolbarElement", ""], [1, "po-rich-text-toolbar-button-align"], ["p-toggle", "multiple", 3, "p-small", "p-buttons"], ["class", "po-rich-text-toolbar-button-align", 4, "ngIf"], ["p-toggle", "single", 3, "p-small", "p-buttons"], [3, "p-small", "p-buttons"], [3, "p-command"], ["richTextImageModal", ""], [3, "p-command", "p-link-editing"], ["richTextLinkModal", ""], [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", ""]], 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);
@@ -30583,23 +30636,23 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         }
         if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("p-buttons", ctx.formatButtons);
+            i0.ɵɵproperty("p-small", true)("p-buttons", ctx.formatButtons);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !ctx.isInternetExplorer);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("p-buttons", ctx.alignButtons);
+            i0.ɵɵproperty("p-small", true)("p-buttons", ctx.alignButtons);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("p-buttons", ctx.listButtons);
+            i0.ɵɵproperty("p-small", true)("p-buttons", ctx.listButtons);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("p-buttons", ctx.linkButtons);
+            i0.ɵɵproperty("p-small", true)("p-buttons", ctx.linkButtons);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("p-buttons", ctx.mediaButtons);
+            i0.ɵɵproperty("p-small", true)("p-buttons", ctx.mediaButtons);
         }
     }, directives: [PoButtonGroupComponent, i1.NgIf, 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\">\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-text-ellipsis po-rich-text-toolbar-color-picker-button\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (change)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group [p-buttons]=\"mediaButtons\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal (p-command)=\"emitCommand($event)\"> </po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
+            args: [{ selector: 'po-rich-text-toolbar', template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\n  <div class=\"po-rich-text-toolbar-button-align\">\n    <po-button-group p-toggle=\"multiple\" [p-small]=\"true\" [p-buttons]=\"formatButtons\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-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 class=\"po-rich-text-toolbar-button-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\">\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\">\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\">\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" }]
         }], function () { return [{ type: PoLanguageService }]; }, { colorPickerInput: [{
                 type: ViewChild,
                 args: ['colorPickerInput', { read: ElementRef }]
@@ -33891,18 +33944,25 @@ PoTagModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [], imports
 })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoTagModule, { declarations: [PoTagComponent], imports: [CommonModule, PoIconModule], exports: [PoTagComponent] }); })();
 
-function getGridColumnsClasses(smColumns, mdColumns, lgColumns, xlColumns, gridColumns, pullColumns) {
+function getGridColumnsClasses(gridColumns, offsetColumns, grid, offset, pull) {
     const systemGrid = {
-        sm: smColumns || gridColumns || 12,
-        md: mdColumns || gridColumns || 6,
-        lg: lgColumns || gridColumns || 4,
-        xl: xlColumns || gridColumns || 3,
-        pullSm: (pullColumns === null || pullColumns === void 0 ? void 0 : pullColumns.smPull) || 0,
-        pullMd: (pullColumns === null || pullColumns === void 0 ? void 0 : pullColumns.mdPull) || 0,
-        pullLg: (pullColumns === null || pullColumns === void 0 ? void 0 : pullColumns.lgPull) || 0,
-        pullXl: (pullColumns === null || pullColumns === void 0 ? void 0 : pullColumns.xlPull) || 0
+        gridSm: (grid === null || grid === void 0 ? void 0 : grid.smGrid) || gridColumns || 12,
+        gridMd: (grid === null || grid === void 0 ? void 0 : grid.mdGrid) || gridColumns || 6,
+        gridLg: (grid === null || grid === void 0 ? void 0 : grid.lgGrid) || gridColumns || 4,
+        gridXl: (grid === null || grid === void 0 ? void 0 : grid.xlGrid) || gridColumns || 3,
+        offsetSm: (offset === null || offset === void 0 ? void 0 : offset.smOffset) || offsetColumns || 0,
+        offsetMd: (offset === null || offset === void 0 ? void 0 : offset.mdOffset) || offsetColumns || 0,
+        offsetLg: (offset === null || offset === void 0 ? void 0 : offset.lgOffset) || offsetColumns || 0,
+        offsetXl: (offset === null || offset === void 0 ? void 0 : offset.xlOffset) || offsetColumns || 0,
+        pullSm: (pull === null || pull === void 0 ? void 0 : pull.smPull) || 0,
+        pullMd: (pull === null || pull === void 0 ? void 0 : pull.mdPull) || 0,
+        pullLg: (pull === null || pull === void 0 ? void 0 : pull.lgPull) || 0,
+        pullXl: (pull === null || pull === void 0 ? void 0 : pull.xlPull) || 0
     };
-    return `po-sm-${systemGrid.sm} po-pull-sm-${systemGrid.pullSm} po-md-${systemGrid.md} po-pull-md-${systemGrid.pullMd} po-lg-${systemGrid.lg} po-pull-lg-${systemGrid.pullLg} po-xl-${systemGrid.xl} po-pull-xl-${systemGrid.pullXl}`;
+    return (`po-sm-${systemGrid.gridSm} po-offset-sm-${systemGrid.offsetSm} po-pull-sm-${systemGrid.pullSm} ` +
+        `po-md-${systemGrid.gridMd} po-offset-md-${systemGrid.offsetMd} po-pull-md-${systemGrid.pullMd} ` +
+        `po-lg-${systemGrid.gridLg} po-offset-lg-${systemGrid.offsetLg} po-pull-lg-${systemGrid.pullLg} ` +
+        `po-xl-${systemGrid.gridXl} po-offset-xl-${systemGrid.offsetXl} po-pull-xl-${systemGrid.pullXl}`);
 }
 function isVisibleField(field) {
     const containsVisible = 'visible' in field;
@@ -33999,7 +34059,17 @@ class PoDynamicFormFieldsBaseComponent {
         const options = !!field.options ? this.convertOptions(field.options) : undefined;
         const focus = this.hasFocus(field);
         const type = field && field.type ? field.type.toLocaleLowerCase() : 'string';
-        const componentClass = getGridColumnsClasses(field.gridSmColumns, field.gridMdColumns, field.gridLgColumns, field.gridXlColumns, field.gridColumns, {
+        const componentClass = getGridColumnsClasses(field.gridColumns, field.offsetColumns, {
+            smGrid: field.gridSmColumns,
+            mdGrid: field.gridMdColumns,
+            lgGrid: field.gridLgColumns,
+            xlGrid: field.gridXlColumns
+        }, {
+            smOffset: field.offsetSmColumns,
+            mdOffset: field.offsetMdColumns,
+            lgOffset: field.offsetLgColumns,
+            xlOffset: field.offsetXlColumns
+        }, {
             smPull: field.gridSmPull,
             mdPull: field.gridMdPull,
             lgPull: field.gridLgPull,
@@ -34661,7 +34731,17 @@ class PoDynamicViewBaseComponent {
     createField(field) {
         const property = field.property;
         const value = this.transformValue(field.type, this.value[property], field.format);
-        const classesGridColumns = getGridColumnsClasses(field.gridSmColumns, field.gridMdColumns, field.gridLgColumns, field.gridXlColumns, field.gridColumns, {
+        const classesGridColumns = getGridColumnsClasses(field.gridColumns, field.offsetColumns, {
+            smGrid: field.gridSmColumns,
+            mdGrid: field.gridMdColumns,
+            lgGrid: field.gridLgColumns,
+            xlGrid: field.gridXlColumns
+        }, {
+            smOffset: field.offsetSmColumns,
+            mdOffset: field.offsetMdColumns,
+            lgOffset: field.offsetLgColumns,
+            xlOffset: field.offsetXlColumns
+        }, {
             smPull: field.gridSmPull,
             mdPull: field.gridMdPull,
             lgPull: field.gridLgPull,
@@ -37299,7 +37379,7 @@ function PoListViewComponent_ng_container_4_div_9_po_button_1_Template(rf, ctx)
         const action_r35 = ctx.$implicit;
         const item_r7 = i0.ɵɵnextContext(2).$implicit;
         const ctx_r34 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("p-disabled", ctx_r34.returnBooleanValue(action_r35, item_r7))("p-icon", action_r35.icon)("p-label", action_r35.label)("p-type", action_r35.type);
+        i0.ɵɵproperty("p-disabled", ctx_r34.returnBooleanValue(action_r35, item_r7))("p-icon", action_r35.icon)("p-label", action_r35.label)("p-kind", action_r35.type);
     }
 }
 function PoListViewComponent_ng_container_4_div_9_Template(rf, ctx) {
@@ -37543,7 +37623,7 @@ PoListViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoListV
             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"], ["type", "checkbox", 1, "po-input", "po-checkbox-group-input"], [1, "po-checkbox-group-label", "po-list-view-selectable-label", "po-clickable", 3, "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"], ["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-type", "p-click", 4, "ngFor", "ngForOf"], ["p-small", "true", 3, "p-disabled", "p-icon", "p-label", "p-type", "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) {
+    }, 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"], ["type", "checkbox", 1, "po-input", "po-checkbox-group-input"], [1, "po-checkbox-group-label", "po-list-view-selectable-label", "po-clickable", 3, "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"], ["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) {
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵtemplate(1, PoListViewComponent_div_1_Template, 6, 5, "div", 0);
@@ -37586,7 +37666,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        <input\n          class=\"po-input po-checkbox-group-input\"\n          type=\"checkbox\"\n          [class.po-checkbox-group-input-checked]=\"selectAll\"\n          [class.po-checkbox-group-input-indeterminate]=\"selectAll === null\"\n        />\n        <label\n          class=\"po-checkbox-group-label po-list-view-selectable-label po-clickable\"\n          (click)=\"selectAllListItems()\"\n        >\n          {{ literals.selectAll }}\n        </label>\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                <input\n                  class=\"po-input po-checkbox-group-input\"\n                  type=\"checkbox\"\n                  [class.po-checkbox-group-input-checked]=\"item.$selected\"\n                />\n                <label\n                  class=\"po-checkbox-group-label po-list-view-selectable-label po-clickable\"\n                  (click)=\"selectListItem(item)\"\n                ></label>\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-type]=\"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        <input\n          class=\"po-input po-checkbox-group-input\"\n          type=\"checkbox\"\n          [class.po-checkbox-group-input-checked]=\"selectAll\"\n          [class.po-checkbox-group-input-indeterminate]=\"selectAll === null\"\n        />\n        <label\n          class=\"po-checkbox-group-label po-list-view-selectable-label po-clickable\"\n          (click)=\"selectAllListItems()\"\n        >\n          {{ literals.selectAll }}\n        </label>\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                <input\n                  class=\"po-input po-checkbox-group-input\"\n                  type=\"checkbox\"\n                  [class.po-checkbox-group-input-checked]=\"item.$selected\"\n                />\n                <label\n                  class=\"po-checkbox-group-label po-list-view-selectable-label po-clickable\"\n                  (click)=\"selectListItem(item)\"\n                ></label>\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" }]
         }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: PoLanguageService }]; }, { listViewContentTemplate: [{
                 type: ContentChild,
                 args: [PoListViewContentTemplateDirective, { static: true }]
@@ -41231,7 +41311,7 @@ class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
     }
 }
 PoPageDefaultComponent.ɵfac = function PoPageDefaultComponent_Factory(t) { return new (t || PoPageDefaultComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i2.Router)); };
-PoPageDefaultComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageDefaultComponent, selectors: [["po-page-default"]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$e, decls: 4, vars: 1, consts: [[3, "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], [1, "po-page-header-actions"], [3, "p-label", "p-actions", 4, "ngIf"], [3, "p-disabled", "p-label", "p-click", 4, "ngIf"], ["p-type", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click", 4, "ngIf"], [3, "p-label", "p-actions"], [3, "p-disabled", "p-label", "p-click"], ["p-type", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click"]], template: function PoPageDefaultComponent_Template(rf, ctx) {
+PoPageDefaultComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageDefaultComponent, selectors: [["po-page-default"]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$e, decls: 4, vars: 1, consts: [[3, "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], [1, "po-page-header-actions"], [3, "p-label", "p-actions", 4, "ngIf"], [3, "p-disabled", "p-label", "p-click", 4, "ngIf"], ["p-kind", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click", 4, "ngIf"], [3, "p-label", "p-actions"], [3, "p-disabled", "p-label", "p-click"], ["p-kind", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click"]], template: function PoPageDefaultComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "po-page");
@@ -41248,7 +41328,7 @@ PoPageDefaultComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPa
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageDefaultComponent, [{
             type: Component,
-            args: [{ selector: 'po-page-default', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div class=\"po-page-header-actions\">\n      <po-dropdown\n        *ngIf=\"visibleActions.length > limitPrimaryActions\"\n        [p-label]=\"literals.otherActions\"\n        [p-actions]=\"dropdownActions\"\n      >\n      </po-dropdown>\n\n      <po-button\n        *ngIf=\"visibleActions.length === 3 && visibleActions[2] && !isMobile\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[2])\"\n        [p-label]=\"visibleActions[2].label\"\n        (p-click)=\"callAction(visibleActions[2])\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"visibleActions[1] && (visibleActions.length === 2 || !isMobile)\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[1])\"\n        [p-label]=\"visibleActions[1].label\"\n        (p-click)=\"callAction(visibleActions[1])\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"visibleActions[0]\"\n        p-type=\"primary\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[0])\"\n        [p-icon]=\"visibleActions[0].icon\"\n        [p-label]=\"visibleActions[0].label\"\n        (p-click)=\"callAction(visibleActions[0])\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content></ng-content>\n  </po-page-content>\n</po-page>\n" }]
+            args: [{ selector: 'po-page-default', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div class=\"po-page-header-actions\">\n      <po-dropdown\n        *ngIf=\"visibleActions.length > limitPrimaryActions\"\n        [p-label]=\"literals.otherActions\"\n        [p-actions]=\"dropdownActions\"\n      >\n      </po-dropdown>\n\n      <po-button\n        *ngIf=\"visibleActions.length === 3 && visibleActions[2] && !isMobile\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[2])\"\n        [p-label]=\"visibleActions[2].label\"\n        (p-click)=\"callAction(visibleActions[2])\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"visibleActions[1] && (visibleActions.length === 2 || !isMobile)\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[1])\"\n        [p-label]=\"visibleActions[1].label\"\n        (p-click)=\"callAction(visibleActions[1])\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"visibleActions[0]\"\n        p-kind=\"primary\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[0])\"\n        [p-icon]=\"visibleActions[0].icon\"\n        [p-label]=\"visibleActions[0].label\"\n        (p-click)=\"callAction(visibleActions[0])\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content></ng-content>\n  </po-page-content>\n</po-page>\n" }]
         }], function () { return [{ type: i0.ViewContainerRef }, { type: PoLanguageService }, { type: i0.Renderer2 }, { type: i2.Router }]; }, null);
 })();
 
@@ -41419,7 +41499,7 @@ function PoPageDetailComponent_po_page_header_1_div_1_po_button_1_Template(rf, c
     }
     if (rf & 2) {
         const ctx_r2 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("p-icon", ctx_r2.hasEditOrRemoveFn("icon"))("p-label", ctx_r2.literals.back)("p-type", ctx_r2.hasEditOrRemoveFn("type"));
+        i0.ɵɵproperty("p-icon", ctx_r2.hasEditOrRemoveFn("icon"))("p-label", ctx_r2.literals.back)("p-kind", ctx_r2.hasEditOrRemoveFn("type"));
     }
 }
 function PoPageDetailComponent_po_page_header_1_div_1_po_button_2_Template(rf, ctx) {
@@ -41431,7 +41511,7 @@ function PoPageDetailComponent_po_page_header_1_div_1_po_button_2_Template(rf, c
     }
     if (rf & 2) {
         const ctx_r3 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("p-icon", ctx_r3.hasEditFn("icon"))("p-label", ctx_r3.literals.remove)("p-type", ctx_r3.hasEditFn("type"));
+        i0.ɵɵproperty("p-icon", ctx_r3.hasEditFn("icon"))("p-label", ctx_r3.literals.remove)("p-kind", ctx_r3.hasEditFn("type"));
     }
 }
 function PoPageDetailComponent_po_page_header_1_div_1_po_button_3_Template(rf, ctx) {
@@ -41507,7 +41587,7 @@ class PoPageDetailComponent extends PoPageDetailBaseComponent {
             return this.hasEvent('edit') ? '' : 'po-icon-delete';
         }
         else if (property === 'type') {
-            return this.hasEvent('edit') ? 'default' : 'primary';
+            return this.hasEvent('edit') ? 'secondary' : 'primary';
         }
         else {
             return '';
@@ -41518,7 +41598,7 @@ class PoPageDetailComponent extends PoPageDetailBaseComponent {
             return this.hasEvent('edit') || this.hasEvent('remove') ? '' : 'po-icon-arrow-left';
         }
         else if (property === 'type') {
-            return this.hasEvent('edit') || this.hasEvent('remove') ? 'default' : 'primary';
+            return this.hasEvent('edit') || this.hasEvent('remove') ? 'secondary' : 'primary';
         }
         else {
             return '';
@@ -41532,7 +41612,7 @@ class PoPageDetailComponent extends PoPageDetailBaseComponent {
     }
 }
 PoPageDetailComponent.ɵfac = /*@__PURE__*/ function () { let ɵPoPageDetailComponent_BaseFactory; return function PoPageDetailComponent_Factory(t) { return (ɵPoPageDetailComponent_BaseFactory || (ɵPoPageDetailComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoPageDetailComponent)))(t || PoPageDetailComponent); }; }();
-PoPageDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageDetailComponent, selectors: [["po-page-detail"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$d, decls: 4, vars: 1, consts: [[3, "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], ["class", "po-page-header-actions", 4, "ngIf"], [1, "po-page-header-actions"], [3, "p-icon", "p-label", "p-type", "p-click", 4, "ngIf"], ["p-icon", "po-icon-edit", "p-type", "primary", 3, "p-label", "p-click", 4, "ngIf"], [3, "p-icon", "p-label", "p-type", "p-click"], ["p-icon", "po-icon-edit", "p-type", "primary", 3, "p-label", "p-click"]], template: function PoPageDetailComponent_Template(rf, ctx) {
+PoPageDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageDetailComponent, selectors: [["po-page-detail"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$d, decls: 4, vars: 1, consts: [[3, "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], ["class", "po-page-header-actions", 4, "ngIf"], [1, "po-page-header-actions"], [3, "p-icon", "p-label", "p-kind", "p-click", 4, "ngIf"], ["p-icon", "po-icon-edit", "p-kind", "primary", 3, "p-label", "p-click", 4, "ngIf"], [3, "p-icon", "p-label", "p-kind", "p-click"], ["p-icon", "po-icon-edit", "p-kind", "primary", 3, "p-label", "p-click"]], template: function PoPageDetailComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "po-page");
@@ -41549,7 +41629,7 @@ PoPageDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPag
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageDetailComponent, [{
             type: Component,
-            args: [{ selector: 'po-page-detail', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div *ngIf=\"hasAnyAction()\" class=\"po-page-header-actions\">\n      <po-button\n        *ngIf=\"hasEvent('back')\"\n        [p-icon]=\"hasEditOrRemoveFn('icon')\"\n        [p-label]=\"literals.back\"\n        [p-type]=\"hasEditOrRemoveFn('type')\"\n        (p-click)=\"back.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('remove')\"\n        [p-icon]=\"hasEditFn('icon')\"\n        [p-label]=\"literals.remove\"\n        [p-type]=\"hasEditFn('type')\"\n        (p-click)=\"remove.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('edit')\"\n        p-icon=\"po-icon-edit\"\n        p-type=\"primary\"\n        [p-label]=\"literals.edit\"\n        (p-click)=\"edit.emit()\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content> </ng-content>\n  </po-page-content>\n</po-page>\n" }]
+            args: [{ selector: 'po-page-detail', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div *ngIf=\"hasAnyAction()\" class=\"po-page-header-actions\">\n      <po-button\n        *ngIf=\"hasEvent('back')\"\n        [p-icon]=\"hasEditOrRemoveFn('icon')\"\n        [p-label]=\"literals.back\"\n        [p-kind]=\"hasEditOrRemoveFn('type')\"\n        (p-click)=\"back.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('remove')\"\n        [p-icon]=\"hasEditFn('icon')\"\n        [p-label]=\"literals.remove\"\n        [p-kind]=\"hasEditFn('type')\"\n        (p-click)=\"remove.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('edit')\"\n        p-icon=\"po-icon-edit\"\n        p-kind=\"primary\"\n        [p-label]=\"literals.edit\"\n        (p-click)=\"edit.emit()\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content> </ng-content>\n  </po-page-content>\n</po-page>\n" }]
         }], null, null);
 })();
 
@@ -41727,7 +41807,7 @@ function PoPageEditComponent_po_page_header_1_div_1_po_button_1_Template(rf, ctx
     }
     if (rf & 2) {
         const ctx_r2 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("p-icon", ctx_r2.getIcon("cancel"))("p-label", ctx_r2.literals.cancel)("p-type", ctx_r2.getType("cancel"));
+        i0.ɵɵproperty("p-icon", ctx_r2.getIcon("cancel"))("p-label", ctx_r2.literals.cancel)("p-kind", ctx_r2.getType("cancel"));
     }
 }
 function PoPageEditComponent_po_page_header_1_div_1_po_button_2_Template(rf, ctx) {
@@ -41739,7 +41819,7 @@ function PoPageEditComponent_po_page_header_1_div_1_po_button_2_Template(rf, ctx
     }
     if (rf & 2) {
         const ctx_r3 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("p-disabled", ctx_r3.disableSubmit)("p-icon", ctx_r3.getIcon("saveNew"))("p-label", ctx_r3.literals.saveNew)("p-type", ctx_r3.getType("saveNew"));
+        i0.ɵɵproperty("p-disabled", ctx_r3.disableSubmit)("p-icon", ctx_r3.getIcon("saveNew"))("p-label", ctx_r3.literals.saveNew)("p-kind", ctx_r3.getType("saveNew"));
     }
 }
 function PoPageEditComponent_po_page_header_1_div_1_po_button_3_Template(rf, ctx) {
@@ -41819,7 +41899,7 @@ class PoPageEditComponent extends PoPageEditBaseComponent {
     getType(type) {
         const isCancelPrimaryAction = type === 'cancel' && this.isPrimaryAction('cancel');
         const isSaveNewPrimaryAction = type === 'saveNew' && this.isPrimaryAction('saveNew');
-        return isCancelPrimaryAction || isSaveNewPrimaryAction ? 'primary' : 'default';
+        return isCancelPrimaryAction || isSaveNewPrimaryAction ? 'primary' : 'secondary';
     }
     hasAnyAction() {
         return this.hasEvent('cancel') || this.hasEvent('saveNew') || this.hasEvent('save');
@@ -41843,7 +41923,7 @@ class PoPageEditComponent extends PoPageEditBaseComponent {
     }
 }
 PoPageEditComponent.ɵfac = /*@__PURE__*/ function () { let ɵPoPageEditComponent_BaseFactory; return function PoPageEditComponent_Factory(t) { return (ɵPoPageEditComponent_BaseFactory || (ɵPoPageEditComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoPageEditComponent)))(t || PoPageEditComponent); }; }();
-PoPageEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageEditComponent, selectors: [["po-page-edit"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$c, decls: 4, vars: 1, consts: [[3, "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], ["class", "po-page-header-actions", 4, "ngIf"], [1, "po-page-header-actions"], [3, "p-icon", "p-label", "p-type", "p-click", 4, "ngIf"], [3, "p-disabled", "p-icon", "p-label", "p-type", "p-click", 4, "ngIf"], ["p-icon", "po-icon-ok", "p-type", "primary", 3, "p-disabled", "p-label", "p-click", 4, "ngIf"], [3, "p-icon", "p-label", "p-type", "p-click"], [3, "p-disabled", "p-icon", "p-label", "p-type", "p-click"], ["p-icon", "po-icon-ok", "p-type", "primary", 3, "p-disabled", "p-label", "p-click"]], template: function PoPageEditComponent_Template(rf, ctx) {
+PoPageEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageEditComponent, selectors: [["po-page-edit"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$c, decls: 4, vars: 1, consts: [[3, "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], ["class", "po-page-header-actions", 4, "ngIf"], [1, "po-page-header-actions"], [3, "p-icon", "p-label", "p-kind", "p-click", 4, "ngIf"], [3, "p-disabled", "p-icon", "p-label", "p-kind", "p-click", 4, "ngIf"], ["p-icon", "po-icon-ok", "p-kind", "primary", 3, "p-disabled", "p-label", "p-click", 4, "ngIf"], [3, "p-icon", "p-label", "p-kind", "p-click"], [3, "p-disabled", "p-icon", "p-label", "p-kind", "p-click"], ["p-icon", "po-icon-ok", "p-kind", "primary", 3, "p-disabled", "p-label", "p-click"]], template: function PoPageEditComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "po-page");
@@ -41860,7 +41940,7 @@ PoPageEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageE
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageEditComponent, [{
             type: Component,
-            args: [{ selector: 'po-page-edit', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div *ngIf=\"hasAnyAction()\" class=\"po-page-header-actions\">\n      <po-button\n        *ngIf=\"hasEvent('cancel')\"\n        [p-icon]=\"getIcon('cancel')\"\n        [p-label]=\"literals.cancel\"\n        [p-type]=\"getType('cancel')\"\n        (p-click)=\"cancel.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('saveNew')\"\n        [p-disabled]=\"disableSubmit\"\n        [p-icon]=\"getIcon('saveNew')\"\n        [p-label]=\"literals.saveNew\"\n        [p-type]=\"getType('saveNew')\"\n        (p-click)=\"saveNew.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('save')\"\n        p-icon=\"po-icon-ok\"\n        p-type=\"primary\"\n        [p-disabled]=\"disableSubmit\"\n        [p-label]=\"literals.save\"\n        (p-click)=\"save.emit()\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content> </ng-content>\n  </po-page-content>\n</po-page>\n" }]
+            args: [{ selector: 'po-page-edit', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div *ngIf=\"hasAnyAction()\" class=\"po-page-header-actions\">\n      <po-button\n        *ngIf=\"hasEvent('cancel')\"\n        [p-icon]=\"getIcon('cancel')\"\n        [p-label]=\"literals.cancel\"\n        [p-kind]=\"getType('cancel')\"\n        (p-click)=\"cancel.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('saveNew')\"\n        [p-disabled]=\"disableSubmit\"\n        [p-icon]=\"getIcon('saveNew')\"\n        [p-label]=\"literals.saveNew\"\n        [p-kind]=\"getType('saveNew')\"\n        (p-click)=\"saveNew.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('save')\"\n        p-icon=\"po-icon-ok\"\n        p-kind=\"primary\"\n        [p-disabled]=\"disableSubmit\"\n        [p-label]=\"literals.save\"\n        (p-click)=\"save.emit()\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content> </ng-content>\n  </po-page-content>\n</po-page>\n" }]
         }], null, null);
 })();
 
@@ -42323,7 +42403,7 @@ PoPageListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageL
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterInput = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poPageContent = _t.first);
         }
-    }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$5, decls: 4, vars: 1, consts: [[3, "po-page-list-header-padding", "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], [1, "po-page-list-operations"], [1, "po-page-list-actions"], ["p-type", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click", 4, "ngIf"], [3, "p-disabled", "p-label", "p-click", 4, "ngIf"], [3, "p-actions", "p-label", 4, "ngIf"], ["class", "po-page-list-filter-wrapper", 3, "ngClass", 4, "ngIf"], [3, "po-page-list-disclaimer-group", "p-disclaimers", "p-hide-remove-all", "p-title", "p-change", "p-remove", "p-remove-all", 4, "ngIf"], ["p-type", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click"], [3, "p-disabled", "p-label", "p-click"], [3, "p-actions", "p-label"], [1, "po-page-list-filter-wrapper", 3, "ngClass"], [1, "po-field-container-content", "po-page-filter-content", 3, "ngClass"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-icon-search", "po-field-icon", 3, "click"], ["name", "model", "type", "text", 1, "po-input", "po-input-icon-right", 3, "placeholder", "keypress"], ["filterInput", ""], ["class", "po-page-list-filter-search", 4, "ngIf"], [1, "po-page-list-filter-search"], ["tabindex", "0", 1, "po-page-list-filter-search-link", 3, "click", "keydown.enter"], [3, "p-disclaimers", "p-hide-remove-all", "p-title", "p-change", "p-remove", "p-remove-all"]], template: function PoPageListComponent_Template(rf, ctx) {
+    }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$5, decls: 4, vars: 1, consts: [[3, "po-page-list-header-padding", "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], [1, "po-page-list-operations"], [1, "po-page-list-actions"], ["p-kind", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click", 4, "ngIf"], [3, "p-disabled", "p-label", "p-click", 4, "ngIf"], [3, "p-actions", "p-label", 4, "ngIf"], ["class", "po-page-list-filter-wrapper", 3, "ngClass", 4, "ngIf"], [3, "po-page-list-disclaimer-group", "p-disclaimers", "p-hide-remove-all", "p-title", "p-change", "p-remove", "p-remove-all", 4, "ngIf"], ["p-kind", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click"], [3, "p-disabled", "p-label", "p-click"], [3, "p-actions", "p-label"], [1, "po-page-list-filter-wrapper", 3, "ngClass"], [1, "po-field-container-content", "po-page-filter-content", 3, "ngClass"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-icon-search", "po-field-icon", 3, "click"], ["name", "model", "type", "text", 1, "po-input", "po-input-icon-right", 3, "placeholder", "keypress"], ["filterInput", ""], ["class", "po-page-list-filter-search", 4, "ngIf"], [1, "po-page-list-filter-search"], ["tabindex", "0", 1, "po-page-list-filter-search-link", 3, "click", "keydown.enter"], [3, "p-disclaimers", "p-hide-remove-all", "p-title", "p-change", "p-remove", "p-remove-all"]], template: function PoPageListComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "po-page");
@@ -42340,7 +42420,7 @@ PoPageListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageL
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageListComponent, [{
             type: Component,
-            args: [{ selector: 'po-page-list', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header\n    *ngIf=\"hasPageHeader()\"\n    [class.po-page-list-header-padding]=\"filter && !visibleActions.length\"\n    [p-breadcrumb]=\"breadcrumb\"\n    [p-title]=\"title\"\n  >\n    <!-- OPERATIONS -->\n    <div class=\"po-page-list-operations\">\n      <div class=\"po-page-list-actions\" [class.po-page-list-actions-padding]=\"filter\">\n        <po-button\n          *ngIf=\"visibleActions[0]\"\n          p-type=\"primary\"\n          [p-disabled]=\"actionIsDisabled(actions[0])\"\n          [p-icon]=\"visibleActions[0].icon\"\n          [p-label]=\"visibleActions[0].label\"\n          (p-click)=\"callAction(visibleActions[0])\"\n        >\n        </po-button>\n\n        <po-button\n          *ngIf=\"visibleActions[1] && (visibleActions.length === 2 || !isMobile)\"\n          [p-disabled]=\"actionIsDisabled(actions[1])\"\n          [p-label]=\"visibleActions[1].label\"\n          (p-click)=\"callAction(visibleActions[1])\"\n        >\n        </po-button>\n\n        <po-button\n          *ngIf=\"visibleActions.length === 3 && visibleActions[2] && !isMobile\"\n          [p-disabled]=\"actionIsDisabled(visibleActions[2])\"\n          [p-label]=\"visibleActions[2].label\"\n          (p-click)=\"callAction(visibleActions[2])\"\n        >\n        </po-button>\n\n        <po-dropdown\n          *ngIf=\"visibleActions.length > limitPrimaryActions\"\n          [p-actions]=\"dropdownActions\"\n          [p-label]=\"literals.otherActions\"\n        >\n        </po-dropdown>\n      </div>\n\n      <!-- FILTER -->\n      <div\n        class=\"po-page-list-filter-wrapper\"\n        *ngIf=\"filter\"\n        [ngClass]=\"hasCustomFilterSize() ? filterSizeClass(filter.width) : ''\"\n      >\n        <div\n          class=\"po-field-container-content po-page-filter-content\"\n          [ngClass]=\"\n            hasCustomFilterSize()\n              ? filter.advancedAction\n                ? 'po-page-filter-input-variable-size'\n                : 'po-page-filter-input-variable-size-wo-adv-search'\n              : ''\n          \"\n        >\n          <div class=\"po-field-icon-container-right\">\n            <span class=\"po-icon po-icon-search po-field-icon\" (click)=\"callActionFilter('action')\"> </span>\n          </div>\n\n          <input\n            #filterInput\n            class=\"po-input po-input-icon-right\"\n            name=\"model\"\n            type=\"text\"\n            [placeholder]=\"filter.placeholder || ''\"\n            (keypress)=\"onkeypress($event.keyCode)\"\n          />\n        </div>\n\n        <div class=\"po-page-list-filter-search\" *ngIf=\"filter.advancedAction\">\n          <span\n            class=\"po-page-list-filter-search-link\"\n            tabindex=\"0\"\n            (click)=\"callActionFilter('advancedAction')\"\n            (keydown.enter)=\"callActionFilter('advancedAction')\"\n          >\n            {{ advancedSearch }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      [class.po-page-list-disclaimer-group]=\"!!disclaimerGroup?.disclaimers?.length\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-hide-remove-all]=\"disclaimerGroup?.hideRemoveAll\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup($event)\"\n      (p-remove)=\"onRemoveDisclaimer($event)\"\n      (p-remove-all)=\"onRemoveAllDisclaimers($event)\"\n    >\n    </po-disclaimer-group>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content></ng-content>\n  </po-page-content>\n</po-page>\n" }]
+            args: [{ selector: 'po-page-list', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header\n    *ngIf=\"hasPageHeader()\"\n    [class.po-page-list-header-padding]=\"filter && !visibleActions.length\"\n    [p-breadcrumb]=\"breadcrumb\"\n    [p-title]=\"title\"\n  >\n    <!-- OPERATIONS -->\n    <div class=\"po-page-list-operations\">\n      <div class=\"po-page-list-actions\" [class.po-page-list-actions-padding]=\"filter\">\n        <po-button\n          *ngIf=\"visibleActions[0]\"\n          p-kind=\"primary\"\n          [p-disabled]=\"actionIsDisabled(actions[0])\"\n          [p-icon]=\"visibleActions[0].icon\"\n          [p-label]=\"visibleActions[0].label\"\n          (p-click)=\"callAction(visibleActions[0])\"\n        >\n        </po-button>\n\n        <po-button\n          *ngIf=\"visibleActions[1] && (visibleActions.length === 2 || !isMobile)\"\n          [p-disabled]=\"actionIsDisabled(actions[1])\"\n          [p-label]=\"visibleActions[1].label\"\n          (p-click)=\"callAction(visibleActions[1])\"\n        >\n        </po-button>\n\n        <po-button\n          *ngIf=\"visibleActions.length === 3 && visibleActions[2] && !isMobile\"\n          [p-disabled]=\"actionIsDisabled(visibleActions[2])\"\n          [p-label]=\"visibleActions[2].label\"\n          (p-click)=\"callAction(visibleActions[2])\"\n        >\n        </po-button>\n\n        <po-dropdown\n          *ngIf=\"visibleActions.length > limitPrimaryActions\"\n          [p-actions]=\"dropdownActions\"\n          [p-label]=\"literals.otherActions\"\n        >\n        </po-dropdown>\n      </div>\n\n      <!-- FILTER -->\n      <div\n        class=\"po-page-list-filter-wrapper\"\n        *ngIf=\"filter\"\n        [ngClass]=\"hasCustomFilterSize() ? filterSizeClass(filter.width) : ''\"\n      >\n        <div\n          class=\"po-field-container-content po-page-filter-content\"\n          [ngClass]=\"\n            hasCustomFilterSize()\n              ? filter.advancedAction\n                ? 'po-page-filter-input-variable-size'\n                : 'po-page-filter-input-variable-size-wo-adv-search'\n              : ''\n          \"\n        >\n          <div class=\"po-field-icon-container-right\">\n            <span class=\"po-icon po-icon-search po-field-icon\" (click)=\"callActionFilter('action')\"> </span>\n          </div>\n\n          <input\n            #filterInput\n            class=\"po-input po-input-icon-right\"\n            name=\"model\"\n            type=\"text\"\n            [placeholder]=\"filter.placeholder || ''\"\n            (keypress)=\"onkeypress($event.keyCode)\"\n          />\n        </div>\n\n        <div class=\"po-page-list-filter-search\" *ngIf=\"filter.advancedAction\">\n          <span\n            class=\"po-page-list-filter-search-link\"\n            tabindex=\"0\"\n            (click)=\"callActionFilter('advancedAction')\"\n            (keydown.enter)=\"callActionFilter('advancedAction')\"\n          >\n            {{ advancedSearch }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      [class.po-page-list-disclaimer-group]=\"!!disclaimerGroup?.disclaimers?.length\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-hide-remove-all]=\"disclaimerGroup?.hideRemoveAll\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup($event)\"\n      (p-remove)=\"onRemoveDisclaimer($event)\"\n      (p-remove-all)=\"onRemoveAllDisclaimers($event)\"\n    >\n    </po-disclaimer-group>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content></ng-content>\n  </po-page-content>\n</po-page>\n" }]
         }], function () { return [{ type: i0.ViewContainerRef }, { type: PoLanguageService }, { type: i0.Renderer2 }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, { filterInput: [{
                 type: ViewChild,
                 args: ['filterInput']