@po-ui/ng-components 21.9.0 → 21.10.0

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

@@ -1587,6 +1587,51 @@ var PoTagIcon;
     PoTagIcon["Warning"] = "ICON_WARNING";
 })(PoTagIcon || (PoTagIcon = {}));
 
+/**
+ * Enum que define as 35 Caption Tag Colors disponíveis para uso nos componentes.
+ *
+ * Estas cores são organizadas em 7 famílias (tag-01 a tag-07), cada uma com 5 variantes
+ * (lighter, light, base, dark, darker), totalizando 35 cores.
+ */
+var PoCaptionTagColorEnum;
+(function (PoCaptionTagColorEnum) {
+    PoCaptionTagColorEnum["CaptionTag01"] = "caption-tag-01";
+    PoCaptionTagColorEnum["CaptionTag02"] = "caption-tag-02";
+    PoCaptionTagColorEnum["CaptionTag03"] = "caption-tag-03";
+    PoCaptionTagColorEnum["CaptionTag04"] = "caption-tag-04";
+    PoCaptionTagColorEnum["CaptionTag05"] = "caption-tag-05";
+    PoCaptionTagColorEnum["CaptionTag06"] = "caption-tag-06";
+    PoCaptionTagColorEnum["CaptionTag07"] = "caption-tag-07";
+    PoCaptionTagColorEnum["CaptionTag08"] = "caption-tag-08";
+    PoCaptionTagColorEnum["CaptionTag09"] = "caption-tag-09";
+    PoCaptionTagColorEnum["CaptionTag10"] = "caption-tag-10";
+    PoCaptionTagColorEnum["CaptionTag11"] = "caption-tag-11";
+    PoCaptionTagColorEnum["CaptionTag12"] = "caption-tag-12";
+    PoCaptionTagColorEnum["CaptionTag13"] = "caption-tag-13";
+    PoCaptionTagColorEnum["CaptionTag14"] = "caption-tag-14";
+    PoCaptionTagColorEnum["CaptionTag15"] = "caption-tag-15";
+    PoCaptionTagColorEnum["CaptionTag16"] = "caption-tag-16";
+    PoCaptionTagColorEnum["CaptionTag17"] = "caption-tag-17";
+    PoCaptionTagColorEnum["CaptionTag18"] = "caption-tag-18";
+    PoCaptionTagColorEnum["CaptionTag19"] = "caption-tag-19";
+    PoCaptionTagColorEnum["CaptionTag20"] = "caption-tag-20";
+    PoCaptionTagColorEnum["CaptionTag21"] = "caption-tag-21";
+    PoCaptionTagColorEnum["CaptionTag22"] = "caption-tag-22";
+    PoCaptionTagColorEnum["CaptionTag23"] = "caption-tag-23";
+    PoCaptionTagColorEnum["CaptionTag24"] = "caption-tag-24";
+    PoCaptionTagColorEnum["CaptionTag25"] = "caption-tag-25";
+    PoCaptionTagColorEnum["CaptionTag26"] = "caption-tag-26";
+    PoCaptionTagColorEnum["CaptionTag27"] = "caption-tag-27";
+    PoCaptionTagColorEnum["CaptionTag28"] = "caption-tag-28";
+    PoCaptionTagColorEnum["CaptionTag29"] = "caption-tag-29";
+    PoCaptionTagColorEnum["CaptionTag30"] = "caption-tag-30";
+    PoCaptionTagColorEnum["CaptionTag31"] = "caption-tag-31";
+    PoCaptionTagColorEnum["CaptionTag32"] = "caption-tag-32";
+    PoCaptionTagColorEnum["CaptionTag33"] = "caption-tag-33";
+    PoCaptionTagColorEnum["CaptionTag34"] = "caption-tag-34";
+    PoCaptionTagColorEnum["CaptionTag35"] = "caption-tag-35";
+})(PoCaptionTagColorEnum || (PoCaptionTagColorEnum = {}));
+
 /**
  * @docsPrivate
  *
@@ -1622,7 +1667,8 @@ var PoColorPaletteEnum;
     PoColorPaletteEnum["Color12"] = "color-12";
 })(PoColorPaletteEnum || (PoColorPaletteEnum = {}));
 
-const poTagColors = Object.values(PoColorPaletteEnum);
+const poTagColors = [...Object.values(PoColorPaletteEnum), ...Object.values(PoCaptionTagColorEnum)];
+const poTagTextColors = Object.values(PoColorPaletteEnum);
 const poTagOrientationDefault = PoTagOrientation.Vertical;
 const PoTagLiteralsDefault = {
     en: {
@@ -1779,8 +1825,24 @@ class PoTagBaseComponent {
      *   - <span class="dot po-color-11"></span> `color-11`
      *   - <span class="dot po-color-12"></span> `color-12`
      *
+     * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**:
+     *
+     *   - <span class="dot po-caption-tag-01"></span> `caption-tag-01` <span class="dot po-caption-tag-02"></span> `caption-tag-02` <span class="dot po-caption-tag-03"></span> `caption-tag-03` <span class="dot po-caption-tag-04"></span> `caption-tag-04` <span class="dot po-caption-tag-05"></span> `caption-tag-05`
+     *   - <span class="dot po-caption-tag-06"></span> `caption-tag-06` <span class="dot po-caption-tag-07"></span> `caption-tag-07` <span class="dot po-caption-tag-08"></span> `caption-tag-08` <span class="dot po-caption-tag-09"></span> `caption-tag-09` <span class="dot po-caption-tag-10"></span> `caption-tag-10`
+     *   - <span class="dot po-caption-tag-11"></span> `caption-tag-11` <span class="dot po-caption-tag-12"></span> `caption-tag-12` <span class="dot po-caption-tag-13"></span> `caption-tag-13` <span class="dot po-caption-tag-14"></span> `caption-tag-14` <span class="dot po-caption-tag-15"></span> `caption-tag-15`
+     *   - <span class="dot po-caption-tag-16"></span> `caption-tag-16` <span class="dot po-caption-tag-17"></span> `caption-tag-17` <span class="dot po-caption-tag-18"></span> `caption-tag-18` <span class="dot po-caption-tag-19"></span> `caption-tag-19` <span class="dot po-caption-tag-20"></span> `caption-tag-20`
+     *   - <span class="dot po-caption-tag-21"></span> `caption-tag-21` <span class="dot po-caption-tag-22"></span> `caption-tag-22` <span class="dot po-caption-tag-23"></span> `caption-tag-23` <span class="dot po-caption-tag-24"></span> `caption-tag-24` <span class="dot po-caption-tag-25"></span> `caption-tag-25`
+     *   - <span class="dot po-caption-tag-26"></span> `caption-tag-26` <span class="dot po-caption-tag-27"></span> `caption-tag-27` <span class="dot po-caption-tag-28"></span> `caption-tag-28` <span class="dot po-caption-tag-29"></span> `caption-tag-29` <span class="dot po-caption-tag-30"></span> `caption-tag-30`
+     *   - <span class="dot po-caption-tag-31"></span> `caption-tag-31` <span class="dot po-caption-tag-32"></span> `caption-tag-32` <span class="dot po-caption-tag-33"></span> `caption-tag-33` <span class="dot po-caption-tag-34"></span> `caption-tag-34` <span class="dot po-caption-tag-35"></span> `caption-tag-35`
+     *
+     * Exemplo de uso:
+     * ```
+     * <po-tag p-color="caption-tag-15" p-value="Status"></po-tag>
+     * ```
+     *
      * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background;
-     * - O componente ajusta automaticamente a cor do texto para garantir legibilidade, escolhendo dinamicamente entre texto claro ou escuro conforme o contraste necessário.
+     * - Para as cores legacy (`color-01` a `color-12`) e cores customizadas, o componente ajusta automaticamente a cor do texto para garantir legibilidade.
+     * - Para as cores **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`), a cor do texto é fixa e definida via token CSS, não sendo possível alterá-la via `p-text-color`.
      *
      * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
      */
