@po-ui/ng-components 19.37.0 → 19.38.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, 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, Injector, provideAppInitializer } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, DecimalPipe, DOCUMENT, 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 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,12 +17,12 @@ 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';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
-import * as i5 from '@angular/cdk/scrolling';
+import * as i5$1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i6 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
@@ -355,9 +355,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',
@@ -371,6 +373,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',
@@ -385,6 +390,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',
@@ -399,7 +405,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',
@@ -421,9 +431,11 @@ const AnimaliaIconDictionary = {
  * Permite a exibição de ícones.
  */
 class PoIconComponent {
+    iconElement;
     class;
     _icon;
     _iconToken;
+    hostPIcon = null;
     constructor(value) {
         this._iconToken = value ?? AnimaliaIconDictionary;
     }
@@ -450,10 +462,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() {
@@ -499,17 +513,23 @@ class PoIconComponent {
         return iconName.includes(' ') ? iconName.split(' ') : iconName;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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: "19.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: "19.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: "19.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']
             }] } });
@@ -1469,6 +1489,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';
@@ -1829,7 +1881,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.
      */
@@ -2916,8 +2969,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 {};
@@ -4561,6 +4628,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 : [];
@@ -4721,13 +4790,16 @@ class PoPopupBaseComponent {
     closeEvent = new EventEmitter();
     clickItem = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoPopupBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.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: "19.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: "19.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']
@@ -5541,6 +5613,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';
     /**
@@ -5588,7 +5668,7 @@ class PoItemListBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoItemListBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.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: "19.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: "19.0.7", ngImport: i0, type: PoItemListBaseComponent, decorators: [{
             type: Directive
@@ -5631,6 +5711,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], icon: [{
                 type: Input,
                 args: ['p-icon']
+            }], iconArrowRight: [{
+                type: Input,
+                args: ['p-icon-arrow-right']
             }], iconPosition: [{
                 type: Input,
                 args: ['p-icon-position']
@@ -8036,11 +8119,11 @@ class PoItemListComponent extends PoItemListBaseComponent {
         return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoItemListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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: "19.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: "19.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 }]
@@ -8241,11 +8324,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();
         }
     }
@@ -8269,7 +8364,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) {
@@ -8465,11 +8560,11 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         this.closeEvent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "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: "19.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "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.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i5.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [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 }]
@@ -8513,6 +8608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  *
  */
 class PoPopupComponent extends PoPopupBaseComponent {
+    id = `po-popup[${uuid()}]`;
     renderer = inject(Renderer2);
     router = inject(Router);
     poControlPosition = inject(PoControlPositionService);
@@ -8521,6 +8617,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*.
      *
@@ -8573,7 +8674,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();
         }
@@ -10704,6 +10805,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
  *
@@ -10746,51 +10890,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;
 /**
@@ -10846,6 +10951,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)`                   |
  */
@@ -10873,11 +10981,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.
+     *
+     * Para gráficos dos tipos *bar*, *area*, *column* e *line*, representa os nomes das categorias exibidas no eixo.
+     *
+     * 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`.
      *
-     * > 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.
+     * > Caso nenhum valor seja informado, será utilizado um hífen como categoria
+     *   correspondente para cada série.
      *
-     * > Caso não seja especificado um valor para a categoria, será plotado um hífen na categoria referente a 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;
     /**
@@ -10896,7 +11011,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 = {
@@ -10923,7 +11038,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
@@ -11024,6 +11139,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();
@@ -11036,6 +11152,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();
@@ -11169,6 +11286,9 @@ class PoChartGridUtils {
                 }
             }
         };
+        if (this.component.isTypeRadar) {
+            return;
+        }
         if (this.component.isTypeBar) {
             options.yAxis.data = this.component.categories;
         }
@@ -11382,7 +11502,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;
@@ -11412,6 +11533,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 {
@@ -11563,11 +11813,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%';
@@ -11582,7 +11830,6 @@ class PoChartGaugeUtils {
         else if (isLargeScreen && height > 750) {
             radius = '100%';
         }
-        // 👇 Ajuste específico para altura muito pequena
         if (height < 400) {
             return this.setPropertiesDefaultHeight(center);
         }
@@ -11673,6 +11920,7 @@ use([
     GraphicComponent,
     LineChart,
     PieChart,
+    RadarChart,
     BrushComponent,
     DataZoomComponent,
     GridComponent,
@@ -11717,6 +11965,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);
@@ -11732,6 +11985,7 @@ class PoChartComponent extends PoChartBaseComponent {
     originalRadiusGauge;
     chartMarginTop = '0px';
     isTypeBar = false;
+    isTypeRadar = false;
     boundaryGap = false;
     listTypePieDonut;
     itemsTypeDonut = [];
@@ -12014,7 +12268,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);
@@ -12028,6 +12284,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);
     }
@@ -12052,7 +12311,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) {
@@ -12088,6 +12347,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) {
@@ -12125,7 +12387,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;
@@ -12147,6 +12412,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);
@@ -12168,6 +12436,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) {
@@ -12176,6 +12445,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) {
@@ -12203,8 +12475,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;
@@ -12221,6 +12493,10 @@ class PoChartComponent extends PoChartBaseComponent {
                 this.isTypeGauge = true;
                 serie.type = 'gauge';
                 break;
+            case PoChartType.Radar:
+                this.isTypeRadar = true;
+                serie.type = 'radar';
+                break;
         }
     }
     setTableProperties() {
@@ -12247,6 +12523,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) => {
@@ -12286,6 +12566,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 },
@@ -26538,7 +26846,7 @@ class PoTableComponent extends PoTableBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTableComponent, deps: [{ token: PoDateService }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }, { token: PoLanguageService }, { token: i0.ChangeDetectorRef }, { token: i1.DecimalPipe }, { token: PoTableService }, { token: ICONS_DICTIONARY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoTableComponent, isStandalone: false, selector: "po-table", providers: [PoDateService, PoTableService], queries: [{ propertyName: "tableRowTemplate", first: true, predicate: PoTableRowTemplateDirective, descendants: true, static: true }, { propertyName: "tableCellTemplate", first: true, predicate: PoTableCellTemplateDirective, descendants: true }, { propertyName: "tableColumnTemplates", predicate: PoTableColumnTemplateDirective }], viewQueries: [{ propertyName: "noColumnsHeader", first: true, predicate: ["noColumnsHeader"], descendants: true, read: ElementRef }, { propertyName: "poPopupComponent", first: true, predicate: ["popup"], descendants: true }, { propertyName: "modalDelete", first: true, predicate: PoModalComponent, descendants: true, static: true }, { propertyName: "tableFooterElement", first: true, predicate: ["tableFooter"], descendants: true, read: ElementRef }, { propertyName: "tableWrapperElement", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef }, { propertyName: "tableTemplate", first: true, predicate: ["tableTemplate"], descendants: true, read: ElementRef }, { propertyName: "tableVirtualScroll", first: true, predicate: ["tableVirtualScroll"], descendants: true, read: ElementRef }, { propertyName: "tableScrollable", first: true, predicate: ["tableScrollable"], descendants: true, read: ElementRef }, { propertyName: "columnManager", first: true, predicate: ["columnManager"], descendants: true, read: ElementRef }, { propertyName: "columnBatchActions", first: true, predicate: ["columnBatchActions"], descendants: true, read: ElementRef }, { propertyName: "columnActionLeft", first: true, predicate: ["columnActionLeft"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "columnManagerTarget", first: true, predicate: ["columnManagerTarget"], descendants: true }, { propertyName: "columnManagerTargetFixed", first: true, predicate: ["columnManagerTargetFixed"], descendants: true }, { propertyName: "actionsIconElement", predicate: ["actionsIconElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-table-actions\">\n  @if (hasValidColumns && itemsSelected.length > 0 && !hideBatchActions) {\n    <div #columnBatchActions class=\"po-table-actions-batch-actions\">\n      <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n        <strong>\n          <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n          <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n          <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n        </strong>\n      </div>\n      <div class=\"po-table-actions-batch-actions__buttons\">\n        <po-button\n          p-icon=\"ICON_DELETE\"\n          [p-danger]=\"true\"\n          [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n          [p-label]=\"literals.delete\"\n          [p-size]=\"componentsSize\"\n          (p-click)=\"modalDelete.open()\"\n        ></po-button>\n      </div>\n    </div>\n  }\n\n  @if (hasValidColumns && !hideColumnsManager) {\n    <div #columnManager class=\"po-table-actions-column-manager\">\n      <po-button\n        #columnManagerTarget\n        p-icon=\"ICON_SETTINGS\"\n        p-kind=\"tertiary\"\n        p-tooltip-position=\"left\"\n        [p-aria-label]=\"literals.columnsManager\"\n        [p-tooltip]=\"literals.columnsManager\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"onOpenColumnManager()\"\n      ></po-button>\n    </div>\n  }\n\n  @if (!hideTableSearch && hasValidColumns) {\n    <div class=\"po-table-search\">\n      <po-search\n        [p-items]=\"items\"\n        [p-filter-keys]=\"filteredColumns\"\n        [p-filter-type]=\"filterType\"\n        [p-size]=\"componentsSize\"\n        (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n      >\n      </po-search>\n    </div>\n  }\n</div>\n@if (container) {\n  <po-container p-no-padding>\n    <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n  </po-container>\n} @else {\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n}\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Show More Button -->\n@if (!infiniteScroll) {\n  <div\n    class=\"po-row po-table-footer-show-more\"\n    [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n    #tableFooter\n  >\n    <po-button\n      class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-loading]=\"loadingShowMore\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    #tableScrollable\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped,\n      'po-table-data-fixed-columns': applyFixedColumns(),\n      'po-table-text-wrap-enabled': textWrap\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead\n      [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\"\n      [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n    >\n      <tr\n        [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        @if (hasSelectableColumn) {\n          <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              @if (!hideSelectAll) {\n                <po-checkbox\n                  name=\"selectAll\"\n                  [p-size]=\"componentsSize\"\n                  (p-change)=\"selectAllRows()\"\n                  [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                ></po-checkbox>\n              }\n            </div>\n          </th>\n        }\n\n        @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n          <th\n            #columnActionLeft\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n        }\n\n        @if (!hasMainColumns) {\n          <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n            @if (height) {\n              <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              </div>\n            } @else {\n              {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n            }\n          </th>\n        }\n\n        @if (this.isDraggable || hasSomeFixed()) {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                @if (this.isDraggable && !column.fixed) {\n                  @if (iconNameLib === 'AnimaliaIcon') {\n                    <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                  }\n                  @if (iconNameLib === 'PoIcon') {\n                    <svg\n                      cdkDragHandle\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    </svg>\n                  }\n                }\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        } @else {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        }\n\n        @if (hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        @if (\n          hasVisibleActions &&\n          actionRight &&\n          hasItems &&\n          hasMainColumns &&\n          (visibleActions.length > 1 || isSingleAction)\n        ) {\n          <th\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        }\n      </tr>\n    </thead>\n\n    @if (!hasItems || !hasMainColumns) {\n      <tbody class=\"po-table-group-row\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n    }\n\n    @if (hasMainColumns) {\n      @for (row of filteredItems; track trackBy(rowIndex); let rowIndex = $index) {\n        <tbody class=\"po-table-group-row\">\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                [ngClass]=\"getClassColor(row, column)\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    }\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped,\n        'po-table-data-fixed-columns': applyFixedColumns(),\n        'po-table-text-wrap-enabled': textWrap\n      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead\n        class=\"po-table-header-sticky\"\n        [style.top]=\"inverseOfTranslation\"\n        [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n      >\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @if (hasSelectableColumn) {\n            <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n              <div [class.po-table-header-fixed-inner]=\"height\">\n                @if (!hideSelectAll) {\n                  <po-checkbox\n                    name=\"selectAll\"\n                    (p-change)=\"selectAllRows()\"\n                    [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                    [p-size]=\"componentsSize\"\n                  ></po-checkbox>\n                }\n              </div>\n            </th>\n          }\n\n          @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n            <th\n              #columnActionLeft\n              [class.po-table-header-master-detail]=\"!isSingleAction\"\n              [class.po-table-header-single-action]=\"isSingleAction\"\n            ></th>\n          }\n\n          @if (!hasMainColumns) {\n            <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n              @if (height) {\n                <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n                </div>\n              } @else {\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              }\n            </th>\n          }\n\n          @if (this.isDraggable || hasSomeFixed()) {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                [class.po-table-column-drag-box]=\"this.isDraggable\"\n                (click)=\"sortColumn(column)\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  @if (this.isDraggable && !column.fixed) {\n                    @if (iconNameLib === 'AnimaliaIcon') {\n                      <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                    }\n                    @if (iconNameLib === 'PoIcon') {\n                      <svg\n                        cdkDragHandle\n                        width=\"16\"\n                        height=\"16\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                      </svg>\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          } @else {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                (click)=\"sortColumn(column)\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          }\n\n          @if (hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          @if (\n            hasVisibleActions &&\n            actionRight &&\n            hasItems &&\n            hasMainColumns &&\n            (visibleActions.length > 1 || isSingleAction)\n          ) {\n            <th\n              [class.po-table-header-single-action]=\"isSingleAction\"\n              [class.po-table-header-actions]=\"!isSingleAction\"\n            ></th>\n          }\n        </tr>\n      </thead>\n\n      @if (!hasItems || !hasMainColumns) {\n        <tbody class=\"po-table-group-row\">\n          <tr class=\"po-table-row po-table-row-no-data\">\n            <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n              <span> {{ literals.noData }} </span>\n            </td>\n          </tr>\n        </tbody>\n      }\n\n      @if (hasMainColumns) {\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [ngClass]=\"getClassColor(row, column)\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if ((containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)) {\n    <po-icon [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\" class=\"po-clickable\"> </po-icon>\n  }\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio\n    [name]=\"idRadio\"\n    [p-checked]=\"row.$selected\"\n    [p-size]=\"componentsSize\"\n    (p-change-selected)=\"selectRow(row)\"\n  ></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n    [p-size]=\"componentsSize\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  @if (sort && column.sortable !== false) {\n    <span\n      [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n      [class.po-table-header-icon-descending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n      \"\n      [class.po-table-header-icon-ascending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n      \"\n    >\n      @if (JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)) {\n        @if (iconNameLib === 'AnimaliaIcon') {\n          <po-icon p-icon=\"ICON_SORT\"></po-icon>\n        }\n        @if (iconNameLib === 'PoIcon') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n              fill=\"#1D1D30\"\n            />\n          </svg>\n        }\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending) {\n        @if (iconNameLib === 'AnimaliaIcon') {\n          <po-icon p-icon=\"ICON_SORT_ASC\"></po-icon>\n        }\n        @if (iconNameLib === 'PoIcon') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n              fill=\"black\"\n            />\n          </svg>\n        }\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending) {\n        @if (iconNameLib === 'AnimaliaIcon') {\n          <po-icon cdkDragHandle p-icon=\"ICON_SORT_DESC\"></po-icon>\n        }\n        @if (iconNameLib === 'PoIcon') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n              fill=\"black\"\n            />\n          </svg>\n        }\n      }\n    </span>\n  }\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if (isSingleAction) {\n    <td\n      class=\"po-table-column po-table-column-single-action\"\n      [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n      [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n      [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    >\n      @if (firstAction.visible !== false) {\n        <div\n          class=\"po-table-single-action po-clickable\"\n          [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n          (click)=\"executeTableAction(row, firstAction)\"\n        >\n          @if (firstAction.icon) {\n            <po-icon class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n          }\n          @if (firstAction.label) {\n            <span>{{ firstAction.label }}</span>\n          }\n        </div>\n      }\n    </td>\n  }\n\n  @if (visibleActions.length > 1) {\n    <td class=\"po-table-column-actions\">\n      <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n        <po-icon class=\"po-field-icon\" p-icon=\"ICON_MORE\"></po-icon>\n      </div>\n    </td>\n  }\n</ng-template>\n\n@if (!hideColumnsManager) {\n  <po-table-column-manager\n    [p-columns]=\"columns\"\n    [p-max-columns]=\"maxColumns\"\n    [p-target]=\"columnManagerTarget\"\n    [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n    [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n    (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n    (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n    [p-columns-default]=\"initialColumns\"\n    [p-components-size]=\"componentsSize\"\n    (p-initial-columns)=\"onColumnRestoreManager($event)\"\n  >\n  </po-table-column-manager>\n}\n\n<po-modal\n  #modalDelete\n  [p-components-size]=\"componentsSize\"\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoRadioComponent, selector: "po-radio", inputs: ["p-value", "p-size", "p-required", "p-label-text-wrap", "p-checked"], outputs: ["p-blur", "p-change-selected"] }, { kind: "component", type: PoSearchComponent, selector: "po-search" }, { kind: "component", type: PoTableColumnIconComponent, selector: "po-table-column-icon", inputs: ["p-column", "p-row", "p-icons"] }, { kind: "component", type: PoTableColumnLabelComponent, selector: "po-table-column-label", inputs: ["p-value"] }, { kind: "component", type: PoTableColumnLinkComponent, selector: "po-table-column-link", inputs: ["p-action", "p-disabled", "p-link", "p-open-new-tab", "p-row", "p-value"] }, { kind: "component", type: PoTableColumnManagerComponent, selector: "po-table-column-manager", inputs: ["p-columns", "p-target", "p-columns-default", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-components-size", "p-max-columns"], outputs: ["p-visible-columns-change", "p-change-visible-columns", "p-initial-columns"] }, { kind: "component", type: PoTableDetailComponent, selector: "po-table-detail", inputs: ["p-components-size", "p-items", "p-parent-row", "p-selectable", "p-detail"], outputs: ["p-select-row"] }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }, { kind: "component", type: PoTableSubtitleFooterComponent, selector: "po-table-subtitle-footer", inputs: ["p-components-size", "p-literals", "p-subtitles"] }, { kind: "directive", type: PoTableColumnFrozenDirective, selector: "[pFrozenColumn]", inputs: ["pFrozenColumn", "alignFrozen"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PoTimePipe, name: "po_time" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoTableComponent, isStandalone: false, selector: "po-table", providers: [PoDateService, PoTableService], queries: [{ propertyName: "tableRowTemplate", first: true, predicate: PoTableRowTemplateDirective, descendants: true, static: true }, { propertyName: "tableCellTemplate", first: true, predicate: PoTableCellTemplateDirective, descendants: true }, { propertyName: "tableColumnTemplates", predicate: PoTableColumnTemplateDirective }], viewQueries: [{ propertyName: "noColumnsHeader", first: true, predicate: ["noColumnsHeader"], descendants: true, read: ElementRef }, { propertyName: "poPopupComponent", first: true, predicate: ["popup"], descendants: true }, { propertyName: "modalDelete", first: true, predicate: PoModalComponent, descendants: true, static: true }, { propertyName: "tableFooterElement", first: true, predicate: ["tableFooter"], descendants: true, read: ElementRef }, { propertyName: "tableWrapperElement", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef }, { propertyName: "tableTemplate", first: true, predicate: ["tableTemplate"], descendants: true, read: ElementRef }, { propertyName: "tableVirtualScroll", first: true, predicate: ["tableVirtualScroll"], descendants: true, read: ElementRef }, { propertyName: "tableScrollable", first: true, predicate: ["tableScrollable"], descendants: true, read: ElementRef }, { propertyName: "columnManager", first: true, predicate: ["columnManager"], descendants: true, read: ElementRef }, { propertyName: "columnBatchActions", first: true, predicate: ["columnBatchActions"], descendants: true, read: ElementRef }, { propertyName: "columnActionLeft", first: true, predicate: ["columnActionLeft"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "columnManagerTarget", first: true, predicate: ["columnManagerTarget"], descendants: true }, { propertyName: "columnManagerTargetFixed", first: true, predicate: ["columnManagerTargetFixed"], descendants: true }, { propertyName: "actionsIconElement", predicate: ["actionsIconElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-table-actions\">\n  @if (hasValidColumns && itemsSelected.length > 0 && !hideBatchActions) {\n    <div #columnBatchActions class=\"po-table-actions-batch-actions\">\n      <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n        <strong>\n          <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n          <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n          <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n        </strong>\n      </div>\n      <div class=\"po-table-actions-batch-actions__buttons\">\n        <po-button\n          p-icon=\"ICON_DELETE\"\n          [p-danger]=\"true\"\n          [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n          [p-label]=\"literals.delete\"\n          [p-size]=\"componentsSize\"\n          (p-click)=\"modalDelete.open()\"\n        ></po-button>\n      </div>\n    </div>\n  }\n\n  @if (hasValidColumns && !hideColumnsManager) {\n    <div #columnManager class=\"po-table-actions-column-manager\">\n      <po-button\n        #columnManagerTarget\n        p-icon=\"ICON_SETTINGS\"\n        p-kind=\"tertiary\"\n        p-tooltip-position=\"left\"\n        [p-aria-label]=\"literals.columnsManager\"\n        [p-tooltip]=\"literals.columnsManager\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"onOpenColumnManager()\"\n      ></po-button>\n    </div>\n  }\n\n  @if (!hideTableSearch && hasValidColumns) {\n    <div class=\"po-table-search\">\n      <po-search\n        [p-items]=\"items\"\n        [p-filter-keys]=\"filteredColumns\"\n        [p-filter-type]=\"filterType\"\n        [p-size]=\"componentsSize\"\n        (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n      >\n      </po-search>\n    </div>\n  }\n</div>\n@if (container) {\n  <po-container p-no-padding>\n    <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n  </po-container>\n} @else {\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n}\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-sticky]=\"loading\">\n    @if (loading) {\n      <po-loading-overlay [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\n    }\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        @if (height) {\n          <div class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n            <div #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n              @if (virtualScroll) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n                </div>\n              }\n              @if (!virtualScroll) {\n                <div class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n                  <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        @if (!height) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (hasFooter) {\n    <div class=\"po-table-footer\">\n      @for (column of subtitleColumns; track trackBy($index)) {\n        <po-table-subtitle-footer\n          [p-components-size]=\"componentsSize\"\n          [p-literals]=\"literals\"\n          [p-subtitles]=\"column.subtitles\"\n        >\n        </po-table-subtitle-footer>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Show More Button -->\n@if (!infiniteScroll) {\n  <div\n    class=\"po-row po-table-footer-show-more\"\n    [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n    #tableFooter\n  >\n    <po-button\n      class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n      [p-disabled]=\"showMoreDisabled\"\n      [p-label]=\"literals.loadMoreData\"\n      [p-loading]=\"loadingShowMore\"\n      [p-size]=\"componentsSize\"\n      (p-click)=\"onShowMore()\"\n    >\n    </po-button>\n  </div>\n}\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    #tableScrollable\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped,\n      'po-table-data-fixed-columns': applyFixedColumns(),\n      'po-table-text-wrap-enabled': textWrap\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead\n      [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\"\n      [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n    >\n      <tr\n        [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        @if (hasSelectableColumn) {\n          <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              @if (!hideSelectAll) {\n                <po-checkbox\n                  name=\"selectAll\"\n                  [p-size]=\"componentsSize\"\n                  (p-change)=\"selectAllRows()\"\n                  [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                ></po-checkbox>\n              }\n            </div>\n          </th>\n        }\n\n        @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n          <th\n            #columnActionLeft\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n        }\n\n        @if (!hasMainColumns) {\n          <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n            @if (height) {\n              <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              </div>\n            } @else {\n              {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n            }\n          </th>\n        }\n\n        @if (this.isDraggable || hasSomeFixed()) {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                @if (this.isDraggable && !column.fixed) {\n                  @if (iconNameLib === 'AnimaliaIcon') {\n                    <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                  }\n                  @if (iconNameLib === 'PoIcon') {\n                    <svg\n                      cdkDragHandle\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                      <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    </svg>\n                  }\n                }\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        } @else {\n          @for (column of mainColumns; track trackBy(i); let i = $index) {\n            <th\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{\n                'width':\n                  height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n              }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          }\n        }\n\n        @if (hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns) {\n          <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n        }\n\n        @if (\n          hasVisibleActions &&\n          actionRight &&\n          hasItems &&\n          hasMainColumns &&\n          (visibleActions.length > 1 || isSingleAction)\n        ) {\n          <th\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        }\n      </tr>\n    </thead>\n\n    @if (!hasItems || !hasMainColumns) {\n      <tbody class=\"po-table-group-row\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n    }\n\n    @if (hasMainColumns) {\n      @for (row of filteredItems; track trackBy(rowIndex); let rowIndex = $index) {\n        <tbody class=\"po-table-group-row\">\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table ou pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                [ngClass]=\"getClassColor(row, column)\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    }\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped,\n        'po-table-data-fixed-columns': applyFixedColumns(),\n        'po-table-text-wrap-enabled': textWrap\n      }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead\n        class=\"po-table-header-sticky\"\n        [style.top]=\"inverseOfTranslation\"\n        [attr.p-spacing]=\"spacing ?? (componentsSize === 'small' ? 'extraSmall' : 'medium')\"\n      >\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @if (hasSelectableColumn) {\n            <th [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\" class=\"po-table-column-selectable\">\n              <div [class.po-table-header-fixed-inner]=\"height\">\n                @if (!hideSelectAll) {\n                  <po-checkbox\n                    name=\"selectAll\"\n                    (p-change)=\"selectAllRows()\"\n                    [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n                    [p-size]=\"componentsSize\"\n                  ></po-checkbox>\n                }\n              </div>\n            </th>\n          }\n\n          @if ((hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          @if (!actionRight && hasItems && hasMainColumns && (visibleActions.length > 1 || isSingleAction)) {\n            <th\n              #columnActionLeft\n              [class.po-table-header-master-detail]=\"!isSingleAction\"\n              [class.po-table-header-single-action]=\"isSingleAction\"\n            ></th>\n          }\n\n          @if (!hasMainColumns) {\n            <th #noColumnsHeader class=\"po-table-header-column po-text-center\" [attr.colspan]=\"columnCount\">\n              @if (height) {\n                <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"hasValidColumns ? headerWidth : null\">\n                  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n                </div>\n              } @else {\n                {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n              }\n            </th>\n          }\n\n          @if (this.isDraggable || hasSomeFixed()) {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                [class.po-table-column-drag-box]=\"this.isDraggable\"\n                (click)=\"sortColumn(column)\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  @if (this.isDraggable && !column.fixed) {\n                    @if (iconNameLib === 'AnimaliaIcon') {\n                      <po-icon cdkDragHandle p-icon=\"ICON_DRAG\"></po-icon>\n                    }\n                    @if (iconNameLib === 'PoIcon') {\n                      <svg\n                        cdkDragHandle\n                        width=\"16\"\n                        height=\"16\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                        <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                      </svg>\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          } @else {\n            @for (column of mainColumns; track trackBy(i); let i = $index) {\n              <th\n                class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n                [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n                [ngClass]=\"{\n                  'po-table-header-sorted':\n                    sort &&\n                    JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                    (sortedColumn.ascending || !sortedColumn.ascending)\n                }\"\n                [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n                [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n                (click)=\"sortColumn(column)\"\n                [pFrozenColumn]=\"column.fixed\"\n              >\n                <div\n                  class=\"po-table-header-flex\"\n                  [class.po-table-header-fixed-inner]=\"height\"\n                  [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                  [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n                >\n                  <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\">\n                  </ng-container>\n                </div>\n              </th>\n            }\n          }\n\n          @if (hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)) {\n            <th class=\"po-table-header-column po-table-header-master-detail\"></th>\n          }\n\n          @if (\n            hasVisibleActions &&\n            actionRight &&\n            hasItems &&\n            hasMainColumns &&\n            (visibleActions.length > 1 || isSingleAction)\n          ) {\n            <th\n              [class.po-table-header-single-action]=\"isSingleAction\"\n              [class.po-table-header-actions]=\"!isSingleAction\"\n            ></th>\n          }\n        </tr>\n      </thead>\n\n      @if (!hasItems || !hasMainColumns) {\n        <tbody class=\"po-table-group-row\">\n          <tr class=\"po-table-row po-table-row-no-data\">\n            <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n              <span> {{ literals.noData }} </span>\n            </td>\n          </tr>\n        </tbody>\n      }\n\n      @if (hasMainColumns) {\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            @if (selectable) {\n              <td class=\"po-table-column-selectable\">\n                <ng-container\n                  *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\"\n                >\n                </ng-container>\n              </td>\n            }\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table pela diretiva -->\n            @if (\n              (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n              (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n            ) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            @if (!actionRight && (visibleActions.length > 1 || isSingleAction)) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n            @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {\n              <td\n                [style.width]=\"column.width\"\n                [style.max-width]=\"column.width\"\n                [style.min-width]=\"column.width\"\n                [class.po-table-column]=\"column.type !== 'icon'\"\n                [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-column-center]=\"column.type === 'subtitle'\"\n                [class.po-table-column-icons]=\"column.type === 'icon'\"\n                [ngClass]=\"getClassColor(row, column)\"\n                [pFrozenColumn]=\"column.fixed\"\n                class=\"p-element po-frozen-column\"\n                (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n              >\n                <div\n                  class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                  [p-tooltip]=\"tooltipText\"\n                  [p-append-in-body]=\"true\"\n                  (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                  (mouseleave)=\"tooltipMouseLeave()\"\n                >\n                  @switch (column.type) {\n                    @case ('columnTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('cellTemplate') {\n                      <span>\n                        <ng-container\n                          *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                        >\n                        </ng-container>\n                      </span>\n                    }\n                    @case ('boolean') {\n                      <span>\n                        {{ getBooleanLabel(getCellData(row, column), column) }}\n                      </span>\n                    }\n                    @case ('currency') {\n                      <span>\n                        {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n                      </span>\n                    }\n                    @case ('date') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                      </span>\n                    }\n                    @case ('time') {\n                      <span>\n                        {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                      </span>\n                    }\n                    @case ('dateTime') {\n                      <span>\n                        {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                      </span>\n                    }\n                    @case ('number') {\n                      <span>\n                        {{ formatNumber(getCellData(row, column), column.format) }}\n                      </span>\n                    }\n                    @case ('link') {\n                      <po-table-column-link\n                        [p-action]=\"column.action\"\n                        [p-disabled]=\"checkDisabled(row, column)\"\n                        [p-link]=\"row[column.link]\"\n                        [p-row]=\"row\"\n                        [p-value]=\"getCellData(row, column)\"\n                        (click)=\"onClickLink($event, row, column)\"\n                      >\n                      </po-table-column-link>\n                    }\n                    @case ('icon') {\n                      <po-table-column-icon [p-column]=\"column\" [p-icons]=\"getColumnIcons(row, column)\" [p-row]=\"row\">\n                      </po-table-column-icon>\n                    }\n                    @case ('subtitle') {\n                      <span>\n                        <po-table-subtitle-circle\n                          [p-subtitle]=\"getSubtitleColumn(row, column)\"\n                        ></po-table-subtitle-circle>\n                      </span>\n                    }\n                    @case ('label') {\n                      <span>\n                        <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                      </span>\n                    }\n                    @default {\n                      <span>{{ getCellData(row, column) }}</span>\n                    }\n                  }\n                </div>\n              </td>\n            }\n            @if (hasRowTemplateWithArrowDirectionRight) {\n              <td class=\"po-table-column-detail-toggle\" (click)=\"toggleDetail(row)\">\n                <ng-template\n                  [ngTemplateOutlet]=\"poTableColumnDetail\"\n                  [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            }\n            <!-- Coluna de a\u00E7oes na direita -->\n            @if (actionRight) {\n              <ng-template\n                [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            }\n          </tr>\n          @if (hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)) {\n            <tr>\n              <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n                >\n                </ng-template>\n              </td>\n            </tr>\n          }\n          @if (hasMainColumns && isShowMasterDetail(row)) {\n            <tr>\n              <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n                <po-table-detail\n                  [p-selectable]=\"selectable && !detailHideSelect\"\n                  [p-detail]=\"columnMasterDetail.detail\"\n                  [p-items]=\"row[nameColumnDetail]\"\n                  [p-parent-row]=\"row\"\n                  [p-components-size]=\"componentsSize\"\n                  (p-select-row)=\"selectDetailRow($event)\"\n                >\n                </po-table-detail>\n              </td>\n            </tr>\n          }\n        </tbody>\n      }\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"componentsSize\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if ((containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)) {\n    <po-icon [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\" class=\"po-clickable\"> </po-icon>\n  }\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio\n    [name]=\"idRadio\"\n    [p-checked]=\"row.$selected\"\n    [p-size]=\"componentsSize\"\n    (p-change-selected)=\"selectRow(row)\"\n  ></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n    [p-size]=\"componentsSize\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  @if (sort && column.sortable !== false) {\n    <span\n      [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n      [class.po-table-header-icon-descending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n      \"\n      [class.po-table-header-icon-ascending]=\"\n        JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n      \"\n    >\n      @if (JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)) {\n        @if (iconNameLib === 'AnimaliaIcon') {\n          <po-icon p-icon=\"ICON_SORT\"></po-icon>\n        }\n        @if (iconNameLib === 'PoIcon') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n              fill=\"#1D1D30\"\n            />\n          </svg>\n        }\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending) {\n        @if (iconNameLib === 'AnimaliaIcon') {\n          <po-icon p-icon=\"ICON_SORT_ASC\"></po-icon>\n        }\n        @if (iconNameLib === 'PoIcon') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n              fill=\"black\"\n            />\n          </svg>\n        }\n      }\n      @if (JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending) {\n        @if (iconNameLib === 'AnimaliaIcon') {\n          <po-icon cdkDragHandle p-icon=\"ICON_SORT_DESC\"></po-icon>\n        }\n        @if (iconNameLib === 'PoIcon') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n              fill=\"black\"\n            />\n          </svg>\n        }\n      }\n    </span>\n  }\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  @if (isSingleAction) {\n    <td\n      class=\"po-table-column po-table-column-single-action\"\n      [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n      [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n      [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    >\n      @if (firstAction.visible !== false) {\n        <div\n          class=\"po-table-single-action po-clickable\"\n          [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n          (click)=\"executeTableAction(row, firstAction)\"\n        >\n          @if (firstAction.icon) {\n            <po-icon class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n          }\n          @if (firstAction.label) {\n            <span>{{ firstAction.label }}</span>\n          }\n        </div>\n      }\n    </td>\n  }\n\n  @if (visibleActions.length > 1) {\n    <td class=\"po-table-column-actions\">\n      <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n        <po-icon class=\"po-field-icon\" p-icon=\"ICON_MORE\"></po-icon>\n      </div>\n    </td>\n  }\n</ng-template>\n\n@if (!hideColumnsManager) {\n  <po-table-column-manager\n    [p-columns]=\"columns\"\n    [p-max-columns]=\"maxColumns\"\n    [p-target]=\"columnManagerTarget\"\n    [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n    [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n    (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n    (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n    [p-columns-default]=\"initialColumns\"\n    [p-components-size]=\"componentsSize\"\n    (p-initial-columns)=\"onColumnRestoreManager($event)\"\n  >\n  </po-table-column-manager>\n}\n\n<po-modal\n  #modalDelete\n  [p-components-size]=\"componentsSize\"\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i5$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoRadioComponent, selector: "po-radio", inputs: ["p-value", "p-size", "p-required", "p-label-text-wrap", "p-checked"], outputs: ["p-blur", "p-change-selected"] }, { kind: "component", type: PoSearchComponent, selector: "po-search" }, { kind: "component", type: PoTableColumnIconComponent, selector: "po-table-column-icon", inputs: ["p-column", "p-row", "p-icons"] }, { kind: "component", type: PoTableColumnLabelComponent, selector: "po-table-column-label", inputs: ["p-value"] }, { kind: "component", type: PoTableColumnLinkComponent, selector: "po-table-column-link", inputs: ["p-action", "p-disabled", "p-link", "p-open-new-tab", "p-row", "p-value"] }, { kind: "component", type: PoTableColumnManagerComponent, selector: "po-table-column-manager", inputs: ["p-columns", "p-target", "p-columns-default", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-components-size", "p-max-columns"], outputs: ["p-visible-columns-change", "p-change-visible-columns", "p-initial-columns"] }, { kind: "component", type: PoTableDetailComponent, selector: "po-table-detail", inputs: ["p-components-size", "p-items", "p-parent-row", "p-selectable", "p-detail"], outputs: ["p-select-row"] }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }, { kind: "component", type: PoTableSubtitleFooterComponent, selector: "po-table-subtitle-footer", inputs: ["p-components-size", "p-literals", "p-subtitles"] }, { kind: "directive", type: PoTableColumnFrozenDirective, selector: "[pFrozenColumn]", inputs: ["pFrozenColumn", "alignFrozen"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PoTimePipe, name: "po_time" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTableComponent, decorators: [{
             type: Component,
@@ -30265,6 +30573,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
      *
@@ -30392,6 +30715,7 @@ class PoInputBaseComponent {
     onTouched = null;
     passedWriteValue = false;
     validatorChange;
+    _loading = false;
     _maxlength;
     _minlength;
     _noAutocomplete = false;
@@ -30781,6 +31105,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) {
@@ -30791,7 +31123,7 @@ class PoInputBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoInputBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.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: "19.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: "19.0.7", ngImport: i0, type: PoInputBaseComponent, decorators: [{
             type: Directive
@@ -30836,6 +31168,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], errorLimit: [{
                 type: Input,
                 args: ['p-error-limit']
+            }], loading: [{
+                type: Input,
+                args: ['p-loading']
             }], optional: [{
                 type: Input,
                 args: ['p-optional']
@@ -31555,7 +31890,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: "19.0.7", ngImport: i0, type: PoDecimalComponent, decorators: [{
             type: Component,
@@ -31570,7 +31905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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 }]
@@ -31944,11 +32279,11 @@ class PoEmailComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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: "19.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: "19.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: () => [] });
 
 /**
@@ -32000,7 +32335,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: "19.0.7", ngImport: i0, type: PoInputComponent, decorators: [{
             type: Component,
@@ -32015,7 +32350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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 }]
@@ -32088,11 +32423,11 @@ class PoLoginComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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: "19.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: "19.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']
@@ -37285,7 +37620,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: "19.0.7", ngImport: i0, type: PoNumberComponent, decorators: [{
             type: Component,
@@ -37300,7 +37635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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']
@@ -37402,7 +37737,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: "19.0.7", ngImport: i0, type: PoPasswordComponent, decorators: [{
             type: Component,
@@ -37417,7 +37752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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']
@@ -40632,7 +40967,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: "19.0.7", ngImport: i0, type: PoUrlComponent, decorators: [{
             type: Component,
@@ -40647,7 +40982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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'];