@po-ui/ng-components 18.19.1 → 18.20.0

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

@@ -19622,6 +19622,36 @@ class PoNotificationModule {
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoNotificationModule, { imports: [CommonModule, PoButtonModule, PoIconModule, PoToasterModule] }); })();
 
+/**
+ * Enum para definir os níveis de acessibilidade suportados pelo serviço de temas.
+ *
+ * @usedBy PoThemeService
+ *
+ * @example
+ *
+ * Em um serviço de tema, você pode usar este enum de acessibilidade para alternar entre os níveis de temas suportados.
+ *
+ * ```
+ * import { PoThemeA11yEnum } from '@po-ui/theme';
+ *
+ * // Definindo o nível de acessibilidade ao setar o tema junto com o tipo
+ * themeService.setTheme(...theme, ...type, PoThemeA11yEnum.AA);
+ *
+ * // Definir o tema junto com o nível de acessibilidade
+ * themeService.setThemeA11y(...theme, PoThemeA11yEnum.AAA);
+ *
+ * // Definir o nível de acessibilidade de um tema já aplicado
+ * themeService.setCurrentThemeA11y(PoThemeA11yEnum.AAA);
+ * ```
+ */
+var PoThemeA11yEnum;
+(function (PoThemeA11yEnum) {
+    /** Nível de acessibilidade duplo A (AA) */
+    PoThemeA11yEnum["AA"] = "AA";
+    /** Nível de acessibilidade triplo A (AAA) */
+    PoThemeA11yEnum["AAA"] = "AAA";
+})(PoThemeA11yEnum || (PoThemeA11yEnum = {}));
+
 /**
  * Enum para definir os tipos de tema suportados pelo serviço de temas.
  *
@@ -19639,6 +19669,9 @@ class PoNotificationModule {
  *
  * // Definindo o tipo de tema para dark
  * themeService.setTheme(...theme, PoThemeTypeEnum.dark);
+ *
+ * // Definir o tipo do tema de um tema já aplicado
+ * themeService.setCurrentThemeType(PoThemeTypeEnum.dark);
  * ```
  */
 var PoThemeTypeEnum;
@@ -19649,6 +19682,38 @@ var PoThemeTypeEnum;
     PoThemeTypeEnum[PoThemeTypeEnum["dark"] = 1] = "dark";
 })(PoThemeTypeEnum || (PoThemeTypeEnum = {}));
 
+/**
+ * Define estilos específicos por componente e onRoot para temas de acessibilidade AA.
+ */
+const poThemeDefaultAA = {
+    perComponent: {},
+    onRoot: {
+        /*------------------------------------*\
+        COMMON
+        \*------------------------------------*/
+        '--outline-width': 'var(--border-width-md)',
+        '--outline-width-focus-visible': 'var(--border-width-md)'
+    }
+};
+
+/**
+ * Define estilos específicos por componente e onRoot para temas de acessibilidade AAA.
+ */
+const poThemeDefaultAAA = {
+    perComponent: {},
+    onRoot: {
+        /*------------------------------------*\
+       FONT
+       \*------------------------------------*/
+        '--font-family': 'Roboto',
+        '--font-family-theme': 'Roboto',
+        '--font-family-theme-bold': 'Roboto-Bold',
+        '--font-family-theme-extra-light': 'Roboto-Condensed-Light',
+        '--font-family-heading': 'Roboto',
+        '--font-family-code': 'Monospace'
+    }
+};
+
 /**
  * Define as cores de ação padrão para temas claros.
  */
@@ -19734,6 +19799,9 @@ const poThemeDefaultFeedback = {
         darkest: '#473400'
     }
 };