@@ -1820,9 +1882,12 @@ class PoTagBaseComponent {
      * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background.
      *
      * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
+     *
+     * > **Atenção:** As cores da paleta **Caption Tag Colors** (`caption-tag-01` a `caption-tag-35`) não são aceitas nesta propriedade,
+     * pois possuem cor de texto fixa definida via token CSS.
      */
     set textColor(value) {
-        this._textColor = poTagColors.includes(value) ? value : undefined;
+        this._textColor = poTagTextColors.includes(value) ? value : undefined;
         if (this._textColor === undefined) {
             CSS.supports('color', value) ? (this.customTextColor = value) : (this.customTextColor = undefined);
         }
@@ -2805,12 +2870,18 @@ const poTagTypeDefault = 'po-tag-' + PoTagType.Info;
  * <example name="po-tag-labs" title="PO Tag Labs">
  *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.html"> </file>
  *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.ts"> </file>
+ *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-tag-bank-account" title="PO Tag - Bank Account">
  *  <file name="sample-po-tag-bank-account/sample-po-tag-bank-account.component.html"> </file>
  *  <file name="sample-po-tag-bank-account/sample-po-tag-bank-account.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-tag-caption-tag-colors" title="PO Tag - Caption Tag Colors">
+ *  <file name="sample-po-tag-caption-tag-colors/sample-po-tag-caption-tag-colors.component.html"> </file>
+ *  <file name="sample-po-tag-caption-tag-colors/sample-po-tag-caption-tag-colors.component.ts"> </file>
+ * </example>
  */
 class PoTagComponent extends PoTagBaseComponent {
     el = inject(ElementRef);
@@ -2837,6 +2908,9 @@ class PoTagComponent extends PoTagBaseComponent {
                 return PoTagIcon.Warning;
         }
     }
+    get isCaptionTag() {
+        return this.tagColor?.startsWith('po-caption-tag-');
+    }
     get tagColor() {
         if (this.type && !this.removable) {
             return `po-tag-${this.type}`;
@@ -2883,7 +2957,11 @@ class PoTagComponent extends PoTagBaseComponent {
     }
     applyTextColorByContrast = () => {
         const computedStyle = getComputedStyle(this.poTag.nativeElement);
-        if ((!this.tagColor || this.tagColor?.startsWith('po-color-')) &&
+        if (this.tagColor?.startsWith('po-caption-tag-')) {
+            const captionIndex = this.tagColor.replace('po-caption-tag-', '');
+            this.poTag.nativeElement.style.color = `var(--color-caption-tag-text-${captionIndex})`;
+        }
+        else if ((!this.tagColor || this.tagColor?.startsWith('po-color-')) &&
             !this.removable &&
             !this.textColor &&
             computedStyle?.backgroundColor) {
@@ -2906,11 +2984,11 @@ class PoTagComponent extends PoTagBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoTagComponent, isStandalone: false, selector: "po-tag", viewQueries: [{ propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true, static: true }, { propertyName: "tagClose", first: true, predicate: ["tagClose"], descendants: true, static: true }, { propertyName: "poTag", first: true, predicate: ["poTag"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  @if (label) {\n    <div class=\"po-tag-title po-text-nowrap\">\n      <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n    </div>\n  }\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        @if (icon && !removable) {\n          <po-icon\n            class=\"po-tag-icon\"\n            [p-icon]=\"!type || forceIcon ? icon : iconFromType\"\n            [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n          >\n          </po-icon>\n        }\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        @if (removable) {\n          <po-icon\n            #tagClose\n            p-icon=\"ICON_CLOSE\"\n            p-tooltip-position=\"top\"\n            [p-tooltip]=\"literals.remove\"\n            [p-append-in-body]=\"appendInBody\"\n            [attr.aria-label]=\"setAriaLabel()\"\n            class=\"po-tag-remove\"\n            [class.po-clickable]=\"!disabled\"\n            [tabindex]=\"!disabled ? 0 : -1\"\n            [attr.role]=\"!disabled ? 'button' : ''\"\n            (click)=\"onClose()\"\n            (keydown.enter)=\"onClose('enter')\"\n          >\n          </po-icon>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoTagComponent, isStandalone: false, selector: "po-tag", viewQueries: [{ propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true, static: true }, { propertyName: "tagClose", first: true, predicate: ["tagClose"], descendants: true, static: true }, { propertyName: "poTag", first: true, predicate: ["poTag"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  @if (label) {\n    <div class=\"po-tag-title po-text-nowrap\">\n      <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n    </div>\n  }\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        @if (icon && !removable) {\n          <po-icon\n            class=\"po-tag-icon\"\n            [p-icon]=\"!type || forceIcon ? icon : iconFromType\"\n            [ngStyle]=\"!type && customTextColor && !isCaptionTag ? { 'color': customTextColor } : ''\"\n          >\n          </po-icon>\n        }\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span\n            [ngStyle]=\"!type && customTextColor && !removable && !isCaptionTag ? { 'color': customTextColor } : ''\"\n            >{{ value }}</span\n          >\n        </div>\n\n        @if (removable) {\n          <po-icon\n            #tagClose\n            p-icon=\"ICON_CLOSE\"\n            p-tooltip-position=\"top\"\n            [p-tooltip]=\"literals.remove\"\n            [p-append-in-body]=\"appendInBody\"\n            [attr.aria-label]=\"setAriaLabel()\"\n            class=\"po-tag-remove\"\n            [class.po-clickable]=\"!disabled\"\n            [tabindex]=\"!disabled ? 0 : -1\"\n            [attr.role]=\"!disabled ? 'button' : ''\"\n            (click)=\"onClose()\"\n            (keydown.enter)=\"onClose('enter')\"\n          >\n          </po-icon>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  @if (label) {\n    <div class=\"po-tag-title po-text-nowrap\">\n      <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n    </div>\n  }\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        @if (icon && !removable) {\n          <po-icon\n            class=\"po-tag-icon\"\n            [p-icon]=\"!type || forceIcon ? icon : iconFromType\"\n            [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n          >\n          </po-icon>\n        }\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        @if (removable) {\n          <po-icon\n            #tagClose\n            p-icon=\"ICON_CLOSE\"\n            p-tooltip-position=\"top\"\n            [p-tooltip]=\"literals.remove\"\n            [p-append-in-body]=\"appendInBody\"\n            [attr.aria-label]=\"setAriaLabel()\"\n            class=\"po-tag-remove\"\n            [class.po-clickable]=\"!disabled\"\n            [tabindex]=\"!disabled ? 0 : -1\"\n            [attr.role]=\"!disabled ? 'button' : ''\"\n            (click)=\"onClose()\"\n            (keydown.enter)=\"onClose('enter')\"\n          >\n          </po-icon>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  @if (label) {\n    <div class=\"po-tag-title po-text-nowrap\">\n      <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n    </div>\n  }\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        @if (icon && !removable) {\n          <po-icon\n            class=\"po-tag-icon\"\n            [p-icon]=\"!type || forceIcon ? icon : iconFromType\"\n            [ngStyle]=\"!type && customTextColor && !isCaptionTag ? { 'color': customTextColor } : ''\"\n          >\n          </po-icon>\n        }\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span\n            [ngStyle]=\"!type && customTextColor && !removable && !isCaptionTag ? { 'color': customTextColor } : ''\"\n            >{{ value }}</span\n          >\n        </div>\n\n        @if (removable) {\n          <po-icon\n            #tagClose\n            p-icon=\"ICON_CLOSE\"\n            p-tooltip-position=\"top\"\n            [p-tooltip]=\"literals.remove\"\n            [p-append-in-body]=\"appendInBody\"\n            [attr.aria-label]=\"setAriaLabel()\"\n            class=\"po-tag-remove\"\n            [class.po-clickable]=\"!disabled\"\n            [tabindex]=\"!disabled ? 0 : -1\"\n            [attr.role]=\"!disabled ? 'button' : ''\"\n            (click)=\"onClose()\"\n            (keydown.enter)=\"onClose('enter')\"\n          >\n          </po-icon>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { tagContainer: [{
                 type: ViewChild,
                 args: ['tagContainer', { static: true }]
@@ -3813,6 +3891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * <example name="po-avatar-business-card" title="PO Avatar - Business Card" >
  *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.html"> </file>
  *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.ts"> </file>
+ *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.css"> </file>
  * </example>
  */
 class PoAvatarComponent extends PoAvatarBaseComponent {
@@ -3851,7 +3930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
-const poBadgeColors = Object.values(PoColorPaletteEnum);
+const poBadgeColors = [...Object.values(PoColorPaletteEnum), ...Object.values(PoCaptionTagColorEnum)];
 const PO_BADGE_COLOR_DEFAULT = 'color-07';
 /**
  * @description
@@ -3903,10 +3982,25 @@ class PoBadgeBaseComponent {
      *   - <span class="dot po-color-11"></span> `color-11`
      *   - <span class="dot po-color-12"></span> `color-12`
      *
+     * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**:
+     *
+     *   - <span class="dot po-caption-tag-01"></span> `caption-tag-01` <span class="dot po-caption-tag-02"></span> `caption-tag-02` <span class="dot po-caption-tag-03"></span> `caption-tag-03` <span class="dot po-caption-tag-04"></span> `caption-tag-04` <span class="dot po-caption-tag-05"></span> `caption-tag-05`
+     *   - <span class="dot po-caption-tag-06"></span> `caption-tag-06` <span class="dot po-caption-tag-07"></span> `caption-tag-07` <span class="dot po-caption-tag-08"></span> `caption-tag-08` <span class="dot po-caption-tag-09"></span> `caption-tag-09` <span class="dot po-caption-tag-10"></span> `caption-tag-10`
+     *   - <span class="dot po-caption-tag-11"></span> `caption-tag-11` <span class="dot po-caption-tag-12"></span> `caption-tag-12` <span class="dot po-caption-tag-13"></span> `caption-tag-13` <span class="dot po-caption-tag-14"></span> `caption-tag-14` <span class="dot po-caption-tag-15"></span> `caption-tag-15`
+     *   - <span class="dot po-caption-tag-16"></span> `caption-tag-16` <span class="dot po-caption-tag-17"></span> `caption-tag-17` <span class="dot po-caption-tag-18"></span> `caption-tag-18` <span class="dot po-caption-tag-19"></span> `caption-tag-19` <span class="dot po-caption-tag-20"></span> `caption-tag-20`
+     *   - <span class="dot po-caption-tag-21"></span> `caption-tag-21` <span class="dot po-caption-tag-22"></span> `caption-tag-22` <span class="dot po-caption-tag-23"></span> `caption-tag-23` <span class="dot po-caption-tag-24"></span> `caption-tag-24` <span class="dot po-caption-tag-25"></span> `caption-tag-25`
+     *   - <span class="dot po-caption-tag-26"></span> `caption-tag-26` <span class="dot po-caption-tag-27"></span> `caption-tag-27` <span class="dot po-caption-tag-28"></span> `caption-tag-28` <span class="dot po-caption-tag-29"></span> `caption-tag-29` <span class="dot po-caption-tag-30"></span> `caption-tag-30`
+     *   - <span class="dot po-caption-tag-31"></span> `caption-tag-31` <span class="dot po-caption-tag-32"></span> `caption-tag-32` <span class="dot po-caption-tag-33"></span> `caption-tag-33` <span class="dot po-caption-tag-34"></span> `caption-tag-34` <span class="dot po-caption-tag-35"></span> `caption-tag-35`
+     *
+     * Exemplo de uso:
+     * ```
+     * <po-badge p-color="caption-tag-13" p-value="5"></po-badge>
+     * ```
+     *
      * @default `color-07`
      */
     set color(value) {
-        if (value !== undefined && value.includes('color')) {
+        if (value !== undefined && (value.includes('color') || value.startsWith('caption-tag-'))) {
             this._color = poBadgeColors.includes(value) ? value : PO_BADGE_COLOR_DEFAULT;
         }
         else {
@@ -4162,11 +4256,11 @@ class PoBadgeComponent extends PoBadgeBaseComponent {
         return value > PO_BADGE_MAX_NOTIFICATIONS ? '9+' : value.toString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoBadgeComponent, isStandalone: false, selector: "po-badge", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"{{ getChangeStyle() }} po-badge po-badge-{{ size ? size : 'medium' }}\"\n  [class.po-badge-notification]=\"isNotification && !status\"\n  [class.po-badge-border]=\"showBorder\"\n  [attr.data-status]=\"status\"\n  [ariaLabel]=\"notificationLabel\"\n  [ngStyle]=\"customColor && !status ? { 'background-color': customColor } : {}\"\n>\n  @if (!isNotification && size !== 'small' && badgeIcon && status !== 'disabled') {\n    <po-icon [p-icon]=\"badgeIcon\"></po-icon>\n  }\n  @if (value > 1) {\n    <span class=\"po-badge-value\" aria-hidden=\"true\">{{ badgeValue }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoBadgeComponent, isStandalone: false, selector: "po-badge", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"{{ getChangeStyle() }} po-badge po-badge-{{ size ? size : 'medium' }}\"\n  [class.po-badge-notification]=\"isNotification && !status\"\n  [class.po-badge-border]=\"showBorder\"\n  [attr.data-status]=\"status\"\n  [ariaLabel]=\"notificationLabel\"\n  [ngStyle]=\"customColor && !status ? { 'background-color': customColor } : {}\"\n>\n  @if (!isNotification && size !== 'small' && badgeIcon && status !== 'disabled') {\n    <po-icon [p-icon]=\"badgeIcon\"></po-icon>\n  }\n  @if (value > 1) {\n    <span class=\"po-badge-value\" aria-hidden=\"true\">{{ badgeValue }}</span>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-badge', standalone: false, template: "<div\n  class=\"{{ getChangeStyle() }} po-badge po-badge-{{ size ? size : 'medium' }}\"\n  [class.po-badge-notification]=\"isNotification && !status\"\n  [class.po-badge-border]=\"showBorder\"\n  [attr.data-status]=\"status\"\n  [ariaLabel]=\"notificationLabel\"\n  [ngStyle]=\"customColor && !status ? { 'background-color': customColor } : {}\"\n>\n  @if (!isNotification && size !== 'small' && badgeIcon && status !== 'disabled') {\n    <po-icon [p-icon]=\"badgeIcon\"></po-icon>\n  }\n  @if (value > 1) {\n    <span class=\"po-badge-value\" aria-hidden=\"true\">{{ badgeValue }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}\n"] }]
+            args: [{ selector: 'po-badge', standalone: false, template: "<div\n  class=\"{{ getChangeStyle() }} po-badge po-badge-{{ size ? size : 'medium' }}\"\n  [class.po-badge-notification]=\"isNotification && !status\"\n  [class.po-badge-border]=\"showBorder\"\n  [attr.data-status]=\"status\"\n  [ariaLabel]=\"notificationLabel\"\n  [ngStyle]=\"customColor && !status ? { 'background-color': customColor } : {}\"\n>\n  @if (!isNotification && size !== 'small' && badgeIcon && status !== 'disabled') {\n    <po-icon [p-icon]=\"badgeIcon\"></po-icon>\n  }\n  @if (value > 1) {\n    <span class=\"po-badge-value\" aria-hidden=\"true\">{{ badgeValue }}</span>\n  }\n</div>\n" }]
         }] });
 
 /**
@@ -5495,11 +5589,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * <example name="po-loading-overlay-basic" title="PO Loading Overlay Basic">
  *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.html"> </file>
  *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.ts"> </file>
+ *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.css"> </file>
  * </example>
  *
  * <example name="po-loading-overlay-labs" title="PO Loading Overlay Labs">
  *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.html"> </file>
  *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.ts"> </file>
+ *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-loading-overlay-connection-test" title="PO Loading Overlay - Connection Test">
@@ -8743,11 +8839,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * <example name="po-popup-labs" title="PO Popup - Labs">
  *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.html"> </file>
  *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.ts"> </file>
+ *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-popup-email" title="PO Popup Email">
  *   <file name="sample-po-popup-email/sample-po-popup-email.component.html"> </file>
  *   <file name="sample-po-popup-email/sample-po-popup-email.component.ts"> </file>
+ *   <file name="sample-po-popup-email/sample-po-popup-email.component.css"> </file>
  * </example>
  *
  */
@@ -11334,6 +11432,7 @@ const poComboContainerOffset = 8;
  * <example name="po-combo-scheduling" title="PO Combo - Scheduling">
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.html"> </file>
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.ts"> </file>
+ *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.css"> </file>
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.service.ts"> </file>
  * </example>
  *
@@ -16417,8 +16516,8 @@ class PoChartComponent extends PoChartBaseComponent {
                     .getPropertyValue(serie.color.replace(/^var\((--[^)]+)\)$/, '$1'))
                     .trim();
             }
-            else if (serie.color?.includes('color')) {
-                colorVariable = this.getCSSVariable(`--${serie.color.replace('po-', '')}`);
+            else if (serie.color?.includes('color') || serie.color?.startsWith('caption-tag-')) {
+                colorVariable = this.getCSSVariable(`--color-${serie.color.replace('po-', '').replace('color-', '')}`);
             }
             else {
                 colorVariable = serie.color;
@@ -16852,6 +16951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * <example name="po-container-dashboard" title="PO Container - Dashboard">
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.html"> </file>
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.ts"> </file>
+ *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.css"> </file>
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.service.ts"> </file>
  * </example>
  */
@@ -26277,6 +26377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * <example name="po-progress-labs" title="PO Progress Labs">
  *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.html"> </file>
  *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.ts"> </file>
+ *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-progress-publication" title="PO Progress - Publication">
@@ -26363,9 +26464,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 class PoColorPaletteService {
     getColor(value) {
-        return Object.values(PoColorPaletteEnum).includes(value.color)
-            ? value.color
-            : this.getColorFromType(value.type || value.color);
+        if (Object.values(PoColorPaletteEnum).includes(value.color) ||
+            Object.values(PoCaptionTagColorEnum).includes(value.color)) {
+            return value.color;
+        }
+        return this.getColorFromType(value.type || value.color);
     }
     getColorFromType(type) {
         switch (type) {
@@ -30327,6 +30430,9 @@ class PoTableColumnManagerComponent {
     // Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis.
     // O po-table envia como parâmetro um array de string com as colunas visíveis atualizadas. Por exemplo: ["idCard", "name", "hireStatus", "age"].
     changeVisibleColumns = new EventEmitter();
+    // Evento disparado ao alterar o estado de fixação de uma coluna no gerenciador de colunas.
+    // O po-table envia como parâmetro um array de string com as propriedades das colunas fixas. Por exemplo: ["name", "age"].
+    changeFixedColumns = output({ alias: 'p-change-fixed-columns' });
     initialColumns = new EventEmitter();
     hideActionFixedColumns = false;
     literals;
@@ -30406,6 +30512,9 @@ class PoTableColumnManagerComponent {
         const defaultColumns = this.getVisibleColumns(this.defaultColumns);
         this.initialColumns.emit(this.getVisibleColumns(this.colunsDefault));
         this.checkChanges(defaultColumns, this.restoreDefaultEvent);
+        if (!this.hideActionFixedColumns) {
+            this.changeFixedColumns.emit([]);
+        }
     }
     changePosition({ option, direction }) {
         const indexColumn = this.columns.findIndex(el => el.property === option.value);
@@ -30434,6 +30543,10 @@ class PoTableColumnManagerComponent {
             this.columns = [...newColumn];
         }
         this.visibleColumnsChange.emit(newColumn);
+        if (!this.hideActionFixedColumns) {
+            const fixedColumns = newColumn.filter(col => col.fixed === true).map(col => col.property);
+            this.changeFixedColumns.emit(fixedColumns);
+        }
     }
     changePositionColumn(array, index, direction) {
         if (direction === 'up') {
@@ -30621,7 +30734,7 @@ class PoTableColumnManagerComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTableColumnManagerComponent, deps: [{ token: i0.Renderer2 }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.9", type: PoTableColumnManagerComponent, isStandalone: false, selector: "po-table-column-manager", inputs: { columns: ["p-columns", "columns"], target: ["p-target", "target"], colunsDefault: ["p-columns-default", "colunsDefault"], lastVisibleColumnsSelected: ["p-last-visible-columns-selected", "lastVisibleColumnsSelected"], hideActionFixedColumns: ["p-hide-action-fixed-columns", "hideActionFixedColumns", convertToBoolean], componentsSize: ["p-components-size", "componentsSize"], maxColumns: ["p-max-columns", "maxColumns"] }, outputs: { visibleColumnsChange: "p-visible-columns-change", changeVisibleColumns: "p-change-visible-columns", initialColumns: "p-initial-columns" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PoPopoverComponent, descendants: true }, { propertyName: "pageSlideColumnsManager", first: true, predicate: ["pageSlideColumnsManager"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<po-page-slide\n  #pageSlideColumnsManager\n  p-size=\"auto\"\n  [p-title]=\"literals.columnsManager\"\n  [p-click-out]=\"true\"\n  [p-components-size]=\"componentsSize\"\n  (p-close)=\"checkChanges([], true)\"\n>\n  <div>\n    <div class=\"po-table-column-manager-body\">\n      <po-table-list-manager\n        name=\"visibleColumns\"\n        [(ngModel)]=\"visibleColumns\"\n        p-columns=\"1\"\n        [p-columns-manager]=\"columns\"\n        [p-components-size]=\"componentsSize\"\n        [p-options]=\"columnsOptions\"\n        [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n        (p-change)=\"checkChanges($event, false)\"\n        (p-change-position)=\"changePosition($event)\"\n        (p-change-fixed)=\"emitColumnFixed($event)\"\n      >\n      </po-table-list-manager>\n    </div>\n\n    <div class=\"po-table-column-manager-footer\">\n      <po-button\n        class=\"po-table-column-manager-footer-restore\"\n        p-kind=\"tertiary\"\n        [p-label]=\"literals.restoreDefault\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"restore()\"\n      >\n      </po-button>\n    </div>\n  </div>\n</po-page-slide>\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoPageSlideComponent, selector: "po-page-slide" }, { kind: "component", type: PoTableListManagerComponent, selector: "po-table-list-manager", inputs: ["p-columns-manager", "p-components-size", "p-hide-action-fixed-columns"], outputs: ["p-change-position", "p-change-fixed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.9", type: PoTableColumnManagerComponent, isStandalone: false, selector: "po-table-column-manager", inputs: { columns: ["p-columns", "columns"], target: ["p-target", "target"], colunsDefault: ["p-columns-default", "colunsDefault"], lastVisibleColumnsSelected: ["p-last-visible-columns-selected", "lastVisibleColumnsSelected"], hideActionFixedColumns: ["p-hide-action-fixed-columns", "hideActionFixedColumns", convertToBoolean], componentsSize: ["p-components-size", "componentsSize"], maxColumns: ["p-max-columns", "maxColumns"] }, outputs: { visibleColumnsChange: "p-visible-columns-change", changeVisibleColumns: "p-change-visible-columns", changeFixedColumns: "p-change-fixed-columns", initialColumns: "p-initial-columns" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PoPopoverComponent, descendants: true }, { propertyName: "pageSlideColumnsManager", first: true, predicate: ["pageSlideColumnsManager"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<po-page-slide\n  #pageSlideColumnsManager\n  p-size=\"auto\"\n  [p-title]=\"literals.columnsManager\"\n  [p-click-out]=\"true\"\n  [p-components-size]=\"componentsSize\"\n  (p-close)=\"checkChanges([], true)\"\n>\n  <div>\n    <div class=\"po-table-column-manager-body\">\n      <po-table-list-manager\n        name=\"visibleColumns\"\n        [(ngModel)]=\"visibleColumns\"\n        p-columns=\"1\"\n        [p-columns-manager]=\"columns\"\n        [p-components-size]=\"componentsSize\"\n        [p-options]=\"columnsOptions\"\n        [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n        (p-change)=\"checkChanges($event, false)\"\n        (p-change-position)=\"changePosition($event)\"\n        (p-change-fixed)=\"emitColumnFixed($event)\"\n      >\n      </po-table-list-manager>\n    </div>\n\n    <div class=\"po-table-column-manager-footer\">\n      <po-button\n        class=\"po-table-column-manager-footer-restore\"\n        p-kind=\"tertiary\"\n        [p-label]=\"literals.restoreDefault\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"restore()\"\n      >\n      </po-button>\n    </div>\n  </div>\n</po-page-slide>\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoPageSlideComponent, selector: "po-page-slide" }, { kind: "component", type: PoTableListManagerComponent, selector: "po-table-list-manager", inputs: ["p-columns-manager", "p-components-size", "p-hide-action-fixed-columns"], outputs: ["p-change-position", "p-change-fixed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTableColumnManagerComponent, decorators: [{
             type: Component,
@@ -30650,7 +30763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], changeVisibleColumns: [{
                 type: Output,
                 args: ['p-change-visible-columns']
-            }], initialColumns: [{
+            }], changeFixedColumns: [{ type: i0.Output, args: ["p-change-fixed-columns"] }], initialColumns: [{
                 type: Output,
                 args: ['p-initial-columns']
             }], hideActionFixedColumns: [{
@@ -31355,6 +31468,28 @@ class PoTableBaseComponent {
      * Por exemplo: ["idCard", "name", "hireStatus", "age"].
      */
     changeVisibleColumns = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     * Evento disparado ao alterar o estado de fixação de uma coluna no gerenciador de colunas.
+     *
+     * O componente envia como parâmetro um array de string com as propriedades das colunas fixas.
+     * Por exemplo: ["name", "age"].
+     *
+     * > Incompatível com `p-hide-action-fixed-columns`. Quando esta propriedade estiver ativa, o evento não será disparado.
+     *
+     * @example
+     *
+     * ```html
+     * <po-table
+     *   [p-columns]="columns"
+     *   [p-items]="items"
+     *   (p-change-fixed-columns)="onFixedColumnsChange($event)">
+     * </po-table>
+     * ```
+     */
+    changeFixedColumns = output({ alias: 'p-change-fixed-columns' });
     /**
      * @optional
      *
@@ -32177,7 +32312,7 @@ class PoTableBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTableBaseComponent, deps: [{ token: PoDateService }, { token: PoLanguageService }, { token: PoTableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoTableBaseComponent, isStandalone: true, inputs: { hideColumnsManager: ["p-hide-columns-manager", "hideColumnsManager", convertToBoolean], hideBatchActions: ["p-hide-batch-actions", "hideBatchActions", convertToBoolean], textWrap: ["p-text-wrap", "textWrap", convertToBoolean], hideActionFixedColumns: ["p-hide-action-fixed-columns", "hideActionFixedColumns"], hideTableSearch: ["p-hide-table-search", "hideTableSearch", convertToBoolean], autoCollapse: ["p-auto-collapse", "autoCollapse", convertToBoolean], loadingShowMore: ["p-loading-show-more", "loadingShowMore", convertToBoolean], sort: ["p-sort", "sort", convertToBoolean], showMoreDisabled: ["p-show-more-disabled", "showMoreDisabled", convertToBoolean], striped: ["p-striped", "striped", convertToBoolean], hideSelectAll: ["p-hide-select-all", "hideSelectAll", convertToBoolean], singleSelect: ["p-single-select", "singleSelect", convertToBoolean], selectableEntireLine: ["p-selectable-entire-line", "selectableEntireLine", convertToBoolean], actionRight: ["p-actions-right", "actionRight", convertToBoolean], maxColumns: ["p-max-columns", "maxColumns"], filterType: ["p-filter-type", "filterType"], componentsSize: ["p-components-size", "componentsSize"], items: ["p-items", "items"], columns: ["p-columns", "columns"], container: ["p-container", "container"], paramDeleteApi: ["p-param-delete-api", "paramDeleteApi"], height: ["p-height", "height"], hideDetail: ["p-hide-detail", "hideDetail"], literals: ["p-literals", "literals"], loading: ["p-loading", "loading"], actions: ["p-actions", "actions"], selectable: ["p-selectable", "selectable"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], serviceApi: ["p-service-api", "serviceApi"], serviceDeleteApi: ["p-service-delete", "serviceDeleteApi"], spacing: ["p-spacing", "spacing"], filteredColumns: ["p-filtered-columns", "filteredColumns"], draggable: ["p-draggable", "draggable"], virtualScroll: ["p-virtual-scroll", "virtualScroll"] }, outputs: { allSelected: "p-all-selected", allUnselected: "p-all-unselected", collapsed: "p-collapsed", expanded: "p-expanded", eventDelete: "p-delete-items", selected: "p-selected", showMore: "p-show-more", sortBy: "p-sort-by", unselected: "p-unselected", changeVisibleColumns: "p-change-visible-columns", columnRestoreManager: "p-restore-column-manager" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-components-size": "this.componentsSize", "attr.p-spacing": "this.spacing" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoTableBaseComponent, isStandalone: true, inputs: { hideColumnsManager: ["p-hide-columns-manager", "hideColumnsManager", convertToBoolean], hideBatchActions: ["p-hide-batch-actions", "hideBatchActions", convertToBoolean], textWrap: ["p-text-wrap", "textWrap", convertToBoolean], hideActionFixedColumns: ["p-hide-action-fixed-columns", "hideActionFixedColumns"], hideTableSearch: ["p-hide-table-search", "hideTableSearch", convertToBoolean], autoCollapse: ["p-auto-collapse", "autoCollapse", convertToBoolean], loadingShowMore: ["p-loading-show-more", "loadingShowMore", convertToBoolean], sort: ["p-sort", "sort", convertToBoolean], showMoreDisabled: ["p-show-more-disabled", "showMoreDisabled", convertToBoolean], striped: ["p-striped", "striped", convertToBoolean], hideSelectAll: ["p-hide-select-all", "hideSelectAll", convertToBoolean], singleSelect: ["p-single-select", "singleSelect", convertToBoolean], selectableEntireLine: ["p-selectable-entire-line", "selectableEntireLine", convertToBoolean], actionRight: ["p-actions-right", "actionRight", convertToBoolean], maxColumns: ["p-max-columns", "maxColumns"], filterType: ["p-filter-type", "filterType"], componentsSize: ["p-components-size", "componentsSize"], items: ["p-items", "items"], columns: ["p-columns", "columns"], container: ["p-container", "container"], paramDeleteApi: ["p-param-delete-api", "paramDeleteApi"], height: ["p-height", "height"], hideDetail: ["p-hide-detail", "hideDetail"], literals: ["p-literals", "literals"], loading: ["p-loading", "loading"], actions: ["p-actions", "actions"], selectable: ["p-selectable", "selectable"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], serviceApi: ["p-service-api", "serviceApi"], serviceDeleteApi: ["p-service-delete", "serviceDeleteApi"], spacing: ["p-spacing", "spacing"], filteredColumns: ["p-filtered-columns", "filteredColumns"], draggable: ["p-draggable", "draggable"], virtualScroll: ["p-virtual-scroll", "virtualScroll"] }, outputs: { allSelected: "p-all-selected", allUnselected: "p-all-unselected", collapsed: "p-collapsed", expanded: "p-expanded", eventDelete: "p-delete-items", selected: "p-selected", showMore: "p-show-more", sortBy: "p-sort-by", unselected: "p-unselected", changeVisibleColumns: "p-change-visible-columns", changeFixedColumns: "p-change-fixed-columns", columnRestoreManager: "p-restore-column-manager" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-components-size": "this.componentsSize", "attr.p-spacing": "this.spacing" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTableBaseComponent, decorators: [{
             type: Directive
@@ -32259,7 +32394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], changeVisibleColumns: [{
                 type: Output,
                 args: ['p-change-visible-columns']
-            }], columnRestoreManager: [{
+            }], changeFixedColumns: [{ type: i0.Output, args: ["p-change-fixed-columns"] }], columnRestoreManager: [{
                 type: Output,
                 args: ['p-restore-column-manager']
             }], componentsSize: [{
@@ -33335,11 +33470,13 @@ const ID_SEARCH_BUTTON_CLEAN = 'search-button-clean';
  * <example name="po-search-labs" title="PO Search Labs">
  *  <file name="sample-po-search-labs/sample-po-search-labs.component.html"> </file>
  *  <file name="sample-po-search-labs/sample-po-search-labs.component.ts"> </file>
+ *  <file name="sample-po-search-labs/sample-po-search-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-search-find-people" title="PO Search Find People">
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.html"> </file>
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.ts"> </file>
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.css"> </file>
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.service.ts"> </file>
  * </example>
  *
@@ -33357,6 +33494,7 @@ const ID_SEARCH_BUTTON_CLEAN = 'search-button-clean';
  * <example name="po-search-execute" title="PO Search Form Fields with Execute">
  *  <file name="sample-po-search-execute/sample-po-search-execute.component.html"> </file>
  *  <file name="sample-po-search-execute/sample-po-search-execute.component.ts"> </file>
+ *  <file name="sample-po-search-execute/sample-po-search-execute.component.css"> </file>
  * </example>
  *
  * <example name="po-search-fields-locate" title="PO Search Form Fields with Locate">
@@ -34709,6 +34847,11 @@ class PoTableComponent extends PoTableBaseComponent {
     onChangeVisibleColumns(columns) {
         this.changeVisibleColumns.emit(columns);
     }
+    onChangeFixedColumns(columns) {
+        if (!this.hideActionFixedColumns) {
+            this.changeFixedColumns.emit(columns);
+        }
+    }
     onColumnRestoreManager(value) {
         this.columnRestoreManager.emit(value);
     }
@@ -35048,11 +35191,11 @@ class PoTableComponent extends PoTableBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTableComponent, deps: [{ token: PoDateService }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }, { token: PoLanguageService }, { token: i0.ChangeDetectorRef }, { token: i1.DecimalPipe }, { token: PoTableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoTableComponent, isStandalone: false, selector: "po-table", providers: [PoDateService, PoTableService], queries: [{ propertyName: "tableRowTemplate", first: true, predicate: PoTableRowTemplateDirective, descendants: true, static: true }, { propertyName: "tableCellTemplate", first: true, predicate: PoTableCellTemplateDirective, descendants: true }, { propertyName: "tableColumnTemplates", predicate: PoTableColumnTemplateDirective }], viewQueries: [{ propertyName: "noColumnsHeader", first: true, predicate: ["noColumnsHeader"], descendants: true, read: ElementRef }, { propertyName: "poPopupComponent", first: true, predicate: ["popup"], descendants: true }, { propertyName: "modalDelete", first: true, predicate: PoModalComponent, descendants: true, static: true }, { propertyName: "tableFooterElement", first: true, predicate: ["tableFooter"], descendants: true, read: ElementRef }, { propertyName: "tableWrapperElement", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef }, { propertyName: "tableTemplate", first: true, predicate: ["tableTemplate"], descendants: true, read: ElementRef }, { propertyName: "tableVirtualScroll", first: true, predicate: ["tableVirtualScroll"], descendants: true, read: ElementRef }, { propertyName: "tableScrollable", first: true, predicate: ["tableScrollable"], descendants: true, read: ElementRef }, { propertyName: "columnManager", first: true, predicate: ["columnManager"], descendants: true, read: ElementRef }, { propertyName: "columnBatchActions", first: true, predicate: ["columnBatchActions"], descendants: true, read: ElementRef }, { propertyName: "columnActionLeft", first: true, predicate: ["columnActionLeft"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "columnManagerTarget", first: true, predicate: ["columnManagerTarget"], descendants: true }, { propertyName: "columnManagerTargetFixed", first: true, predicate: ["columnManagerTargetFixed"], descendants: true }, { propertyName: "actionsIconElement", predicate: ["actionsIconElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-table-actions\">\n  @if (hasValidColumns && itemsSelected.length > 0 && !hideBatchActions) {\n    <div #columnBatchActions class=\"po-table-actions-batch-actions\">\n      <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n        <strong>\n          <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n          <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n          <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n        </strong>\n      </div>\n      <div class=\"po-table-actions-batch-actions__buttons\">\n        <po-button\n          p-icon=\"ICON_DELETE\"\n          [p-danger]=\"true\"\n          [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n          [p-label]=\"literals.delete\"\n          [p-size]=\"componentsSize\"\n          (p-click)=\"modalDelete.open()\"\n        ></po-button>\n      </div>\n    </div>\n  }\n\n  @if (hasValidColumns && !hideColumnsManager) {\n    <div #columnManager class=\"po-table-actions-column-manager\">\n      <po-button\n        #columnManagerTarget\n        p-icon=\"ICON_SETTINGS\"\n        p-kind=\"tertiary\"\n        p-tooltip-position=\"left\"\n        [p-aria-label]=\"literals.columnsManager\"\n        [p-tooltip]=\"literals.columnsManager\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"onOpenColumnManager()\"\n      ></po-button>\n    </div>\n  }\n\n  @if (!hideTableSearch && hasValidColumns) {\n    <div class=\"po-table-search\">\n      <po-search\n        [p-items]=\"items\"\n        [p-filter-keys]=\"filteredColumns\"\n        [p-filter-type]=\"filterType\"\n        [p-size]=\"componentsSize\"\n        (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n      >\n      </po-search>\n    </div>\n  }\n</div>\n@if (container) {\n  <po-container p-no-padding>\n    <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n  </po-container>\n} @else {\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n}\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Show More Button -->\n@if (!infiniteScroll) {\n  <div\n    class=\"po-row po-table-footer-show-more\"\n    [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n    #tableFooter\n  >\n    <po-button\n      class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-loading]=\"loadingShowMore\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    #tableScrollable\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped,\n      'po-table-data-fixed-columns': applyFixedColumns(),\n      'po-table-text-wrap-enabled': textWrap\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead\n      [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\"\n      [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n    >\n      <tr\n        [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        @if (hasSelectableColumn) {\n          <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              @if (!hideSelectAll) {\n                <po-checkbox\n                  name=\"selectAll\"\n                  [p-size]=\"componentsSize\"\n                  (p-change)=\"selectAllRows()\"\n                  [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                ></po-checkbox>\n              }\n            </div>\n          </th>\n        }\n\n        @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n          <th\n            #columnActionLeft\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n        }\n\n        @if (!hasMainColumns) {\n          <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n            @if (height) {\n              <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              </div>\n            } @else {\n              {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n            }\n          </th>\n        }\n\n        @if (this.isDraggable || hasSomeFixed()) {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                @if (this.isDraggable && !column.fixed) {\n                  <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        } @else {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        }\n\n        @if (hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        @if (\n          hasVisibleActions &&\n          actionRight &&\n          hasItems &&\n          hasMainColumns &&\n          (visibleActions.length > 1 || isSingleAction)\n        ) {\n          <th\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        }\n      </tr>\n    </thead>\n\n    @if (!hasItems || !hasMainColumns) {\n      <tbody class=\"po-table-group-row\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n    }\n\n    @if (hasMainColumns) {\n      @for (row of filteredItems; track trackBy(rowIndex); let rowIndex = $index) {\n        <tbody class=\"po-table-group-row\">\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                [ngClass]=\"getClassColor(row, column)\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    }\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped,\n        'po-table-data-fixed-columns': applyFixedColumns(),\n        'po-table-text-wrap-enabled': textWrap\n      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead\n        class=\"po-table-header-sticky\"\n        [style.top]=\"inverseOfTranslation\"\n        [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n      >\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @if (hasSelectableColumn) {\n            <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n              <div [class.po-table-header-fixed-inner]=\"height\">\n                @if (!hideSelectAll) {\n                  <po-checkbox\n                    name=\"selectAll\"\n                    (p-change)=\"selectAllRows()\"\n                    [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                    [p-size]=\"componentsSize\"\n                  ></po-checkbox>\n                }\n              </div>\n            </th>\n          }\n\n          @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n            <th\n              #columnActionLeft\n              [class.po-table-header-master-detail]=\"!isSingleAction\"\n              [class.po-table-header-single-action]=\"isSingleAction\"\n            ></th>\n          }\n\n          @if (!hasMainColumns) {\n            <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n              @if (height) {\n                <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n                </div>\n              } @else {\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              }\n            </th>\n          }\n\n          @if (this.isDraggable || hasSomeFixed()) {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                [class.po-table-column-drag-box]=\"this.isDraggable\"\n                (click)=\"sortColumn(column)\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  @if (this.isDraggable && !column.fixed) {\n                    <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                  }\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          } @else {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                (click)=\"sortColumn(column)\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          }\n\n          @if (hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          @if (\n            hasVisibleActions &&\n            actionRight &&\n            hasItems &&\n            hasMainColumns &&\n            (visibleActions.length > 1 || isSingleAction)\n          ) {\n            <th\n              [class.po-table-header-single-action]=\"isSingleAction\"\n              [class.po-table-header-actions]=\"!isSingleAction\"\n            ></th>\n          }\n        </tr>\n      </thead>\n\n      @if (!hasItems || !hasMainColumns) {\n        <tbody class=\"po-table-group-row\">\n          <tr class=\"po-table-row po-table-row-no-data\">\n            <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n              <span> {{ literals.noData }} </span>\n            </td>\n          </tr>\n        </tbody>\n      }\n\n      @if (hasMainColumns) {\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [ngClass]=\"getClassColor(row, column)\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if ((containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)) {\n    <po-icon [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\" class=\"po-clickable\"> </po-icon>\n  }\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio\n    [name]=\"idRadio\"\n    [p-checked]=\"row.$selected\"\n    [p-size]=\"componentsSize\"\n    (p-change-selected)=\"selectRow(row)\"\n  ></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n    [p-size]=\"componentsSize\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  @if (sort && column.sortable !== false) {\n    <span\n      [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n      [class.po-table-header-icon-descending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n      \"\n      [class.po-table-header-icon-ascending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n      \"\n    >\n      @if (JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)) {\n        <po-icon p-icon=\"ICON_SORT\"></po-icon>\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending) {\n        <po-icon p-icon=\"ICON_SORT_ASC\"></po-icon>\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending) {\n        <po-icon cdkDragHandle p-icon=\"ICON_SORT_DESC\"></po-icon>\n      }\n    </span>\n  }\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if (isSingleAction) {\n    <td\n      class=\"po-table-column po-table-column-single-action\"\n      [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n      [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n      [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    >\n      @if (firstAction.visible !== false) {\n        <div\n          class=\"po-table-single-action po-clickable\"\n          [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n          (click)=\"executeTableAction(row, firstAction)\"\n        >\n          @if (firstAction.icon) {\n            <po-icon class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n          }\n          @if (firstAction.label) {\n            <span>{{ firstAction.label }}</span>\n          }\n        </div>\n      }\n    </td>\n  }\n\n  @if (visibleActions.length > 1) {\n    <td class=\"po-table-column-actions\">\n      <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n        <po-icon class=\"po-field-icon\" p-icon=\"ICON_MORE\"></po-icon>\n      </div>\n    </td>\n  }\n</ng-template>\n\n@if (!hideColumnsManager) {\n  <po-table-column-manager\n    [p-columns]=\"columns\"\n    [p-max-columns]=\"maxColumns\"\n    [p-target]=\"columnManagerTarget\"\n    [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n    [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n    (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n    (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n    [p-columns-default]=\"initialColumns\"\n    [p-components-size]=\"componentsSize\"\n    (p-initial-columns)=\"onColumnRestoreManager($event)\"\n  >\n  </po-table-column-manager>\n}\n\n<po-modal\n  #modalDelete\n  [p-components-size]=\"componentsSize\"\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i5.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoRadioComponent, selector: "po-radio", inputs: ["p-value", "p-size", "p-required", "p-label-text-wrap", "p-checked"], outputs: ["p-blur", "p-change-selected"] }, { kind: "component", type: PoSearchComponent, selector: "po-search" }, { kind: "component", type: PoTableColumnIconComponent, selector: "po-table-column-icon", inputs: ["p-column", "p-row", "p-icons"] }, { kind: "component", type: PoTableColumnLabelComponent, selector: "po-table-column-label", inputs: ["p-value"] }, { kind: "component", type: PoTableColumnLinkComponent, selector: "po-table-column-link", inputs: ["p-action", "p-disabled", "p-link", "p-open-new-tab", "p-row", "p-value"] }, { kind: "component", type: PoTableColumnManagerComponent, selector: "po-table-column-manager", inputs: ["p-columns", "p-target", "p-columns-default", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-components-size", "p-max-columns"], outputs: ["p-visible-columns-change", "p-change-visible-columns", "p-initial-columns"] }, { kind: "component", type: PoTableDetailComponent, selector: "po-table-detail", inputs: ["p-components-size", "p-items", "p-parent-row", "p-selectable", "p-detail"], outputs: ["p-select-row"] }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }, { kind: "component", type: PoTableSubtitleFooterComponent, selector: "po-table-subtitle-footer", inputs: ["p-components-size", "p-literals", "p-subtitles"] }, { kind: "directive", type: PoTableColumnFrozenDirective, selector: "[pFrozenColumn]", inputs: ["pFrozenColumn", "alignFrozen"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PoTimePipe, name: "po_time" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoTableComponent, isStandalone: false, selector: "po-table", providers: [PoDateService, PoTableService], queries: [{ propertyName: "tableRowTemplate", first: true, predicate: PoTableRowTemplateDirective, descendants: true, static: true }, { propertyName: "tableCellTemplate", first: true, predicate: PoTableCellTemplateDirective, descendants: true }, { propertyName: "tableColumnTemplates", predicate: PoTableColumnTemplateDirective }], viewQueries: [{ propertyName: "noColumnsHeader", first: true, predicate: ["noColumnsHeader"], descendants: true, read: ElementRef }, { propertyName: "poPopupComponent", first: true, predicate: ["popup"], descendants: true }, { propertyName: "modalDelete", first: true, predicate: PoModalComponent, descendants: true, static: true }, { propertyName: "tableFooterElement", first: true, predicate: ["tableFooter"], descendants: true, read: ElementRef }, { propertyName: "tableWrapperElement", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef }, { propertyName: "tableTemplate", first: true, predicate: ["tableTemplate"], descendants: true, read: ElementRef }, { propertyName: "tableVirtualScroll", first: true, predicate: ["tableVirtualScroll"], descendants: true, read: ElementRef }, { propertyName: "tableScrollable", first: true, predicate: ["tableScrollable"], descendants: true, read: ElementRef }, { propertyName: "columnManager", first: true, predicate: ["columnManager"], descendants: true, read: ElementRef }, { propertyName: "columnBatchActions", first: true, predicate: ["columnBatchActions"], descendants: true, read: ElementRef }, { propertyName: "columnActionLeft", first: true, predicate: ["columnActionLeft"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "columnManagerTarget", first: true, predicate: ["columnManagerTarget"], descendants: true }, { propertyName: "columnManagerTargetFixed", first: true, predicate: ["columnManagerTargetFixed"], descendants: true }, { propertyName: "actionsIconElement", predicate: ["actionsIconElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-table-actions\">\n  @if (hasValidColumns && itemsSelected.length > 0 && !hideBatchActions) {\n    <div #columnBatchActions class=\"po-table-actions-batch-actions\">\n      <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n        <strong>\n          <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n          <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n          <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n        </strong>\n      </div>\n      <div class=\"po-table-actions-batch-actions__buttons\">\n        <po-button\n          p-icon=\"ICON_DELETE\"\n          [p-danger]=\"true\"\n          [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n          [p-label]=\"literals.delete\"\n          [p-size]=\"componentsSize\"\n          (p-click)=\"modalDelete.open()\"\n        ></po-button>\n      </div>\n    </div>\n  }\n\n  @if (hasValidColumns && !hideColumnsManager) {\n    <div #columnManager class=\"po-table-actions-column-manager\">\n      <po-button\n        #columnManagerTarget\n        p-icon=\"ICON_SETTINGS\"\n        p-kind=\"tertiary\"\n        p-tooltip-position=\"left\"\n        [p-aria-label]=\"literals.columnsManager\"\n        [p-tooltip]=\"literals.columnsManager\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"onOpenColumnManager()\"\n      ></po-button>\n    </div>\n  }\n\n  @if (!hideTableSearch && hasValidColumns) {\n    <div class=\"po-table-search\">\n      <po-search\n        [p-items]=\"items\"\n        [p-filter-keys]=\"filteredColumns\"\n        [p-filter-type]=\"filterType\"\n        [p-size]=\"componentsSize\"\n        (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n      >\n      </po-search>\n    </div>\n  }\n</div>\n@if (container) {\n  <po-container p-no-padding>\n    <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n  </po-container>\n} @else {\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n}\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Show More Button -->\n@if (!infiniteScroll) {\n  <div\n    class=\"po-row po-table-footer-show-more\"\n    [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n    #tableFooter\n  >\n    <po-button\n      class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-loading]=\"loadingShowMore\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    #tableScrollable\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped,\n      'po-table-data-fixed-columns': applyFixedColumns(),\n      'po-table-text-wrap-enabled': textWrap\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead\n      [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\"\n      [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n    >\n      <tr\n        [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        @if (hasSelectableColumn) {\n          <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              @if (!hideSelectAll) {\n                <po-checkbox\n                  name=\"selectAll\"\n                  [p-size]=\"componentsSize\"\n                  (p-change)=\"selectAllRows()\"\n                  [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                ></po-checkbox>\n              }\n            </div>\n          </th>\n        }\n\n        @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n          <th\n            #columnActionLeft\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n        }\n\n        @if (!hasMainColumns) {\n          <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n            @if (height) {\n              <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              </div>\n            } @else {\n              {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n            }\n          </th>\n        }\n\n        @if (this.isDraggable || hasSomeFixed()) {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                @if (this.isDraggable && !column.fixed) {\n                  <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        } @else {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        }\n\n        @if (hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        @if (\n          hasVisibleActions &&\n          actionRight &&\n          hasItems &&\n          hasMainColumns &&\n          (visibleActions.length > 1 || isSingleAction)\n        ) {\n          <th\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        }\n      </tr>\n    </thead>\n\n    @if (!hasItems || !hasMainColumns) {\n      <tbody class=\"po-table-group-row\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n    }\n\n    @if (hasMainColumns) {\n      @for (row of filteredItems; track trackBy(rowIndex); let rowIndex = $index) {\n        <tbody class=\"po-table-group-row\">\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                [ngClass]=\"getClassColor(row, column)\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    }\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped,\n        'po-table-data-fixed-columns': applyFixedColumns(),\n        'po-table-text-wrap-enabled': textWrap\n      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead\n        class=\"po-table-header-sticky\"\n        [style.top]=\"inverseOfTranslation\"\n        [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n      >\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @if (hasSelectableColumn) {\n            <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n              <div [class.po-table-header-fixed-inner]=\"height\">\n                @if (!hideSelectAll) {\n                  <po-checkbox\n                    name=\"selectAll\"\n                    (p-change)=\"selectAllRows()\"\n                    [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                    [p-size]=\"componentsSize\"\n                  ></po-checkbox>\n                }\n              </div>\n            </th>\n          }\n\n          @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n            <th\n              #columnActionLeft\n              [class.po-table-header-master-detail]=\"!isSingleAction\"\n              [class.po-table-header-single-action]=\"isSingleAction\"\n            ></th>\n          }\n\n          @if (!hasMainColumns) {\n            <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n              @if (height) {\n                <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n                </div>\n              } @else {\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              }\n            </th>\n          }\n\n          @if (this.isDraggable || hasSomeFixed()) {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                [class.po-table-column-drag-box]=\"this.isDraggable\"\n                (click)=\"sortColumn(column)\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  @if (this.isDraggable && !column.fixed) {\n                    <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                  }\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          } @else {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                (click)=\"sortColumn(column)\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          }\n\n          @if (hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          @if (\n            hasVisibleActions &&\n            actionRight &&\n            hasItems &&\n            hasMainColumns &&\n            (visibleActions.length > 1 || isSingleAction)\n          ) {\n            <th\n              [class.po-table-header-single-action]=\"isSingleAction\"\n              [class.po-table-header-actions]=\"!isSingleAction\"\n            ></th>\n          }\n        </tr>\n      </thead>\n\n      @if (!hasItems || !hasMainColumns) {\n        <tbody class=\"po-table-group-row\">\n          <tr class=\"po-table-row po-table-row-no-data\">\n            <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n              <span> {{ literals.noData }} </span>\n            </td>\n          </tr>\n        </tbody>\n      }\n\n      @if (hasMainColumns) {\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [ngClass]=\"getClassColor(row, column)\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if ((containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)) {\n    <po-icon [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\" class=\"po-clickable\"> </po-icon>\n  }\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio\n    [name]=\"idRadio\"\n    [p-checked]=\"row.$selected\"\n    [p-size]=\"componentsSize\"\n    (p-change-selected)=\"selectRow(row)\"\n  ></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n    [p-size]=\"componentsSize\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  @if (sort && column.sortable !== false) {\n    <span\n      [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n      [class.po-table-header-icon-descending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n      \"\n      [class.po-table-header-icon-ascending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n      \"\n    >\n      @if (JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)) {\n        <po-icon p-icon=\"ICON_SORT\"></po-icon>\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending) {\n        <po-icon p-icon=\"ICON_SORT_ASC\"></po-icon>\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending) {\n        <po-icon cdkDragHandle p-icon=\"ICON_SORT_DESC\"></po-icon>\n      }\n    </span>\n  }\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if (isSingleAction) {\n    <td\n      class=\"po-table-column po-table-column-single-action\"\n      [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n      [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n      [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    >\n      @if (firstAction.visible !== false) {\n        <div\n          class=\"po-table-single-action po-clickable\"\n          [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n          (click)=\"executeTableAction(row, firstAction)\"\n        >\n          @if (firstAction.icon) {\n            <po-icon class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n          }\n          @if (firstAction.label) {\n            <span>{{ firstAction.label }}</span>\n          }\n        </div>\n      }\n    </td>\n  }\n\n  @if (visibleActions.length > 1) {\n    <td class=\"po-table-column-actions\">\n      <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n        <po-icon class=\"po-field-icon\" p-icon=\"ICON_MORE\"></po-icon>\n      </div>\n    </td>\n  }\n</ng-template>\n\n@if (!hideColumnsManager) {\n  <po-table-column-manager\n    [p-columns]=\"columns\"\n    [p-max-columns]=\"maxColumns\"\n    [p-target]=\"columnManagerTarget\"\n    [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n    [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n    (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n    (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n    (p-change-fixed-columns)=\"onChangeFixedColumns($event)\"\n    [p-columns-default]=\"initialColumns\"\n    [p-components-size]=\"componentsSize\"\n    (p-initial-columns)=\"onColumnRestoreManager($event)\"\n  >\n  </po-table-column-manager>\n}\n\n<po-modal\n  #modalDelete\n  [p-components-size]=\"componentsSize\"\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i5.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoRadioComponent, selector: "po-radio", inputs: ["p-value", "p-size", "p-required", "p-label-text-wrap", "p-checked"], outputs: ["p-blur", "p-change-selected"] }, { kind: "component", type: PoSearchComponent, selector: "po-search" }, { kind: "component", type: PoTableColumnIconComponent, selector: "po-table-column-icon", inputs: ["p-column", "p-row", "p-icons"] }, { kind: "component", type: PoTableColumnLabelComponent, selector: "po-table-column-label", inputs: ["p-value"] }, { kind: "component", type: PoTableColumnLinkComponent, selector: "po-table-column-link", inputs: ["p-action", "p-disabled", "p-link", "p-open-new-tab", "p-row", "p-value"] }, { kind: "component", type: PoTableColumnManagerComponent, selector: "po-table-column-manager", inputs: ["p-columns", "p-target", "p-columns-default", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-components-size", "p-max-columns"], outputs: ["p-visible-columns-change", "p-change-visible-columns", "p-change-fixed-columns", "p-initial-columns"] }, { kind: "component", type: PoTableDetailComponent, selector: "po-table-detail", inputs: ["p-components-size", "p-items", "p-parent-row", "p-selectable", "p-detail"], outputs: ["p-select-row"] }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }, { kind: "component", type: PoTableSubtitleFooterComponent, selector: "po-table-subtitle-footer", inputs: ["p-components-size", "p-literals", "p-subtitles"] }, { kind: "directive", type: PoTableColumnFrozenDirective, selector: "[pFrozenColumn]", inputs: ["pFrozenColumn", "alignFrozen"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PoTimePipe, name: "po_time" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-table', providers: [PoDateService, PoTableService], standalone: false, template: "<div class=\"po-table-actions\">\n  @if (hasValidColumns && itemsSelected.length > 0 && !hideBatchActions) {\n    <div #columnBatchActions class=\"po-table-actions-batch-actions\">\n      <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n        <strong>\n          <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n          <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n          <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n        </strong>\n      </div>\n      <div class=\"po-table-actions-batch-actions__buttons\">\n        <po-button\n          p-icon=\"ICON_DELETE\"\n          [p-danger]=\"true\"\n          [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n          [p-label]=\"literals.delete\"\n          [p-size]=\"componentsSize\"\n          (p-click)=\"modalDelete.open()\"\n        ></po-button>\n      </div>\n    </div>\n  }\n\n  @if (hasValidColumns && !hideColumnsManager) {\n    <div #columnManager class=\"po-table-actions-column-manager\">\n      <po-button\n        #columnManagerTarget\n        p-icon=\"ICON_SETTINGS\"\n        p-kind=\"tertiary\"\n        p-tooltip-position=\"left\"\n        [p-aria-label]=\"literals.columnsManager\"\n        [p-tooltip]=\"literals.columnsManager\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"onOpenColumnManager()\"\n      ></po-button>\n    </div>\n  }\n\n  @if (!hideTableSearch && hasValidColumns) {\n    <div class=\"po-table-search\">\n      <po-search\n        [p-items]=\"items\"\n        [p-filter-keys]=\"filteredColumns\"\n        [p-filter-type]=\"filterType\"\n        [p-size]=\"componentsSize\"\n        (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n      >\n      </po-search>\n    </div>\n  }\n</div>\n@if (container) {\n  <po-container p-no-padding>\n    <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n  </po-container>\n} @else {\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n}\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Show More Button -->\n@if (!infiniteScroll) {\n  <div\n    class=\"po-row po-table-footer-show-more\"\n    [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n    #tableFooter\n  >\n    <po-button\n      class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-loading]=\"loadingShowMore\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    #tableScrollable\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped,\n      'po-table-data-fixed-columns': applyFixedColumns(),\n      'po-table-text-wrap-enabled': textWrap\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead\n      [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\"\n      [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n    >\n      <tr\n        [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        @if (hasSelectableColumn) {\n          <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              @if (!hideSelectAll) {\n                <po-checkbox\n                  name=\"selectAll\"\n                  [p-size]=\"componentsSize\"\n                  (p-change)=\"selectAllRows()\"\n                  [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                ></po-checkbox>\n              }\n            </div>\n          </th>\n        }\n\n        @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n          <th\n            #columnActionLeft\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n        }\n\n        @if (!hasMainColumns) {\n          <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n            @if (height) {\n              <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              </div>\n            } @else {\n              {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n            }\n          </th>\n        }\n\n        @if (this.isDraggable || hasSomeFixed()) {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                @if (this.isDraggable && !column.fixed) {\n                  <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        } @else {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        }\n\n        @if (hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        @if (\n          hasVisibleActions &&\n          actionRight &&\n          hasItems &&\n          hasMainColumns &&\n          (visibleActions.length > 1 || isSingleAction)\n        ) {\n          <th\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        }\n      </tr>\n    </thead>\n\n    @if (!hasItems || !hasMainColumns) {\n      <tbody class=\"po-table-group-row\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n    }\n\n    @if (hasMainColumns) {\n      @for (row of filteredItems; track trackBy(rowIndex); let rowIndex = $index) {\n        <tbody class=\"po-table-group-row\">\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                [ngClass]=\"getClassColor(row, column)\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    }\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped,\n        'po-table-data-fixed-columns': applyFixedColumns(),\n        'po-table-text-wrap-enabled': textWrap\n      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead\n        class=\"po-table-header-sticky\"\n        [style.top]=\"inverseOfTranslation\"\n        [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n      >\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @if (hasSelectableColumn) {\n            <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n              <div [class.po-table-header-fixed-inner]=\"height\">\n                @if (!hideSelectAll) {\n                  <po-checkbox\n                    name=\"selectAll\"\n                    (p-change)=\"selectAllRows()\"\n                    [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                    [p-size]=\"componentsSize\"\n                  ></po-checkbox>\n                }\n              </div>\n            </th>\n          }\n\n          @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n            <th\n              #columnActionLeft\n              [class.po-table-header-master-detail]=\"!isSingleAction\"\n              [class.po-table-header-single-action]=\"isSingleAction\"\n            ></th>\n          }\n\n          @if (!hasMainColumns) {\n            <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n              @if (height) {\n                <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n                </div>\n              } @else {\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              }\n            </th>\n          }\n\n          @if (this.isDraggable || hasSomeFixed()) {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                [class.po-table-column-drag-box]=\"this.isDraggable\"\n                (click)=\"sortColumn(column)\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  @if (this.isDraggable && !column.fixed) {\n                    <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                  }\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          } @else {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                (click)=\"sortColumn(column)\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          }\n\n          @if (hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          @if (\n            hasVisibleActions &&\n            actionRight &&\n            hasItems &&\n            hasMainColumns &&\n            (visibleActions.length > 1 || isSingleAction)\n          ) {\n            <th\n              [class.po-table-header-single-action]=\"isSingleAction\"\n              [class.po-table-header-actions]=\"!isSingleAction\"\n            ></th>\n          }\n        </tr>\n      </thead>\n\n      @if (!hasItems || !hasMainColumns) {\n        <tbody class=\"po-table-group-row\">\n          <tr class=\"po-table-row po-table-row-no-data\">\n            <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n              <span> {{ literals.noData }} </span>\n            </td>\n          </tr>\n        </tbody>\n      }\n\n      @if (hasMainColumns) {\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [ngClass]=\"getClassColor(row, column)\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if ((containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)) {\n    <po-icon [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\" class=\"po-clickable\"> </po-icon>\n  }\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio\n    [name]=\"idRadio\"\n    [p-checked]=\"row.$selected\"\n    [p-size]=\"componentsSize\"\n    (p-change-selected)=\"selectRow(row)\"\n  ></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n    [p-size]=\"componentsSize\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  @if (sort && column.sortable !== false) {\n    <span\n      [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n      [class.po-table-header-icon-descending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n      \"\n      [class.po-table-header-icon-ascending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n      \"\n    >\n      @if (JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)) {\n        <po-icon p-icon=\"ICON_SORT\"></po-icon>\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending) {\n        <po-icon p-icon=\"ICON_SORT_ASC\"></po-icon>\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending) {\n        <po-icon cdkDragHandle p-icon=\"ICON_SORT_DESC\"></po-icon>\n      }\n    </span>\n  }\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if (isSingleAction) {\n    <td\n      class=\"po-table-column po-table-column-single-action\"\n      [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n      [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n      [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    >\n      @if (firstAction.visible !== false) {\n        <div\n          class=\"po-table-single-action po-clickable\"\n          [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n          (click)=\"executeTableAction(row, firstAction)\"\n        >\n          @if (firstAction.icon) {\n            <po-icon class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n          }\n          @if (firstAction.label) {\n            <span>{{ firstAction.label }}</span>\n          }\n        </div>\n      }\n    </td>\n  }\n\n  @if (visibleActions.length > 1) {\n    <td class=\"po-table-column-actions\">\n      <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n        <po-icon class=\"po-field-icon\" p-icon=\"ICON_MORE\"></po-icon>\n      </div>\n    </td>\n  }\n</ng-template>\n\n@if (!hideColumnsManager) {\n  <po-table-column-manager\n    [p-columns]=\"columns\"\n    [p-max-columns]=\"maxColumns\"\n    [p-target]=\"columnManagerTarget\"\n    [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n    [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n    (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n    (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n    [p-columns-default]=\"initialColumns\"\n    [p-components-size]=\"componentsSize\"\n    (p-initial-columns)=\"onColumnRestoreManager($event)\"\n  >\n  </po-table-column-manager>\n}\n\n<po-modal\n  #modalDelete\n  [p-components-size]=\"componentsSize\"\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n" }]
+            args: [{ selector: 'po-table', providers: [PoDateService, PoTableService], standalone: false, template: "<div class=\"po-table-actions\">\n  @if (hasValidColumns && itemsSelected.length > 0 && !hideBatchActions) {\n    <div #columnBatchActions class=\"po-table-actions-batch-actions\">\n      <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n        <strong>\n          <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n          <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n          <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n        </strong>\n      </div>\n      <div class=\"po-table-actions-batch-actions__buttons\">\n        <po-button\n          p-icon=\"ICON_DELETE\"\n          [p-danger]=\"true\"\n          [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n          [p-label]=\"literals.delete\"\n          [p-size]=\"componentsSize\"\n          (p-click)=\"modalDelete.open()\"\n        ></po-button>\n      </div>\n    </div>\n  }\n\n  @if (hasValidColumns && !hideColumnsManager) {\n    <div #columnManager class=\"po-table-actions-column-manager\">\n      <po-button\n        #columnManagerTarget\n        p-icon=\"ICON_SETTINGS\"\n        p-kind=\"tertiary\"\n        p-tooltip-position=\"left\"\n        [p-aria-label]=\"literals.columnsManager\"\n        [p-tooltip]=\"literals.columnsManager\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"onOpenColumnManager()\"\n      ></po-button>\n    </div>\n  }\n\n  @if (!hideTableSearch && hasValidColumns) {\n    <div class=\"po-table-search\">\n      <po-search\n        [p-items]=\"items\"\n        [p-filter-keys]=\"filteredColumns\"\n        [p-filter-type]=\"filterType\"\n        [p-size]=\"componentsSize\"\n        (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n      >\n      </po-search>\n    </div>\n  }\n</div>\n@if (container) {\n  <po-container p-no-padding>\n    <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n  </po-container>\n} @else {\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n}\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Show More Button -->\n@if (!infiniteScroll) {\n  <div\n    class=\"po-row po-table-footer-show-more\"\n    [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n    #tableFooter\n  >\n    <po-button\n      class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-loading]=\"loadingShowMore\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    #tableScrollable\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped,\n      'po-table-data-fixed-columns': applyFixedColumns(),\n      'po-table-text-wrap-enabled': textWrap\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead\n      [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\"\n      [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n    >\n      <tr\n        [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        @if (hasSelectableColumn) {\n          <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              @if (!hideSelectAll) {\n                <po-checkbox\n                  name=\"selectAll\"\n                  [p-size]=\"componentsSize\"\n                  (p-change)=\"selectAllRows()\"\n                  [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                ></po-checkbox>\n              }\n            </div>\n          </th>\n        }\n\n        @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n          <th\n            #columnActionLeft\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n        }\n\n        @if (!hasMainColumns) {\n          <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n            @if (height) {\n              <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              </div>\n            } @else {\n              {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n            }\n          </th>\n        }\n\n        @if (this.isDraggable || hasSomeFixed()) {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                @if (this.isDraggable && !column.fixed) {\n                  <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        } @else {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        }\n\n        @if (hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        @if (\n          hasVisibleActions &&\n          actionRight &&\n          hasItems &&\n          hasMainColumns &&\n          (visibleActions.length > 1 || isSingleAction)\n        ) {\n          <th\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        }\n      </tr>\n    </thead>\n\n    @if (!hasItems || !hasMainColumns) {\n      <tbody class=\"po-table-group-row\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n    }\n\n    @if (hasMainColumns) {\n      @for (row of filteredItems; track trackBy(rowIndex); let rowIndex = $index) {\n        <tbody class=\"po-table-group-row\">\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                [ngClass]=\"getClassColor(row, column)\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    }\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped,\n        'po-table-data-fixed-columns': applyFixedColumns(),\n        'po-table-text-wrap-enabled': textWrap\n      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead\n        class=\"po-table-header-sticky\"\n        [style.top]=\"inverseOfTranslation\"\n        [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n      >\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @if (hasSelectableColumn) {\n            <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n              <div [class.po-table-header-fixed-inner]=\"height\">\n                @if (!hideSelectAll) {\n                  <po-checkbox\n                    name=\"selectAll\"\n                    (p-change)=\"selectAllRows()\"\n                    [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                    [p-size]=\"componentsSize\"\n                  ></po-checkbox>\n                }\n              </div>\n            </th>\n          }\n\n          @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n            <th\n              #columnActionLeft\n              [class.po-table-header-master-detail]=\"!isSingleAction\"\n              [class.po-table-header-single-action]=\"isSingleAction\"\n            ></th>\n          }\n\n          @if (!hasMainColumns) {\n            <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n              @if (height) {\n                <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n                </div>\n              } @else {\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              }\n            </th>\n          }\n\n          @if (this.isDraggable || hasSomeFixed()) {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                [class.po-table-column-drag-box]=\"this.isDraggable\"\n                (click)=\"sortColumn(column)\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  @if (this.isDraggable && !column.fixed) {\n                    <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                  }\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          } @else {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                (click)=\"sortColumn(column)\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          }\n\n          @if (hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          @if (\n            hasVisibleActions &&\n            actionRight &&\n            hasItems &&\n            hasMainColumns &&\n            (visibleActions.length > 1 || isSingleAction)\n          ) {\n            <th\n              [class.po-table-header-single-action]=\"isSingleAction\"\n              [class.po-table-header-actions]=\"!isSingleAction\"\n            ></th>\n          }\n        </tr>\n      </thead>\n\n      @if (!hasItems || !hasMainColumns) {\n        <tbody class=\"po-table-group-row\">\n          <tr class=\"po-table-row po-table-row-no-data\">\n            <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n              <span> {{ literals.noData }} </span>\n            </td>\n          </tr>\n        </tbody>\n      }\n\n      @if (hasMainColumns) {\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [ngClass]=\"getClassColor(row, column)\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if ((containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)) {\n    <po-icon [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\" class=\"po-clickable\"> </po-icon>\n  }\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio\n    [name]=\"idRadio\"\n    [p-checked]=\"row.$selected\"\n    [p-size]=\"componentsSize\"\n    (p-change-selected)=\"selectRow(row)\"\n  ></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n    [p-size]=\"componentsSize\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  @if (sort && column.sortable !== false) {\n    <span\n      [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n      [class.po-table-header-icon-descending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n      \"\n      [class.po-table-header-icon-ascending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n      \"\n    >\n      @if (JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)) {\n        <po-icon p-icon=\"ICON_SORT\"></po-icon>\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending) {\n        <po-icon p-icon=\"ICON_SORT_ASC\"></po-icon>\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending) {\n        <po-icon cdkDragHandle p-icon=\"ICON_SORT_DESC\"></po-icon>\n      }\n    </span>\n  }\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if (isSingleAction) {\n    <td\n      class=\"po-table-column po-table-column-single-action\"\n      [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n      [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n      [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    >\n      @if (firstAction.visible !== false) {\n        <div\n          class=\"po-table-single-action po-clickable\"\n          [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n          (click)=\"executeTableAction(row, firstAction)\"\n        >\n          @if (firstAction.icon) {\n            <po-icon class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n          }\n          @if (firstAction.label) {\n            <span>{{ firstAction.label }}</span>\n          }\n        </div>\n      }\n    </td>\n  }\n\n  @if (visibleActions.length > 1) {\n    <td class=\"po-table-column-actions\">\n      <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n        <po-icon class=\"po-field-icon\" p-icon=\"ICON_MORE\"></po-icon>\n      </div>\n    </td>\n  }\n</ng-template>\n\n@if (!hideColumnsManager) {\n  <po-table-column-manager\n    [p-columns]=\"columns\"\n    [p-max-columns]=\"maxColumns\"\n    [p-target]=\"columnManagerTarget\"\n    [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n    [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n    (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n    (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n    (p-change-fixed-columns)=\"onChangeFixedColumns($event)\"\n    [p-columns-default]=\"initialColumns\"\n    [p-components-size]=\"componentsSize\"\n    (p-initial-columns)=\"onColumnRestoreManager($event)\"\n  >\n  </po-table-column-manager>\n}\n\n<po-modal\n  #modalDelete\n  [p-components-size]=\"componentsSize\"\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n" }]
         }], ctorParameters: () => [{ type: PoDateService }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: i1.DecimalPipe }, { type: PoTableService }], propDecorators: { tableRowTemplate: [{
                 type: ContentChild,
                 args: [PoTableRowTemplateDirective, { static: true }]
@@ -43412,6 +43555,7 @@ const providers$1 = [
  * <example name="po-multiselect-template" title="PO Multiselect - Template">
  *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.html"> </file>
  *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.ts"> </file>
+ *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.css"> </file>
  * </example>
  *
  * <example name="po-multiselect-heroes" title="PO Multiselect - Heroes - using API">
@@ -48731,6 +48875,7 @@ const PO_SELECT_FIELD_VALUE_DEFAULT = 'value';
  * <example name="po-select-customer-registration" title="PO Select - Customer registration">
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.html"> </file>
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.ts"> </file>
+ *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.css"> </file>
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.service.ts"> </file>
  * </example>
  *
@@ -55930,11 +56075,13 @@ const poMenuRootLevel = 1;
  * <example name="po-menu-labs" title="PO Menu Labs">
  *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.html"> </file>
  *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.ts"> </file>
+ *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-menu-human-resources" title="PO Menu - Human Resources">
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.html"> </file>
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.ts"> </file>
+ *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.css"> </file>
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.service.ts"> </file>
  * </example>
  */
@@ -57521,6 +57668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * <example name="po-page-default-dashboard" title="PO Page Default - Dashboard">
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.html"> </file>
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.ts"> </file>
+ *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.css"> </file>
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.service.ts"> </file>
  * </example>
  */
@@ -60537,6 +60685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * <example name="po-stepper-sales" title="PO Stepper - Sales">
  *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.html"> </file>
  *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.ts"> </file>
+ *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.css"> </file>
  * </example>
  *
  * <example name="po-stepper-active" title="PO Stepper - Active">
@@ -63599,11 +63748,13 @@ const TARGET_SIZE_AA = 32;
  * <example name="po-widget-labs" title="PO Widget Labs">
  *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.html"> </file>
  *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.ts"> </file>
+ *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-widget-finance-dashboard" title="PO Widget - Finance dashboard">
  *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.html"> </file>
  *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.ts"> </file>
+ *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.css"> </file>
  * </example>
  *
  * <example name="po-widget-card" title="PO Widget - Card">