@po-ui/ng-components 17.7.0 → 17.9.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, TemplateRef, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ViewChildren, ContentChildren, HostBinding, forwardRef, ViewContainerRef, inject, ContentChild, Pipe, Injector, Inject, InjectionToken, APP_INITIALIZER } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, TemplateRef, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ViewChildren, ContentChildren, HostBinding, forwardRef, ViewContainerRef, inject, ContentChild, Pipe, Inject, Injector, InjectionToken, APP_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DecimalPipe, NgOptimizedImage, CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
+import { CommonModule, DOCUMENT, DecimalPipe, NgOptimizedImage, CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
 import * as i2$3 from '@angular/animations';
 import { style, animate, transition, trigger, animateChild, query, group, state, keyframes } from '@angular/animations';
 import { Subject, filter, debounceTime, fromEvent, timer, from, of, Subscription, ReplaySubject, throwError, map as map$1, catchError as catchError$1, Observable } from 'rxjs';
@@ -17970,6 +17970,473 @@ class PoNotificationModule {
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoNotificationModule, { declarations: [PoToasterComponent], imports: [CommonModule, PoButtonModule, PoIconModule] }); })();
 
+/**
+ * Enum para definir os tipos de tema suportados pelo serviço de temas.
+ *
+ * @usedBy PoThemeService
+ *
+ * @example
+ *
+ * Em um serviço de tema, você pode usar este enum para alternar entre os tipos de temas suportados.
+ *
+ * ```
+ * import { PoThemeTypeEnum } from '@po-ui/theme';
+ *
+ * // Definindo o tipo de tema para light
+ * themeService.setTheme(...theme, PoThemeTypeEnum.light);
+ *
+ * // Definindo o tipo de tema para dark
+ * themeService.setTheme(...theme, PoThemeTypeEnum.dark);
+ * ```
+ */
+var PoThemeTypeEnum;
+(function (PoThemeTypeEnum) {
+    /** Define o tema como claro. */
+    PoThemeTypeEnum[PoThemeTypeEnum["light"] = 0] = "light";
+    /** Define o tema como escuro. */
+    PoThemeTypeEnum[PoThemeTypeEnum["dark"] = 1] = "dark";
+})(PoThemeTypeEnum || (PoThemeTypeEnum = {}));
+
+/**
+ * Define as cores de ação padrão para temas claros.
+ */
+const poThemeDefaultActions = {
+    /** Cor padrão. */
+    default: 'var(--color-brand-01-base)',
+    /** Cor ao passar o mouse. */
+    hover: 'var(--color-brand-01-dark)',
+    /** Cor quando pressionado. */
+    pressed: 'var(--color-brand-01-darker)',
+    /** Cor quando desabilitado. */
+    disabled: 'var(--color-neutral-light-30)',
+    /** Cor ao focar. */
+    focus: 'var(--color-brand-01-darkest)'
+};
+/**
+ * Define as cores neutras padrão para temas claros.
+ */
+const poThemeDefaultNeutrals = {
+    /** Tons de cinza claro. */
+    light: {
+        '00': '#ffffff',
+        '05': '#fbfbfb',
+        '10': '#eceeee',
+        '20': '#dadedf',
+        '30': '#b6bdbf'
+    },
+    /** Tons de cinza intermediários. */
+    mid: {
+        '40': '#9da7a9',
+        '60': '#6e7c7f'
+    },
+    /** Tons de cinza escuro. */
+    dark: {
+        '70': '#4a5c60',
+        '80': '#2c3739',
+        '90': '#1d2426',
+        '95': '#0b0e0e'
+    }
+};
+/**
+ * Define as cores de feedback padrão para temas claros.
+ */
+const poThemeDefaultFeedback = {
+    /** Cores para feedback negativo. */
+    negative: {
+        lightest: '#f6e6e5',
+        lighter: '#e3aeab',
+        light: '#d58581',
+        base: '#be3e37',
+        dark: '#9b2d27',
+        darker: '#72211d',
+        darkest: '#4a1512'
+    },
+    /** Cores para feedback informativo. */
+    info: {
+        lightest: '#e3e9f7',
+        lighter: '#b0c1e8',
+        light: '#7996d7',
+        base: '#23489f',
+        dark: '#173782',
+        darker: '#0f2557',
+        darkest: '#081536'
+    },
+    /** Cores para feedback positivo. */
+    positive: {
+        lightest: '#def7ed',
+        lighter: '#7ecead',
+        light: '#41b483',
+        base: '#107048',
+        dark: '#0f5236',
+        darker: '#083a25',
+        darkest: '#002415'
+    },
+    /** Cores para feedback de aviso. */
+    warning: {
+        lightest: '#fcf6e3',
+        lighter: '#f7dd97',
+        light: '#f1cd6a',
+        base: '#efba2a',
+        dark: '#d8a20e',
+        darker: '#705200',
+        darkest: '#473400'
+    }
+};
+const poThemeDefaultBrands = {
+    '01': {
+        lightest: '#f2eaf6',
+        lighter: '#d9c2e5',
+        light: '#bd94d1',
+        base: '#753399',
+        dark: '#5b1c7d',
+        darker: '#400e58',
+        darkest: '#260538'
+    },
+    '02': {
+        base: '#b92f72'
+    },
+    '03': {
+        base: '#ffd464'
+    }
+};
+/**
+ * Define estilos específicos por componente e onRoot para temas claros.
+ */
+const poThemeDefaultLightValues = {
+    perComponent: {},
+    onRoot: {
+        /* WIDGET */
+        '--color-widget-color-action-active': 'var(--color-primary-dark-20)',
+        '--color-widget-color-action-hover': 'var(--color-primary-dark-20)',
+        '--color-widget-color-action': 'var(--color-primary)',
+        '--color-widget-color-default': 'var(--color-neutral-dark-70)',
+        '--color-widget-color-title-action': 'var(--color-primary)',
+        '--color-widget-color-widget-primary': 'var(--color-neutral-dark-90)',
+        /* CALENDAR */
+        '--color-calendar-arrow': 'var(--color-primary)',
+        '--color-calendar-title': 'var(--color-primary)',
+        '--color-calendar-text-box-background-active': 'var(--color-neutral-dark-90)',
+        '--color-calendar-background-color-border-today': 'var(--color-primary)',
+        '--color-calendar-color-box-foreground': 'var(--color-neutral-dark-70)',
+        '--color-calendar-color-box-foreground-selected': 'var(--color-neutral-dark-90)',
+        '--color-calendar-color-box-foreground-pressed': 'var(--color-neutral-dark-90)',
+        '--color-calendar-color-box-foreground-range': 'var(--color-primary)',
+        '--color-calendar-color-box-foreground-today': 'var(--color-primary)',
+        /* TOOLBAR */
+        '--color-toolbar-color-default': 'var(--color-primary)',
+        '--color-toolbar-color-title': 'var(--color-action-default)',
+        /* CALENDAR */
+        '--color-calendar-background-color-box-background-range': 'var(--color-primary-light-80)'
+    }
+};
+
+/**
+ * Tokens de tema padrão para temas claros.
+ */
+const poThemeDefaultLight = {
+    color: {
+        brand: poThemeDefaultBrands,
+        action: poThemeDefaultActions,
+        neutral: poThemeDefaultNeutrals,
+        feedback: poThemeDefaultFeedback
+    },
+    perComponent: {
+        ...poThemeDefaultLightValues.perComponent
+    },
+    onRoot: {
+        ...poThemeDefaultLightValues.onRoot
+    }
+};
+/**
+ * Tema padrão.
+ */
+const poThemeDefault = {
+    name: 'default',
+    type: {
+        light: poThemeDefaultLight
+    },
+    active: PoThemeTypeEnum.light
+};
+
+/**
+ * @description
+ *
+ * O `PoThemeService` possibilita a personalização das cores do tema padrão do `PO-UI`, permitindo a alteração dos valores das variáveis de estilo usadas no CSS padrão.
+ *
+ * > Para saber mais sobre como customizar as cores do tema padrão verifique o item [Customizando cores do tema padrão](https://po-ui.io/guides/colors-customization) na aba `Guias`.
+ *
+ * > Obs.: Não está documentado aqui e não indicamos a customização das cores de 'feedback' por motivos de acessibilidade e usabilidade.
+ */
+class PoThemeService {
+    window;
+    document;
+    renderer;
+    theme = poThemeDefault;
+    constructor(window, document, rendererFactory) {
+        this.window = window;
+        this.document = document;
+        this.renderer = rendererFactory.createRenderer(null, null);
+    }
+    /**
+     * Define o tema a ser aplicado no componente, de acordo com o tipo de tema especificado.
+     *
+     * Este método define o tema a ser aplicado no componente com base no objeto `theme` fornecido e no tipo de tema especificado.
+     * Ele atualiza as propriedades do componente para refletir o tema selecionado, como cores, estilos e comportamentos.
+     *
+     * @param {PoTheme} theme - Objeto contendo as definições de tema a serem aplicadas no componente.
+     * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema a ser aplicado, podendo ser 'light' (claro) ou 'dark' (escuro). Por padrão, o tema claro é aplicado.
+     */
+    setTheme(theme, themeType = PoThemeTypeEnum.light) {
+        // Change theme name, remove special characteres and number, replace space with dash
+        theme.name = theme.name
+            .toLowerCase()
+            .replace(/[^a-zA-Z ]/g, '')
+            .replace(/\s+/g, '-');
+        theme.active = themeType;
+        const _themeType = theme.type[PoThemeTypeEnum[themeType]];
+        if (!_themeType) {
+            return;
+        }
+        const colorStyles = _themeType.color ? this.generateThemeStyles(_themeType.color) : '';
+        const perComponentStyles = _themeType.perComponent ? this.generatePerComponentStyles(_themeType.perComponent) : '';
+        const onRootStyles = _themeType.onRoot ? this.generateAdditionalStyles(_themeType.onRoot) : '';
+        const additionalStyles = this.generateAdditionalStyles(_themeType);
+        const combinedStyles = `
+      .${theme.name}-${PoThemeTypeEnum[themeType]}:root { 
+        ${colorStyles} 
+        ${perComponentStyles}
+        ${onRootStyles}
+        ${additionalStyles} 
+      }`;
+        this.applyThemeStyles(combinedStyles);
+        this.changeThemeType(theme);
+    }
+    /**
+     * @docsPrivate
+     *
+     * Gera estilos adicionais com base nos tokens de tema fornecidos, excluindo os tokens de cor.
+     * @param theme Os tokens de tema contendo os estilos adicionais a serem gerados.
+     * @returns Uma string contendo os estilos adicionais formatados.
+     */
+    generateAdditionalStyles(theme) {
+        return Object.entries(theme)
+            .filter(([key]) => !['color', 'perComponent', 'onRoot'].includes(key))
+            .map(([key, value]) => `${key}: ${value};`)
+            .join(' ');
+    }
+    /**
+     * @docsPrivate
+     *
+     * Aplica os estilos de tema ao documento.
+     * @param styleCss Os estilos CSS a serem aplicados.
+     */
+    applyThemeStyles(styleCss) {
+        const styleElement = this.createStyleElement(styleCss);
+        const existingStyleElement = document.head.querySelector('#pouiTheme');
+        if (existingStyleElement) {
+            this.renderer.removeChild(document.head, existingStyleElement);
+        }
+        this.renderer.appendChild(document.head, styleElement);
+    }
+    changeThemeType(theme) {
+        this.cleanThemeActive();
+        this.setThemeActive(theme);
+        document.getElementsByTagName('html')[0].classList.add(...[`${theme.name}-${PoThemeTypeEnum[theme.active]}`]);
+    }
+    /**
+     * Persiste e define o tema do aplicativo com base nos dados armazenados.
+     *
+     * Este método recupera os dados do tema armazenados e os aplica ao aplicativo.
+     *
+     * @returns {PoTheme} Recupera o tema armazenado.
+     */
+    persistThemeActive() {
+        const _theme = this.getThemeActive();
+        this.setTheme(_theme, _theme.active);
+        return _theme;
+    }
+    /**
+     * Altera o tipo do tema armazenado e aplica os novos estilos ao documento.
+     *
+     * Este método altera o tipo do tema armazenado ativo (light/dark)
+     *
+     * @param {PoThemeTypeEnum} themeType O tipo de tema a ser aplicado, light ou dark.
+     */
+    changeCurrentThemeType(type) {
+        const _theme = this.getThemeActive();
+        _theme.active = type;
+        this.changeThemeType(_theme);
+    }
+    /**
+     * Método remove o tema armazenado e limpa todos os estilos de tema
+     * aplicados ao documento.
+     */
+    cleanThemeActive() {
+        const _theme = this.getThemeActive();
+        document.getElementsByTagName('html')[0].classList.remove(`${_theme.name}-${PoThemeTypeEnum[_theme.active]}`);
+        localStorage.removeItem('totvs-theme');
+    }
+    /**
+     * @docsPrivate
+     *
+     * Este método define um dados do tema e o armazena.
+     * @param theme Os tokens de tema contendo os estilos adicionais a serem gerados.
+     */
+    setThemeActive(theme) {
+        if (theme) {
+            localStorage.setItem('totvs-theme', JSON.stringify(theme));
+            this.theme = theme;
+        }
+    }
+    /**
+     * Retorna o tema ativo como um observable.
+     * @returns {PoTheme} Tema ativo.
+     */
+    getThemeActive() {
+        try {
+            const themeData = JSON.parse(localStorage.getItem('totvs-theme'));
+            if (themeData && JSON.stringify(themeData) !== JSON.stringify(this.theme)) {
+                this.theme = themeData;
+            }
+        }
+        catch (error) {
+            console.error('Erro ao obter o tema do armazenamento local:', error);
+        }
+        return this.theme;
+    }
+    /**
+     * @docsPrivate
+     *
+     * Gera estilos CSS com base nos tokens de cores fornecidos.
+     * @param themeColor Os tokens de cor a serem usados para gerar os estilos.
+     * @returns Uma string contendo os estilos CSS gerados.
+     */
+    createStyleElement(css) {
+        const styleElement = this.renderer.createElement('style');
+        styleElement.id = 'pouiTheme';
+        this.renderer.appendChild(styleElement, this.renderer.createText(css));
+        return styleElement;
+    }
+    /**
+     * @docsPrivate
+     *
+     * Gera estilos CSS com base nos tokens de cores fornecidos.
+     * @param themeColor Os tokens de cor a serem usados para gerar os estilos.
+     * @returns Uma string contendo os estilos CSS gerados.
+     */
+    generateThemeStyles(themeColor) {
+        const selectBgIconStyle = this.getSelectBgIconsStyle(themeColor);
+        return [
+            Object.entries(themeColor)
+                .flatMap(([type, values]) => Object.entries(values).flatMap(([tonality, tonalityValues]) => {
+                if (type === 'action') {
+                    return [`--color-${type}-${tonality}: ${tonalityValues};`];
+                }
+                else {
+                    return Object.entries(tonalityValues).map(([level, colorValue]) => `--color-${type}-${tonality}-${level}: ${colorValue};`);
+                }
+            }))
+                .join(''),
+            selectBgIconStyle
+        ].join('');
+    }
+    /**
+     * @docsPrivate
+     *
+     * Gera estilos CSS com base nos tokens per Component fornecidos.
+     * @param themePerComponent Os tokens de cor a serem usados para gerar os estilos.
+     * @returns Uma string contendo os estilos CSS gerados.
+     */
+    generatePerComponentStyles(themePerComponent) {
+        return Object.entries(themePerComponent)
+            .flatMap(([type, values]) => Object.entries(values).flatMap(([level, colorValue]) => [`${type} {${level}: ${colorValue};};`]))
+            .join('');
+    }
+    /**
+     * Define o tema atual como o tema "PoUI Padrão".
+     *
+     * @param {PoThemeTypeEnum} type O tipo de Tema a ser aplicado, light / dark.
+     */
+    setDefaultTheme(type) {
+        this.setTheme(poThemeDefault, type);
+    }
+    /**
+     * @docsPrivate
+     *
+     * Retorna o estilo CSS para o fundo dos ícones do componente po-select, com base nas cores do tema.
+     *
+     * @param {PoThemeColor} themeColor - Objeto contendo as cores do tema.
+     * @returns {string} - Estilo CSS para o fundo dos ícones do po-select.
+     */
+    getSelectBgIconsStyle(themeColor) {
+        let selectBgIcon = '';
+        if (themeColor?.brand?.['01']?.dark) {
+            selectBgIcon += `po-select { --background-image: url("${this.getSelectBgIcon(themeColor.brand['01'].dark)}"); };`;
+        }
+        if (themeColor?.feedback?.negative?.base)
+            selectBgIcon += `po-select.ng-dirty.ng-invalid select { --background-image: url("${this.getSelectBgIcon(themeColor.feedback.negative.base)}"); };`;
+        if (themeColor?.neutral?.light?.['30'])
+            selectBgIcon += `select:disabled { --background-image: url("${this.getSelectBgIcon(themeColor.neutral.light['30'])}"); };`;
+        return selectBgIcon;
+    }
+    /**
+     * @docsPrivate
+     *
+     * Retorna a imagem SVG utilizada como fundo do po-select.
+     *
+     * @param {string} color Cor da Imagem - Utilizada no atributo 'fill'.
+     * @returns {string} Imagem SVG utilizada no po-select.
+     */
+    getSelectBgIcon(color) {
+        let svg = `"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' `;
+        svg = svg.concat(`xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' `);
+        svg = svg.concat(`d='M18.707 8.29301C18.316 7.90201 17.684 7.90201 17.293 8.29301L12 13.586L6.70701 `);
+        svg = svg.concat(`8.29301C6.31601 7.90201 5.68401 7.90201 5.29301 8.29301C4.90201 8.68401 4.90201 `);
+        svg = svg.concat(`9.31601 5.29301 9.70701L11.293 15.707C11.488 15.902 11.744 16 12 16C12.256 16 12.512 `);
+        svg = svg.concat(`15.902 12.707 15.707L18.707 9.70701C19.098 9.31601 19.098 8.68401 18.707 8.29301Z' `);
+        svg = svg.concat(`fill='%23${color}'/%3E%3C/svg%3E%0A");`);
+        return svg;
+    }
+    static ɵfac = function PoThemeService_Factory(t) { return new (t || PoThemeService)(i0.ɵɵinject('Window'), i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i0.RendererFactory2)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoThemeService, factory: PoThemeService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoThemeService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [{ type: Window, decorators: [{
+                type: Inject,
+                args: ['Window']
+            }] }, { type: Document, decorators: [{
+                type: Inject,
+                args: [DOCUMENT]
+            }] }, { type: i0.RendererFactory2 }], null); })();
+
+/**
+ * Módulo responsável por fornecer serviços relacionados ao tema PO.
+ */
+class PoThemeModule {
+    static ɵfac = function PoThemeModule_Factory(t) { return new (t || PoThemeModule)(); };
+    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoThemeModule });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
+            PoThemeService,
+            // Fornecer o objeto 'Window' para uso no serviço
+            { provide: 'Window', useValue: window }
+        ] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoThemeModule, [{
+        type: NgModule,
+        args: [{
+                providers: [
+                    PoThemeService,
+                    // Fornecer o objeto 'Window' para uso no serviço
+                    { provide: 'Window', useValue: window }
+                ],
+                bootstrap: []
+            }]
+    }], null, null); })();
+
 class PoServicesModule {
     static ɵfac = function PoServicesModule_Factory(t) { return new (t || PoServicesModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoServicesModule });
@@ -17980,13 +18447,15 @@ class PoServicesModule {
             PoDateTimeModule,
             PoDialogModule,
             PoLanguageModule,
-            PoNotificationModule, PoActiveOverlayModule,
+            PoNotificationModule,
+            PoThemeModule, PoActiveOverlayModule,
             PoColorPaletteModule,
             PoComponentInjectorModule,
             PoControlPositionModule,
             PoDateTimeModule,
             PoDialogModule,
-            PoNotificationModule] });
+            PoNotificationModule,
+            PoThemeModule] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoServicesModule, [{
         type: NgModule,
@@ -18000,7 +18469,8 @@ class PoServicesModule {
                     PoDateTimeModule,
                     PoDialogModule,
                     PoLanguageModule,
-                    PoNotificationModule
+                    PoNotificationModule,
+                    PoThemeModule
                 ],
                 exports: [
                     PoActiveOverlayModule,
@@ -18010,7 +18480,8 @@ class PoServicesModule {
                     PoDateTimeModule,
                     PoDialogModule,
                     PoI18nPipe,
-                    PoNotificationModule
+                    PoNotificationModule,
+                    PoThemeModule
                 ],
                 providers: [],
                 bootstrap: []
@@ -18023,14 +18494,16 @@ class PoServicesModule {
         PoDateTimeModule,
         PoDialogModule,
         PoLanguageModule,
-        PoNotificationModule], exports: [PoActiveOverlayModule,
+        PoNotificationModule,
+        PoThemeModule], exports: [PoActiveOverlayModule,
         PoColorPaletteModule,
         PoComponentInjectorModule,
         PoControlPositionModule,
         PoDateTimeModule,
         PoDialogModule,
         PoI18nPipe,
-        PoNotificationModule] }); })();
+        PoNotificationModule,
+        PoThemeModule] }); })();
 
 const PO_POPOVER_DEFAULT_POSITION = 'right';
 const PO_POPOVER_DEFAULT_TRIGGER = 'click';