+/**
+ * Define as cores da Brand padrão para temas claros.
+ */
 const poThemeDefaultBrands = {
     '01': {
         lightest: '#f2eaf6',
@@ -19752,33 +19820,219 @@ const poThemeDefaultBrands = {
     }
 };
 /**
- * Define estilos específicos por componente e onRoot para temas claros.
+ * Define estilos específicos por componente e onRoot para temas claros para AAA.
  */
 const poThemeDefaultLightValues = {
     perComponent: {},
+    onRoot: {}
+};
+
+/**
+ * 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: '#0079b8',
+        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'
+    }
+};
+const poThemeDefaultBrandsDark = {
+    '01': {
+        lightest: '#260538',
+        lighter: '#400e58',
+        light: '#5b1c7d',
+        base: '#753399',
+        dark: '#bd94d1',
+        darker: '#d9c2e5',
+        darkest: '#f2eaf6'
+    },
+    '02': {
+        base: '#b92f72'
+    },
+    '03': {
+        base: '#ffd464'
+    }
+};
+/**
+ * Define estilos específicos por componente e onRoot para temas escuros.
+ */
+const poThemeDefaultDarkValues = {
+    perComponent: {
+        /** TAB */
+        '.po-tab-border-active': {
+            'background-color': '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)',
+            '--color-icon-warning': 'var(--color-neutral-light-00)'
+        },
+        /** 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)'
+        },
+        // 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-05)'
+        },
+        /** SELECT */
+        'po-select': {
+            '--color-hover': 'var(--color-action-hover);'
+        }
+    },
     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-brand-02-base)',
-        '--color-widget-color-default': 'var(--color-neutral-dark-70)',
-        '--color-widget-color-title-action': 'var(--color-brand-02-base)',
-        '--color-widget-color-widget-primary': 'var(--color-neutral-dark-90)',
-        /* CALENDAR */
-        '--color-calendar-arrow': 'var(--color-brand-02-base)',
-        '--color-calendar-title': 'var(--color-brand-02-base)',
-        '--color-calendar-text-box-background-active': 'var(--color-neutral-dark-90)',
-        '--color-calendar-background-color-border-today': 'var(--color-brand-02-base)',
-        '--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-brand-02-base)',
-        '--color-calendar-color-box-foreground-today': 'var(--color-brand-02-base)',
-        /* TOOLBAR */
-        '--color-toolbar-color-default': 'var(--color-brand-02-base)',
-        '--color-toolbar-color-title': 'var(--color-action-default)',
+        /* 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-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)',
+        /* PAGE  */
+        '--color-page-background-color-page': 'var(--color-neutral-light-05)',
+        /* 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-primary-light-80)'
+        '--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)'
     }
 };
 
@@ -19791,12 +20045,17 @@ const poThemeDefaultLight = {
         action: poThemeDefaultActions,
         neutral: poThemeDefaultNeutrals,
         feedback: poThemeDefaultFeedback
-    },
-    perComponent: {
-        ...poThemeDefaultLightValues.perComponent
-    },
-    onRoot: {
-        ...poThemeDefaultLightValues.onRoot
+    }
+};
+/**
+ * Tokens de tema padrão para o tema escuro.
+ */
+const poThemeDefaultDark = {
+    color: {
+        brand: poThemeDefaultBrandsDark,
+        action: poThemeDefaultActionsDark,
+        neutral: poThemeDefaultNeutralsDark,
+        feedback: poThemeDefaultFeedbackDark
     }
 };
 /**
@@ -19804,10 +20063,19 @@ const poThemeDefaultLight = {
  */
 const poThemeDefault = {
     name: 'default',
-    type: {
-        light: poThemeDefaultLight
-    },
-    active: PoThemeTypeEnum.light
+    type: [
+        {
+            light: poThemeDefaultLight,
+            dark: poThemeDefaultDark,
+            a11y: PoThemeA11yEnum.AAA
+        },
+        {
+            light: poThemeDefaultLight,
+            dark: poThemeDefaultDark,
+            a11y: PoThemeA11yEnum.AA
+        }
+    ],
+    active: { type: PoThemeTypeEnum.light, a11y: PoThemeA11yEnum.AAA }
 };
 
 /**
@@ -19832,7 +20100,7 @@ class PoThemeService {
     window;
     document;
     renderer;
-    theme = poThemeDefault;
+    theme;
     _iconToken;
     get iconNameLib() {
         return this._iconToken.NAME_LIB;
@@ -19842,24 +20110,37 @@ class PoThemeService {
         this.document = document;
         this.renderer = rendererFactory.createRenderer(null, null);
         this._iconToken = value ?? PhosphorIconDictionary;
-    }
-    /**
-     * 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) {
+        // set triple A for all themes (its the base theme)
+        // result: html:root
+        this.setPerComponentAndOnRoot(undefined, poThemeDefaultAAA.perComponent, poThemeDefaultAAA.onRoot);
+        // set double A
+        // result: html[class*="-AA"]:root
+        this.setPerComponentAndOnRoot({ a11y: PoThemeA11yEnum.AA }, poThemeDefaultAA.perComponent, poThemeDefaultAA.onRoot);
+        // set Light mode values
+        // result: html[class*="-light"]:root
+        this.setPerComponentAndOnRoot({ type: PoThemeTypeEnum.light }, poThemeDefaultLightValues.perComponent, poThemeDefaultLightValues.onRoot);
+        // set Dark mode values
+        // result: html[class*="-dark"]:root
+        this.setPerComponentAndOnRoot({ type: PoThemeTypeEnum.dark }, poThemeDefaultDarkValues.perComponent, poThemeDefaultDarkValues.onRoot);
+    }
+    /**
+     * Aplica um tema ao componente de acordo com o tipo de tema e o nível de acessibilidade especificados.
+     *
+     * Este método configura o tema do componente com base no objeto `themeConfig` fornecido, no `themeType` e no `a11yLevel`.
+     * Além disso, ele pode opcionalmente salvar a preferência de tema no localStorage, se solicitado.
+     *
+     * @param {PoTheme} themeConfig - Configuração de tema a ser aplicada ao componente.
+     * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema, podendo ser 'light' (claro) ou 'dark' (escuro). O tema claro é o padrão.
+     * @param {PoThemeA11yEnum} [a11yLevel=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade do tema, podendo ser AA ou AAA. Padrão é AAA.
+     * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema deve ser salva no localStorage para persistência. `true` para salvar, `false` para não salvar.
+     */
+    setTheme(themeConfig, themeType = PoThemeTypeEnum.light, a11yLevel = PoThemeA11yEnum.AAA, persistPreference = true) {
         // 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]];
+        this.formatTheme(themeConfig, themeType, a11yLevel);
+        const _themeActive = Array.isArray(themeConfig.type) && themeConfig.type.length >= 1
+            ? themeConfig.type.find(e => e.a11y === a11yLevel)
+            : themeConfig.type;
+        const _themeType = _themeActive[PoThemeTypeEnum[themeType]];
         if (!_themeType) {
             return;
         }
@@ -19868,14 +20149,91 @@ class PoThemeService {
         const onRootStyles = _themeType.onRoot ? this.generateAdditionalStyles(_themeType.onRoot) : '';
         const additionalStyles = this.generateAdditionalStyles(_themeType);
         const combinedStyles = `
-      .${theme.name}-${PoThemeTypeEnum[themeType]}:root {
+      html.${themeConfig.name}-${PoThemeTypeEnum[themeType]}-${a11yLevel}:root {
         ${colorStyles}
         ${perComponentStyles}
         ${onRootStyles}
         ${additionalStyles}
       }`;
         this.applyThemeStyles(combinedStyles);
-        this.changeThemeType(theme);
+        this.changeThemeType(themeConfig, persistPreference);
+    }
+    /**
+     * @docsPrivate
+     *
+     * Aplica estilos customizados para o componente e para o root HTML, utilizando os tokens definidos.
+     *
+     * Esse método é chamado para inserir ou atualizar estilos no DOM, aplicando tanto tokens de `onRoot` (ex: `--font-family: 'Roboto'`)
+     * quanto estilos específicos de componentes (`perComponent`, como `po-listbox [hidden]: { display: 'flex !important' }`).
+     *
+     * O seletor CSS gerado leva em consideração o tema (`type`) e as configurações de acessibilidade (`a11y`) do tema ativo.
+     * A classe do tema é aplicada no HTML e pode ser formatada como `html[class*="-light-AA"]` para personalizações
+     * em temas específicos.
+     *
+     * @param {PoThemeActive} active - Objeto que define o tema ativo, com `type` e `a11y`.
+     * @param {any} perComponent - Objeto contendo os estilos específicos para componentes a serem aplicados.
+     * @param {any} onRoot - Objeto contendo tokens de estilo que serão aplicados diretamente no seletor `:root` do HTML.
+     *
+     * @example
+     *
+     * // Exemplo de utilização com um tema ativo e tokens de estilo
+     * const themeActive = { type: 'light', a11y: 'AA' };
+     * const perComponentStyles = {
+     *   'po-listbox [hidden]': {
+     *     'display': 'flex !important'
+     *   }
+     * };
+     * const onRootStyles = {
+     *   '--font-family': 'Roboto',
+     *   '--background-color': '#fff'
+     * };
+     *
+     * this.setPerComponentAndOnRoot(themeActive, perComponentStyles, onRootStyles);
+     *
+     * // Resultado:
+     * // Gera e aplica os seguintes estilos no DOM
+     * // html[class*="-light-AA"]:root {
+     * //   --font-family: 'Roboto';
+     * //   --background-color: '#fff';
+     * //   po-listbox [hidden] {
+     * //     display: flex !important;
+     * //   }
+     * // }
+     *
+     */
+    setPerComponentAndOnRoot(active, perComponent, onRoot) {
+        const perComponentStyles = perComponent ? this.generatePerComponentStyles(perComponent) : '';
+        const onRootStyles = onRoot ? this.generateAdditionalStyles(onRoot) : '';
+        let selector = 'html';
+        const typeSelector = active?.type !== undefined ? `-${PoThemeTypeEnum[active.type]}` : '';
+        const accessibilitySelector = active?.a11y !== undefined ? `-${PoThemeA11yEnum[active.a11y]}` : '';
+        if (typeSelector && accessibilitySelector) {
+            selector += `[class*="${typeSelector}${accessibilitySelector}"]`;
+        }
+        else if (!typeSelector && accessibilitySelector) {
+            selector += `[class$="${accessibilitySelector}"]`;
+        }
+        else if (typeSelector) {
+            selector += `[class*="${typeSelector}"]`;
+        }
+        const styleCss = `
+      ${selector}:root {
+        ${perComponentStyles}
+        ${onRootStyles}
+      }
+    `;
+        let styleElement = this.document.head.querySelector('#baseStyle');
+        if (!styleElement) {
+            styleElement = this.renderer.createElement('style');
+            styleElement.id = 'baseStyle';
+            this.renderer.appendChild(styleElement, this.renderer.createText(styleCss));
+            this.renderer.appendChild(this.document.head, styleElement);
+        }
+        else {
+            if (!styleElement.textContent.includes(styleCss.trim())) {
+                this.renderer.appendChild(styleElement, this.renderer.createText(styleCss));
+            }
+        }
     }
     /**
      * @docsPrivate
@@ -19897,17 +20255,23 @@ class PoThemeService {
      * @param styleCss Os estilos CSS a serem aplicados.
      */
     applyThemeStyles(styleCss) {
-        const styleElement = this.createStyleElement(styleCss);
-        const existingStyleElement = document.head.querySelector('#pouiTheme');
+        const styleElement = this.createStyleElement(styleCss, 'theme');
+        const existingStyleElement = document.head.querySelector('#theme');
         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]}`]);
+    changeThemeType(theme, persistPreference = true) {
+        this.cleanThemeActive(persistPreference);
+        if (persistPreference) {
+            this.setThemeLocal(theme);
+        }
+        document
+            .getElementsByTagName('html')[0]
+            .classList.add(...[
+            `${theme.name}-${PoThemeTypeEnum[this.getActiveTypeFromTheme(theme.active)]}-${PoThemeA11yEnum[this.getActiveA11yFromTheme(theme.active)]}`
+        ]);
     }
     /**
      * Persiste e define o tema do aplicativo com base nos dados armazenados.
@@ -19918,9 +20282,35 @@ class PoThemeService {
      */
     persistThemeActive() {
         const _theme = this.getThemeActive();
-        this.setTheme(_theme, _theme.active);
+        this.setTheme(_theme, this.getActiveTypeFromTheme(_theme.active), this.getActiveA11yFromTheme(_theme.active));
         return _theme;
     }
+    formatTheme(themeConfig, themeType, a11yLevel) {
+        themeConfig.name = themeConfig.name
+            .toLowerCase()
+            .replace(/[^a-zA-Z ]/g, '')
+            .replace(/\s+/g, '-');
+        themeConfig.active = { type: themeType, a11y: a11yLevel };
+    }
+    applyTheme(theme) {
+        const _localTheme = this.getThemeActive();
+        if (!theme) {
+            if (_localTheme) {
+                this.persistThemeActive();
+                return _localTheme;
+            }
+            return undefined;
+        }
+        const _type = this.getActiveTypeFromTheme(theme.active);
+        const _accessibility = this.getActiveA11yFromTheme(theme.active);
+        if (_localTheme && JSON.stringify(_localTheme) === JSON.stringify(theme)) {
+            this.persistThemeActive();
+            return _localTheme;
+        }
+        this.formatTheme(theme, _type, _accessibility);
+        this.setTheme(theme, _type, _accessibility);
+        return theme;
+    }
     /**
      * Altera o tipo do tema armazenado e aplica os novos estilos ao documento.
      *
@@ -19930,17 +20320,35 @@ class PoThemeService {
      */
     changeCurrentThemeType(type) {
         const _theme = this.getThemeActive();
-        _theme.active = type;
+        typeof _theme.active === 'object' ? (_theme.active.type = type) : (_theme.active = type);
         this.changeThemeType(_theme);
     }
     /**
      * Método remove o tema armazenado e limpa todos os estilos de tema
      * aplicados ao documento.
+     *
+     * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema não deve ser mantida no localStorage para persistência. `true` para remover, `false` para manter.
      */
-    cleanThemeActive() {
-        const _theme = this.getThemeActive();
-        document.getElementsByTagName('html')[0].classList.remove(`${_theme.name}-${PoThemeTypeEnum[_theme.active]}`);
-        localStorage.removeItem('totvs-theme');
+    cleanThemeActive(persistPreference = true) {
+        // Sufixo existentes hoje
+        const themeSuffixes = ['-light-', '-dark-'];
+        const htmlElement = document.getElementsByTagName('html')[0];
+        // Converte `classList` em um array e remove as classes que terminam com os sufixos especificados
+        Array.from(htmlElement.classList).forEach(className => {
+            if (themeSuffixes.some(suffix => className.includes(suffix))) {
+                htmlElement.classList.remove(className);
+            }
+        });
+        // Remove o tema ativo do localStorage
+        if (persistPreference) {
+            localStorage.removeItem('totvs-theme');
+        }
+    }
+    getActiveTypeFromTheme(active) {
+        return typeof active === 'object' ? active.type : active;
+    }
+    getActiveA11yFromTheme(active) {
+        return typeof active === 'object' ? active.a11y : PoThemeA11yEnum.AAA;
     }
     /**
      * @docsPrivate
@@ -19948,7 +20356,7 @@ class PoThemeService {
      * 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) {
+    setThemeLocal(theme) {
         if (theme) {
             localStorage.setItem('totvs-theme', JSON.stringify(theme));
             this.theme = theme;
@@ -19974,12 +20382,13 @@ class PoThemeService {
      * @docsPrivate
      *
      * Gera estilos CSS com base nos tokens de cores fornecidos.
-     * @param themeColor Os tokens de cor a serem usados para gerar os estilos.
+     * @param css Os tokens de cor a serem usados para gerar os estilos.
+     * @param id id do style a ser aplicado.
      * @returns Uma string contendo os estilos CSS gerados.
      */
-    createStyleElement(css) {
+    createStyleElement(css, id) {
         const styleElement = this.renderer.createElement('style');
-        styleElement.id = 'pouiTheme';
+        styleElement.id = id;
         this.renderer.appendChild(styleElement, this.renderer.createText(css));
         return styleElement;
     }
@@ -20084,6 +20493,44 @@ class PoThemeService {
         svg = svg.concat(`%3E%3C/path%3E%3C/svg%3E");`);
         return svg;
     }
