@po-ui/ng-components 19.18.0 → 19.20.0

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

@@ -6666,36 +6666,6 @@ var PoCheckboxSize;
     PoCheckboxSize["Large"] = "large";
 })(PoCheckboxSize || (PoCheckboxSize = {}));
 
-class PoActiveOverlayService {
-    activeOverlay = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-/**
- * @description
- *
- * Módulo do serviço `po-active-overlay`.
- */
-class PoActiveOverlayModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayModule, providers: [PoActiveOverlayService] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    providers: [PoActiveOverlayService],
-                    bootstrap: []
-                }]
-        }] });
-
 class PoColorPaletteService {
     getColor(value) {
         return Object.values(PoColorPaletteEnum).includes(value.color)
@@ -7759,6 +7729,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 args: ['p-disabled-align']
             }] } });
 
+class PoActiveOverlayService {
+    activeOverlay = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /**
  * @docsExtends PoModalBaseComponent
  *
@@ -7796,7 +7778,10 @@ class PoModalComponent extends PoModalBaseComponent {
         this.poThemeService = poThemeService;
     }
     close(xClosed = false) {
-        this.poActiveOverlayService.activeOverlay.pop();
+        if (this.poActiveOverlayService.activeOverlay.length > 0 &&
+            this.poActiveOverlayService.activeOverlay[this.poActiveOverlayService.activeOverlay.length - 1] === this.id) {
+            this.poActiveOverlayService.activeOverlay.pop();
+        }
         super.close(xClosed);
         this.removeEventListeners();
         if (this.sourceElement) {
@@ -7834,8 +7819,10 @@ class PoModalComponent extends PoModalBaseComponent {
     }
     initFocus() {
         this.focusFunction = (event) => {
+            const isCdkOverlayListbox = event.target.closest('.cdk-overlay-container') !== null;
             const modalElement = this.modalContent.nativeElement;
             if (!modalElement.contains(event.target) &&
+                !isCdkOverlayListbox &&
                 this.poActiveOverlayService.activeOverlay[this.poActiveOverlayService.activeOverlay.length - 1] === this.id) {
                 event.stopPropagation();
                 this.firstElement.focus();
@@ -8870,8 +8857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 
 class PoServicesModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoServicesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoServicesModule, declarations: [PoI18nPipe], imports: [PoActiveOverlayModule,
-            PoColorPaletteModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoServicesModule, declarations: [PoI18nPipe], imports: [PoColorPaletteModule,
             PoComponentInjectorModule,
             PoControlPositionModule,
             PoDateTimeModule,
@@ -8879,8 +8865,7 @@ class PoServicesModule {
             PoLanguageModule,
             PoMediaQueryModule,
             PoNotificationModule,
-            PoThemeModule], exports: [PoActiveOverlayModule,
-            PoColorPaletteModule,
+            PoThemeModule], exports: [PoColorPaletteModule,
             PoComponentInjectorModule,
             PoControlPositionModule,
             PoDateTimeModule,
@@ -8889,8 +8874,7 @@ class PoServicesModule {
             PoMediaQueryModule,
             PoNotificationModule,
             PoThemeModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoServicesModule, imports: [PoActiveOverlayModule,
-            PoColorPaletteModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoServicesModule, imports: [PoColorPaletteModule,
             PoComponentInjectorModule,
             PoControlPositionModule,
             PoDateTimeModule,
@@ -8898,8 +8882,7 @@ class PoServicesModule {
             PoLanguageModule,
             PoMediaQueryModule,
             PoNotificationModule,
-            PoThemeModule, PoActiveOverlayModule,
-            PoColorPaletteModule,
+            PoThemeModule, PoColorPaletteModule,
             PoComponentInjectorModule,
             PoControlPositionModule,
             PoDateTimeModule,
@@ -8913,7 +8896,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{
                     declarations: [PoI18nPipe],
                     imports: [
-                        PoActiveOverlayModule,
                         PoColorPaletteModule,
                         PoComponentInjectorModule,
                         PoControlPositionModule,
@@ -8925,7 +8907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         PoThemeModule
                     ],
                     exports: [
-                        PoActiveOverlayModule,
                         PoColorPaletteModule,
                         PoComponentInjectorModule,
                         PoControlPositionModule,
@@ -8941,6 +8922,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
+/**
+ * @description
+ *
+ * Módulo do serviço `po-active-overlay`.
+ */
+class PoActiveOverlayModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayModule, providers: [PoActiveOverlayService] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoActiveOverlayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [PoActiveOverlayService],
+                    bootstrap: []
+                }]
+        }] });
+
 const I18N_CONFIG = new InjectionToken('I18N_CONFIG');
 
 /**
@@ -8969,6 +8968,24 @@ const I18N_CONFIG = new InjectionToken('I18N_CONFIG');
  * porém, nenhuma das propriedades são obrigatórias. Caso nenhum parâmetro seja passado, serão buscadas
  * todas as literais do contexto definido com padrão, no idioma definido como padrão.
  *
+ * * ## Alterações a partir da versão 19
+ * A partir da versão 19, para evitar conflitos com bibliotecas de terceiros que também utilizam i18n,
+ * é necessário passar explicitamente o contexto ao chamar `getLiterals`, garantindo a correta exibição das literais.
+ * Caso `getLiterals` seja chamado sem parâmetros, o retorno pode vir das configurações da biblioteca de terceiros.
+ *
+ * **Exemplo de chamada com contexto explícito:**
+ * ```typescript
+ * poI18nService.getLiterals({ context: 'general' }).subscribe(literals => console.log(literals));
+ * ```
+ *
+ * **Cenário de Contextos Iguais:**
+ * Caso tanto a aplicação quanto uma biblioteca de terceiros utilizem o mesmo nome de contexto,
+ * o PO UI fará um merge das literais, priorizando os valores definidos na aplicação cliente.
+ *
+ * **Recomendações:**
+ * - Sempre informar o contexto ao chamar `getLiterals` para evitar conflitos de literais.
+ * - Caso a aplicação utilize `lazy loading`, utilizar `setLanguage()` para garantir a correta configuração de idioma.
+ *
  * Exemplos de requisição:
  * ```
  * literals = {};
@@ -9077,6 +9094,7 @@ const I18N_CONFIG = new InjectionToken('I18N_CONFIG');
  *   }));
  *
  * });
+ *
  * ```
  */
 class PoI18nBaseService {
@@ -9390,18 +9408,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * @docsExtends PoI18nBaseService
  */
 class PoI18nService extends PoI18nBaseService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoI18nService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoI18nService, providedIn: 'root' });
+    constructor(configs, http, languageService) {
+        const merged = Array.isArray(configs) ? mergePoI18nConfigs(configs) : configs;
+        super(merged, http, languageService);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoI18nService, deps: [{ token: I18N_CONFIG }, { token: i1$1.HttpClient }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoI18nService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoI18nService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [I18N_CONFIG]
+                }] }, { type: i1$1.HttpClient }, { type: PoLanguageService }] });
 // Função usada para retornar instância para o módulo po-i18n.module