@@ -19021,24 +19494,23 @@ function PoTableColumnLabelComponent_po_tag_0_Template(rf, ctx) { if (rf & 1) {
  * Componente para a criação da representação da legenda, em formato de texto .
  */
 class PoTableColumnLabelComponent {
-    hasLabel = false;
     value;
     ngOnInit() {
         this.checkValueHasLabel();
     }
     checkValueHasLabel() {
-        this.hasLabel = this.value?.label?.trim() ? true : false;
+        return this.value?.label?.trim() ? true : false;
     }
     static ɵfac = function PoTableColumnLabelComponent_Factory(t) { return new (t || PoTableColumnLabelComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableColumnLabelComponent, selectors: [["po-table-column-label"]], inputs: { value: [i0.ɵɵInputFlags.None, "p-value", "value"] }, decls: 1, vars: 1, consts: [[3, "p-color", "p-value", "p-text-color", "p-icon", "p-type", 4, "ngIf"], [3, "p-color", "p-value", "p-text-color", "p-icon", "p-type"]], template: function PoTableColumnLabelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PoTableColumnLabelComponent_po_tag_0_Template, 1, 5, "po-tag", 0);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.hasLabel);
+            i0.ɵɵproperty("ngIf", ctx.checkValueHasLabel());
         } }, dependencies: [i1.NgIf, PoTagComponent], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableColumnLabelComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-column-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-tag\n  *ngIf=\"hasLabel\"\n  [p-color]=\"value?.color\"\n  [p-value]=\"value?.label\"\n  [p-text-color]=\"value?.textColor\"\n  [p-icon]=\"value?.icon\"\n  [p-type]=\"value?.type\"\n>\n</po-tag>\n" }]