+    /**
+     * Define o tipo (light/dark) quando um tema está sendo aplicado.
+     *
+     * @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.
+     */
+    setThemeType(theme, themeType = PoThemeTypeEnum.light) {
+        const _accessibility = typeof theme.active === 'object' ? theme.active.a11y : PoThemeA11yEnum.AAA;
+        this.setTheme(theme, themeType, _accessibility);
+    }
+    /**
+     *  Define o tipo (light/dark) para um tema já ativo.
+     *
+     * @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.
+     */
+    setCurrentThemeType(themeType = PoThemeTypeEnum.light) {
+        const _theme = this.getThemeActive();
+        this.setThemeType(_theme, themeType);
+    }
+    /**
+     * Define o nivel de acessibilidade quando um tema está sendo aplicado.
+     *
+     * @param {PoTheme} theme - Objeto contendo as definições de tema a serem aplicadas no componente.
+     * @param {PoThemeA11yEnum} [a11y=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade a ser aplicado ao tema, como AA ou AAA. Se não for informado, por padrão a acessibilidade será AAA.
+     */
+    setThemeA11y(theme, a11y = PoThemeA11yEnum.AAA) {
+        const _type = (typeof theme.active === 'object' ? theme.active.type : theme.active) || 0;
+        this.setTheme(theme, _type, a11y);
+    }
+    /**
+     * Define o nivel de acessibilidade para um tema já ativo.
+     *
+     * @param {PoThemeA11yEnum} [a11y=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade a ser aplicado ao tema, como AA ou AAA. Se não for informado, por padrão a acessibilidade será AAA.
+     */
+    setCurrentThemeA11y(a11y = PoThemeA11yEnum.AAA) {
+        const _theme = this.getThemeActive();
+        this.setThemeA11y(_theme, a11y);
+    }
     static ɵfac = function PoThemeService_Factory(t) { return new (t || PoThemeService)(i0.ɵɵinject('Window'), i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(ICONS_DICTIONARY, 8)); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoThemeService, factory: PoThemeService.ɵfac, providedIn: 'root' });
 }
@@ -28759,9 +29206,9 @@ const _c2$b = ["contentElement"];
 const _c3$7 = ["iconArrow"];
 const _c4$2 = ["inp"];
 const _c5 = ["poListbox"];
-function PoComboComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "po-icon", 20);
+function PoComboComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "po-icon", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -28769,50 +29216,50 @@ function PoComboComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("po-field-icon-disabled", ctx_r1.disabled);
     i0.ɵɵproperty("p-icon", ctx_r1.icon);
 } }
-function PoComboComponent_po_clean_9_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_po_clean_11_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 21);
-    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_9_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clear($event)); })("click", function PoComboComponent_po_clean_9_Template_po_clean_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clear(null); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoComboComponent_po_clean_9_Template_po_clean_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clearAndFocus(); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelementStart(0, "po-clean", 22);
+    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_11_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clear($event)); })("click", function PoComboComponent_po_clean_11_Template_po_clean_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clear(null); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoComboComponent_po_clean_11_Template_po_clean_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clearAndFocus(); return i0.ɵɵresetView($event.preventDefault()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("p-element-ref", ctx_r1.inputEl);
     i0.ɵɵattribute("aria-label", ctx_r1.literals.clean);
 } }
-function PoComboComponent_ng_container_13_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_ng_container_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoComboComponent_ng_template_14_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_ng_template_16_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoComboComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_14_ng_container_0_Template, 1, 0, "ng-container", 22);
+function PoComboComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_16_ng_container_0_Template, 1, 0, "ng-container", 23);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const dropdownListbox_r4 = i0.ɵɵreference(20);
+    const dropdownListbox_r4 = i0.ɵɵreference(22);
     i0.ɵɵproperty("ngTemplateOutlet", dropdownListbox_r4);
 } }