-function returnPoI18nService(config, http, languageService) {
-    return new PoI18nService(config, http, languageService);
+function returnPoI18nService(configs, http, languageService) {
+    const mergedObject = mergePoI18nConfigs(configs);
+    return new PoI18nService(mergedObject, http, languageService);
+}
+function mergePoI18nConfigs(configList) {
+    const mergedContexts = {};
+    const selectedDefault = { language: '', context: '' };
+    for (const currentConfig of configList) {
+        if (!selectedDefault.language && currentConfig.default?.language) {
+            selectedDefault.language = currentConfig.default.language;
+        }
+        if (!selectedDefault.context && currentConfig.default?.context) {
+            selectedDefault.context = currentConfig.default.context;
+        }
+        if (selectedDefault.cache === undefined && currentConfig.default?.cache !== undefined) {
+            selectedDefault.cache = currentConfig.default.cache;
+        }
+        if (currentConfig.contexts) {
+            Object.entries(currentConfig.contexts).forEach(([contextKey, langMap]) => {
+                mergedContexts[contextKey] ??= {};
+                Object.entries(langMap).forEach(([lang, translations]) => {
+                    if (lang === 'url') {
+                        mergedContexts[contextKey][lang] = translations;
+                    }
+                    else {
+                        mergedContexts[contextKey][lang] = {
+                            ...mergedContexts[contextKey][lang],
+                            ...translations
+                        };
+                    }
+                });
+            });
+        }
+    }
+    return {
+        default: selectedDefault,
+        contexts: mergedContexts
+    };
 }
 
 /**
@@ -9540,7 +9598,6 @@ function returnPoI18nService(config, http, languageService) {
  * Para aplicações que utilizem a abordagem de módulos com carregamento *lazy loading*, caso seja
  * definida outra configuração do `PoI18nModule`, deve-se atentar os seguintes detalhes:
  *
- * - Caso existam literais comuns na aplicação, estas devem ser reimportadas;
  * - Não defina outra *default language* para este módulo. Caso for definida, será sobreposta para
  * toda a aplicação;
  * - Caso precise de módulos carregados via *lazy loading* com linguagens diferentes, utilize o
@@ -9554,7 +9611,8 @@ class PoI18nModule {
             providers: [
                 {
                     provide: I18N_CONFIG,
-                    useValue: config
+                    useValue: config,
+                    multi: true
                 },
                 provideAppInitializer(() => {
                     const initializerFn = initializeLanguageDefault(inject(I18N_CONFIG), inject(PoLanguageService));
@@ -9578,14 +9636,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     imports: [PoLanguageModule]
                 }]
         }] });
-function initializeLanguageDefault(config, languageService) {
-    // eslint-disable-next-line sonarjs/prefer-immediate-return
-    const setDefaultLanguage = () => {
-        if (config.default.language) {
+function initializeLanguageDefault(configs, languageService) {
+    const config = configs.find(c => c.default); // Busca a configuração com `default`
+    return () => {
+        if (config?.default.language) {
             languageService.setLanguageDefault(config.default.language);
         }
     };
-    return setDefaultLanguage;
 }
 
 /**
@@ -10605,6 +10662,8 @@ class PoSearchListComponent {
     /** Evento que será disparado a cada tecla digitada no campo de busca. */
     change = new EventEmitter();
     _placeholder;
+    initUp = false;
+    initDown = false;
     constructor(cd) {
         this.cd = cd;
     }
@@ -10630,7 +10689,13 @@ class PoSearchListComponent {
         return this.inputElement.nativeElement.value;
     }
     onChange(event) {
-        this.change.emit({ event: event, [this.fieldValue]: this.inputElement.nativeElement.value });
+        if (event.key === 'Tab') {
+            event.preventDefault();
+        }
+        this.initUp = true;
+        if (this.initDown === this.initUp) {
+            this.change.emit({ event: event, [this.fieldValue]: this.inputElement.nativeElement.value });
+        }
     }
     setFocus() {
         this.inputElement.nativeElement.focus();
@@ -10639,15 +10704,25 @@ class PoSearchListComponent {
         this.inputElement.nativeElement.value = '';
         this.cd.markForCheck();
     }
+    resetKeys() {
+        this.initUp = false;
+        this.initDown = false;
+    }
     isTypeof(object, type) {
         return typeof object === type;
     }
+    changeInitSearch(event) {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+        }
+        this.initDown = true;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoSearchListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoSearchListComponent, isStandalone: false, selector: "po-search-list", inputs: { literals: ["p-literals", "literals"], fieldValue: ["p-field-value", "fieldValue"], size: ["p-size", "size"], placeholder: ["p-placeholder", "placeholder"] }, outputs: { change: "p-change" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"po-field-container-content po-listbox-container-search\">\n  <div class=\"po-field-icon-container-left\">\n    <po-icon\n      p-icon=\"ICON_SEARCH\"\n      class=\"po-field-icon po-icon-input\"\n      [class.po-field-icon-aa]=\"size === 'small'\"\n    ></po-icon>\n  </div>\n\n  <input\n    #inputElement\n    class=\"po-input po-input-icon-left po-listbox-search-input\"\n    [class.po-input-aa]=\"size === 'small'\"\n    [class.po-input-icon-left-aa]=\"size === 'small'\"\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    (keyup)=\"onChange($event)\"\n  />\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoSearchListComponent, isStandalone: false, selector: "po-search-list", inputs: { literals: ["p-literals", "literals"], fieldValue: ["p-field-value", "fieldValue"], size: ["p-size", "size"], placeholder: ["p-placeholder", "placeholder"] }, outputs: { change: "p-change" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"po-field-container-content po-listbox-container-search\">\n  <div class=\"po-field-icon-container-left\">\n    <po-icon\n      p-icon=\"ICON_SEARCH\"\n      class=\"po-field-icon po-icon-input\"\n      [class.po-field-icon-aa]=\"size === 'small'\"\n    ></po-icon>\n  </div>\n\n  <input\n    #inputElement\n    class=\"po-input po-input-icon-left po-listbox-search-input\"\n    [class.po-input-aa]=\"size === 'small'\"\n    [class.po-input-icon-left-aa]=\"size === 'small'\"\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    (keyup)=\"onChange($event)\"\n    (keydown)=\"changeInitSearch($event)\"\n  />\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoSearchListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-search-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-field-container-content po-listbox-container-search\">\n  <div class=\"po-field-icon-container-left\">\n    <po-icon\n      p-icon=\"ICON_SEARCH\"\n      class=\"po-field-icon po-icon-input\"\n      [class.po-field-icon-aa]=\"size === 'small'\"\n    ></po-icon>\n  </div>\n\n  <input\n    #inputElement\n    class=\"po-input po-input-icon-left po-listbox-search-input\"\n    [class.po-input-aa]=\"size === 'small'\"\n    [class.po-input-icon-left-aa]=\"size === 'small'\"\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    (keyup)=\"onChange($event)\"\n  />\n</div>\n" }]
+            args: [{ selector: 'po-search-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-field-container-content po-listbox-container-search\">\n  <div class=\"po-field-icon-container-left\">\n    <po-icon\n      p-icon=\"ICON_SEARCH\"\n      class=\"po-field-icon po-icon-input\"\n      [class.po-field-icon-aa]=\"size === 'small'\"\n    ></po-icon>\n  </div>\n\n  <input\n    #inputElement\n    class=\"po-input po-input-icon-left po-listbox-search-input\"\n    [class.po-input-aa]=\"size === 'small'\"\n    [class.po-input-icon-left-aa]=\"size === 'small'\"\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    (keyup)=\"onChange($event)\"\n    (keydown)=\"changeInitSearch($event)\"\n  />\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement', { read: ElementRef, static: true }]
@@ -10795,7 +10870,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         return fromEvent(componentListner, 'scroll').pipe(debounceTime(100));
     }
     setFocus() {
-        this.listboxItemList.nativeElement.focus();
+        this.listboxItemList?.nativeElement?.focus();
     }
     checkInfiniteScroll() {
         if (this.hasInfiniteScroll()) {
@@ -10884,11 +10959,11 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PoLanguageService }, { token: PoThemeService }, { token: i3.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n    [p-size]=\"size\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n        (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n          [p-size]=\"size\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"formatItemList(item)\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-active-tabs]=\"item.active\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-tab-hide]=\"item.hide\"\n          [p-is-tabs]=\"isTabs\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked(item)\"\n          (p-emit-item-tabs)=\"onSelectTabs($event)\"\n          (p-activated-tabs)=\"onActivatedTabs($event)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-size]=\"size\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n    <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n  </div>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "directive", type: i6.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i6.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n    [p-size]=\"size\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        class=\"po-listbox-item-type-check\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n        (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n          [p-size]=\"size\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        [class.po-listbox-item-type-check]=\"type === 'check'\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"formatItemList(item)\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-active-tabs]=\"item.active\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-tab-hide]=\"item.hide\"\n          [p-is-tabs]=\"isTabs\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked(item)\"\n          (p-emit-item-tabs)=\"onSelectTabs($event)\"\n          (p-activated-tabs)=\"onActivatedTabs($event)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-size]=\"size\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n    <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n  </div>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "directive", type: i6.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i6.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n    [p-size]=\"size\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n        (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n          [p-size]=\"size\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"formatItemList(item)\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-active-tabs]=\"item.active\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-tab-hide]=\"item.hide\"\n          [p-is-tabs]=\"isTabs\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked(item)\"\n          (p-emit-item-tabs)=\"onSelectTabs($event)\"\n          (p-activated-tabs)=\"onActivatedTabs($event)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-size]=\"size\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n    <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n  </div>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n    [p-size]=\"size\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        class=\"po-listbox-item-type-check\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n        (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n          [p-size]=\"size\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        [class.po-listbox-item-type-check]=\"type === 'check'\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"formatItemList(item)\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-active-tabs]=\"item.active\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-tab-hide]=\"item.hide\"\n          [p-is-tabs]=\"isTabs\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked(item)\"\n          (p-emit-item-tabs)=\"onSelectTabs($event)\"\n          (p-activated-tabs)=\"onActivatedTabs($event)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-size]=\"size\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n    <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n  </div>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: PoThemeService }, { type: i3.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { listbox: [{
                 type: ViewChild,
                 args: ['listbox', { static: true }]
