@po-ui/ng-components 21.1.0 → 21.3.0

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

@@ -566,6 +566,24 @@ var PoThemeA11yEnum;
     PoThemeA11yEnum["AAA"] = "AAA";
 })(PoThemeA11yEnum || (PoThemeA11yEnum = {}));
 
+/**
+ * @usedBy PoTableComponent, PoLookupComponent, PoPageDynamicTableComponent
+ *
+ * @description
+ * Tipos de espaçamento interno (padding) das células (**p-spacing**) do po-table.
+ */
+var PoTableColumnSpacing;
+(function (PoTableColumnSpacing) {
+    /** Espaçamento extra pequeno: 0.25rem (vertical) x 0.5rem (horizontal). */
+    PoTableColumnSpacing["ExtraSmall"] = "extraSmall";
+    /** Espaçamento pequeno: 0.5rem (vertical) x 1rem (horizontal). */
+    PoTableColumnSpacing["Small"] = "small";
+    /** Espaçamento médio: 0.75rem (vertical) x 1rem (horizontal). */
+    PoTableColumnSpacing["Medium"] = "medium";
+    /** Espaçamento grande: 1rem (vertical) x 1rem (horizontal). */
+    PoTableColumnSpacing["Large"] = "large";
+})(PoTableColumnSpacing || (PoTableColumnSpacing = {}));
+
 /**
  * Converte e formata os bytes em formato mais legível para o usuário.
  *
@@ -1342,6 +1360,22 @@ function getTextColorFromBackgroundColor(backgroundColor) {
     const yiq = (r * 299 + g * 587 + b * 114) / 1000;
     return yiq >= 128 ? getTextColor('darkest') : getTextColor('lightest');
 }
+/**
+ * Retorna o tamanho do ícone de loading baseado no tamanho do field.
+ *
+ * @param size Tamanho do campo (`small`, `medium` ou outros valores).
+ * @returns Tamanho do ícone de loading correspondente:
+ * - `small` → `xs`
+ * - `medium` → `sm`
+ * - qualquer outro valor → `sm`
+ */
+function mapInputSizeToLoadingIcon(size) {
+    const sizeMap = {
+        small: 'xs',
+        medium: 'sm'
+    };
+    return sizeMap[size ?? ''] || 'sm';
+}
 const PoUtils = {
     capitalizeFirstLetter,
     convertDateToISODate,
@@ -1375,6 +1409,12 @@ const PoUtils = {
     uuid,
     validateDateRange
 };
+const PO_TABLE_ROW_HEIGHT_BY_SPACING = {
+    [PoTableColumnSpacing.ExtraSmall]: 32,
+    [PoTableColumnSpacing.Small]: 40,
+    [PoTableColumnSpacing.Medium]: 48,
+    [PoTableColumnSpacing.Large]: 56
+};
 
 const poDefaultLanguage = 'PO_DEFAULT_LANGUAGE';
 const poLocaleKey = 'PO_USER_LOCALE';
@@ -5362,11 +5402,11 @@ class PoLoadingIconComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingIconComponent, deps: [{ token: LOADING_ICON_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLoadingIconComponent, isStandalone: false, selector: "po-loading-icon", inputs: { neutralColor: ["p-neutral-color", "neutralColor"], size: ["p-size", "size"], inOverlay: ["p-in-overlay", "inOverlay"] }, viewQueries: [{ propertyName: "loadingContainer", first: true, predicate: ["loadingContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLoadingIconComponent, isStandalone: false, selector: "po-loading-icon", inputs: { neutralColor: ["p-neutral-color", "neutralColor"], size: ["p-size", "size"], inOverlay: ["p-in-overlay", "inOverlay"] }, viewQueries: [{ propertyName: "loadingContainer", first: true, predicate: ["loadingContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoadingIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-loading-icon', standalone: false, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-loading-icon', standalone: false, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.Type, decorators: [{
                     type: Optional
                 }, {
@@ -21520,6 +21560,7 @@ class PoSwitchComponent extends PoFieldModel {
     _labelOff = 'false';
     _labelOn = 'true';
     _labelPosition = PoSwitchLabelPosition.Right;
+    _loading = false;
     _formatModel = false;
     _size = undefined;
     statusChangesSubscription;
@@ -21588,6 +21629,24 @@ class PoSwitchComponent extends PoFieldModel {
     get labelOn() {
         return this._labelOn;
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento substituindo o switch para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = value;
+        this.changeDetector.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
     /**
      * @optional
      *
@@ -21789,6 +21848,10 @@ class PoSwitchComponent extends PoFieldModel {
             }
         }
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        return mapInputSizeToLoadingIcon(size);
+    }
     getErrorPattern() {
         return this.fieldErrorMessage && this.hasInvalidClass() ? this.fieldErrorMessage : '';
     }
@@ -21826,7 +21889,7 @@ class PoSwitchComponent extends PoFieldModel {
         return super.showAdditionalHelp(this.helperEl, this.poHelperComponent());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoSwitchComponent, isStandalone: false, selector: "po-switch", inputs: { value: { classPropertyName: "value", publicName: "p-value", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, formatModel: { classPropertyName: "formatModel", publicName: "p-format-model", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, hideLabelStatus: { classPropertyName: "hideLabelStatus", publicName: "p-hide-label-status", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, labelPosition: { classPropertyName: "labelPosition", publicName: "p-label-position", isSignal: false, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "p-label-off", isSignal: false, isRequired: false, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "p-label-on", isSignal: false, isRequired: false, transformFunction: null }, 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 }, invalidValue: { classPropertyName: "invalidValue", publicName: "p-invalid-value", 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 }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoSwitchComponent, isStandalone: false, selector: "po-switch", inputs: { value: { classPropertyName: "value", publicName: "p-value", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, formatModel: { classPropertyName: "formatModel", publicName: "p-format-model", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, hideLabelStatus: { classPropertyName: "hideLabelStatus", publicName: "p-hide-label-status", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, labelPosition: { classPropertyName: "labelPosition", publicName: "p-label-position", isSignal: false, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "p-label-off", isSignal: false, isRequired: false, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "p-label-on", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", 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 }, invalidValue: { classPropertyName: "invalidValue", publicName: "p-invalid-value", 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 }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PoSwitchComponent),
@@ -21842,7 +21905,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-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 });
+        ], 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]=\"isDisabled\"\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      @if (loading) {\n        <div class=\"po-switch-loading-container\">\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      } @else {\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]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled\"\n          [id]=\"id\"\n          [tabindex]=\"isDisabled ? -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]=\"isDisabled\"\n            [p-label]=\"value === true ? labelOn : labelOff\"\n            (click)=\"eventClick()\"\n          >\n          </po-label>\n        }\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]=\"isDisabled\"\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]=\"isDisabled\"\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" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSwitchComponent, decorators: [{
             type: Component,
@@ -21862,7 +21925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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-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" }]
+                    ], 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-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      @if (loading) {\n        <div class=\"po-switch-loading-container\">\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      } @else {\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]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled\"\n          [id]=\"id\"\n          [tabindex]=\"isDisabled ? -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]=\"isDisabled\"\n            [p-label]=\"value === true ? labelOn : labelOff\"\n            (click)=\"eventClick()\"\n          >\n          </po-label>\n        }\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]=\"isDisabled\"\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]=\"isDisabled\"\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 }]
@@ -21887,6 +21950,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], labelOn: [{
                 type: Input,
                 args: ['p-label-on']
+            }], loading: [{
+                type: Input,
+                args: [{ alias: 'p-loading', transform: convertToBoolean }]
             }], fieldErrorMessage: [{
                 type: Input,
                 args: ['p-field-error-message']
@@ -22029,7 +22095,7 @@ class PoTableListManagerComponent extends PoCheckboxGroupComponent {
                 useExisting: forwardRef(() => PoTableListManagerComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if (existedFixedItem()) {\n  <section class=\"po-table-list-manager-section\">\n    <p class=\"po-table-list-manager-title-group-items\">{{ literals.fixedColumns }}</p>\n    @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n      @if (isFixed(option)) {\n        <li\n          class=\"po-table-list-manager-container\"\n          [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n        >\n          <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n        </li>\n      }\n    }\n  </section>\n}\n\n<section class=\"po-table-list-manager-section\">\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.otherColumns }}</p>\n  @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n    @if (!isFixed(option)) {\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\n        @if (!isFixed(option)) {\n          <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n        }\n      </li>\n    }\n  }\n</section>\n\n<ng-template #listItemsManagerDefault let-option>\n  <div class=\"po-table-list-manager-item\">\n    <div class=\"po-table-list-manager-item-switch\">\n      <po-switch\n        name=\"switch\"\n        (p-change)=\"clickSwitch(option)\"\n        (keydown)=\"onKeyDown($event, option)\"\n        [p-disabled]=\"option.disabled || disabled || isFixed(option)\"\n        [p-value]=\"checkedOptions[option.value]\"\n        [p-hide-label-status]=\"true\"\n        [p-size]=\"componentsSize\"\n      >\n      </po-switch>\n      <span\n        class=\"po-table-list-manager-item-text\"\n        [class.po-table-list-manager-item-text-aa]=\"componentsSize === 'small'\"\n      >\n        {{ option.label }}\n      </span>\n    </div>\n\n    <div class=\"po-table-list-manager-item-buttons\">\n      @if (!hideActionFixedColumns) {\n        <po-button\n          [p-icon]=\"isFixed(option) ? 'ICON_PUSH_PIN_SLASH' : 'ICON_PUSH_PIN'\"\n          (p-click)=\"emitFixed(option)\"\n          [p-disabled]=\"!option.visible || checksIfHasFiveFixed(option)\"\n          [p-size]=\"componentsSize\"\n        >\n        </po-button>\n      }\n\n      <po-button\n        [p-tooltip]=\"literals.up\"\n        p-tooltip-position=\"left\"\n        p-icon=\"ICON_ARROW_UP\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'up') || isFixed(option)\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"emitChangePosition(option, 'up')\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.down\"\n        p-tooltip-position=\"top\"\n        p-icon=\"ICON_ARROW_DOWN\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'down') || isFixed(option)\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"emitChangePosition(option, 'down')\"\n      >\n      </po-button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoSwitchComponent, selector: "po-switch", inputs: ["p-value", "p-format-model", "p-hide-label-status", "p-label-position", "p-label-off", "p-label-on", "p-field-error-message", "p-error-limit", "p-invalid-value", "p-size", "p-helper", "p-label-text-wrap"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if (existedFixedItem()) {\n  <section class=\"po-table-list-manager-section\">\n    <p class=\"po-table-list-manager-title-group-items\">{{ literals.fixedColumns }}</p>\n    @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n      @if (isFixed(option)) {\n        <li\n          class=\"po-table-list-manager-container\"\n          [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n        >\n          <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n        </li>\n      }\n    }\n  </section>\n}\n\n<section class=\"po-table-list-manager-section\">\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.otherColumns }}</p>\n  @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n    @if (!isFixed(option)) {\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\n        @if (!isFixed(option)) {\n          <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n        }\n      </li>\n    }\n  }\n</section>\n\n<ng-template #listItemsManagerDefault let-option>\n  <div class=\"po-table-list-manager-item\">\n    <div class=\"po-table-list-manager-item-switch\">\n      <po-switch\n        name=\"switch\"\n        (p-change)=\"clickSwitch(option)\"\n        (keydown)=\"onKeyDown($event, option)\"\n        [p-disabled]=\"option.disabled || disabled || isFixed(option)\"\n        [p-value]=\"checkedOptions[option.value]\"\n        [p-hide-label-status]=\"true\"\n        [p-size]=\"componentsSize\"\n      >\n      </po-switch>\n      <span\n        class=\"po-table-list-manager-item-text\"\n        [class.po-table-list-manager-item-text-aa]=\"componentsSize === 'small'\"\n      >\n        {{ option.label }}\n      </span>\n    </div>\n\n    <div class=\"po-table-list-manager-item-buttons\">\n      @if (!hideActionFixedColumns) {\n        <po-button\n          [p-icon]=\"isFixed(option) ? 'ICON_PUSH_PIN_SLASH' : 'ICON_PUSH_PIN'\"\n          (p-click)=\"emitFixed(option)\"\n          [p-disabled]=\"!option.visible || checksIfHasFiveFixed(option)\"\n          [p-size]=\"componentsSize\"\n        >\n        </po-button>\n      }\n\n      <po-button\n        [p-tooltip]=\"literals.up\"\n        p-tooltip-position=\"left\"\n        p-icon=\"ICON_ARROW_UP\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'up') || isFixed(option)\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"emitChangePosition(option, 'up')\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.down\"\n        p-tooltip-position=\"top\"\n        p-icon=\"ICON_ARROW_DOWN\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'down') || isFixed(option)\"\n        [p-size]=\"componentsSize\"\n        (p-click)=\"emitChangePosition(option, 'down')\"\n      >\n      </po-button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoSwitchComponent, selector: "po-switch", inputs: ["p-value", "p-format-model", "p-hide-label-status", "p-label-position", "p-label-off", "p-label-on", "p-loading", "p-field-error-message", "p-error-limit", "p-invalid-value", "p-size", "p-helper", "p-label-text-wrap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTableListManagerComponent, decorators: [{
             type: Component,
@@ -22667,24 +22733,6 @@ var PoTableColumnSortType;
     PoTableColumnSortType["Descending"] = "descending";
 })(PoTableColumnSortType || (PoTableColumnSortType = {}));
 
-/**
- * @usedBy PoTableComponent, PoLookupComponent, PoPageDynamicTableComponent
- *
- * @description
- * Tipos de espaçamento interno (padding) das células (**p-spacing**) do po-table.
- */
-var PoTableColumnSpacing;
-(function (PoTableColumnSpacing) {
-    /** Espaçamento extra pequeno: 0.25rem (vertical) x 0.5rem (horizontal). */
-    PoTableColumnSpacing["ExtraSmall"] = "extraSmall";
-    /** Espaçamento pequeno: 0.5rem (vertical) x 1rem (horizontal). */
-    PoTableColumnSpacing["Small"] = "small";
-    /** Espaçamento médio: 0.75rem (vertical) x 1rem (horizontal). */
-    PoTableColumnSpacing["Medium"] = "medium";
-    /** Espaçamento grande: 1rem (vertical) x 1rem (horizontal). */
-    PoTableColumnSpacing["Large"] = "large";
-})(PoTableColumnSpacing || (PoTableColumnSpacing = {}));
-
 class PoTableService {
     http;
     headers = new HttpHeaders({
@@ -24555,6 +24603,8 @@ class PoSearchBaseComponent {
     _filterSelect;
     _size = undefined;
     _keysLabel = [];
+    _disabled = false;
+    _loading = false;
     /**
      * @optional
      *
@@ -24583,7 +24633,34 @@ class PoSearchBaseComponent {
      *
      * @default `false`
      */
-    disabled;
+    set disabled(disabled) {
+        this._disabled = convertToBoolean(disabled);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = convertToBoolean(value);
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        if (this.type === 'locate') {
+            return this.disabled;
+        }
+        return this.disabled || this.loading;
+    }
     /**
      * @description
      *
@@ -24939,8 +25016,12 @@ class PoSearchBaseComponent {
         const _values = Array.isArray(values) ? values : Array.of(values);
         return _values.map(value => (typeof value === 'object' ? value : { label: value, value }));
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        return mapInputSizeToLoadingIcon(size);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSearchBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoSearchBaseComponent, isStandalone: true, inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], disabled: ["p-disabled", "disabled", convertToBoolean], filterKeys: ["p-filter-keys", "filterKeys"], filterSelect: ["p-filter-select", "filterSelect"], filterType: ["p-filter-type", "filterType"], icon: ["p-icon", "icon"], id: ["p-id", "id"], items: ["p-items", "items"], literals: ["p-literals", "literals"], locateSummary: ["p-locate-summary", "locateSummary"], name: "name", noAutocomplete: ["p-no-autocomplete", "noAutocomplete", convertToBoolean], type: ["p-search-type", "type"], showListbox: ["p-show-listbox", "showListbox", convertToBoolean], size: ["p-size", "size"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { blur: "p-blur", changeModel: "p-change-model", filter: "p-filter", filteredItemsChange: "p-filtered-items-change", focusEvent: "p-focus", keydown: "p-keydown", listboxOnClick: "p-listbox-onclick", locateNext: "p-locate-next", locatePrevious: "p-locate-previous", footerAction: "p-footer-action-listbox" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoSearchBaseComponent, isStandalone: true, inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], disabled: ["p-disabled", "disabled"], loading: ["p-loading", "loading"], filterKeys: ["p-filter-keys", "filterKeys"], filterSelect: ["p-filter-select", "filterSelect"], filterType: ["p-filter-type", "filterType"], icon: ["p-icon", "icon"], id: ["p-id", "id"], items: ["p-items", "items"], literals: ["p-literals", "literals"], locateSummary: ["p-locate-summary", "locateSummary"], name: "name", noAutocomplete: ["p-no-autocomplete", "noAutocomplete", convertToBoolean], type: ["p-search-type", "type"], showListbox: ["p-show-listbox", "showListbox", convertToBoolean], size: ["p-size", "size"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { blur: "p-blur", changeModel: "p-change-model", filter: "p-filter", filteredItemsChange: "p-filtered-items-change", focusEvent: "p-focus", keydown: "p-keydown", listboxOnClick: "p-listbox-onclick", locateNext: "p-locate-next", locatePrevious: "p-locate-previous", footerAction: "p-footer-action-listbox" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSearchBaseComponent, decorators: [{
             type: Directive
@@ -24949,7 +25030,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['p-aria-label']
             }], disabled: [{
                 type: Input,
-                args: [{ alias: 'p-disabled', transform: convertToBoolean }]
+                args: ['p-disabled']
+            }], loading: [{
+                type: Input,
+                args: ['p-loading']
             }], filterKeys: [{
                 type: Input,
                 args: ['p-filter-keys']
@@ -25528,11 +25612,11 @@ class PoSearchComponent extends PoSearchBaseComponent {
         this.placeholderListbox = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoSearchComponent, isStandalone: false, selector: "po-search", providers: [PoControlPositionService], viewQueries: [{ propertyName: "locateCounter", first: true, predicate: ["locateCounter"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListboxContainerElement", first: true, predicate: ["poListboxContainerElement"], descendants: true, read: ElementRef }, { propertyName: "poListboxElement", first: true, predicate: ["poListboxElement"], descendants: true, read: ElementRef }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoSearchComponent, isStandalone: false, selector: "po-search", providers: [PoControlPositionService], viewQueries: [{ propertyName: "locateCounter", first: true, predicate: ["locateCounter"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListboxContainerElement", first: true, predicate: ["poListboxContainerElement"], descendants: true, read: ElementRef }, { propertyName: "poListboxElement", first: true, predicate: ["poListboxElement"], descendants: true, read: ElementRef }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-loading]=\"loading && type !== 'locate'\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"isDisabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"isDisabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    <div [id]=\"idSearchButtonClean\">\n      @if (loading && type !== 'locate') {\n        <div class=\"po-search-button po-search-button-loading\">\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      } @else if (!!poSearchInput.value) {\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      }\n    </div>\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"isDisabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-search', providers: [PoControlPositionService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-search', providers: [PoControlPositionService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-loading]=\"loading && type !== 'locate'\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"isDisabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"isDisabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    <div [id]=\"idSearchButtonClean\">\n      @if (loading && type !== 'locate') {\n        <div class=\"po-search-button po-search-button-loading\">\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      } @else if (!!poSearchInput.value) {\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      }\n    </div>\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"isDisabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { locateCounter: [{
                 type: ViewChild,
                 args: ['locateCounter', { static: false }]
@@ -26053,7 +26137,7 @@ class PoTableComponent extends PoTableBaseComponent {
     popupTarget;
     tableOpacity = 0;
     tooltipText;
-    itemSize = 48;
+    itemSize;
     lastVisibleColumnsSelected;
     tagColor;
     idRadio;
@@ -26079,7 +26163,6 @@ class PoTableComponent extends PoTableBaseComponent {
     _columnManagerTargetFixed;
     differ;
     footerHeight;
-    headerHeight;
     timeoutResize;
     visibleElement = false;
     scrollEvent$;
@@ -26534,8 +26617,9 @@ class PoTableComponent extends PoTableBaseComponent {
         return this.columns.some(item => item.fixed === true);
     }
     calculateHeightTableContainer(height) {
-        const value = parseFloat(height);
-        this.heightTableContainer = value ? value - this.getHeightTableFooter() : undefined;
+        this.itemSize =
+            PO_TABLE_ROW_HEIGHT_BY_SPACING[this.spacing] ?? PO_TABLE_ROW_HEIGHT_BY_SPACING[PoTableColumnSpacing.Medium];
+        this.heightTableContainer = height ? height - this.getHeightTableFooter() : undefined;
         this.heightTableVirtual = this.heightTableContainer ? this.heightTableContainer - this.itemSize : undefined;
         this.setTableOpacity(1);
         this.changeDetector.detectChanges();
@@ -26819,15 +26903,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 class PoSwitchModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: PoSwitchModule, declarations: [PoSwitchComponent], imports: [CommonModule, FormsModule, PoFieldContainerModule, PoLabelModule, PoIconModule, PoHelperModule], exports: [PoSwitchComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSwitchModule, imports: [CommonModule, FormsModule, PoFieldContainerModule, PoLabelModule, PoIconModule, PoHelperModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: PoSwitchModule, declarations: [PoSwitchComponent], imports: [CommonModule,
+            FormsModule,
+            PoFieldContainerModule,
+            PoLabelModule,
+            PoIconModule,
+            PoHelperModule,
+            PoLoadingModule], exports: [PoSwitchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSwitchModule, imports: [CommonModule,
+            FormsModule,
+            PoFieldContainerModule,
+            PoLabelModule,
+            PoIconModule,
+            PoHelperModule,
+            PoLoadingModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PoSwitchComponent],
                     exports: [PoSwitchComponent],
-                    imports: [CommonModule, FormsModule, PoFieldContainerModule, PoLabelModule, PoIconModule, PoHelperModule]
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        PoFieldContainerModule,
+                        PoLabelModule,
+                        PoIconModule,
+                        PoHelperModule,
+                        PoLoadingModule
+                    ]
                 }]
         }] });
 
@@ -27325,7 +27429,6 @@ class PoComboBaseComponent {
     visibleOptions = [];
     page = 1;
     pageSize = 10;
-    loading = false;
     displayAdditionalHelp = false;
     dynamicLabel = 'label';
     dynamicValue = 'value';
@@ -27344,6 +27447,7 @@ class PoComboBaseComponent {
     _filterMode = PoComboFilterMode.startsWith;
     _filterParams;
     _literals;
+    _loading = false;
     _options = [];
     _placeholder = '';
     _required = false;
@@ -27528,6 +27632,24 @@ class PoComboBaseComponent {
     get disabled() {
         return this._disabled;
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = convertToBoolean(value);
+        this.changeDetector?.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this._disabled || this._loading;
+    }
     /** Indica que a lista definida na propriedade p-options será ordenada pela descrição. */
     set sort(sort) {
         this._sort = convertToBoolean(sort);
@@ -27755,6 +27877,10 @@ class PoComboBaseComponent {
         }
         return value === inputValue;
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        return mapInputSizeToLoadingIcon(size);
+    }
     searchForLabel(search, options, filterMode) {
         if (search && options && options.length) {
             const newOptions = [];
@@ -28086,7 +28212,7 @@ class PoComboBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoComboBaseComponent, deps: [{ token: PoLanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoComboBaseComponent, 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, filterService: { classPropertyName: "filterService", publicName: "p-filter-service", isSignal: false, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "p-infinite-scroll", isSignal: false, isRequired: false, transformFunction: null }, infiniteScrollDistance: { classPropertyName: "infiniteScrollDistance", publicName: "p-infinite-scroll-distance", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "p-icon", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, clean: { classPropertyName: "clean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, emitObjectValue: { classPropertyName: "emitObjectValue", publicName: "p-emit-object-value", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabledTabFilter: { classPropertyName: "disabledTabFilter", publicName: "p-disabled-tab-filter", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, removeInitialFilter: { classPropertyName: "removeInitialFilter", publicName: "p-remove-initial-filter", isSignal: false, isRequired: false, transformFunction: null }, 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 }, 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 }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "p-debounce-time", isSignal: false, isRequired: false, transformFunction: null }, disabledInitFilter: { classPropertyName: "disabledInitFilter", publicName: "p-disabled-init-filter", 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 }, filterMinlength: { classPropertyName: "filterMinlength", publicName: "p-filter-minlength", 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 }, changeOnEnter: { classPropertyName: "changeOnEnter", publicName: "p-change-on-enter", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "p-sort", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "p-options", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "p-filter-mode", isSignal: false, isRequired: false, transformFunction: null }, filterParams: { classPropertyName: "filterParams", publicName: "p-filter-params", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "p-cache", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean } }, outputs: { blur: "p-blur", additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown", ngModelChange: "ngModelChange", inputChange: "p-input-change" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoComboBaseComponent, 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, filterService: { classPropertyName: "filterService", publicName: "p-filter-service", isSignal: false, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "p-infinite-scroll", isSignal: false, isRequired: false, transformFunction: null }, infiniteScrollDistance: { classPropertyName: "infiniteScrollDistance", publicName: "p-infinite-scroll-distance", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "p-icon", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, clean: { classPropertyName: "clean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, emitObjectValue: { classPropertyName: "emitObjectValue", publicName: "p-emit-object-value", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabledTabFilter: { classPropertyName: "disabledTabFilter", publicName: "p-disabled-tab-filter", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, removeInitialFilter: { classPropertyName: "removeInitialFilter", publicName: "p-remove-initial-filter", isSignal: false, isRequired: false, transformFunction: null }, 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 }, 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 }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "p-debounce-time", isSignal: false, isRequired: false, transformFunction: null }, disabledInitFilter: { classPropertyName: "disabledInitFilter", publicName: "p-disabled-init-filter", 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 }, filterMinlength: { classPropertyName: "filterMinlength", publicName: "p-filter-minlength", 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 }, changeOnEnter: { classPropertyName: "changeOnEnter", publicName: "p-change-on-enter", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "p-sort", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "p-options", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "p-filter-mode", isSignal: false, isRequired: false, transformFunction: null }, filterParams: { classPropertyName: "filterParams", publicName: "p-filter-params", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "p-cache", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean } }, outputs: { blur: "p-blur", additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown", ngModelChange: "ngModelChange", inputChange: "p-input-change" }, host: { properties: { "attr.p-loading": "this.loading" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoComboBaseComponent, decorators: [{
             type: Directive
@@ -28197,6 +28323,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], disabled: [{
                 type: Input,
                 args: ['p-disabled']
+            }], loading: [{
+                type: HostBinding,
+                args: ['attr.p-loading']
+            }, {
+                type: Input,
+                args: ['p-loading']
             }], sort: [{
                 type: Input,
                 args: ['p-sort']
@@ -28965,7 +29097,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-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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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 });
+        ], 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]=\"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\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]=\"isDisabled\"\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]=\"!isDisabled\"\n              [attr.data-inactive-component]=\"isDisabled\"\n              [attr.name]=\"name\"\n              [disabled]=\"isDisabled\"\n              [id]=\"id\"\n              [placeholder]=\"isDisabled ? '' : placeholder\"\n              [required]=\"required\"\n              [attr.data-append-in-body]=\"appendBox\"\n              [attr.p-size]=\"size\"\n              (click)=\"!isDisabled && 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 (loading) {\n                <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              } @else {\n                @if (!loading && 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]=\"isDisabled\"\n                [class.po-field-icon-disabled-aa]=\"isDisabled && size === 'small'\"\n                (click)=\"!isDisabled && 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]=\"!isDisabled\"\n                  [class.po-field-icon-aa]=\"size === 'small'\"\n                  [class.po-combo-default-border]=\"!isDisabled && inp.value\"\n                  [class.po-combo-background-arrow-up]=\"!isDisabled && 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]=\"isDisabled\"\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]=\"isDisabled\"\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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoComboComponent, decorators: [{
             type: Component,
@@ -28982,7 +29114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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-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" }]
+                    ], 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]=\"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\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]=\"isDisabled\"\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]=\"!isDisabled\"\n              [attr.data-inactive-component]=\"isDisabled\"\n              [attr.name]=\"name\"\n              [disabled]=\"isDisabled\"\n              [id]=\"id\"\n              [placeholder]=\"isDisabled ? '' : placeholder\"\n              [required]=\"required\"\n              [attr.data-append-in-body]=\"appendBox\"\n              [attr.p-size]=\"size\"\n              (click)=\"!isDisabled && 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 (loading) {\n                <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              } @else {\n                @if (!loading && 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]=\"isDisabled\"\n                [class.po-field-icon-disabled-aa]=\"isDisabled && size === 'small'\"\n                (click)=\"!isDisabled && 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]=\"!isDisabled\"\n                  [class.po-field-icon-aa]=\"size === 'small'\"\n                  [class.po-combo-default-border]=\"!isDisabled && inp.value\"\n                  [class.po-combo-background-arrow-up]=\"!isDisabled && 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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-append-in-body]=\"appendBox\"\n    >\n    </po-helper>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { comboOptionTemplate: [{
                 type: ContentChild,
                 args: [PoComboOptionTemplateDirective, { static: true }]
@@ -30477,21 +30609,6 @@ class PoInputBaseComponent {
      * @default `false`
      */
     errorLimit = false;
-    /**
-     * @optional
-     *
-     * @description
-     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
-     *
-     * @default `false`
-     */
-    set loading(value) {
-        this._loading = convertToBoolean(value);
-        this.cd?.markForCheck();
-    }
-    get loading() {
-        return this._loading;
-    }
     /**
      * @optional
      *
@@ -30672,6 +30789,24 @@ class PoInputBaseComponent {
         this.disabled = disabled === '' ? true : convertToBoolean(disabled);
         this.validateModel();
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = convertToBoolean(value);
+        this.cd?.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
     /** Indica que o campo será somente leitura. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     readonly = false;
@@ -31011,11 +31146,7 @@ class PoInputBaseComponent {
     }
     //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
     mapSizeToIcon(size) {
-        const sizeMap = {
-            small: 'xs',
-            medium: 'sm'
-        };
-        return sizeMap[size] || 'sm';
+        return mapInputSizeToLoadingIcon(size);
     }
     // utilizado para validar o pattern na inicializacao, fazendo dessa forma o campo fica sujo (dirty).
     validatePatternOnWriteValue(value) {
@@ -31027,7 +31158,7 @@ class PoInputBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoInputBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoInputBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, icon: { classPropertyName: "icon", publicName: "p-icon", isSignal: false, isRequired: false, transformFunction: null }, emitAllChanges: { classPropertyName: "emitAllChanges", publicName: "p-emit-all-changes", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, errorAsyncProperties: { classPropertyName: "errorAsyncProperties", publicName: "p-error-async-properties", isSignal: false, isRequired: false, transformFunction: null }, errorPattern: { classPropertyName: "errorPattern", publicName: "p-error-pattern", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, showErrorMessageRequired: { classPropertyName: "showErrorMessageRequired", publicName: "p-required-field-error-message", isSignal: false, isRequired: false, transformFunction: null }, upperCase: { classPropertyName: "upperCase", publicName: "p-upper-case", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, maskNoLengthValidation: { classPropertyName: "maskNoLengthValidation", publicName: "p-mask-no-length-validation", isSignal: false, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, setDisabled: { classPropertyName: "setDisabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, setReadonly: { classPropertyName: "setReadonly", publicName: "p-readonly", isSignal: false, isRequired: false, transformFunction: null }, setRequired: { classPropertyName: "setRequired", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, setClean: { classPropertyName: "setClean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: null }, setPattern: { classPropertyName: "setPattern", publicName: "p-pattern", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "p-maxlength", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "p-minlength", isSignal: false, isRequired: false, transformFunction: null }, setMask: { classPropertyName: "setMask", publicName: "p-mask", isSignal: false, isRequired: false, transformFunction: null }, setMaskFormatModel: { classPropertyName: "setMaskFormatModel", publicName: "p-mask-format-model", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", blur: "p-blur", enter: "p-enter", change: "p-change", changeModel: "p-change-model", keydown: "p-keydown" }, viewQueries: [{ propertyName: "fieldContainer", first: true, predicate: ["fieldContainer"], descendants: true, read: PoFieldContainerComponent }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoInputBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, icon: { classPropertyName: "icon", publicName: "p-icon", isSignal: false, isRequired: false, transformFunction: null }, emitAllChanges: { classPropertyName: "emitAllChanges", publicName: "p-emit-all-changes", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, errorAsyncProperties: { classPropertyName: "errorAsyncProperties", publicName: "p-error-async-properties", isSignal: false, isRequired: false, transformFunction: null }, errorPattern: { classPropertyName: "errorPattern", publicName: "p-error-pattern", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, showErrorMessageRequired: { classPropertyName: "showErrorMessageRequired", publicName: "p-required-field-error-message", isSignal: false, isRequired: false, transformFunction: null }, upperCase: { classPropertyName: "upperCase", publicName: "p-upper-case", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, maskNoLengthValidation: { classPropertyName: "maskNoLengthValidation", publicName: "p-mask-no-length-validation", isSignal: false, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, setDisabled: { classPropertyName: "setDisabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, setReadonly: { classPropertyName: "setReadonly", publicName: "p-readonly", isSignal: false, isRequired: false, transformFunction: null }, setRequired: { classPropertyName: "setRequired", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, setClean: { classPropertyName: "setClean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: null }, setPattern: { classPropertyName: "setPattern", publicName: "p-pattern", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "p-maxlength", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "p-minlength", isSignal: false, isRequired: false, transformFunction: null }, setMask: { classPropertyName: "setMask", publicName: "p-mask", isSignal: false, isRequired: false, transformFunction: null }, setMaskFormatModel: { classPropertyName: "setMaskFormatModel", publicName: "p-mask-format-model", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", blur: "p-blur", enter: "p-enter", change: "p-change", changeModel: "p-change-model", keydown: "p-keydown" }, host: { properties: { "attr.p-loading": "this.loading" } }, viewQueries: [{ propertyName: "fieldContainer", first: true, predicate: ["fieldContainer"], descendants: true, read: PoFieldContainerComponent }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoInputBaseComponent, decorators: [{
             type: Directive
@@ -31072,9 +31203,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], errorLimit: [{
                 type: Input,
                 args: ['p-error-limit']
-            }], loading: [{
-                type: Input,
-                args: ['p-loading']
             }], optional: [{
                 type: Input,
                 args: ['p-optional']
@@ -31114,6 +31242,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], setDisabled: [{
                 type: Input,
                 args: ['p-disabled']
+            }], loading: [{
+                type: HostBinding,
+                args: ['attr.p-loading']
+            }, {
+                type: Input,
+                args: ['p-loading']
             }], setReadonly: [{
                 type: Input,
                 args: ['p-readonly']
@@ -31787,7 +31921,7 @@ class PoDecimalComponent extends PoInputBaseComponent {
                 useExisting: forwardRef(() => PoDecimalComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': (clean || loading) && size !== 'small',\n        'po-input-icon-right-aa': (clean || loading) && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { 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]=\"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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': (clean || loading) && size !== 'small',\n        'po-input-icon-right-aa': (clean || loading) && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDecimalComponent, decorators: [{
             type: Component,
@@ -31802,7 +31936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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 || loading) && size !== 'small',\n        'po-input-icon-right-aa': (clean || loading) && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], 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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [ngClass]=\"{\n        'po-input-icon-left': icon && size !== 'small',\n        'po-input-icon-left-aa': icon && size === 'small',\n        'po-input-icon-right': (clean || loading) && size !== 'small',\n        'po-input-icon-right-aa': (clean || loading) && size === 'small'\n      }\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\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 }]
@@ -32169,11 +32303,11 @@ class PoEmailComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoEmailComponent, isStandalone: false, selector: "po-email", providers: providers$4, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoEmailComponent, isStandalone: false, selector: "po-email", providers: providers$4, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoEmailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+            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]=\"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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\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: () => [] });
 
 /**
@@ -32225,7 +32359,7 @@ class PoInputComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inp", first: true, predicate: ["inp"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { 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]=\"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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoInputComponent, decorators: [{
             type: Component,
@@ -32240,7 +32374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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 || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\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 }]
@@ -32313,11 +32447,11 @@ class PoLoginComponent extends PoInputGeneric {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLoginComponent, isStandalone: false, selector: "po-login", inputs: { noAutocomplete: ["p-no-autocomplete", "noAutocomplete"] }, providers: providers$3, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLoginComponent, isStandalone: false, selector: "po-login", inputs: { noAutocomplete: ["p-no-autocomplete", "noAutocomplete"] }, providers: providers$3, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"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 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]=\"isDisabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_USER\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+            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]=\"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 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]=\"isDisabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input {{ size === 'small' ? 'po-input-aa' : '' }} po-input-icon-left\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\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']
@@ -32975,15 +33109,12 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
         this.createDynamicForm();
     }
     setTableHeight() {
-        const rowHeightMap = {
-            [PoTableColumnSpacing.ExtraSmall]: 32,
-            [PoTableColumnSpacing.Small]: 40,
-            [PoTableColumnSpacing.Medium]: 48,
-            [PoTableColumnSpacing.Large]: 56
-        };
-        const extraHeight = this.infiniteScroll ? 35 : 135;
-        const currentRowHeight = rowHeightMap[this.spacing || PoTableColumnSpacing.Medium];
-        this.tableHeight = currentRowHeight * 10 + extraHeight;
+        const visibleRows = 10;
+        const headerHeight = this.spacing === PoTableColumnSpacing.ExtraSmall ? 32 : 48;
+        const footerHeight = this.size === PoFieldSize.Small ? 48 : 60;
+        const currentRowHeight = PO_TABLE_ROW_HEIGHT_BY_SPACING[this.spacing];
+        const extraHeight = this.infiniteScroll ? headerHeight : headerHeight + footerHeight;
+        this.tableHeight = currentRowHeight * visibleRows + extraHeight;
     }
     setupModalAdvancedFilter() {
         this.dynamicFormValue = {};
@@ -34410,6 +34541,7 @@ class PoLookupBaseComponent {
     _disabled = false;
     _fieldLabel;
     _filterService;
+    _loading = false;
     _noAutocomplete;
     _placeholder = '';
     _required = false;
@@ -34537,6 +34669,23 @@ class PoLookupBaseComponent {
     get disabled() {
         return this._disabled;
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = convertToBoolean(value);
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
     constructor(defaultService, injector, poLookupModalService, languageService) {
         this.defaultService = defaultService;
         this.injector = injector;
@@ -34615,6 +34764,10 @@ class PoLookupBaseComponent {
             }
         });
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        return mapInputSizeToLoadingIcon(size);
+    }
     searchById(value) {
         let checkedValue = value;
         if (typeof checkedValue === 'string') {
@@ -34747,7 +34900,7 @@ class PoLookupBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", 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: "21.0.9", 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" }, host: { properties: { "attr.p-disabled": "this.disabled" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", 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 }, loading: { classPropertyName: "loading", publicName: "p-loading", 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" }, host: { properties: { "attr.p-disabled": "this.disabled", "attr.p-loading": "this.loading" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLookupBaseComponent, decorators: [{
             type: Directive
@@ -34876,6 +35029,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }, {
                 type: Input,
                 args: ['p-disabled']
+            }], loading: [{
+                type: HostBinding,
+                args: ['attr.p-loading']
+            }, {
+                type: Input,
+                args: ['p-loading']
             }] } });
 
 /* istanbul ignore next */
@@ -35335,11 +35494,11 @@ class PoLookupComponent extends PoLookupBaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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]=\"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      @if (!disclaimers.length) {\n        <div\n          class=\"po-field-container-content po-lookup\"\n          [class.po-lookup-disabled]=\"disabled\"\n          [class.po-lookup-loading]=\"loading\"\n          [attr.p-size]=\"size\"\n        >\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]=\"isDisabled\"\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 (loading) {\n                <div class=\"po-lookup-button po-lookup-button-loading\">\n                  <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n                </div>\n              } @else {\n                @if (clean && !isDisabled && !!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              }\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]=\"isDisabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!isDisabled\"\n                  [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"po-field-container-content po-lookup\"\n          [class.po-lookup-disabled]=\"disabled\"\n          [class.po-lookup-loading]=\"loading\"\n          [attr.p-size]=\"size\"\n        >\n          <div class=\"po-search-container-wrapper\">\n            <div\n              #inp\n              [tabindex]=\"isDisabled ? -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 || loading\"\n              [class.po-lookup-input-padding-button-clean-aa]=\"(clean || loading) && size === 'small'\"\n              [class.po-lookup-input-disabled]=\"isDisabled\"\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 === '' || isDisabled\"\n                  [class.po-clickable]=\"disclaimer.value === '' && !isDisabled\"\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 (loading) {\n                <div class=\"po-lookup-button po-lookup-button-loading\">\n                  <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n                </div>\n              } @else {\n                @if (clean && !isDisabled && !!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              }\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]=\"isDisabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!isDisabled\"\n                  [class.po-field-icon-aa]=\"!isDisabled && 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]=\"isDisabled\"\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]=\"isDisabled\"\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: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: 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              [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" }]
+            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]=\"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      @if (!disclaimers.length) {\n        <div\n          class=\"po-field-container-content po-lookup\"\n          [class.po-lookup-disabled]=\"disabled\"\n          [class.po-lookup-loading]=\"loading\"\n          [attr.p-size]=\"size\"\n        >\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]=\"isDisabled\"\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 (loading) {\n                <div class=\"po-lookup-button po-lookup-button-loading\">\n                  <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n                </div>\n              } @else {\n                @if (clean && !isDisabled && !!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              }\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]=\"isDisabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!isDisabled\"\n                  [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n                ></po-icon>\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"po-field-container-content po-lookup\"\n          [class.po-lookup-disabled]=\"disabled\"\n          [class.po-lookup-loading]=\"loading\"\n          [attr.p-size]=\"size\"\n        >\n          <div class=\"po-search-container-wrapper\">\n            <div\n              #inp\n              [tabindex]=\"isDisabled ? -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 || loading\"\n              [class.po-lookup-input-padding-button-clean-aa]=\"(clean || loading) && size === 'small'\"\n              [class.po-lookup-input-disabled]=\"isDisabled\"\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 === '' || isDisabled\"\n                  [class.po-clickable]=\"disclaimer.value === '' && !isDisabled\"\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 (loading) {\n                <div class=\"po-lookup-button po-lookup-button-loading\">\n                  <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n                </div>\n              } @else {\n                @if (clean && !isDisabled && !!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              }\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]=\"isDisabled\"\n                [class.po-lookup-button-aa]=\"size === 'small'\"\n                [ariaLabel]=\"literals.search\"\n                (p-change-event)=\"openLookup()\"\n                (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n                (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              >\n                <po-icon\n                  p-icon=\"ICON_SEARCH\"\n                  [class.po-field-icon]=\"!isDisabled\"\n                  [class.po-field-icon-aa]=\"!isDisabled && 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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-append-in-body]=\"appendBox\"\n    ></po-helper>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { helperEl: [{
                 type: ViewChild,
                 args: ['helperEl', { read: PoHelperComponent, static: false }]
@@ -35710,6 +35869,7 @@ class PoMultiselectBaseComponent {
     _filterMode = PoMultiselectFilterMode.startsWith;
     _hideSearch = false;
     _literals;
+    _loading = false;
     _options;
     _required = false;
     _sort = false;
@@ -35909,6 +36069,24 @@ class PoMultiselectBaseComponent {
     get disabled() {
         return this._disabled;
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = convertToBoolean(value);
+        this.cd?.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
     /**
      * @optional
      *
@@ -36115,6 +36293,10 @@ class PoMultiselectBaseComponent {
         const index = this.options.findIndex(option => option[this.fieldValue] === value);
         return this.options[index].label;
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        return mapInputSizeToLoadingIcon(size);
+    }
     searchByLabel(search, options, filterMode) {
         if (search && options && options.length) {
             const newOptions = [];
@@ -36255,7 +36437,7 @@ class PoMultiselectBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoMultiselectBaseComponent, deps: [{ token: PoLanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", 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 }, loading: { classPropertyName: "loading", publicName: "p-loading", 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" }, host: { properties: { "attr.p-loading": "this.loading" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoMultiselectBaseComponent, decorators: [{
             type: Directive
@@ -36342,6 +36524,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], disabled: [{
                 type: Input,
                 args: ['p-disabled']
+            }], loading: [{
+                type: HostBinding,
+                args: ['attr.p-loading']
+            }, {
+                type: Input,
+                args: ['p-loading']
             }], hideSearch: [{
                 type: Input,
                 args: ['p-hide-search']
@@ -37054,8 +37242,8 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     wasClickedOnToggle(event) {
         if (this.dropdownOpen &&
             !this.inputElement.nativeElement.contains(event.target) &&
-            !this.iconElement.nativeElement.contains(event.target) &&
-            !this.dropdownElement.nativeElement.contains(event.target)) {
+            !this.iconElement?.nativeElement?.contains(event.target) &&
+            !this.dropdownElement?.nativeElement?.contains(event.target)) {
             this.controlDropdownVisibility(false);
         }
     }
@@ -37231,11 +37419,11 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.adjustContainerPosition();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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]=\"isDisabled\"\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]=\"isDisabled ? -1 : 0\"\n            [attr.disabled]=\"isDisabled\"\n            [attr.aria-label]=\"label\"\n            [attr.data-focused-element]=\"!isDisabled\"\n            [attr.data-inactive-component]=\"isDisabled\"\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]=\"isDisabled\"\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)=\"!isDisabled && toggleDropdownVisibility()\"\n            (blur)=\"onBlur($event)\"\n          >\n            @if (!disabled && !loading && !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]=\"isDisabled\"\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              @if (loading) {\n                <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              } @else {\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              }\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]=\"isDisabled\"\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]=\"isDisabled\"\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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: 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: "21.0.9", 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            [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" }]
+            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]=\"isDisabled\"\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]=\"isDisabled ? -1 : 0\"\n            [attr.disabled]=\"isDisabled\"\n            [attr.aria-label]=\"label\"\n            [attr.data-focused-element]=\"!isDisabled\"\n            [attr.data-inactive-component]=\"isDisabled\"\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]=\"isDisabled\"\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)=\"!isDisabled && toggleDropdownVisibility()\"\n            (blur)=\"onBlur($event)\"\n          >\n            @if (!disabled && !loading && !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]=\"isDisabled\"\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              @if (loading) {\n                <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              } @else {\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              }\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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-append-in-body]=\"appendBox\"\n    >\n    </po-helper>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { multiselectOptionTemplate: [{
                 type: ContentChild,
                 args: [PoMultiselectOptionTemplateDirective, { static: true }]
@@ -37507,7 +37695,7 @@ class PoNumberComponent extends PoNumberBaseComponent {
                 useExisting: forwardRef(() => PoNumberComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { 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]=\"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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"isDisabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoNumberComponent, decorators: [{
             type: Component,
@@ -37522,7 +37710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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 || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"po-icon-input\"\n          [p-default-value]=\"null\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPatternMessage()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], 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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"isDisabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\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']
@@ -37624,7 +37812,7 @@ class PoPasswordComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoPasswordComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    <div class=\"po-field-icon-container-left\">\n      <po-icon\n        p-icon=\"ICON_LOCK\"\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"!loading && clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"!loading && clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || loading || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"> </po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!loading && !hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { 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]=\"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 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]=\"isDisabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"!loading && clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"!loading && clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || loading || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"> </po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!loading && !hidePasswordPeek && !isDisabled) {\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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoPasswordComponent, decorators: [{
             type: Component,
@@ -37639,7 +37827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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]=\"!loading && clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"!loading && clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || loading || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"> </po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!loading && !hidePasswordPeek && !disabled) {\n        <po-icon\n          [p-icon]=\"visiblePassword ? 'ICON_EYE' : 'ICON_EYE_OFF'\"\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [ngClass]=\"!visiblePassword ? 'po-field-icon-disabled' : ''\"\n          [class.po-field-icon-disabled-aa]=\"size === 'small'\"\n          (click)=\"showPassword()\"\n        >\n        </po-icon>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-size]=\"size\"\n    >\n    </po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], 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 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]=\"isDisabled\"\n        [class.po-field-icon-aa]=\"size === 'small'\"\n      >\n      </po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"!loading && clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-double-icon-right-aa]=\"!loading && clean && inp.value && !hidePasswordPeek && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading || !hidePasswordPeek\"\n      [class.po-input-icon-right-aa]=\"(clean || loading || !hidePasswordPeek) && size === 'small'\"\n      [class.po-input-icon-left-aa]=\"size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"> </po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !readonly) {\n        <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear($event)\">\n        </po-clean>\n      }\n\n      @if (!loading && !hidePasswordPeek && !isDisabled) {\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]=\"isDisabled\"\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]=\"isDisabled\"\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']
@@ -40854,7 +41042,7 @@ class PoUrlComponent extends PoInputGeneric {
                 useExisting: forwardRef(() => PoUrlComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content po-field-container-input\" [attr.p-size]=\"size\">\n    @if (icon) {\n      <div class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [class.po-field-icon-aa]=\"size === 'small'\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n    }\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { 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]=\"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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoUrlComponent, decorators: [{
             type: Component,
@@ -40869,7 +41057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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 || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !disabled && !readonly) {\n        <po-clean\n          class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [p-element-ref]=\"inputEl\"\n          [p-size]=\"size\"\n          (p-change-event)=\"clear($event)\"\n        >\n        </po-clean>\n      }\n    </div>\n    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n      <po-helper\n        #helperEl\n        class=\"po-field-helper-button\"\n        [p-size]=\"size\"\n        [p-helper]=\"poHelper.helperSettings\"\n        [p-disabled]=\"disabled\"\n        [p-append-in-body]=\"appendBox\"\n      >\n      </po-helper>\n    }\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  #fieldContainer\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 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]=\"isDisabled\"\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]=\"!isDisabled\"\n      [attr.data-inactive-component]=\"isDisabled || readonly\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n      [class.po-input-icon-right]=\"clean || loading\"\n      [class.po-input-icon-right-aa]=\"(clean || loading) && size === 'small'\"\n      [class.po-input-aa]=\"size === 'small'\"\n      [disabled]=\"isDisabled\"\n      [id]=\"id\"\n      [placeholder]=\"isDisabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <div class=\"po-field-icon-container-right\">\n      @if (loading) {\n        <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n      }\n\n      @if (!loading && clean && !isDisabled && !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]=\"isDisabled\"\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]=\"isDisabled\"\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'];
@@ -41828,6 +42016,7 @@ class PoSelectComponent extends PoFieldValidateModel {
     onModelTouched;
     _fieldLabel = PO_SELECT_FIELD_LABEL_DEFAULT;
     _fieldValue = PO_SELECT_FIELD_VALUE_DEFAULT;
+    _loading = false;
     _options;
     _size = undefined;
     /**
@@ -41935,6 +42124,24 @@ class PoSelectComponent extends PoFieldValidateModel {
     get fieldValue() {
         return this._fieldValue;
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = convertToBoolean(value);
+        this.changeDetector?.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
     /**
      * @optional
      *
@@ -42023,6 +42230,10 @@ class PoSelectComponent extends PoFieldValidateModel {
     hasInvalidClass() {
         return (this.el.nativeElement.classList.contains('ng-invalid') && this.el.nativeElement.classList.contains('ng-dirty'));
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        return mapInputSizeToLoadingIcon(size);
+    }
     onBlur(event) {
         this.onModelTouched?.();
         if (event.type === 'blur') {
@@ -42179,7 +42390,7 @@ class PoSelectComponent extends PoFieldValidateModel {
         PoUtils.removeUndefinedAndNullOptions(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoSelectComponent, isStandalone: false, selector: "po-select", inputs: { readonly: { classPropertyName: "readonly", publicName: "p-readonly", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "p-options", 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 }, controlValueWithLabel: { classPropertyName: "controlValueWithLabel", publicName: "p-control-value-with-label", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "p-blur", ngModelChange: "ngModelChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoSelectComponent, isStandalone: false, selector: "po-select", inputs: { readonly: { classPropertyName: "readonly", publicName: "p-readonly", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "p-options", 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 }, controlValueWithLabel: { classPropertyName: "controlValueWithLabel", publicName: "p-control-value-with-label", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, loading: { classPropertyName: "loading", publicName: "p-loading", 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 }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "p-blur", ngModelChange: "ngModelChange" }, host: { properties: { "attr.p-loading": "this.loading" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PoSelectComponent),
@@ -42190,7 +42401,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 po-select-phosphor\"\n      [class.po-select-aa]=\"size === 'small'\"\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$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 });
+        ], 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]=\"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-select-container\">\n      <select\n        #select\n        class=\"po-select po-select-phosphor\"\n        [class.po-select-aa]=\"size === 'small'\"\n        [class.po-select-loading]=\"loading\"\n        [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n        [attr.data-focused-element]=\"!isDisabled\"\n        [attr.data-inactive-component]=\"disabled || readonly || loading\"\n        [attr.name]=\"name\"\n        [disabled]=\"isDisabled\"\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\n      @if (loading) {\n        <div\n          class=\"po-field-icon-container-right\"\n          [class.po-select-loading-with-helper]=\"\n            (!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)\n          \"\n        >\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      }\n\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]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox\"\n        >\n        </po-helper>\n      }\n    </div>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"isDisabled\"\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$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: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoSelectComponent, decorators: [{
             type: Component,
@@ -42205,7 +42416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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 po-select-phosphor\"\n      [class.po-select-aa]=\"size === 'small'\"\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" }]
+                    ], 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-select-container\">\n      <select\n        #select\n        class=\"po-select po-select-phosphor\"\n        [class.po-select-aa]=\"size === 'small'\"\n        [class.po-select-loading]=\"loading\"\n        [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n        [attr.data-focused-element]=\"!isDisabled\"\n        [attr.data-inactive-component]=\"disabled || readonly || loading\"\n        [attr.name]=\"name\"\n        [disabled]=\"isDisabled\"\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\n      @if (loading) {\n        <div\n          class=\"po-field-icon-container-right\"\n          [class.po-select-loading-with-helper]=\"\n            (!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)\n          \"\n        >\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      }\n\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]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox\"\n        >\n        </po-helper>\n      }\n    </div>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"isDisabled\"\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 }]
@@ -42236,6 +42447,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], controlValueWithLabel: [{
                 type: Input,
                 args: [{ alias: 'p-control-value-with-label', transform: convertToBoolean }]
+            }], loading: [{
+                type: HostBinding,
+                args: ['attr.p-loading']
+            }, {
+                type: Input,
+                args: ['p-loading']
             }], size: [{
                 type: Input,
                 args: ['p-size']
@@ -44552,7 +44769,7 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDynamicFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoDynamicFormFieldsComponent, isStandalone: false, selector: "po-dynamic-form-fields", providers: [PoDynamicFormValidationService], viewQueries: [{ propertyName: "components", predicate: ["component"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (visibleFields && visibleFields.length > 0) {\n  <div class=\"po-row\" [class.po-dynamic]=\"hasContainers\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasContainers ? poContentContainer : poContent;\n        context: { $implicit: hasContainers ? containerFields : visibleFields }\n      \"\n    ></ng-container>\n  </div>\n}\n\n<ng-template #poContent let-fields>\n  @for (field of fields; track trackBy($index, field)) {\n    @if (field?.divider?.trim()) {\n      <po-divider class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n    }\n    @if (compareTo(field.control, 'datepicker')) {\n      <po-datepicker\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async]=\"field.errorAsyncFunction\"\n        [p-auto-focus]=\"field.focus\"\n        [p-format]=\"field.format\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-iso-format]=\"field.isoFormat\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-size]=\"field.size || componentsSize\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker>\n    }\n    @if (compareTo(field.control, 'datepickerrange')) {\n      <po-datepicker-range\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker-range>\n    }\n    @if (compareTo(field.control, 'input')) {\n      <po-input\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-mask-format-model]=\"field.maskFormatModel\"\n        [p-mask-no-length-validation]=\"field.maskNoLengthValidation\"\n        [p-mask]=\"field.mask\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-input>\n    }\n    @if (compareTo(field.control, 'number')) {\n      <po-number\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-step]=\"field.step\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-number>\n    }\n    @if (compareTo(field.control, 'decimal')) {\n      <po-decimal\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-decimals-length]=\"field.decimalsLength\"\n        [p-thousand-maxlength]=\"field.thousandMaxlength\"\n        [p-icon]=\"field.icon\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-mask-no-length-validation]=\"field.maskNoLengthValidation\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-decimal>\n    }\n    @if (compareTo(field.control, 'select')) {\n      <po-select\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-select>\n    }\n    @if (compareTo(field.control, 'radioGroup')) {\n      <po-radio-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-radio-group>\n    }\n    @if (compareTo(field.control, 'switch')) {\n      <po-switch\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-format-model]=\"field.formatModel\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-label-off]=\"field.booleanFalse\"\n        [p-label-on]=\"field.booleanTrue\"\n        [p-label-position]=\"field.labelPosition\"\n        [p-hide-label-status]=\"field.hideLabelStatus\"\n        [p-invalid-value]=\"field.invalidValue\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-switch>\n    }\n    @if (compareTo(field.control, 'checkbox')) {\n      <po-checkbox\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox>\n    }\n    @if (compareTo(field.control, 'combo')) {\n      <po-combo\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        p-emit-object-value\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-options]=\"field.options\"\n        [p-optional]=\"field.optional\"\n        [p-sort]=\"field.sort\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field, $event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-filter-minlength]=\"field.filterMinlength\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-disabled-init-filter]=\"field.disabledInitFilter\"\n        [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-change-on-enter]=\"field.changeOnEnter\"\n        [p-remove-initial-filter]=\"field.removeInitialFilter\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-combo>\n    }\n    @if (compareTo(field.control, 'lookup')) {\n      <po-lookup\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        p-field-label=\"label\"\n        p-field-value=\"value\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-columns]=\"field.columns\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel || 'label'\"\n        [p-field-value]=\"field.fieldValue || 'value'\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.searchService\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-field-format]=\"field.format\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-multiple]=\"field.multiple\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-advanced-filters]=\"field.advancedFilters\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n      >\n      </po-lookup>\n    }\n    @if (compareTo(field.control, 'checkboxGroup')) {\n      <po-checkbox-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox-group>\n    }\n    @if (compareTo(field.control, 'multiselect')) {\n      <po-multiselect\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-sort]=\"field.sort\"\n        [p-placeholder-search]=\"field.placeholderSearch\"\n        [p-hide-search]=\"field.hideSearch\"\n        [p-hide-select-all]=\"field.hideSelectAll\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-multiselect>\n    }\n    @if (compareTo(field.control, 'textarea')) {\n      <po-textarea\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-rows]=\"field.rows\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-textarea>\n    }\n    @if (compareTo(field.control, 'password')) {\n      <po-password\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-hide-password-peek]=\"field.hidePasswordPeek\"\n        [p-icon]=\"field.icon\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-password>\n    }\n    @if (compareTo(field.control, 'upload')) {\n      <po-upload\n        #component\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-upload]=\"field.autoUpload\"\n        [p-directory]=\"field.directory\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-drag-drop]=\"field.dragDrop\"\n        [p-drag-drop-height]=\"field.dragDropHeight\"\n        [p-restrictions]=\"field.restrictions\"\n        [p-form-field]=\"field.formField\"\n        [p-headers]=\"field.headers\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n        [p-hide-select-button]=\"field.hideSelectButton\"\n        [p-hide-send-button]=\"field.hideSendButton\"\n        [p-multiple]=\"field.multiple\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [name]=\"field.property\"\n        [p-custom-action]=\"field.customAction\"\n        (p-custom-action-click)=\"field.customActionClick($event)\"\n        (p-error)=\"field.onError($event)\"\n        (p-success)=\"field.onSuccess($event)\"\n        (p-upload)=\"field.onUpload($event)\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-show-thumbnail]=\"field.showThumbnail ?? true\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-url]=\"field.url\"\n      >\n      </po-upload>\n    }\n  }\n</ng-template>\n\n<ng-template #poContentContainer let-fields>\n  <po-dynamic-container [p-fields]=\"fields\" [p-content]=\"poContent\"></po-dynamic-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$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: PoDividerComponent, selector: "po-divider" }, { kind: "component", type: PoCheckboxGroupComponent, selector: "po-checkbox-group" }, { kind: "component", type: PoRadioGroupComponent, selector: "po-radio-group", inputs: ["p-label", "p-help"] }, { kind: "component", type: PoDatepickerComponent, selector: "po-datepicker", inputs: ["p-label", "p-help"] }, { kind: "component", type: PoComboComponent, selector: "po-combo" }, { kind: "component", type: PoDecimalComponent, selector: "po-decimal", inputs: ["p-decimals-length", "p-thousand-maxlength", "p-locale", "p-min", "p-max"] }, { kind: "component", type: PoDatepickerRangeComponent, selector: "po-datepicker-range" }, { kind: "component", type: PoInputComponent, selector: "po-input" }, { kind: "component", type: PoLookupComponent, selector: "po-lookup" }, { kind: "component", type: PoMultiselectComponent, selector: "po-multiselect" }, { kind: "component", type: PoNumberComponent, selector: "po-number", inputs: ["p-step", "p-min", "p-max"] }, { kind: "component", type: PoPasswordComponent, selector: "po-password", inputs: ["p-hide-password-peek", "p-no-autocomplete"] }, { kind: "component", type: PoSelectComponent, selector: "po-select", inputs: ["p-readonly", "p-placeholder", "p-options", "p-field-label", "p-field-value", "p-control-value-with-label", "p-size", "p-helper", "p-label-text-wrap"], outputs: ["p-blur", "ngModelChange"] }, { kind: "component", type: PoTextareaComponent, selector: "po-textarea" }, { kind: "component", type: PoUploadComponent, selector: "po-upload" }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoSwitchComponent, selector: "po-switch", inputs: ["p-value", "p-format-model", "p-hide-label-status", "p-label-position", "p-label-off", "p-label-on", "p-field-error-message", "p-error-limit", "p-invalid-value", "p-size", "p-helper", "p-label-text-wrap"] }, { kind: "component", type: PoDynamicContainerComponent, selector: "po-dynamic-container", inputs: ["p-content", "p-fields"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoDynamicFormFieldsComponent, isStandalone: false, selector: "po-dynamic-form-fields", providers: [PoDynamicFormValidationService], viewQueries: [{ propertyName: "components", predicate: ["component"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (visibleFields && visibleFields.length > 0) {\n  <div class=\"po-row\" [class.po-dynamic]=\"hasContainers\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasContainers ? poContentContainer : poContent;\n        context: { $implicit: hasContainers ? containerFields : visibleFields }\n      \"\n    ></ng-container>\n  </div>\n}\n\n<ng-template #poContent let-fields>\n  @for (field of fields; track trackBy($index, field)) {\n    @if (field?.divider?.trim()) {\n      <po-divider class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n    }\n    @if (compareTo(field.control, 'datepicker')) {\n      <po-datepicker\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async]=\"field.errorAsyncFunction\"\n        [p-auto-focus]=\"field.focus\"\n        [p-format]=\"field.format\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-iso-format]=\"field.isoFormat\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-size]=\"field.size || componentsSize\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker>\n    }\n    @if (compareTo(field.control, 'datepickerrange')) {\n      <po-datepicker-range\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker-range>\n    }\n    @if (compareTo(field.control, 'input')) {\n      <po-input\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-mask-format-model]=\"field.maskFormatModel\"\n        [p-mask-no-length-validation]=\"field.maskNoLengthValidation\"\n        [p-mask]=\"field.mask\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-input>\n    }\n    @if (compareTo(field.control, 'number')) {\n      <po-number\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-step]=\"field.step\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-number>\n    }\n    @if (compareTo(field.control, 'decimal')) {\n      <po-decimal\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-decimals-length]=\"field.decimalsLength\"\n        [p-thousand-maxlength]=\"field.thousandMaxlength\"\n        [p-icon]=\"field.icon\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-mask-no-length-validation]=\"field.maskNoLengthValidation\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-decimal>\n    }\n    @if (compareTo(field.control, 'select')) {\n      <po-select\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-select>\n    }\n    @if (compareTo(field.control, 'radioGroup')) {\n      <po-radio-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-radio-group>\n    }\n    @if (compareTo(field.control, 'switch')) {\n      <po-switch\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-format-model]=\"field.formatModel\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-label-off]=\"field.booleanFalse\"\n        [p-label-on]=\"field.booleanTrue\"\n        [p-label-position]=\"field.labelPosition\"\n        [p-hide-label-status]=\"field.hideLabelStatus\"\n        [p-invalid-value]=\"field.invalidValue\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-switch>\n    }\n    @if (compareTo(field.control, 'checkbox')) {\n      <po-checkbox\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox>\n    }\n    @if (compareTo(field.control, 'combo')) {\n      <po-combo\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        p-emit-object-value\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-options]=\"field.options\"\n        [p-optional]=\"field.optional\"\n        [p-sort]=\"field.sort\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field, $event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-filter-minlength]=\"field.filterMinlength\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-disabled-init-filter]=\"field.disabledInitFilter\"\n        [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-change-on-enter]=\"field.changeOnEnter\"\n        [p-remove-initial-filter]=\"field.removeInitialFilter\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-combo>\n    }\n    @if (compareTo(field.control, 'lookup')) {\n      <po-lookup\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        p-field-label=\"label\"\n        p-field-value=\"value\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-columns]=\"field.columns\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel || 'label'\"\n        [p-field-value]=\"field.fieldValue || 'value'\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.searchService\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-field-format]=\"field.format\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-multiple]=\"field.multiple\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-advanced-filters]=\"field.advancedFilters\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n      >\n      </po-lookup>\n    }\n    @if (compareTo(field.control, 'checkboxGroup')) {\n      <po-checkbox-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox-group>\n    }\n    @if (compareTo(field.control, 'multiselect')) {\n      <po-multiselect\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-sort]=\"field.sort\"\n        [p-placeholder-search]=\"field.placeholderSearch\"\n        [p-hide-search]=\"field.hideSearch\"\n        [p-hide-select-all]=\"field.hideSelectAll\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-multiselect>\n    }\n    @if (compareTo(field.control, 'textarea')) {\n      <po-textarea\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-rows]=\"field.rows\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-textarea>\n    }\n    @if (compareTo(field.control, 'password')) {\n      <po-password\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-hide-password-peek]=\"field.hidePasswordPeek\"\n        [p-icon]=\"field.icon\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-password>\n    }\n    @if (compareTo(field.control, 'upload')) {\n      <po-upload\n        #component\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-upload]=\"field.autoUpload\"\n        [p-directory]=\"field.directory\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-drag-drop]=\"field.dragDrop\"\n        [p-drag-drop-height]=\"field.dragDropHeight\"\n        [p-restrictions]=\"field.restrictions\"\n        [p-form-field]=\"field.formField\"\n        [p-headers]=\"field.headers\"\n        [p-help]=\"field.help\"\n        [p-helper]=\"field.helper\"\n        [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n        [p-hide-select-button]=\"field.hideSelectButton\"\n        [p-hide-send-button]=\"field.hideSendButton\"\n        [p-multiple]=\"field.multiple\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [name]=\"field.property\"\n        [p-custom-action]=\"field.customAction\"\n        (p-custom-action-click)=\"field.customActionClick($event)\"\n        (p-error)=\"field.onError($event)\"\n        (p-success)=\"field.onSuccess($event)\"\n        (p-upload)=\"field.onUpload($event)\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-show-thumbnail]=\"field.showThumbnail ?? true\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-url]=\"field.url\"\n      >\n      </po-upload>\n    }\n  }\n</ng-template>\n\n<ng-template #poContentContainer let-fields>\n  <po-dynamic-container [p-fields]=\"fields\" [p-content]=\"poContent\"></po-dynamic-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$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: PoDividerComponent, selector: "po-divider" }, { kind: "component", type: PoCheckboxGroupComponent, selector: "po-checkbox-group" }, { kind: "component", type: PoRadioGroupComponent, selector: "po-radio-group", inputs: ["p-label", "p-help"] }, { kind: "component", type: PoDatepickerComponent, selector: "po-datepicker", inputs: ["p-label", "p-help"] }, { kind: "component", type: PoComboComponent, selector: "po-combo" }, { kind: "component", type: PoDecimalComponent, selector: "po-decimal", inputs: ["p-decimals-length", "p-thousand-maxlength", "p-locale", "p-min", "p-max"] }, { kind: "component", type: PoDatepickerRangeComponent, selector: "po-datepicker-range" }, { kind: "component", type: PoInputComponent, selector: "po-input" }, { kind: "component", type: PoLookupComponent, selector: "po-lookup" }, { kind: "component", type: PoMultiselectComponent, selector: "po-multiselect" }, { kind: "component", type: PoNumberComponent, selector: "po-number", inputs: ["p-step", "p-min", "p-max"] }, { kind: "component", type: PoPasswordComponent, selector: "po-password", inputs: ["p-hide-password-peek", "p-no-autocomplete"] }, { kind: "component", type: PoSelectComponent, selector: "po-select", inputs: ["p-readonly", "p-placeholder", "p-options", "p-field-label", "p-field-value", "p-control-value-with-label", "p-loading", "p-size", "p-helper", "p-label-text-wrap"], outputs: ["p-blur", "ngModelChange"] }, { kind: "component", type: PoTextareaComponent, selector: "po-textarea" }, { kind: "component", type: PoUploadComponent, selector: "po-upload" }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoSwitchComponent, selector: "po-switch", inputs: ["p-value", "p-format-model", "p-hide-label-status", "p-label-position", "p-label-off", "p-label-on", "p-loading", "p-field-error-message", "p-error-limit", "p-invalid-value", "p-size", "p-helper", "p-label-text-wrap"] }, { kind: "component", type: PoDynamicContainerComponent, selector: "po-dynamic-container", inputs: ["p-content", "p-fields"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDynamicFormFieldsComponent, decorators: [{
             type: Component,