-function PoComboComponent_ng_template_16_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_ng_template_18_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoComboComponent_ng_template_16_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_16_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 22);
+function PoComboComponent_ng_template_18_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_18_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 23);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const dropdownListbox_r4 = i0.ɵɵreference(20);
+    const dropdownListbox_r4 = i0.ɵɵreference(22);
     i0.ɵɵproperty("ngTemplateOutlet", dropdownListbox_r4);
 } }
-function PoComboComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_16_ng_template_0_Template, 1, 1, "ng-template", 23);
+function PoComboComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_18_ng_template_0_Template, 1, 1, "ng-template", 24);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const trigger_r5 = i0.ɵɵreference(4);
+    const trigger_r5 = i0.ɵɵreference(5);
     i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r5)("cdkConnectedOverlayOpen", true);
 } }
-function PoComboComponent_ng_template_19_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_ng_template_21_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 24, 7)(2, "po-listbox", 25, 8);
-    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_19_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_19_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_19_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCloseCombo()); });
+    i0.ɵɵelementStart(0, "div", 25, 7)(2, "po-listbox", 26, 8);
+    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_21_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_21_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_21_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCloseCombo()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -29392,31 +29839,31 @@ class PoComboComponent extends PoComboBaseComponent {
                     useExisting: forwardRef(() => PoComboComponent),
                     multi: true
                 }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 21, vars: 31, consts: [["outerContainer", ""], ["trigger", "cdkOverlayOrigin"], ["inp", ""], ["iconArrow", ""], ["dropdownDefault", ""], ["dropdownCDK", ""], ["dropdownListbox", ""], ["containerElement", ""], ["poListbox", "", "contentElement", ""], [3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content", "po-combo-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-combo-input", 3, "click", "keyup", "blur", "keydown", "ngClass", "disabled", "id", "placeholder", "required"], [1, "po-field-icon-container-right"], ["tabindex", "0", "role", "button", "class", "po-combo-clean po-icon-input", 3, "p-element-ref", "p-change-event", "click", "keydown.enter", 4, "ngIf"], [1, "po-combo-arrow", "po-field-icon", 3, "click"], [3, "p-icon"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "p-help", "p-disabled", "p-error-pattern"], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], ["tabindex", "0", "role", "button", 1, "po-combo-clean", "po-icon-input", 3, "p-change-event", "click", "keydown.enter", "p-element-ref"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["p-type", "option", 3, "p-selectcombo-item", "p-update-infinite-scroll", "p-close", "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-container-width"]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 23, vars: 31, consts: [["outerContainer", ""], ["searchContainer", "", "trigger", "cdkOverlayOrigin"], ["inp", ""], ["iconArrow", ""], ["dropdownDefault", ""], ["dropdownCDK", ""], ["dropdownListbox", ""], ["containerElement", ""], ["poListbox", "", "contentElement", ""], [3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content", "po-combo-container-content"], [1, "po-combo-container-wrapper"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-combo-input", 3, "click", "keyup", "blur", "keydown", "ngClass", "disabled", "id", "placeholder", "required"], [1, "po-field-icon-container-right"], ["tabindex", "0", "role", "button", "class", "po-combo-clean po-icon-input", 3, "p-element-ref", "p-change-event", "click", "keydown.enter", 4, "ngIf"], [1, "po-combo-arrow", "po-field-icon", 3, "click"], [3, "p-icon"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "p-help", "p-disabled", "p-error-pattern"], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], ["tabindex", "0", "role", "button", 1, "po-combo-clean", "po-icon-input", 3, "p-change-event", "click", "keydown.enter", "p-element-ref"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["p-type", "option", 3, "p-selectcombo-item", "p-update-infinite-scroll", "p-close", "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-container-width"]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", null, 0)(2, "po-field-container", 9)(3, "div", 10, 1);
-            i0.ɵɵtemplate(5, PoComboComponent_div_5_Template, 2, 3, "div", 11);
-            i0.ɵɵelementStart(6, "input", 12, 2);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility()); })("keyup", function PoComboComponent_Template_input_keyup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyUp($event)); })("blur", function PoComboComponent_Template_input_blur_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("keyup", function PoComboComponent_Template_input_keyup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchOnEnterOrArrow($event, $event.target.value)); })("keydown", function PoComboComponent_Template_input_keydown_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
+            i0.ɵɵelementStart(0, "div", null, 0)(2, "po-field-container", 9)(3, "div", 10, 1)(6, "div", 11);
+            i0.ɵɵtemplate(7, PoComboComponent_div_7_Template, 2, 3, "div", 12);
+            i0.ɵɵelementStart(8, "input", 13, 2);
+            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility()); })("keyup", function PoComboComponent_Template_input_keyup_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyUp($event)); })("blur", function PoComboComponent_Template_input_blur_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("keyup", function PoComboComponent_Template_input_keyup_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchOnEnterOrArrow($event, $event.target.value)); })("keydown", function PoComboComponent_Template_input_keydown_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 13);
-            i0.ɵɵtemplate(9, PoComboComponent_po_clean_9_Template, 1, 2, "po-clean", 14);
-            i0.ɵɵelementStart(10, "div", 15, 3);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility(true)); });
-            i0.ɵɵelement(12, "po-icon", 16);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(13, PoComboComponent_ng_container_13_Template, 1, 0, "ng-container", 17)(14, PoComboComponent_ng_template_14_Template, 1, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor)(16, PoComboComponent_ng_template_16_Template, 1, 2, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelement(18, "po-field-container-bottom", 18);
+            i0.ɵɵelementStart(10, "div", 14);
+            i0.ɵɵtemplate(11, PoComboComponent_po_clean_11_Template, 1, 2, "po-clean", 15);
+            i0.ɵɵelementStart(12, "div", 16, 3);
+            i0.ɵɵlistener("click", function PoComboComponent_Template_div_click_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility(true)); });
+            i0.ɵɵelement(14, "po-icon", 17);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵtemplate(15, PoComboComponent_ng_container_15_Template, 1, 0, "ng-container", 18)(16, PoComboComponent_ng_template_16_Template, 1, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor)(18, PoComboComponent_ng_template_18_Template, 1, 2, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelement(20, "po-field-container-bottom", 19);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(19, PoComboComponent_ng_template_19_Template, 5, 18, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(21, PoComboComponent_ng_template_21_Template, 5, 18, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            const inp_r7 = i0.ɵɵreference(7);
-            const dropdownDefault_r8 = i0.ɵɵreference(15);
-            const dropdownCDK_r9 = i0.ɵɵreference(17);
+            const inp_r7 = i0.ɵɵreference(9);
+            const dropdownDefault_r8 = i0.ɵɵreference(17);
+            const dropdownCDK_r9 = i0.ɵɵreference(19);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-id", ctx.id)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
-            i0.ɵɵadvance(3);
+            i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngIf", ctx.icon);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("po-input-icon-left", ctx.icon);
@@ -29450,7 +29897,7 @@ class PoComboComponent extends PoComboBaseComponent {
                         useExisting: forwardRef(() => PoComboComponent),
                         multi: true
                     }
-                ], template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-id]=\"id\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content po-combo-container-content\">\n      <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n\n      <input\n        #inp\n        class=\"po-combo-input\"\n        [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n        [class.po-input-icon-left]=\"icon\"\n        autocomplete=\"off\"\n        type=\"text\"\n        [attr.name]=\"name\"\n        [disabled]=\"disabled\"\n        [id]=\"id\"\n        [placeholder]=\"disabled ? '' : placeholder\"\n        [required]=\"required\"\n        (click)=\"toggleComboVisibility()\"\n        (keyup)=\"onKeyUp($event)\"\n        (blur)=\"onBlur()\"\n        (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n        (keydown)=\"onKeyDown($event)\"\n      />\n\n      <div class=\"po-field-icon-container-right\">\n        <po-clean\n          tabindex=\"0\"\n          role=\"button\"\n          [attr.aria-label]=\"literals.clean\"\n          class=\"po-combo-clean po-icon-input\"\n          *ngIf=\"clean && !disabled && inp.value\"\n          [p-element-ref]=\"inputEl\"\n          (p-change-event)=\"clear($event)\"\n          (click)=\"clear(null); $event.preventDefault()\"\n          (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n        >\n        </po-clean>\n\n        <div\n          #iconArrow\n          class=\"po-combo-arrow po-field-icon\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          (click)=\"toggleComboVisibility(true)\"\n        >\n          <po-icon\n            [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n            [class.po-field-icon]=\"!disabled\"\n            [class.po-combo-default-border]=\"!disabled && inp.value\"\n            [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n          ></po-icon>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n      <po-listbox\n        #poListbox\n        #contentElement\n        p-type=\"option\"\n        [p-items]=\"visibleOptions\"\n        [p-field-value]=\"dynamicValue\"\n        [p-field-label]=\"dynamicLabel\"\n        [p-template]=\"comboOptionTemplate\"\n        [p-search-value]=\"getInputValue()\"\n        [p-infinite-loading]=\"infiniteLoading\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-filtering]=\"isFiltering\"\n        [p-cache]=\"cache\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        [p-filter-mode]=\"filterMode\"\n        [p-visible]=\"comboOpen\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-should-mark-letter]=\"shouldMarkLetters\"\n        [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n        [p-combo-service]=\"service\"\n        [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n        [p-container-width]=\"containerWidth\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n</div>\n" }]
+                ], template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-id]=\"id\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      #searchContainer\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-combo-container-content\"\n    >\n      <div class=\"po-combo-container-wrapper\">\n        <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n          <po-icon\n            class=\"po-field-icon po-icon-input\"\n            [class.po-field-icon-disabled]=\"disabled\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        </div>\n\n        <input\n          #inp\n          class=\"po-combo-input\"\n          [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n          [class.po-input-icon-left]=\"icon\"\n          autocomplete=\"off\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [required]=\"required\"\n          (click)=\"toggleComboVisibility()\"\n          (keyup)=\"onKeyUp($event)\"\n          (blur)=\"onBlur()\"\n          (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n\n        <div class=\"po-field-icon-container-right\">\n          <po-clean\n            tabindex=\"0\"\n            role=\"button\"\n            [attr.aria-label]=\"literals.clean\"\n            class=\"po-combo-clean po-icon-input\"\n            *ngIf=\"clean && !disabled && inp.value\"\n            [p-element-ref]=\"inputEl\"\n            (p-change-event)=\"clear($event)\"\n            (click)=\"clear(null); $event.preventDefault()\"\n            (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n          >\n          </po-clean>\n\n          <div\n            #iconArrow\n            class=\"po-combo-arrow po-field-icon\"\n            [class.po-field-icon-disabled]=\"disabled\"\n            (click)=\"toggleComboVisibility(true)\"\n          >\n            <po-icon\n              [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n              [class.po-field-icon]=\"!disabled\"\n              [class.po-combo-default-border]=\"!disabled && inp.value\"\n              [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n            ></po-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n      <po-listbox\n        #poListbox\n        #contentElement\n        p-type=\"option\"\n        [p-items]=\"visibleOptions\"\n        [p-field-value]=\"dynamicValue\"\n        [p-field-label]=\"dynamicLabel\"\n        [p-template]=\"comboOptionTemplate\"\n        [p-search-value]=\"getInputValue()\"\n        [p-infinite-loading]=\"infiniteLoading\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-filtering]=\"isFiltering\"\n        [p-cache]=\"cache\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        [p-filter-mode]=\"filterMode\"\n        [p-visible]=\"comboOpen\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-should-mark-letter]=\"shouldMarkLetters\"\n        [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n        [p-combo-service]=\"service\"\n        [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n        [p-container-width]=\"containerWidth\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n</div>\n" }]
     }], () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: PoControlPositionService }, { type: i0.ChangeDetectorRef }, { type: PoLanguageService }], { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
@@ -30123,17 +30570,17 @@ const _c1$m = ["endDateInput"];
 const _c2$a = ["startDateInput"];
 const _c3$6 = ["iconCalendar"];
 const _c4$1 = ["calendarPicker"];
-function PoDatepickerRangeComponent_po_clean_12_Template(rf, ctx) { if (rf & 1) {
+function PoDatepickerRangeComponent_po_clean_14_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 16);
-    i0.ɵɵlistener("p-change-event", function PoDatepickerRangeComponent_po_clean_12_Template_po_clean_p_change_event_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clear()); });
+    i0.ɵɵelementStart(0, "po-clean", 18);
+    i0.ɵɵlistener("p-change-event", function PoDatepickerRangeComponent_po_clean_14_Template_po_clean_p_change_event_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clear()); });
     i0.ɵɵelementEnd();
 } }
