@po-ui/ng-components 21.0.0-rc.0 → 21.0.1

package/README.md

@@ -19,7 +19,7 @@ Utilizando o comando `ng add` do [Angular CLI](https://cli.angular.io/), vamos a
 Execute o comando abaixo na pasta raiz do seu projeto:
 
 ```
-ng add @po-ui/ng-components@next
+ng add @po-ui/ng-components
 ```
 
 

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, TemplateRef, ViewChild, HostBinding, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ChangeDetectorRef, ViewChildren, ContentChildren, input, forwardRef, Renderer2, IterableDiffers, ViewContainerRef, ContentChild, Pipe, Inject, Injector, InjectionToken, provideAppInitializer } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, TemplateRef, ViewChild, HostBinding, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ChangeDetectorRef, ViewChildren, ContentChildren, InjectionToken, ViewContainerRef, Optional, Inject, input, forwardRef, Renderer2, IterableDiffers, 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';
@@ -5251,10 +5251,6 @@ class PoLoadingBaseComponent {
      *  - `md`: 32px
      *  - `lg`: 80px
      *
-     * > Em nível de acessibilidade **AA**, caso o valor de `p-size` não seja definido, o valor padrão será `sm`
-     * > quando o valor padrão dos componentes for configurado como `small` no
-     * > [serviço de tema](https://po-ui.io/documentation/po-theme).
-     *
      * @default `lg`
      */
     set size(value) {
@@ -5262,13 +5258,13 @@ class PoLoadingBaseComponent {
             this._size = PoLoadingIconSize[value];
         }
         else {
-            const a11yPref = getDefaultSizeFn(PoFieldSize);
-            this._size = a11yPref === PoFieldSize.Small ? PoLoadingIconSize.sm : PoLoadingIconSize.lg;
+            this._size = PoLoadingIconSize.lg;
         }
     }
     get size() {
         return this._size;
     }
+    inOverlay = false;
     constructor(languageService) {
         this.languageService = languageService;
         this.text = this.getTextDefault();
@@ -5278,7 +5274,7 @@ class PoLoadingBaseComponent {
         return poLoadingLiteralsDefault[language].loading;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: PoLoadingBaseComponent, isStandalone: true, inputs: { text: ["p-text", "text"], size: ["p-size", "size"] }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: PoLoadingBaseComponent, isStandalone: true, inputs: { text: ["p-text", "text"], size: ["p-size", "size"], inOverlay: ["p-in-overlay", "inOverlay"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingBaseComponent, decorators: [{
             type: Directive
@@ -5288,8 +5284,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], size: [{
                 type: Input,
                 args: ['p-size']
+            }], inOverlay: [{
+                type: Input,
+                args: ['p-in-overlay']
             }] } });
 
+const LOADING_ICON_COMPONENT = new InjectionToken('LOADING_ICON_COMPONENT');
+
 /**
  * @docsPrivate
  *
@@ -5299,9 +5300,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * É possível alterá-la para um tom cinza conforme a necessidade.
  */
 class PoLoadingIconComponent {
+    loadingIconComponent;
     _neutralColor;
     _size = 'md';
+    createdRef;
     id = uuid();
+    loadingContainer;
     /**
      * @optional
      *
@@ -5334,22 +5338,52 @@ class PoLoadingIconComponent {
      */
     set size(value) {
         this._size = PoLoadingIconSize[value] ? PoLoadingIconSize[value] : PoLoadingIconSize.md;
+        if (this.createdRef) {
+            this.createdRef.instance.size = this.size;
+        }
     }
     get size() {
         return this._size;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: PoLoadingIconComponent, isStandalone: false, selector: "po-loading-icon", inputs: { neutralColor: ["p-neutral-color", "neutralColor"], size: ["p-size", "size"] }, ngImport: i0, template: "<div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n  <svg\n    [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n    viewBox=\"0 0 200 200\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <defs>\n      <linearGradient [id]=\"'first' + id\">\n        <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n        <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n      </linearGradient>\n      <linearGradient [id]=\"'second' + id\">\n        <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n        <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n      </linearGradient>\n    </defs>\n    <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n      <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n      <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n      <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n    </g>\n\n    <animateTransform\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      attributeName=\"transform\"\n      type=\"rotate\"\n      repeatCount=\"indefinite\"\n      dur=\"1200ms\"\n    />\n  </svg>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    inOverlay = false;
+    constructor(loadingIconComponent) {
+        this.loadingIconComponent = loadingIconComponent;
+    }
+    ngOnDestroy() {
+        if (this.createdRef) {
+            this.createdRef.destroy();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.loadingIconComponent && this.loadingContainer && this.inOverlay) {
+            this.loadingContainer.clear();
+            this.createdRef = this.loadingContainer.createComponent(this.loadingIconComponent);
+            this.createdRef.instance.size = this.size;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingIconComponent, deps: [{ token: LOADING_ICON_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLoadingIconComponent, isStandalone: false, selector: "po-loading-icon", inputs: { neutralColor: ["p-neutral-color", "neutralColor"], size: ["p-size", "size"], inOverlay: ["p-in-overlay", "inOverlay"] }, viewQueries: [{ propertyName: "loadingContainer", first: true, predicate: ["loadingContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-loading-icon', standalone: false, template: "<div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n  <svg\n    [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n    viewBox=\"0 0 200 200\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <defs>\n      <linearGradient [id]=\"'first' + id\">\n        <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n        <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n      </linearGradient>\n      <linearGradient [id]=\"'second' + id\">\n        <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n        <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n      </linearGradient>\n    </defs>\n    <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n      <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n      <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n      <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n    </g>\n\n    <animateTransform\n      from=\"0 0 0\"\n      to=\"360 0 0\"\n      attributeName=\"transform\"\n      type=\"rotate\"\n      repeatCount=\"indefinite\"\n      dur=\"1200ms\"\n    />\n  </svg>\n</div>\n" }]
-        }], propDecorators: { neutralColor: [{
+            args: [{ selector: 'po-loading-icon', standalone: false, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.Type, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [LOADING_ICON_COMPONENT]
+                }] }], propDecorators: { loadingContainer: [{
+                type: ViewChild,
+                args: ['loadingContainer', { read: ViewContainerRef, static: false }]
+            }], neutralColor: [{
                 type: Input,
                 args: ['p-neutral-color']
             }], size: [{
                 type: Input,
                 args: ['p-size']
+            }], inOverlay: [{
+                type: Input,
+                args: ['p-in-overlay']
             }] } });
 
 /**
@@ -5359,11 +5393,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  */
 class PoLoadingComponent extends PoLoadingBaseComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLoadingComponent, isStandalone: false, selector: "po-loading", usesInheritance: true, ngImport: i0, template: "<div class=\"po-loading po-loading-{{ size }}\">\n  <po-loading-icon [p-size]=\"size\"></po-loading-icon>\n\n  @if (text) {\n    <span class=\"po-loading-label po-text-ellipsis\"\n      >{{ text }}\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n    </span>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLoadingComponent, isStandalone: false, selector: "po-loading", usesInheritance: true, ngImport: i0, template: "<div class=\"po-loading po-loading-{{ size }}\">\n  <po-loading-icon [p-size]=\"size\" [p-in-overlay]=\"inOverlay\"></po-loading-icon>\n\n  @if (text) {\n    <span class=\"po-loading-label po-text-ellipsis\"\n      >{{ text }}\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n    </span>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-loading', standalone: false, template: "<div class=\"po-loading po-loading-{{ size }}\">\n  <po-loading-icon [p-size]=\"size\"></po-loading-icon>\n\n  @if (text) {\n    <span class=\"po-loading-label po-text-ellipsis\"\n      >{{ text }}\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n    </span>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-loading', standalone: false, template: "<div class=\"po-loading po-loading-{{ size }}\">\n  <po-loading-icon [p-size]=\"size\" [p-in-overlay]=\"inOverlay\"></po-loading-icon>\n\n  @if (text) {\n    <span class=\"po-loading-label po-text-ellipsis\"\n      >{{ text }}\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n      <div class=\"po-loading-dot\" aria-hidden=\"true\">.</div>\n    </span>\n  }\n</div>\n" }]
         }] });
 
 /**
@@ -5394,11 +5428,11 @@ class PoLoadingOverlayComponent extends PoLoadingOverlayBaseComponent {
         super(languageService);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: PoLoadingOverlayComponent, isStandalone: false, selector: "po-loading-overlay", usesInheritance: true, ngImport: i0, template: "<po-overlay [p-screen-lock]=\"screenLock\">\n  <po-loading [p-text]=\"text\" [p-size]=\"size\"></po-loading>\n</po-overlay>\n", dependencies: [{ kind: "component", type: PoOverlayComponent, selector: "po-overlay" }, { kind: "component", type: PoLoadingComponent, selector: "po-loading" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: PoLoadingOverlayComponent, isStandalone: false, selector: "po-loading-overlay", usesInheritance: true, ngImport: i0, template: "<po-overlay [p-screen-lock]=\"screenLock\">\n  <po-loading [p-text]=\"text\" [p-size]=\"size\" [p-in-overlay]=\"true\"></po-loading>\n</po-overlay>\n", dependencies: [{ kind: "component", type: PoOverlayComponent, selector: "po-overlay" }, { kind: "component", type: PoLoadingComponent, selector: "po-loading" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-loading-overlay', standalone: false, template: "<po-overlay [p-screen-lock]=\"screenLock\">\n  <po-loading [p-text]=\"text\" [p-size]=\"size\"></po-loading>\n</po-overlay>\n" }]
+            args: [{ selector: 'po-loading-overlay', standalone: false, template: "<po-overlay [p-screen-lock]=\"screenLock\">\n  <po-loading [p-text]=\"text\" [p-size]=\"size\" [p-in-overlay]=\"true\"></po-loading>\n</po-overlay>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6559,7 +6593,7 @@ class PoButtonComponent extends PoButtonBaseComponent {
         this.click.emit(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoButtonComponent, isStandalone: false, selector: "po-button", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [class.po-button-aa]=\"size === 'small'\"\n  [class.po-button-large]=\"size === 'large'\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon p-neutral-color [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [class.po-button-icon-aa]=\"size === 'small'\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoButtonComponent, isStandalone: false, selector: "po-button", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [class.po-button-aa]=\"size === 'small'\"\n  [class.po-button-large]=\"size === 'large'\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon p-neutral-color [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [class.po-button-icon-aa]=\"size === 'small'\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoButtonComponent, decorators: [{
             type: Component,
@@ -31750,7 +31784,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 || 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 });
+        ], 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", "p-in-overlay"] }, { 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: "21.0.9", ngImport: i0, type: PoDecimalComponent, decorators: [{
             type: Component,
@@ -32139,7 +32173,7 @@ class PoEmailComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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", "p-in-overlay"] }, { 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: "21.0.9", ngImport: i0, type: PoEmailComponent, decorators: [{
             type: Component,
@@ -32195,7 +32229,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 || 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 });
+        ], 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", "p-in-overlay"] }, { 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: "21.0.9", ngImport: i0, type: PoInputComponent, decorators: [{
             type: Component,
@@ -32283,7 +32317,7 @@ class PoLoginComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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", "p-in-overlay"] }, { 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: "21.0.9", ngImport: i0, type: PoLoginComponent, decorators: [{
             type: Component,
@@ -37483,7 +37517,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 || 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 });
+        ], 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", "p-in-overlay"] }, { 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: "21.0.9", ngImport: i0, type: PoNumberComponent, decorators: [{
             type: Component,
@@ -37600,7 +37634,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]=\"!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 });
+        ], 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", "p-in-overlay"] }, { 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: "21.0.9", ngImport: i0, type: PoPasswordComponent, decorators: [{
             type: Component,
@@ -40830,7 +40864,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 || 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 });
+        ], 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", "p-in-overlay"] }, { 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: "21.0.9", ngImport: i0, type: PoUrlComponent, decorators: [{
             type: Component,
@@ -47616,7 +47650,7 @@ class PoMenuFilterComponent {
         this.filter.emit(search);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoMenuFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoMenuFilterComponent, isStandalone: false, selector: "po-menu-filter", inputs: { componentsSize: ["p-components-size", "componentsSize"], loading: ["p-loading", "loading"], enableCollapse: ["p-enable-collapse", "enableCollapse"] }, outputs: { filter: "p-filter" }, viewQueries: [{ propertyName: "inputFilterElement", first: true, predicate: ["inputFilter"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"po-menu-filter-container\" [class.po-menu-filter-container-hidden]=\"enableCollapse\">\n  <input\n    #inputFilter\n    type=\"text\"\n    class=\"po-menu-filter\"\n    [class.po-menu-filter-aa]=\"componentsSize === 'small'\"\n    [placeholder]=\"literals.search\"\n    (keyup)=\"filterItems(inputFilter.value)\"\n  />\n\n  <div\n    class=\"po-menu-filter-search-icon-container\"\n    [class.po-menu-filter-search-icon-container-aa]=\"componentsSize === 'small'\"\n  >\n    @if (!loading) {\n      <po-icon\n        p-icon=\"ICON_SEARCH\"\n        class=\"po-menu-filter-icon po-field-icon\"\n        [class.po-field-icon-aa]=\"componentsSize === 'small'\"\n      ></po-icon>\n    }\n    @if (loading) {\n      <po-loading-icon [p-size]=\"componentsSize === 'small' ? 'xs' : 'sm'\"></po-loading-icon>\n    }\n  </div>\n  <div class=\"po-field-icon-container-right\">\n    <po-clean\n      [p-element-ref]=\"inputFilterElement\"\n      [p-size]=\"componentsSize\"\n      (p-change-event)=\"filterItems(inputFilter.value)\"\n    ></po-clean>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoMenuFilterComponent, isStandalone: false, selector: "po-menu-filter", inputs: { componentsSize: ["p-components-size", "componentsSize"], loading: ["p-loading", "loading"], enableCollapse: ["p-enable-collapse", "enableCollapse"] }, outputs: { filter: "p-filter" }, viewQueries: [{ propertyName: "inputFilterElement", first: true, predicate: ["inputFilter"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"po-menu-filter-container\" [class.po-menu-filter-container-hidden]=\"enableCollapse\">\n  <input\n    #inputFilter\n    type=\"text\"\n    class=\"po-menu-filter\"\n    [class.po-menu-filter-aa]=\"componentsSize === 'small'\"\n    [placeholder]=\"literals.search\"\n    (keyup)=\"filterItems(inputFilter.value)\"\n  />\n\n  <div\n    class=\"po-menu-filter-search-icon-container\"\n    [class.po-menu-filter-search-icon-container-aa]=\"componentsSize === 'small'\"\n  >\n    @if (!loading) {\n      <po-icon\n        p-icon=\"ICON_SEARCH\"\n        class=\"po-menu-filter-icon po-field-icon\"\n        [class.po-field-icon-aa]=\"componentsSize === 'small'\"\n      ></po-icon>\n    }\n    @if (loading) {\n      <po-loading-icon [p-size]=\"componentsSize === 'small' ? 'xs' : 'sm'\"></po-loading-icon>\n    }\n  </div>\n  <div class=\"po-field-icon-container-right\">\n    <po-clean\n      [p-element-ref]=\"inputFilterElement\"\n      [p-size]=\"componentsSize\"\n      (p-change-event)=\"filterItems(inputFilter.value)\"\n    ></po-clean>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoMenuFilterComponent, decorators: [{
             type: Component,
@@ -58286,5 +58320,5 @@ function validateProperty(property, target) {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoContextTabButtonComponent, PoContextTabsComponent, PoContextTabsModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHeaderComponent, PoHeaderModule, PoHelperComponent, PoHelperModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
+export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, LOADING_ICON_COMPONENT, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoContextTabButtonComponent, PoContextTabsComponent, PoContextTabsModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHeaderComponent, PoHeaderModule, PoHelperComponent, PoHelperModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map