@po-ui/ng-components 20.11.0 → 20.13.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ViewChild, ChangeDetectorRef, ViewChildren, ContentChildren, HostBinding, input, forwardRef, Renderer2, IterableDiffers, ViewContainerRef, ContentChild, Pipe, DOCUMENT, Injector, provideAppInitializer } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, ViewChild, HostBinding, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ChangeDetectorRef, ViewChildren, ContentChildren, input, forwardRef, Renderer2, IterableDiffers, ViewContainerRef, ContentChild, Pipe, DOCUMENT, Injector, provideAppInitializer } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, DecimalPipe, TitleCasePipe, DatePipe, NgOptimizedImage, Location } from '@angular/common';
 import * as i2 from '@angular/platform-browser';
@@ -8,7 +8,7 @@ import { trigger, transition, style, animate, group, query, animateChild, state,
 import { Subject, filter, fromEvent, debounceTime, Subscription, switchMap, isObservable, of, ReplaySubject, timer, throwError, Observable, map as map$1, catchError as catchError$1, startWith, delay as delay$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, Router, NavigationEnd, NavigationCancel } from '@angular/router';
-import * as i4 from '@angular/cdk/listbox';
+import * as i5$1 from '@angular/cdk/listbox';
 import { CdkListboxModule } from '@angular/cdk/listbox';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, Validators, NgControl, NgForm, ControlContainer } from '@angular/forms';