-function PoDatepickerRangeComponent_ng_container_17_Template(rf, ctx) { if (rf & 1) {
+function PoDatepickerRangeComponent_ng_container_19_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 17, 4)(3, "po-calendar", 18);
-    i0.ɵɵlistener("ngModelChange", function PoDatepickerRangeComponent_ng_container_17_Template_po_calendar_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCalendarChange($event)); });
+    i0.ɵɵelementStart(1, "div", 19, 4)(3, "po-calendar", 20);
+    i0.ɵɵlistener("ngModelChange", function PoDatepickerRangeComponent_ng_container_19_Template_po_calendar_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCalendarChange($event)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -30578,30 +31025,30 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.startDateInput = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconCalendar = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.calendarPicker = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature(providers$5), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 30, consts: [["dateRangeField", ""], ["startDateInput", ""], ["endDateInput", ""], ["iconCalendar", ""], ["calendarPicker", ""], [3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], [1, "po-datepicker-range-field", "po-input"], [1, "po-datepicker-range-start-date"], ["maxlength", "10", "type", "text", 1, "po-datepicker-range-input", 3, "blur", "focus", "keydown", "keyup", "click", "autocomplete", "disabled", "name", "readonly"], [1, "po-datepicker-range-separator"], [1, "po-datepicker-range-end-date"], [1, "po-datepicker-range-icon"], ["class", "po-icon-input", 3, "p-change-event", 4, "ngIf"], [3, "click", "p-icon"], [3, "p-help", "p-disabled", "p-error-pattern"], [4, "ngIf"], [1, "po-icon-input", 3, "p-change-event"], [1, "po-calendar-range-picker"], ["p-mode", "range", 3, "ngModelChange", "ngModel", "p-max-date", "p-min-date", "p-locale"]], template: function PoDatepickerRangeComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵProvidersFeature(providers$5), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 20, vars: 30, consts: [["dateRangeField", ""], ["startDateInput", ""], ["endDateInput", ""], ["iconCalendar", ""], ["calendarPicker", ""], [3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], [1, "po-field-container-content"], [1, "po-field-container-input"], [1, "po-datepicker-range-field", "po-input"], [1, "po-datepicker-range-start-date"], ["maxlength", "10", "type", "text", 1, "po-datepicker-range-input", 3, "blur", "focus", "keydown", "keyup", "click", "autocomplete", "disabled", "name", "readonly"], [1, "po-datepicker-range-separator"], [1, "po-datepicker-range-end-date"], [1, "po-datepicker-range-icon"], ["class", "po-icon-input", 3, "p-change-event", 4, "ngIf"], [3, "click", "p-icon"], [3, "p-help", "p-disabled", "p-error-pattern"], [4, "ngIf"], [1, "po-icon-input", 3, "p-change-event"], [1, "po-calendar-range-picker"], ["p-mode", "range", 3, "ngModelChange", "ngModel", "p-max-date", "p-min-date", "p-locale"]], template: function PoDatepickerRangeComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "po-field-container", 5)(1, "div", 6, 0)(3, "div", 7)(4, "input", 8, 1);
-            i0.ɵɵlistener("blur", function PoDatepickerRangeComponent_Template_input_blur_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur($event)); })("focus", function PoDatepickerRangeComponent_Template_input_focus_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFocus($event)); })("keydown", function PoDatepickerRangeComponent_Template_input_keydown_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeydown($event)); })("keyup", function PoDatepickerRangeComponent_Template_input_keyup_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyup($event)); })("click", function PoDatepickerRangeComponent_Template_input_click_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.eventOnClick($event)); });
+            i0.ɵɵelementStart(0, "po-field-container", 5)(1, "div", 6)(2, "div", 7)(3, "div", 8, 0)(5, "div", 9)(6, "input", 10, 1);
+            i0.ɵɵlistener("blur", function PoDatepickerRangeComponent_Template_input_blur_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur($event)); })("focus", function PoDatepickerRangeComponent_Template_input_focus_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFocus($event)); })("keydown", function PoDatepickerRangeComponent_Template_input_keydown_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeydown($event)); })("keyup", function PoDatepickerRangeComponent_Template_input_keyup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyup($event)); })("click", function PoDatepickerRangeComponent_Template_input_click_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.eventOnClick($event)); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "div", 9);
-            i0.ɵɵtext(7, "-");
+            i0.ɵɵelementStart(8, "div", 11);
+            i0.ɵɵtext(9, "-");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 10)(9, "input", 8, 2);
-            i0.ɵɵlistener("blur", function PoDatepickerRangeComponent_Template_input_blur_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur($event)); })("focus", function PoDatepickerRangeComponent_Template_input_focus_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFocus($event)); })("keydown", function PoDatepickerRangeComponent_Template_input_keydown_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeydown($event)); })("keyup", function PoDatepickerRangeComponent_Template_input_keyup_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyup($event)); })("click", function PoDatepickerRangeComponent_Template_input_click_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.eventOnClick($event)); });
+            i0.ɵɵelementStart(10, "div", 12)(11, "input", 10, 2);
+            i0.ɵɵlistener("blur", function PoDatepickerRangeComponent_Template_input_blur_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur($event)); })("focus", function PoDatepickerRangeComponent_Template_input_focus_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFocus($event)); })("keydown", function PoDatepickerRangeComponent_Template_input_keydown_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeydown($event)); })("keyup", function PoDatepickerRangeComponent_Template_input_keyup_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyup($event)); })("click", function PoDatepickerRangeComponent_Template_input_click_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.eventOnClick($event)); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 11);
-            i0.ɵɵtemplate(12, PoDatepickerRangeComponent_po_clean_12_Template, 1, 0, "po-clean", 12);
+            i0.ɵɵelementStart(13, "div", 13);
+            i0.ɵɵtemplate(14, PoDatepickerRangeComponent_po_clean_14_Template, 1, 0, "po-clean", 14);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "div", 11)(14, "po-icon", 13, 3);
-            i0.ɵɵlistener("click", function PoDatepickerRangeComponent_Template_po_icon_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCalendar()); });
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(16, "po-field-container-bottom", 14);
+            i0.ɵɵelementStart(15, "div", 13)(16, "po-icon", 15, 3);
+            i0.ɵɵlistener("click", function PoDatepickerRangeComponent_Template_po_icon_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCalendar()); });
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelement(18, "po-field-container-bottom", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(17, PoDatepickerRangeComponent_ng_container_17_Template, 4, 4, "ng-container", 15);
+            i0.ɵɵtemplate(19, PoDatepickerRangeComponent_ng_container_19_Template, 4, 4, "ng-container", 17);
         } if (rf & 2) {
             i0.ɵɵclassProp("po-date-picker-container-disabled", ctx.disabled);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
-            i0.ɵɵadvance();
+            i0.ɵɵadvance(3);
             i0.ɵɵclassProp("po-datepicker-range-field-disabled", ctx.disabled);
             i0.ɵɵattribute("disabled", ctx.disabled);
             i0.ɵɵadvance(3);
@@ -30623,7 +31070,7 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDatepickerRangeComponent, [{
         type: Component,
-        args: [{ selector: 'po-datepicker-range', providers: providers$5, changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container\n  [class.po-date-picker-container-disabled]=\"disabled\"\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div\n    #dateRangeField\n    class=\"po-datepicker-range-field po-input\"\n    [class.po-datepicker-range-field-disabled]=\"disabled\"\n    [attr.disabled]=\"disabled\"\n  >\n    <div class=\"po-datepicker-range-start-date\">\n      <input\n        #startDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [attr.aria-label]=\"label\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"startDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-separator\">-</div>\n\n    <div class=\"po-datepicker-range-end-date\">\n      <input\n        #endDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"endDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <po-clean class=\"po-icon-input\" *ngIf=\"enableCleaner\" (p-change-event)=\"clear()\"></po-clean>\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <po-icon\n        #iconCalendar\n        [p-icon]=\"!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled || readonly\"\n        (click)=\"toggleCalendar()\"\n      >\n      </po-icon>\n    </div>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorMessage\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<ng-container *ngIf=\"isCalendarVisible\">\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n</ng-container>\n" }]
+        args: [{ selector: 'po-datepicker-range', providers: providers$5, changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container\n  [class.po-date-picker-container-disabled]=\"disabled\"\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-field-container-input\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-datepicker-range-field-disabled]=\"disabled\"\n        [attr.disabled]=\"disabled\"\n      >\n        <div class=\"po-datepicker-range-start-date\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"label\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          <po-clean class=\"po-icon-input\" *ngIf=\"enableCleaner\" (p-change-event)=\"clear()\"></po-clean>\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          <po-icon\n            #iconCalendar\n            [p-icon]=\"!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'\"\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-disabled]=\"disabled || readonly\"\n            (click)=\"toggleCalendar()\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorMessage\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<ng-container *ngIf=\"isCalendarVisible\">\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n</ng-container>\n" }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoLanguageService }, { type: PoDateService }, { type: i0.ElementRef }], { dateRangeField: [{
             type: ViewChild,
             args: ['dateRangeField', { read: ElementRef, static: true }]
@@ -34784,38 +35231,42 @@ class PoLookupBaseComponent {
         }] }); })();
 
 const _c0$Q = ["inp"];