@@ -12474,11 +12549,11 @@ class PoCalendarWrapperComponent {
         this.getDecadeArray(year);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoCalendarWrapperComponent, deps: [{ token: PoCalendarService }, { token: PoCalendarLangService }, { token: PoDateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoCalendarWrapperComponent, isStandalone: false, selector: "po-calendar-wrapper", inputs: { value: ["p-value", "value"], mode: ["p-mode", "mode"], responsive: ["p-responsive", "responsive"], partType: ["p-part-type", "partType"], range: ["p-range", "range"], activateDate: ["p-activate-date", "activateDate"], selectedValue: ["p-selected-value", "selectedValue"], minDate: ["p-min-date", "minDate"], maxDate: ["p-max-date", "maxDate"], hoverValue: ["p-hover-value", "hoverValue"], locale: ["p-locale", "locale"] }, outputs: { headerChange: "p-header-change", selectDate: "p-select-date", hoverDate: "p-hover-date" }, providers: [PoCalendarService], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          (mouseenter)=\"onMouseEnter(day)\"\n          (mouseleave)=\"onMouseLeave()\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!range\">\n    <div class=\"po-calendar-footer\">\n      <div class=\"po-calendar-footer-today\">\n        <button\n          type=\"button\"\n          class=\"po-calendar-footer-today-button\"\n          (click)=\"onSelectDate(today)\"\n          [disabled]=\"isTodayUnavailable()\"\n        >\n          {{ displayToday }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoCalendarHeaderComponent, selector: "po-calendar-header", inputs: ["p-hide-previous", "p-hide-next"], outputs: ["p-previous", "p-next"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoCalendarWrapperComponent, isStandalone: false, selector: "po-calendar-wrapper", inputs: { value: ["p-value", "value"], mode: ["p-mode", "mode"], responsive: ["p-responsive", "responsive"], partType: ["p-part-type", "partType"], range: ["p-range", "range"], activateDate: ["p-activate-date", "activateDate"], selectedValue: ["p-selected-value", "selectedValue"], minDate: ["p-min-date", "minDate"], maxDate: ["p-max-date", "maxDate"], hoverValue: ["p-hover-value", "hoverValue"], locale: ["p-locale", "locale"] }, outputs: { headerChange: "p-header-change", selectDate: "p-select-date", hoverDate: "p-hover-date" }, providers: [PoCalendarService], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          (mouseenter)=\"onMouseEnter(day)\"\n          (mouseleave)=\"onMouseLeave()\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!range\">\n    <div class=\"po-calendar-footer\">\n      <div class=\"po-calendar-footer-today\">\n        <button\n          type=\"button\"\n          class=\"po-calendar-footer-today-button\"\n          (click)=\"onSelectDate(today)\"\n          (keydown.enter)=\"onSelectDate(today)\"\n          (keydown.space)=\"onSelectDate(today)\"\n          [disabled]=\"isTodayUnavailable()\"\n        >\n          {{ displayToday }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoCalendarHeaderComponent, selector: "po-calendar-header", inputs: ["p-hide-previous", "p-hide-next"], outputs: ["p-previous", "p-next"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoCalendarWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-calendar-wrapper', providers: [PoCalendarService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          (mouseenter)=\"onMouseEnter(day)\"\n          (mouseleave)=\"onMouseLeave()\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!range\">\n    <div class=\"po-calendar-footer\">\n      <div class=\"po-calendar-footer-today\">\n        <button\n          type=\"button\"\n          class=\"po-calendar-footer-today-button\"\n          (click)=\"onSelectDate(today)\"\n          [disabled]=\"isTodayUnavailable()\"\n        >\n          {{ displayToday }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'po-calendar-wrapper', providers: [PoCalendarService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          (mouseenter)=\"onMouseEnter(day)\"\n          (mouseleave)=\"onMouseLeave()\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!range\">\n    <div class=\"po-calendar-footer\">\n      <div class=\"po-calendar-footer-today\">\n        <button\n          type=\"button\"\n          class=\"po-calendar-footer-today-button\"\n          (click)=\"onSelectDate(today)\"\n          (keydown.enter)=\"onSelectDate(today)\"\n          (keydown.space)=\"onSelectDate(today)\"\n          [disabled]=\"isTodayUnavailable()\"\n        >\n          {{ displayToday }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: PoCalendarService }, { type: PoCalendarLangService }, { type: PoDateService }], propDecorators: { value: [{
                 type: Input,
                 args: ['p-value']
@@ -13179,6 +13254,7 @@ const gridPaddingValues = {
 class PoChartGridUtils {
     component;
     isTypeDonut = false;
+    textCenterDonut = {};
     constructor(component) {
         this.component = component;
     }
@@ -13315,6 +13391,13 @@ class PoChartGridUtils {
                 itemStyle: { opacity: 0.4 }
             };
             this.component.boundaryGap = true;
+            if (this.component.options?.stacked || serie.stackGroupName) {
+                serie.stack = this.component.options?.stacked ? 'total' : serie.stackGroupName;
+                if (this.component.dataLabel?.fixed !== false) {
+                    this.component.dataLabel = { fixed: true };
+                    serie.label = { show: true };
+                }
+            }
         }
     }
     setSerieTypeDonutPie(serie, color) {
@@ -13329,8 +13412,7 @@ class PoChartGridUtils {
                     borderColor: borderColor,
                     color: color,
                     borderRadius: this.component.options?.borderRadius
-                },
-                label: { show: this.isTypeDonut && this.component.options?.textCenterGraph }
+                }
             };
             this.component.listTypePieDonut[0].data.push(seriePie);
         }
@@ -13361,20 +13443,30 @@ class PoChartGridUtils {
                 center: ['50%', positionHorizontal],
                 radius: radius,
                 roseType: this.component.options?.roseType ? 'area' : undefined,
-                label: {
-                    show: !!(this.isTypeDonut && this.component.options?.textCenterGraph),
-                    position: 'center',
-                    formatter: this.component.options?.textCenterGraph,
-                    fontSize: this.resolvePx('--font-size-md'),
-                    fontWeight: Number(this.component.getCSSVariable('--font-weight-hightlight-value', '.po-chart')),
-                    fontFamily: this.component.getCSSVariable('--font-family-hightlight-value', '.po-chart'),
-                    color: this.component.getCSSVariable('--color-hightlight-value', '.po-chart')
-                },
+                label: { show: false },
                 emphasis: { focus: 'self' },
                 data: [],
                 blur: { itemStyle: { opacity: 0.4 } }
             }
         ];