@@ -17,7 +17,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import * as i1$3 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpEventType, HttpResponse, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { debounceTime as debounceTime$1, take, delay, takeWhile, tap, map, filter as filter$1, distinctUntilChanged, catchError, switchMap as switchMap$1, finalize, mergeMap } from 'rxjs/operators';
-import { BarChart, CustomChart, GaugeChart, LineChart, PieChart } from 'echarts/charts';
+import { BarChart, CustomChart, GaugeChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
 import { GraphicComponent, BrushComponent, DataZoomComponent, GridComponent, LegendComponent, MarkLineComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { use } from 'echarts/core';
@@ -354,9 +354,11 @@ const AnimaliaIconDictionary = {
     ICON_ALIGN_RIGHT: 'an an-text-align-right',
     ICON_ARROW_ARC_LEFT: 'an an-arrow-arc-left',
     ICON_ARROW_DOWN: 'an an-caret-down',
+    ICON_OTHER_ARROW_DOWN: 'an an-arrow-down',
     ICON_ARROW_LEFT: 'an an-caret-left',
     ICON_ARROW_RIGHT: 'an an-caret-right',
     ICON_ARROW_UP: 'an an-caret-up',
+    ICON_OTHER_ARROW_UP: 'an an-arrow-up',
     ICON_CALENDAR: 'an an-calendar-blank',
     ICON_CLEAR_CONTENT: 'an an-x-circle',
     ICON_CLOCK: 'an an-clock',
@@ -370,6 +372,9 @@ const AnimaliaIconDictionary = {
     ICON_EYE: 'an an-eye',
     ICON_EYE_OFF: 'an an-eye-closed',
     ICON_FILTER: 'an an-funnel',
+    ICON_FILL_FILTER: 'an-fill an-funnel',
+    ICON_FUNNEL: 'an an-funnel-simple',
+    ICON_FUNNEL_X: 'an an-funnel-x',
     ICON_HELP: 'an an-question',
     ICON_INFO: 'an an-info',
     ICON_LAST_PAGE: 'an an-caret-double-right',
@@ -384,6 +389,7 @@ const AnimaliaIconDictionary = {
     ICON_MINUS: 'an an-minus',
     ICON_MORE: 'an an-dots-three',
     ICON_MORE_VERT: 'an an-dots-three-vertical',
+    ICON_FILL_MORE_OUTLINE_VERT: 'an-fill an-dots-three-outline-vertical',
     ICON_NOTIFICATION: 'an an-bell',
     ICON_OK: 'an an-check',
     ICON_PARAMETERS: 'an an-sliders-horizontal',
@@ -398,7 +404,11 @@ const AnimaliaIconDictionary = {
     ICON_SETTINGS: 'an an-gear-six',
     ICON_SORT: 'an an-arrows-down-up',
     ICON_SORT_ASC: 'an an-arrow-up',
+    ICON_SORT_ASCENDING: 'an an-sort-ascending',
+    ICON_FILL_SORT_ASCENDING: 'an-fill an-sort-ascending',
     ICON_SORT_DESC: 'an an-arrow-down',
+    ICON_SORT_DESCENDING: 'an an-sort-descending',
+    ICON_FILL_SORT_DESCENDING: 'an-fill an-sort-descending',
     ICON_STAR: 'an an-star',
     ICON_TELEPHONE: 'an an-phone',
     ICON_TEXT_BOLD: 'an an-text-b',
@@ -420,9 +430,11 @@ const AnimaliaIconDictionary = {
  * Permite a exibição de ícones.
  */
 class PoIconComponent {
+    iconElement;
     class;
     _icon;
     _iconToken;
+    hostPIcon = null;
     constructor(value) {
         this._iconToken = value ?? AnimaliaIconDictionary;
     }
@@ -449,10 +461,12 @@ class PoIconComponent {
      */
     set icon(value) {
         if (typeof value === 'string') {
+            this.hostPIcon = value;
             this.processIcon(value);
         }
         else if (value instanceof TemplateRef) {
             this._icon = value;
+            this.hostPIcon = null;
         }
     }
     get icon() {
@@ -498,17 +512,23 @@ class PoIconComponent {
         return iconName.includes(' ') ? iconName.split(' ') : iconName;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoIconComponent, deps: [{ token: ICONS_DICTIONARY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoIconComponent, isStandalone: false, selector: "po-icon", inputs: { icon: ["p-icon", "icon"] }, ngImport: i0, template: "@if (class) {\n  <i [class]=\"class\" aria-hidden=\"true\">\n    <ng-content></ng-content>\n  </i>\n} @else {\n  <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoIconComponent, isStandalone: false, selector: "po-icon", inputs: { icon: ["p-icon", "icon"] }, host: { properties: { "attr.p-icon": "this.hostPIcon" } }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true }], ngImport: i0, template: "@if (class) {\n  <i #iconElement [class]=\"class\" aria-hidden=\"true\">\n    <ng-content></ng-content>\n  </i>\n} @else {\n  <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (class) {\n  <i [class]=\"class\" aria-hidden=\"true\">\n    <ng-content></ng-content>\n  </i>\n} @else {\n  <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n}\n" }]
+            args: [{ selector: 'po-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (class) {\n  <i #iconElement [class]=\"class\" aria-hidden=\"true\">\n    <ng-content></ng-content>\n  </i>\n} @else {\n  <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [ICONS_DICTIONARY]
-                }] }], propDecorators: { icon: [{
+                }] }], propDecorators: { iconElement: [{
+                type: ViewChild,
+                args: ['iconElement', { static: false }]
+            }], hostPIcon: [{
+                type: HostBinding,
+                args: ['attr.p-icon']
+            }], icon: [{
                 type: Input,
                 args: ['p-icon']
             }] } });
@@ -1468,6 +1488,38 @@ function getMeasurableEl(labelElement) {
     const inner = host.querySelector('.po-label, label, .po-label-title, .po-field-title .po-checkbox-label');
     return inner ?? host;
 }
+/**
+ * Retorna a cor do texto baseada no tema atual.
+ * @param type Tipo de cor do texto, pode ser 'lightest' ou 'darkest'.
+ * @returns Valor da cor no formato definido pela propriedade customizada CSS (por exemplo, '#ffffff', 'rgb(255,255,255)').
+ */
+function getTextColor(type) {
+    const isLightTheme = !document.documentElement.className.includes('-dark-');
+    let token = '';
+    if (type === 'lightest') {
+        token = isLightTheme ? '--color-neutral-light-00' : '--color-neutral-dark-95';
+    }
+    else {
+        token = isLightTheme ? '--color-neutral-dark-95' : '--color-neutral-light-00';
+    }
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+/**
+ * Retorna a cor do texto baseada na cor de fundo informada.
+ * @param backgroundColor Cor de fundo em formato 'rgb(r,g,b)' ou 'rgba(r,g,b,a)'.
+ * @returns Valor da cor do texto (por exemplo, '#ffffff', 'rgb(255,255,255)') baseado no brilho percebido da cor de fundo usando a fórmula do espaço de cor YIQ.
+ */
+function getTextColorFromBackgroundColor(backgroundColor) {
+    const rgbValues = backgroundColor
+        .replaceAll(/(?:^rgba?\(|\s+|\)$)/g, '')
+        .split(',')
+        .map(value => Number.parseInt(value, 10));
+    const r = rgbValues[0];
+    const g = rgbValues[1];
+    const b = rgbValues[2];
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? getTextColor('darkest') : getTextColor('lightest');
+}
 
 const poDefaultLanguage = 'PO_DEFAULT_LANGUAGE';
 const poLocaleKey = 'PO_USER_LOCALE';
@@ -1828,7 +1880,8 @@ class PoTagBaseComponent {
      *   - <span class="dot po-color-11"></span> `color-11`
      *   - <span class="dot po-color-12"></span> `color-12`
      *
-     * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background.
+     * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background;
+     * - O componente ajusta automaticamente a cor do texto para garantir legibilidade, escolhendo dinamicamente entre texto claro ou escuro conforme o contraste necessário.
      *
      * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
      */
@@ -2915,8 +2968,22 @@ class PoTagComponent extends PoTagBaseComponent {
         this.onClick('enter');
     }
     styleTag() {
+        // Ajusta a cor do texto com base na cor de fundo computada do elemento
+        requestAnimationFrame(() => {
+            const computedStyle = getComputedStyle(this.poTag.nativeElement);
+            if ((!this.tagColor || this.tagColor?.startsWith('po-color-')) &&
+                !this.removable &&
+                !this.textColor &&
+                computedStyle?.backgroundColor) {
+                const textColor = getTextColorFromBackgroundColor(computedStyle.backgroundColor);
+                this.poTag.nativeElement.style.color = textColor;
+            }
+            else {
+                this.poTag.nativeElement.style.color = '';
+            }
+        });
         if (!this.tagColor && !this.removable) {
-            return { 'background-color': this.customColor, 'color': 'white' };
+            return { 'background-color': this.customColor };
         }
         else {
             return {};
@@ -3406,6 +3473,7 @@ const poAccordionLiteralsDefault = {
 class PoAccordionBaseComponent {
     language = poLocaleDefault;
     _literals;
+    _size = undefined;
     /**
      * @optional
      *
@@ -3477,6 +3545,26 @@ class PoAccordionBaseComponent {
      * @default `false`
      */
     allowExpandItems = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do componente:
+     * - `small`: altura de 32px (disponível apenas para acessibilidade AA).
+     * - `medium`: altura de 44px.
+     *
+     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
+     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
+     *
+     * @default `medium`
+     */
+    set size(value) {
+        this._size = validateSizeFn(value, PoFieldSize);
+    }
+    get size() {
+        return this._size ?? getDefaultSizeFn(PoFieldSize);
+    }
     /**
      * @optional
      *
@@ -3499,7 +3587,7 @@ class PoAccordionBaseComponent {
         this.language = languageService.getShortLanguage();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoAccordionBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoAccordionBaseComponent, isStandalone: true, inputs: { literals: ["p-literals", "literals"], showManagerAccordion: ["p-show-manager-accordion", "showManagerAccordion", convertToBoolean], allowExpandItems: ["p-allow-expand-all-items", "allowExpandItems", convertToBoolean] }, outputs: { expandAllEvent: "p-expand-all", collapseAllEvent: "p-collapse-all" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoAccordionBaseComponent, isStandalone: true, inputs: { literals: ["p-literals", "literals"], showManagerAccordion: ["p-show-manager-accordion", "showManagerAccordion", convertToBoolean], allowExpandItems: ["p-allow-expand-all-items", "allowExpandItems", convertToBoolean], size: ["p-size", "size"] }, outputs: { expandAllEvent: "p-expand-all", collapseAllEvent: "p-collapse-all" }, host: { properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoAccordionBaseComponent, decorators: [{
             type: Directive
@@ -3512,6 +3600,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], allowExpandItems: [{
                 type: Input,
                 args: [{ alias: 'p-allow-expand-all-items', transform: convertToBoolean }]
+            }], size: [{
+                type: HostBinding,
+                args: ['attr.p-size']
+            }, {
+                type: Input,
+                args: ['p-size']
             }], expandAllEvent: [{
                 type: Output,
                 args: ['p-expand-all']
@@ -4560,6 +4654,8 @@ class PoPopupBaseComponent {
     _target;
     // Indica se há um listbox com subitens
     listboxSubitems = false;
+    // template-icon
+    templateIcon = false;
     /** Lista de ações que serão exibidas no componente. */
     set actions(value) {
         this._actions = Array.isArray(value) ? value : [];
@@ -4720,13 +4816,16 @@ class PoPopupBaseComponent {
     closeEvent = new EventEmitter();
     clickItem = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoPopupBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: PoPopupBaseComponent, isStandalone: true, inputs: { listboxSubitems: ["p-listbox-subitems", "listboxSubitems"], actions: ["p-actions", "actions"], hideArrow: ["p-hide-arrow", "hideArrow"], isCornerAlign: ["p-is-corner-align", "isCornerAlign"], position: ["p-position", "position"], customPositions: ["p-custom-positions", "customPositions"], size: ["p-size", "size"], target: ["p-target", "target"] }, outputs: { closeEvent: "p-close", clickItem: "p-click-item" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: PoPopupBaseComponent, isStandalone: true, inputs: { listboxSubitems: ["p-listbox-subitems", "listboxSubitems"], templateIcon: ["p-template-icon", "templateIcon"], actions: ["p-actions", "actions"], hideArrow: ["p-hide-arrow", "hideArrow"], isCornerAlign: ["p-is-corner-align", "isCornerAlign"], position: ["p-position", "position"], customPositions: ["p-custom-positions", "customPositions"], size: ["p-size", "size"], target: ["p-target", "target"] }, outputs: { closeEvent: "p-close", clickItem: "p-click-item" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoPopupBaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { listboxSubitems: [{
                 type: Input,
                 args: ['p-listbox-subitems']
+            }], templateIcon: [{
+                type: Input,
+                args: ['p-template-icon']
             }], actions: [{
                 type: Input,
                 args: ['p-actions']
@@ -5540,6 +5639,14 @@ class PoItemListBaseComponent {
      * Define um ícone que será exibido ao lado esquerdo do rótulo.
      */
     icon;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define se deve ser exibido o ícone indicando subnível.
+     */
+    iconArrowRight;
     // Define a posição do ícone: 'left' (padrão) ou 'right'.
     iconPosition = 'left';
     /**
@@ -5587,7 +5694,7 @@ class PoItemListBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoItemListBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoItemListBaseComponent, isStandalone: true, inputs: { type: ["p-type", "type"], visible: ["p-visible", "visible"], item: ["p-item", "item"], label: ["p-label", "label"], size: ["p-size", "size"], value: ["p-value", "value"], danger: ["p-danger", "danger", convertToBoolean], disabled: ["p-disabled", "disabled"], selected: ["p-selected", "selected", convertToBoolean], separator: ["p-separator", "separator", convertToBoolean], icon: ["p-icon", "icon"], iconPosition: ["p-icon-position", "iconPosition"], checkboxValue: ["p-checkbox-value", "checkboxValue"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], template: ["p-template", "template"], templateContext: ["p-template-context", "templateContext"], searchValue: ["p-search-value", "searchValue"], filterMode: ["p-filter-mode", "filterMode"], isFiltering: ["p-filtering", "isFiltering"], shouldMarkLetters: ["p-should-mark-letter", "shouldMarkLetters"], compareCache: ["p-compare-cache", "compareCache"], comboService: ["p-combo-service", "comboService"], isTabs: ["p-is-tabs", "isTabs"], tabHide: ["p-tab-hide", "tabHide"], activeTabs: ["p-active-tabs", "activeTabs"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { clickItem: "p-click-item", checkboxItem: "p-selectcheckbox-item", comboItem: "p-selectcombo-item", tabsItem: "p-emit-item-tabs", activatedTab: "p-activated-tabs" }, host: { properties: { "attr.p-type": "this.type", "attr.p-size": "this.size" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoItemListBaseComponent, isStandalone: true, inputs: { type: ["p-type", "type"], visible: ["p-visible", "visible"], item: ["p-item", "item"], label: ["p-label", "label"], size: ["p-size", "size"], value: ["p-value", "value"], danger: ["p-danger", "danger", convertToBoolean], disabled: ["p-disabled", "disabled"], selected: ["p-selected", "selected", convertToBoolean], separator: ["p-separator", "separator", convertToBoolean], icon: ["p-icon", "icon"], iconArrowRight: ["p-icon-arrow-right", "iconArrowRight"], iconPosition: ["p-icon-position", "iconPosition"], checkboxValue: ["p-checkbox-value", "checkboxValue"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], template: ["p-template", "template"], templateContext: ["p-template-context", "templateContext"], searchValue: ["p-search-value", "searchValue"], filterMode: ["p-filter-mode", "filterMode"], isFiltering: ["p-filtering", "isFiltering"], shouldMarkLetters: ["p-should-mark-letter", "shouldMarkLetters"], compareCache: ["p-compare-cache", "compareCache"], comboService: ["p-combo-service", "comboService"], isTabs: ["p-is-tabs", "isTabs"], tabHide: ["p-tab-hide", "tabHide"], activeTabs: ["p-active-tabs", "activeTabs"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { clickItem: "p-click-item", checkboxItem: "p-selectcheckbox-item", comboItem: "p-selectcombo-item", tabsItem: "p-emit-item-tabs", activatedTab: "p-activated-tabs" }, host: { properties: { "attr.p-type": "this.type", "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoItemListBaseComponent, decorators: [{
             type: Directive
@@ -5630,6 +5737,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], icon: [{
                 type: Input,
                 args: ['p-icon']
+            }], iconArrowRight: [{
+                type: Input,
+                args: ['p-icon-arrow-right']
             }], iconPosition: [{
                 type: Input,
                 args: ['p-icon-position']
@@ -8035,11 +8145,11 @@ class PoItemListComponent extends PoItemListBaseComponent {
         return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoItemListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoItemListComponent, isStandalone: false, selector: "po-item-list", viewQueries: [{ propertyName: "itemList", first: true, predicate: ["itemList"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container (keydown)=\"onCheckboxItemEmit($event)\">\n  @switch (type) {\n    @default {\n      <div\n        #itemList\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__disabled]=\"disabled || !visible\"\n        [class.po-item-list__selected]=\"(selected || activeTabs) && !disabled\"\n        [class.po-item-list__hidden]=\"tabHide\"\n        [attr.aria-disabled]=\"disabled || !visible\"\n        [attr.aria-label]=\"label\"\n        [class.po-item-list__danger]=\"danger\"\n        class=\"po-item-list po-item-list__action\"\n      >\n        @if (icon && iconPosition === 'left') {\n          <po-icon\n            class=\"po-popup-icon-item po-field-icon\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        }\n        <span class=\"po-item-list-label\">{{ label }}</span>\n\n        @if (icon && iconPosition === 'right') {\n          <po-icon class=\"po-popup-icon-item-right po-field-icon\" [p-icon]=\"icon\"></po-icon>\n        }\n      </div>\n    }\n    @case ('option') {\n      <div\n        #itemList\n        class=\"po-item-list po-item-list__option\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          @switch (keysLabel.length) {\n            @case (0) {\n              <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n            }\n\n            @case (1) {\n              <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n            }\n\n            @case (2) {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }}</span>\n              </div>\n            }\n\n            @default {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>\n              </div>\n            }\n          }\n        }\n\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n    @case ('check') {\n      <div\n        class=\"po-item-list po-item-list__check\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [class.po-item-list__disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onCheckboxItem()\"\n        (keydown)=\"onCheckboxItemEmit($event)\"\n        (keyup)=\"onCheckboxItemEmit($event)\"\n      >\n        <po-checkbox\n          [p-disabled-tabindex]=\"true\"\n          [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-checkbox>\n        @if (!template) {\n          <span class=\"po-item-list__label\">{{ label }}</span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoItemListComponent, isStandalone: false, selector: "po-item-list", viewQueries: [{ propertyName: "itemList", first: true, predicate: ["itemList"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container (keydown)=\"onCheckboxItemEmit($event)\">\n  @switch (type) {\n    @default {\n      <div\n        #itemList\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__disabled]=\"disabled || !visible\"\n        [class.po-item-list__selected]=\"(selected || activeTabs) && !disabled\"\n        [class.po-item-list__hidden]=\"tabHide\"\n        [attr.aria-disabled]=\"disabled || !visible\"\n        [attr.aria-label]=\"label\"\n        [class.po-item-list__danger]=\"danger\"\n        class=\"po-item-list po-item-list__action\"\n      >\n        @if (icon) {\n          <po-icon\n            class=\"po-popup-icon-item po-field-icon\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        }\n        <span class=\"po-item-list-label\">{{ label }}</span>\n\n        @if (iconArrowRight) {\n          <po-icon class=\"po-popup-icon-item-right po-field-icon\" [p-icon]=\"iconArrowRight\"></po-icon>\n        }\n      </div>\n    }\n    @case ('option') {\n      <div\n        #itemList\n        class=\"po-item-list po-item-list__option\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          @switch (keysLabel.length) {\n            @case (0) {\n              <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n            }\n\n            @case (1) {\n              <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n            }\n\n            @case (2) {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }}</span>\n              </div>\n            }\n\n            @default {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>\n              </div>\n            }\n          }\n        }\n\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n    @case ('check') {\n      <div\n        class=\"po-item-list po-item-list__check\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [class.po-item-list__disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onCheckboxItem()\"\n        (keydown)=\"onCheckboxItemEmit($event)\"\n        (keyup)=\"onCheckboxItemEmit($event)\"\n      >\n        <po-checkbox\n          [p-disabled-tabindex]=\"true\"\n          [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-checkbox>\n        @if (!template) {\n          <span class=\"po-item-list__label\">{{ label }}</span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoItemListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-item-list', standalone: false, template: "<ng-container (keydown)=\"onCheckboxItemEmit($event)\">\n  @switch (type) {\n    @default {\n      <div\n        #itemList\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__disabled]=\"disabled || !visible\"\n        [class.po-item-list__selected]=\"(selected || activeTabs) && !disabled\"\n        [class.po-item-list__hidden]=\"tabHide\"\n        [attr.aria-disabled]=\"disabled || !visible\"\n        [attr.aria-label]=\"label\"\n        [class.po-item-list__danger]=\"danger\"\n        class=\"po-item-list po-item-list__action\"\n      >\n        @if (icon && iconPosition === 'left') {\n          <po-icon\n            class=\"po-popup-icon-item po-field-icon\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        }\n        <span class=\"po-item-list-label\">{{ label }}</span>\n\n        @if (icon && iconPosition === 'right') {\n          <po-icon class=\"po-popup-icon-item-right po-field-icon\" [p-icon]=\"icon\"></po-icon>\n        }\n      </div>\n    }\n    @case ('option') {\n      <div\n        #itemList\n        class=\"po-item-list po-item-list__option\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          @switch (keysLabel.length) {\n            @case (0) {\n              <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n            }\n\n            @case (1) {\n              <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n            }\n\n            @case (2) {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }}</span>\n              </div>\n            }\n\n            @default {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>\n              </div>\n            }\n          }\n        }\n\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n    @case ('check') {\n      <div\n        class=\"po-item-list po-item-list__check\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [class.po-item-list__disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onCheckboxItem()\"\n        (keydown)=\"onCheckboxItemEmit($event)\"\n        (keyup)=\"onCheckboxItemEmit($event)\"\n      >\n        <po-checkbox\n          [p-disabled-tabindex]=\"true\"\n          [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-checkbox>\n        @if (!template) {\n          <span class=\"po-item-list__label\">{{ label }}</span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n  }\n</ng-container>\n" }]
+            args: [{ selector: 'po-item-list', standalone: false, template: "<ng-container (keydown)=\"onCheckboxItemEmit($event)\">\n  @switch (type) {\n    @default {\n      <div\n        #itemList\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__disabled]=\"disabled || !visible\"\n        [class.po-item-list__selected]=\"(selected || activeTabs) && !disabled\"\n        [class.po-item-list__hidden]=\"tabHide\"\n        [attr.aria-disabled]=\"disabled || !visible\"\n        [attr.aria-label]=\"label\"\n        [class.po-item-list__danger]=\"danger\"\n        class=\"po-item-list po-item-list__action\"\n      >\n        @if (icon) {\n          <po-icon\n            class=\"po-popup-icon-item po-field-icon\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        }\n        <span class=\"po-item-list-label\">{{ label }}</span>\n\n        @if (iconArrowRight) {\n          <po-icon class=\"po-popup-icon-item-right po-field-icon\" [p-icon]=\"iconArrowRight\"></po-icon>\n        }\n      </div>\n    }\n    @case ('option') {\n      <div\n        #itemList\n        class=\"po-item-list po-item-list__option\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          @switch (keysLabel.length) {\n            @case (0) {\n              <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n            }\n\n            @case (1) {\n              <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n            }\n\n            @case (2) {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }}</span>\n              </div>\n            }\n\n            @default {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>\n              </div>\n            }\n          }\n        }\n\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n    @case ('check') {\n      <div\n        class=\"po-item-list po-item-list__check\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [class.po-item-list__disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onCheckboxItem()\"\n        (keydown)=\"onCheckboxItemEmit($event)\"\n        (keyup)=\"onCheckboxItemEmit($event)\"\n      >\n        <po-checkbox\n          [p-disabled-tabindex]=\"true\"\n          [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-checkbox>\n        @if (!template) {\n          <span class=\"po-item-list__label\">{{ label }}</span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n  }\n</ng-container>\n" }]
         }], propDecorators: { itemList: [{
                 type: ViewChild,
                 args: ['itemList', { static: true }]
@@ -8240,11 +8350,23 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             }
         });
     }
-    onKeydownGoBack(event) {
+    onKeydownGoBack(event, currentGroup) {
         if (event.key === 'Enter') {
             this.goBack(event);
         }
         if (event?.code === 'Escape' || event.code === 'Tab') {
+            if (event.code === 'Tab' && !event.shiftKey && currentGroup?.$subItemTemplate) {
+                return;
+            }
+            this.closeEvent.emit();
+        }
+    }
+    onKeydownTemplate(event) {
+        if (event.code === 'Tab') {
+            if (event.target?.closest('.po-listbox-dropdown')) {
+                event.stopPropagation();
+                return;
+            }
             this.closeEvent.emit();
         }
     }
@@ -8268,7 +8390,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         if (itemListAction?.url && !isDisabled && isVisible) {
             return this.openUrl(itemListAction.url);
         }
-        if (itemListAction?.subItems?.length) {
+        if (itemListAction?.subItems?.length || itemListAction?.$subItemTemplate) {
             this.openGroup(itemListAction, event);
         }
         else if (this.listboxSubitems) {
@@ -8464,11 +8586,11 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         this.closeEvent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "listboxGroupHeader", first: true, predicate: ["listboxGroupHeader"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [attr.p-size]=\"size\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  @if (!hideSearch && type === 'check') {\n    <po-search-list\n      #searchElement\n      (p-change)=\"callChangeSearch($event)\"\n      [p-literals]=\"literalSearch\"\n      [p-field-value]=\"fieldValueSearch\"\n      [p-placeholder]=\"placeholderSearch\"\n      [p-size]=\"size\"\n    ></po-search-list>\n  }\n\n  @if (checkTemplate() && !listboxSubitems) {\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {\n        <li\n          cdkOption=\"selectAll\"\n          [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n          class=\"po-listbox-item-type-check\"\n          (click)=\"changeAll.emit()\"\n          (keydown)=\"changeAllEmit($event)\"\n          (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n        >\n          <po-item-list\n            [p-selected]=\"checkboxAllValue\"\n            p-type=\"check\"\n            [p-label]=\"literals.selectAll\"\n            p-value=\"selectAll\"\n            [p-checkbox-value]=\"checkboxAllValue\"\n            [p-size]=\"size\"\n          >\n          </po-item-list>\n        </li>\n      }\n      @for (item of items; track item) {\n        <li\n          [class.po-listbox-item]=\"visible\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n      @if (!currentGroup) {\n        @for (item of currentItems; track item) {\n          <li\n            #listboxItem\n            [class.po-listbox-item]=\"visible\"\n            [cdkOption]=\"item[fieldLabel]\"\n            [cdkOptionDisabled]=\"returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\"\n            [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n            (click)=\"onSelectItem(item, $event)\"\n            (keydown)=\"onKeyDown(item, $event)\"\n          >\n            @if (item.subItems?.length) {\n              <po-item-list\n                [p-label]=\"item.label\"\n                [p-item]=\"item\"\n                [p-separator]=\"item.separator || separator\"\n                [p-icon]=\"'po-icon-arrow-right'\"\n                [p-icon-position]=\"'right'\"\n              >\n              </po-item-list>\n            } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                [p-label]=\"item[fieldLabel]\"\n                [p-item]=\"item\"\n                [p-icon]=\"item.icon\"\n                [p-separator]=\"item.separator || separator\"\n                [p-danger]=\"item.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(item) || item.selected\"\n              >\n              </po-item-list>\n            }\n          </li>\n        }\n      }\n\n      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'po-icon-arrow-left'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @for (subItem of currentItems; track subItem.label) {\n          @if (subItem.subItems?.length) {\n            <li\n              [cdkOption]=\"subItem[fieldLabel]\"\n              (click)=\"onSelectItem(subItem, $event)\"\n              (keydown)=\"onKeyDown(subItem, $event)\"\n            >\n              <po-item-list\n                [p-label]=\"subItem.label\"\n                [p-item]=\"subItem\"\n                [p-separator]=\"subItem.separator || separator\"\n                [p-icon]=\"'po-icon-arrow-right'\"\n                [p-icon-position]=\"'right'\"\n              >\n              </po-item-list>\n            </li>\n          } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n            <li\n              [cdkOption]=\"subItem[fieldLabel]\"\n              (click)=\"onSelectItem(subItem, $event)\"\n              (keydown)=\"onKeyDown(subItem, $event)\"\n            >\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                [p-label]=\"subItem[fieldLabel]\"\n                [p-item]=\"subItem\"\n                [p-icon]=\"subItem.icon\"\n                [p-separator]=\"subItem.separator || separator\"\n                [p-danger]=\"subItem.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n              >\n              </po-item-list>\n            </li>\n          }\n        }\n      }\n    </ul>\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "directive", type: i4.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i4.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "listboxGroupHeader", first: true, predicate: ["listboxGroupHeader"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [attr.p-size]=\"size\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  @if (!hideSearch && type === 'check') {\n    <po-search-list\n      #searchElement\n      (p-change)=\"callChangeSearch($event)\"\n      [p-literals]=\"literalSearch\"\n      [p-field-value]=\"fieldValueSearch\"\n      [p-placeholder]=\"placeholderSearch\"\n      [p-size]=\"size\"\n    ></po-search-list>\n  }\n\n  @if (checkTemplate() && !listboxSubitems) {\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {\n        <li\n          cdkOption=\"selectAll\"\n          [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n          class=\"po-listbox-item-type-check\"\n          (click)=\"changeAll.emit()\"\n          (keydown)=\"changeAllEmit($event)\"\n          (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n        >\n          <po-item-list\n            [p-selected]=\"checkboxAllValue\"\n            p-type=\"check\"\n            [p-label]=\"literals.selectAll\"\n            p-value=\"selectAll\"\n            [p-checkbox-value]=\"checkboxAllValue\"\n            [p-size]=\"size\"\n          >\n          </po-item-list>\n        </li>\n      }\n      @for (item of items; track item) {\n        <li\n          [class.po-listbox-item]=\"visible\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n      @if (!currentGroup) {\n        @for (item of currentItems; track item) {\n          <li\n            #listboxItem\n            [class.po-listbox-item]=\"visible\"\n            [cdkOption]=\"item[fieldLabel]\"\n            [cdkOptionDisabled]=\"returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\"\n            [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n            (click)=\"onSelectItem(item, $event)\"\n            (keydown)=\"onKeyDown(item, $event)\"\n          >\n            @if (item.subItems?.length || item.$subItemTemplate) {\n              <po-item-list\n                [p-label]=\"item.label\"\n                [p-item]=\"item\"\n                [p-separator]=\"item.separator || separator\"\n                [p-icon]=\"item.icon\"\n                [p-icon-arrow-right]=\"'ICON_ARROW_RIGHT'\"\n                [p-selected]=\"isSelectedItem(item) || item.selected\"\n              >\n              </po-item-list>\n            } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                [p-label]=\"item[fieldLabel]\"\n                [p-item]=\"item\"\n                [p-icon]=\"item.icon\"\n                [p-separator]=\"item.separator || separator\"\n                [p-danger]=\"item.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(item) || item.selected\"\n              >\n              </po-item-list>\n            }\n          </li>\n        }\n      }\n\n      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event, currentGroup)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'ICON_ARROW_LEFT'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @if (currentGroup.$subItemTemplate) {\n          <div\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"onKeydownTemplate($event)\"\n            (keydown.space)=\"$event.stopPropagation()\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"currentGroup.$subItemTemplate; context: { $implicit: currentGroup }\"\n            ></ng-container>\n          </div>\n        } @else {\n          @for (subItem of currentItems; track subItem.label) {\n            @if (subItem.subItems?.length) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  [p-label]=\"subItem.label\"\n                  [p-item]=\"subItem\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-icon]=\"'ICON_ARROW_RIGHT'\"\n                  [p-icon-position]=\"'right'\"\n                >\n                </po-item-list>\n              </li>\n            } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                  [p-label]=\"subItem[fieldLabel]\"\n                  [p-item]=\"subItem\"\n                  [p-icon]=\"subItem.icon\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-danger]=\"subItem.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n                >\n                </po-item-list>\n              </li>\n            }\n          }\n        }\n      }\n    </ul>\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "directive", type: i5$1.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i5$1.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [attr.p-size]=\"size\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  @if (!hideSearch && type === 'check') {\n    <po-search-list\n      #searchElement\n      (p-change)=\"callChangeSearch($event)\"\n      [p-literals]=\"literalSearch\"\n      [p-field-value]=\"fieldValueSearch\"\n      [p-placeholder]=\"placeholderSearch\"\n      [p-size]=\"size\"\n    ></po-search-list>\n  }\n\n  @if (checkTemplate() && !listboxSubitems) {\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {\n        <li\n          cdkOption=\"selectAll\"\n          [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n          class=\"po-listbox-item-type-check\"\n          (click)=\"changeAll.emit()\"\n          (keydown)=\"changeAllEmit($event)\"\n          (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n        >\n          <po-item-list\n            [p-selected]=\"checkboxAllValue\"\n            p-type=\"check\"\n            [p-label]=\"literals.selectAll\"\n            p-value=\"selectAll\"\n            [p-checkbox-value]=\"checkboxAllValue\"\n            [p-size]=\"size\"\n          >\n          </po-item-list>\n        </li>\n      }\n      @for (item of items; track item) {\n        <li\n          [class.po-listbox-item]=\"visible\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n      @if (!currentGroup) {\n        @for (item of currentItems; track item) {\n          <li\n            #listboxItem\n            [class.po-listbox-item]=\"visible\"\n            [cdkOption]=\"item[fieldLabel]\"\n            [cdkOptionDisabled]=\"returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\"\n            [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n            (click)=\"onSelectItem(item, $event)\"\n            (keydown)=\"onKeyDown(item, $event)\"\n          >\n            @if (item.subItems?.length) {\n              <po-item-list\n                [p-label]=\"item.label\"\n                [p-item]=\"item\"\n                [p-separator]=\"item.separator || separator\"\n                [p-icon]=\"'po-icon-arrow-right'\"\n                [p-icon-position]=\"'right'\"\n              >\n              </po-item-list>\n            } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                [p-label]=\"item[fieldLabel]\"\n                [p-item]=\"item\"\n                [p-icon]=\"item.icon\"\n                [p-separator]=\"item.separator || separator\"\n                [p-danger]=\"item.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(item) || item.selected\"\n              >\n              </po-item-list>\n            }\n          </li>\n        }\n      }\n\n      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'po-icon-arrow-left'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @for (subItem of currentItems; track subItem.label) {\n          @if (subItem.subItems?.length) {\n            <li\n              [cdkOption]=\"subItem[fieldLabel]\"\n              (click)=\"onSelectItem(subItem, $event)\"\n              (keydown)=\"onKeyDown(subItem, $event)\"\n            >\n              <po-item-list\n                [p-label]=\"subItem.label\"\n                [p-item]=\"subItem\"\n                [p-separator]=\"subItem.separator || separator\"\n                [p-icon]=\"'po-icon-arrow-right'\"\n                [p-icon-position]=\"'right'\"\n              >\n              </po-item-list>\n            </li>\n          } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n            <li\n              [cdkOption]=\"subItem[fieldLabel]\"\n              (click)=\"onSelectItem(subItem, $event)\"\n              (keydown)=\"onKeyDown(subItem, $event)\"\n            >\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                [p-label]=\"subItem[fieldLabel]\"\n                [p-item]=\"subItem\"\n                [p-icon]=\"subItem.icon\"\n                [p-separator]=\"subItem.separator || separator\"\n                [p-danger]=\"subItem.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n              >\n              </po-item-list>\n            </li>\n          }\n        }\n      }\n    </ul>\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [attr.p-size]=\"size\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  @if (!hideSearch && type === 'check') {\n    <po-search-list\n      #searchElement\n      (p-change)=\"callChangeSearch($event)\"\n      [p-literals]=\"literalSearch\"\n      [p-field-value]=\"fieldValueSearch\"\n      [p-placeholder]=\"placeholderSearch\"\n      [p-size]=\"size\"\n    ></po-search-list>\n  }\n\n  @if (checkTemplate() && !listboxSubitems) {\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {\n        <li\n          cdkOption=\"selectAll\"\n          [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n          class=\"po-listbox-item-type-check\"\n          (click)=\"changeAll.emit()\"\n          (keydown)=\"changeAllEmit($event)\"\n          (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n        >\n          <po-item-list\n            [p-selected]=\"checkboxAllValue\"\n            p-type=\"check\"\n            [p-label]=\"literals.selectAll\"\n            p-value=\"selectAll\"\n            [p-checkbox-value]=\"checkboxAllValue\"\n            [p-size]=\"size\"\n          >\n          </po-item-list>\n        </li>\n      }\n      @for (item of items; track item) {\n        <li\n          [class.po-listbox-item]=\"visible\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n      @if (!currentGroup) {\n        @for (item of currentItems; track item) {\n          <li\n            #listboxItem\n            [class.po-listbox-item]=\"visible\"\n            [cdkOption]=\"item[fieldLabel]\"\n            [cdkOptionDisabled]=\"returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\"\n            [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n            (click)=\"onSelectItem(item, $event)\"\n            (keydown)=\"onKeyDown(item, $event)\"\n          >\n            @if (item.subItems?.length || item.$subItemTemplate) {\n              <po-item-list\n                [p-label]=\"item.label\"\n                [p-item]=\"item\"\n                [p-separator]=\"item.separator || separator\"\n                [p-icon]=\"item.icon\"\n                [p-icon-arrow-right]=\"'ICON_ARROW_RIGHT'\"\n                [p-selected]=\"isSelectedItem(item) || item.selected\"\n              >\n              </po-item-list>\n            } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                [p-label]=\"item[fieldLabel]\"\n                [p-item]=\"item\"\n                [p-icon]=\"item.icon\"\n                [p-separator]=\"item.separator || separator\"\n                [p-danger]=\"item.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(item) || item.selected\"\n              >\n              </po-item-list>\n            }\n          </li>\n        }\n      }\n\n      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event, currentGroup)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'ICON_ARROW_LEFT'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @if (currentGroup.$subItemTemplate) {\n          <div\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"onKeydownTemplate($event)\"\n            (keydown.space)=\"$event.stopPropagation()\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"currentGroup.$subItemTemplate; context: { $implicit: currentGroup }\"\n            ></ng-container>\n          </div>\n        } @else {\n          @for (subItem of currentItems; track subItem.label) {\n            @if (subItem.subItems?.length) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  [p-label]=\"subItem.label\"\n                  [p-item]=\"subItem\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-icon]=\"'ICON_ARROW_RIGHT'\"\n                  [p-icon-position]=\"'right'\"\n                >\n                </po-item-list>\n              </li>\n            } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                  [p-label]=\"subItem[fieldLabel]\"\n                  [p-item]=\"subItem\"\n                  [p-icon]=\"subItem.icon\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-danger]=\"subItem.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n                >\n                </po-item-list>\n              </li>\n            }\n          }\n        }\n      }\n    </ul>\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { listbox: [{
                 type: ViewChild,
                 args: ['listbox', { static: true }]
@@ -8512,6 +8634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
  *
  */
 class PoPopupComponent extends PoPopupBaseComponent {
+    id = `po-popup[${uuid()}]`;
     renderer = inject(Renderer2);
     router = inject(Router);
     poControlPosition = inject(PoControlPositionService);
@@ -8520,6 +8643,11 @@ class PoPopupComponent extends PoPopupBaseComponent {
     listbox;
     //utilizado apenas no theme builder
     poListBoxRef;
+    ngAfterViewInit() {
+        if (this.templateIcon && this.target) {
+            this.target = this.target?.iconElement?.nativeElement;
+        }
+    }
     /**
      * Fecha o componente *popup*.
      *
@@ -8572,7 +8700,7 @@ class PoPopupComponent extends PoPopupBaseComponent {
         if (!item.goBack) {
             this.clickItem.emit(item);
         }
-        if (item.subItems || item.goBack) {
+        if (item.subItems || item.$subItemTemplate || item.goBack) {
             this.changeDetector.detectChanges();
             this.validateInitialContent();
         }
@@ -10703,6 +10831,49 @@ var PoChartLabelFormat;
     PoChartLabelFormat["Currency"] = "currency";
 })(PoChartLabelFormat || (PoChartLabelFormat = {}));
 
+const poChartLiteralsDefault = {
+    en: {
+        downloadCSV: 'Download CSV',
+        exportCSV: 'Export CSV',
+        exportJPG: 'Export JPG',
+        exportPNG: 'Export PNG',
+        value: 'Value',
+        item: 'Item',
+        serie: 'Series',
+        category: 'Category'
+    },
+    es: {
+        downloadCSV: 'Descargar CSV',
+        exportCSV: 'Exportar CSV',
+        exportJPG: 'Exportar JPG',
+        exportPNG: 'Exportar PNG',
+        value: 'Valor',
+        item: 'Artículo',
+        serie: 'Serie',
+        category: 'Categoría'
+    },
+    pt: {
+        downloadCSV: 'Baixar CSV',
+        exportCSV: 'Exportar CSV',
+        exportJPG: 'Exportar JPG',
+        exportPNG: 'Exportar PNG',
+        value: 'Valor',
+        item: 'Item',
+        serie: 'Série',
+        category: 'Categoria'
+    },
+    ru: {
+        downloadCSV: 'Скачать CSV',
+        exportCSV: 'Экспортировать CSV',
+        exportJPG: 'Экспортировать JPG',
+        exportPNG: 'Экспортировать PNG',
+        value: 'Ценить',
+        item: 'Пункт',
+        serie: 'Ряд',
+        category: 'Категория'
+    }
+};
+
 /**
  * @usedBy PoChartComponent
  *
@@ -10745,51 +10916,12 @@ var PoChartType;
      * - Para um demonstrativo mais elaborado, consegue-se definir alcances em cores, um breve texto descritivo e um ponteiro indicando o valor desejado.
      */
     PoChartType["Gauge"] = "gauge";
+    /**
+     * Tipo de gráfico utilizado para visualizar e comparar o desempenho de diferentes itens em múltiplas categorias.
+     */
+    PoChartType["Radar"] = "radar";
 })(PoChartType || (PoChartType = {}));
 
-const poChartLiteralsDefault = {
-    en: {
-        downloadCSV: 'Download CSV',
-        exportCSV: 'Export CSV',
-        exportJPG: 'Export JPG',
-        exportPNG: 'Export PNG',
-        value: 'Value',
-        item: 'Item',
-        serie: 'Series',
-        category: 'Category'
-    },
-    es: {
-        downloadCSV: 'Descargar CSV',
-        exportCSV: 'Exportar CSV',
-        exportJPG: 'Exportar JPG',
-        exportPNG: 'Exportar PNG',
-        value: 'Valor',
-        item: 'Artículo',
-        serie: 'Serie',
-        category: 'Categoría'
-    },
-    pt: {
-        downloadCSV: 'Baixar CSV',
-        exportCSV: 'Exportar CSV',
-        exportJPG: 'Exportar JPG',
-        exportPNG: 'Exportar PNG',
-        value: 'Valor',
-        item: 'Item',
-        serie: 'Série',
-        category: 'Categoria'
-    },
-    ru: {
-        downloadCSV: 'Скачать CSV',
-        exportCSV: 'Экспортировать CSV',
-        exportJPG: 'Экспортировать JPG',
-        exportPNG: 'Экспортировать PNG',
-        value: 'Ценить',
-        item: 'Пункт',
-        serie: 'Ряд',
-        category: 'Категория'
-    }
-};
-
 const poChartMinHeight = 200;
 const poChartDefaultHeight = 400;
 /**
@@ -10845,6 +10977,9 @@ const poChartDefaultHeight = 400;
  * | `--color-base-gauge`                     | Cor da base do gráfico `Gauge`                                          | `var(--color-neutral-light-20)`                   |
  * | `--color-gauge-pointer-color`            | Cor do ponteiro do gráfico `Gauge`                                      | `var(--color-neutral-dark-70)`                    |
  * | `--color-chart-line-point-fill`          | Cor de dentro do círculo dos gráficos `Line` e `Area`                   | `var(--color-neutral-light-00)`                   |
+ * | `--border-color-radar`                   | Cor do eixo da grid do gráfico `Radar`                                  | `var(--color-neutral-light-30)`                   |
+ * | `--color-background-zebra`               | Cor das áreas alternadas (efeito zebrado) da grid do gráfico `Radar`    | `var(--color-neutral-light-10)`                   |
+ * | `--color-background-line`                | Cor das áreas entre as faixas zebradas da grade do `Radar`              | `none`                                            |
  * | **Wrapper (.po-chart-container-gauge)**  |                                                                         |                                                   |
  * | `--background-color-container-gauge`     | Cor de background do container do gauge                                 | `var(--color-neutral-light-00)`                   |
  */
@@ -10872,11 +11007,18 @@ class PoChartBaseComponent {
      *
      * @description
      *
-     * Define os nomes das categorias que serão plotadas no eixo X do gráfico caso seja do tipo `bar`, ou então nos eixos Y do grid de gráficos dos tipos `area`, `columnn` e `line`.
+     * Define os valores utilizados na construção das categorias do gráfico.
      *
-     * > Gráficos do tipo `bar` dimensionam a área do gráfico de acordo com a largura do maior texto de categorias. No entanto, é uma boa prática optar por palavras curtas para que a leitura do gráfico não seja prejudicada.
+     * Para gráficos dos tipos *bar*, *area*, *column* e *line*, representa os nomes das categorias exibidas no eixo.
      *
-     * > Caso não seja especificado um valor para a categoria, será plotado um hífen na categoria referente a cada série.
+     * Para gráficos do tipo *radar*, representa a configuração dos indicadores, formato (shape), áreas de divisão (splitArea)
+     * e demais opções específicas do gráfico `Radar`.
+     *
+     * > Caso nenhum valor seja informado, será utilizado um hífen como categoria
+     *   correspondente para cada série.
+     *
+     * > Gráficos do tipo bar dimensionam sua área considerando a largura do maior texto
+     *   da categoria, sendo recomendável utilizar rótulos curtos para facilitar a leitura.
      */
     categories;
     /**
@@ -10895,7 +11037,7 @@ class PoChartBaseComponent {
      * Objeto com as configurações usadas no `po-chart`.
      *
      * É possível, por exemplo, definir as configurações de exibição das legendas,
-     * configurar os eixos(*axis*) para os gráficos dos tipos `area`, `line`, `column` e `bar` da seguinte forma:
+     * configurar os eixos(*axis*) para os gráficos dos tipos `area`, `line`, `column`, `bar` e `radar` da seguinte forma:
      *
      * ```
      *  chartOptions: PoChartOptions = {
@@ -10922,7 +11064,7 @@ class PoChartBaseComponent {
      * - Os marcadores (*bullets*) terão seu estilo ajustado.
      * - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa.
      *
-     * > Disponível apenas para gráficos do tipo `line`.
+     * > Disponível para gráficos do tipo `line` e `radar`.
      *
      * #### Exemplo de utilização:
      * ```typescript
@@ -11023,6 +11165,7 @@ class PoChartBaseComponent {
      *
      * O evento emitirá o seguinte parâmetro:
      * - *donut* e *pie*: um objeto contendo a categoria e valor da série.
+     * - *radar*: um objeto contendo o nome da série e os valores.
      * - *area*, *line*, *column* e *bar*: um objeto contendo o nome da série, valor e categoria do eixo do gráfico.
      */
     seriesClick = new EventEmitter();
@@ -11035,6 +11178,7 @@ class PoChartBaseComponent {
      *
      * O evento emitirá o seguinte parâmetro de acordo com o tipo de gráfico:
      * - *donut* e *pie*: um objeto contendo a categoria e valor da série.
+     * - *radar*: um objeto contendo o nome da série e os valores.
      * - *area*, *line*, *column* e *bar*: um objeto contendo a categoria, valor da série e categoria do eixo do gráfico.
      */
     seriesHover = new EventEmitter();
@@ -11168,6 +11312,9 @@ class PoChartGridUtils {
                 }
             }
         };
+        if (this.component.isTypeRadar) {
+            return;
+        }
         if (this.component.isTypeBar) {
             options.yAxis.data = this.component.categories;
         }
@@ -11381,7 +11528,8 @@ class PoChartGridUtils {
         }
         else if ((options?.dataZoom && !options?.bottomDataZoom && options.legend === false) ||
             (!options?.dataZoom && options?.legend === false) ||
-            (!options?.dataZoom && options?.legendVerticalPosition === 'top')) {
+            (!options?.dataZoom && options?.legendVerticalPosition === 'top') ||
+            (this.component.isTypeRadar && options.legendVerticalPosition !== 'top')) {
             return gridPaddingValues.paddingBottomNoLegend;
         }
         return gridPaddingValues.paddingBottomWithTopLegend;
@@ -11411,6 +11559,135 @@ class PoChartGridUtils {
                 : gridPaddingValues.paddingTopDefaultWithBottomLegend;
         }
     }
+    isRadarOptions(value) {
+        return value && typeof value === 'object' && !Array.isArray(value) && 'indicator' in value;
+    }
+    convertRadarConfig(indicators) {
+        return {
+            shape: 'polygon',
+            splitArea: false,
+            indicator: indicators.map(item => ({ name: item }))
+        };
+    }
+    setListTypeRadar() {
+        const radar = this.isRadarOptions(this.component.categories)
+            ? this.component.categories
+            : this.convertRadarConfig(this.component.categories);
+        const radarConfig = {
+            shape: radar?.shape ?? 'polygon',
+            radius: '60%',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: [this.component.getCSSVariable('--border-color-radar', 'po-chart .po-chart')],
+                    width: this.resolvePx('--border-width-sm')
+                }
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: this.component.getCSSVariable('--border-color-radar', 'po-chart .po-chart'),
+                    width: this.resolvePx('--border-width-sm')
+                }
+            },
+            splitArea: {
+                show: radar?.splitArea ?? false,
+                areaStyle: {
+                    color: [
+                        this.component.getCSSVariable('--color-background-line', 'po-chart .po-chart'),
+                        this.component.getCSSVariable('--color-background-zebra', 'po-chart .po-chart')
+                    ]
+                }
+            },
+            indicator: Array.isArray(radar?.indicator)
+                ? radar.indicator.map(ind => ({
+                    name: ind.name,
+                    max: ind.max ?? undefined,
+                    min: ind.min ?? 0,
+                    color: ind.color ?? this.component.getCSSVariable('--color-neutral-dark-90')
+                }))
+                : []
+        };
+        const currentOptions = this.component.options ?? {};
+        const hasGlobalAreaStyle = this.component.options?.areaStyle === true;
+        const hasSeriesAreaStyle = Array.isArray(this.component.series) && this.component.series.some(serie => !!serie?.areaStyle);
+        this.component.options = {
+            ...this.component.options,
+            fillPoints: hasGlobalAreaStyle || hasSeriesAreaStyle ? true : (currentOptions.fillPoints ?? true),
+            radar: radarConfig
+        };
+        return radarConfig;
+    }
+    setSerieTypeRadar(serie, tokenBorderWidthMd, color) {
+        if (serie.type === 'radar') {
+            serie.type = 'radar';
+            serie.symbol = 'circle';
+            serie.symbolSize = 6;
+            if (this.component.dataLabel?.fixed) {
+                serie.label = {
+                    show: true
+                };
+            }
+            serie.itemStyle = {
+                color: this.component.options?.fillPoints === false
+                    ? this.component.getCSSVariable('--color-chart-line-point-fill', 'po-chart .po-chart')
+                    : color,
+                borderColor: color,
+                borderWidth: tokenBorderWidthMd
+            };
+            serie.lineStyle = { color, width: tokenBorderWidthMd };
+            return serie;
+        }
+    }
+    setTooltipRadar(params) {
+        const indicators = this.component.options.radar?.indicator ?? [];
+        const values = params.value ?? [];
+        values.map((val, i) => {
+            const indicatorName = indicators[i]?.name ?? `Indicador ${i + 1}`;
+            return `${indicatorName}: <b>${val}</b>`;
+        });
+    }
+    buildRadarTooltip(params) {
+        const indicators = this.component.options.radar?.indicator ?? [];
+        const values = params.value ?? [];
+        let tooltip = `<b>${params.name}</b><br>`;
+        values.map((val, index) => {
+            const indicatorName = indicators[index]?.name ?? `Indicator ${index + 1}`;
+            tooltip += `${indicatorName}: <b>${val}</b><br>`;
+        });
+        return tooltip;
+    }
+    finalizeSerieTypeRadar(seriesUpdated) {
+        const hasGlobalAreaStyle = this.component.options?.areaStyle === true;
+        return [
+            {
+                type: 'radar',
+                data: seriesUpdated.map(item => {
+                    const name = item?.name ?? '';
+                    const value = Array.isArray(item?.data) ? item.data : [];
+                    let areaStyle;
+                    if (hasGlobalAreaStyle || item.areaStyle === true) {
+                        areaStyle = {
+                            opacity: 0.5
+                        };
+                    }
+                    else {
+                        areaStyle = undefined;
+                    }
+                    return {
+                        name,
+                        value,
+                        areaStyle,
+                        symbol: item.symbol,
+                        symbolSize: item.symbolSize,
+                        itemStyle: item.itemStyle,
+                        lineStyle: item.lineStyle,
+                        label: { show: item?.label?.show }
+                    };
+                })
+            }
+        ];
+    }
 }
 
 class PoChartGaugeUtils {
@@ -11562,11 +11839,9 @@ class PoChartGaugeUtils {
         let lengthPointer = '40%';
         let center = ['50%', '80%'];
         let widthSubtitle = height < 450 ? 400 : 500;
-        // 👇 Regras para telas pequenas
         const isSmallScreen = divWidth < 480;
         const isMediumScreen = divWidth >= 480 && divWidth < 960;
         const isLargeScreen = divWidth >= 960;
-        // 👇 Ajustes por largura
         if (isSmallScreen) {
             radius = height > 480 ? '100%' : '120%';
             lengthPointer = '25%';
@@ -11581,7 +11856,6 @@ class PoChartGaugeUtils {
         else if (isLargeScreen && height > 750) {
             radius = '100%';
         }
-        // 👇 Ajuste específico para altura muito pequena
         if (height < 400) {
             return this.setPropertiesDefaultHeight(center);
         }
@@ -11672,6 +11946,7 @@ use([
     GraphicComponent,
     LineChart,
     PieChart,
+    RadarChart,
     BrushComponent,
     DataZoomComponent,
     GridComponent,
@@ -11716,6 +11991,11 @@ use([
  *  <file name="sample-po-chart-world-exports/sample-po-chart-world-exports.component.html"> </file>
  *  <file name="sample-po-chart-world-exports/sample-po-chart-world-exports.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-chart-technology-skill" title="PO Chart - Radar">
+ *  <file name="sample-po-chart-technology-skill/sample-po-chart-technology-skill.component.html"> </file>
+ *  <file name="sample-po-chart-technology-skill/sample-po-chart-technology-skill.component.ts"> </file>
+ * </example>
  */
 class PoChartComponent extends PoChartBaseComponent {
     el = inject(ElementRef);
@@ -11731,6 +12011,7 @@ class PoChartComponent extends PoChartBaseComponent {
     originalRadiusGauge;
     chartMarginTop = '0px';
     isTypeBar = false;
+    isTypeRadar = false;
     boundaryGap = false;
     listTypePieDonut;
     itemsTypeDonut = [];
@@ -12013,7 +12294,9 @@ class PoChartComponent extends PoChartBaseComponent {
     }
     resolveCustomTooltip(params, name, seriesName, valueLabel) {
         let text;
-        const serie = params.seriesType === 'pie' ? this.series[params.dataIndex] : this.series[params.seriesIndex];
+        const serie = params.seriesType === 'pie' || params.seriesType === 'radar'
+            ? this.series[params.dataIndex]
+            : this.series[params.seriesIndex];
         if (serie?.tooltip) {
             if (typeof serie.tooltip === 'function') {
                 text = serie.tooltip(params);
@@ -12027,6 +12310,9 @@ class PoChartComponent extends PoChartBaseComponent {
                 seriesName && !seriesName.includes('\u00000')
                     ? `<b>${name}</b><br>${seriesName}: <b>${valueLabel}</b>`
                     : `${name}: <b>${valueLabel}</b>`;
+            if (params.seriesType === 'radar') {
+                text = this.chartGridUtils.buildRadarTooltip(params);
+            }
         }
         return this.parseTooltipText(text);
     }
@@ -12051,7 +12337,7 @@ class PoChartComponent extends PoChartBaseComponent {
         this.listTypePieDonut = [];
         this.itemsTypeDonut = [];
         let option = {};
-        if (!this.categories?.length && this.categories !== undefined) {
+        if (Array.isArray(this.categories) && !this.categories?.length && this.categories !== undefined) {
             this.categories = undefined;
         }
         if (!this.series?.length) {
@@ -12087,6 +12373,9 @@ class PoChartComponent extends PoChartBaseComponent {
         if (this.isTypeGauge) {
             this.chartGaugeUtils.setGaugeOptions(options, this.chartGridUtils.resolvePx('--font-size-grid', '.po-chart'));
         }
+        if (this.isTypeRadar) {
+            options.radar = this.options?.radar;
+        }
         return options;
     }
     formatLabelOption(options) {
@@ -12124,7 +12413,10 @@ class PoChartComponent extends PoChartBaseComponent {
         };
     }
     setSeries() {
-        const hasArea = this.type === 'area' || this.series.some(serie => serie.type === 'area');
+        const hasArea = this.type === 'area' ||
+            this.series.some(serie => serie.type === 'area') ||
+            this.options?.areaStyle ||
+            this.series.some(serie => serie.areaStyle === true);
         const newSeries = [...this.colorService.getColors(this.series, true, hasArea)];
         const tokenBorderWidthMd = this.chartGridUtils.resolvePx('--border-width-md');
         const findType = this.series.find(serie => serie.type)?.type;
@@ -12146,6 +12438,9 @@ class PoChartComponent extends PoChartBaseComponent {
             };
             serieGauge = this.chartGaugeUtils.setListTypeGauge(serie, fontSizes);
         }
+        else if (verifyType === 'radar') {
+            this.chartGridUtils.setListTypeRadar();
+        }
         const seriesUpdated = newSeries.map((serie, index) => {
             serie.name = serie.name || (serie.label && typeof serie.label === 'string') ? (serie.name ?? serie.label) : ' ';
             !serie.type ? this.setTypeSerie(serie, this.type || typeDefault) : this.setTypeSerie(serie, serie.type);
@@ -12167,6 +12462,7 @@ class PoChartComponent extends PoChartBaseComponent {
             this.chartGridUtils.setSerieTypeLine(serie, tokenBorderWidthMd, colorVariable);
             this.chartGridUtils.setSerieTypeArea(serie, index);
             this.chartGridUtils.setSerieTypeBarColumn(serie, colorVariable);
+            this.chartGridUtils.setSerieTypeRadar(serie, tokenBorderWidthMd, colorVariable);
             return serie;
         });
         if (this.listTypePieDonut?.length) {
@@ -12175,6 +12471,9 @@ class PoChartComponent extends PoChartBaseComponent {
         else if (verifyType === 'gauge') {
             return this.chartGaugeUtils.finalizeSerieTypeGauge(serieGauge);
         }
+        else if (verifyType === 'radar') {
+            return this.chartGridUtils.finalizeSerieTypeRadar(seriesUpdated);
+        }
         return seriesUpdated;
     }
     setSerieEmphasis(serie, color, tokenBorder) {
@@ -12202,8 +12501,8 @@ class PoChartComponent extends PoChartBaseComponent {
     setTypeSerie(serie, type) {
         switch (type) {
             case PoChartType.Area:
-                serie.type = 'line';
                 serie.isTypeArea = true;
+                serie.type = 'line';
                 break;
             case PoChartType.Bar:
                 this.isTypeBar = true;
@@ -12220,6 +12519,10 @@ class PoChartComponent extends PoChartBaseComponent {
                 this.isTypeGauge = true;
                 serie.type = 'gauge';
                 break;
+            case PoChartType.Radar:
+                this.isTypeRadar = true;
+                serie.type = 'radar';
+                break;
         }
     }
     setTableProperties() {
@@ -12246,6 +12549,10 @@ class PoChartComponent extends PoChartBaseComponent {
             this.setTablePropertiesTypeGauge();
             return;
         }
+        else if (this.isTypeRadar) {
+            this.setTablePropertiesTypeRadar();
+            return;
+        }
         this.itemsTable = series.map((serie) => {
             const rowData = { serie: serie.name };
             categories.forEach((category, index) => {
@@ -12285,6 +12592,34 @@ class PoChartComponent extends PoChartBaseComponent {
             });
         }
     }
+    setTablePropertiesTypeRadar() {
+        let indicators;
+        if (!Array.isArray(this.categories) && this.categories?.indicator) {
+            indicators = this.categories.indicator;
+        }
+        else if (Array.isArray(this.categories)) {
+            indicators = this.categories.map(item => ({ name: item }));
+        }
+        const series = this.series;
+        this.columnsTable = [
+            {
+                property: 'serie',
+                label: this.options?.firstColumnName || this.literals.serie
+            },
+            ...indicators.map((indicator) => ({
+                property: indicator.name,
+                label: indicator.name
+            }))
+        ];
+        this.itemsTable = series.map((serie) => {
+            const row = { serie: serie.label };
+            indicators.forEach((indicator, idx) => {
+                const value = serie.data[idx]?.value ?? serie.data[idx];
+                row[indicator.name] = value;
+            });
+            return row;
+        });
+    }
     setTableColumns(option, categories) {
         this.columnsTable = [
             { property: 'serie', label: this.options?.firstColumnName || this.literals.serie },
@@ -24366,9 +24701,9 @@ const poSearchLiteralsDefaultExecute = {
  *
  */
 class PoSearchBaseComponent {
+    language;
     _literals;
     _ariaLabel;
-    language;
     _filterSelect;
     _size = undefined;
     _keysLabel = [];
@@ -24490,6 +24825,8 @@ class PoSearchBaseComponent {
      * ```
      */
     icon;
+    // Propriedade de uso interno.
+    id;
     /**
      * @optional
      *
@@ -24564,6 +24901,24 @@ class PoSearchBaseComponent {
      * > Compatível com a propriedade `p-search-type` do tipo `locate`.
      */
     locateSummary = { currentIndex: 0, total: 0 };
+    /**
+     * @optional
+     *
+     * @description
+     * Nome e identificador do campo.
+     *
+     */
+    name;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a propriedade nativa `autocomplete` do campo como `off`.
+     *
+     * @default `false`
+     */
+    noAutocomplete = false;
     /**
      * @optional
      *
@@ -24737,7 +25092,7 @@ class PoSearchBaseComponent {
         return _values.map(value => (typeof value === 'object' ? value : { label: value, value }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSearchBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoSearchBaseComponent, isStandalone: true, inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], disabled: ["p-disabled", "disabled", convertToBoolean], filterKeys: ["p-filter-keys", "filterKeys"], filterSelect: ["p-filter-select", "filterSelect"], filterType: ["p-filter-type", "filterType"], icon: ["p-icon", "icon"], items: ["p-items", "items"], literals: ["p-literals", "literals"], locateSummary: ["p-locate-summary", "locateSummary"], type: ["p-search-type", "type"], showListbox: ["p-show-listbox", "showListbox", convertToBoolean], size: ["p-size", "size"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { blur: "p-blur", changeModel: "p-change-model", filter: "p-filter", filteredItemsChange: "p-filtered-items-change", focusEvent: "p-focus", keydown: "p-keydown", listboxOnClick: "p-listbox-onclick", locateNext: "p-locate-next", locatePrevious: "p-locate-previous", footerAction: "p-footer-action-listbox" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoSearchBaseComponent, isStandalone: true, inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], disabled: ["p-disabled", "disabled", convertToBoolean], filterKeys: ["p-filter-keys", "filterKeys"], filterSelect: ["p-filter-select", "filterSelect"], filterType: ["p-filter-type", "filterType"], icon: ["p-icon", "icon"], id: ["p-id", "id"], items: ["p-items", "items"], literals: ["p-literals", "literals"], locateSummary: ["p-locate-summary", "locateSummary"], name: "name", noAutocomplete: ["p-no-autocomplete", "noAutocomplete", convertToBoolean], type: ["p-search-type", "type"], showListbox: ["p-show-listbox", "showListbox", convertToBoolean], size: ["p-size", "size"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { blur: "p-blur", changeModel: "p-change-model", filter: "p-filter", filteredItemsChange: "p-filtered-items-change", focusEvent: "p-focus", keydown: "p-keydown", listboxOnClick: "p-listbox-onclick", locateNext: "p-locate-next", locatePrevious: "p-locate-previous", footerAction: "p-footer-action-listbox" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSearchBaseComponent, decorators: [{
             type: Directive
@@ -24759,6 +25114,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], icon: [{
                 type: Input,
                 args: ['p-icon']
+            }], id: [{
+                type: Input,
+                args: ['p-id']
             }], items: [{
                 type: Input,
                 args: ['p-items']
@@ -24768,6 +25126,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], locateSummary: [{
                 type: Input,
                 args: ['p-locate-summary']
+            }], name: [{
+                type: Input,
+                args: ['name']
+            }], noAutocomplete: [{
+                type: Input,
+                args: [{ alias: 'p-no-autocomplete', transform: convertToBoolean }]
             }], type: [{
                 type: Input,
                 args: ['p-search-type']
@@ -25065,6 +25429,9 @@ class PoSearchComponent extends PoSearchBaseComponent {
             .map(value => ({ label: value, value }))
             .filter((obj, index, self) => index === self.findIndex(o => o.label === obj.label && o.value === obj.value));
     }
+    get autocomplete() {
+        return this.noAutocomplete ? 'off' : 'on';
+    }
     onCloseListbox() {
         this.poSearchInput.nativeElement.focus();
         this.closeListbox();
@@ -25313,11 +25680,11 @@ class PoSearchComponent extends PoSearchBaseComponent {
         this.placeholderListbox = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoSearchComponent, isStandalone: false, selector: "po-search", providers: [PoControlPositionService], viewQueries: [{ propertyName: "locateCounter", first: true, predicate: ["locateCounter"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListboxContainerElement", first: true, predicate: ["poListboxContainerElement"], descendants: true, read: ElementRef }, { propertyName: "poListboxElement", first: true, predicate: ["poListboxElement"], descendants: true, read: ElementRef }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoSearchComponent, isStandalone: false, selector: "po-search", providers: [PoControlPositionService], viewQueries: [{ propertyName: "locateCounter", first: true, predicate: ["locateCounter"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListboxContainerElement", first: true, predicate: ["poListboxContainerElement"], descendants: true, read: ElementRef }, { propertyName: "poListboxElement", first: true, predicate: ["poListboxElement"], descendants: true, read: ElementRef }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-search', providers: [PoControlPositionService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-search', providers: [PoControlPositionService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { locateCounter: [{
                 type: ViewChild,
                 args: ['locateCounter', { static: false }]
@@ -30264,6 +30631,21 @@ class PoInputBaseComponent {
      * @default `false`
      */
     errorLimit = false;
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = convertToBoolean(value);
+        this.cd?.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
     /**
      * @optional
      *
@@ -30391,6 +30773,7 @@ class PoInputBaseComponent {
     onTouched = null;
     passedWriteValue = false;
     validatorChange;
+    _loading = false;
     _maxlength;
     _minlength;
     _noAutocomplete = false;
@@ -30780,6 +31163,14 @@ class PoInputBaseComponent {
         return (this.additionalHelpEventTrigger === 'event' ||
             (this.additionalHelpEventTrigger === undefined && this.additionalHelp.observed));
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        const sizeMap = {
+            small: 'xs',
+            medium: 'sm'
+        };
+        return sizeMap[size] || 'sm';
+    }
     // utilizado para validar o pattern na inicializacao, fazendo dessa forma o campo fica sujo (dirty).
     validatePatternOnWriteValue(value) {
         if (value && this.passedWriteValue) {
@@ -30790,7 +31181,7 @@ class PoInputBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoInputBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: PoInputBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, icon: { classPropertyName: "icon", publicName: "p-icon", isSignal: false, isRequired: false, transformFunction: null }, emitAllChanges: { classPropertyName: "emitAllChanges", publicName: "p-emit-all-changes", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, errorAsyncProperties: { classPropertyName: "errorAsyncProperties", publicName: "p-error-async-properties", isSignal: false, isRequired: false, transformFunction: null }, errorPattern: { classPropertyName: "errorPattern", publicName: "p-error-pattern", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, showErrorMessageRequired: { classPropertyName: "showErrorMessageRequired", publicName: "p-required-field-error-message", isSignal: false, isRequired: false, transformFunction: null }, upperCase: { classPropertyName: "upperCase", publicName: "p-upper-case", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, maskNoLengthValidation: { classPropertyName: "maskNoLengthValidation", publicName: "p-mask-no-length-validation", isSignal: false, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, setDisabled: { classPropertyName: "setDisabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, setReadonly: { classPropertyName: "setReadonly", publicName: "p-readonly", isSignal: false, isRequired: false, transformFunction: null }, setRequired: { classPropertyName: "setRequired", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, setClean: { classPropertyName: "setClean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: null }, setPattern: { classPropertyName: "setPattern", publicName: "p-pattern", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "p-maxlength", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "p-minlength", isSignal: false, isRequired: false, transformFunction: null }, setMask: { classPropertyName: "setMask", publicName: "p-mask", isSignal: false, isRequired: false, transformFunction: null }, setMaskFormatModel: { classPropertyName: "setMaskFormatModel", publicName: "p-mask-format-model", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", blur: "p-blur", enter: "p-enter", change: "p-change", changeModel: "p-change-model", keydown: "p-keydown" }, viewQueries: [{ propertyName: "fieldContainer", first: true, predicate: ["fieldContainer"], descendants: true, read: PoFieldContainerComponent }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: PoInputBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, icon: { classPropertyName: "icon", publicName: "p-icon", isSignal: false, isRequired: false, transformFunction: null }, emitAllChanges: { classPropertyName: "emitAllChanges", publicName: "p-emit-all-changes", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, errorAsyncProperties: { classPropertyName: "errorAsyncProperties", publicName: "p-error-async-properties", isSignal: false, isRequired: false, transformFunction: null }, errorPattern: { classPropertyName: "errorPattern", publicName: "p-error-pattern", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, showErrorMessageRequired: { classPropertyName: "showErrorMessageRequired", publicName: "p-required-field-error-message", isSignal: false, isRequired: false, transformFunction: null }, upperCase: { classPropertyName: "upperCase", publicName: "p-upper-case", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, maskNoLengthValidation: { classPropertyName: "maskNoLengthValidation", publicName: "p-mask-no-length-validation", isSignal: false, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, setDisabled: { classPropertyName: "setDisabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, setReadonly: { classPropertyName: "setReadonly", publicName: "p-readonly", isSignal: false, isRequired: false, transformFunction: null }, setRequired: { classPropertyName: "setRequired", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, setClean: { classPropertyName: "setClean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: null }, setPattern: { classPropertyName: "setPattern", publicName: "p-pattern", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "p-maxlength", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "p-minlength", isSignal: false, isRequired: false, transformFunction: null }, setMask: { classPropertyName: "setMask", publicName: "p-mask", isSignal: false, isRequired: false, transformFunction: null }, setMaskFormatModel: { classPropertyName: "setMaskFormatModel", publicName: "p-mask-format-model", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", blur: "p-blur", enter: "p-enter", change: "p-change", changeModel: "p-change-model", keydown: "p-keydown" }, viewQueries: [{ propertyName: "fieldContainer", first: true, predicate: ["fieldContainer"], descendants: true, read: PoFieldContainerComponent }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoInputBaseComponent, decorators: [{
             type: Directive
@@ -30835,6 +31226,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], errorLimit: [{
                 type: Input,
                 args: ['p-error-limit']
+            }], loading: [{
+                type: Input,
+                args: ['p-loading']
             }], optional: [{
                 type: Input,
                 args: ['p-optional']
@@ -31554,7 +31948,7 @@ class PoDecimalComponent extends PoInputBaseComponent {
                 useExisting: forwardRef(() => PoDecimalComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div 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          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': clean && size !== 'small',\n        'po-input-icon-right-aa': clean && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div 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          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': (clean || loading) && size !== 'small',\n        'po-input-icon-right-aa': (clean || loading) && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDecimalComponent, decorators: [{
             type: Component,
@@ -31569,7 +31963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoDecimalComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div 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          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': clean && size !== 'small',\n        'po-input-icon-right-aa': clean && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div 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          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': (clean || loading) && size !== 'small',\n        'po-input-icon-right-aa': (clean || loading) && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { inputEl: [{
                 type: ViewChild,
                 args: ['inp', { read: ElementRef, static: true }]
@@ -31943,11 +32337,11 @@ class PoEmailComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoEmailComponent, isStandalone: false, selector: "po-email", providers: providers$4, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoEmailComponent, isStandalone: false, selector: "po-email", providers: providers$4, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoEmailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+            args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -31999,7 +32393,7 @@ class PoInputComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inp", first: true, predicate: ["inp"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inp", first: true, predicate: ["inp"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoInputComponent, decorators: [{
             type: Component,
@@ -32014,7 +32408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoInputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { inp: [{
                 type: ViewChild,
                 args: ['inp', { static: true }]
@@ -32087,11 +32481,11 @@ class PoLoginComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoLoginComponent, isStandalone: false, selector: "po-login", inputs: { noAutocomplete: ["p-no-autocomplete", "noAutocomplete"] }, providers: providers$3, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoLoginComponent, isStandalone: false, selector: "po-login", inputs: { noAutocomplete: ["p-no-autocomplete", "noAutocomplete"] }, providers: providers$3, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+            args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { noAutocomplete: [{
                 type: Input,
                 args: ['p-no-autocomplete']
@@ -37284,7 +37678,7 @@ class PoNumberComponent extends PoNumberBaseComponent {
                 useExisting: forwardRef(() => PoNumberComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div 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          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div 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          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoNumberComponent, decorators: [{
             type: Component,
@@ -37299,7 +37693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoNumberComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div 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          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div 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          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { step: [{
                 type: Input,
                 args: ['p-step']
@@ -37401,7 +37795,7 @@ class PoPasswordComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoPasswordComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"!loading && clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"!loading && clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || loading || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"> </po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!loading && !hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoPasswordComponent, decorators: [{
             type: Component,
@@ -37416,7 +37810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoPasswordComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"!loading && clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"!loading && clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || loading || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"> </po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!loading && !hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { hidePasswordPeek: [{
                 type: Input,
                 args: ['p-hide-password-peek']
@@ -40631,7 +41025,7 @@ class PoUrlComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoUrlComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUrlComponent, decorators: [{
             type: Component,
@@ -40646,7 +41040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoUrlComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [] });
 
 const uploadRestrictions = ['.apng', '.bmp', '.gif', '.ico', '.jpeg', '.jpg', '.png', '.svg'];
@@ -47697,11 +48091,11 @@ class PoMenuItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoMenuItemComponent, isStandalone: false, selector: "po-menu-item", inputs: { action: ["p-action", "action"], badgeAlert: ["p-badge-alert", "badgeAlert"], badgeColor: ["p-badge-color", "badgeColor"], collapsedMenu: ["p-collapsed-menu", "collapsedMenu"], icon: ["p-icon", "icon"], id: ["p-id", "id"], isOpened: ["p-is-opened", "isOpened"], label: ["p-label", "label"], level: ["p-level", "level"], link: ["p-link", "link"], shortLabel: ["p-short-label", "shortLabel"], type: ["p-type", "type"], badgeValue: ["p-badge-value", "badgeValue"], isSelected: ["p-is-selected", "isSelected"], isSubItem: ["p-is-sub-item", "isSubItem"], subItems: ["p-sub-items", "subItems"] }, viewQueries: [{ propertyName: "menuSubItems", first: true, predicate: ["menuSubItems"], descendants: true }], ngImport: i0, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-hidden]=\"type === 'subItems' ? false : true\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoMenuItemComponent, selector: "po-menu-item", inputs: ["p-action", "p-badge-alert", "p-badge-color", "p-collapsed-menu", "p-icon", "p-id", "p-is-opened", "p-label", "p-level", "p-link", "p-short-label", "p-type", "p-badge-value", "p-is-selected", "p-is-sub-item", "p-sub-items"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoMenuItemComponent, isStandalone: false, selector: "po-menu-item", inputs: { action: ["p-action", "action"], badgeAlert: ["p-badge-alert", "badgeAlert"], badgeColor: ["p-badge-color", "badgeColor"], collapsedMenu: ["p-collapsed-menu", "collapsedMenu"], icon: ["p-icon", "icon"], id: ["p-id", "id"], isOpened: ["p-is-opened", "isOpened"], label: ["p-label", "label"], level: ["p-level", "level"], link: ["p-link", "link"], shortLabel: ["p-short-label", "shortLabel"], type: ["p-type", "type"], badgeValue: ["p-badge-value", "badgeValue"], isSelected: ["p-is-selected", "isSelected"], isSubItem: ["p-is-sub-item", "isSubItem"], subItems: ["p-sub-items", "subItems"] }, viewQueries: [{ propertyName: "menuSubItems", first: true, predicate: ["menuSubItems"], descendants: true }], ngImport: i0, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoMenuItemComponent, selector: "po-menu-item", inputs: ["p-action", "p-badge-alert", "p-badge-color", "p-collapsed-menu", "p-icon", "p-id", "p-is-opened", "p-label", "p-level", "p-link", "p-short-label", "p-type", "p-badge-value", "p-is-selected", "p-is-sub-item", "p-sub-items"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-menu-item', standalone: false, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-hidden]=\"type === 'subItems' ? false : true\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'po-menu-item', standalone: false, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { action: [{
                 type: Input,
                 args: ['p-action']