-function PoLookupComponent_div_1_button_4_Template(rf, ctx) { if (rf & 1) {
+function PoLookupComponent_div_1_po_clean_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 12);
-    i0.ɵɵlistener("click", function PoLookupComponent_div_1_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cleanModel()); });
-    i0.ɵɵelement(1, "po-clean", 13);
+    i0.ɵɵelementStart(0, "po-clean", 13);
+    i0.ɵɵlistener("p-change-event", function PoLookupComponent_div_1_po_clean_5_Template_po_clean_p_change_event_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cleanModel()); })("click", function PoLookupComponent_div_1_po_clean_5_Template_po_clean_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.cleanModel(); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoLookupComponent_div_1_po_clean_5_Template_po_clean_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.cleanModel(); return i0.ɵɵresetView($event.preventDefault()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ariaLabel", ctx_r1.literals.clean);
+    i0.ɵɵnextContext();
+    const inp_r4 = i0.ɵɵreference(3);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-element-ref", inp_r4);
+    i0.ɵɵattribute("aria-label", ctx_r1.literals.clean);
 } }
 function PoLookupComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6)(1, "input", 7, 1);
-    i0.ɵɵlistener("blur", function PoLookupComponent_div_1_Template_input_blur_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.searchEvent()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 8);
-    i0.ɵɵtemplate(4, PoLookupComponent_div_1_button_4_Template, 2, 1, "button", 9);
-    i0.ɵɵelementStart(5, "button", 10, 2);
-    i0.ɵɵlistener("click", function PoLookupComponent_div_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openLookup()); });
-    i0.ɵɵelement(7, "po-icon", 11);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "input", 8, 1);
+    i0.ɵɵlistener("blur", function PoLookupComponent_div_1_Template_input_blur_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.searchEvent()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 9);
+    i0.ɵɵtemplate(5, PoLookupComponent_div_1_po_clean_5_Template, 1, 2, "po-clean", 10);
+    i0.ɵɵelementStart(6, "div", 11, 2);
+    i0.ɵɵlistener("p-change-event", function PoLookupComponent_div_1_Template_div_p_change_event_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openLookup()); })("click", function PoLookupComponent_div_1_Template_div_click_6_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.openLookup(); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoLookupComponent_div_1_Template_div_keydown_enter_6_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.openLookup(); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelement(8, "po-icon", 12);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const inp_r4 = i0.ɵɵreference(2);
+    const inp_r4 = i0.ɵɵreference(3);
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("po-lookup-disabled", ctx_r1.disabled);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.clean && inp_r4.value ? "po-input-double-icon-right" : "po-input-icon-right")("id", ctx_r1.id)("autocomplete", ctx_r1.autocomplete)("disabled", ctx_r1.disabled)("placeholder", ctx_r1.placeholder)("required", ctx_r1.required);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.clean && !ctx_r1.disabled && !!inp_r4.value);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("po-lookup-button-disabled", ctx_r1.disabled);
-    i0.ɵɵproperty("ariaLabel", ctx_r1.literals.search)("disabled", ctx_r1.disabled);
+    i0.ɵɵclassProp("po-field-icon-disabled", ctx_r1.disabled);
+    i0.ɵɵproperty("ariaLabel", ctx_r1.literals.search);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("po-field-icon", !ctx_r1.disabled);
 } }
 function PoLookupComponent_ng_template_3_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 18);