+        this.setTextCenterDonut();
+    }
+    setTextCenterDonut() {
+        if (this.isTypeDonut && this.component.options?.textCenterGraph) {
+            this.textCenterDonut = {
+                type: 'text',
+                left: 'center',
+                top: this.component.options?.legendVerticalPosition === 'top' ? '52%' : '44%',
+                style: {
+                    text: this.component.options?.textCenterGraph,
+                    fontSize: this.resolvePx('--font-size-md'),
+                    fontWeight: Number(this.component.getCSSVariable('--font-weight-hightlight-value', '.po-chart')),
+                    fontFamily: this.component.getCSSVariable('--font-family-hightlight-value', '.po-chart'),
+                    fill: this.component.getCSSVariable('--color-hightlight-value', '.po-chart')
+                },
+                silent: true
+            };
+        }
     }
     getAdjustedRadius(radius, innerRadius) {
         const radiusValue = parseFloat(radius);
@@ -13901,6 +13993,11 @@ use([
  *  <file name="sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.ts"> </file>
  * </example>
  *
+ * <example name="po-chart-stacked" title="PO Chart - Stacked">
+ *  <file name="sample-po-chart-stacked/sample-po-chart-stacked.component.html"> </file>
+ *  <file name="sample-po-chart-stacked/sample-po-chart-stacked.component.ts"> </file>
+ * </example>
+ *
  * <example name="po-chart-summary" title="PO Chart - Summary">
  *  <file name="sample-po-chart-summary/sample-po-chart-summary.component.html"> </file>
  *  <file name="sample-po-chart-summary/sample-po-chart-summary.component.ts"> </file>
@@ -14254,6 +14351,9 @@ class PoChartComponent extends PoChartBaseComponent {
                 this.chartGridUtils.setOptionDataZoom(options);
             }
         }
+        else if (this.chartGridUtils.isTypeDonut && this.options?.textCenterGraph) {
+            options.graphic = this.chartGridUtils.textCenterDonut;
+        }
         if (this.options?.legend !== false) {
             this.setOptionLegend(options);
         }
@@ -18594,6 +18694,14 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         if (this.readonly) {
             return;
         }
+        if ($event.key === 'Escape' && this.visible) {
+            this.togglePicker(false);
+            $event.preventDefault();
+            $event.stopPropagation();
+        }
+        if ($event.key === 'Tab' && $event.shiftKey && $event.target instanceof HTMLInputElement && this.visible) {
+            this.togglePicker();
+        }
         this.objMask.keydown($event);
     }
     ngAfterViewInit() {
@@ -18630,25 +18738,29 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
      * ```
      */
     focus() {
-        if (!this.disabled) {
+        if (!this.disabled && this.inputEl?.nativeElement) {
             this.inputEl.nativeElement.focus();
         }
     }
     getAdditionalHelpTooltip() {
         return this.isAdditionalHelpEventTriggered() ? null : this.additionalHelpTooltip;
     }
-    togglePicker() {
-        if (this.disabled || this.readonly) {
+    togglePicker(focusInput = true) {
+        if (this.disabled || this.readonly || !this.iconDatepicker?.buttonElement?.nativeElement) {
             return;
         }
         if (!this.visible) {
             this.setCalendarPosition();
             this.initializeListeners();
             this.visible = true;
+            this.renderer.setAttribute(this.inputEl.nativeElement, 'aria-expanded', 'true');
+            this.renderer.setAttribute(this.iconDatepicker.buttonElement.nativeElement, 'aria-expanded', 'true');
         }
         else {
             this.inputEl.nativeElement.disabled = false;
-            this.closeCalendar();
+            this.closeCalendar(focusInput);
+            this.renderer.removeAttribute(this.inputEl.nativeElement, 'aria-expanded');
+            this.renderer.removeAttribute(this.iconDatepicker.buttonElement.nativeElement, 'aria-expanded');
         }
     }
     dateSelected() {
@@ -18659,7 +18771,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         this.inputEl.nativeElement.value = this.formatToDate(this.date);
         this.controlModel(this.date);
         this.controlChangeEmitter();
-        this.closeCalendar();
+        this.togglePicker();
     }
     // Esconde Picker quando for clicado fora
     wasClickedOnPicker(event) {
@@ -18731,7 +18843,12 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
     }
     onKeyPress(event) {
         if (isKeyCodeEnter(event) || isKeyCodeSpace(event)) {
-            this.togglePicker();
+            this.togglePicker(false);
+        }
+        if (event.key === 'Tab' && event.shiftKey && !this.visible) {
+            this.focus();
+            event.preventDefault();
+            event.stopPropagation();
         }
     }
     formatToDate(value) {
@@ -18855,10 +18972,13 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
     verifyMobile() {
         return isMobile();
     }
-    closeCalendar() {
+    closeCalendar(focusInput = true) {
         this.visible = false;
         this.removeListeners();
         this.setDialogPickerStyleDisplay('none');
+        if (!this.verifyMobile() && focusInput) {
+            this.focus();
+        }
     }
     controlChangeEmitter() {
         const dateModelFormatted = this.formatToDate(this.date);
@@ -18913,6 +19033,38 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
             this.controlPosition.adjustPosition(poCalendarPositionDefault$1);
         }
     }
+    handleCleanKeyboardTab(event) {
+        if (this.shouldHandleTab(event)) {
+            this.focusCalendar(event);
+        }
+    }
+    // Determina se o tab deve abrir o listbox.
+    shouldHandleTab(event) {
+        return this.visible && !event.shiftKey;
+    }
+    focusCalendar(event) {
+        if (!this.dialogPicker?.nativeElement) {
+            return;
+        }
+        const focusableElements = ['button:not([disabled])', '[tabindex]:not([tabindex="-1"])'].join(', ');
+        const focusableElement = this.dialogPicker.nativeElement.querySelector(focusableElements);
+        if (focusableElement) {
+            event.preventDefault();
+            focusableElement?.focus();
+        }
+        else {
+            this.togglePicker(false);
+        }
+    }
+    onCalendarKeyDown(event) {
+        const keysToHandle = new Set(['Tab', 'Escape']);
+        if (!keysToHandle.has(event.key)) {
+            return;
+        }
+        this.togglePicker();
+        event.preventDefault();
+        event.stopPropagation();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDatepickerComponent, deps: [{ token: PoLanguageService }, { token: i0.ChangeDetectorRef }, { token: PoThemeService }, { token: PoControlPositionService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoDatepickerComponent, isStandalone: false, selector: "po-datepicker", inputs: { label: ["p-label", "label"], help: ["p-help", "help"] }, host: { listeners: { "keyup": "onKeyup($event)", "keydown": "onKeydown($event)" } }, providers: [
             {
@@ -18926,7 +19078,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
                 multi: true
             },
             PoControlPositionService
-        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          <po-clean\n            class=\"po-icon-input\"\n            *ngIf=\"clean && !disabled && !readonly\"\n            [p-element-ref]=\"inputEl\"\n            [p-size]=\"size\"\n            (p-change-event)=\"clear()\"\n          >\n          </po-clean>\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\">\n        <div *ngIf=\"verifyMobile()\" class=\"po-datepicker-calendar-overlay\"></div>\n        <po-calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          #calendar\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <po-field-container-bottom\n    *ngIf=\"!readonly\"\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-error-limit]=\"errorLimit\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "directive", type: i6$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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          <po-clean\n            class=\"po-icon-input\"\n            *ngIf=\"clean && !disabled && !readonly\"\n            [p-element-ref]=\"inputEl\"\n            [p-size]=\"size\"\n            (p-change-event)=\"clear()\"\n          >\n          </po-clean>\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\">\n        <div *ngIf=\"verifyMobile()\" class=\"po-datepicker-calendar-overlay\"></div>\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\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    </ng-template>\n  </div>\n\n  <po-field-container-bottom\n    *ngIf=\"!readonly\"\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-error-limit]=\"errorLimit\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "directive", type: i6$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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDatepickerComponent, decorators: [{
             type: Component,
@@ -18942,7 +19094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                             multi: true
                         },
                         PoControlPositionService
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          <po-clean\n            class=\"po-icon-input\"\n            *ngIf=\"clean && !disabled && !readonly\"\n            [p-element-ref]=\"inputEl\"\n            [p-size]=\"size\"\n            (p-change-event)=\"clear()\"\n          >\n          </po-clean>\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\">\n        <div *ngIf=\"verifyMobile()\" class=\"po-datepicker-calendar-overlay\"></div>\n        <po-calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          #calendar\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <po-field-container-bottom\n    *ngIf=\"!readonly\"\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-error-limit]=\"errorLimit\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          <po-clean\n            class=\"po-icon-input\"\n            *ngIf=\"clean && !disabled && !readonly\"\n            [p-element-ref]=\"inputEl\"\n            [p-size]=\"size\"\n            (p-change-event)=\"clear()\"\n          >\n          </po-clean>\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\">\n        <div *ngIf=\"verifyMobile()\" class=\"po-datepicker-calendar-overlay\"></div>\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\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    </ng-template>\n  </div>\n\n  <po-field-container-bottom\n    *ngIf=\"!readonly\"\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-error-limit]=\"errorLimit\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
         }], ctorParameters: () => [{ type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: PoThemeService }, { type: PoControlPositionService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: true }]
@@ -20305,7 +20457,10 @@ class PoPageSlideComponent extends PoPageSlideBaseComponent {
         this.loadingCompleted.pipe(take(1)).pipe(delay(0)).subscribe(this.handleFocus.bind(this));
     }
     close() {
-        this.poActiveOverlayService.activeOverlay.pop();
+        if (this.poActiveOverlayService.activeOverlay.length > 0 &&
+            this.poActiveOverlayService.activeOverlay[this.poActiveOverlayService.activeOverlay.length - 1] === this.id) {
+            this.poActiveOverlayService.activeOverlay.pop();
+        }
         super.close();
         this.removeEventListeners();
         this.sourceElement.focus();
@@ -20333,7 +20488,9 @@ class PoPageSlideComponent extends PoPageSlideBaseComponent {
     initFocus() {
         // O foco não pode sair da página.
         this.focusEvent = (event) => {
+            const isCdkOverlayListbox = event.target['closest']('.cdk-overlay-container') !== null;
             if (!this.pageContent.nativeElement.contains(event.target) &&
+                !isCdkOverlayListbox &&
                 this.poActiveOverlayService.activeOverlay[this.poActiveOverlayService.activeOverlay.length - 1] === this.id) {
                 event.stopPropagation();
                 this.firstElement.focus();
@@ -24444,6 +24601,8 @@ class PoTableColumnFrozenDirective {
                 if (prev &&
                     !prev.classList.contains('po-table-column-selectable') &&
                     !prev.classList.contains('po-table-column-actions') &&
+                    !prev.classList.contains('po-table-header-single-action') &&
+                    !prev.classList.contains('po-table-column-single-action') &&
                     !prev.classList.contains('po-table-column-detail-toggle') &&
                     !prev.classList.contains('po-table-header-master-detail')) {
                     left = this.getOuterWidth(prev) + (parseFloat(prev.style.left) || 0);
@@ -24680,8 +24839,8 @@ class PoTableComponent extends PoTableBaseComponent {
     }
     get columnCount() {
         const columnCount = this.mainColumns.length +
-            (this.actions.length > 0 ? 1 : 0) +
-            (this.selectable ? 1 : 0) +
+            (this.hasItems && this.actions.length > 0 ? 1 : 0) +
+            (this.hasItems && this.selectable ? 1 : 0) +
             (!this.hideDetail && this.columnMasterDetail !== undefined ? 1 : 0) +
             this.countExtraColumns();
         return columnCount || 1;
@@ -25305,11 +25464,11 @@ class PoTableComponent extends PoTableBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTableComponent, deps: [{ token: PoDateService }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }, { token: PoLanguageService }, { token: PoThemeService }, { token: i0.ChangeDetectorRef }, { token: i1.DecimalPipe }, { token: PoTableService }, { token: ICONS_DICTIONARY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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  <div\n    #columnBatchActions\n    *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n    class=\"po-table-actions-batch-actions\"\n  >\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\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  <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" 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  <div *ngIf=\"!hideTableSearch && hasValidColumns\" 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</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    <po-loading-overlay *ngIf=\"loading\" [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n            <div *ngIf=\"virtualScroll\">\n              <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n            </div>\n            <div *ngIf=\"!virtualScroll\" class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n              <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n            </div>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer\n        [p-components-size]=\"componentsSize\"\n        [p-literals]=\"literals\"\n        [p-subtitles]=\"column.subtitles\"\n      >\n      </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Show More Button -->\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    [p-size]=\"componentsSize\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\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        <th\n          *ngIf=\"hasSelectableColumn\"\n          [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n          class=\"po-table-column-selectable\"\n        >\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              [p-size]=\"componentsSize\"\n              (p-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <ng-container\n          *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n        >\n        </ng-container>\n        <ng-template #tableDefaultThDragDrop>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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              <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                <svg\n                  *ngIf=\"iconNameLib === 'PoIcon'\"\n                  cdkDragHandle\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                </svg>\n              </ng-container>\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n        <ng-template #tableDefaultThDefault>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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        </ng-template>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row po-table-row-no-data\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n          <td\n            *ngIf=\"\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            \"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [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              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              [p-append-in-body]=\"true\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(getCellData(row, column), column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(getCellData(row, column), column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"getCellData(row, column)\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna de a\u00E7oes na direita -->\n          <ng-template\n            *ngIf=\"actionRight\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              [p-parent-row]=\"row\"\n              [p-components-size]=\"componentsSize\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<!-- 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          <th\n            *ngIf=\"hasSelectableColumn\"\n            [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n            class=\"po-table-column-selectable\"\n          >\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              <po-checkbox\n                name=\"selectAll\"\n                *ngIf=\"!hideSelectAll\"\n                (p-change)=\"selectAllRows()\"\n                [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                [p-size]=\"componentsSize\"\n              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"\n              (hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\n            \"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <ng-container\n            *ngIf=\"\n              this.isDraggable || hasSomeFixed();\n              then tableVirtualScrollThDragDrop;\n              else tableVirtualScrollThDefault\n            \"\n          >\n          </ng-container>\n          <ng-template #tableVirtualScrollThDragDrop>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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                <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                  <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                  <svg\n                    *ngIf=\"iconNameLib === 'PoIcon'\"\n                    cdkDragHandle\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  </svg>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n          <ng-template #tableVirtualScrollThDefault>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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 }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n\n          <th\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <th\n            *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        </tr>\n      </thead>\n\n      <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n\n      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody\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            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            <td\n              *ngIf=\"\n                (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n                (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n              \"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [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                [ngSwitch]=\"column.type\"\n                [p-tooltip]=\"tooltipText\"\n                [p-append-in-body]=\"true\"\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                (mouseleave)=\"tooltipMouseLeave()\"\n              >\n                <span *ngSwitchCase=\"'columnTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n            <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n              <ng-template\n                [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n            <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n              <po-table-detail\n                [p-selectable]=\"selectable && !detailHideSelect\"\n                [p-detail]=\"columnMasterDetail.detail\"\n                [p-items]=\"row[nameColumnDetail]\"\n                [p-parent-row]=\"row\"\n                [p-components-size]=\"componentsSize\"\n                (p-select-row)=\"selectDetailRow($event)\"\n              >\n              </po-table-detail>\n            </td>\n          </tr>\n        </tbody>\n      </ng-container>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<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  <po-icon\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n    class=\"po-clickable\"\n  >\n  </po-icon>\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  <span\n    *ngIf=\"sort && column.sortable !== false\"\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    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n      <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n          fill=\"#1D1D30\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n      <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_ASC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n      <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_DESC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"headerWidth\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <td\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon\n        *ngIf=\"firstAction.icon\"\n        class=\"po-table-single-action-content po-field-icon\"\n        [p-icon]=\"firstAction.icon\"\n      ></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" 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</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n  [p-columns-default]=\"initialColumns\"\n  [p-components-size]=\"componentsSize\"\n  (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i6$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.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: i7.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-checked"], outputs: ["p-blur", "p-change-selected"] }, { kind: "component", type: PoSearchComponent, selector: "po-search" }, { kind: "component", type: PoTableColumnIconComponent, selector: "po-table-column-icon", inputs: ["p-column", "p-row", "p-icons"] }, { kind: "component", type: PoTableColumnLabelComponent, selector: "po-table-column-label", inputs: ["p-value"] }, { kind: "component", type: PoTableColumnLinkComponent, selector: "po-table-column-link", inputs: ["p-action", "p-disabled", "p-link", "p-open-new-tab", "p-row", "p-value"] }, { kind: "component", type: PoTableColumnManagerComponent, selector: "po-table-column-manager", inputs: ["p-columns", "p-target", "p-columns-default", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-components-size", "p-max-columns"], outputs: ["p-visible-columns-change", "p-change-visible-columns", "p-initial-columns"] }, { kind: "component", type: PoTableDetailComponent, selector: "po-table-detail", inputs: ["p-components-size", "p-items", "p-parent-row", "p-selectable", "p-detail"], outputs: ["p-select-row"] }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }, { kind: "component", type: PoTableSubtitleFooterComponent, selector: "po-table-subtitle-footer", inputs: ["p-components-size", "p-literals", "p-subtitles"] }, { kind: "directive", type: PoTableColumnFrozenDirective, selector: "[pFrozenColumn]", inputs: ["pFrozenColumn", "alignFrozen"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PoTimePipe, name: "po_time" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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  <div\n    #columnBatchActions\n    *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n    class=\"po-table-actions-batch-actions\"\n  >\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\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  <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" 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  <div *ngIf=\"!hideTableSearch && hasValidColumns\" 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</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    <po-loading-overlay *ngIf=\"loading\" [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n            <div *ngIf=\"virtualScroll\">\n              <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n            </div>\n            <div *ngIf=\"!virtualScroll\" class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n              <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n            </div>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer\n        [p-components-size]=\"componentsSize\"\n        [p-literals]=\"literals\"\n        [p-subtitles]=\"column.subtitles\"\n      >\n      </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Show More Button -->\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    [p-size]=\"componentsSize\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\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        <th\n          *ngIf=\"hasSelectableColumn\"\n          [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n          class=\"po-table-column-selectable\"\n        >\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              [p-size]=\"componentsSize\"\n              (p-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th\n          *ngIf=\"!hasMainColumns\"\n          #noColumnsHeader\n          class=\"po-table-header-column po-text-center\"\n          [attr.colspan]=\"columnCount\"\n        >\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <ng-container\n          *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n        >\n        </ng-container>\n        <ng-template #tableDefaultThDragDrop>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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              <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                <svg\n                  *ngIf=\"iconNameLib === 'PoIcon'\"\n                  cdkDragHandle\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                </svg>\n              </ng-container>\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n        <ng-template #tableDefaultThDefault>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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        </ng-template>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"\n            hasVisibleActions &&\n            actionRight &&\n            hasItems &&\n            hasMainColumns &&\n            (visibleActions.length > 1 || isSingleAction)\n          \"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row po-table-row-no-data\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n          <td\n            *ngIf=\"\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            \"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [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              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              [p-append-in-body]=\"true\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(getCellData(row, column), column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(getCellData(row, column), column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"getCellData(row, column)\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna de a\u00E7oes na direita -->\n          <ng-template\n            *ngIf=\"actionRight\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              [p-parent-row]=\"row\"\n              [p-components-size]=\"componentsSize\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<!-- 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          <th\n            *ngIf=\"hasSelectableColumn\"\n            [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n            class=\"po-table-column-selectable\"\n          >\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              <po-checkbox\n                name=\"selectAll\"\n                *ngIf=\"!hideSelectAll\"\n                (p-change)=\"selectAllRows()\"\n                [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                [p-size]=\"componentsSize\"\n              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"\n              (hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\n            \"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th\n            *ngIf=\"!hasMainColumns\"\n            #noColumnsHeader\n            class=\"po-table-header-column po-text-center\"\n            [attr.colspan]=\"columnCount\"\n          >\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <ng-container\n            *ngIf=\"\n              this.isDraggable || hasSomeFixed();\n              then tableVirtualScrollThDragDrop;\n              else tableVirtualScrollThDefault\n            \"\n          >\n          </ng-container>\n          <ng-template #tableVirtualScrollThDragDrop>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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                <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                  <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                  <svg\n                    *ngIf=\"iconNameLib === 'PoIcon'\"\n                    cdkDragHandle\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  </svg>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n          <ng-template #tableVirtualScrollThDefault>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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 }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n\n          <th\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <th\n            *ngIf=\"\n              hasVisibleActions &&\n              actionRight &&\n              hasItems &&\n              hasMainColumns &&\n              (visibleActions.length > 1 || isSingleAction)\n            \"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        </tr>\n      </thead>\n\n      <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n\n      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody\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            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            <td\n              *ngIf=\"\n                (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n                (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n              \"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [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                [ngSwitch]=\"column.type\"\n                [p-tooltip]=\"tooltipText\"\n                [p-append-in-body]=\"true\"\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                (mouseleave)=\"tooltipMouseLeave()\"\n              >\n                <span *ngSwitchCase=\"'columnTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n            <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n              <ng-template\n                [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n            <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n              <po-table-detail\n                [p-selectable]=\"selectable && !detailHideSelect\"\n                [p-detail]=\"columnMasterDetail.detail\"\n                [p-items]=\"row[nameColumnDetail]\"\n                [p-parent-row]=\"row\"\n                [p-components-size]=\"componentsSize\"\n                (p-select-row)=\"selectDetailRow($event)\"\n              >\n              </po-table-detail>\n            </td>\n          </tr>\n        </tbody>\n      </ng-container>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<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  <po-icon\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n    class=\"po-clickable\"\n  >\n  </po-icon>\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  <span\n    *ngIf=\"sort && column.sortable !== false\"\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    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n      <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n          fill=\"#1D1D30\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n      <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_ASC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n      <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_DESC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <td\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      <span *ngIf=\"firstAction.label\">{{ firstAction.label }}</span>\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" 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</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n  [p-columns-default]=\"initialColumns\"\n  [p-components-size]=\"componentsSize\"\n  (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i6$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.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: i7.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-checked"], outputs: ["p-blur", "p-change-selected"] }, { kind: "component", type: PoSearchComponent, selector: "po-search" }, { kind: "component", type: PoTableColumnIconComponent, selector: "po-table-column-icon", inputs: ["p-column", "p-row", "p-icons"] }, { kind: "component", type: PoTableColumnLabelComponent, selector: "po-table-column-label", inputs: ["p-value"] }, { kind: "component", type: PoTableColumnLinkComponent, selector: "po-table-column-link", inputs: ["p-action", "p-disabled", "p-link", "p-open-new-tab", "p-row", "p-value"] }, { kind: "component", type: PoTableColumnManagerComponent, selector: "po-table-column-manager", inputs: ["p-columns", "p-target", "p-columns-default", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-components-size", "p-max-columns"], outputs: ["p-visible-columns-change", "p-change-visible-columns", "p-initial-columns"] }, { kind: "component", type: PoTableDetailComponent, selector: "po-table-detail", inputs: ["p-components-size", "p-items", "p-parent-row", "p-selectable", "p-detail"], outputs: ["p-select-row"] }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }, { kind: "component", type: PoTableSubtitleFooterComponent, selector: "po-table-subtitle-footer", inputs: ["p-components-size", "p-literals", "p-subtitles"] }, { kind: "directive", type: PoTableColumnFrozenDirective, selector: "[pFrozenColumn]", inputs: ["pFrozenColumn", "alignFrozen"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PoTimePipe, name: "po_time" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-table', providers: [PoDateService, PoTableService], standalone: false, template: "<div class=\"po-table-actions\">\n  <div\n    #columnBatchActions\n    *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n    class=\"po-table-actions-batch-actions\"\n  >\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\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  <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" 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  <div *ngIf=\"!hideTableSearch && hasValidColumns\" 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</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    <po-loading-overlay *ngIf=\"loading\" [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n            <div *ngIf=\"virtualScroll\">\n              <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n            </div>\n            <div *ngIf=\"!virtualScroll\" class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n              <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n            </div>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer\n        [p-components-size]=\"componentsSize\"\n        [p-literals]=\"literals\"\n        [p-subtitles]=\"column.subtitles\"\n      >\n      </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Show More Button -->\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    [p-size]=\"componentsSize\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\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        <th\n          *ngIf=\"hasSelectableColumn\"\n          [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n          class=\"po-table-column-selectable\"\n        >\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              [p-size]=\"componentsSize\"\n              (p-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <ng-container\n          *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n        >\n        </ng-container>\n        <ng-template #tableDefaultThDragDrop>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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              <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                <svg\n                  *ngIf=\"iconNameLib === 'PoIcon'\"\n                  cdkDragHandle\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                </svg>\n              </ng-container>\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n        <ng-template #tableDefaultThDefault>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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        </ng-template>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row po-table-row-no-data\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n          <td\n            *ngIf=\"\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            \"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [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              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              [p-append-in-body]=\"true\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(getCellData(row, column), column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(getCellData(row, column), column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"getCellData(row, column)\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna de a\u00E7oes na direita -->\n          <ng-template\n            *ngIf=\"actionRight\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              [p-parent-row]=\"row\"\n              [p-components-size]=\"componentsSize\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<!-- 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          <th\n            *ngIf=\"hasSelectableColumn\"\n            [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n            class=\"po-table-column-selectable\"\n          >\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              <po-checkbox\n                name=\"selectAll\"\n                *ngIf=\"!hideSelectAll\"\n                (p-change)=\"selectAllRows()\"\n                [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                [p-size]=\"componentsSize\"\n              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"\n              (hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\n            \"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <ng-container\n            *ngIf=\"\n              this.isDraggable || hasSomeFixed();\n              then tableVirtualScrollThDragDrop;\n              else tableVirtualScrollThDefault\n            \"\n          >\n          </ng-container>\n          <ng-template #tableVirtualScrollThDragDrop>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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                <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                  <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                  <svg\n                    *ngIf=\"iconNameLib === 'PoIcon'\"\n                    cdkDragHandle\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  </svg>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n          <ng-template #tableVirtualScrollThDefault>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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 }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n\n          <th\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <th\n            *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        </tr>\n      </thead>\n\n      <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n\n      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody\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            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            <td\n              *ngIf=\"\n                (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n                (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n              \"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [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                [ngSwitch]=\"column.type\"\n                [p-tooltip]=\"tooltipText\"\n                [p-append-in-body]=\"true\"\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                (mouseleave)=\"tooltipMouseLeave()\"\n              >\n                <span *ngSwitchCase=\"'columnTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n            <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n              <ng-template\n                [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n            <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n              <po-table-detail\n                [p-selectable]=\"selectable && !detailHideSelect\"\n                [p-detail]=\"columnMasterDetail.detail\"\n                [p-items]=\"row[nameColumnDetail]\"\n                [p-parent-row]=\"row\"\n                [p-components-size]=\"componentsSize\"\n                (p-select-row)=\"selectDetailRow($event)\"\n              >\n              </po-table-detail>\n            </td>\n          </tr>\n        </tbody>\n      </ng-container>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<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  <po-icon\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n    class=\"po-clickable\"\n  >\n  </po-icon>\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  <span\n    *ngIf=\"sort && column.sortable !== false\"\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    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n      <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n          fill=\"#1D1D30\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n      <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_ASC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n      <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_DESC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"headerWidth\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <td\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon\n        *ngIf=\"firstAction.icon\"\n        class=\"po-table-single-action-content po-field-icon\"\n        [p-icon]=\"firstAction.icon\"\n      ></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" 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</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n  [p-columns-default]=\"initialColumns\"\n  [p-components-size]=\"componentsSize\"\n  (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<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  <div\n    #columnBatchActions\n    *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n    class=\"po-table-actions-batch-actions\"\n  >\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\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  <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" 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  <div *ngIf=\"!hideTableSearch && hasValidColumns\" 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</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    <po-loading-overlay *ngIf=\"loading\" [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n            <div *ngIf=\"virtualScroll\">\n              <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n            </div>\n            <div *ngIf=\"!virtualScroll\" class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n              <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n            </div>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer\n        [p-components-size]=\"componentsSize\"\n        [p-literals]=\"literals\"\n        [p-subtitles]=\"column.subtitles\"\n      >\n      </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Show More Button -->\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    [p-size]=\"componentsSize\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\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        <th\n          *ngIf=\"hasSelectableColumn\"\n          [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n          class=\"po-table-column-selectable\"\n        >\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              [p-size]=\"componentsSize\"\n              (p-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th\n          *ngIf=\"!hasMainColumns\"\n          #noColumnsHeader\n          class=\"po-table-header-column po-text-center\"\n          [attr.colspan]=\"columnCount\"\n        >\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <ng-container\n          *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n        >\n        </ng-container>\n        <ng-template #tableDefaultThDragDrop>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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              <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                <svg\n                  *ngIf=\"iconNameLib === 'PoIcon'\"\n                  cdkDragHandle\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                </svg>\n              </ng-container>\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n        <ng-template #tableDefaultThDefault>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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        </ng-template>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"\n            hasVisibleActions &&\n            actionRight &&\n            hasItems &&\n            hasMainColumns &&\n            (visibleActions.length > 1 || isSingleAction)\n          \"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row po-table-row-no-data\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n          <td\n            *ngIf=\"\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            \"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [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              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              [p-append-in-body]=\"true\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(getCellData(row, column), column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(getCellData(row, column), column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"getCellData(row, column)\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna de a\u00E7oes na direita -->\n          <ng-template\n            *ngIf=\"actionRight\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              [p-parent-row]=\"row\"\n              [p-components-size]=\"componentsSize\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<!-- 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          <th\n            *ngIf=\"hasSelectableColumn\"\n            [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n            class=\"po-table-column-selectable\"\n          >\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              <po-checkbox\n                name=\"selectAll\"\n                *ngIf=\"!hideSelectAll\"\n                (p-change)=\"selectAllRows()\"\n                [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                [p-size]=\"componentsSize\"\n              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"\n              (hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\n            \"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th\n            *ngIf=\"!hasMainColumns\"\n            #noColumnsHeader\n            class=\"po-table-header-column po-text-center\"\n            [attr.colspan]=\"columnCount\"\n          >\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <ng-container\n            *ngIf=\"\n              this.isDraggable || hasSomeFixed();\n              then tableVirtualScrollThDragDrop;\n              else tableVirtualScrollThDefault\n            \"\n          >\n          </ng-container>\n          <ng-template #tableVirtualScrollThDragDrop>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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                <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                  <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n                  <svg\n                    *ngIf=\"iconNameLib === 'PoIcon'\"\n                    cdkDragHandle\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  </svg>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n          <ng-template #tableVirtualScrollThDefault>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\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 }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n\n          <th\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <th\n            *ngIf=\"\n              hasVisibleActions &&\n              actionRight &&\n              hasItems &&\n              hasMainColumns &&\n              (visibleActions.length > 1 || isSingleAction)\n            \"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        </tr>\n      </thead>\n\n      <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n\n      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody\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            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            <td\n              *ngIf=\"\n                (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n                (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n              \"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [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                [ngSwitch]=\"column.type\"\n                [p-tooltip]=\"tooltipText\"\n                [p-append-in-body]=\"true\"\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                (mouseleave)=\"tooltipMouseLeave()\"\n              >\n                <span *ngSwitchCase=\"'columnTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n            <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n              <ng-template\n                [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n            <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n              <po-table-detail\n                [p-selectable]=\"selectable && !detailHideSelect\"\n                [p-detail]=\"columnMasterDetail.detail\"\n                [p-items]=\"row[nameColumnDetail]\"\n                [p-parent-row]=\"row\"\n                [p-components-size]=\"componentsSize\"\n                (p-select-row)=\"selectDetailRow($event)\"\n              >\n              </po-table-detail>\n            </td>\n          </tr>\n        </tbody>\n      </ng-container>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<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  <po-icon\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n    class=\"po-clickable\"\n  >\n  </po-icon>\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  <span\n    *ngIf=\"sort && column.sortable !== false\"\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    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n      <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n          fill=\"#1D1D30\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n      <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_ASC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n      <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_DESC\"></po-icon>\n      <svg\n        *ngIf=\"iconNameLib === 'PoIcon'\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <td\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      <span *ngIf=\"firstAction.label\">{{ firstAction.label }}</span>\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" 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</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n  [p-columns-default]=\"initialColumns\"\n  [p-components-size]=\"componentsSize\"\n  (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<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: PoThemeService }, { type: i0.ChangeDetectorRef }, { type: i1.DecimalPipe }, { type: PoTableService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -26192,8 +26351,7 @@ class PoComboBaseComponent {
      * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou
      * overflow escondido,garantindo o posicionamento correto de ambos próximo ao elemento.
      *
-     * > O uso dessa propriedade pode acarretar na perda sequencial da tabulação da página. Quando utilizado com
-     * `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
+     * > Quando utilizado com `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
      *
      * @default `false`
      */
@@ -30832,6 +30990,7 @@ class PoLookupModalBaseComponent {
     page = 1;
     pageSize = 10;
     searchValue = '';
+    appliedSearchValue = '';
     tableLiterals;
     // Propriedade da modal de busca avançada:
     advancedFilterModalTitle = '';
@@ -30929,6 +31088,7 @@ class PoLookupModalBaseComponent {
     createDisclaimer() {
         this.disclaimerGroup.disclaimers = [];
         this.searchValue = '';
+        this.appliedSearchValue = '';
         for (const [key, value] of Object.entries(this.dynamicFormValue)) {
             this.addDisclaimer(value, key);
         }
@@ -30958,15 +31118,17 @@ class PoLookupModalBaseComponent {
         this.disclaimerGroup.disclaimers = [...this.disclaimerGroup.disclaimers, this.disclaimer];
     }
     onChangeDisclaimerGroup() {
-        if (!this.searchValue) {
+        if (!this.appliedSearchValue) {
             this.isLoading = true;
             this.searchValue = '';
+            this.appliedSearchValue = '';
             this.searchFilteredItems();
         }
     }
     search() {
         this.page = 1;
-        if (this.searchValue) {
+        this.appliedSearchValue = this.searchValue;
+        if (this.appliedSearchValue) {
             this.isLoading = true;
             this.disclaimerGroup.disclaimers = [];
             this.searchFilteredItems();
@@ -30976,7 +31138,7 @@ class PoLookupModalBaseComponent {
         }
     }
     searchFilteredItems() {
-        this.searchSubscription = this.getFilteredItems(this.searchValue)
+        this.searchSubscription = this.getFilteredItems(this.appliedSearchValue)
             .pipe(catchError(error => {
             this.setLookupResponseProperties();
             return throwError(error);
@@ -30986,7 +31148,10 @@ class PoLookupModalBaseComponent {
     showMoreEvent() {
         this.page++;
         this.isLoading = true;
-        this.showMoreSubscription = this.getFilteredItems(this.searchValue)
+        if (this.searchValue !== this.appliedSearchValue) {
+            this.searchValue = this.appliedSearchValue;
+        }
+        this.showMoreSubscription = this.getFilteredItems(this.appliedSearchValue)
             .pipe(catchError(error => {
             this.hasNext = false;
             this.isLoading = false;
@@ -33133,8 +33298,7 @@ class PoMultiselectBaseComponent {
      * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou
      * overflow escondido, garantindo o posicionamento correto de ambos próximo ao elemento.
      *
-     * > O uso dessa propriedade pode interferir na sequência de tabulação da página. Quando utilizado com
-     * `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
+     * > Quando utilizado com `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
      *
      * @default `false`
      */
@@ -34325,7 +34489,9 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             this.controlDropdownVisibility(false);
         }
         this.focusOnTag = false;
-        if (event.keyCode === PoKeyCodeEnum.tab) {
+        if (event.keyCode === PoKeyCodeEnum.tab && this.appendBox && this.dropdownOpen) {
+            event.preventDefault();
+            this.focusOnFirstItem();
             return;
         }
         if (event.keyCode === PoKeyCodeEnum.esc) {
@@ -34333,7 +34499,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             this.controlDropdownVisibility(false);
             return;
         }
-        if (event.keyCode === PoKeyCodeEnum.arrowDown && this.visibleTags.length > 0) {
+        if (event.keyCode === PoKeyCodeEnum.arrowDown) {
             event.preventDefault();
             this.controlDropdownVisibility(true);
             this.dropdown?.listbox?.setFocus();
@@ -34370,10 +34536,16 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.controlDropdownVisibility(!this.dropdownOpen);
     }
     onKeyDownDropdown(event, index) {
+        if (event.key === 'Tab' && event.target['className'].includes('po-listbox-item-type-check')) {
+            event.preventDefault();
+            this.inputElement.nativeElement.focus();
+        }
         if (event.key === 'Escape') {
             event.preventDefault();
             this.controlDropdownVisibility(false);
-            this.inputElement.nativeElement.focus();
+            setTimeout(() => {
+                this.inputElement.nativeElement.focus();
+            }, 50);
         }
     }
     openDropdown(toOpen) {
@@ -34395,6 +34567,9 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.changeDetector.markForCheck();
     }
     changeSearch(event) {
+        if (event.event.keyCode === PoKeyCodeEnum.arrowDown || event.event.keyCode === PoKeyCodeEnum.tab) {
+            this.focusOnFirstItem();
+        }
         if (event && event[this.fieldValue] !== undefined) {
             if (this.filterService) {
                 this.filterSubject.next(event[this.fieldValue]);
@@ -34409,6 +34584,17 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         // timeout necessário para reposicionar corretamente quando dropdown estiver pra cima do input e realizar busca no input
         setTimeout(() => this.adjustContainerPosition());
     }
+    focusOnFirstItem() {
+        const items = this.dropdown.listbox.element.nativeElement.querySelectorAll('.po-listbox-item-type-check');
+        const item = items.length > 0 ? items[0] : null;
+        if (item) {
+            item.focus();
+        }
+        else {
+            this.close();
+            this.inputElement.nativeElement.focus();
+        }
+    }
     closeTag(value, event) {
         let index;
         this.enterCloseTag = true;
@@ -34503,8 +34689,9 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     }
     close() {
         this.dropdownIcon = 'ICON_ARROW_DOWN';
+        this.dropdown?.listbox?.searchElement?.resetKeys();
         this.dropdownOpen = false;
-        this.dropdown.controlVisibility(false);
+        this.dropdown?.controlVisibility(false);
         this.setVisibleOptionsDropdown(this.options);
         this.removeListeners();
     }
@@ -34637,11 +34824,11 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.adjustContainerPosition();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoMultiselectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: PoControlPositionService }, { token: PoMultiselectFilterService }, { token: PoLanguageService }, { token: PoThemeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoMultiselectComponent, isStandalone: false, selector: "po-multiselect", providers: providers$1, queries: [{ propertyName: "multiselectOptionTemplate", first: true, predicate: PoMultiselectOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content\"\n      [class.po-multiselect-show]=\"dropdownOpen\"\n    >\n      <div\n        #inputElement\n        [tabindex]=\"disabled ? -1 : 0\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        class=\"po-input-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n          [p-append-in-body]=\"appendBox\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      [p-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoMultiselectDropdownComponent, selector: "po-multiselect-dropdown", inputs: ["p-searching", "p-hide-search", "p-literals", "p-placeholder-search", "p-selected-options", "p-options", "p-visible-options", "p-hide-select-all", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width", "p-size"], outputs: ["p-change-search", "p-change", "p-close-dropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoMultiselectComponent, isStandalone: false, selector: "po-multiselect", providers: providers$1, queries: [{ propertyName: "multiselectOptionTemplate", first: true, predicate: PoMultiselectOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content\"\n      [class.po-multiselect-show]=\"dropdownOpen\"\n    >\n      <div\n        #inputElement\n        [tabindex]=\"disabled ? -1 : 0\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        class=\"po-input-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n          [p-append-in-body]=\"appendBox\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      [p-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoMultiselectDropdownComponent, selector: "po-multiselect-dropdown", inputs: ["p-searching", "p-hide-search", "p-literals", "p-placeholder-search", "p-selected-options", "p-options", "p-visible-options", "p-hide-select-all", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width", "p-size"], outputs: ["p-change-search", "p-change", "p-close-dropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, standalone: false, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content\"\n      [class.po-multiselect-show]=\"dropdownOpen\"\n    >\n      <div\n        #inputElement\n        [tabindex]=\"disabled ? -1 : 0\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        class=\"po-input-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n          [p-append-in-body]=\"appendBox\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      [p-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, standalone: false, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content\"\n      [class.po-multiselect-show]=\"dropdownOpen\"\n    >\n      <div\n        #inputElement\n        [tabindex]=\"disabled ? -1 : 0\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        class=\"po-input-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n          [p-append-in-body]=\"appendBox\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      [p-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PoControlPositionService }, { type: PoMultiselectFilterService }, { type: PoLanguageService }, { type: PoThemeService }], propDecorators: { multiselectOptionTemplate: [{
                 type: ContentChild,
                 args: [PoMultiselectOptionTemplateDirective, { static: true }]
@@ -52534,11 +52721,13 @@ const NO_MESSAGE_HEADER_PARAM = 'X-PO-No-Message';
  * ## Configuração
  *
  * Para o correto funcionamento do interceptor `po-http-interceptor`, deve ser importado o `BrowserAnimationsModule` no
- * módulo principal da sua aplicação.
+ * módulo principal da sua aplicação. Além disso, é necessário configurar o `HttpClient` para utilizar os interceptors
+ * registrados no Dependency Injection (DI) por meio da função `provideHttpClient(withInterceptorsFromDi())`.
  *
  * Módulo da aplicação:
  * ```
  * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ * import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
  * import { PoModule } from '@po-ui/ng-components';
  * ...
  *
@@ -52553,7 +52742,10 @@ const NO_MESSAGE_HEADER_PARAM = 'X-PO-No-Message';
  *     AppComponent,
  *     ...
  *   ],
- *   providers: [],
+ *   providers: [
+ *     provideHttpClient(withInterceptorsFromDi()),
+ *     ...
+ *   ],
  *   bootstrap: [AppComponent]
  * })
  * export class AppModule { }
@@ -53274,5 +53466,5 @@ function validateProperty(property, target) {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, ICONS_DICTIONARY, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconDictionary, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
+export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, ICONS_DICTIONARY, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconDictionary, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map