@po-ui/ng-components 21.21.0 → 21.22.0

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

@@ -29643,7 +29643,6 @@ class PoDatetimepickerBaseComponent {
     onTouchedModel = null;
     validatorChange;
     shortLanguage;
-    currentErrorPattern = signal('', ...(ngDevMode ? [{ debugName: "currentErrorPattern" }] : /* istanbul ignore next */ []));
     // --- Inputs ---
     /**
      * @optional
@@ -29712,7 +29711,7 @@ class PoDatetimepickerBaseComponent {
      *
      * Mensagem apresentada quando a data/hora for inválida ou fora do período.
      */
-    errorPattern = input('', { ...(ngDevMode ? { debugName: "errorPattern" } : /* istanbul ignore next */ {}), alias: 'p-error-pattern' });
+    errorPattern = model('', { ...(ngDevMode ? { debugName: "errorPattern" } : /* istanbul ignore next */ {}), alias: 'p-error-pattern' });
     /**
      * @optional
      *
@@ -30017,10 +30016,6 @@ class PoDatetimepickerBaseComponent {
             this._disabled = value === '' ? true : convertToBoolean(value);
             this.validateModel(this.getModelValue());
         });
-        // p-error-pattern
-        effect(() => {
-            this.currentErrorPattern.set(this.errorPattern());
-        });
         // p-locale
         effect(() => {
             const value = this.localeInput();
@@ -30137,7 +30132,9 @@ class PoDatetimepickerBaseComponent {
             this.hasValidatorRequired = true;
         }
         if (dateFailed(c.value)) {
-            this.currentErrorPattern.set(PoDatetimepickerLiterals[this.locale]?.invalidDatetime || PoDatetimepickerLiterals['pt'].invalidDatetime);
+            this.errorPattern.set(this.errorPattern() ||
+                PoDatetimepickerLiterals[this.locale]?.invalidDatetime ||
+                PoDatetimepickerLiterals['pt'].invalidDatetime);
             return { date: { valid: false } };
         }
         if (this.requiredFailed(c.value)) {
@@ -30283,10 +30280,12 @@ class PoDatetimepickerBaseComponent {
     // Formata o horário para exibição, incluindo AM/PM quando em formato 12h.
     //
     // @param time Horário no formato HH:mm ou HH:mm:ss (24h interno)
-    // @returns Horário formatado para exibição (ex: "02:30 PM" ou "14:30")
+    // @returns Horário formatado para exibição (ex: "02:30" ou "14:30")
+    // Nota: Para formato 12h, retorna apenas a parte numérica (sem AM/PM).
+    // O período é exibido no input separado gerenciado pelo componente.
     formatTimeForDisplay(time) {
         if (!time) {
-            return this.is12HourFormat ? '12:00 AM' : '00:00';
+            return this.is12HourFormat ? '12:00' : '00:00';
         }
         // Trunca segundos se showSeconds está desabilitado
         const parts = time.split(':');
@@ -30296,11 +30295,10 @@ class PoDatetimepickerBaseComponent {
         if (!this.is12HourFormat) {
             return time;
         }
-        // Converte de 24h para 12h com AM/PM
+        // Converte de 24h para 12h (sem AM/PM — o período é gerenciado separadamente)
         let hours = Number.parseInt(parts[0], 10);
         const minutes = parts[1];
         const seconds = this.showSeconds() && parts.length > 2 ? parts[2] : null;
-        const period = hours >= 12 ? 'PM' : 'AM';
         if (hours === 0) {
             hours = 12;
         }
@@ -30308,13 +30306,13 @@ class PoDatetimepickerBaseComponent {
             hours -= 12;
         }
         const hoursStr = ('0' + hours).slice(-2);
-        const timeStr = seconds ? `${hoursStr}:${minutes}:${seconds}` : `${hoursStr}:${minutes}`;
-        return `${timeStr} ${period}`;
+        return seconds ? `${hoursStr}:${minutes}:${seconds}` : `${hoursStr}:${minutes}`;
     }
     // --- Protected / Private ---
     // Constrói a máscara para o input de datetime.
-    // Formato resultante: "99/99/9999 99:99" (24h) ou "99/99/9999 99:99 AA" (12h)
-    // Com segundos: "99/99/9999 99:99:99" ou "99/99/9999 99:99:99 AA"
+    // Formato resultante: "99/99/9999 99:99" (24h e 12h)
+    // Com segundos: "99/99/9999 99:99:99"
+    // Nota: O sufixo AM/PM em formato 12h é gerenciado separadamente (não faz parte da máscara).
     buildMask(format = this.format) {
         let mask = format.toUpperCase();
         // Parte da data
@@ -30328,10 +30326,7 @@ class PoDatetimepickerBaseComponent {
         else {
             mask += ' 99:99';
         }
-        // AM/PM para formato 12h
-        if (this.is12HourFormat) {
-            mask += ' AA';
-        }
+        // AM/PM NÃO é incluído na máscara — é gerenciado como sufixo fixo no componente.
         return new PoMask(mask, true);
     }
     validateModel(value) {
@@ -30454,11 +30449,11 @@ class PoDatetimepickerBaseComponent {
         this._size = size;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PoDatetimepickerBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: PoDatetimepickerBaseComponent, isStandalone: true, inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: true, isRequired: false, transformFunction: null }, clean: { classPropertyName: "clean", publicName: "p-clean", isSignal: true, isRequired: false, transformFunction: null }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: true, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: true, isRequired: false, transformFunction: null }, errorPattern: { classPropertyName: "errorPattern", publicName: "p-error-pattern", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: true, isRequired: false, transformFunction: null }, localeInput: { classPropertyName: "localeInput", publicName: "p-locale", isSignal: true, isRequired: false, transformFunction: null }, maxDateInput: { classPropertyName: "maxDateInput", publicName: "p-max-date", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "p-max-time", isSignal: true, isRequired: false, transformFunction: null }, minDateInput: { classPropertyName: "minDateInput", publicName: "p-min-date", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "p-min-time", isSignal: true, isRequired: false, transformFunction: null }, minuteInterval: { classPropertyName: "minuteInterval", publicName: "p-minute-interval", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: true, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "p-readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "p-required", isSignal: true, isRequired: false, transformFunction: null }, secondInterval: { classPropertyName: "secondInterval", publicName: "p-second-interval", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessageRequired: { classPropertyName: "showErrorMessageRequired", publicName: "p-required-field-error-message", isSignal: true, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "p-show-seconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null }, timerFormat: { classPropertyName: "timerFormat", publicName: "p-format-time", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "p-format-date", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onblur: "p-blur", onchange: "p-change", keydown: "p-keydown" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.hostSize" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: PoDatetimepickerBaseComponent, isStandalone: true, inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: true, isRequired: false, transformFunction: null }, clean: { classPropertyName: "clean", publicName: "p-clean", isSignal: true, isRequired: false, transformFunction: null }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: true, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: true, isRequired: false, transformFunction: null }, errorPattern: { classPropertyName: "errorPattern", publicName: "p-error-pattern", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: true, isRequired: false, transformFunction: null }, localeInput: { classPropertyName: "localeInput", publicName: "p-locale", isSignal: true, isRequired: false, transformFunction: null }, maxDateInput: { classPropertyName: "maxDateInput", publicName: "p-max-date", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "p-max-time", isSignal: true, isRequired: false, transformFunction: null }, minDateInput: { classPropertyName: "minDateInput", publicName: "p-min-date", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "p-min-time", isSignal: true, isRequired: false, transformFunction: null }, minuteInterval: { classPropertyName: "minuteInterval", publicName: "p-minute-interval", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: true, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "p-readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "p-required", isSignal: true, isRequired: false, transformFunction: null }, secondInterval: { classPropertyName: "secondInterval", publicName: "p-second-interval", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessageRequired: { classPropertyName: "showErrorMessageRequired", publicName: "p-required-field-error-message", isSignal: true, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "p-show-seconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null }, timerFormat: { classPropertyName: "timerFormat", publicName: "p-format-time", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "p-format-date", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { errorPattern: "p-error-patternChange", onblur: "p-blur", onchange: "p-change", keydown: "p-keydown" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.hostSize" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PoDatetimepickerBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { appendBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-append-in-body", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-auto-focus", required: false }] }], clean: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-clean", required: false }] }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-disabled", required: false }] }], errorLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-error-limit", required: false }] }], errorPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-error-pattern", required: false }] }], help: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-help", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label", required: false }] }], labelTextWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label-text-wrap", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-loading", required: false }] }], localeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-locale", required: false }] }], maxDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-max-date", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-max-time", required: false }] }], minDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-min-date", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-min-time", required: false }] }], minuteInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-minute-interval", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], noAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-no-autocomplete", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-optional", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-placeholder", required: false }] }], poHelperComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-helper", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-required", required: false }] }], secondInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-second-interval", required: false }] }], showErrorMessageRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-required-field-error-message", required: false }] }], showRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-show-required", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-show-seconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }], timerFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-format-time", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-format-date", required: false }] }], onblur: [{
+        }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { appendBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-append-in-body", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-auto-focus", required: false }] }], clean: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-clean", required: false }] }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-disabled", required: false }] }], errorLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-error-limit", required: false }] }], errorPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-error-pattern", required: false }] }, { type: i0.Output, args: ["p-error-patternChange"] }], help: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-help", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label", required: false }] }], labelTextWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label-text-wrap", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-loading", required: false }] }], localeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-locale", required: false }] }], maxDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-max-date", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-max-time", required: false }] }], minDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-min-date", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-min-time", required: false }] }], minuteInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-minute-interval", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], noAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-no-autocomplete", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-optional", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-placeholder", required: false }] }], poHelperComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-helper", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-required", required: false }] }], secondInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-second-interval", required: false }] }], showErrorMessageRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-required-field-error-message", required: false }] }], showRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-show-required", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-show-seconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }], timerFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-format-time", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-format-date", required: false }] }], onblur: [{
                 type: Output,
                 args: ['p-blur']
             }], onchange: [{
@@ -30525,6 +30520,7 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     iconClean;
     dialogPicker;
     helperEl;
+    datetimepickerField;
     renderer = inject(Renderer2);
     cd = inject(ChangeDetectorRef);
     poCalendarService = inject(PoCalendarService);
@@ -30534,6 +30530,8 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     el;
     literals;
     visible = false;
+    currentPeriod = 'AM';
+    isInputFocused = false;
     clickListener;
     eventResizeListener;
     valueBeforeChange = '';
@@ -30590,12 +30588,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         if (!this.verifyMobile() && focusInput) {
             this.focus();
         }
-        if (!focusInput && this.isClean && this.inputEl.nativeElement.value) {
-            setTimeout(() => {
-                this.iconDatepicker.focus();
-            }, 0);
-            return;
-        }
         requestAnimationFrame(() => {
             this.iconDatepicker?.buttonElement?.nativeElement?.focus();
         });
@@ -30626,7 +30618,7 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
                 (this.showErrorMessageRequired() && (this.isRequired || this.hasValidatorRequired))));
     }
     getErrorPattern() {
-        return this.errorPattern() !== '' && this.hasInvalidClass() ? this.currentErrorPattern() : '';
+        return this.errorPattern() !== '' && this.hasInvalidClass() ? this.errorPattern() : '';
     }
     onKeyup($event) {
         if (this.isReadonly || $event?.target !== this.inputEl?.nativeElement) {
@@ -30643,11 +30635,13 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
                 this.date = undefined;
                 this.timeValue = '';
                 this.controlModel();
+                this.syncCalendarAndTimer();
             }
         }
         else {
             this.date = undefined;
             this.timeValue = '';
+            this.syncCalendarAndTimer();
         }
     }
     onKeydown($event) {
@@ -30665,9 +30659,16 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.keydown.emit($event);
         }
     }
+    onInputFocus() {
+        this.isInputFocused = true;
+    }
+    onPeriodBlur() {
+        this.isInputFocused = false;
+    }
     // Chamado ao sair do campo (blur).
     // Finaliza a edição, valida o valor e sincroniza com o calendário/timer.
     eventOnBlur($event) {
+        this.isInputFocused = false;
         this.onTouchedModel?.();
         this.objMask?.blur($event);
         this.onblur.emit();
@@ -30677,6 +30678,7 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.timeValue = '';
             this.callOnChange('');
             this.emitChangeIfDifferent('');
+            this.syncCalendarAndTimer();
             return;
         }
         const minLength = this.getExpectedInputLength();
@@ -30685,11 +30687,26 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             if (this.date && this.timeValue) {
                 this.emitChangeIfDifferent(this.getModelValue());
             }
+            else {
+                this.emitChangeIfDifferent(this.literals.invalidDatetime);
+            }
         }
         else if (inputValue) {
             this.date = undefined;
             this.timeValue = '';
             this.callOnChange(this.literals.invalidDatetime);
+            this.emitChangeIfDifferent(this.literals.invalidDatetime);
+            this.syncCalendarAndTimer();
+        }
+    }
+    eventOnButtonKeydown(event) {
+        if (event.key === 'Tab' && !event.shiftKey && this.visible) {
+            const firstCombo = this.dialogPicker?.nativeElement?.querySelector('.po-combo-first .po-combo-input');
+            if (firstCombo) {
+                event.preventDefault();
+                event.stopPropagation();
+                firstCombo.focus();
+            }
         }
     }
     // Chamado ao clicar no input.
@@ -30702,8 +30719,21 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.objMask?.click($event);
         }
     }
+    // Chamado ao clicar em qualquer parte do wrapper do campo.
+    // Foca o input principal se o clique não foi no period input ou nos ícones.
+    onFieldClick($event) {
+        if (this.isDisabled || this.isReadonly) {
+            return;
+        }
+        const target = $event.target;
+        // Se clicou no period input ou nos botões, não redireciona
+        if (target.closest('.po-datetimepicker-field-period') || target.closest('.po-field-icon-container-right')) {
+            return;
+        }
+        this.focus();
+    }
     isFocusOnFirstCombo() {
-        const first = this.dialogPicker.nativeElement.querySelector('.po-combo-first .po-combo-input');
+        const first = this.dialogPicker?.nativeElement?.querySelector('.po-combo-first .po-combo-input');
         return first === document.activeElement;
     }
     eventOnCalendarKeydown(event) {
@@ -30719,6 +30749,11 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.closeCalendar(false);
         }
     }
+    // Sobrescreve writeValue para sincronizar valueBeforeChange,
+    writeValue(value) {
+        super.writeValue(value);
+        this.valueBeforeChange = this.getModelValue();
+    }
     // Atualiza o valor exibido no input quando o model muda externamente (writeValue)
     // ou quando o locale muda em runtime.
     refreshValue(value) {
@@ -30726,6 +30761,11 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             return;
         }
         if (value && value instanceof Date && !Number.isNaN(value.getTime())) {
+            // Atualiza o período atual com base no horário armazenado (formato 24h)
+            if (this.is12HourFormat && this.timeValue) {
+                const hours = Number.parseInt(this.timeValue.split(':')[0], 10);
+                this.currentPeriod = hours >= 12 ? 'PM' : 'AM';
+            }
             this.inputEl.nativeElement.value = this.formatToDisplay(value, this.timeValue);
         }
         else if (!value) {
@@ -30780,8 +30820,8 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             return;
         }
         this.date = parsedDate;
-        // "Hoje" — hora já foi definida via p-change-time antes deste evento
-        // Emite model completo e fecha
+        // "Hoje" — hora já foi definida via p-change-time antes deste evento.
+        // Emite model completo e fecha.
         if (this.poCalendarService.isToday(parsedDate) && this.timeValue) {
             this.controlModel();
             this.refreshValue(this.date);
@@ -30789,17 +30829,33 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.closeCalendar(true);
             return;
         }
-        // Seleção normal de data — apenas atualiza o display, sem emitir model/change
+        // Se já existe hora preenchida, a seleção de data atualiza o model
+        // imediatamente mas mantém o calendário aberto para possível ajuste de hora.
+        if (this.timeValue) {
+            this.controlModel();
+            this.refreshValue(this.date);
+            this.emitChangeIfDifferent(this.getModelValue());
+            return;
+        }
+        // Seleção de data sem hora — apenas atualiza o display
         // (aguarda seleção de hora no timer para completar)
         this.refreshValue(this.date);
     }
     // Chamado ao clicar no botão de limpar (po-clean no input).
     // Limpa data, hora, input e reseta o calendário/timer.
-    clear() {
+    clear(triggeredByKeyboard = false) {
         this.date = undefined;
         this.timeValue = '';
+        this.currentPeriod = 'AM';
         this.inputEl.nativeElement.value = '';
-        this.focus();
+        if (triggeredByKeyboard) {
+            setTimeout(() => {
+                this.focus();
+            }, 200);
+        }
+        else {
+            this.focus();
+        }
         this.callOnChange('');
         this.emitChangeIfDifferent('');
         if (this.calendarComponent) {
@@ -30887,6 +30943,11 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         if (parsed) {
             this.date = parsed.date;
             this.timeValue = parsed.time;
+            // Sincroniza currentPeriod com o horário parseado (formato 24h)
+            if (this.is12HourFormat) {
+                const hours = Number.parseInt(parsed.time.split(':')[0], 10);
+                this.currentPeriod = hours >= 12 ? 'PM' : 'AM';
+            }
             this.controlModel();
             this.syncCalendarAndTimer();
         }
@@ -30950,11 +31011,10 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     }
     parse12HourTime(timeStr) {
         const periodMatch = /(AM|PM)$/i.exec(timeStr);
-        if (!periodMatch) {
-            return null;
-        }
-        const period = periodMatch[1].toUpperCase();
-        const timeOnly = timeStr.replace(/(AM|PM)/i, '').trim();
+        // Se o período está na string (ex: "02:30 PM"), usa-o diretamente.
+        // Caso contrário, usa o currentPeriod do input separado.
+        const period = periodMatch ? periodMatch[1].toUpperCase() : this.currentPeriod;
+        const timeOnly = periodMatch ? timeStr.replace(/(AM|PM)/i, '').trim() : timeStr.trim();
         const parts = timeOnly.split(':');
         if (parts.length < 2) {
             return null;
@@ -31018,26 +31078,36 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     }
     // Sincroniza o calendário e o timer com os valores internos de date e timeValue.
     syncCalendarAndTimer() {
-        if (this.calendarComponent && this.date) {
+        if (!this.calendarComponent) {
+            return;
+        }
+        if (this.date) {
             // Sincroniza o calendário com a data selecionada
             this.calendarComponent.writeValue(this.date);
             // Sincroniza o timer com o horário
             if (this.calendarComponent.timerComponent && this.timeValue) {
                 this.calendarComponent.timerComponent.writeValue(this.timeValue);
             }
+            else if (this.calendarComponent.timerComponent) {
+                this.calendarComponent.timerComponent.writeValue(null);
+            }
+        }
+        else {
+            // Sem data válida — reseta o calendário e o timer
+            this.calendarComponent.writeValue(null);
+            if (this.calendarComponent.timerComponent) {
+                this.calendarComponent.timerComponent.writeValue(null);
+            }
         }
     }
     // Retorna o comprimento mínimo esperado do input (sem formatação) para considerar completo.
     // Formato 24h: ddmmyyyyHHmm = 12 chars (ou 14 com segundos)
-    // Formato 12h: ddmmyyyyHHmmAA = 14 chars (ou 16 com segundos)
+    // Formato 12h: ddmmyyyyHHmm = 12 chars (ou 14 com segundos) — AM/PM é sufixo fixo, não conta.
     getExpectedInputLength() {
         let length = 12; // ddmmyyyy + HHmm
         if (this.showSeconds()) {
             length += 2; // ss
         }
-        if (this.is12HourFormat) {
-            length += 2; // AM/PM
-        }
         return length;
     }
     // --- Position ---
@@ -31054,7 +31124,7 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
                     this.dialogPicker.nativeElement.scrollWidth;
                 this.dialogPicker.nativeElement.style.height = scrollHeight + 'px';
                 this.dialogPicker.nativeElement.style.width = scrollWidth + 'px';
-                this.controlPosition.setElements(this.dialogPicker.nativeElement, poCalendarContentOffset$1, this.inputEl, ['top-left', 'top-right', 'bottom-left', 'bottom-right'], false, true);
+                this.controlPosition.setElements(this.dialogPicker.nativeElement, poCalendarContentOffset$1, this.datetimepickerField, ['top-left', 'top-right', 'bottom-left', 'bottom-right'], false, true);
                 this.controlPosition.adjustPosition(poCalendarPositionDefault$1);
             });
         }
@@ -31103,12 +31173,61 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.onchange.emit(value);
         }
     }
+    // --- Período AM/PM (input separado) ---
+    // Chamado quando uma tecla é pressionada no input de período AM/PM.
+    onPeriodKeydown(event) {
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (!this.isReadonly && !this.isDisabled) {
+                this.togglePeriod();
+            }
+            return;
+        }
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            event.preventDefault();
+            return;
+        }
+        // Shift+Tab: volta para o input principal
+        if (event.key === 'Tab' && event.shiftKey) {
+            event.preventDefault();
+            this.focus();
+            return;
+        }
+        // Tab: avança para o clean ou botão do calendário
+        if (event.key === 'Tab' && !event.shiftKey) {
+            // Permite o fluxo natural de tab (para clean/botão)
+            return;
+        }
+        // Bloqueia qualquer outra digitação (o período é read-only toggle)
+        if (event.key.length === 1) {
+            event.preventDefault();
+        }
+    }
+    // Chamado ao clicar no input de período AM/PM — alterna o período.
+    onPeriodClick(event) {
+        if (!this.isReadonly && !this.isDisabled) {
+            this.togglePeriod();
+        }
+    }
+    // Alterna o período entre AM e PM e atualiza o model.
+    togglePeriod() {
+        this.currentPeriod = this.currentPeriod === 'AM' ? 'PM' : 'AM';
+        // Reparse o input para atualizar o model com o novo período
+        const inputValue = this.inputEl.nativeElement.value;
+        const minLength = this.getExpectedInputLength();
+        if (this.objMask?.valueToModel && this.objMask.valueToModel.length >= minLength) {
+            this.parseInputAndSync(inputValue);
+            if (this.date && this.timeValue) {
+                this.emitChangeIfDifferent(this.getModelValue());
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PoDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PoDatetimepickerComponent, isStandalone: false, selector: "po-datetimepicker", host: { listeners: { "keyup": "onKeyup($event)", "keydown": "onKeydown($event)" } }, providers: providers$6, viewQueries: [{ propertyName: "iconDatepicker", first: true, predicate: ["iconCalendar"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, ngImport: i0, template: "@let poHelper = setHelper(label());\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label()\"\n  [p-disabled]=\"isDisabled\"\n  [p-optional]=\"optional()\"\n  [p-required]=\"isRequired\"\n  [p-show-required]=\"showRequired()\"\n  [p-helper]=\"label() ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label() ? displayAdditionalHelp : undefined\"\n  [p-size]=\"hostSize\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datetimepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datetimepicker\"\n          [class.po-input-icon-right]=\"isClean && inp.value && !isDisabled\"\n          [class.po-datetimepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || isReadonly\"\n          [attr.name]=\"name()\"\n          [attr.p-size]=\"hostSize\"\n          [id]=\"id\"\n          [autocomplete]=\"isNoAutocomplete\"\n          [disabled]=\"isDisabled\"\n          [placeholder]=\"isDisabled ? '' : placeholderValue\"\n          [readonly]=\"isReadonly\"\n          [required]=\"isRequired\"\n          [attr.data-append-in-body]=\"appendBox()\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n        />\n        @if (loading()) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(hostSize)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (isClean && dateTimeInputValue && !isDisabled && !isReadonly) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-element-ref]=\"inputEl\"\n                [p-size]=\"hostSize\"\n                (p-change-event)=\"clear()\"\n                (keydown.enter)=\"clear(); $event.preventDefault()\"\n                (keydown.space)=\"clear(); $event.preventDefault()\"\n              >\n              </po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconCalendar\n              class=\"po-datetimepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || isReadonly\"\n              [p-size]=\"hostSize\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\n        }\n      </div>\n      @if ((!this.label() && poHelperComponent()) || (!this.label() && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"hostSize\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox()\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n  </div>\n\n  @if (!isReadonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox()\"\n      [p-help]=\"help()\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit()\"\n      [p-size]=\"hostSize\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n<ng-template #sharedCalendarContent>\n  <div #dialogPicker [class.po-datetimepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n    @if (verifyMobile()) {\n      <div class=\"po-datetimepicker-calendar-overlay\"></div>\n    }\n    <po-calendar\n      #calendar\n      [class.po-datetimepicker-calendar-mobile]=\"verifyMobile()\"\n      p-mode=\"date-time\"\n      [p-size]=\"hostSize\"\n      [p-locale]=\"locale\"\n      [p-format]=\"resolvedTimerFormat\"\n      [p-min-date]=\"resolvedMinDate\"\n      [p-max-date]=\"resolvedMaxDate\"\n      [p-max-time]=\"maxTime()\"\n      [p-min-time]=\"minTime()\"\n      [p-minute-interval]=\"minuteInterval()\"\n      [p-second-interval]=\"secondInterval()\"\n      [p-show-seconds]=\"showSeconds()\"\n      (p-change)=\"onDateChange($event)\"\n      (p-change-time)=\"onTimeChange($event)\"\n      (p-change-month-year)=\"adjustCalendarPosition()\"\n      (p-timer-boundary-tab)=\"onTimerBoundaryTab($event)\"\n      (keydown)=\"eventOnCalendarKeydown($event)\"\n    ></po-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PoDatetimepickerComponent, isStandalone: false, selector: "po-datetimepicker", host: { listeners: { "keyup": "onKeyup($event)", "keydown": "onKeydown($event)" } }, providers: providers$6, viewQueries: [{ propertyName: "iconDatepicker", first: true, predicate: ["iconCalendar"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "datetimepickerField", first: true, predicate: ["datetimepickerField"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "@let poHelper = setHelper(label());\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label()\"\n  [p-disabled]=\"isDisabled\"\n  [p-optional]=\"optional()\"\n  [p-required]=\"isRequired\"\n  [p-show-required]=\"showRequired()\"\n  [p-helper]=\"label() ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label() ? displayAdditionalHelp : undefined\"\n  [p-size]=\"hostSize\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datetimepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <div\n          #datetimepickerField\n          class=\"po-datetimepicker-field po-input\"\n          [class.po-input-icon-right]=\"isClean && dateTimeInputValue && !isDisabled && !isReadonly\"\n          [class.po-datetimepicker-field-disabled]=\"isDisabled\"\n          [class.po-datetimepicker-field-readonly]=\"isReadonly\"\n          [class.po-datetimepicker-field-focused]=\"isInputFocused\"\n          [attr.data-inactive-component]=\"isDisabled || isReadonly\"\n          [attr.p-size]=\"hostSize\"\n          (keydown)=\"onFieldClick($event)\"\n          (click)=\"onFieldClick($event)\"\n        >\n          <div\n            class=\"po-datetimepicker-field-segment\"\n            [attr.data-value]=\"dateTimeInputValue || placeholderValue || '                '\"\n          >\n            <input\n              #inp\n              type=\"text\"\n              class=\"po-datetimepicker-inner-input\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name()\"\n              [id]=\"id\"\n              [autocomplete]=\"isNoAutocomplete\"\n              [disabled]=\"isDisabled\"\n              [placeholder]=\"isDisabled ? '' : placeholderValue\"\n              [readonly]=\"isReadonly\"\n              [required]=\"isRequired\"\n              [attr.data-append-in-body]=\"appendBox()\"\n              (blur)=\"eventOnBlur($event)\"\n              (click)=\"eventOnClick($event)\"\n              (focus)=\"onInputFocus()\"\n            />\n          </div>\n          @if (is12HourFormat && dateTimeInputValue) {\n            <div\n              class=\"po-datetimepicker-field-segment po-datetimepicker-field-period\"\n              [attr.data-value]=\"currentPeriod\"\n            >\n              <input\n                class=\"po-datetimepicker-segment-input po-datetimepicker-period-input\"\n                type=\"text\"\n                maxlength=\"2\"\n                readonly\n                [value]=\"currentPeriod\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || isReadonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"currentPeriod\"\n                (keydown)=\"onPeriodKeydown($event)\"\n                (click)=\"onPeriodClick($event)\"\n                (focus)=\"onInputFocus()\"\n                (blur)=\"onPeriodBlur()\"\n              />\n            </div>\n          }\n          @if (loading()) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(hostSize)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (isClean && dateTimeInputValue && !isDisabled && !isReadonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"hostSize\"\n                  (p-change-event)=\"clear()\"\n                  (keydown.enter)=\"clear(true); $event.preventDefault()\"\n                  (keydown.space)=\"clear(true); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconCalendar\n                class=\"po-datetimepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CALENDAR_DOTS\"\n                p-kind=\"tertiary\"\n                [p-disabled]=\"isDisabled || isReadonly\"\n                [p-size]=\"hostSize\"\n                (p-click)=\"togglePicker(false)\"\n                (keydown)=\"eventOnButtonKeydown($event)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label() && poHelperComponent()) || (!this.label() && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"hostSize\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox()\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n  </div>\n\n  @if (!isReadonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox()\"\n      [p-help]=\"help()\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit()\"\n      [p-size]=\"hostSize\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n<ng-template #sharedCalendarContent>\n  <div #dialogPicker [class.po-datetimepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n    @if (verifyMobile()) {\n      <div class=\"po-datetimepicker-calendar-overlay\"></div>\n    }\n    <po-calendar\n      #calendar\n      [class.po-datetimepicker-calendar-mobile]=\"verifyMobile()\"\n      p-mode=\"date-time\"\n      [p-size]=\"hostSize\"\n      [p-locale]=\"locale\"\n      [p-format]=\"resolvedTimerFormat\"\n      [p-min-date]=\"resolvedMinDate\"\n      [p-max-date]=\"resolvedMaxDate\"\n      [p-max-time]=\"maxTime()\"\n      [p-min-time]=\"minTime()\"\n      [p-minute-interval]=\"minuteInterval()\"\n      [p-second-interval]=\"secondInterval()\"\n      [p-show-seconds]=\"showSeconds()\"\n      (p-change)=\"onDateChange($event)\"\n      (p-change-time)=\"onTimeChange($event)\"\n      (p-change-month-year)=\"adjustCalendarPosition()\"\n      (p-timer-boundary-tab)=\"onTimerBoundaryTab($event)\"\n      (keydown)=\"eventOnCalendarKeydown($event)\"\n    ></po-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PoDatetimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-datetimepicker', providers: providers$6, standalone: false, template: "@let poHelper = setHelper(label());\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label()\"\n  [p-disabled]=\"isDisabled\"\n  [p-optional]=\"optional()\"\n  [p-required]=\"isRequired\"\n  [p-show-required]=\"showRequired()\"\n  [p-helper]=\"label() ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label() ? displayAdditionalHelp : undefined\"\n  [p-size]=\"hostSize\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datetimepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datetimepicker\"\n          [class.po-input-icon-right]=\"isClean && inp.value && !isDisabled\"\n          [class.po-datetimepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || isReadonly\"\n          [attr.name]=\"name()\"\n          [attr.p-size]=\"hostSize\"\n          [id]=\"id\"\n          [autocomplete]=\"isNoAutocomplete\"\n          [disabled]=\"isDisabled\"\n          [placeholder]=\"isDisabled ? '' : placeholderValue\"\n          [readonly]=\"isReadonly\"\n          [required]=\"isRequired\"\n          [attr.data-append-in-body]=\"appendBox()\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n        />\n        @if (loading()) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(hostSize)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (isClean && dateTimeInputValue && !isDisabled && !isReadonly) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-element-ref]=\"inputEl\"\n                [p-size]=\"hostSize\"\n                (p-change-event)=\"clear()\"\n                (keydown.enter)=\"clear(); $event.preventDefault()\"\n                (keydown.space)=\"clear(); $event.preventDefault()\"\n              >\n              </po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconCalendar\n              class=\"po-datetimepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || isReadonly\"\n              [p-size]=\"hostSize\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\n        }\n      </div>\n      @if ((!this.label() && poHelperComponent()) || (!this.label() && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"hostSize\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox()\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n  </div>\n\n  @if (!isReadonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox()\"\n      [p-help]=\"help()\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit()\"\n      [p-size]=\"hostSize\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n<ng-template #sharedCalendarContent>\n  <div #dialogPicker [class.po-datetimepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n    @if (verifyMobile()) {\n      <div class=\"po-datetimepicker-calendar-overlay\"></div>\n    }\n    <po-calendar\n      #calendar\n      [class.po-datetimepicker-calendar-mobile]=\"verifyMobile()\"\n      p-mode=\"date-time\"\n      [p-size]=\"hostSize\"\n      [p-locale]=\"locale\"\n      [p-format]=\"resolvedTimerFormat\"\n      [p-min-date]=\"resolvedMinDate\"\n      [p-max-date]=\"resolvedMaxDate\"\n      [p-max-time]=\"maxTime()\"\n      [p-min-time]=\"minTime()\"\n      [p-minute-interval]=\"minuteInterval()\"\n      [p-second-interval]=\"secondInterval()\"\n      [p-show-seconds]=\"showSeconds()\"\n      (p-change)=\"onDateChange($event)\"\n      (p-change-time)=\"onTimeChange($event)\"\n      (p-change-month-year)=\"adjustCalendarPosition()\"\n      (p-timer-boundary-tab)=\"onTimerBoundaryTab($event)\"\n      (keydown)=\"eventOnCalendarKeydown($event)\"\n    ></po-calendar>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'po-datetimepicker', providers: providers$6, standalone: false, template: "@let poHelper = setHelper(label());\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label()\"\n  [p-disabled]=\"isDisabled\"\n  [p-optional]=\"optional()\"\n  [p-required]=\"isRequired\"\n  [p-show-required]=\"showRequired()\"\n  [p-helper]=\"label() ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label() ? displayAdditionalHelp : undefined\"\n  [p-size]=\"hostSize\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datetimepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <div\n          #datetimepickerField\n          class=\"po-datetimepicker-field po-input\"\n          [class.po-input-icon-right]=\"isClean && dateTimeInputValue && !isDisabled && !isReadonly\"\n          [class.po-datetimepicker-field-disabled]=\"isDisabled\"\n          [class.po-datetimepicker-field-readonly]=\"isReadonly\"\n          [class.po-datetimepicker-field-focused]=\"isInputFocused\"\n          [attr.data-inactive-component]=\"isDisabled || isReadonly\"\n          [attr.p-size]=\"hostSize\"\n          (keydown)=\"onFieldClick($event)\"\n          (click)=\"onFieldClick($event)\"\n        >\n          <div\n            class=\"po-datetimepicker-field-segment\"\n            [attr.data-value]=\"dateTimeInputValue || placeholderValue || '                '\"\n          >\n            <input\n              #inp\n              type=\"text\"\n              class=\"po-datetimepicker-inner-input\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name()\"\n              [id]=\"id\"\n              [autocomplete]=\"isNoAutocomplete\"\n              [disabled]=\"isDisabled\"\n              [placeholder]=\"isDisabled ? '' : placeholderValue\"\n              [readonly]=\"isReadonly\"\n              [required]=\"isRequired\"\n              [attr.data-append-in-body]=\"appendBox()\"\n              (blur)=\"eventOnBlur($event)\"\n              (click)=\"eventOnClick($event)\"\n              (focus)=\"onInputFocus()\"\n            />\n          </div>\n          @if (is12HourFormat && dateTimeInputValue) {\n            <div\n              class=\"po-datetimepicker-field-segment po-datetimepicker-field-period\"\n              [attr.data-value]=\"currentPeriod\"\n            >\n              <input\n                class=\"po-datetimepicker-segment-input po-datetimepicker-period-input\"\n                type=\"text\"\n                maxlength=\"2\"\n                readonly\n                [value]=\"currentPeriod\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || isReadonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"currentPeriod\"\n                (keydown)=\"onPeriodKeydown($event)\"\n                (click)=\"onPeriodClick($event)\"\n                (focus)=\"onInputFocus()\"\n                (blur)=\"onPeriodBlur()\"\n              />\n            </div>\n          }\n          @if (loading()) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(hostSize)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (isClean && dateTimeInputValue && !isDisabled && !isReadonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"hostSize\"\n                  (p-change-event)=\"clear()\"\n                  (keydown.enter)=\"clear(true); $event.preventDefault()\"\n                  (keydown.space)=\"clear(true); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconCalendar\n                class=\"po-datetimepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CALENDAR_DOTS\"\n                p-kind=\"tertiary\"\n                [p-disabled]=\"isDisabled || isReadonly\"\n                [p-size]=\"hostSize\"\n                (p-click)=\"togglePicker(false)\"\n                (keydown)=\"eventOnButtonKeydown($event)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label() && poHelperComponent()) || (!this.label() && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"hostSize\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox()\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n  </div>\n\n  @if (!isReadonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox()\"\n      [p-help]=\"help()\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit()\"\n      [p-size]=\"hostSize\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n<ng-template #sharedCalendarContent>\n  <div #dialogPicker [class.po-datetimepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n    @if (verifyMobile()) {\n      <div class=\"po-datetimepicker-calendar-overlay\"></div>\n    }\n    <po-calendar\n      #calendar\n      [class.po-datetimepicker-calendar-mobile]=\"verifyMobile()\"\n      p-mode=\"date-time\"\n      [p-size]=\"hostSize\"\n      [p-locale]=\"locale\"\n      [p-format]=\"resolvedTimerFormat\"\n      [p-min-date]=\"resolvedMinDate\"\n      [p-max-date]=\"resolvedMaxDate\"\n      [p-max-time]=\"maxTime()\"\n      [p-min-time]=\"minTime()\"\n      [p-minute-interval]=\"minuteInterval()\"\n      [p-second-interval]=\"secondInterval()\"\n      [p-show-seconds]=\"showSeconds()\"\n      (p-change)=\"onDateChange($event)\"\n      (p-change-time)=\"onTimeChange($event)\"\n      (p-change-month-year)=\"adjustCalendarPosition()\"\n      (p-timer-boundary-tab)=\"onTimerBoundaryTab($event)\"\n      (keydown)=\"eventOnCalendarKeydown($event)\"\n    ></po-calendar>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { iconDatepicker: [{
                 type: ViewChild,
                 args: ['iconCalendar']
@@ -31127,6 +31246,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }], helperEl: [{
                 type: ViewChild,
                 args: ['helperEl', { read: PoHelperComponent, static: false }]
+            }], datetimepickerField: [{
+                type: ViewChild,
+                args: ['datetimepickerField', { read: ElementRef, static: true }]
             }], onKeyup: [{
                 type: HostListener,
                 args: ['keyup', ['$event']]
@@ -32074,7 +32196,8 @@ class PoTimepickerComponent extends PoTimepickerBaseComponent {
             (this.timepickerFieldEl.nativeElement.contains(relatedTarget) ||
                 dialogEl?.contains(relatedTarget) ||
                 this.iconClean?.nativeElement?.contains(relatedTarget) ||
-                this.iconTimepicker?.buttonElement?.nativeElement?.contains(relatedTarget));
+                this.iconTimepicker?.buttonElement?.nativeElement?.contains(relatedTarget) ||
+                relatedTarget.contains(this.el.nativeElement));
         if (!isStillInsideComponent) {
             this.onblur.emit();
             if (this.visible) {
@@ -39664,6 +39787,42 @@ class PoTableComponent extends PoTableBaseComponent {
         }
         return this.decimalPipe.transform(value, format);
     }
+    formatWithMask(value, mask) {
+        if (!mask || value == null || value === '') {
+            return value ?? '';
+        }
+        const rawValue = String(value).replace(/[^a-zA-Z\d]/g, '');
+        let formatted = '';
+        let rawIndex = 0;
+        for (let maskIndex = 0; maskIndex < mask.length && rawIndex < rawValue.length; maskIndex++) {
+            const maskChar = mask[maskIndex];
+            const rawChar = rawValue[rawIndex];
+            const isValid = this.isValidMaskChar(maskChar, rawChar);
+            if (isValid === true) {
+                formatted += rawChar;
+                rawIndex++;
+            }
+            else if (isValid === false) {
+                break;
+            }
+            else {
+                formatted += maskChar;
+            }
+        }
+        return formatted;
+    }
+    isValidMaskChar(maskChar, rawChar) {
+        switch (maskChar) {
+            case '9':
+                return /\d/.test(rawChar);
+            case '@':
+                return /[a-zA-Z]/.test(rawChar);
+            case 'w':
+                return /[a-zA-Z\d]/.test(rawChar);
+            default:
+                return null;
+        }
+    }
     getCellData(row, column) {
         const arrayProperty = column.property.split('.');
         if (arrayProperty.length > 1) {
@@ -40073,11 +40232,11 @@ class PoTableComponent extends PoTableBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", 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.2.17", 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: i2$1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.ɵɵ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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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>{{\n                        column.mask ? formatWithMask(getCellData(row, column), column.mask) : getCellData(row, column)\n                      }}</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>{{\n                        column.mask ? formatWithMask(getCellData(row, column), column.mask) : getCellData(row, column)\n                      }}</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: i2$1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.ɵɵ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.2.17", 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-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" }]
+            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>{{\n                        column.mask ? formatWithMask(getCellData(row, column), column.mask) : getCellData(row, column)\n                      }}</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>{{\n                        column.mask ? formatWithMask(getCellData(row, column), column.mask) : getCellData(row, column)\n                      }}</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 }]
@@ -45951,6 +46110,12 @@ const providers$2 = [
  *  <file name="sample-po-lookup-multiple/sample-po-lookup-multiple.component.ts"> </file>
  *  <file name="sample-po-lookup-multiple/sample-po-lookup-multiple.service.ts"> </file>
  * </example>
+ *
+ * <example name="po-lookup-mask" title="PO Lookup - Mask">
+ *  <file name="sample-po-lookup-mask/sample-po-lookup-mask.component.html"> </file>
+ *  <file name="sample-po-lookup-mask/sample-po-lookup-mask.component.ts"> </file>
+ *  <file name="sample-po-lookup-mask/sample-po-lookup-mask.service.ts"> </file>
+ * </example>
  */
 class PoLookupComponent extends PoLookupBaseComponent {
     renderer = inject(Renderer2);
@@ -48039,6 +48204,8 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             }
         }
         else {
+            this.visibleTags = [];
+            this.changeDetector.detectChanges();
             index = this.selectedOptions.findIndex(option => option[this.fieldValue] === value);
             this.selectedOptions.splice(index, 1);
             this.updateVisibleItems();