@@ -34837,26 +35288,28 @@ function PoLookupComponent_ng_template_3_po_disclaimer_4_Template(rf, ctx) { if
     i0.ɵɵclassProp("po-clickable", disclaimer_r7.value === "" && !ctx_r1.disabled);
     i0.ɵɵproperty("p-label", disclaimer_r7.label)("p-value", disclaimer_r7.value)("p-hide-close", disclaimer_r7.value === "" || ctx_r1.disabled);
 } }
-function PoLookupComponent_ng_template_3_button_6_Template(rf, ctx) { if (rf & 1) {
+function PoLookupComponent_ng_template_3_po_clean_6_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 20);
-    i0.ɵɵlistener("click", function PoLookupComponent_ng_template_3_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cleanModel()); });
-    i0.ɵɵelement(1, "po-clean", 13);
+    i0.ɵɵelementStart(0, "po-clean", 13);
+    i0.ɵɵlistener("p-change-event", function PoLookupComponent_ng_template_3_po_clean_6_Template_po_clean_p_change_event_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cleanModel()); })("click", function PoLookupComponent_ng_template_3_po_clean_6_Template_po_clean_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.cleanModel(); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoLookupComponent_ng_template_3_po_clean_6_Template_po_clean_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.cleanModel(); return i0.ɵɵresetView($event.preventDefault()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("disabled", ctx_r1.disabled)("ariaLabel", ctx_r1.literals.clean);
+    i0.ɵɵnextContext();
+    const inp_r9 = i0.ɵɵreference(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-element-ref", inp_r9);
+    i0.ɵɵattribute("aria-label", ctx_r1.literals.clean);
 } }
 function PoLookupComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 14, 1);