+        args: [{ selector: 'po-table-column-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-tag\n  *ngIf=\"checkValueHasLabel()\"\n  [p-color]=\"value?.color\"\n  [p-value]=\"value?.label\"\n  [p-text-color]=\"value?.textColor\"\n  [p-icon]=\"value?.icon\"\n  [p-type]=\"value?.type\"\n>\n</po-tag>\n" }]
     }], null, { value: [{
             type: Input,
             args: ['p-value']
@@ -20551,6 +21023,18 @@ class PoTableBaseComponent {
      * @default `true`
      */
     hideBatchActions = true;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede
+     * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma
+     * leitura clara.
+     *
+     * @default `false`
+     */
+    textWrap = false;
     /**
      * @optional
      *
@@ -21535,7 +22019,7 @@ class PoTableBaseComponent {
         });
     }
     static ɵfac = function PoTableBaseComponent_Factory(t) { return new (t || PoTableBaseComponent)(i0.ɵɵdirectiveInject(PoDateService), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(PoTableService)); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTableBaseComponent, inputs: { hideColumnsManager: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-columns-manager", "hideColumnsManager", convertToBoolean], hideBatchActions: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-batch-actions", "hideBatchActions", convertToBoolean], hideActionFixedColumns: [i0.ɵɵInputFlags.None, "p-hide-action-fixed-columns", "hideActionFixedColumns"], hideTableSearch: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-table-search", "hideTableSearch", convertToBoolean], autoCollapse: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-auto-collapse", "autoCollapse", convertToBoolean], loadingShowMore: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-loading-show-more", "loadingShowMore", convertToBoolean], sort: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-sort", "sort", convertToBoolean], showMoreDisabled: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-show-more-disabled", "showMoreDisabled", convertToBoolean], striped: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-striped", "striped", convertToBoolean], hideSelectAll: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-select-all", "hideSelectAll", convertToBoolean], singleSelect: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-single-select", "singleSelect", convertToBoolean], selectableEntireLine: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-selectable-entire-line", "selectableEntireLine", convertToBoolean], actionRight: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-actions-right", "actionRight", convertToBoolean], maxColumns: [i0.ɵɵInputFlags.None, "p-max-columns", "maxColumns"], filterType: [i0.ɵɵInputFlags.None, "p-filter-type", "filterType"], items: [i0.ɵɵInputFlags.None, "p-items", "items"], columns: [i0.ɵɵInputFlags.None, "p-columns", "columns"], container: [i0.ɵɵInputFlags.None, "p-container", "container"], paramDeleteApi: [i0.ɵɵInputFlags.None, "p-param-delete-api", "paramDeleteApi"], height: [i0.ɵɵInputFlags.None, "p-height", "height"], hideDetail: [i0.ɵɵInputFlags.None, "p-hide-detail", "hideDetail"], literals: [i0.ɵɵInputFlags.None, "p-literals", "literals"], loading: [i0.ɵɵInputFlags.None, "p-loading", "loading"], actions: [i0.ɵɵInputFlags.None, "p-actions", "actions"], selectable: [i0.ɵɵInputFlags.None, "p-selectable", "selectable"], infiniteScroll: [i0.ɵɵInputFlags.None, "p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: [i0.ɵɵInputFlags.None, "p-infinite-scroll-distance", "infiniteScrollDistance"], serviceApi: [i0.ɵɵInputFlags.None, "p-service-api", "serviceApi"], serviceDeleteApi: [i0.ɵɵInputFlags.None, "p-service-delete", "serviceDeleteApi"], spacing: [i0.ɵɵInputFlags.None, "p-spacing", "spacing"], filteredColumns: [i0.ɵɵInputFlags.None, "p-filtered-columns", "filteredColumns"], draggable: [i0.ɵɵInputFlags.None, "p-draggable", "draggable"] }, outputs: { allSelected: "p-all-selected", allUnselected: "p-all-unselected", collapsed: "p-collapsed", expanded: "p-expanded", eventDelete: "p-delete-items", selected: "p-selected", showMore: "p-show-more", sortBy: "p-sort-by", unselected: "p-unselected", changeVisibleColumns: "p-change-visible-columns", columnRestoreManager: "p-restore-column-manager" }, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature] });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTableBaseComponent, inputs: { hideColumnsManager: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-columns-manager", "hideColumnsManager", convertToBoolean], hideBatchActions: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-batch-actions", "hideBatchActions", convertToBoolean], textWrap: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-text-wrap", "textWrap", convertToBoolean], hideActionFixedColumns: [i0.ɵɵInputFlags.None, "p-hide-action-fixed-columns", "hideActionFixedColumns"], hideTableSearch: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-table-search", "hideTableSearch", convertToBoolean], autoCollapse: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-auto-collapse", "autoCollapse", convertToBoolean], loadingShowMore: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-loading-show-more", "loadingShowMore", convertToBoolean], sort: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-sort", "sort", convertToBoolean], showMoreDisabled: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-show-more-disabled", "showMoreDisabled", convertToBoolean], striped: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-striped", "striped", convertToBoolean], hideSelectAll: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-hide-select-all", "hideSelectAll", convertToBoolean], singleSelect: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-single-select", "singleSelect", convertToBoolean], selectableEntireLine: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-selectable-entire-line", "selectableEntireLine", convertToBoolean], actionRight: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-actions-right", "actionRight", convertToBoolean], maxColumns: [i0.ɵɵInputFlags.None, "p-max-columns", "maxColumns"], filterType: [i0.ɵɵInputFlags.None, "p-filter-type", "filterType"], items: [i0.ɵɵInputFlags.None, "p-items", "items"], columns: [i0.ɵɵInputFlags.None, "p-columns", "columns"], container: [i0.ɵɵInputFlags.None, "p-container", "container"], paramDeleteApi: [i0.ɵɵInputFlags.None, "p-param-delete-api", "paramDeleteApi"], height: [i0.ɵɵInputFlags.None, "p-height", "height"], hideDetail: [i0.ɵɵInputFlags.None, "p-hide-detail", "hideDetail"], literals: [i0.ɵɵInputFlags.None, "p-literals", "literals"], loading: [i0.ɵɵInputFlags.None, "p-loading", "loading"], actions: [i0.ɵɵInputFlags.None, "p-actions", "actions"], selectable: [i0.ɵɵInputFlags.None, "p-selectable", "selectable"], infiniteScroll: [i0.ɵɵInputFlags.None, "p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: [i0.ɵɵInputFlags.None, "p-infinite-scroll-distance", "infiniteScrollDistance"], serviceApi: [i0.ɵɵInputFlags.None, "p-service-api", "serviceApi"], serviceDeleteApi: [i0.ɵɵInputFlags.None, "p-service-delete", "serviceDeleteApi"], spacing: [i0.ɵɵInputFlags.None, "p-spacing", "spacing"], filteredColumns: [i0.ɵɵInputFlags.None, "p-filtered-columns", "filteredColumns"], draggable: [i0.ɵɵInputFlags.None, "p-draggable", "draggable"] }, outputs: { allSelected: "p-all-selected", allUnselected: "p-all-unselected", collapsed: "p-collapsed", expanded: "p-expanded", eventDelete: "p-delete-items", selected: "p-selected", showMore: "p-show-more", sortBy: "p-sort-by", unselected: "p-unselected", changeVisibleColumns: "p-change-visible-columns", columnRestoreManager: "p-restore-column-manager" }, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableBaseComponent, [{
         type: Directive
@@ -21545,6 +22029,9 @@ class PoTableBaseComponent {
         }], hideBatchActions: [{
             type: Input,
             args: [{ alias: 'p-hide-batch-actions', transform: convertToBoolean }]
+        }], textWrap: [{
+            type: Input,
+            args: [{ alias: 'p-text-wrap', transform: convertToBoolean }]
         }], hideActionFixedColumns: [{
             type: Input,
             args: ['p-hide-action-fixed-columns']
@@ -22650,7 +23137,7 @@ function PoTableComponent_ng_template_8_ng_container_15_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r66.filteredItems)("ngForTrackBy", ctx_r66.trackBy);
 } }
-const _c20 = (a0, a1, a2, a3) => ({ "po-table-interactive": a0, "po-table-selectable": a1, "po-table-striped": a2, "po-table-data-fixed-columns": a3 });
+const _c20 = (a0, a1, a2, a3, a4) => ({ "po-table-interactive": a0, "po-table-selectable": a1, "po-table-striped": a2, "po-table-data-fixed-columns": a3, "po-table-text-wrap-enabled": a4 });
 const _c21 = (a0, a1) => ({ "no-hover": a0, "po-table-column-drag": a1 });
 function PoTableComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
     const _r179 = i0.ɵɵgetCurrentView();
@@ -22664,11 +23151,11 @@ function PoTableComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
     const _r60 = i0.ɵɵreference(9);
     const _r62 = i0.ɵɵreference(11);
     const ctx_r7 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(16, _c20, ctx_r7.selectable || ctx_r7.sort, ctx_r7.selectable, ctx_r7.striped, ctx_r7.applyFixedColumns()));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction5(16, _c20, ctx_r7.selectable || ctx_r7.sort, ctx_r7.selectable, ctx_r7.striped, ctx_r7.applyFixedColumns(), ctx_r7.textWrap));
     i0.ɵɵattribute("p-spacing", ctx_r7.spacing);
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("po-table-header", !ctx_r7.height);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(21, _c21, ctx_r7.hideSelectAll, ctx_r7.isDraggable));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(22, _c21, ctx_r7.hideSelectAll, ctx_r7.isDraggable));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r7.hasSelectableColumn);
     i0.ɵɵadvance();
@@ -23188,7 +23675,7 @@ function PoTableComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵstyleProp("height", ctx_r9.heightTableContainer, "px");
     i0.ɵɵproperty("itemSize", ctx_r9.itemSize)("minBufferPx", ctx_r9.heightTableContainer < 100 ? 100 : ctx_r9.heightTableContainer)("maxBufferPx", ctx_r9.heightTableContainer < 200 ? 200 : ctx_r9.heightTableContainer);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(22, _c20, ctx_r9.selectable || ctx_r9.sort, ctx_r9.selectable, ctx_r9.striped, ctx_r9.applyFixedColumns()));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction5(22, _c20, ctx_r9.selectable || ctx_r9.sort, ctx_r9.selectable, ctx_r9.striped, ctx_r9.applyFixedColumns(), ctx_r9.textWrap));
     i0.ɵɵattribute("p-spacing", ctx_r9.spacing);
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("top", ctx_r9.inverseOfTranslation);
@@ -24152,7 +24639,7 @@ class PoTableComponent extends PoTableBaseComponent {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, PoTableComponent_div_1_Template, 9, 4, "div", 1)(2, PoTableComponent_div_2_Template, 4, 2, "div", 2)(3, PoTableComponent_div_3_Template, 2, 3, "div", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, PoTableComponent_po_container_4_Template, 2, 1, "po-container", 4)(5, PoTableComponent_ng_template_5_Template, 8, 10, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor)(7, PoTableComponent_div_7_Template, 3, 5, "div", 6)(8, PoTableComponent_ng_template_8_Template, 16, 24, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor)(10, PoTableComponent_ng_template_10_Template, 18, 27, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(4, PoTableComponent_po_container_4_Template, 2, 1, "po-container", 4)(5, PoTableComponent_ng_template_5_Template, 8, 10, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor)(7, PoTableComponent_div_7_Template, 3, 5, "div", 6)(8, PoTableComponent_ng_template_8_Template, 16, 25, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor)(10, PoTableComponent_ng_template_10_Template, 18, 28, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelement(12, "po-popup", 9, 10);
             i0.ɵɵtemplate(14, PoTableComponent_ng_template_14_Template, 1, 1, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor)(16, PoTableComponent_ng_template_16_Template, 1, 2, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor)(18, PoTableComponent_ng_template_18_Template, 1, 1, "ng-template", null, 13, i0.ɵɵtemplateRefExtractor)(20, PoTableComponent_ng_template_20_Template, 5, 6, "ng-template", null, 14, i0.ɵɵtemplateRefExtractor)(22, PoTableComponent_ng_template_22_Template, 2, 3, "ng-template", null, 15, i0.ɵɵtemplateRefExtractor)(24, PoTableComponent_ng_template_24_Template, 1, 1, "ng-template", null, 16, i0.ɵɵtemplateRefExtractor)(26, PoTableComponent_ng_template_26_Template, 2, 2, "ng-template", null, 17, i0.ɵɵtemplateRefExtractor)(28, PoTableComponent_po_table_column_manager_28_Template, 1, 6, "po-table-column-manager", 18);
             i0.ɵɵelementStart(29, "po-modal", 19, 20)(31, "p", 21);
@@ -24182,7 +24669,7 @@ class PoTableComponent extends PoTableBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableComponent, [{
         type: Component,
-        args: [{ selector: 'po-table', providers: [PoDateService], 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=\"po-icon-delete\"\n        [p-danger]=\"true\"\n        [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n        [p-label]=\"literals.delete\"\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=\"po-icon-settings\"\n      p-kind=\"tertiary\"\n      p-tooltip-position=\"left\"\n      [p-aria-label]=\"literals.columnsManager\"\n      [p-tooltip]=\"literals.columnsManager\"\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-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\">\n            <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer [p-literals]=\"literals\" [p-subtitles]=\"column.subtitles\"> </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- 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-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\n\n<!-- Table default-->\n<ng-template #tableTemplate>\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    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead>\n      <tr\n        [ngClass]=\"{ '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-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <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            [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                <svg\n                  cdkDragHandle\n                  width=\"24\"\n                  height=\"24\"\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            [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)\"\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 -->\n          <td\n            *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n          <td\n            *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [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-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      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead class=\"po-table-header-sticky\" [style.top]=\"inverseOfTranslation\">\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              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <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                  <svg\n                    cdkDragHandle\n                    width=\"24\"\n                    height=\"24\"\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 && (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 -->\n            <td\n              *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n            <td\n              *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [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-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-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    class=\"po-icon po-clickable\"\n    [class.po-icon-arrow-up]=\"row.$showDetail\"\n    [class.po-icon-arrow-down]=\"!row.$showDetail\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio [name]=\"idRadio\" [p-checked]=\"row.$selected\" (p-change-selected)=\"selectRow(row)\"></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\"\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      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n    <span #popupTarget class=\"po-icon po-icon-more po-clickable\" (click)=\"togglePopup(row, popupTarget)\"></span>\n  </td>\n</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-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-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<po-modal\n  #modalDelete\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], 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=\"po-icon-delete\"\n        [p-danger]=\"true\"\n        [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n        [p-label]=\"literals.delete\"\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=\"po-icon-settings\"\n      p-kind=\"tertiary\"\n      p-tooltip-position=\"left\"\n      [p-aria-label]=\"literals.columnsManager\"\n      [p-tooltip]=\"literals.columnsManager\"\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-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\">\n            <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer [p-literals]=\"literals\" [p-subtitles]=\"column.subtitles\"> </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- 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-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\n\n<!-- Table default-->\n<ng-template #tableTemplate>\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      <tr\n        [ngClass]=\"{ '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-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <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            [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                <svg\n                  cdkDragHandle\n                  width=\"24\"\n                  height=\"24\"\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            [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)\"\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 -->\n          <td\n            *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n          <td\n            *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [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-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 class=\"po-table-header-sticky\" [style.top]=\"inverseOfTranslation\">\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              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <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                  <svg\n                    cdkDragHandle\n                    width=\"24\"\n                    height=\"24\"\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 && (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 -->\n            <td\n              *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n            <td\n              *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [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-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-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    class=\"po-icon po-clickable\"\n    [class.po-icon-arrow-up]=\"row.$showDetail\"\n    [class.po-icon-arrow-down]=\"!row.$showDetail\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio [name]=\"idRadio\" [p-checked]=\"row.$selected\" (p-change-selected)=\"selectRow(row)\"></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\"\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      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n    <span #popupTarget class=\"po-icon po-icon-more po-clickable\" (click)=\"togglePopup(row, popupTarget)\"></span>\n  </td>\n</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-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-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<po-modal\n  #modalDelete\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" }]
     }], () => [{ type: PoDateService }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: i1.DecimalPipe }, { type: i2.Router }, { type: PoTableService }], { tableRowTemplate: [{
             type: ContentChild,
             args: [PoTableRowTemplateDirective, { static: true }]
@@ -55748,9 +56235,213 @@ function initializeLanguageDefault(config, languageService) {
     return setDefaultLanguage;
 }
 
+/**
+ * Define as cores de ação padrão para temas escuros.
+ */
+const poThemeDefaultActionsDark = {
+    /** Cor padrão. */
+    default: 'var(--color-brand-01-dark)',
+    /** Cor ao passar o mouse. */
+    hover: 'var(--color-brand-01-darker)',
+    /** Cor quando pressionado. */
+    pressed: 'var(--color-brand-01-darkest)',
+    /** Cor quando desabilitado. */
+    disabled: 'var(--color-neutral-mid-40)',
+    /** Cor ao focar. */
+    focus: 'var(--color-brand-01-darkest)'
+};
+/**
+ * Define as cores neutras padrão para temas escuros.
+ */
+const poThemeDefaultNeutralsDark = {
+    /** Tons de cinza claro. */
+    light: {
+        '00': '#1c1c1c',
+        '05': '#202020',
+        '10': '#2b2b2b',
+        '20': '#3b3b3b',
+        '30': '#5a5a5a'
+    },
+    /** Tons de cinza intermediários. */
+    mid: {
+        '40': '#7c7c7c',
+        '60': '#a1a1a1'
+    },
+    /** Tons de cinza escuro. */
+    dark: {
+        '70': '#c1c1c1',
+        '80': '#d9d9d9',
+        '90': '#eeeeee',
+        '95': '#fbfbfb'
+    }
+};
+/**
+ * Define as cores de feedback padrão para temas escuros.
+ */
+const poThemeDefaultFeedbackDark = {
+    /** Cores para feedback negativo. */
+    negative: {
+        lightest: '#4a1512',
+        lighter: '#72211d',
+        light: '#9b2d27',
+        base: '#be3e37',
+        dark: '#d58581',
+        darker: '#e3aeab',
+        darkest: '#f6e6e5'
+    },
+    /** Cores para feedback informativo. */
+    info: {
+        lightest: '#081536',
+        lighter: '#0f2557',
+        light: '#173782',
+        base: '#23489f',
+        dark: '#7996d7',
+        darker: '#b0c1e8',
+        darkest: '#e3e9f7'
+    },
+    /** Cores para feedback positivo. */
+    positive: {
+        lightest: '#002415',
+        lighter: '#083a25',
+        light: '#0f5236',
+        base: '#107048',
+        dark: '#41b483',
+        darker: '#7ecead',
+        darkest: '#def7ed'
+    },
+    /** Cores para feedback de aviso. */
+    warning: {
+        lightest: '#473400',
+        lighter: '#705200',
+        light: '#d8a20e',
+        base: '#efba2a',
+        dark: '#f1cd6a',
+        darker: '#f7dd97',
+        darkest: '#fcf6e3'
+    }
+};
+/**
+ * Define estilos específicos por componente e onRoot para temas escuros.
+ */
+const poThemeDefaultDarkValues = {
+    perComponent: {
+        /** TAB */
+        '.po-tab-border-active': {
+            'background-color': 'var(--color-tab-button-box-shadow-active, var(--color))'
+        },
+        /** GAUGE */
+        '.po-gauge-wrapper': {
+            'background-color': 'var(--color-neutral-light-00)'
+        },
+        /** OVERLAY */
+        'po-overlay': {
+            '--color-overlay': 'var(--color-neutral-light-20)'
+        },
+        /** MODAL */
+        'po-modal': {
+            '--color-overlay': 'var(--color-neutral-light-20)'
+        },
+        /** TOASTER */
+        'po-toaster': {
+            '--color-icon': 'var(--color-neutral-dark-80)'
+        },
+        /** BADGE */
+        'po-badge': {
+            '--color': 'var(--color-neutral-dark-95)'
+        },
+        'po-badge[p-status=warning]': {
+            '--color': 'var(--color-neutral-light-00)'
+        },
+        // CHART: AXIS LABEL
+        'po-chart po-chart-container > svg .po-chart-axis-x-label, .po-chart-axis-y-label': {
+            'fill': 'var(--color-neutral-dark-95)'
+        },
+        // RICH-TEXT: color button border
+        'po-rich-text-toolbar .po-button-default.po-rich-text-toolbar-color-picker-button': {
+            'border-style': 'solid'
+        },
+        // LINK: item visitado
+        'po-link': {
+            '--text-color-visited': 'var(--color-action-default)'
+        },
+        // focus e outline: po-rich-text-body/ poinfo/ po-list-view/ po-stepper-circle (mudar no po-style)
+        'po-rich-text-body .po-rich-text-body:focus-visible, po-info .po-info-link:focus-visible, po-list-view a.po-list-view-title-link:focus-visible, po-stepper-circle .po-stepper-circle:focus-visible': {
+            'border-color': 'var(--color-action-default);',
+            'outline-color': 'var(--color-action-focus);',
+            'outline-width': 'var(--outline-width-focus-visible);',
+            'outline-style': 'solid;',
+            'outline-offset': '2px;'
+        },
+        // background container
+        'po-container': {
+            '--background': 'var(--color-neutral-light-00);'
+        },
+        // Background input disabled
+        'div.po-lookup-filter-content input.po-input, input.po-input, po-datepicker, po-datepicker-range, po-decimal, po-email, po-input, po-login, po-lookup, po-number, po-password, po-url, po-combo, po-search, po-select, po-multiselect': {
+            '--background-disabled': 'var(--color-neutral-light-20);'
+        },
+        // autocomplete dos inputs (setar no po-style)
+        'po-input input:-webkit-autofill, po-datepicker input:-webkit-autofill, po-datepicker-range input:-webkit-autofill, po-decimal input:-webkit-autofill, po-email input:-webkit-autofill, po-input input:-webkit-autofill, po-login input:-webkit-autofill, po-lookup input:-webkit-autofill, po-number input:-webkit-autofill, po-password input:-webkit-autofill, po-url input:-webkit-autofill, po-combo input:-webkit-autofill': {
+            '-webkit-background-clip': 'text',
+            '-webkit-text-fill-color': '#ffffff',
+            'transition': 'background-color 5000s ease-in-out 0s',
+            'box-shadow': 'inset 0 0 20px 20px #23232329'
+        },
+        'po-overlay, po-page-slide': {
+            '--color-overlay': 'var(--color-neutral-light-20)'
+        },
+        'po-select': {
+            '--color-hover': 'var(--color-action-hover);'
+        },
+        'po-select select': {
+            '--color': 'var(--color-neutral-light-30);'
+        }
+    },
+    onRoot: {
+        /* CORES LEGADAS */
+        '--color-neutral': 'var(--color-neutral-dark-70)',
+        '--color-secondary': 'var(--color-action-default)',
+        '--color-secondary-light-20': 'var(--color-brand-01-lighter)',
+        '--color-secondary-light-40': 'var(--color-brand-01-light)',
+        '--color-secondary-dark-20': 'var(--color-brand-01-dark)',
+        '--color-secondary-dark-40': 'var(--color-brand-01-darker)',
+        '--color-secondary-dark-80': 'var(--color-brand-01-darkest)',
+        '--color-black-alpha-10': 'rgba(255, 255, 255, 0.1)',
+        '--color-black-alpha-15': 'rgba(255, 255, 255, 0.15)',
+        '--color-black-alpha-30': 'rgba(255, 255, 255, 0.3)',
+        '--color-primary': 'var(--color-brand-02-base)',
+        '--color-primary-light-80': 'color-mix(in srgb, var(--color-brand-02-base) 80%, black)',
+        '--color-primary-light-95': 'color-mix(in srgb, var(--color-brand-02-base) 95%, black)',
+        '--color-primary-alpha-50': 'color-mix(in srgb, var(--color-brand-02-base) 50%, white)',
+        '--color-primary-dark-20': 'color-mix(in srgb, var(--color-brand-02-base) 20%, white)',
+        '--color-primary-dark-40': 'color-mix(in srgb, var(--color-brand-02-base) 40%, white)',
+        '--color-secondary-dark-60-alpha-70': 'color-mix(in srgb, var(--color-neutral-mid-60) 70%, white)',
+        '--color-tertiary-light-90': 'color-mix(in srgb, var(--color-brand-03-base) 90%, black)',
+        '--color-tertiary-dark-5': 'color-mix(in srgb, var(--color-brand-03-base) 5%, white)',
+        /* PO-PAGE  */
+        '--color-page-background-color-page': 'var(--color-neutral-light-00)',
+        /* TOOLBAR BADGE */
+        '--color-toolbar-color-badge-text': 'var(--color-neutral-dark-95)',
+        /* POPOVER */
+        '--shadow-popover-box-shadow': '0 0 4px 0 var(--color-neutral-light-20)',
+        '--shadow-popover-box-shadow-arrow': '-1px -1px 1px 0 var(--color-neutral-light-20)',
+        /* CALENDAR */
+        '--color-calendar-background-color-box-background-range': 'var(--color-brand-01-lightest)',
+        /* STEPPER */
+        '--color-stepper-circle-disabled': 'var(--color-neutral-mid-40)',
+        '--color-stepper-bar-disabled': 'var(--color-neutral-mid-40)',
+        /* TAB */
+        '--po-tab-smart-active': 'var(--color-neutral-dark-95)',
+        '--po-tab-smart-background-item-selected': 'var(--color-brand-01-lighter)',
+        '--po-tab-smart-background-hover': 'var(--color-brand-01-lightest)'
+    }
+};
+
+/* eslint-disable @typescript-eslint/naming-convention */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, 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, 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, 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, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, 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, PoTimeModule, PoTimePipe, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poBreadcrumbLiterals, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poTabsLiterals, returnPoI18nService };
+export { ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, 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, 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, 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, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, 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, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poBreadcrumbLiterals, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poTabsLiterals, poThemeDefault, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultDarkValues, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map