npm - @po-ui/ng-components - Versions diffs - 20.8.0 → 20.10.0 - Mend

@po-ui/ng-components 20.8.0 → 20.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ViewChild, ChangeDetectorRef, ViewChildren, ContentChildren, HostBinding, input, booleanAttribute, forwardRef, Renderer2, IterableDiffers, ViewContainerRef, ContentChild, Pipe, DOCUMENT, Injector, provideAppInitializer } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ViewChild, ChangeDetectorRef, ViewChildren, ContentChildren, HostBinding, input, forwardRef, Renderer2, IterableDiffers, ViewContainerRef, ContentChild, Pipe, DOCUMENT, Injector, provideAppInitializer } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, DecimalPipe, TitleCasePipe, DatePipe, NgOptimizedImage, Location } from '@angular/common';
 import * as i2 from '@angular/platform-browser';
@@ -352,6 +352,7 @@ const AnimaliaIconDictionary = {
     ICON_ALIGN_JUSTIFY: 'an an-text-align-justify',
     ICON_ALIGN_LEFT: 'an an-text-align-left',
     ICON_ALIGN_RIGHT: 'an an-text-align-right',
+    ICON_ARROW_ARC_LEFT: 'an an-arrow-arc-left',
     ICON_ARROW_DOWN: 'an an-caret-down',
     ICON_ARROW_LEFT: 'an an-caret-left',
     ICON_ARROW_RIGHT: 'an an-caret-right',
@@ -388,14 +389,16 @@ const AnimaliaIconDictionary = {
     ICON_PARAMETERS: 'an an-sliders-horizontal',
     ICON_PICTURE: 'an an-image',
     ICON_PICTURE_BROKEN: 'an an-image-broken',
+    ICON_PLUS: 'an an-plus',
+    ICON_PROHIBIT: 'an an-prohibit',
     ICON_PUSH_PIN: 'an an-push-pin',
     ICON_PUSH_PIN_SLASH: 'an an-push-pin-slash',
     ICON_REFRESH: 'an an-arrow-clockwise',
     ICON_SEARCH: 'an an-magnifying-glass',
     ICON_SETTINGS: 'an an-gear-six',
-    ICON_SORT: 'an an-caret-up-down ',
-    ICON_SORT_ASC: 'an an-caret-up',
-    ICON_SORT_DESC: 'an an-caret-down',
+    ICON_SORT: 'an an-arrows-down-up',
+    ICON_SORT_ASC: 'an an-arrow-up',
+    ICON_SORT_DESC: 'an an-arrow-down',
     ICON_STAR: 'an an-star',
     ICON_TELEPHONE: 'an an-phone',
     ICON_TEXT_BOLD: 'an an-text-b',
@@ -6349,11 +6352,12 @@ class PoButtonBaseComponent {
      * @description
      * Ícone exibido ao lado esquerdo do label do botão.
      *
-     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
+     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
      * ```
      * <po-button p-icon="an an-user" p-label="PO button"></po-button>
      * ```
-     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
+     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+     * esteja carregada no projeto:
      * ```
      * <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
      * ```
@@ -7534,9 +7538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
  */
 class PoFieldContainerBottomComponent {
     poTooltip;
-    /** Texto exibido no tooltip do ícone de ajuda adicional. */
-    /** @deprecated v23.x.x */
-    additionalHelpTooltip = '';
+    helperEl;
     /** Define se o tooltip será inserido no `body` em vez do componente. */
     appendBox = false;
     disabled = false;
@@ -7549,48 +7551,39 @@ class PoFieldContainerBottomComponent {
      * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo.
      */
     errorLimit = false;
+    /** Texto de apoio do campo. */
     help;
-    /** Ativa a exibição da ajuda adicional. */
-    showAdditionalHelp = false;
-    /** Exibe o ícone de ajuda adicional. */
-    showAdditionalHelpIcon = false;
     /** Define o tamanho do componente. */
     size;
-    /** Evento disparado ao clicar no ícone de ajuda adicional. */
-    /** @deprecated v23.x.x */
-    additionalHelp = new EventEmitter();
-    /** Propriedade para controlar a visibilidade do additionalHelp de acordo com a visibilidade do p-label do field.
-     * Caso o p-label esteja visível, o additionalHelp não será exibido.
-     **/
-    hideAdditionalHelpByLabel = input(false, { transform: booleanAttribute, alias: 'p-hide-additional-help-by-label' });
+    /** Configurações do ícone de ajuda adicional vínculado ao label. */
+    poHelperComponent = input(undefined, { alias: 'p-helper' });
+    /** Define se o componente helper estará visível através das ações customizadas */
+    showHelperComponent = input(false, { alias: 'p-show-helper' });
     isInitialChange = true;
     ngOnChanges(changes) {
-        if (changes.showAdditionalHelp) {
-            if (!this.isInitialChange) {
-                if (this.additionalHelpTooltip && this.poTooltip) {
-                    this.poTooltip.toggleTooltipVisibility(this.showAdditionalHelp);
-                }
-                else {
-                    this.additionalHelp.emit();
-                }
-            }
-            else {
-                this.isInitialChange = false;
+        if (changes.showHelperComponent && this.showHelperComponent()) {
+            if (typeof this.poHelperComponent()?.eventOnClick === 'function') {
+                this.poHelperComponent()?.eventOnClick();
+                return;
             }
+            this.helperEl?.openHelperPopover();
+        }
+        else if (changes.showHelperComponent && !this.showHelperComponent()) {
+            this.helperEl?.closeHelperPopover();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoFieldContainerBottomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoFieldContainerBottomComponent, isStandalone: false, selector: "po-field-container-bottom", inputs: { additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, errorPattern: { classPropertyName: "errorPattern", publicName: "p-error-pattern", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, showAdditionalHelp: { classPropertyName: "showAdditionalHelp", publicName: "p-show-additional-help", isSignal: false, isRequired: false, transformFunction: null }, showAdditionalHelpIcon: { classPropertyName: "showAdditionalHelpIcon", publicName: "p-show-additional-help-icon", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, hideAdditionalHelpByLabel: { classPropertyName: "hideAdditionalHelpByLabel", publicName: "p-hide-additional-help-by-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help" }, viewQueries: [{ propertyName: "poTooltip", first: true, predicate: PoTooltipDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-field-container-bottom\"\n  [class.po-field-container-bottom-disabled]=\"disabled\"\n  [attr.aria-label]=\"errorPattern && errorLimit ? errorPattern : null\"\n  [attr.p-size]=\"size\"\n  role=\"alert\"\n  aria-live=\"assertive\"\n  tabindex=\"-1\"\n>\n  @if (errorPattern) {\n    <div class=\"po-field-container-bottom-text-error\">\n      <po-icon p-icon=\"an an-warning-circle\"></po-icon>\n      <span\n        class=\"po-field-error-message\"\n        [class.po-field-error-limit]=\"errorLimit\"\n        [p-tooltip]=\"errorLimit ? errorPattern : null\"\n        p-tooltip-position=\"top\"\n        [p-append-in-body]=\"appendBox\"\n      >\n        {{ errorPattern }}\n      </span>\n    </div>\n  }\n  @if (!errorPattern && (help || showAdditionalHelpIcon)) {\n    <div class=\"po-field-container-bottom-help-text\">\n      @if (help) {\n        <span>\n          {{ help }}\n        </span>\n      }\n      @if (showAdditionalHelpIcon && !hideAdditionalHelpByLabel()) {\n        <div class=\"po-icon-container\">\n          <po-icon\n            class=\"po-icon-additional-help\"\n            [class.po-clickable]=\"!additionalHelpTooltip\"\n            p-icon=\"an an-fill an an-info\"\n            [p-append-in-body]=\"appendBox\"\n            [p-tooltip]=\"additionalHelpTooltip\"\n            (click)=\"additionalHelp.emit()\"\n          ></po-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoFieldContainerBottomComponent, isStandalone: false, selector: "po-field-container-bottom", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, errorPattern: { classPropertyName: "errorPattern", publicName: "p-error-pattern", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, showHelperComponent: { classPropertyName: "showHelperComponent", publicName: "p-show-helper", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "poTooltip", first: true, predicate: PoTooltipDirective, descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-field-container-bottom po-footer-group\"\n  [class.po-field-container-bottom-disabled]=\"disabled\"\n  [attr.aria-label]=\"errorPattern && errorLimit ? errorPattern : null\"\n  [attr.p-size]=\"size\"\n  role=\"alert\"\n  aria-live=\"assertive\"\n  tabindex=\"-1\"\n>\n  @if (errorPattern) {\n    <div class=\"po-field-container-bottom-text-error\">\n      <po-icon p-icon=\"an an-warning-circle\"></po-icon>\n      <span\n        class=\"po-field-error-message\"\n        [class.po-field-error-limit]=\"errorLimit\"\n        [p-tooltip]=\"errorLimit ? errorPattern : null\"\n        p-tooltip-position=\"top\"\n        [p-append-in-body]=\"appendBox\"\n      >\n        {{ errorPattern }}\n      </span>\n    </div>\n  }\n  @if (!errorPattern && help) {\n    <div class=\"po-field-container-bottom-help-text\">\n      @if (help) {\n        <span>\n          {{ help }}\n        </span>\n      }\n    </div>\n  }\n  @if (poHelperComponent()) {\n    <po-helper\n      #helperEl\n      [p-size]=\"size\"\n      [p-helper]=\"poHelperComponent()\"\n      [p-disabled]=\"disabled\"\n      [p-append-in-body]=\"appendBox\"\n    >\n    </po-helper>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoFieldContainerBottomComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-field-container-bottom', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-field-container-bottom\"\n  [class.po-field-container-bottom-disabled]=\"disabled\"\n  [attr.aria-label]=\"errorPattern && errorLimit ? errorPattern : null\"\n  [attr.p-size]=\"size\"\n  role=\"alert\"\n  aria-live=\"assertive\"\n  tabindex=\"-1\"\n>\n  @if (errorPattern) {\n    <div class=\"po-field-container-bottom-text-error\">\n      <po-icon p-icon=\"an an-warning-circle\"></po-icon>\n      <span\n        class=\"po-field-error-message\"\n        [class.po-field-error-limit]=\"errorLimit\"\n        [p-tooltip]=\"errorLimit ? errorPattern : null\"\n        p-tooltip-position=\"top\"\n        [p-append-in-body]=\"appendBox\"\n      >\n        {{ errorPattern }}\n      </span>\n    </div>\n  }\n  @if (!errorPattern && (help || showAdditionalHelpIcon)) {\n    <div class=\"po-field-container-bottom-help-text\">\n      @if (help) {\n        <span>\n          {{ help }}\n        </span>\n      }\n      @if (showAdditionalHelpIcon && !hideAdditionalHelpByLabel()) {\n        <div class=\"po-icon-container\">\n          <po-icon\n            class=\"po-icon-additional-help\"\n            [class.po-clickable]=\"!additionalHelpTooltip\"\n            p-icon=\"an an-fill an an-info\"\n            [p-append-in-body]=\"appendBox\"\n            [p-tooltip]=\"additionalHelpTooltip\"\n            (click)=\"additionalHelp.emit()\"\n          ></po-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-field-container-bottom', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-field-container-bottom po-footer-group\"\n  [class.po-field-container-bottom-disabled]=\"disabled\"\n  [attr.aria-label]=\"errorPattern && errorLimit ? errorPattern : null\"\n  [attr.p-size]=\"size\"\n  role=\"alert\"\n  aria-live=\"assertive\"\n  tabindex=\"-1\"\n>\n  @if (errorPattern) {\n    <div class=\"po-field-container-bottom-text-error\">\n      <po-icon p-icon=\"an an-warning-circle\"></po-icon>\n      <span\n        class=\"po-field-error-message\"\n        [class.po-field-error-limit]=\"errorLimit\"\n        [p-tooltip]=\"errorLimit ? errorPattern : null\"\n        p-tooltip-position=\"top\"\n        [p-append-in-body]=\"appendBox\"\n      >\n        {{ errorPattern }}\n      </span>\n    </div>\n  }\n  @if (!errorPattern && help) {\n    <div class=\"po-field-container-bottom-help-text\">\n      @if (help) {\n        <span>\n          {{ help }}\n        </span>\n      }\n    </div>\n  }\n  @if (poHelperComponent()) {\n    <po-helper\n      #helperEl\n      [p-size]=\"size\"\n      [p-helper]=\"poHelperComponent()\"\n      [p-disabled]=\"disabled\"\n      [p-append-in-body]=\"appendBox\"\n    >\n    </po-helper>\n  }\n</div>\n" }]
         }], propDecorators: { poTooltip: [{
                 type: ViewChild,
                 args: [PoTooltipDirective]
-            }], additionalHelpTooltip: [{
-                type: Input,
-                args: ['p-additional-help-tooltip']
+            }], helperEl: [{
+                type: ViewChild,
+                args: ['helperEl', { read: PoHelperComponent, static: false }]
             }], appendBox: [{
                 type: Input,
                 args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
@@ -7606,18 +7599,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], help: [{
                 type: Input,
                 args: ['p-help']
-            }], showAdditionalHelp: [{
-                type: Input,
-                args: ['p-show-additional-help']
-            }], showAdditionalHelpIcon: [{
-                type: Input,
-                args: ['p-show-additional-help-icon']
             }], size: [{
                 type: Input,
                 args: ['p-size']
-            }], additionalHelp: [{
-                type: Output,
-                args: ['p-additional-help']
             }] } });
 /**
@@ -7912,9 +7896,6 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
         }
         return this.displayAdditionalHelp;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     setHelper(label, additionalHelpTooltip) {
         return setHelperSettings(label, additionalHelpTooltip, this.poHelperComponent(), this.size, this.isAdditionalHelpEventTriggered() ? this.additionalHelp : undefined);
     }
@@ -7945,7 +7926,7 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
                 useExisting: forwardRef(() => PoCheckboxComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "checkboxLabel", first: true, predicate: ["checkboxLabel"], descendants: true }, { propertyName: "labelEl", first: true, predicate: ["labelEl"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@if (help) {\n  <po-field-container [p-disabled]=\"disabled\" [p-size]=\"size\">\n    <div class=\"po-field-container-content\">\n      <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n    </div>\n    <po-field-container-bottom [p-help]=\"help\" [p-size]=\"size\"></po-field-container-bottom>\n  </po-field-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n}\n\n<ng-template #checkboxContent>\n  <div\n    class=\"container-po-checkbox\"\n    [attr.checked]=\"checkboxValue\"\n    (click)=\"checkOption($event, checkboxValue)\"\n    (keydown)=\"onKeyDown($event, checkboxValue)\"\n  >\n    <div\n      #checkboxLabel\n      role=\"checkbox\"\n      class=\"po-checkbox-outline\"\n      [class.po-checkbox-outline-aa]=\"size === 'small'\"\n      [class.po-checkbox-outline-large]=\"size === 'large'\"\n      [tabindex]=\"disabled || disabladTabindex ? -1 : 0\"\n      [attr.aria-checked]=\"checkboxValue\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled\"\n      (blur)=\"onBlur()\"\n    >\n      <span\n        [attr.aria-checked]=\"checkboxValue\"\n        aria-label=\" \"\n        [id]=\"id\"\n        class=\"po-checkbox\"\n        [ngClass]=\"iconNameLib === 'AnimaliaIcon' ? 'po-checkbox-phosphor' : 'po-checkbox-poicon'\"\n        [class.po-checkbox-aa]=\"size === 'small'\"\n        [class.po-checkbox-large]=\"size === 'large'\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.required]=\"checkBoxRequired\"\n      >\n      </span>\n\n      @if (label) {\n        <po-label\n          #labelEl\n          class=\"po-checkbox-label\"\n          [class.po-checkbox-label-aa]=\"size === 'small'\"\n          tabindex=\"-1\"\n          [p-disabled]=\"disabled\"\n          [p-for]=\"id\"\n          [p-label]=\"label\"\n          [p-text-wrap]=\"labelTextWrap()\"\n          [p-tooltip]=\"showTip ? label : null\"\n          (mouseenter)=\"handleLabelTooltip()\"\n          (focus)=\"handleLabelTooltip()\"\n        >\n        </po-label>\n      }\n      @if (poHelperComponent() || poHelper.hideAdditionalHelp) {\n        <po-helper\n          #helperEl\n          class=\"po-checkbox-helper\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"disabled\"\n          [p-append-in-body]=\"appendBox\"\n          [p-size]=\"size === 'large' ? 'medium' : size\"\n        >\n        </po-helper>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: PoHelperComponent, selector: "po-helper" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "checkboxLabel", first: true, predicate: ["checkboxLabel"], descendants: true }, { propertyName: "labelEl", first: true, predicate: ["labelEl"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@if (help) {\n  <po-field-container [p-disabled]=\"disabled\" [p-size]=\"size\">\n    <div class=\"po-field-container-content\">\n      <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n    </div>\n    <po-field-container-bottom [p-help]=\"help\" [p-size]=\"size\"></po-field-container-bottom>\n  </po-field-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n}\n\n<ng-template #checkboxContent>\n  <div\n    class=\"container-po-checkbox\"\n    [attr.checked]=\"checkboxValue\"\n    (click)=\"checkOption($event, checkboxValue)\"\n    (keydown)=\"onKeyDown($event, checkboxValue)\"\n  >\n    <div\n      #checkboxLabel\n      role=\"checkbox\"\n      class=\"po-checkbox-outline\"\n      [class.po-checkbox-outline-aa]=\"size === 'small'\"\n      [class.po-checkbox-outline-large]=\"size === 'large'\"\n      [tabindex]=\"disabled || disabladTabindex ? -1 : 0\"\n      [attr.aria-checked]=\"checkboxValue\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled\"\n      (blur)=\"onBlur()\"\n    >\n      <span\n        [attr.aria-checked]=\"checkboxValue\"\n        aria-label=\" \"\n        [id]=\"id\"\n        class=\"po-checkbox\"\n        [ngClass]=\"iconNameLib === 'AnimaliaIcon' ? 'po-checkbox-phosphor' : 'po-checkbox-poicon'\"\n        [class.po-checkbox-aa]=\"size === 'small'\"\n        [class.po-checkbox-large]=\"size === 'large'\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.required]=\"checkBoxRequired\"\n      >\n      </span>\n\n      @if (label) {\n        <po-label\n          #labelEl\n          class=\"po-checkbox-label\"\n          [class.po-checkbox-label-aa]=\"size === 'small'\"\n          tabindex=\"-1\"\n          [p-disabled]=\"disabled\"\n          [p-for]=\"id\"\n          [p-label]=\"label\"\n          [p-text-wrap]=\"labelTextWrap()\"\n          [p-tooltip]=\"showTip ? label : null\"\n          (mouseenter)=\"handleLabelTooltip()\"\n          (focus)=\"handleLabelTooltip()\"\n        >\n        </po-label>\n      }\n      @if (poHelperComponent() || poHelper.hideAdditionalHelp) {\n        <po-helper\n          #helperEl\n          class=\"po-checkbox-helper\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"disabled\"\n          [p-append-in-body]=\"appendBox\"\n          [p-size]=\"size === 'large' ? 'medium' : size\"\n        >\n        </po-helper>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { 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: PoHelperComponent, selector: "po-helper" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoCheckboxComponent, decorators: [{
             type: Component,
@@ -8282,7 +8263,6 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             this.onClickTabs(itemListAction);
         }
         if (itemListAction?.action && !isDisabled && isVisible) {
-            console.log('oi');
             itemListAction.action(this.param || itemListAction);
         }
         if (itemListAction?.url && !isDisabled && isVisible) {
@@ -14124,9 +14104,6 @@ class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent {
         }
         return this.displayAdditionalHelp;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     trackByFn(index) {
         return index;
     }
@@ -14152,7 +14129,7 @@ class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent {
                 useExisting: forwardRef(() => PoCheckboxGroupComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "checkboxLabels", predicate: ["checkboxLabel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\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 role=\"group\" class=\"po-checkbox-group-content\" [attr.aria-label]=\"label\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-content\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n      <ul class=\"po-row\">\n        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n          <li\n            class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n            [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n          >\n            <po-checkbox\n              #checkboxLabel\n              [p-label]=\"option.label\"\n              [p-disabled]=\"option.disabled || disabled\"\n              (p-blur)=\"onBlur(checkboxLabel)\"\n              (click)=\"checkOption(option)\"\n              (keydown)=\"onKeyDown($event, option, checkboxLabel)\"\n              [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n              [p-required]=\"required\"\n              [p-label-text-wrap]=\"true\"\n              [p-size]=\"size\"\n            >\n            </po-checkbox>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"po-row po-footer-group\">\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "checkboxLabels", predicate: ["checkboxLabel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\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 role=\"group\" class=\"po-checkbox-group-content\" [attr.aria-label]=\"label\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-content\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n      <ul class=\"po-row\">\n        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n          <li\n            class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n            [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n          >\n            <po-checkbox\n              #checkboxLabel\n              [p-label]=\"option.label\"\n              [p-disabled]=\"option.disabled || disabled\"\n              (p-blur)=\"onBlur(checkboxLabel)\"\n              (click)=\"checkOption(option)\"\n              (keydown)=\"onKeyDown($event, option, checkboxLabel)\"\n              [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n              [p-required]=\"required\"\n              [p-label-text-wrap]=\"true\"\n              [p-size]=\"size\"\n            >\n            </po-checkbox>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\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]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ 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: PoCheckboxComponent, selector: "po-checkbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoCheckboxGroupComponent, decorators: [{
             type: Component,
@@ -14167,7 +14144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoCheckboxGroupComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\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 role=\"group\" class=\"po-checkbox-group-content\" [attr.aria-label]=\"label\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-content\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n      <ul class=\"po-row\">\n        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n          <li\n            class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n            [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n          >\n            <po-checkbox\n              #checkboxLabel\n              [p-label]=\"option.label\"\n              [p-disabled]=\"option.disabled || disabled\"\n              (p-blur)=\"onBlur(checkboxLabel)\"\n              (click)=\"checkOption(option)\"\n              (keydown)=\"onKeyDown($event, option, checkboxLabel)\"\n              [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n              [p-required]=\"required\"\n              [p-label-text-wrap]=\"true\"\n              [p-size]=\"size\"\n            >\n            </po-checkbox>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"po-row po-footer-group\">\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\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 role=\"group\" class=\"po-checkbox-group-content\" [attr.aria-label]=\"label\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-content\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n      <ul class=\"po-row\">\n        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n          <li\n            class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n            [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n          >\n            <po-checkbox\n              #checkboxLabel\n              [p-label]=\"option.label\"\n              [p-disabled]=\"option.disabled || disabled\"\n              (p-blur)=\"onBlur(checkboxLabel)\"\n              (click)=\"checkOption(option)\"\n              (keydown)=\"onKeyDown($event, option, checkboxLabel)\"\n              [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n              [p-required]=\"required\"\n              [p-label-text-wrap]=\"true\"\n              [p-size]=\"size\"\n            >\n            </po-checkbox>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\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]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
         }], propDecorators: { checkboxLabels: [{
                 type: ViewChildren,
                 args: ['checkboxLabel']
@@ -14770,9 +14747,6 @@ class PoFieldModel {
         }
         return this.displayAdditionalHelp;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     isAdditionalHelpEventTriggered() {
         return (this.additionalHelpEventTrigger === 'event' ||
             (this.additionalHelpEventTrigger === undefined && this.additionalHelp.observed));
@@ -15139,9 +15113,6 @@ class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
         }
         return this.displayAdditionalHelp;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     setHelper(label, additionalHelpTooltip) {
         return setHelperSettings(label, additionalHelpTooltip, this.poHelperComponent(), this.size, this.isAdditionalHelpEventTriggered() ? this.additionalHelp : undefined);
     }
@@ -15167,7 +15138,7 @@ class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
                 useExisting: forwardRef(() => PoRadioGroupComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "radioLabels", predicate: ["inputRadio"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\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 #inp role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n    <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n      <div class=\"po-radio-group\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n        @for (option of options; track option) {\n          <div class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n            <po-radio\n              #inputRadio\n              [name]=\"name\"\n              [p-checked]=\"value === option.value\"\n              [p-disabled]=\"option.disabled === true || disabled\"\n              [p-label]=\"option.label\"\n              [p-label-text-wrap]=\"true\"\n              [p-required]=\"required\"\n              [p-size]=\"size\"\n              [p-value]=\"option.value\"\n              (p-blur)=\"onBlur(inputRadio)\"\n              (keydown)=\"onKeyDown($event, inputRadio)\"\n              (keyup)=\"onKeyUp($event, option.value)\"\n              (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n            >\n            </po-radio>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-row po-footer-group\">\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: PoRadioComponent, selector: "po-radio", inputs: ["p-value", "p-size", "p-required", "p-label-text-wrap", "p-checked"], outputs: ["p-blur", "p-change-selected"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "radioLabels", predicate: ["inputRadio"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\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 #inp role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n    <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n      <div class=\"po-radio-group\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n        @for (option of options; track option) {\n          <div class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n            <po-radio\n              #inputRadio\n              [name]=\"name\"\n              [p-checked]=\"value === option.value\"\n              [p-disabled]=\"option.disabled === true || disabled\"\n              [p-label]=\"option.label\"\n              [p-label-text-wrap]=\"true\"\n              [p-required]=\"required\"\n              [p-size]=\"size\"\n              [p-value]=\"option.value\"\n              (p-blur)=\"onBlur(inputRadio)\"\n              (keydown)=\"onKeyDown($event, inputRadio)\"\n              (keyup)=\"onKeyUp($event, option.value)\"\n              (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n            >\n            </po-radio>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\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]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ 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: PoRadioComponent, selector: "po-radio", inputs: ["p-value", "p-size", "p-required", "p-label-text-wrap", "p-checked"], outputs: ["p-blur", "p-change-selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoRadioGroupComponent, decorators: [{
             type: Component,
@@ -15182,7 +15153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoRadioGroupComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\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 #inp role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n    <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n      <div class=\"po-radio-group\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n        @for (option of options; track option) {\n          <div class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n            <po-radio\n              #inputRadio\n              [name]=\"name\"\n              [p-checked]=\"value === option.value\"\n              [p-disabled]=\"option.disabled === true || disabled\"\n              [p-label]=\"option.label\"\n              [p-label-text-wrap]=\"true\"\n              [p-required]=\"required\"\n              [p-size]=\"size\"\n              [p-value]=\"option.value\"\n              (p-blur)=\"onBlur(inputRadio)\"\n              (keydown)=\"onKeyDown($event, inputRadio)\"\n              (keyup)=\"onKeyUp($event, option.value)\"\n              (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n            >\n            </po-radio>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-row po-footer-group\">\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\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 #inp role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n    <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n      <div class=\"po-radio-group\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n        @for (option of options; track option) {\n          <div class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n            <po-radio\n              #inputRadio\n              [name]=\"name\"\n              [p-checked]=\"value === option.value\"\n              [p-disabled]=\"option.disabled === true || disabled\"\n              [p-label]=\"option.label\"\n              [p-label-text-wrap]=\"true\"\n              [p-required]=\"required\"\n              [p-size]=\"size\"\n              [p-value]=\"option.value\"\n              (p-blur)=\"onBlur(inputRadio)\"\n              (keydown)=\"onKeyDown($event, inputRadio)\"\n              (keyup)=\"onKeyUp($event, option.value)\"\n              (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n            >\n            </po-radio>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\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]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input,
                 args: ['p-label']
@@ -16910,9 +16881,6 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
     hasOverlayClass(element) {
         return element.classList.contains('po-datepicker-calendar-overlay');
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     verifyErrorAsync(value) {
         if (this.errorPattern !== '' && this.errorAsync) {
             const errorAsync = this.errorAsync(value);
@@ -17051,7 +17019,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
                 multi: true
             },
             PoControlPositionService
-        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], 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 #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n      [attr.p-size]=\"size\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.data-focused-element]=\"!disabled\"\n          [attr.data-inactive-component]=\"disabled || readonly\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          @if (clean && !disabled && !readonly) {\n            <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear()\">\n            </po-clean>\n          }\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\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 (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], 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 #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n      [attr.p-size]=\"size\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.data-focused-element]=\"!disabled\"\n          [attr.data-inactive-component]=\"disabled || readonly\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          @if (clean && !disabled && !readonly) {\n            <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear()\">\n            </po-clean>\n          }\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\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 (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDatepickerComponent, decorators: [{
             type: Component,
@@ -17067,7 +17035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             multi: true
                         },
                         PoControlPositionService
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n      [attr.p-size]=\"size\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.data-focused-element]=\"!disabled\"\n          [attr.data-inactive-component]=\"disabled || readonly\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          @if (clean && !disabled && !readonly) {\n            <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear()\">\n            </po-clean>\n          }\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\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 (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [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 #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n      [attr.p-size]=\"size\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.data-focused-element]=\"!disabled\"\n          [attr.data-inactive-component]=\"disabled || readonly\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          @if (clean && !disabled && !readonly) {\n            <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear()\">\n            </po-clean>\n          }\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\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 (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: true }]
@@ -17525,11 +17493,11 @@ class PoModalComponent extends PoModalBaseComponent {
             this.modalContent.nativeElement.querySelector(this.focusableElements) || this.modalContent.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoModalComponent, isStandalone: false, selector: "po-modal", queries: [{ propertyName: "modalFooter", first: true, predicate: PoModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, read: ElementRef }, { propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isHidden) {\n  <div #modalContainer class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n    <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n    <div class=\"po-modal-container po-pb-2 po-pt-2\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              @if (icon) {\n                <po-icon [p-icon]=\"icon\"></po-icon>\n              }\n              <div class=\"po-text-ellipsis\">\n                {{ title }}\n              </div>\n            </div>\n            @if (!hideClose) {\n              <po-button\n                [p-aria-label]=\"literals.close\"\n                p-icon=\"ICON_CLOSE\"\n                (p-click)=\"close(true)\"\n                p-kind=\"tertiary\"\n                [p-size]=\"componentsSize\"\n              >\n              </po-button>\n            }\n          </div>\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n          @if (modalFooter) {\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          } @else {\n            <po-modal-footer>\n              <div class=\"po-modal-footer-basic\">\n                @if (secondaryAction) {\n                  <po-button\n                    [p-danger]=\"getSecondaryActionButtonDanger()\"\n                    [p-disabled]=\"secondaryAction.disabled\"\n                    [p-label]=\"secondaryAction.label\"\n                    [p-loading]=\"secondaryAction.loading\"\n                    p-kind=\"secondary\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"secondaryAction.action()\"\n                  >\n                  </po-button>\n                }\n                <po-button\n                  class=\"po-button-modal-first-action\"\n                  [p-danger]=\"primaryAction.danger\"\n                  [p-disabled]=\"primaryAction.disabled\"\n                  [p-label]=\"primaryAction.label\"\n                  [p-loading]=\"primaryAction.loading\"\n                  p-kind=\"primary\"\n                  [p-size]=\"componentsSize\"\n                  (p-click)=\"primaryAction.action()\"\n                >\n                </po-button>\n              </div>\n            </po-modal-footer>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoModalFooterComponent, selector: "po-modal-footer", inputs: ["p-disabled-align"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoModalComponent, isStandalone: false, selector: "po-modal", queries: [{ propertyName: "modalFooter", first: true, predicate: PoModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, read: ElementRef }, { propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isHidden) {\n  <div #modalContainer class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n    <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n    <div class=\"po-modal-container po-pb-2 po-pt-2\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              @if (icon) {\n                <po-icon [p-icon]=\"icon\"></po-icon>\n              }\n              <div class=\"po-text-ellipsis\">\n                {{ title }}\n              </div>\n            </div>\n            @if (!hideClose) {\n              <po-button\n                [p-aria-label]=\"literals.close\"\n                p-icon=\"ICON_CLOSE\"\n                (p-click)=\"close(true)\"\n                p-kind=\"tertiary\"\n                [p-size]=\"componentsSize\"\n              >\n              </po-button>\n            }\n          </div>\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n          @if (modalFooter) {\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          } @else {\n            <po-modal-footer>\n              <div class=\"po-modal-footer-basic\">\n                @if (secondaryAction) {\n                  <po-button\n                    [p-danger]=\"getSecondaryActionButtonDanger()\"\n                    [p-disabled]=\"secondaryAction.disabled\"\n                    [p-icon]=\"secondaryAction.icon\"\n                    [p-label]=\"secondaryAction.label\"\n                    [p-loading]=\"secondaryAction.loading\"\n                    p-kind=\"secondary\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"secondaryAction.action()\"\n                  >\n                  </po-button>\n                }\n                <po-button\n                  class=\"po-button-modal-first-action\"\n                  [p-danger]=\"primaryAction.danger\"\n                  [p-disabled]=\"primaryAction.disabled\"\n                  [p-icon]=\"primaryAction.icon\"\n                  [p-label]=\"primaryAction.label\"\n                  [p-loading]=\"primaryAction.loading\"\n                  p-kind=\"primary\"\n                  [p-size]=\"componentsSize\"\n                  (p-click)=\"primaryAction.action()\"\n                >\n                </po-button>\n              </div>\n            </po-modal-footer>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoModalFooterComponent, selector: "po-modal-footer", inputs: ["p-disabled-align"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-modal', standalone: false, template: "@if (!isHidden) {\n  <div #modalContainer class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n    <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n    <div class=\"po-modal-container po-pb-2 po-pt-2\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              @if (icon) {\n                <po-icon [p-icon]=\"icon\"></po-icon>\n              }\n              <div class=\"po-text-ellipsis\">\n                {{ title }}\n              </div>\n            </div>\n            @if (!hideClose) {\n              <po-button\n                [p-aria-label]=\"literals.close\"\n                p-icon=\"ICON_CLOSE\"\n                (p-click)=\"close(true)\"\n                p-kind=\"tertiary\"\n                [p-size]=\"componentsSize\"\n              >\n              </po-button>\n            }\n          </div>\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n          @if (modalFooter) {\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          } @else {\n            <po-modal-footer>\n              <div class=\"po-modal-footer-basic\">\n                @if (secondaryAction) {\n                  <po-button\n                    [p-danger]=\"getSecondaryActionButtonDanger()\"\n                    [p-disabled]=\"secondaryAction.disabled\"\n                    [p-label]=\"secondaryAction.label\"\n                    [p-loading]=\"secondaryAction.loading\"\n                    p-kind=\"secondary\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"secondaryAction.action()\"\n                  >\n                  </po-button>\n                }\n                <po-button\n                  class=\"po-button-modal-first-action\"\n                  [p-danger]=\"primaryAction.danger\"\n                  [p-disabled]=\"primaryAction.disabled\"\n                  [p-label]=\"primaryAction.label\"\n                  [p-loading]=\"primaryAction.loading\"\n                  p-kind=\"primary\"\n                  [p-size]=\"componentsSize\"\n                  (p-click)=\"primaryAction.action()\"\n                >\n                </po-button>\n              </div>\n            </po-modal-footer>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-modal', standalone: false, template: "@if (!isHidden) {\n  <div #modalContainer class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n    <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n    <div class=\"po-modal-container po-pb-2 po-pt-2\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              @if (icon) {\n                <po-icon [p-icon]=\"icon\"></po-icon>\n              }\n              <div class=\"po-text-ellipsis\">\n                {{ title }}\n              </div>\n            </div>\n            @if (!hideClose) {\n              <po-button\n                [p-aria-label]=\"literals.close\"\n                p-icon=\"ICON_CLOSE\"\n                (p-click)=\"close(true)\"\n                p-kind=\"tertiary\"\n                [p-size]=\"componentsSize\"\n              >\n              </po-button>\n            }\n          </div>\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n          @if (modalFooter) {\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          } @else {\n            <po-modal-footer>\n              <div class=\"po-modal-footer-basic\">\n                @if (secondaryAction) {\n                  <po-button\n                    [p-danger]=\"getSecondaryActionButtonDanger()\"\n                    [p-disabled]=\"secondaryAction.disabled\"\n                    [p-icon]=\"secondaryAction.icon\"\n                    [p-label]=\"secondaryAction.label\"\n                    [p-loading]=\"secondaryAction.loading\"\n                    p-kind=\"secondary\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"secondaryAction.action()\"\n                  >\n                  </po-button>\n                }\n                <po-button\n                  class=\"po-button-modal-first-action\"\n                  [p-danger]=\"primaryAction.danger\"\n                  [p-disabled]=\"primaryAction.disabled\"\n                  [p-icon]=\"primaryAction.icon\"\n                  [p-label]=\"primaryAction.label\"\n                  [p-loading]=\"primaryAction.loading\"\n                  p-kind=\"primary\"\n                  [p-size]=\"componentsSize\"\n                  (p-click)=\"primaryAction.action()\"\n                >\n                </po-button>\n              </div>\n            </po-modal-footer>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { modalContent: [{
                 type: ViewChild,
                 args: ['modalContent', { read: ElementRef }]
@@ -21681,7 +21649,7 @@ class PoSwitchComponent extends PoFieldModel {
                 useExisting: forwardRef(() => PoSwitchComponent),
                 multi: false
             }
-        ], viewQueries: [{ propertyName: "switchContainer", first: true, predicate: ["switchContainer"], descendants: true, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], 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-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\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n    <div class=\"po-switch\" [class.po-switch-aa]=\"size === 'small'\" [attr.data-label-position]=\"getLabelPosition()\">\n      <div\n        #switchContainer\n        class=\"po-switch-container\"\n        [class.po-switch-container-aa]=\"size === 'small'\"\n        role=\"switch\"\n        [attr.aria-checked]=\"value\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.data-focused-element]=\"!disabled\"\n        [attr.data-inactive-component]=\"disabled\"\n        [id]=\"id\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (blur)=\"onBlur()\"\n        (click)=\"eventClick()\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        <div class=\"po-switch-track\" [class.po-switch-track-aa]=\"size === 'small'\">\n          <div\n            class=\"po-switch-toggle\"\n            [class.po-switch-toggle-aa]=\"size === 'small'\"\n            [attr.aria-label]=\"value === true ? labelOn : labelOff\"\n          >\n            @if (value === true) {\n              <po-icon class=\"po-switch-icon\" [class.po-switch-icon-aa]=\"size === 'small'\" p-icon=\"ICON_OK\"></po-icon>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (!hideLabelStatus) {\n        <po-label\n          class=\"po-switch-label\"\n          [class.po-switch-label-aa]=\"size === 'small'\"\n          [p-disabled]=\"disabled\"\n          [p-label]=\"value === true ? labelOn : labelOff\"\n          (click)=\"eventClick()\"\n        >\n        </po-label>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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  <po-field-container-bottom\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    [p-size]=\"size\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "switchContainer", first: true, predicate: ["switchContainer"], descendants: true, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], 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-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\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n    <div class=\"po-switch\" [class.po-switch-aa]=\"size === 'small'\" [attr.data-label-position]=\"getLabelPosition()\">\n      <div\n        #switchContainer\n        class=\"po-switch-container\"\n        [class.po-switch-container-aa]=\"size === 'small'\"\n        role=\"switch\"\n        [attr.aria-checked]=\"value\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.data-focused-element]=\"!disabled\"\n        [attr.data-inactive-component]=\"disabled\"\n        [id]=\"id\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (blur)=\"onBlur()\"\n        (click)=\"eventClick()\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        <div class=\"po-switch-track\" [class.po-switch-track-aa]=\"size === 'small'\">\n          <div\n            class=\"po-switch-toggle\"\n            [class.po-switch-toggle-aa]=\"size === 'small'\"\n            [attr.aria-label]=\"value === true ? labelOn : labelOff\"\n          >\n            @if (value === true) {\n              <po-icon class=\"po-switch-icon\" [class.po-switch-icon-aa]=\"size === 'small'\" p-icon=\"ICON_OK\"></po-icon>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (!hideLabelStatus) {\n        <po-label\n          class=\"po-switch-label\"\n          [class.po-switch-label-aa]=\"size === 'small'\"\n          [p-disabled]=\"disabled\"\n          [p-label]=\"value === true ? labelOn : labelOff\"\n          (click)=\"eventClick()\"\n        >\n        </po-label>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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  <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]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ 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: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSwitchComponent, decorators: [{
             type: Component,
@@ -21701,7 +21669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoSwitchComponent),
                             multi: false
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-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\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n    <div class=\"po-switch\" [class.po-switch-aa]=\"size === 'small'\" [attr.data-label-position]=\"getLabelPosition()\">\n      <div\n        #switchContainer\n        class=\"po-switch-container\"\n        [class.po-switch-container-aa]=\"size === 'small'\"\n        role=\"switch\"\n        [attr.aria-checked]=\"value\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.data-focused-element]=\"!disabled\"\n        [attr.data-inactive-component]=\"disabled\"\n        [id]=\"id\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (blur)=\"onBlur()\"\n        (click)=\"eventClick()\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        <div class=\"po-switch-track\" [class.po-switch-track-aa]=\"size === 'small'\">\n          <div\n            class=\"po-switch-toggle\"\n            [class.po-switch-toggle-aa]=\"size === 'small'\"\n            [attr.aria-label]=\"value === true ? labelOn : labelOff\"\n          >\n            @if (value === true) {\n              <po-icon class=\"po-switch-icon\" [class.po-switch-icon-aa]=\"size === 'small'\" p-icon=\"ICON_OK\"></po-icon>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (!hideLabelStatus) {\n        <po-label\n          class=\"po-switch-label\"\n          [class.po-switch-label-aa]=\"size === 'small'\"\n          [p-disabled]=\"disabled\"\n          [p-label]=\"value === true ? labelOn : labelOff\"\n          (click)=\"eventClick()\"\n        >\n        </po-label>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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  <po-field-container-bottom\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    [p-size]=\"size\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-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\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n    <div class=\"po-switch\" [class.po-switch-aa]=\"size === 'small'\" [attr.data-label-position]=\"getLabelPosition()\">\n      <div\n        #switchContainer\n        class=\"po-switch-container\"\n        [class.po-switch-container-aa]=\"size === 'small'\"\n        role=\"switch\"\n        [attr.aria-checked]=\"value\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.data-focused-element]=\"!disabled\"\n        [attr.data-inactive-component]=\"disabled\"\n        [id]=\"id\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (blur)=\"onBlur()\"\n        (click)=\"eventClick()\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        <div class=\"po-switch-track\" [class.po-switch-track-aa]=\"size === 'small'\">\n          <div\n            class=\"po-switch-toggle\"\n            [class.po-switch-toggle-aa]=\"size === 'small'\"\n            [attr.aria-label]=\"value === true ? labelOn : labelOff\"\n          >\n            @if (value === true) {\n              <po-icon class=\"po-switch-icon\" [class.po-switch-icon-aa]=\"size === 'small'\" p-icon=\"ICON_OK\"></po-icon>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (!hideLabelStatus) {\n        <po-label\n          class=\"po-switch-label\"\n          [class.po-switch-label-aa]=\"size === 'small'\"\n          [p-disabled]=\"disabled\"\n          [p-label]=\"value === true ? labelOn : labelOff\"\n          (click)=\"eventClick()\"\n        >\n        </po-label>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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  <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]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
         }], propDecorators: { switchContainer: [{
                 type: ViewChild,
                 args: ['switchContainer', { static: true }]
@@ -28615,9 +28583,6 @@ class PoComboComponent extends PoComboBaseComponent {
             this.controlApplyFilter(value, event.key === 'ArrowDown');
         }
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     showMoreInfiniteScroll() {
         if (this.defaultService.hasNext) {
             this.infiniteLoading = true;
@@ -28787,7 +28752,7 @@ class PoComboComponent extends PoComboBaseComponent {
                 useExisting: forwardRef(() => PoComboComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "comboOptionTemplate", first: true, predicate: PoComboOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, read: ElementRef }, { propertyName: "iconElement", first: true, predicate: ["iconArrow"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div class=\"po-combo-field-wrapper\" [class._active]=\"needsHelper\">\n  <div class=\"po-combo-flex-item\">\n    <div #outerContainer>\n      <po-field-container\n        [p-disabled]=\"disabled\"\n        [p-id]=\"id\"\n        [p-label]=\"label\"\n        [p-optional]=\"optional\"\n        [p-required]=\"required\"\n        [p-show-required]=\"showRequired\"\n        [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\n          #searchContainer\n          cdkOverlayOrigin\n          #trigger=\"cdkOverlayOrigin\"\n          class=\"po-field-container-content po-combo-container-content\"\n          [attr.p-size]=\"size\"\n        >\n          <div class=\"po-combo-container-wrapper\">\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-combo-input\"\n              [ngClass]=\"\n                clean && inp.value\n                  ? size === 'small'\n                    ? 'po-input-double-icon-right-aa'\n                    : 'po-input-double-icon-right'\n                  : size === 'small'\n                    ? 'po-input-icon-right-aa'\n                    : 'po-input-icon-right'\n              \"\n              [class.po-combo-input-aa]=\"size === 'small'\"\n              [class.po-input-icon-left]=\"icon\"\n              [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n              autocomplete=\"off\"\n              type=\"text\"\n              [attr.data-focused-element]=\"!disabled\"\n              [attr.data-inactive-component]=\"disabled\"\n              [attr.name]=\"name\"\n              [disabled]=\"disabled\"\n              [id]=\"id\"\n              [placeholder]=\"disabled ? '' : placeholder\"\n              [required]=\"required\"\n              [attr.data-append-in-body]=\"appendBox\"\n              [attr.p-size]=\"size\"\n              (click)=\"toggleComboVisibility()\"\n              (keyup)=\"onKeyUp($event)\"\n              (blur)=\"onBlur($event)\"\n              (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n              (keydown)=\"onKeyDown($event)\"\n            />\n\n            <div class=\"po-field-icon-container-right\">\n              @if (isCleanVisible()) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-combo-clean po-icon-input\"\n                  [class.po-combo-clean-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"clear($event)\"\n                  (click)=\"clear(null); $event.preventDefault()\"\n                  (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                  (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n                >\n                </po-clean>\n              }\n\n              <div\n                #iconArrow\n                class=\"po-combo-arrow po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\n                (click)=\"toggleComboVisibility(true)\"\n              >\n                <po-icon\n                  [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"size === 'small'\"\n                  [class.po-combo-default-border]=\"!disabled && inp.value\"\n                  [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        @if (appendBox) {\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"true\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n          >\n            <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n          </ng-template>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n        }\n\n        <po-field-container-bottom\n          [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n          [p-show-additional-help]=\"displayAdditionalHelp\"\n          [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n          [p-size]=\"size\"\n          (p-additional-help)=\"emitAdditionalHelp()\"\n        ></po-field-container-bottom>\n      </po-field-container>\n\n      <ng-template #dropdownListbox>\n        <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n          <po-listbox\n            #poListbox\n            #contentElement\n            p-type=\"option\"\n            [p-items]=\"visibleOptions\"\n            [p-field-value]=\"dynamicValue\"\n            [p-field-label]=\"dynamicLabel\"\n            [p-template]=\"comboOptionTemplate\"\n            [p-search-value]=\"getInputValue()\"\n            [p-infinite-loading]=\"infiniteLoading\"\n            [p-infinite-scroll]=\"infiniteScroll\"\n            [p-filtering]=\"isFiltering\"\n            [p-cache]=\"cache\"\n            [p-filter-mode]=\"filterMode\"\n            [p-visible]=\"comboOpen\"\n            [p-is-searching]=\"isServerSearching\"\n            [p-should-mark-letter]=\"shouldMarkLetters\"\n            [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n            [p-combo-service]=\"service\"\n            [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n            [p-size]=\"size\"\n            [p-container-width]=\"containerWidth\"\n            (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n            (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n            (p-close)=\"onCloseCombo()\"\n            (keydown)=\"onListboxKeyDown($event)\"\n          ></po-listbox>\n        </div>\n      </ng-template>\n    </div>\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "comboOptionTemplate", first: true, predicate: PoComboOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, read: ElementRef }, { propertyName: "iconElement", first: true, predicate: ["iconArrow"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div class=\"po-combo-field-wrapper\" [class._active]=\"needsHelper\">\n  <div class=\"po-combo-flex-item\">\n    <div #outerContainer>\n      <po-field-container\n        [p-disabled]=\"disabled\"\n        [p-id]=\"id\"\n        [p-label]=\"label\"\n        [p-optional]=\"optional\"\n        [p-required]=\"required\"\n        [p-show-required]=\"showRequired\"\n        [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\n          #searchContainer\n          cdkOverlayOrigin\n          #trigger=\"cdkOverlayOrigin\"\n          class=\"po-field-container-content po-combo-container-content\"\n          [attr.p-size]=\"size\"\n        >\n          <div class=\"po-combo-container-wrapper\">\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-combo-input\"\n              [ngClass]=\"\n                clean && inp.value\n                  ? size === 'small'\n                    ? 'po-input-double-icon-right-aa'\n                    : 'po-input-double-icon-right'\n                  : size === 'small'\n                    ? 'po-input-icon-right-aa'\n                    : 'po-input-icon-right'\n              \"\n              [class.po-combo-input-aa]=\"size === 'small'\"\n              [class.po-input-icon-left]=\"icon\"\n              [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n              autocomplete=\"off\"\n              type=\"text\"\n              [attr.data-focused-element]=\"!disabled\"\n              [attr.data-inactive-component]=\"disabled\"\n              [attr.name]=\"name\"\n              [disabled]=\"disabled\"\n              [id]=\"id\"\n              [placeholder]=\"disabled ? '' : placeholder\"\n              [required]=\"required\"\n              [attr.data-append-in-body]=\"appendBox\"\n              [attr.p-size]=\"size\"\n              (click)=\"toggleComboVisibility()\"\n              (keyup)=\"onKeyUp($event)\"\n              (blur)=\"onBlur($event)\"\n              (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n              (keydown)=\"onKeyDown($event)\"\n            />\n\n            <div class=\"po-field-icon-container-right\">\n              @if (isCleanVisible()) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-combo-clean po-icon-input\"\n                  [class.po-combo-clean-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"clear($event)\"\n                  (click)=\"clear(null); $event.preventDefault()\"\n                  (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                  (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n                >\n                </po-clean>\n              }\n\n              <div\n                #iconArrow\n                class=\"po-combo-arrow po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\n                (click)=\"toggleComboVisibility(true)\"\n              >\n                <po-icon\n                  [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"size === 'small'\"\n                  [class.po-combo-default-border]=\"!disabled && inp.value\"\n                  [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        @if (appendBox) {\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"true\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n          >\n            <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n          </ng-template>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n        }\n\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      </po-field-container>\n\n      <ng-template #dropdownListbox>\n        <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n          <po-listbox\n            #poListbox\n            #contentElement\n            p-type=\"option\"\n            [p-items]=\"visibleOptions\"\n            [p-field-value]=\"dynamicValue\"\n            [p-field-label]=\"dynamicLabel\"\n            [p-template]=\"comboOptionTemplate\"\n            [p-search-value]=\"getInputValue()\"\n            [p-infinite-loading]=\"infiniteLoading\"\n            [p-infinite-scroll]=\"infiniteScroll\"\n            [p-filtering]=\"isFiltering\"\n            [p-cache]=\"cache\"\n            [p-filter-mode]=\"filterMode\"\n            [p-visible]=\"comboOpen\"\n            [p-is-searching]=\"isServerSearching\"\n            [p-should-mark-letter]=\"shouldMarkLetters\"\n            [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n            [p-combo-service]=\"service\"\n            [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n            [p-size]=\"size\"\n            [p-container-width]=\"containerWidth\"\n            (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n            (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n            (p-close)=\"onCloseCombo()\"\n            (keydown)=\"onListboxKeyDown($event)\"\n          ></po-listbox>\n        </div>\n      </ng-template>\n    </div>\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoComboComponent, decorators: [{
             type: Component,
@@ -28804,7 +28769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoComboComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div class=\"po-combo-field-wrapper\" [class._active]=\"needsHelper\">\n  <div class=\"po-combo-flex-item\">\n    <div #outerContainer>\n      <po-field-container\n        [p-disabled]=\"disabled\"\n        [p-id]=\"id\"\n        [p-label]=\"label\"\n        [p-optional]=\"optional\"\n        [p-required]=\"required\"\n        [p-show-required]=\"showRequired\"\n        [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\n          #searchContainer\n          cdkOverlayOrigin\n          #trigger=\"cdkOverlayOrigin\"\n          class=\"po-field-container-content po-combo-container-content\"\n          [attr.p-size]=\"size\"\n        >\n          <div class=\"po-combo-container-wrapper\">\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-combo-input\"\n              [ngClass]=\"\n                clean && inp.value\n                  ? size === 'small'\n                    ? 'po-input-double-icon-right-aa'\n                    : 'po-input-double-icon-right'\n                  : size === 'small'\n                    ? 'po-input-icon-right-aa'\n                    : 'po-input-icon-right'\n              \"\n              [class.po-combo-input-aa]=\"size === 'small'\"\n              [class.po-input-icon-left]=\"icon\"\n              [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n              autocomplete=\"off\"\n              type=\"text\"\n              [attr.data-focused-element]=\"!disabled\"\n              [attr.data-inactive-component]=\"disabled\"\n              [attr.name]=\"name\"\n              [disabled]=\"disabled\"\n              [id]=\"id\"\n              [placeholder]=\"disabled ? '' : placeholder\"\n              [required]=\"required\"\n              [attr.data-append-in-body]=\"appendBox\"\n              [attr.p-size]=\"size\"\n              (click)=\"toggleComboVisibility()\"\n              (keyup)=\"onKeyUp($event)\"\n              (blur)=\"onBlur($event)\"\n              (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n              (keydown)=\"onKeyDown($event)\"\n            />\n\n            <div class=\"po-field-icon-container-right\">\n              @if (isCleanVisible()) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-combo-clean po-icon-input\"\n                  [class.po-combo-clean-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"clear($event)\"\n                  (click)=\"clear(null); $event.preventDefault()\"\n                  (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                  (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n                >\n                </po-clean>\n              }\n\n              <div\n                #iconArrow\n                class=\"po-combo-arrow po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\n                (click)=\"toggleComboVisibility(true)\"\n              >\n                <po-icon\n                  [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"size === 'small'\"\n                  [class.po-combo-default-border]=\"!disabled && inp.value\"\n                  [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        @if (appendBox) {\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"true\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n          >\n            <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n          </ng-template>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n        }\n\n        <po-field-container-bottom\n          [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n          [p-show-additional-help]=\"displayAdditionalHelp\"\n          [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n          [p-size]=\"size\"\n          (p-additional-help)=\"emitAdditionalHelp()\"\n        ></po-field-container-bottom>\n      </po-field-container>\n\n      <ng-template #dropdownListbox>\n        <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n          <po-listbox\n            #poListbox\n            #contentElement\n            p-type=\"option\"\n            [p-items]=\"visibleOptions\"\n            [p-field-value]=\"dynamicValue\"\n            [p-field-label]=\"dynamicLabel\"\n            [p-template]=\"comboOptionTemplate\"\n            [p-search-value]=\"getInputValue()\"\n            [p-infinite-loading]=\"infiniteLoading\"\n            [p-infinite-scroll]=\"infiniteScroll\"\n            [p-filtering]=\"isFiltering\"\n            [p-cache]=\"cache\"\n            [p-filter-mode]=\"filterMode\"\n            [p-visible]=\"comboOpen\"\n            [p-is-searching]=\"isServerSearching\"\n            [p-should-mark-letter]=\"shouldMarkLetters\"\n            [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n            [p-combo-service]=\"service\"\n            [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n            [p-size]=\"size\"\n            [p-container-width]=\"containerWidth\"\n            (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n            (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n            (p-close)=\"onCloseCombo()\"\n            (keydown)=\"onListboxKeyDown($event)\"\n          ></po-listbox>\n        </div>\n      </ng-template>\n    </div>\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" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div class=\"po-combo-field-wrapper\" [class._active]=\"needsHelper\">\n  <div class=\"po-combo-flex-item\">\n    <div #outerContainer>\n      <po-field-container\n        [p-disabled]=\"disabled\"\n        [p-id]=\"id\"\n        [p-label]=\"label\"\n        [p-optional]=\"optional\"\n        [p-required]=\"required\"\n        [p-show-required]=\"showRequired\"\n        [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\n          #searchContainer\n          cdkOverlayOrigin\n          #trigger=\"cdkOverlayOrigin\"\n          class=\"po-field-container-content po-combo-container-content\"\n          [attr.p-size]=\"size\"\n        >\n          <div class=\"po-combo-container-wrapper\">\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-combo-input\"\n              [ngClass]=\"\n                clean && inp.value\n                  ? size === 'small'\n                    ? 'po-input-double-icon-right-aa'\n                    : 'po-input-double-icon-right'\n                  : size === 'small'\n                    ? 'po-input-icon-right-aa'\n                    : 'po-input-icon-right'\n              \"\n              [class.po-combo-input-aa]=\"size === 'small'\"\n              [class.po-input-icon-left]=\"icon\"\n              [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n              autocomplete=\"off\"\n              type=\"text\"\n              [attr.data-focused-element]=\"!disabled\"\n              [attr.data-inactive-component]=\"disabled\"\n              [attr.name]=\"name\"\n              [disabled]=\"disabled\"\n              [id]=\"id\"\n              [placeholder]=\"disabled ? '' : placeholder\"\n              [required]=\"required\"\n              [attr.data-append-in-body]=\"appendBox\"\n              [attr.p-size]=\"size\"\n              (click)=\"toggleComboVisibility()\"\n              (keyup)=\"onKeyUp($event)\"\n              (blur)=\"onBlur($event)\"\n              (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n              (keydown)=\"onKeyDown($event)\"\n            />\n\n            <div class=\"po-field-icon-container-right\">\n              @if (isCleanVisible()) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-combo-clean po-icon-input\"\n                  [class.po-combo-clean-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"clear($event)\"\n                  (click)=\"clear(null); $event.preventDefault()\"\n                  (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                  (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n                >\n                </po-clean>\n              }\n\n              <div\n                #iconArrow\n                class=\"po-combo-arrow po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\n                (click)=\"toggleComboVisibility(true)\"\n              >\n                <po-icon\n                  [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"size === 'small'\"\n                  [class.po-combo-default-border]=\"!disabled && inp.value\"\n                  [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        @if (appendBox) {\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"true\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n          >\n            <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n          </ng-template>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n        }\n\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      </po-field-container>\n\n      <ng-template #dropdownListbox>\n        <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n          <po-listbox\n            #poListbox\n            #contentElement\n            p-type=\"option\"\n            [p-items]=\"visibleOptions\"\n            [p-field-value]=\"dynamicValue\"\n            [p-field-label]=\"dynamicLabel\"\n            [p-template]=\"comboOptionTemplate\"\n            [p-search-value]=\"getInputValue()\"\n            [p-infinite-loading]=\"infiniteLoading\"\n            [p-infinite-scroll]=\"infiniteScroll\"\n            [p-filtering]=\"isFiltering\"\n            [p-cache]=\"cache\"\n            [p-filter-mode]=\"filterMode\"\n            [p-visible]=\"comboOpen\"\n            [p-is-searching]=\"isServerSearching\"\n            [p-should-mark-letter]=\"shouldMarkLetters\"\n            [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n            [p-combo-service]=\"service\"\n            [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n            [p-size]=\"size\"\n            [p-container-width]=\"containerWidth\"\n            (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n            (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n            (p-close)=\"onCloseCombo()\"\n            (keydown)=\"onListboxKeyDown($event)\"\n          ></po-listbox>\n        </div>\n      </ng-template>\n    </div>\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" }]
         }], ctorParameters: () => [], propDecorators: { comboOptionTemplate: [{
                 type: ContentChild,
                 args: [PoComboOptionTemplateDirective, { static: true }]
@@ -29845,9 +29810,6 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
         this.isStartDateRangeInputValid = true;
         this.isDateRangeInputFormatValid = true;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     /**
      * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
@@ -30110,11 +30072,11 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDatepickerRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoDatepickerRangeComponent, isStandalone: false, selector: "po-datepicker-range", providers: providers$5, viewQueries: [{ propertyName: "dateRangeField", first: true, predicate: ["dateRangeField"], descendants: true, read: ElementRef, static: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconCalendar", first: true, predicate: ["iconCalendar"], descendants: true, read: ElementRef, static: true }, { propertyName: "calendarPicker", first: true, predicate: ["calendarPicker"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"disabled\"\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [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\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-input\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-input-aa]=\"size === 'small'\"\n        [class.po-datepicker-range-field-disabled]=\"disabled\"\n        [attr.disabled]=\"disabled\"\n      >\n        <div class=\"po-datepicker-range-start-date\" [class.po-datepicker-range-start-date-aa]=\"size === 'small'\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"label\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          @if (enableCleaner) {\n            <po-clean [p-size]=\"size\" (p-change-event)=\"clear()\"></po-clean>\n          }\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          <po-icon\n            #iconCalendar\n            [p-icon]=\"!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'\"\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-disabled]=\"disabled || readonly\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            (click)=\"toggleCalendar()\"\n          >\n          </po-icon>\n        </div>\n      </div>\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-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorMessage\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n@if (isCalendarVisible) {\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoDatepickerRangeComponent, isStandalone: false, selector: "po-datepicker-range", providers: providers$5, viewQueries: [{ propertyName: "dateRangeField", first: true, predicate: ["dateRangeField"], descendants: true, read: ElementRef, static: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconCalendar", first: true, predicate: ["iconCalendar"], descendants: true, read: ElementRef, static: true }, { propertyName: "calendarPicker", first: true, predicate: ["calendarPicker"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"disabled\"\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [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\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-input\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-input-aa]=\"size === 'small'\"\n        [class.po-datepicker-range-field-disabled]=\"disabled\"\n        [attr.disabled]=\"disabled\"\n      >\n        <div class=\"po-datepicker-range-start-date\" [class.po-datepicker-range-start-date-aa]=\"size === 'small'\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"label\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          @if (enableCleaner) {\n            <po-clean [p-size]=\"size\" (p-change-event)=\"clear()\"></po-clean>\n          }\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          <po-icon\n            #iconCalendar\n            [p-icon]=\"!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'\"\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-disabled]=\"disabled || readonly\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            (click)=\"toggleCalendar()\"\n          >\n          </po-icon>\n        </div>\n      </div>\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]=\"getErrorMessage\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n@if (isCalendarVisible) {\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDatepickerRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-datepicker-range', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$5, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"disabled\"\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [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\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-input\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-input-aa]=\"size === 'small'\"\n        [class.po-datepicker-range-field-disabled]=\"disabled\"\n        [attr.disabled]=\"disabled\"\n      >\n        <div class=\"po-datepicker-range-start-date\" [class.po-datepicker-range-start-date-aa]=\"size === 'small'\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"label\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          @if (enableCleaner) {\n            <po-clean [p-size]=\"size\" (p-change-event)=\"clear()\"></po-clean>\n          }\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          <po-icon\n            #iconCalendar\n            [p-icon]=\"!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'\"\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-disabled]=\"disabled || readonly\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            (click)=\"toggleCalendar()\"\n          >\n          </po-icon>\n        </div>\n      </div>\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-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorMessage\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n@if (isCalendarVisible) {\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-datepicker-range', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$5, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"disabled\"\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [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\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-input\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-input-aa]=\"size === 'small'\"\n        [class.po-datepicker-range-field-disabled]=\"disabled\"\n        [attr.disabled]=\"disabled\"\n      >\n        <div class=\"po-datepicker-range-start-date\" [class.po-datepicker-range-start-date-aa]=\"size === 'small'\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"label\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          @if (enableCleaner) {\n            <po-clean [p-size]=\"size\" (p-change-event)=\"clear()\"></po-clean>\n          }\n        </div>\n\n        <div class=\"po-datepicker-range-icon\">\n          <po-icon\n            #iconCalendar\n            [p-icon]=\"!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'\"\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-disabled]=\"disabled || readonly\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            (click)=\"toggleCalendar()\"\n          >\n          </po-icon>\n        </div>\n      </div>\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]=\"getErrorMessage\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n@if (isCalendarVisible) {\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { dateRangeField: [{
                 type: ViewChild,
                 args: ['dateRangeField', { read: ElementRef, static: true }]
@@ -30695,9 +30657,6 @@ class PoInputBaseComponent {
     registerOnValidatorChange(fn) {
         this.validatorChange = fn;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     /**
      * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
@@ -31595,7 +31554,7 @@ class PoDecimalComponent extends PoInputBaseComponent {
                 useExisting: forwardRef(() => PoDecimalComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': clean && size !== 'small',\n        'po-input-icon-right-aa': clean && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\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-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': clean && size !== 'small',\n        'po-input-icon-right-aa': clean && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDecimalComponent, decorators: [{
             type: Component,
@@ -31610,7 +31569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoDecimalComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': clean && size !== 'small',\n        'po-input-icon-right-aa': clean && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': clean && size !== 'small',\n        'po-input-icon-right-aa': clean && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { inputEl: [{
                 type: ViewChild,
                 args: ['inp', { read: ElementRef, static: true }]
@@ -31984,11 +31943,11 @@ class PoEmailComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoEmailComponent, isStandalone: false, selector: "po-email", providers: providers$4, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\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-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoEmailComponent, isStandalone: false, selector: "po-email", providers: providers$4, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoEmailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+            args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [] });
 /**
@@ -32040,7 +31999,7 @@ class PoInputComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inp", first: true, predicate: ["inp"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\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-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inp", first: true, predicate: ["inp"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoInputComponent, decorators: [{
             type: Component,
@@ -32055,7 +32014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoInputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { inp: [{
                 type: ViewChild,
                 args: ['inp', { static: true }]
@@ -32128,11 +32087,11 @@ class PoLoginComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoLoginComponent, isStandalone: false, selector: "po-login", inputs: { noAutocomplete: ["p-no-autocomplete", "noAutocomplete"] }, providers: providers$3, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\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-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoLoginComponent, isStandalone: false, selector: "po-login", inputs: { noAutocomplete: ["p-no-autocomplete", "noAutocomplete"] }, providers: providers$3, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+            args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { noAutocomplete: [{
                 type: Input,
                 args: ['p-no-autocomplete']
@@ -33750,6 +33709,7 @@ class PoLookupBaseComponent {
     language;
     _size = undefined;
     _spacing;
+    inputEl;
     // Propriedade interna que define se o ícone de ajuda adicional terá cursor clicável (evento) ou padrão (tooltip).
     additionalHelpEventTrigger;
     /**
@@ -34220,6 +34180,7 @@ class PoLookupBaseComponent {
     // eslint-disable-next-line
     onTouched = null;
     resizeListener;
+    isExpandedHeight = false;
     _disabled = false;
     _fieldLabel;
     _filterService;
@@ -34422,6 +34383,11 @@ class PoLookupBaseComponent {
         }
         // Armazenar o valor antigo do model
         this.oldValueToModel = this.valueToModel;
+        setTimeout(() => {
+            if (this.autoHeight) {
+                this.updateLookupInputHeight();
+            }
+        });
     }
     searchById(value) {
         let checkedValue = value;
@@ -34543,15 +34509,29 @@ class PoLookupBaseComponent {
             this.keysDescription = this.columns.filter(element => element.fieldLabel).map(element => element.property);
         }
     }
+    updateLookupInputHeight() {
+        if (!this.inputEl)
+            return;
+        const height = this.inputEl.nativeElement.offsetHeight;
+        if (this.size === PoFieldSize.Small) {
+            this.isExpandedHeight = height > 32;
+        }
+        else {
+            this.isExpandedHeight = height > 44;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoLookupBaseComponent, deps: [{ token: PoLookupFilterService }, { token: Injector }, { token: PoLookupModalService }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: PoLookupBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, fieldValue: { classPropertyName: "fieldValue", publicName: "p-field-value", isSignal: false, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "p-field-label", isSignal: false, isRequired: false, transformFunction: null }, filterParams: { classPropertyName: "filterParams", publicName: "p-filter-params", isSignal: false, isRequired: false, transformFunction: null }, fieldFormat: { classPropertyName: "fieldFormat", publicName: "p-field-format", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "p-columns", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, advancedFilters: { classPropertyName: "advancedFilters", publicName: "p-advanced-filters", isSignal: false, isRequired: false, transformFunction: null }, hideColumnsManager: { classPropertyName: "hideColumnsManager", publicName: "p-hide-columns-manager", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "p-infinite-scroll", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, clean: { classPropertyName: "clean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, multiple: { classPropertyName: "multiple", publicName: "p-multiple", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoHeight: { classPropertyName: "autoHeight", publicName: "p-auto-height", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, fieldErrorMessage: { classPropertyName: "fieldErrorMessage", publicName: "p-field-error-message", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "p-spacing", isSignal: false, isRequired: false, transformFunction: null }, textWrap: { classPropertyName: "textWrap", publicName: "p-text-wrap", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "p-virtual-scroll", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, filterService: { classPropertyName: "filterService", publicName: "p-filter-service", isSignal: false, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", onError: "p-error", keydown: "p-keydown", selected: "p-selected", change: "p-change", changeVisibleColumns: "p-change-visible-columns", columnRestoreManager: "p-restore-column-manager" }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: PoLookupBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, fieldValue: { classPropertyName: "fieldValue", publicName: "p-field-value", isSignal: false, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "p-field-label", isSignal: false, isRequired: false, transformFunction: null }, filterParams: { classPropertyName: "filterParams", publicName: "p-filter-params", isSignal: false, isRequired: false, transformFunction: null }, fieldFormat: { classPropertyName: "fieldFormat", publicName: "p-field-format", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "p-columns", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, advancedFilters: { classPropertyName: "advancedFilters", publicName: "p-advanced-filters", isSignal: false, isRequired: false, transformFunction: null }, hideColumnsManager: { classPropertyName: "hideColumnsManager", publicName: "p-hide-columns-manager", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "p-infinite-scroll", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, clean: { classPropertyName: "clean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, multiple: { classPropertyName: "multiple", publicName: "p-multiple", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoHeight: { classPropertyName: "autoHeight", publicName: "p-auto-height", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, fieldErrorMessage: { classPropertyName: "fieldErrorMessage", publicName: "p-field-error-message", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "p-spacing", isSignal: false, isRequired: false, transformFunction: null }, textWrap: { classPropertyName: "textWrap", publicName: "p-text-wrap", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "p-virtual-scroll", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, filterService: { classPropertyName: "filterService", publicName: "p-filter-service", isSignal: false, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", onError: "p-error", keydown: "p-keydown", selected: "p-selected", change: "p-change", changeVisibleColumns: "p-change-visible-columns", columnRestoreManager: "p-restore-column-manager" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoLookupBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: PoLookupFilterService }, { type: i0.Injector, decorators: [{
                     type: Inject,
                     args: [Injector]
-                }] }, { type: PoLookupModalService }, { type: PoLanguageService }], propDecorators: { additionalHelpEventTrigger: [{
+                }] }, { type: PoLookupModalService }, { type: PoLanguageService }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['inp', { read: ElementRef, static: false }]
+            }], additionalHelpEventTrigger: [{
                 type: Input
             }], additionalHelpTooltip: [{
                 type: Input,
@@ -34784,7 +34764,6 @@ class PoLookupComponent extends PoLookupBaseComponent {
     renderer = inject(Renderer2);
     cd = inject(ChangeDetectorRef);
     el = inject(ElementRef);
-    inputEl;
     helperEl;
     initialized = false;
     timeoutResize;
@@ -35072,9 +35051,6 @@ class PoLookupComponent extends PoLookupBaseComponent {
         }
         return this.displayAdditionalHelp;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     setHelper(label, additionalHelpTooltip) {
         return setHelperSettings(label, additionalHelpTooltip, this.poHelperComponent(), this.size, this.isAdditionalHelpEventTriggered() ? this.additionalHelp : undefined);
     }
@@ -35130,15 +35106,12 @@ class PoLookupComponent extends PoLookupBaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoLookupComponent, isStandalone: false, selector: "po-lookup", providers: providers$2, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div class=\"po-lookup-field-wrapper\" [class._active]=\"needsHelper\" [class._size-small]=\"size === 'small'\">\n  <div class=\"po-lookup-flex-item\">\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      @if (!disclaimers.length) {\n        <div class=\"po-field-container-content po-lookup\" [class.po-lookup-disabled]=\"disabled\" [attr.p-size]=\"size\">\n          <div class=\"po-search-container-wrapper\">\n            <input\n              #inp\n              class=\"po-lookup-input po-lookup-input-trigger\"\n              [class.po-lookup-input-aa]=\"size === 'small'\"\n              [class.po-lookup-input-trigger-aa]=\"size === 'small'\"\n              [ngClass]=\"\n                clean && inp.value\n                  ? size === 'small'\n                    ? 'po-input-double-icon-right-aa'\n                    : 'po-input-double-icon-right'\n                  : size === 'small'\n                    ? 'po-input-icon-right-aa'\n                    : 'po-input-icon-right'\n              \"\n              [id]=\"id\"\n              type=\"text\"\n              [autocomplete]=\"autocomplete\"\n              [disabled]=\"disabled\"\n              [placeholder]=\"placeholder\"\n              [required]=\"required\"\n              (blur)=\"searchEvent()\"\n              (keydown)=\"onKeyDown($event)\"\n            />\n            <div class=\"po-field-icon-container-right po-lookup-buttons\">\n              @if (clean && !disabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [class.po-lookup-button-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n              <div\n                #iconLookup\n                tabindex=\"0\"\n                role=\"button\"\n                class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"!disabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <div class=\"po-field-container-content po-lookup\" [class.po-lookup-disabled]=\"disabled\" [attr.p-size]=\"size\">\n          <div class=\"po-search-container-wrapper\">\n            <div\n              #inp\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"po-lookup-input po-input-icon-right po-icon-input\"\n              [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n              [class.po-lookup-input-auto]=\"autoHeight\"\n              [class.po-lookup-input-auto-aa]=\"autoHeight && size === 'small'\"\n              [class.po-lookup-input-static]=\"!autoHeight\"\n              [class.po-lookup-input-static-aa]=\"!autoHeight && size === 'small'\"\n              [class.po-lookup-input-padding-button-clean]=\"clean\"\n              [class.po-lookup-input-padding-button-clean-aa]=\"clean && size === 'small'\"\n              [class.po-lookup-input-disabled]=\"disabled\"\n              [class.po-lookup-input-aa]=\"size === 'small'\"\n              (blur)=\"onBlur()\"\n              (keydown)=\"onKeyDown($event)\"\n            >\n              @if (placeholder && !disclaimers?.length) {\n                <span class=\"po-lookup-input-placeholder\">{{ placeholder }}</span>\n              }\n              @for (disclaimer of visibleDisclaimers; track disclaimer) {\n                <po-disclaimer\n                  class=\"po-lookup-input-disclaimer\"\n                  [p-label]=\"disclaimer.label\"\n                  [p-value]=\"disclaimer.value\"\n                  [p-hide-close]=\"disclaimer.value === '' || disabled\"\n                  [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n                  (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n                ></po-disclaimer>\n              }\n            </div>\n            <div class=\"po-field-icon-container-right po-lookup-buttons\">\n              @if (clean && !disabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n              <div\n                #iconLookup\n                tabindex=\"0\"\n                role=\"button\"\n                class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"!disabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <po-field-container-bottom\n        [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n        [p-show-additional-help]=\"label ? displayAdditionalHelp : undefined\"\n        [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n        [p-size]=\"size\"\n        (p-additional-help)=\"emitAdditionalHelp()\"\n      ></po-field-container-bottom>\n    </po-field-container>\n  </div>\n\n  @if (needsHelper) {\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    ></po-helper>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoDisclaimerComponent, selector: "po-disclaimer" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoLookupComponent, isStandalone: false, selector: "po-lookup", providers: providers$2, viewQueries: [{ propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div class=\"po-lookup-field-wrapper\" [class._active]=\"needsHelper\" [class._size-small]=\"size === 'small'\">\n  <div class=\"po-lookup-flex-item\">\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      @if (!disclaimers.length) {\n        <div class=\"po-field-container-content po-lookup\" [class.po-lookup-disabled]=\"disabled\" [attr.p-size]=\"size\">\n          <div class=\"po-search-container-wrapper\">\n            <input\n              #inp\n              class=\"po-lookup-input po-lookup-input-trigger\"\n              [class.po-lookup-input-aa]=\"size === 'small'\"\n              [class.po-lookup-input-trigger-aa]=\"size === 'small'\"\n              [ngClass]=\"\n                clean && inp.value\n                  ? size === 'small'\n                    ? 'po-input-double-icon-right-aa'\n                    : 'po-input-double-icon-right'\n                  : size === 'small'\n                    ? 'po-input-icon-right-aa'\n                    : 'po-input-icon-right'\n              \"\n              [id]=\"id\"\n              type=\"text\"\n              [autocomplete]=\"autocomplete\"\n              [disabled]=\"disabled\"\n              [placeholder]=\"placeholder\"\n              [required]=\"required\"\n              (blur)=\"searchEvent()\"\n              (keydown)=\"onKeyDown($event)\"\n            />\n            <div class=\"po-field-icon-container-right po-lookup-buttons\">\n              @if (clean && !disabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [class.po-lookup-button-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n              <div\n                #iconLookup\n                tabindex=\"0\"\n                role=\"button\"\n                class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"!disabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <div class=\"po-field-container-content po-lookup\" [class.po-lookup-disabled]=\"disabled\" [attr.p-size]=\"size\">\n          <div class=\"po-search-container-wrapper\">\n            <div\n              #inp\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"po-lookup-input po-input-icon-right po-icon-input\"\n              [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n              [class.po-lookup-input-auto]=\"autoHeight\"\n              [class.po-lookup-input-auto-aa]=\"autoHeight && size === 'small'\"\n              [class.po-lookup-input-static]=\"!autoHeight\"\n              [class.po-lookup-input-static-aa]=\"!autoHeight && size === 'small'\"\n              [class.po-lookup-input-padding-button-clean]=\"clean\"\n              [class.po-lookup-input-padding-button-clean-aa]=\"clean && size === 'small'\"\n              [class.po-lookup-input-disabled]=\"disabled\"\n              [class.po-lookup-input-aa]=\"size === 'small'\"\n              [class.po-lookup-input-auto-dynamic-height]=\"isExpandedHeight\"\n              (blur)=\"onBlur()\"\n              (keydown)=\"onKeyDown($event)\"\n            >\n              @if (placeholder && !disclaimers?.length) {\n                <span class=\"po-lookup-input-placeholder\">{{ placeholder }}</span>\n              }\n              @for (disclaimer of visibleDisclaimers; track disclaimer) {\n                <po-disclaimer\n                  class=\"po-lookup-input-disclaimer\"\n                  [p-label]=\"disclaimer.label\"\n                  [p-value]=\"disclaimer.value\"\n                  [p-hide-close]=\"disclaimer.value === '' || disabled\"\n                  [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n                  (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n                ></po-disclaimer>\n              }\n            </div>\n            <div class=\"po-field-icon-container-right po-lookup-buttons\">\n              @if (clean && !disabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n              <div\n                #iconLookup\n                tabindex=\"0\"\n                role=\"button\"\n                class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"!disabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\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    </po-field-container>\n  </div>\n\n  @if (needsHelper) {\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    ></po-helper>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoDisclaimerComponent, selector: "po-disclaimer" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoLookupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div class=\"po-lookup-field-wrapper\" [class._active]=\"needsHelper\" [class._size-small]=\"size === 'small'\">\n  <div class=\"po-lookup-flex-item\">\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      @if (!disclaimers.length) {\n        <div class=\"po-field-container-content po-lookup\" [class.po-lookup-disabled]=\"disabled\" [attr.p-size]=\"size\">\n          <div class=\"po-search-container-wrapper\">\n            <input\n              #inp\n              class=\"po-lookup-input po-lookup-input-trigger\"\n              [class.po-lookup-input-aa]=\"size === 'small'\"\n              [class.po-lookup-input-trigger-aa]=\"size === 'small'\"\n              [ngClass]=\"\n                clean && inp.value\n                  ? size === 'small'\n                    ? 'po-input-double-icon-right-aa'\n                    : 'po-input-double-icon-right'\n                  : size === 'small'\n                    ? 'po-input-icon-right-aa'\n                    : 'po-input-icon-right'\n              \"\n              [id]=\"id\"\n              type=\"text\"\n              [autocomplete]=\"autocomplete\"\n              [disabled]=\"disabled\"\n              [placeholder]=\"placeholder\"\n              [required]=\"required\"\n              (blur)=\"searchEvent()\"\n              (keydown)=\"onKeyDown($event)\"\n            />\n            <div class=\"po-field-icon-container-right po-lookup-buttons\">\n              @if (clean && !disabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [class.po-lookup-button-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n              <div\n                #iconLookup\n                tabindex=\"0\"\n                role=\"button\"\n                class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"!disabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <div class=\"po-field-container-content po-lookup\" [class.po-lookup-disabled]=\"disabled\" [attr.p-size]=\"size\">\n          <div class=\"po-search-container-wrapper\">\n            <div\n              #inp\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"po-lookup-input po-input-icon-right po-icon-input\"\n              [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n              [class.po-lookup-input-auto]=\"autoHeight\"\n              [class.po-lookup-input-auto-aa]=\"autoHeight && size === 'small'\"\n              [class.po-lookup-input-static]=\"!autoHeight\"\n              [class.po-lookup-input-static-aa]=\"!autoHeight && size === 'small'\"\n              [class.po-lookup-input-padding-button-clean]=\"clean\"\n              [class.po-lookup-input-padding-button-clean-aa]=\"clean && size === 'small'\"\n              [class.po-lookup-input-disabled]=\"disabled\"\n              [class.po-lookup-input-aa]=\"size === 'small'\"\n              (blur)=\"onBlur()\"\n              (keydown)=\"onKeyDown($event)\"\n            >\n              @if (placeholder && !disclaimers?.length) {\n                <span class=\"po-lookup-input-placeholder\">{{ placeholder }}</span>\n              }\n              @for (disclaimer of visibleDisclaimers; track disclaimer) {\n                <po-disclaimer\n                  class=\"po-lookup-input-disclaimer\"\n                  [p-label]=\"disclaimer.label\"\n                  [p-value]=\"disclaimer.value\"\n                  [p-hide-close]=\"disclaimer.value === '' || disabled\"\n                  [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n                  (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n                ></po-disclaimer>\n              }\n            </div>\n            <div class=\"po-field-icon-container-right po-lookup-buttons\">\n              @if (clean && !disabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n              <div\n                #iconLookup\n                tabindex=\"0\"\n                role=\"button\"\n                class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"!disabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <po-field-container-bottom\n        [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n        [p-show-additional-help]=\"label ? displayAdditionalHelp : undefined\"\n        [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n        [p-size]=\"size\"\n        (p-additional-help)=\"emitAdditionalHelp()\"\n      ></po-field-container-bottom>\n    </po-field-container>\n  </div>\n\n  @if (needsHelper) {\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    ></po-helper>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { inputEl: [{
-                type: ViewChild,
-                args: ['inp', { read: ElementRef, static: false }]
-            }], helperEl: [{
+            args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div class=\"po-lookup-field-wrapper\" [class._active]=\"needsHelper\" [class._size-small]=\"size === 'small'\">\n  <div class=\"po-lookup-flex-item\">\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      @if (!disclaimers.length) {\n        <div class=\"po-field-container-content po-lookup\" [class.po-lookup-disabled]=\"disabled\" [attr.p-size]=\"size\">\n          <div class=\"po-search-container-wrapper\">\n            <input\n              #inp\n              class=\"po-lookup-input po-lookup-input-trigger\"\n              [class.po-lookup-input-aa]=\"size === 'small'\"\n              [class.po-lookup-input-trigger-aa]=\"size === 'small'\"\n              [ngClass]=\"\n                clean && inp.value\n                  ? size === 'small'\n                    ? 'po-input-double-icon-right-aa'\n                    : 'po-input-double-icon-right'\n                  : size === 'small'\n                    ? 'po-input-icon-right-aa'\n                    : 'po-input-icon-right'\n              \"\n              [id]=\"id\"\n              type=\"text\"\n              [autocomplete]=\"autocomplete\"\n              [disabled]=\"disabled\"\n              [placeholder]=\"placeholder\"\n              [required]=\"required\"\n              (blur)=\"searchEvent()\"\n              (keydown)=\"onKeyDown($event)\"\n            />\n            <div class=\"po-field-icon-container-right po-lookup-buttons\">\n              @if (clean && !disabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [class.po-lookup-button-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n              <div\n                #iconLookup\n                tabindex=\"0\"\n                role=\"button\"\n                class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"!disabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <div class=\"po-field-container-content po-lookup\" [class.po-lookup-disabled]=\"disabled\" [attr.p-size]=\"size\">\n          <div class=\"po-search-container-wrapper\">\n            <div\n              #inp\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"po-lookup-input po-input-icon-right po-icon-input\"\n              [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n              [class.po-lookup-input-auto]=\"autoHeight\"\n              [class.po-lookup-input-auto-aa]=\"autoHeight && size === 'small'\"\n              [class.po-lookup-input-static]=\"!autoHeight\"\n              [class.po-lookup-input-static-aa]=\"!autoHeight && size === 'small'\"\n              [class.po-lookup-input-padding-button-clean]=\"clean\"\n              [class.po-lookup-input-padding-button-clean-aa]=\"clean && size === 'small'\"\n              [class.po-lookup-input-disabled]=\"disabled\"\n              [class.po-lookup-input-aa]=\"size === 'small'\"\n              [class.po-lookup-input-auto-dynamic-height]=\"isExpandedHeight\"\n              (blur)=\"onBlur()\"\n              (keydown)=\"onKeyDown($event)\"\n            >\n              @if (placeholder && !disclaimers?.length) {\n                <span class=\"po-lookup-input-placeholder\">{{ placeholder }}</span>\n              }\n              @for (disclaimer of visibleDisclaimers; track disclaimer) {\n                <po-disclaimer\n                  class=\"po-lookup-input-disclaimer\"\n                  [p-label]=\"disclaimer.label\"\n                  [p-value]=\"disclaimer.value\"\n                  [p-hide-close]=\"disclaimer.value === '' || disabled\"\n                  [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n                  (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n                ></po-disclaimer>\n              }\n            </div>\n            <div class=\"po-field-icon-container-right po-lookup-buttons\">\n              @if (clean && !disabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n              <div\n                #iconLookup\n                tabindex=\"0\"\n                role=\"button\"\n                class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n                [class.po-field-icon-disabled]=\"disabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!disabled\"\n                  [class.po-field-icon-aa]=\"!disabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\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    </po-field-container>\n  </div>\n\n  @if (needsHelper) {\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    ></po-helper>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { helperEl: [{
                 type: ViewChild,
                 args: ['helperEl', { read: PoHelperComponent, static: false }]
             }] } });
@@ -35296,6 +35269,7 @@ const poMultiselectLiteralsDefault = {
  */
 class PoMultiselectBaseComponent {
     cd;
+    inputElement;
     // Propriedade interna que define se o ícone de ajuda adicional terá cursor clicável (evento) ou padrão (tooltip).
     additionalHelpEventTrigger;
     /**
@@ -35500,6 +35474,7 @@ class PoMultiselectBaseComponent {
     clickOutListener;
     resizeListener;
     getObjectsByValuesSubscription;
+    isExpandedHeight = false;
     _filterService;
     _debounceTime = 400;
     _disabled = false;
@@ -35892,6 +35867,11 @@ class PoMultiselectBaseComponent {
             this.onModelChange(this.getValueUpdate(selectedOptions));
             this.eventChange(selectedOptions);
         }
+        setTimeout(() => {
+            if (this.autoHeight) {
+                this.updateInputHeight();
+            }
+        });
     }
     eventChange(selectedOptions) {
         if (selectedOptions && this.lastLengthModel !== selectedOptions.length) {
@@ -36024,12 +36004,26 @@ class PoMultiselectBaseComponent {
             this.validatorChange();
         }
     }
+    updateInputHeight() {
+        if (!this.inputElement)
+            return;
+        const height = this.inputElement.nativeElement.offsetHeight;
+        if (this.size === PoFieldSize.Small) {
+            this.isExpandedHeight = height > 32;
+        }
+        else {
+            this.isExpandedHeight = height > 44;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoMultiselectBaseComponent, deps: [{ token: PoLanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: PoMultiselectBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, placeholderSearch: { classPropertyName: "placeholderSearch", publicName: "p-placeholder-search", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, hideSelectAll: { classPropertyName: "hideSelectAll", publicName: "p-hide-select-all", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, fieldErrorMessage: { classPropertyName: "fieldErrorMessage", publicName: "p-field-error-message", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, controlValueWithLabel: { classPropertyName: "controlValueWithLabel", publicName: "p-control-value-with-label", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, listboxControlPosition: { classPropertyName: "listboxControlPosition", publicName: "p-listbox-control-position", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, filterService: { classPropertyName: "filterService", publicName: "p-filter-service", isSignal: false, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "p-auto-height", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, debounceTime: { classPropertyName: "debounceTime", publicName: "p-debounce-time", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "p-hide-search", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "p-options", isSignal: false, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "p-sort", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "p-filter-mode", isSignal: false, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "p-field-label", isSignal: false, isRequired: false, transformFunction: null }, fieldValue: { classPropertyName: "fieldValue", publicName: "p-field-value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blur: "p-blur", additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: PoMultiselectBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, placeholderSearch: { classPropertyName: "placeholderSearch", publicName: "p-placeholder-search", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, hideSelectAll: { classPropertyName: "hideSelectAll", publicName: "p-hide-select-all", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, fieldErrorMessage: { classPropertyName: "fieldErrorMessage", publicName: "p-field-error-message", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, controlValueWithLabel: { classPropertyName: "controlValueWithLabel", publicName: "p-control-value-with-label", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, listboxControlPosition: { classPropertyName: "listboxControlPosition", publicName: "p-listbox-control-position", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, filterService: { classPropertyName: "filterService", publicName: "p-filter-service", isSignal: false, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "p-auto-height", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, debounceTime: { classPropertyName: "debounceTime", publicName: "p-debounce-time", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "p-hide-search", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "p-options", isSignal: false, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "p-sort", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "p-filter-mode", isSignal: false, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "p-field-label", isSignal: false, isRequired: false, transformFunction: null }, fieldValue: { classPropertyName: "fieldValue", publicName: "p-field-value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blur: "p-blur", additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoMultiselectBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: PoLanguageService }, { type: i0.ChangeDetectorRef }], propDecorators: { additionalHelpEventTrigger: [{
+        }], ctorParameters: () => [{ type: PoLanguageService }, { type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['inputElement', { read: ElementRef, static: true }]
+            }], additionalHelpEventTrigger: [{
                 type: Input
             }], additionalHelpTooltip: [{
                 type: Input,
@@ -36452,7 +36446,6 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     dropdownElement;
     dropdown;
     iconElement;
-    inputElement;
     outerContainer;
     helperEl;
     literalsTag;
@@ -36826,9 +36819,6 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         }
         return this.displayAdditionalHelp;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     wasClickedOnToggle(event) {
         if (this.dropdownOpen &&
             !this.inputElement.nativeElement.contains(event.target) &&
@@ -37009,11 +36999,11 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.adjustContainerPosition();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoMultiselectComponent, isStandalone: false, selector: "po-multiselect", providers: providers$1, queries: [{ propertyName: "multiselectOptionTemplate", first: true, predicate: PoMultiselectOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n\n<div class=\"po-multiselect-field-wrapper\" [class._active]=\"needsHelper\">\n  <div class=\"po-multiselect-flex-item\">\n    <div #outerContainer>\n      <po-field-container\n        [p-disabled]=\"disabled\"\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\n          cdkOverlayOrigin\n          #trigger=\"cdkOverlayOrigin\"\n          class=\"po-field-container-content\"\n          [class.po-multiselect-show]=\"dropdownOpen\"\n          [attr.p-size]=\"size\"\n        >\n          <div\n            #inputElement\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.disabled]=\"disabled\"\n            [attr.aria-label]=\"label\"\n            [attr.data-focused-element]=\"!disabled\"\n            [attr.data-inactive-component]=\"disabled\"\n            class=\"po-input-icon-right po-multiselect-input\"\n            [class.po-multiselect-input-auto]=\"autoHeight\"\n            [class.po-multiselect-input-static]=\"!autoHeight\"\n            [class.po-multiselect-input-disabled]=\"disabled\"\n            [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n            [class.po-multiselect-input-aa]=\"size === 'small'\"\n            (keydown)=\"onKeyDown($event)\"\n            (click)=\"toggleDropdownVisibility()\"\n            (blur)=\"onBlur($event)\"\n          >\n            @if (!disabled && !visibleTags?.length) {\n              <span\n                class=\"po-multiselect-input-placeholder\"\n                [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n                ria-hidden=\"true\"\n              >\n                {{ placeholder ? placeholder : literals.selectItem }}\n              </span>\n            }\n\n            @for (tag of visibleTags; track tag; let i = $index) {\n              <po-tag\n                [p-value]=\"tag[fieldLabel]\"\n                [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n                [p-removable]=\"true\"\n                [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n                [p-disabled]=\"disabled\"\n                (p-close)=\"closeTag(tag[fieldValue], $event)\"\n                [p-append-in-body]=\"appendBox\"\n              ></po-tag>\n            }\n\n            <div class=\"po-field-icon-container-right\">\n              <po-icon\n                p-icon=\"{{ dropdownIcon }}\"\n                #iconElement\n                class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n                [class.po-field-icon-aa]=\"size === 'small'\"\n                [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n              >\n              </po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (appendBox) {\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"true\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n          >\n            <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n          </ng-template>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n        }\n\n        <po-field-container-bottom\n          [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n          [p-show-additional-help]=\"displayAdditionalHelp\"\n          [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n          [p-size]=\"size\"\n          (p-additional-help)=\"emitAdditionalHelp()\"\n        ></po-field-container-bottom>\n      </po-field-container>\n\n      <ng-template #dropdownListbox>\n        <po-multiselect-dropdown\n          #dropdownElement\n          [p-searching]=\"isServerSearching\"\n          [p-hide-search]=\"hideSearch\"\n          [p-hide-select-all]=\"hideSelectAll\"\n          [p-literals]=\"literals\"\n          [p-options]=\"options\"\n          [p-visible-options]=\"visibleOptionsDropdown\"\n          [p-selected-options]=\"selectedOptions\"\n          [p-placeholder-search]=\"placeholderSearch\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-multiselect-template]=\"multiselectOptionTemplate\"\n          [p-size]=\"size\"\n          [p-container-width]=\"containerWidth\"\n          (p-change)=\"changeItems($event)\"\n          (p-change-search)=\"changeSearch($event)\"\n          (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n          (keydown)=\"onKeyDownDropdown($event, 0)\"\n        >\n        </po-multiselect-dropdown>\n      </ng-template>\n    </div>\n  </div>\n\n  @if (needsHelper) {\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoMultiselectDropdownComponent, selector: "po-multiselect-dropdown", inputs: ["p-searching", "p-hide-search", "p-literals", "p-placeholder-search", "p-selected-options", "p-options", "p-visible-options", "p-hide-select-all", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width", "p-size"], outputs: ["p-change-search", "p-change", "p-close-dropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoMultiselectComponent, isStandalone: false, selector: "po-multiselect", providers: providers$1, queries: [{ propertyName: "multiselectOptionTemplate", first: true, predicate: PoMultiselectOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n\n<div class=\"po-multiselect-field-wrapper\" [class._active]=\"needsHelper\">\n  <div class=\"po-multiselect-flex-item\">\n    <div #outerContainer>\n      <po-field-container\n        [p-disabled]=\"disabled\"\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\n          cdkOverlayOrigin\n          #trigger=\"cdkOverlayOrigin\"\n          class=\"po-field-container-content\"\n          [class.po-multiselect-show]=\"dropdownOpen\"\n          [attr.p-size]=\"size\"\n        >\n          <div\n            #inputElement\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.disabled]=\"disabled\"\n            [attr.aria-label]=\"label\"\n            [attr.data-focused-element]=\"!disabled\"\n            [attr.data-inactive-component]=\"disabled\"\n            class=\"po-input-icon-right po-multiselect-input\"\n            [class.po-multiselect-input-auto]=\"autoHeight\"\n            [class.po-multiselect-input-static]=\"!autoHeight\"\n            [class.po-multiselect-input-disabled]=\"disabled\"\n            [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n            [class.po-multiselect-input-aa]=\"size === 'small'\"\n            [class.po-multiselect-input-auto-dynamic-height]=\"isExpandedHeight\"\n            (keydown)=\"onKeyDown($event)\"\n            (click)=\"toggleDropdownVisibility()\"\n            (blur)=\"onBlur($event)\"\n          >\n            @if (!disabled && !visibleTags?.length) {\n              <span\n                class=\"po-multiselect-input-placeholder\"\n                [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n                ria-hidden=\"true\"\n              >\n                {{ placeholder ? placeholder : literals.selectItem }}\n              </span>\n            }\n\n            @for (tag of visibleTags; track tag; let i = $index) {\n              <po-tag\n                [p-value]=\"tag[fieldLabel]\"\n                [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n                [p-removable]=\"true\"\n                [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n                [p-disabled]=\"disabled\"\n                (p-close)=\"closeTag(tag[fieldValue], $event)\"\n                [p-append-in-body]=\"appendBox\"\n              ></po-tag>\n            }\n\n            <div class=\"po-field-icon-container-right\">\n              <po-icon\n                p-icon=\"{{ dropdownIcon }}\"\n                #iconElement\n                class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n                [class.po-field-icon-aa]=\"size === 'small'\"\n                [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n              >\n              </po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (appendBox) {\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"true\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n          >\n            <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n          </ng-template>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n        }\n\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      </po-field-container>\n\n      <ng-template #dropdownListbox>\n        <po-multiselect-dropdown\n          #dropdownElement\n          [p-searching]=\"isServerSearching\"\n          [p-hide-search]=\"hideSearch\"\n          [p-hide-select-all]=\"hideSelectAll\"\n          [p-literals]=\"literals\"\n          [p-options]=\"options\"\n          [p-visible-options]=\"visibleOptionsDropdown\"\n          [p-selected-options]=\"selectedOptions\"\n          [p-placeholder-search]=\"placeholderSearch\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-multiselect-template]=\"multiselectOptionTemplate\"\n          [p-size]=\"size\"\n          [p-container-width]=\"containerWidth\"\n          (p-change)=\"changeItems($event)\"\n          (p-change-search)=\"changeSearch($event)\"\n          (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n          (keydown)=\"onKeyDownDropdown($event, 0)\"\n        >\n        </po-multiselect-dropdown>\n      </ng-template>\n    </div>\n  </div>\n\n  @if (needsHelper) {\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoMultiselectDropdownComponent, selector: "po-multiselect-dropdown", inputs: ["p-searching", "p-hide-search", "p-literals", "p-placeholder-search", "p-selected-options", "p-options", "p-visible-options", "p-hide-select-all", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width", "p-size"], outputs: ["p-change-search", "p-change", "p-close-dropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n\n<div class=\"po-multiselect-field-wrapper\" [class._active]=\"needsHelper\">\n  <div class=\"po-multiselect-flex-item\">\n    <div #outerContainer>\n      <po-field-container\n        [p-disabled]=\"disabled\"\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\n          cdkOverlayOrigin\n          #trigger=\"cdkOverlayOrigin\"\n          class=\"po-field-container-content\"\n          [class.po-multiselect-show]=\"dropdownOpen\"\n          [attr.p-size]=\"size\"\n        >\n          <div\n            #inputElement\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.disabled]=\"disabled\"\n            [attr.aria-label]=\"label\"\n            [attr.data-focused-element]=\"!disabled\"\n            [attr.data-inactive-component]=\"disabled\"\n            class=\"po-input-icon-right po-multiselect-input\"\n            [class.po-multiselect-input-auto]=\"autoHeight\"\n            [class.po-multiselect-input-static]=\"!autoHeight\"\n            [class.po-multiselect-input-disabled]=\"disabled\"\n            [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n            [class.po-multiselect-input-aa]=\"size === 'small'\"\n            (keydown)=\"onKeyDown($event)\"\n            (click)=\"toggleDropdownVisibility()\"\n            (blur)=\"onBlur($event)\"\n          >\n            @if (!disabled && !visibleTags?.length) {\n              <span\n                class=\"po-multiselect-input-placeholder\"\n                [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n                ria-hidden=\"true\"\n              >\n                {{ placeholder ? placeholder : literals.selectItem }}\n              </span>\n            }\n\n            @for (tag of visibleTags; track tag; let i = $index) {\n              <po-tag\n                [p-value]=\"tag[fieldLabel]\"\n                [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n                [p-removable]=\"true\"\n                [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n                [p-disabled]=\"disabled\"\n                (p-close)=\"closeTag(tag[fieldValue], $event)\"\n                [p-append-in-body]=\"appendBox\"\n              ></po-tag>\n            }\n\n            <div class=\"po-field-icon-container-right\">\n              <po-icon\n                p-icon=\"{{ dropdownIcon }}\"\n                #iconElement\n                class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n                [class.po-field-icon-aa]=\"size === 'small'\"\n                [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n              >\n              </po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (appendBox) {\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"true\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n          >\n            <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n          </ng-template>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n        }\n\n        <po-field-container-bottom\n          [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n          [p-show-additional-help]=\"displayAdditionalHelp\"\n          [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n          [p-size]=\"size\"\n          (p-additional-help)=\"emitAdditionalHelp()\"\n        ></po-field-container-bottom>\n      </po-field-container>\n\n      <ng-template #dropdownListbox>\n        <po-multiselect-dropdown\n          #dropdownElement\n          [p-searching]=\"isServerSearching\"\n          [p-hide-search]=\"hideSearch\"\n          [p-hide-select-all]=\"hideSelectAll\"\n          [p-literals]=\"literals\"\n          [p-options]=\"options\"\n          [p-visible-options]=\"visibleOptionsDropdown\"\n          [p-selected-options]=\"selectedOptions\"\n          [p-placeholder-search]=\"placeholderSearch\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-multiselect-template]=\"multiselectOptionTemplate\"\n          [p-size]=\"size\"\n          [p-container-width]=\"containerWidth\"\n          (p-change)=\"changeItems($event)\"\n          (p-change-search)=\"changeSearch($event)\"\n          (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n          (keydown)=\"onKeyDownDropdown($event, 0)\"\n        >\n        </po-multiselect-dropdown>\n      </ng-template>\n    </div>\n  </div>\n\n  @if (needsHelper) {\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" }]
+            args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n\n<div class=\"po-multiselect-field-wrapper\" [class._active]=\"needsHelper\">\n  <div class=\"po-multiselect-flex-item\">\n    <div #outerContainer>\n      <po-field-container\n        [p-disabled]=\"disabled\"\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\n          cdkOverlayOrigin\n          #trigger=\"cdkOverlayOrigin\"\n          class=\"po-field-container-content\"\n          [class.po-multiselect-show]=\"dropdownOpen\"\n          [attr.p-size]=\"size\"\n        >\n          <div\n            #inputElement\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.disabled]=\"disabled\"\n            [attr.aria-label]=\"label\"\n            [attr.data-focused-element]=\"!disabled\"\n            [attr.data-inactive-component]=\"disabled\"\n            class=\"po-input-icon-right po-multiselect-input\"\n            [class.po-multiselect-input-auto]=\"autoHeight\"\n            [class.po-multiselect-input-static]=\"!autoHeight\"\n            [class.po-multiselect-input-disabled]=\"disabled\"\n            [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n            [class.po-multiselect-input-aa]=\"size === 'small'\"\n            [class.po-multiselect-input-auto-dynamic-height]=\"isExpandedHeight\"\n            (keydown)=\"onKeyDown($event)\"\n            (click)=\"toggleDropdownVisibility()\"\n            (blur)=\"onBlur($event)\"\n          >\n            @if (!disabled && !visibleTags?.length) {\n              <span\n                class=\"po-multiselect-input-placeholder\"\n                [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n                ria-hidden=\"true\"\n              >\n                {{ placeholder ? placeholder : literals.selectItem }}\n              </span>\n            }\n\n            @for (tag of visibleTags; track tag; let i = $index) {\n              <po-tag\n                [p-value]=\"tag[fieldLabel]\"\n                [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n                [p-removable]=\"true\"\n                [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n                [p-disabled]=\"disabled\"\n                (p-close)=\"closeTag(tag[fieldValue], $event)\"\n                [p-append-in-body]=\"appendBox\"\n              ></po-tag>\n            }\n\n            <div class=\"po-field-icon-container-right\">\n              <po-icon\n                p-icon=\"{{ dropdownIcon }}\"\n                #iconElement\n                class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n                [class.po-field-icon-aa]=\"size === 'small'\"\n                [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n              >\n              </po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (appendBox) {\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"true\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n          >\n            <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n          </ng-template>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n        }\n\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      </po-field-container>\n\n      <ng-template #dropdownListbox>\n        <po-multiselect-dropdown\n          #dropdownElement\n          [p-searching]=\"isServerSearching\"\n          [p-hide-search]=\"hideSearch\"\n          [p-hide-select-all]=\"hideSelectAll\"\n          [p-literals]=\"literals\"\n          [p-options]=\"options\"\n          [p-visible-options]=\"visibleOptionsDropdown\"\n          [p-selected-options]=\"selectedOptions\"\n          [p-placeholder-search]=\"placeholderSearch\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-multiselect-template]=\"multiselectOptionTemplate\"\n          [p-size]=\"size\"\n          [p-container-width]=\"containerWidth\"\n          (p-change)=\"changeItems($event)\"\n          (p-change-search)=\"changeSearch($event)\"\n          (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n          (keydown)=\"onKeyDownDropdown($event, 0)\"\n        >\n        </po-multiselect-dropdown>\n      </ng-template>\n    </div>\n  </div>\n\n  @if (needsHelper) {\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" }]
         }], ctorParameters: () => [], propDecorators: { multiselectOptionTemplate: [{
                 type: ContentChild,
                 args: [PoMultiselectOptionTemplateDirective, { static: true }]
@@ -37026,9 +37016,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], iconElement: [{
                 type: ViewChild,
                 args: ['iconElement', { read: ElementRef, static: true }]
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['inputElement', { read: ElementRef, static: true }]
             }], outerContainer: [{
                 type: ViewChild,
                 args: ['outerContainer ', { read: ElementRef }]
@@ -37286,7 +37273,7 @@ class PoNumberComponent extends PoNumberBaseComponent {
                 useExisting: forwardRef(() => PoNumberComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\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-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoNumberComponent, decorators: [{
             type: Component,
@@ -37301,7 +37288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoNumberComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { step: [{
                 type: Input,
                 args: ['p-step']
@@ -37403,7 +37390,7 @@ class PoPasswordComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoPasswordComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\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-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoPasswordComponent, decorators: [{
             type: Component,
@@ -37418,7 +37405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoPasswordComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { hidePasswordPeek: [{
                 type: Input,
                 args: ['p-hide-password-peek']
@@ -40367,9 +40354,6 @@ class PoUploadComponent extends PoUploadBaseComponent {
         }
         return this.displayAdditionalHelp;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     stopUpload(file) {
         this.uploadService.stopRequestByFile(file, () => {
             if (this.autoUpload) {
@@ -40523,7 +40507,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
                 useExisting: forwardRef(() => PoUploadComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true, read: ElementRef, static: true }, { propertyName: "poUploadDragDropComponent", first: true, predicate: PoUploadDragDropComponent, descendants: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }, { propertyName: "modalComponent", first: true, predicate: ["modal"], descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"isDisabled\"\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\" [attr.p-size]=\"size\">\n    <div class=\"po-upload\" [attr.p-size]=\"size\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n\n  <div class=\"po-row po-footer-group\">\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoProgressComponent, selector: "po-progress" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoUploadDragDropComponent, selector: "po-upload-drag-drop", inputs: ["p-directory-compatible", "p-disabled", "p-literals", "p-drag-drop-height"], outputs: ["p-file-change", "p-select-files"] }, { kind: "component", type: PoUploadFileRestrictionsComponent, selector: "po-upload-file-restrictions", inputs: ["p-max-files", "p-allowed-extensions", "p-max-file-size", "p-min-file-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true, read: ElementRef, static: true }, { propertyName: "poUploadDragDropComponent", first: true, predicate: PoUploadDragDropComponent, descendants: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }, { propertyName: "modalComponent", first: true, predicate: ["modal"], descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"isDisabled\"\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\" [attr.p-size]=\"size\">\n    <div class=\"po-upload\" [attr.p-size]=\"size\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { 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: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoProgressComponent, selector: "po-progress" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoUploadDragDropComponent, selector: "po-upload-drag-drop", inputs: ["p-directory-compatible", "p-disabled", "p-literals", "p-drag-drop-height"], outputs: ["p-file-change", "p-select-files"] }, { kind: "component", type: PoUploadFileRestrictionsComponent, selector: "po-upload-file-restrictions", inputs: ["p-max-files", "p-allowed-extensions", "p-max-file-size", "p-min-file-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUploadComponent, decorators: [{
             type: Component,
@@ -40540,7 +40524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoUploadComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"isDisabled\"\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\" [attr.p-size]=\"size\">\n    <div class=\"po-upload\" [attr.p-size]=\"size\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n\n  <div class=\"po-row po-footer-group\">\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"isDisabled\"\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\" [attr.p-size]=\"size\">\n    <div class=\"po-upload\" [attr.p-size]=\"size\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n" }]
         }], ctorParameters: () => [], propDecorators: { inputFile: [{
                 type: ViewChild,
                 args: ['inputFile', { read: ElementRef, static: true }]
@@ -40636,7 +40620,7 @@ class PoUrlComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoUrlComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\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-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUrlComponent, decorators: [{
             type: Component,
@@ -40651,7 +40635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoUrlComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean\"\n      [class.po-input-icon-right-aa]=\"clean && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [] });
 const uploadRestrictions = ['.apng', '.bmp', '.gif', '.ico', '.jpeg', '.jpg', '.png', '.svg'];
@@ -41363,11 +41347,11 @@ class PoRichTextComponent extends PoRichTextBaseComponent {
         return setHelperSettings(label, additionalHelpTooltip, this.poHelperComponent(), this.size, this.additionalHelp.observed ? this.additionalHelp : undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoRichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoRichTextComponent, isStandalone: false, selector: "po-rich-text", providers: providers, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: PoRichTextBodyComponent, descendants: true, static: true }, { propertyName: "richTextToolbar", first: true, predicate: PoRichTextToolbarComponent, descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\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\" [attr.p-size]=\"size\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      [p-size]=\"size\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar?.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar?.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar?.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n      (p-keydown)=\"onKeyDown($event)\"\n    >\n    </po-rich-text-body>\n\n    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly\"\n        [p-hide-toolbar-actions]=\"toolbarActions\"\n        [p-size]=\"size\"\n        (p-link-editing)=\"richTextBody.linkEditing($event)\"\n        (p-command)=\"richTextBody.executeCommand($event)\"\n      >\n      </po-rich-text-toolbar>\n    }\n  </div>\n  <div class=\"po-row po-footer-group\">\n    @if (!readonly) {\n      <po-field-container-bottom\n        [p-additional-help-tooltip]=\"additionalHelp.observed ? null : additionalHelpTooltip\"\n        [p-append-in-body]=\"appendBox\"\n        [p-help]=\"help\"\n        [p-error-limit]=\"errorLimit\"\n        [p-error-pattern]=\"errorMsg\"\n        [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n        [p-size]=\"size\"\n      ></po-field-container-bottom>\n    }\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper #helperEl [p-size]=\"size\" [p-helper]=\"poHelper.helperSettings\" [p-append-in-body]=\"appendBox\">\n      </po-helper>\n    }\n  </div>\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoRichTextBodyComponent, selector: "po-rich-text-body", inputs: ["p-height", "p-label", "p-model-value", "p-placeholder", "p-readonly", "p-size"], outputs: ["p-change", "p-commands", "p-keydown", "p-selected-link", "p-shortcut-command", "p-value", "p-blur"] }, { kind: "component", type: PoRichTextToolbarComponent, selector: "po-rich-text-toolbar", inputs: ["p-hide-toolbar-actions", "p-readonly", "p-size"], outputs: ["p-command", "p-modal", "p-link-editing"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoRichTextComponent, isStandalone: false, selector: "po-rich-text", providers: providers, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: PoRichTextBodyComponent, descendants: true, static: true }, { propertyName: "richTextToolbar", first: true, predicate: PoRichTextToolbarComponent, descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\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\" [attr.p-size]=\"size\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      [p-size]=\"size\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar?.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar?.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar?.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n      (p-keydown)=\"onKeyDown($event)\"\n    >\n    </po-rich-text-body>\n\n    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly\"\n        [p-hide-toolbar-actions]=\"toolbarActions\"\n        [p-size]=\"size\"\n        (p-link-editing)=\"richTextBody.linkEditing($event)\"\n        (p-command)=\"richTextBody.executeCommand($event)\"\n      >\n      </po-rich-text-toolbar>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"errorMsg\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ 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: PoRichTextBodyComponent, selector: "po-rich-text-body", inputs: ["p-height", "p-label", "p-model-value", "p-placeholder", "p-readonly", "p-size"], outputs: ["p-change", "p-commands", "p-keydown", "p-selected-link", "p-shortcut-command", "p-value", "p-blur"] }, { kind: "component", type: PoRichTextToolbarComponent, selector: "po-rich-text-toolbar", inputs: ["p-hide-toolbar-actions", "p-readonly", "p-size"], outputs: ["p-command", "p-modal", "p-link-editing"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoRichTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-rich-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\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\" [attr.p-size]=\"size\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      [p-size]=\"size\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar?.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar?.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar?.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n      (p-keydown)=\"onKeyDown($event)\"\n    >\n    </po-rich-text-body>\n\n    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly\"\n        [p-hide-toolbar-actions]=\"toolbarActions\"\n        [p-size]=\"size\"\n        (p-link-editing)=\"richTextBody.linkEditing($event)\"\n        (p-command)=\"richTextBody.executeCommand($event)\"\n      >\n      </po-rich-text-toolbar>\n    }\n  </div>\n  <div class=\"po-row po-footer-group\">\n    @if (!readonly) {\n      <po-field-container-bottom\n        [p-additional-help-tooltip]=\"additionalHelp.observed ? null : additionalHelpTooltip\"\n        [p-append-in-body]=\"appendBox\"\n        [p-help]=\"help\"\n        [p-error-limit]=\"errorLimit\"\n        [p-error-pattern]=\"errorMsg\"\n        [p-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n        [p-size]=\"size\"\n      ></po-field-container-bottom>\n    }\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper #helperEl [p-size]=\"size\" [p-helper]=\"poHelper.helperSettings\" [p-append-in-body]=\"appendBox\">\n      </po-helper>\n    }\n  </div>\n</po-field-container>\n" }]
+            args: [{ selector: 'po-rich-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\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\" [attr.p-size]=\"size\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      [p-size]=\"size\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar?.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar?.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar?.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n      (p-keydown)=\"onKeyDown($event)\"\n    >\n    </po-rich-text-body>\n\n    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly\"\n        [p-hide-toolbar-actions]=\"toolbarActions\"\n        [p-size]=\"size\"\n        (p-link-editing)=\"richTextBody.linkEditing($event)\"\n        (p-command)=\"richTextBody.executeCommand($event)\"\n      >\n      </po-rich-text-toolbar>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"errorMsg\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { bodyElement: [{
                 type: ViewChild,
                 args: [PoRichTextBodyComponent, { static: true }]
@@ -41984,7 +41968,7 @@ class PoSelectComponent extends PoFieldValidateModel {
                 useExisting: forwardRef(() => PoSelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], 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\" [attr.p-size]=\"size\">\n    <select\n      #select\n      class=\"po-select\"\n      [class.po-select-aa]=\"size === 'small'\"\n      [ngClass]=\"iconNameLib === 'AnimaliaIcon' ? 'po-select-phosphor' : 'po-select-poicon'\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.name]=\"name\"\n      [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [required]=\"required\"\n      (blur)=\"onBlur($event)\"\n      (change)=\"onSelectChange($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      @if (!isSafari) {\n        @if (!selectedValue?.toString() || !!placeholder) {\n          <option\n            [disabled]=\"!!placeholder\"\n            [hidden]=\"!selectedValue?.toString() && !placeholder\"\n            [selected]=\"!selectedValue?.toString()\"\n            [value]=\"placeholder ?? ''\"\n          >\n            {{ placeholder }}\n          </option>\n        }\n        <option [hidden]=\"true\">{{ displayValue }}</option>\n      }\n\n      @if (isSafari) {\n        <option>{{ displayValue || placeholder }}</option>\n      }\n\n      @if (optionWithoutGroup.length > 0) {\n        @for (item of optionWithoutGroup; track item) {\n          <option [disabled]=\"readonly\" [value]=\"item?.[this.fieldValue]\">\n            {{ item?.[this.fieldLabel] }}\n          </option>\n        }\n      }\n      @if (listGroupOptions.length > 0) {\n        @for (item of listGroupOptions; track item) {\n          @if (item?.options.length > 0) {\n            <optgroup label=\"{{ item?.label }}\" [disabled]=\"readonly\">\n              @for (subItem of item.options; track subItem) {\n                <option [value]=\"subItem?.[this.fieldValue]\" [disabled]=\"readonly\">\n                  {{ subItem?.[this.fieldLabel] }}\n                </option>\n              }\n            </optgroup>\n          }\n        }\n      }\n    </select>\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-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], 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\" [attr.p-size]=\"size\">\n    <select\n      #select\n      class=\"po-select\"\n      [class.po-select-aa]=\"size === 'small'\"\n      [ngClass]=\"iconNameLib === 'AnimaliaIcon' ? 'po-select-phosphor' : 'po-select-poicon'\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.name]=\"name\"\n      [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [required]=\"required\"\n      (blur)=\"onBlur($event)\"\n      (change)=\"onSelectChange($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      @if (!isSafari) {\n        @if (!selectedValue?.toString() || !!placeholder) {\n          <option\n            [disabled]=\"!!placeholder\"\n            [hidden]=\"!selectedValue?.toString() && !placeholder\"\n            [selected]=\"!selectedValue?.toString()\"\n            [value]=\"placeholder ?? ''\"\n          >\n            {{ placeholder }}\n          </option>\n        }\n        <option [hidden]=\"true\">{{ displayValue }}</option>\n      }\n\n      @if (isSafari) {\n        <option>{{ displayValue || placeholder }}</option>\n      }\n\n      @if (optionWithoutGroup.length > 0) {\n        @for (item of optionWithoutGroup; track item) {\n          <option [disabled]=\"readonly\" [value]=\"item?.[this.fieldValue]\">\n            {{ item?.[this.fieldLabel] }}\n          </option>\n        }\n      }\n      @if (listGroupOptions.length > 0) {\n        @for (item of listGroupOptions; track item) {\n          @if (item?.options.length > 0) {\n            <optgroup label=\"{{ item?.label }}\" [disabled]=\"readonly\">\n              @for (subItem of item.options; track subItem) {\n                <option [value]=\"subItem?.[this.fieldValue]\" [disabled]=\"readonly\">\n                  {{ subItem?.[this.fieldLabel] }}\n                </option>\n              }\n            </optgroup>\n          }\n        }\n      }\n    </select>\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoSelectComponent, decorators: [{
             type: Component,
@@ -41999,7 +41983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoSelectComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <select\n      #select\n      class=\"po-select\"\n      [class.po-select-aa]=\"size === 'small'\"\n      [ngClass]=\"iconNameLib === 'AnimaliaIcon' ? 'po-select-phosphor' : 'po-select-poicon'\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.name]=\"name\"\n      [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [required]=\"required\"\n      (blur)=\"onBlur($event)\"\n      (change)=\"onSelectChange($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      @if (!isSafari) {\n        @if (!selectedValue?.toString() || !!placeholder) {\n          <option\n            [disabled]=\"!!placeholder\"\n            [hidden]=\"!selectedValue?.toString() && !placeholder\"\n            [selected]=\"!selectedValue?.toString()\"\n            [value]=\"placeholder ?? ''\"\n          >\n            {{ placeholder }}\n          </option>\n        }\n        <option [hidden]=\"true\">{{ displayValue }}</option>\n      }\n\n      @if (isSafari) {\n        <option>{{ displayValue || placeholder }}</option>\n      }\n\n      @if (optionWithoutGroup.length > 0) {\n        @for (item of optionWithoutGroup; track item) {\n          <option [disabled]=\"readonly\" [value]=\"item?.[this.fieldValue]\">\n            {{ item?.[this.fieldLabel] }}\n          </option>\n        }\n      }\n      @if (listGroupOptions.length > 0) {\n        @for (item of listGroupOptions; track item) {\n          @if (item?.options.length > 0) {\n            <optgroup label=\"{{ item?.label }}\" [disabled]=\"readonly\">\n              @for (subItem of item.options; track subItem) {\n                <option [value]=\"subItem?.[this.fieldValue]\" [disabled]=\"readonly\">\n                  {{ subItem?.[this.fieldLabel] }}\n                </option>\n              }\n            </optgroup>\n          }\n        }\n      }\n    </select>\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-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      [p-size]=\"size\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <select\n      #select\n      class=\"po-select\"\n      [class.po-select-aa]=\"size === 'small'\"\n      [ngClass]=\"iconNameLib === 'AnimaliaIcon' ? 'po-select-phosphor' : 'po-select-poicon'\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.name]=\"name\"\n      [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [required]=\"required\"\n      (blur)=\"onBlur($event)\"\n      (change)=\"onSelectChange($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      @if (!isSafari) {\n        @if (!selectedValue?.toString() || !!placeholder) {\n          <option\n            [disabled]=\"!!placeholder\"\n            [hidden]=\"!selectedValue?.toString() && !placeholder\"\n            [selected]=\"!selectedValue?.toString()\"\n            [value]=\"placeholder ?? ''\"\n          >\n            {{ placeholder }}\n          </option>\n        }\n        <option [hidden]=\"true\">{{ displayValue }}</option>\n      }\n\n      @if (isSafari) {\n        <option>{{ displayValue || placeholder }}</option>\n      }\n\n      @if (optionWithoutGroup.length > 0) {\n        @for (item of optionWithoutGroup; track item) {\n          <option [disabled]=\"readonly\" [value]=\"item?.[this.fieldValue]\">\n            {{ item?.[this.fieldLabel] }}\n          </option>\n        }\n      }\n      @if (listGroupOptions.length > 0) {\n        @for (item of listGroupOptions; track item) {\n          @if (item?.options.length > 0) {\n            <optgroup label=\"{{ item?.label }}\" [disabled]=\"readonly\">\n              @for (subItem of item.options; track subItem) {\n                <option [value]=\"subItem?.[this.fieldValue]\" [disabled]=\"readonly\">\n                  {{ subItem?.[this.fieldLabel] }}\n                </option>\n              }\n            </optgroup>\n          }\n        }\n      }\n    </select>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { selectElement: [{
                 type: ViewChild,
                 args: ['select', { read: ElementRef, static: true }]
@@ -42714,9 +42698,6 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
         }
         return this.displayAdditionalHelp;
     }
-    showAdditionalHelpIcon() {
-        return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
-    }
     isAdditionalHelpEventTriggered() {
         return (this.additionalHelpEventTrigger === 'event' ||
             (this.additionalHelpEventTrigger === undefined && this.additionalHelp.observed));
@@ -42736,7 +42717,7 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
                 useExisting: forwardRef(() => PoTextareaComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], 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\" [attr.p-size]=\"size\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.name]=\"name\"\n      [attr.p-size]=\"size\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\n  <div class=\"po-row po-footer-group\">\n    @if (!readonly) {\n      <po-field-container-bottom\n        [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n        [p-show-additional-help]=\"displayAdditionalHelp\"\n        [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n        [p-size]=\"size\"\n        (p-additional-help)=\"emitAdditionalHelp()\"\n      ></po-field-container-bottom>\n    }\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-size", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { 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: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], 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\" [attr.p-size]=\"size\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.name]=\"name\"\n      [attr.p-size]=\"size\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\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      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoTextareaComponent, decorators: [{
             type: Component,
@@ -42751,7 +42732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoTextareaComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.name]=\"name\"\n      [attr.p-size]=\"size\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\n  <div class=\"po-row po-footer-group\">\n    @if (!readonly) {\n      <po-field-container-bottom\n        [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\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-hide-additional-help-by-label]=\"poHelper.hideAdditionalHelp\"\n        [p-show-additional-help]=\"displayAdditionalHelp\"\n        [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n        [p-size]=\"size\"\n        (p-additional-help)=\"emitAdditionalHelp()\"\n      ></po-field-container-bottom>\n    }\n    @if ((!label && poHelperComponent()) || (!label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\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</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.name]=\"name\"\n      [attr.p-size]=\"size\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\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      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { inputEl: [{
                 type: ViewChild,
                 args: ['inp', { read: ElementRef, static: true }]