-    i0.ɵɵtemplate(3, PoLookupComponent_ng_template_3_span_3_Template, 2, 1, "span", 15)(4, PoLookupComponent_ng_template_3_po_disclaimer_4_Template, 1, 5, "po-disclaimer", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵtemplate(6, PoLookupComponent_ng_template_3_button_6_Template, 2, 2, "button", 17);
-    i0.ɵɵelementStart(7, "button", 10, 2);
-    i0.ɵɵlistener("click", function PoLookupComponent_ng_template_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openLookup()); });
-    i0.ɵɵelement(9, "po-icon", 11);
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 15, 1);
+    i0.ɵɵtemplate(3, PoLookupComponent_ng_template_3_span_3_Template, 2, 1, "span", 16)(4, PoLookupComponent_ng_template_3_po_disclaimer_4_Template, 1, 5, "po-disclaimer", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 9);
+    i0.ɵɵtemplate(6, PoLookupComponent_ng_template_3_po_clean_6_Template, 1, 2, "po-clean", 10);
+    i0.ɵɵelementStart(7, "div", 11, 2);
+    i0.ɵɵlistener("p-change-event", function PoLookupComponent_ng_template_3_Template_div_p_change_event_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openLookup()); })("click", function PoLookupComponent_ng_template_3_Template_div_click_7_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.openLookup(); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoLookupComponent_ng_template_3_Template_div_keydown_enter_7_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.openLookup(); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelement(9, "po-icon", 12);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const inp_r9 = i0.ɵɵreference(2);
@@ -34870,9 +35323,12 @@ function PoLookupComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r1.visibleDisclaimers);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.clean && !ctx_r1.disabled);
+    i0.ɵɵproperty("ngIf", ctx_r1.clean && !ctx_r1.disabled && !!inp_r9.value);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ariaLabel", ctx_r1.literals.search)("disabled", ctx_r1.disabled);
+    i0.ɵɵclassProp("po-field-icon-disabled", ctx_r1.disabled);
+    i0.ɵɵproperty("ariaLabel", ctx_r1.literals.search);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("po-field-icon", !ctx_r1.disabled);
 } }
 /* istanbul ignore next */
 const providers$2 = [
@@ -35252,12 +35708,12 @@ class PoLookupComponent extends PoLookupBaseComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature(providers$2), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 11, consts: [["disclaimersTemplate", ""], ["inp", ""], ["iconLookup", ""], [3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["class", "po-lookup", 3, "po-lookup-disabled", 4, "ngIf", "ngIfElse"], [3, "p-help", "p-disabled", "p-error-pattern"], [1, "po-lookup"], ["type", "text", 1, "po-lookup-input", "po-lookup-input-trigger", 3, "blur", "ngClass", "id", "autocomplete", "disabled", "placeholder", "required"], [1, "po-lookup-buttons"], ["type", "button", "class", "po-lookup-button po-lookup-button-clean", 3, "ariaLabel", "click", 4, "ngIf"], [1, "po-lookup-button", "po-lookup-button-trigger", 3, "click", "ariaLabel", "disabled"], ["p-icon", "ICON_SEARCH", 1, "po-icon-input"], ["type", "button", 1, "po-lookup-button", "po-lookup-button-clean", 3, "click", "ariaLabel"], [1, "po-icon-input"], [1, "po-lookup-input", "po-input-icon-right", "po-lookup-input", "po-icon-input", 3, "tabindex", "ngClass"], ["class", "po-lookup-input-placeholder", 4, "ngIf"], ["class", "po-lookup-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "p-close-action", 4, "ngFor", "ngForOf"], ["type", "button", "class", "po-lookup-button po-lookup-button-clean", 3, "disabled", "ariaLabel", "click", 4, "ngIf"], [1, "po-lookup-input-placeholder"], [1, "po-lookup-input-disclaimer", 3, "p-close-action", "p-label", "p-value", "p-hide-close"], ["type", "button", 1, "po-lookup-button", "po-lookup-button-clean", 3, "click", "disabled", "ariaLabel"]], template: function PoLookupComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵProvidersFeature(providers$2), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 11, consts: [["disclaimersTemplate", ""], ["inp", ""], ["iconLookup", ""], [3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["class", "po-field-container-content po-lookup", 3, "po-lookup-disabled", 4, "ngIf", "ngIfElse"], [3, "p-help", "p-disabled", "p-error-pattern"], [1, "po-field-container-content", "po-lookup"], [1, "po-search-container-wrapper"], ["type", "text", 1, "po-lookup-input", "po-lookup-input-trigger", 3, "blur", "ngClass", "id", "autocomplete", "disabled", "placeholder", "required"], [1, "po-field-icon-container-right", "po-lookup-buttons"], ["tabindex", "0", "role", "button", "class", "po-lookup-button po-lookup-button-clean", 3, "p-element-ref", "p-change-event", "click", "keydown.enter", 4, "ngIf"], ["tabindex", "0", "role", "button", 1, "po-lookup-button", "po-lookup-button-trigger", "po-field-icon", 3, "p-change-event", "click", "keydown.enter", "ariaLabel"], ["p-icon", "ICON_SEARCH"], ["tabindex", "0", "role", "button", 1, "po-lookup-button", "po-lookup-button-clean", 3, "p-change-event", "click", "keydown.enter", "p-element-ref"], [1, "po-lookup"], [1, "po-lookup-input", "po-input-icon-right", "po-lookup-input", "po-icon-input", 3, "tabindex", "ngClass"], ["class", "po-lookup-input-placeholder", 4, "ngIf"], ["class", "po-lookup-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "p-close-action", 4, "ngFor", "ngForOf"], [1, "po-lookup-input-placeholder"], [1, "po-lookup-input-disclaimer", 3, "p-close-action", "p-label", "p-value", "p-hide-close"]], template: function PoLookupComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "po-field-container", 3);
-            i0.ɵɵtemplate(1, PoLookupComponent_div_1_Template, 8, 13, "div", 4);
+            i0.ɵɵtemplate(1, PoLookupComponent_div_1_Template, 9, 14, "div", 4);
             i0.ɵɵelement(2, "po-field-container-bottom", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(3, PoLookupComponent_ng_template_3_Template, 10, 17, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(3, PoLookupComponent_ng_template_3_Template, 10, 20, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             const disclaimersTemplate_r10 = i0.ɵɵreference(4);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-id", ctx.id)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
@@ -35269,7 +35725,7 @@ class PoLookupComponent extends PoLookupBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupComponent, [{
         type: Component,
-        args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-lookup\" [class.po-lookup-disabled]=\"disabled\" *ngIf=\"!disclaimers.length; else disclaimersTemplate\">\n    <input\n      #inp\n      class=\"po-lookup-input po-lookup-input-trigger\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [id]=\"id\"\n      type=\"text\"\n      [autocomplete]=\"autocomplete\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      (blur)=\"searchEvent()\"\n    />\n    <div class=\"po-lookup-buttons\">\n      <button\n        *ngIf=\"clean && !disabled && !!inp.value\"\n        type=\"button\"\n        class=\"po-lookup-button po-lookup-button-clean\"\n        [ariaLabel]=\"literals.clean\"\n        (click)=\"cleanModel()\"\n      >\n        <po-clean class=\"po-icon-input\"></po-clean>\n      </button>\n      <button\n        #iconLookup\n        class=\"po-lookup-button po-lookup-button-trigger\"\n        [class.po-lookup-button-disabled]=\"disabled\"\n        [ariaLabel]=\"literals.search\"\n        (click)=\"openLookup()\"\n        [disabled]=\"disabled\"\n      >\n        <po-icon p-icon=\"ICON_SEARCH\" class=\"po-icon-input\"></po-icon>\n      </button>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #disclaimersTemplate>\n  <div class=\"po-lookup\" [class.po-lookup-disabled]=\"disabled\">\n    <div\n      #inp\n      [tabindex]=\"disabled ? -1 : 0\"\n      class=\"po-lookup-input po-input-icon-right po-lookup-input po-icon-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-lookup-input-auto]=\"autoHeight\"\n      [class.po-lookup-input-static]=\"!autoHeight\"\n      [class.po-lookup-input-padding-button-clean]=\"clean\"\n      [class.po-lookup-input-disabled]=\"disabled\"\n    >\n      <span *ngIf=\"placeholder && !disclaimers?.length\" class=\"po-lookup-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-lookup-input-disclaimer\"\n        [p-label]=\"disclaimer.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n      >\n      </po-disclaimer>\n    </div>\n    <div class=\"po-lookup-buttons\">\n      <button\n        *ngIf=\"clean && !disabled\"\n        type=\"button\"\n        class=\"po-lookup-button po-lookup-button-clean\"\n        [disabled]=\"disabled\"\n        [ariaLabel]=\"literals.clean\"\n        (click)=\"cleanModel()\"\n      >\n        <po-clean class=\"po-icon-input\"></po-clean>\n      </button>\n      <button\n        #iconLookup\n        class=\"po-lookup-button po-lookup-button-trigger\"\n        [ariaLabel]=\"literals.search\"\n        (click)=\"openLookup()\"\n        [disabled]=\"disabled\"\n      >\n        <po-icon p-icon=\"ICON_SEARCH\" class=\"po-icon-input\"></po-icon>\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div\n    class=\"po-field-container-content po-lookup\"\n    [class.po-lookup-disabled]=\"disabled\"\n    *ngIf=\"!disclaimers.length; else disclaimersTemplate\"\n  >\n    <div class=\"po-search-container-wrapper\">\n      <input\n        #inp\n        class=\"po-lookup-input po-lookup-input-trigger\"\n        [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n        [id]=\"id\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [required]=\"required\"\n        (blur)=\"searchEvent()\"\n      />\n\n      <div class=\"po-field-icon-container-right po-lookup-buttons\">\n        <po-clean\n          *ngIf=\"clean && !disabled && !!inp.value\"\n          tabindex=\"0\"\n          role=\"button\"\n          [attr.aria-label]=\"literals.clean\"\n          class=\"po-icon-input po-lookup-button po-lookup-button-clean\"\n          class=\"po-lookup-button po-lookup-button-clean\"\n          [p-element-ref]=\"inp\"\n          (p-change-event)=\"cleanModel()\"\n          (click)=\"cleanModel(); $event.preventDefault()\"\n          (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n        >\n        </po-clean>\n        <div\n          #iconLookup\n          tabindex=\"0\"\n          role=\"button\"\n          class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [ariaLabel]=\"literals.search\"\n          (p-change-event)=\"openLookup()\"\n          (click)=\"openLookup(); $event.preventDefault()\"\n          (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n        >\n          <po-icon p-icon=\"ICON_SEARCH\" [class.po-field-icon]=\"!disabled\"></po-icon>\n        </div>\n      </div>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #disclaimersTemplate>\n  <div class=\"po-lookup\" [class.po-lookup-disabled]=\"disabled\">\n    <div\n      #inp\n      [tabindex]=\"disabled ? -1 : 0\"\n      class=\"po-lookup-input po-input-icon-right po-lookup-input po-icon-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-lookup-input-auto]=\"autoHeight\"\n      [class.po-lookup-input-static]=\"!autoHeight\"\n      [class.po-lookup-input-padding-button-clean]=\"clean\"\n      [class.po-lookup-input-disabled]=\"disabled\"\n    >\n      <span *ngIf=\"placeholder && !disclaimers?.length\" class=\"po-lookup-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-lookup-input-disclaimer\"\n        [p-label]=\"disclaimer.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n      >\n      </po-disclaimer>\n    </div>\n    <div class=\"po-field-icon-container-right po-lookup-buttons\">\n      <po-clean\n        *ngIf=\"clean && !disabled && !!inp.value\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"literals.clean\"\n        class=\"po-lookup-button po-lookup-button-clean\"\n        [p-element-ref]=\"inp\"\n        (p-change-event)=\"cleanModel()\"\n        (click)=\"cleanModel(); $event.preventDefault()\"\n        (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n      >\n      </po-clean>\n      <div\n        #iconLookup\n        tabindex=\"0\"\n        role=\"button\"\n        class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [ariaLabel]=\"literals.search\"\n        (p-change-event)=\"openLookup()\"\n        (click)=\"openLookup(); $event.preventDefault()\"\n        (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n      >\n        <po-icon p-icon=\"ICON_SEARCH\" [class.po-field-icon]=\"!disabled\"></po-icon>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
     }], () => [{ type: PoLanguageService }, { type: i0.Renderer2 }, { type: PoLookupFilterService }, { type: PoLookupModalService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }], { inputEl: [{
             type: ViewChild,
             args: ['inp', { read: ElementRef, static: false }]
@@ -59874,213 +60330,11 @@ function initializeLanguageDefault(config, languageService) {
  *
  */
 
-/**
- * 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)'
-        },
-        /** 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)',
-            '--color-icon-warning': 'var(--color-neutral-light-00)'
-        },
-        /** 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-05)'
-        },
-        '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-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, ICONS_DICTIONARY, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PhosphorIconDictionary, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoButtonType, 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, PoIconDictionary, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poBreadcrumbLiterals, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultDarkValues, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poToasterLiterals, returnPoI18nService };
+export { ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, ICONS_DICTIONARY, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PhosphorIconDictionary, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoButtonType, 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, PoIconDictionary, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poBreadcrumbLiterals, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poToasterLiterals, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map