@po-ui/ng-components 21.4.0 → 21.5.0

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

@@ -5819,6 +5819,8 @@ var PoCheckboxSize;
  * | `--border-color`                       | Cor da borda                                                 | `var(--color-neutral-dark-70)`                  |
  * | `--color-unchecked`                    | Cor quando não selecionado                                   | `var(--color-neutral-light-00)`                 |
  * | `--color-checked`                      | Cor quando selecionado                                       | `var(--color-action-default)`                   |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)         | `space-between`                                 |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                                      | `1 auto`                                        |
  * | **Hover**                              |                                                              |                                                 |
  * | `--color-hover`                        | Cor principal no estado hover                                | `var(--color-action-hover)`                     |
  * | `--shadow-color-hover`                 | Cor da sombra no estado hover                                | `var(--color-brand-01-lighter)`                 |
@@ -5861,6 +5863,45 @@ class PoCheckboxBaseComponent {
      * @default `false`
      */
     appendBox = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /**
      * @optional
      *
@@ -6032,7 +6073,7 @@ class PoCheckboxBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoCheckboxBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: PoCheckboxBaseComponent, isStandalone: false, selector: "po-checkbox-base", 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 }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, checkboxValue: { classPropertyName: "checkboxValue", publicName: "p-checkboxValue", isSignal: false, isRequired: false, transformFunction: null }, checkBoxRequired: { classPropertyName: "checkBoxRequired", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabladTabindex: { classPropertyName: "disabladTabindex", publicName: "p-disabled-tabindex", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", 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: { additionalHelp: "p-additional-help", blur: "p-blur", change: "p-change", keydown: "p-keydown" }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: PoCheckboxBaseComponent, isStandalone: false, selector: "po-checkbox-base", 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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, 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 }, 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 }, checkboxValue: { classPropertyName: "checkboxValue", publicName: "p-checkboxValue", isSignal: false, isRequired: false, transformFunction: null }, checkBoxRequired: { classPropertyName: "checkBoxRequired", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabladTabindex: { classPropertyName: "disabladTabindex", publicName: "p-disabled-tabindex", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", 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: { additionalHelp: "p-additional-help", blur: "p-blur", change: "p-change", keydown: "p-keydown" }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoCheckboxBaseComponent, decorators: [{
             type: Component,
@@ -6049,7 +6090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], appendBox: [{
                 type: Input,
                 args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
-            }], help: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], help: [{
                 type: Input,
                 args: ['p-help']
             }], name: [{
@@ -7722,6 +7763,21 @@ class PoFieldContainerComponent {
     showRequired = false;
     /** Define o tamanho do componente. */
     size;
+    /**
+     * @Input
+     *
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     constructor(cdr) {
         this.cdr = cdr;
         const languageService = inject(PoLanguageService);
@@ -7774,11 +7830,11 @@ class PoFieldContainerComponent {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoFieldContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoFieldContainerComponent, isStandalone: false, selector: "po-field-container", inputs: { disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "p-id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, showHelperComponent: { classPropertyName: "showHelperComponent", publicName: "p-show-helper", isSignal: true, isRequired: false, transformFunction: null }, textWrap: { classPropertyName: "textWrap", publicName: "p-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 } }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["labelEl"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-field-container\" (mouseenter)=\"handleLabelTooltip()\" [attr.p-size]=\"size\">\n  <div class=\"po-field-container-title\">\n    @if (label || help) {\n      <po-label\n        #labelEl\n        [p-disabled]=\"disabled\"\n        p-field=\"true\"\n        [p-for]=\"id\"\n        [p-label]=\"label\"\n        [p-requirement]=\"requirement\"\n        [p-text-wrap]=\"textWrap()\"\n        [p-tooltip]=\"showTip ? label : null\"\n      ></po-label>\n      @if (poHelperComponent()) {\n        <po-helper\n          #helperEl\n          [p-disabled]=\"disabled\"\n          [p-helper]=\"poHelperComponent()\"\n          [p-size]=\"poHelperComponent().size ? poHelperComponent().size : null\"\n        ></po-helper>\n      }\n    }\n  </div>\n\n  @if (help) {\n    <div class=\"po-field-help\">{{ help }}</div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoFieldContainerComponent, isStandalone: false, selector: "po-field-container", inputs: { disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "p-id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, showHelperComponent: { classPropertyName: "showHelperComponent", publicName: "p-show-helper", isSignal: true, isRequired: false, transformFunction: null }, textWrap: { classPropertyName: "textWrap", publicName: "p-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["labelEl"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-field-container\" (mouseenter)=\"handleLabelTooltip()\" [attr.p-size]=\"size\">\n  <div class=\"po-field-container-title\" [class.po-field-container-compact-label]=\"compactLabel()\">\n    @if (label || help) {\n      <po-label\n        #labelEl\n        [p-disabled]=\"disabled\"\n        p-field=\"true\"\n        [p-for]=\"id\"\n        [p-label]=\"label\"\n        [p-requirement]=\"requirement\"\n        [p-text-wrap]=\"textWrap()\"\n        [p-tooltip]=\"showTip ? label : null\"\n      ></po-label>\n      @if (poHelperComponent()) {\n        <po-helper\n          #helperEl\n          [p-disabled]=\"disabled\"\n          [p-helper]=\"poHelperComponent()\"\n          [p-size]=\"poHelperComponent().size ? poHelperComponent().size : null\"\n        ></po-helper>\n      }\n    }\n  </div>\n\n  @if (help) {\n    <div class=\"po-field-help\">{{ help }}</div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoFieldContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-field-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-field-container\" (mouseenter)=\"handleLabelTooltip()\" [attr.p-size]=\"size\">\n  <div class=\"po-field-container-title\">\n    @if (label || help) {\n      <po-label\n        #labelEl\n        [p-disabled]=\"disabled\"\n        p-field=\"true\"\n        [p-for]=\"id\"\n        [p-label]=\"label\"\n        [p-requirement]=\"requirement\"\n        [p-text-wrap]=\"textWrap()\"\n        [p-tooltip]=\"showTip ? label : null\"\n      ></po-label>\n      @if (poHelperComponent()) {\n        <po-helper\n          #helperEl\n          [p-disabled]=\"disabled\"\n          [p-helper]=\"poHelperComponent()\"\n          [p-size]=\"poHelperComponent().size ? poHelperComponent().size : null\"\n        ></po-helper>\n      }\n    }\n  </div>\n\n  @if (help) {\n    <div class=\"po-field-help\">{{ help }}</div>\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'po-field-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-field-container\" (mouseenter)=\"handleLabelTooltip()\" [attr.p-size]=\"size\">\n  <div class=\"po-field-container-title\" [class.po-field-container-compact-label]=\"compactLabel()\">\n    @if (label || help) {\n      <po-label\n        #labelEl\n        [p-disabled]=\"disabled\"\n        p-field=\"true\"\n        [p-for]=\"id\"\n        [p-label]=\"label\"\n        [p-requirement]=\"requirement\"\n        [p-text-wrap]=\"textWrap()\"\n        [p-tooltip]=\"showTip ? label : null\"\n      ></po-label>\n      @if (poHelperComponent()) {\n        <po-helper\n          #helperEl\n          [p-disabled]=\"disabled\"\n          [p-helper]=\"poHelperComponent()\"\n          [p-size]=\"poHelperComponent().size ? poHelperComponent().size : null\"\n        ></po-helper>\n      }\n    }\n  </div>\n\n  @if (help) {\n    <div class=\"po-field-help\">{{ help }}</div>\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { labelEl: [{
                 type: ViewChild,
                 args: ['labelEl', { read: ElementRef }]
@@ -7809,7 +7865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], size: [{
                 type: Input,
                 args: ['p-size']
-            }] } });
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }] } });
 
 /**
  * @docsExtends PoCheckboxBaseComponent
@@ -7977,7 +8033,7 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
                 useExisting: forwardRef(() => PoCheckboxComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "checkboxLabel", first: true, predicate: ["checkboxLabel"], descendants: true }, { propertyName: "labelEl", first: true, predicate: ["labelEl"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@if (help) {\n  <po-field-container [p-disabled]=\"disabled\" [p-size]=\"size\">\n    <div class=\"po-field-container-content\">\n      <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n    </div>\n    <po-field-container-bottom [p-help]=\"help\" [p-size]=\"size\"></po-field-container-bottom>\n  </po-field-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n}\n\n<ng-template #checkboxContent>\n  <div\n    class=\"container-po-checkbox\"\n    [attr.checked]=\"checkboxValue\"\n    (click)=\"checkOption($event, checkboxValue)\"\n    (keydown)=\"onKeyDown($event, checkboxValue)\"\n  >\n    <div\n      #checkboxLabel\n      role=\"checkbox\"\n      class=\"po-checkbox-outline\"\n      [class.po-checkbox-outline-aa]=\"size === 'small'\"\n      [class.po-checkbox-outline-large]=\"size === 'large'\"\n      [tabindex]=\"disabled || disabladTabindex ? -1 : 0\"\n      [attr.aria-checked]=\"checkboxValue\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled\"\n      (blur)=\"onBlur()\"\n    >\n      <span\n        [attr.aria-checked]=\"checkboxValue\"\n        aria-label=\" \"\n        [id]=\"id\"\n        class=\"po-checkbox po-checkbox-phosphor\"\n        [class.po-checkbox-aa]=\"size === 'small'\"\n        [class.po-checkbox-large]=\"size === 'large'\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.required]=\"checkBoxRequired\"\n      >\n      </span>\n\n      @if (label) {\n        <po-label\n          #labelEl\n          class=\"po-checkbox-label\"\n          [class.po-checkbox-label-aa]=\"size === 'small'\"\n          tabindex=\"-1\"\n          [p-disabled]=\"disabled\"\n          [p-for]=\"id\"\n          [p-label]=\"label\"\n          [p-text-wrap]=\"labelTextWrap()\"\n          [p-tooltip]=\"showTip ? label : null\"\n          (mouseenter)=\"handleLabelTooltip()\"\n          (focus)=\"handleLabelTooltip()\"\n        >\n        </po-label>\n      }\n      @if (poHelperComponent() || poHelper.hideAdditionalHelp) {\n        <po-helper\n          #helperEl\n          class=\"po-checkbox-helper\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"disabled\"\n          [p-append-in-body]=\"appendBox\"\n          [p-size]=\"size === 'large' ? 'medium' : size\"\n        >\n        </po-helper>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "checkboxLabel", first: true, predicate: ["checkboxLabel"], descendants: true }, { propertyName: "labelEl", first: true, predicate: ["labelEl"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@if (help) {\n  <po-field-container [p-disabled]=\"disabled\" [p-size]=\"size\" [p-compact-label]=\"compactLabel()\">\n    <div class=\"po-field-container-content\">\n      <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n    </div>\n    <po-field-container-bottom [p-help]=\"help\" [p-size]=\"size\"></po-field-container-bottom>\n  </po-field-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n}\n\n<ng-template #checkboxContent>\n  <div\n    class=\"container-po-checkbox\"\n    [attr.checked]=\"checkboxValue\"\n    (click)=\"checkOption($event, checkboxValue)\"\n    (keydown)=\"onKeyDown($event, checkboxValue)\"\n  >\n    <div\n      #checkboxLabel\n      role=\"checkbox\"\n      class=\"po-checkbox-outline\"\n      [class.po-checkbox-outline-aa]=\"size === 'small'\"\n      [class.po-checkbox-outline-large]=\"size === 'large'\"\n      [tabindex]=\"disabled || disabladTabindex ? -1 : 0\"\n      [attr.aria-checked]=\"checkboxValue\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled\"\n      (blur)=\"onBlur()\"\n    >\n      <span\n        [attr.aria-checked]=\"checkboxValue\"\n        aria-label=\" \"\n        [id]=\"id\"\n        class=\"po-checkbox po-checkbox-phosphor\"\n        [class.po-checkbox-aa]=\"size === 'small'\"\n        [class.po-checkbox-large]=\"size === 'large'\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.required]=\"checkBoxRequired\"\n      >\n      </span>\n\n      @if (label) {\n        <po-label\n          #labelEl\n          class=\"po-checkbox-label\"\n          [class.po-checkbox-label-aa]=\"size === 'small'\"\n          tabindex=\"-1\"\n          [p-disabled]=\"disabled\"\n          [p-for]=\"id\"\n          [p-label]=\"label\"\n          [p-text-wrap]=\"labelTextWrap()\"\n          [p-tooltip]=\"showTip ? label : null\"\n          (mouseenter)=\"handleLabelTooltip()\"\n          (focus)=\"handleLabelTooltip()\"\n        >\n        </po-label>\n      }\n      @if (poHelperComponent() || poHelper.hideAdditionalHelp) {\n        <po-helper\n          #helperEl\n          class=\"po-checkbox-helper\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"disabled\"\n          [p-append-in-body]=\"appendBox\"\n          [p-size]=\"size === 'large' ? 'medium' : size\"\n        >\n        </po-helper>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoCheckboxComponent, decorators: [{
             type: Component,
@@ -7987,7 +8043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => PoCheckboxComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@if (help) {\n  <po-field-container [p-disabled]=\"disabled\" [p-size]=\"size\">\n    <div class=\"po-field-container-content\">\n      <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n    </div>\n    <po-field-container-bottom [p-help]=\"help\" [p-size]=\"size\"></po-field-container-bottom>\n  </po-field-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n}\n\n<ng-template #checkboxContent>\n  <div\n    class=\"container-po-checkbox\"\n    [attr.checked]=\"checkboxValue\"\n    (click)=\"checkOption($event, checkboxValue)\"\n    (keydown)=\"onKeyDown($event, checkboxValue)\"\n  >\n    <div\n      #checkboxLabel\n      role=\"checkbox\"\n      class=\"po-checkbox-outline\"\n      [class.po-checkbox-outline-aa]=\"size === 'small'\"\n      [class.po-checkbox-outline-large]=\"size === 'large'\"\n      [tabindex]=\"disabled || disabladTabindex ? -1 : 0\"\n      [attr.aria-checked]=\"checkboxValue\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled\"\n      (blur)=\"onBlur()\"\n    >\n      <span\n        [attr.aria-checked]=\"checkboxValue\"\n        aria-label=\" \"\n        [id]=\"id\"\n        class=\"po-checkbox po-checkbox-phosphor\"\n        [class.po-checkbox-aa]=\"size === 'small'\"\n        [class.po-checkbox-large]=\"size === 'large'\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.required]=\"checkBoxRequired\"\n      >\n      </span>\n\n      @if (label) {\n        <po-label\n          #labelEl\n          class=\"po-checkbox-label\"\n          [class.po-checkbox-label-aa]=\"size === 'small'\"\n          tabindex=\"-1\"\n          [p-disabled]=\"disabled\"\n          [p-for]=\"id\"\n          [p-label]=\"label\"\n          [p-text-wrap]=\"labelTextWrap()\"\n          [p-tooltip]=\"showTip ? label : null\"\n          (mouseenter)=\"handleLabelTooltip()\"\n          (focus)=\"handleLabelTooltip()\"\n        >\n        </po-label>\n      }\n      @if (poHelperComponent() || poHelper.hideAdditionalHelp) {\n        <po-helper\n          #helperEl\n          class=\"po-checkbox-helper\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"disabled\"\n          [p-append-in-body]=\"appendBox\"\n          [p-size]=\"size === 'large' ? 'medium' : size\"\n        >\n        </po-helper>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@if (help) {\n  <po-field-container [p-disabled]=\"disabled\" [p-size]=\"size\" [p-compact-label]=\"compactLabel()\">\n    <div class=\"po-field-container-content\">\n      <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n    </div>\n    <po-field-container-bottom [p-help]=\"help\" [p-size]=\"size\"></po-field-container-bottom>\n  </po-field-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"checkboxContent\"></ng-container>\n}\n\n<ng-template #checkboxContent>\n  <div\n    class=\"container-po-checkbox\"\n    [attr.checked]=\"checkboxValue\"\n    (click)=\"checkOption($event, checkboxValue)\"\n    (keydown)=\"onKeyDown($event, checkboxValue)\"\n  >\n    <div\n      #checkboxLabel\n      role=\"checkbox\"\n      class=\"po-checkbox-outline\"\n      [class.po-checkbox-outline-aa]=\"size === 'small'\"\n      [class.po-checkbox-outline-large]=\"size === 'large'\"\n      [tabindex]=\"disabled || disabladTabindex ? -1 : 0\"\n      [attr.aria-checked]=\"checkboxValue\"\n      [attr.data-focused-element]=\"!disabled\"\n      [attr.data-inactive-component]=\"disabled\"\n      (blur)=\"onBlur()\"\n    >\n      <span\n        [attr.aria-checked]=\"checkboxValue\"\n        aria-label=\" \"\n        [id]=\"id\"\n        class=\"po-checkbox po-checkbox-phosphor\"\n        [class.po-checkbox-aa]=\"size === 'small'\"\n        [class.po-checkbox-large]=\"size === 'large'\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.required]=\"checkBoxRequired\"\n      >\n      </span>\n\n      @if (label) {\n        <po-label\n          #labelEl\n          class=\"po-checkbox-label\"\n          [class.po-checkbox-label-aa]=\"size === 'small'\"\n          tabindex=\"-1\"\n          [p-disabled]=\"disabled\"\n          [p-for]=\"id\"\n          [p-label]=\"label\"\n          [p-text-wrap]=\"labelTextWrap()\"\n          [p-tooltip]=\"showTip ? label : null\"\n          (mouseenter)=\"handleLabelTooltip()\"\n          (focus)=\"handleLabelTooltip()\"\n        >\n        </po-label>\n      }\n      @if (poHelperComponent() || poHelper.hideAdditionalHelp) {\n        <po-helper\n          #helperEl\n          class=\"po-checkbox-helper\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"disabled\"\n          [p-append-in-body]=\"appendBox\"\n          [p-size]=\"size === 'large' ? 'medium' : size\"\n        >\n        </po-helper>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { checkboxLabel: [{
                 type: ViewChild,
                 args: ['checkboxLabel', { static: false }]
@@ -9641,7 +9697,9 @@ const poMultiselectContainerPositionDefault$1 = 'bottom';
  * | `--color`                              | Cor principal do Combo                                | `var(--color-neutral-dark-70)`                    |
  * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-05)`                   |
  * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento&nbsp;   | `var(--border-width-lg)`                          |
- * | `--min-width`                          | Largura mínima do combo                               | `150px`
+ * | `--min-width`                          | Largura mínima do combo                               | `150px`                                           |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)  | `space-between`                                   |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                               | `1 auto`                                          |
  * | **Hover**                              |                                                       |                                                   |
  * | `--color-hover`                        | Cor principal no estado hover                         | `var(--color-action-hover)`                       |
  * | `--background-hover`                   | Cor de background no estado hover                     | `var(--color-brand-01-lightest)`                  |
@@ -9696,6 +9754,45 @@ class PoComboBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /** Label no componente. */
     label;
     /** Texto de apoio para o campo. */
@@ -10767,7 +10864,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 }, 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 });
+    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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, 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
@@ -10782,7 +10879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], label: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], label: [{
                 type: Input,
                 args: ['p-label']
             }], help: [{
@@ -11734,7 +11831,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]=\"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: 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: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }], 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        [p-compact-label]=\"compactLabel()\"\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: 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", "p-compact-label"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { 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: PoComboComponent, decorators: [{
             type: Component,
@@ -11751,7 +11848,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]=\"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" }]
+                    ], 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        [p-compact-label]=\"compactLabel()\"\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 }]
@@ -17009,6 +17106,45 @@ class PoCheckboxGroupBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /** Nome dos checkboxes */
     name;
     /** Texto de apoio do campo */
@@ -17357,7 +17493,7 @@ class PoCheckboxGroupBaseComponent {
         this.checkboxGroupOptionsView = optionsList.map(option => ({ ...option, id: PoUtils.uuid() }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoCheckboxGroupBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoCheckboxGroupBaseComponent, 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, 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 }, columns: { classPropertyName: "columns", publicName: "p-columns", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "p-indeterminate", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "p-options", 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 } }, outputs: { ngModelChange: "ngModelChange", additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoCheckboxGroupBaseComponent, 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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, 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 }, columns: { classPropertyName: "columns", publicName: "p-columns", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "p-indeterminate", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "p-options", 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 } }, outputs: { ngModelChange: "ngModelChange", additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoCheckboxGroupBaseComponent, decorators: [{
             type: Directive
@@ -17372,7 +17508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], name: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], name: [{
                 type: Input,
                 args: ['name']
             }], help: [{
@@ -17588,7 +17724,7 @@ class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent {
                 useExisting: forwardRef(() => PoCheckboxGroupComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "checkboxLabels", predicate: ["checkboxLabel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div role=\"group\" class=\"po-checkbox-group-content\" [attr.aria-label]=\"label\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-content\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n      <ul class=\"po-row\">\n        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n          <li\n            class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n            [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n          >\n            <po-checkbox\n              #checkboxLabel\n              [p-label]=\"option.label\"\n              [p-disabled]=\"option.disabled || disabled\"\n              (p-blur)=\"onBlur(checkboxLabel)\"\n              (click)=\"checkOption(option)\"\n              (keydown)=\"onKeyDown($event, option, checkboxLabel)\"\n              [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n              [p-required]=\"required\"\n              [p-label-text-wrap]=\"true\"\n              [p-size]=\"size\"\n            >\n            </po-checkbox>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "checkboxLabels", predicate: ["checkboxLabel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div role=\"group\" class=\"po-checkbox-group-content\" [attr.aria-label]=\"label\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-content\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n      <ul class=\"po-row\">\n        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n          <li\n            class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n            [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n          >\n            <po-checkbox\n              #checkboxLabel\n              [p-label]=\"option.label\"\n              [p-disabled]=\"option.disabled || disabled\"\n              (p-blur)=\"onBlur(checkboxLabel)\"\n              (click)=\"checkOption(option)\"\n              (keydown)=\"onKeyDown($event, option, checkboxLabel)\"\n              [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n              [p-required]=\"required\"\n              [p-label-text-wrap]=\"true\"\n              [p-size]=\"size\"\n            >\n            </po-checkbox>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoCheckboxGroupComponent, decorators: [{
             type: Component,
@@ -17603,7 +17739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => PoCheckboxGroupComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div role=\"group\" class=\"po-checkbox-group-content\" [attr.aria-label]=\"label\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-content\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n      <ul class=\"po-row\">\n        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n          <li\n            class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n            [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n          >\n            <po-checkbox\n              #checkboxLabel\n              [p-label]=\"option.label\"\n              [p-disabled]=\"option.disabled || disabled\"\n              (p-blur)=\"onBlur(checkboxLabel)\"\n              (click)=\"checkOption(option)\"\n              (keydown)=\"onKeyDown($event, option, checkboxLabel)\"\n              [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n              [p-required]=\"required\"\n              [p-label-text-wrap]=\"true\"\n              [p-size]=\"size\"\n            >\n            </po-checkbox>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div role=\"group\" class=\"po-checkbox-group-content\" [attr.aria-label]=\"label\" [attr.p-size]=\"size\">\n    <div class=\"po-field-container-content\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n      <ul class=\"po-row\">\n        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {\n          <li\n            class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n            [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n          >\n            <po-checkbox\n              #checkboxLabel\n              [p-label]=\"option.label\"\n              [p-disabled]=\"option.disabled || disabled\"\n              (p-blur)=\"onBlur(checkboxLabel)\"\n              (click)=\"checkOption(option)\"\n              (keydown)=\"onKeyDown($event, option, checkboxLabel)\"\n              [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n              [p-required]=\"required\"\n              [p-label-text-wrap]=\"true\"\n              [p-size]=\"size\"\n            >\n            </po-checkbox>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
         }], propDecorators: { checkboxLabels: [{
                 type: ViewChildren,
                 args: ['checkboxLabel']
@@ -17683,6 +17819,8 @@ const poRadioGroupColumnsTotalLength = 12;
  * |----------------------------------------|-------------------------------------------------------------|-------------------------------------------------|
  * | **Default Values**                     |                                                             |                                                 |
  * | `--border-color`                       | Cor da borda                                                | `var(--color-neutral-dark-70)`                  |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)        | `space-between`                                 |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                                     | `1 auto`                                        |
  * | **Hover**                              |                                                             |                                                 |
  * | `--shadow-color-hover`                 | Cor da sombra no estado hover                               | `var(--color-brand-01-lighter)`                 |
  * | `--color-hover`                        | Cor principal no estado hover                               | `var(--color-brand-01-dark)`                    |
@@ -17739,6 +17877,45 @@ class PoRadioGroupBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /** Nome das opções. */
     name;
     /**
@@ -17995,7 +18172,7 @@ class PoRadioGroupBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRadioGroupBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoRadioGroupBaseComponent, 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, 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 }, columns: { classPropertyName: "columns", publicName: "p-columns", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", 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 }, options: { classPropertyName: "options", publicName: "p-options", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoRadioGroupBaseComponent, 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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, 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 }, columns: { classPropertyName: "columns", publicName: "p-columns", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", 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 }, options: { classPropertyName: "options", publicName: "p-options", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRadioGroupBaseComponent, decorators: [{
             type: Directive
@@ -18010,7 +18187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], name: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], name: [{
                 type: Input,
                 args: ['name']
             }], optional: [{
@@ -18597,7 +18774,7 @@ class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
                 useExisting: forwardRef(() => PoRadioGroupComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "radioLabels", predicate: ["inputRadio"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div #inp role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n    <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n      <div class=\"po-radio-group\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n        @for (option of options; track option) {\n          <div class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n            <po-radio\n              #inputRadio\n              [name]=\"name\"\n              [p-checked]=\"value === option.value\"\n              [p-disabled]=\"option.disabled === true || disabled\"\n              [p-label]=\"option.label\"\n              [p-label-text-wrap]=\"true\"\n              [p-required]=\"required\"\n              [p-size]=\"size\"\n              [p-value]=\"option.value\"\n              (p-blur)=\"onBlur(inputRadio)\"\n              (keydown)=\"onKeyDown($event, inputRadio)\"\n              (keyup)=\"onKeyUp($event, option.value)\"\n              (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n            >\n            </po-radio>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoRadioComponent, selector: "po-radio", inputs: ["p-value", "p-size", "p-required", "p-label-text-wrap", "p-checked"], outputs: ["p-blur", "p-change-selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "radioLabels", predicate: ["inputRadio"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #inp role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n    <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n      <div class=\"po-radio-group\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n        @for (option of options; track option) {\n          <div class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n            <po-radio\n              #inputRadio\n              [name]=\"name\"\n              [p-checked]=\"value === option.value\"\n              [p-disabled]=\"option.disabled === true || disabled\"\n              [p-label]=\"option.label\"\n              [p-label-text-wrap]=\"true\"\n              [p-required]=\"required\"\n              [p-size]=\"size\"\n              [p-value]=\"option.value\"\n              (p-blur)=\"onBlur(inputRadio)\"\n              (keydown)=\"onKeyDown($event, inputRadio)\"\n              (keyup)=\"onKeyUp($event, option.value)\"\n              (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n            >\n            </po-radio>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoRadioComponent, selector: "po-radio", inputs: ["p-value", "p-size", "p-required", "p-label-text-wrap", "p-checked"], outputs: ["p-blur", "p-change-selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRadioGroupComponent, decorators: [{
             type: Component,
@@ -18612,7 +18789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => PoRadioGroupComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div #inp role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n    <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n      <div class=\"po-radio-group\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n        @for (option of options; track option) {\n          <div class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n            <po-radio\n              #inputRadio\n              [name]=\"name\"\n              [p-checked]=\"value === option.value\"\n              [p-disabled]=\"option.disabled === true || disabled\"\n              [p-label]=\"option.label\"\n              [p-label-text-wrap]=\"true\"\n              [p-required]=\"required\"\n              [p-size]=\"size\"\n              [p-value]=\"option.value\"\n              (p-blur)=\"onBlur(inputRadio)\"\n              (keydown)=\"onKeyDown($event, inputRadio)\"\n              (keyup)=\"onKeyUp($event, option.value)\"\n              (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n            >\n            </po-radio>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
+                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #inp role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n    <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n      <div class=\"po-radio-group\" [attr.name]=\"name\" [attr.p-size]=\"size\">\n        @for (option of options; track option) {\n          <div class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n            <po-radio\n              #inputRadio\n              [name]=\"name\"\n              [p-checked]=\"value === option.value\"\n              [p-disabled]=\"option.disabled === true || disabled\"\n              [p-label]=\"option.label\"\n              [p-label-text-wrap]=\"true\"\n              [p-required]=\"required\"\n              [p-size]=\"size\"\n              [p-value]=\"option.value\"\n              (p-blur)=\"onBlur(inputRadio)\"\n              (keydown)=\"onKeyDown($event, inputRadio)\"\n              (keyup)=\"onKeyUp($event, option.value)\"\n              (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n            >\n            </po-radio>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-limit]=\"errorLimit\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input,
                 args: ['p-label']
@@ -19203,6 +19380,8 @@ const poDatepickerFormatDefault = 'dd/mm/yyyy';
  * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-05)`                  |
  * | `--padding`                            | Preenchimento                                         | `0 0.5rem`                                       |
  * | `--text-color`                         | Cor do texto                                          | `var(--color-neutral-dark-90)`                   |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)  | `space-between`                                   |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                               | `1 auto`                                          |
  * | **Hover**                              |                                                       |                                                  |
  * | `--color-hover`                        | Cor principal no estado hover                         | `var(--color-brand-01-dark)`                     |
  * | `--background-hover`                   | Cor de background no estado hover                     | `var(--color-brand-01-lightest)`                 |
@@ -19247,6 +19426,45 @@ class PoDatepickerBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /**
      * @optional
      *
@@ -19780,7 +19998,7 @@ class PoDatepickerBaseComponent {
         this.hour = 'T00:00:00' + timezone;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDatepickerBaseComponent, deps: [{ token: PoLanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoDatepickerBaseComponent, 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 }, errorAsync: { classPropertyName: "errorAsync", publicName: "p-error-async", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, showErrorMessageRequired: { classPropertyName: "showErrorMessageRequired", publicName: "p-required-field-error-message", 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 }, 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 }, 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 }, setClean: { classPropertyName: "setClean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "p-min-date", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "p-max-date", isSignal: false, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "p-format", isSignal: false, isRequired: false, transformFunction: null }, isoFormat: { classPropertyName: "isoFormat", publicName: "p-iso-format", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "p-locale", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean } }, outputs: { additionalHelp: "p-additional-help", onblur: "p-blur", onchange: "p-change", keydown: "p-keydown" }, host: { properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoDatepickerBaseComponent, 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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, errorAsync: { classPropertyName: "errorAsync", publicName: "p-error-async", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, showErrorMessageRequired: { classPropertyName: "showErrorMessageRequired", publicName: "p-required-field-error-message", 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 }, 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 }, 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 }, setClean: { classPropertyName: "setClean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "p-min-date", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "p-max-date", isSignal: false, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "p-format", isSignal: false, isRequired: false, transformFunction: null }, isoFormat: { classPropertyName: "isoFormat", publicName: "p-iso-format", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "p-locale", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean } }, outputs: { additionalHelp: "p-additional-help", onblur: "p-blur", onchange: "p-change", keydown: "p-keydown" }, host: { properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDatepickerBaseComponent, decorators: [{
             type: Directive
@@ -19792,7 +20010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], errorAsync: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], errorAsync: [{
                 type: Input,
                 args: ['p-error-async']
             }], name: [{
@@ -20449,7 +20667,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
                 multi: true
             },
             PoControlPositionService
-        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\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 #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n      [attr.p-size]=\"size\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value && !isDisabled\"\n          [class.po-datepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"isDisabled\"\n          [id]=\"id\"\n          [placeholder]=\"isDisabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        @if (loading) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (clean && dateInputValue && !isDisabled && !readonly) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-element-ref]=\"inputEl\"\n                [p-size]=\"size\"\n                (p-change-event)=\"clear()\"\n                (keydown)=\"handleCleanKeyboardTab($event)\"\n                (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n              >\n              </po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconDatepicker\n              class=\"po-datepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\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 (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          [p-size]=\"size\"\n          (p-change)=\"dateSelected($event)\"\n          (p-change-month-year)=\"adjustCalendarPosition()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n          (p-close)=\"closeCalendar(false)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "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: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\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  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n      [attr.p-size]=\"size\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value && !isDisabled\"\n          [class.po-datepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"isDisabled\"\n          [id]=\"id\"\n          [placeholder]=\"isDisabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        @if (loading) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (clean && dateInputValue && !isDisabled && !readonly) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-element-ref]=\"inputEl\"\n                [p-size]=\"size\"\n                (p-change-event)=\"clear()\"\n                (keydown)=\"handleCleanKeyboardTab($event)\"\n                (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n              >\n              </po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconDatepicker\n              class=\"po-datepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\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 (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          [p-size]=\"size\"\n          (p-change)=\"dateSelected($event)\"\n          (p-change-month-year)=\"adjustCalendarPosition()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n          (p-close)=\"closeCalendar(false)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { 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: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDatepickerComponent, decorators: [{
             type: Component,
@@ -20465,7 +20683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             multi: true
                         },
                         PoControlPositionService
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\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 #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n      [attr.p-size]=\"size\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value && !isDisabled\"\n          [class.po-datepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"isDisabled\"\n          [id]=\"id\"\n          [placeholder]=\"isDisabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        @if (loading) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (clean && dateInputValue && !isDisabled && !readonly) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-element-ref]=\"inputEl\"\n                [p-size]=\"size\"\n                (p-change-event)=\"clear()\"\n                (keydown)=\"handleCleanKeyboardTab($event)\"\n                (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n              >\n              </po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconDatepicker\n              class=\"po-datepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\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 (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          [p-size]=\"size\"\n          (p-change)=\"dateSelected($event)\"\n          (p-change-month-year)=\"adjustCalendarPosition()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n          (p-close)=\"closeCalendar(false)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\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  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n      [attr.p-size]=\"size\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value && !isDisabled\"\n          [class.po-datepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"isDisabled\"\n          [id]=\"id\"\n          [placeholder]=\"isDisabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        @if (loading) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (clean && dateInputValue && !isDisabled && !readonly) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-element-ref]=\"inputEl\"\n                [p-size]=\"size\"\n                (p-change-event)=\"clear()\"\n                (keydown)=\"handleCleanKeyboardTab($event)\"\n                (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n              >\n              </po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconDatepicker\n              class=\"po-datepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\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 (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          [p-size]=\"size\"\n          (p-change)=\"dateSelected($event)\"\n          (p-change-month-year)=\"adjustCalendarPosition()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n          (p-close)=\"closeCalendar(false)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"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: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: true }]
@@ -24729,6 +24947,46 @@ class PoSwitchComponent extends PoFieldModel {
     _formatModel = false;
     _size = undefined;
     statusChangesSubscription;
+    /**
+     *
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /**
      * @optional
      *
@@ -25054,7 +25312,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 }, 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: [
+    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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, 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),
@@ -25070,7 +25328,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]=\"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 });
+        ], 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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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,
@@ -25090,7 +25348,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]=\"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" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\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 }]
@@ -25100,7 +25358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], value: [{
                 type: Input,
                 args: [{ alias: 'p-value', transform: convertToBoolean }]
-            }], formatModel: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], formatModel: [{
                 type: Input,
                 args: [{ alias: 'p-format-model', transform: convertToBoolean }]
             }], hideLabelStatus: [{
@@ -25260,7 +25518,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-loading", "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-compact-label", "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,
@@ -30240,6 +30498,45 @@ class PoDatepickerRangeBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /**
      * @optional
      *
@@ -30870,7 +31167,7 @@ class PoDatepickerRangeBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDatepickerRangeBaseComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PoDateService }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoDatepickerRangeBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", 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 }, 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 }, 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 }, clean: { classPropertyName: "clean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "p-end-date", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "p-min-date", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "p-max-date", isSignal: false, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "p-readonly", 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 }, startDate: { classPropertyName: "startDate", publicName: "p-start-date", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "p-locale", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", onChange: "p-change", keydown: "p-keydown" }, host: { properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoDatepickerRangeBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", 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 }, 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 }, 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 }, clean: { classPropertyName: "clean", publicName: "p-clean", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "p-end-date", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "p-min-date", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "p-max-date", isSignal: false, isRequired: false, transformFunction: null }, noAutocomplete: { classPropertyName: "noAutocomplete", publicName: "p-no-autocomplete", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "p-readonly", 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 }, startDate: { classPropertyName: "startDate", publicName: "p-start-date", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "p-locale", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", onChange: "p-change", keydown: "p-keydown" }, host: { properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDatepickerRangeBaseComponent, decorators: [{
             type: Directive
@@ -30888,7 +31185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], help: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], help: [{
                 type: Input,
                 args: ['p-help']
             }], label: [{
@@ -31555,11 +31852,11 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoDatepickerRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoDatepickerRangeComponent, isStandalone: false, selector: "po-datepicker-range", host: { listeners: { "keydown": "onKeydownDatepickerRange($event)" } }, providers: providers$5, viewQueries: [{ propertyName: "dateRangeField", first: true, predicate: ["dateRangeField"], descendants: true, read: ElementRef, static: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconCalendar", first: true, predicate: ["iconCalendar"], descendants: true }, { propertyName: "calendarPicker", first: true, predicate: ["calendarPicker"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\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    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"po-field-container-content po-field-container-content-datepicker-range\"\n    [attr.p-size]=\"size\"\n  >\n    <div class=\"po-field-container-input\" [class.readonly]=\"readonly && !isDisabled && !loading\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-datepicker-range-field-disabled]=\"isDisabled\"\n        [class.po-input-icon-right]=\"enableCleaner && !isDisabled\"\n        [attr.disabled]=\"isDisabled\"\n        [attr.aria-label]=\"label\"\n        role=\"group\"\n      >\n        <div class=\"po-datepicker-range-start-date\" [attr.data-value]=\"startDateInputValue || placeholder?.start\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"literals.startDate\"\n            [autocomplete]=\"autocomplete\"\n            [attr.data-focused-element]=\"!isDisabled\"\n            [attr.data-inactive-component]=\"isDisabled || readonly\"\n            [disabled]=\"isDisabled\"\n            [id]=\"id\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            [required]=\"required\"\n            [placeholder]=\"isDisabled ? '' : placeholder?.start\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"literals.endDate\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"isDisabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"isDisabled ? '' : placeholder?.end\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        @if (loading) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (enableCleaner) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-size]=\"size\"\n                (p-change-event)=\"clear()\"\n                (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n              ></po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconCalendar\n              class=\"po-datepicker-range-button\"\n              [class.po-button-tertiary-danger]=\"getErrorMessage\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (p-click)=\"toggleCalendar()\"\n            >\n            </po-button>\n          </div>\n        }\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\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]=\"getErrorMessage\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n}\n\n<ng-template #sharedCalendarContent>\n  <div #calendarPicker class=\"po-calendar-range-picker\" [hidden]=\"!isCalendarVisible\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      [p-size]=\"size\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n      (p-change-month-year)=\"setCalendarPosition()\"\n      (keydown)=\"onCalendarKeyDown($event)\"\n      (p-close)=\"closeCalendar()\"\n    ></po-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoDatepickerRangeComponent, isStandalone: false, selector: "po-datepicker-range", host: { listeners: { "keydown": "onKeydownDatepickerRange($event)" } }, providers: providers$5, viewQueries: [{ propertyName: "dateRangeField", first: true, predicate: ["dateRangeField"], descendants: true, read: ElementRef, static: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconCalendar", first: true, predicate: ["iconCalendar"], descendants: true }, { propertyName: "calendarPicker", first: true, predicate: ["calendarPicker"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\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  [p-compact-label]=\"compactLabel()\"\n>\n  <div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"po-field-container-content po-field-container-content-datepicker-range\"\n    [attr.p-size]=\"size\"\n  >\n    <div class=\"po-field-container-input\" [class.readonly]=\"readonly && !isDisabled && !loading\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-datepicker-range-field-disabled]=\"isDisabled\"\n        [class.po-input-icon-right]=\"enableCleaner && !isDisabled\"\n        [attr.disabled]=\"isDisabled\"\n        [attr.aria-label]=\"label\"\n        role=\"group\"\n      >\n        <div class=\"po-datepicker-range-start-date\" [attr.data-value]=\"startDateInputValue || placeholder?.start\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"literals.startDate\"\n            [autocomplete]=\"autocomplete\"\n            [attr.data-focused-element]=\"!isDisabled\"\n            [attr.data-inactive-component]=\"isDisabled || readonly\"\n            [disabled]=\"isDisabled\"\n            [id]=\"id\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            [required]=\"required\"\n            [placeholder]=\"isDisabled ? '' : placeholder?.start\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"literals.endDate\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"isDisabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"isDisabled ? '' : placeholder?.end\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        @if (loading) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (enableCleaner) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-size]=\"size\"\n                (p-change-event)=\"clear()\"\n                (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n              ></po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconCalendar\n              class=\"po-datepicker-range-button\"\n              [class.po-button-tertiary-danger]=\"getErrorMessage\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (p-click)=\"toggleCalendar()\"\n            >\n            </po-button>\n          </div>\n        }\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\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]=\"getErrorMessage\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n}\n\n<ng-template #sharedCalendarContent>\n  <div #calendarPicker class=\"po-calendar-range-picker\" [hidden]=\"!isCalendarVisible\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      [p-size]=\"size\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n      (p-change-month-year)=\"setCalendarPosition()\"\n      (keydown)=\"onCalendarKeyDown($event)\"\n      (p-close)=\"closeCalendar()\"\n    ></po-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { 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: PoDatepickerRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-datepicker-range', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$5, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\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    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"po-field-container-content po-field-container-content-datepicker-range\"\n    [attr.p-size]=\"size\"\n  >\n    <div class=\"po-field-container-input\" [class.readonly]=\"readonly && !isDisabled && !loading\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-datepicker-range-field-disabled]=\"isDisabled\"\n        [class.po-input-icon-right]=\"enableCleaner && !isDisabled\"\n        [attr.disabled]=\"isDisabled\"\n        [attr.aria-label]=\"label\"\n        role=\"group\"\n      >\n        <div class=\"po-datepicker-range-start-date\" [attr.data-value]=\"startDateInputValue || placeholder?.start\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"literals.startDate\"\n            [autocomplete]=\"autocomplete\"\n            [attr.data-focused-element]=\"!isDisabled\"\n            [attr.data-inactive-component]=\"isDisabled || readonly\"\n            [disabled]=\"isDisabled\"\n            [id]=\"id\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            [required]=\"required\"\n            [placeholder]=\"isDisabled ? '' : placeholder?.start\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"literals.endDate\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"isDisabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"isDisabled ? '' : placeholder?.end\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        @if (loading) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (enableCleaner) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-size]=\"size\"\n                (p-change-event)=\"clear()\"\n                (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n              ></po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconCalendar\n              class=\"po-datepicker-range-button\"\n              [class.po-button-tertiary-danger]=\"getErrorMessage\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (p-click)=\"toggleCalendar()\"\n            >\n            </po-button>\n          </div>\n        }\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\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]=\"getErrorMessage\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n}\n\n<ng-template #sharedCalendarContent>\n  <div #calendarPicker class=\"po-calendar-range-picker\" [hidden]=\"!isCalendarVisible\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      [p-size]=\"size\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n      (p-change-month-year)=\"setCalendarPosition()\"\n      (keydown)=\"onCalendarKeyDown($event)\"\n      (p-close)=\"closeCalendar()\"\n    ></po-calendar>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'po-datepicker-range', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$5, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\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  [p-compact-label]=\"compactLabel()\"\n>\n  <div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"po-field-container-content po-field-container-content-datepicker-range\"\n    [attr.p-size]=\"size\"\n  >\n    <div class=\"po-field-container-input\" [class.readonly]=\"readonly && !isDisabled && !loading\">\n      <div\n        #dateRangeField\n        class=\"po-datepicker-range-field po-input\"\n        [class.po-datepicker-range-field-disabled]=\"isDisabled\"\n        [class.po-input-icon-right]=\"enableCleaner && !isDisabled\"\n        [attr.disabled]=\"isDisabled\"\n        [attr.aria-label]=\"label\"\n        role=\"group\"\n      >\n        <div class=\"po-datepicker-range-start-date\" [attr.data-value]=\"startDateInputValue || placeholder?.start\">\n          <input\n            #startDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"literals.startDate\"\n            [autocomplete]=\"autocomplete\"\n            [attr.data-focused-element]=\"!isDisabled\"\n            [attr.data-inactive-component]=\"isDisabled || readonly\"\n            [disabled]=\"isDisabled\"\n            [id]=\"id\"\n            [name]=\"startDateInputName\"\n            [readonly]=\"readonly\"\n            [required]=\"required\"\n            [placeholder]=\"isDisabled ? '' : placeholder?.start\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        <div class=\"po-datepicker-range-separator\">-</div>\n\n        <div class=\"po-datepicker-range-end-date\">\n          <input\n            #endDateInput\n            class=\"po-datepicker-range-input\"\n            maxlength=\"10\"\n            type=\"text\"\n            [attr.aria-label]=\"literals.endDate\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"isDisabled\"\n            [name]=\"endDateInputName\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"isDisabled ? '' : placeholder?.end\"\n            (blur)=\"onBlur($event)\"\n            (focus)=\"onFocus($event)\"\n            (keydown)=\"onKeydown($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (click)=\"eventOnClick($event)\"\n          />\n        </div>\n\n        @if (loading) {\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        } @else {\n          <div class=\"po-field-icon-container-right\">\n            @if (enableCleaner) {\n              <po-clean\n                #iconClean\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-label]=\"literals.clean\"\n                class=\"po-icon-input\"\n                p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                [p-size]=\"size\"\n                (p-change-event)=\"clear()\"\n                (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n              ></po-clean>\n              <div class=\"po-button-vertical-divider\"></div>\n            }\n            <po-button\n              #iconCalendar\n              class=\"po-datepicker-range-button\"\n              [class.po-button-tertiary-danger]=\"getErrorMessage\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (p-click)=\"toggleCalendar()\"\n            >\n            </po-button>\n          </div>\n        }\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\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]=\"getErrorMessage\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n}\n\n<ng-template #sharedCalendarContent>\n  <div #calendarPicker class=\"po-calendar-range-picker\" [hidden]=\"!isCalendarVisible\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      [p-size]=\"size\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n      (p-change-month-year)=\"setCalendarPosition()\"\n      (keydown)=\"onCalendarKeyDown($event)\"\n      (p-close)=\"closeCalendar()\"\n    ></po-calendar>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { dateRangeField: [{
                 type: ViewChild,
                 args: ['dateRangeField', { read: ElementRef, static: true }]
@@ -31620,6 +31917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-05)`                 |
  * | `--padding`                            | Preenchimento                                         |  `0 0.5rem`                                     |
  * | `--text-color`                         | Cor do texto                                          | `var(--color-neutral-dark-90)`                  |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)  | `space-between`                                 |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                               | `1 auto`                                        |
  * | **Hover**                              |                                                       |                                                 |
  * | `--color-hover`                        | Cor principal no estado hover                         | `var(--color-brand-01-dark)`                    |
  * | `--background-hover`                   | Cor de background no estado hover                     | `var(--color-brand-01-lightest)`                |
@@ -31679,6 +31978,45 @@ class PoInputBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /**
      * @optional
      *
@@ -32302,7 +32640,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 }, 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 });
+    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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, 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
@@ -32323,7 +32661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], icon: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], icon: [{
                 type: Input,
                 args: ['p-icon']
             }], emitAllChanges: [{
@@ -33065,7 +33403,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]=\"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 });
+        ], 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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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,
@@ -33080,7 +33418,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]=\"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" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\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 }]
@@ -33447,11 +33785,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]=\"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 });
+    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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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]=\"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" }]
+            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  [p-compact-label]=\"compactLabel()\"\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: () => [] });
 
 /**
@@ -33503,7 +33841,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]=\"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 });
+        ], 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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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,
@@ -33518,7 +33856,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]=\"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" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\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 }]
@@ -33591,11 +33929,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]=\"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 });
+    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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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]=\"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" }]
+            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  [p-compact-label]=\"compactLabel()\"\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']
@@ -34286,7 +34624,7 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLookupModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLookupModalComponent, isStandalone: false, selector: "po-lookup-modal", viewQueries: [{ propertyName: "inputSearchEl", first: true, predicate: ["inpsearch"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter && advancedFilters.length > 0\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            #iconLookup\n            p-icon=\"ICON_SEARCH\"\n            class=\"po-field-icon po-icon-input\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            (click)=\"search()\"\n          >\n          </po-icon>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          [class.po-input-aa]=\"size === 'small'\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          (keydown.enter)=\"search()\"\n          type=\"text\"\n        />\n      </div>\n\n      @if (advancedFilters && advancedFilters.length > 0) {\n        <div class=\"po-lookup-advanced-search\">\n          <span\n            class=\"po-lookup-advanced-search-link\"\n            tabindex=\"0\"\n            (click)=\"onAdvancedFilter()\"\n            (keydown.enter)=\"onAdvancedFilter()\"\n          >\n            {{ literals.modalAdvancedSearch }}\n          </span>\n        </div>\n      }\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    @if (!!disclaimerGroup) {\n      <po-disclaimer-group\n        class=\"po-md-12\"\n        [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n        [p-title]=\"disclaimerGroup?.title\"\n        (p-change)=\"onChangeDisclaimerGroup()\"\n      >\n      </po-disclaimer-group>\n    }\n\n    <div class=\"po-row po-lookup-container-table\" [attr.data-multiple]=\"multiple\">\n      <po-table\n        #poTable\n        class=\"po-md-12\"\n        [p-components-size]=\"size\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"!multiple\"\n        [p-hide-action-fixed-columns]=\"true\"\n        [p-sort]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-hide-columns-manager]=\"hideColumnsManager\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-spacing]=\"spacing\"\n        [p-text-wrap]=\"textWrap\"\n        [p-virtual-scroll]=\"virtualScroll\"\n        (p-selected)=\"onSelect($event)\"\n        (p-unselected)=\"onUnselect($event)\"\n        (p-all-selected)=\"onAllSelected($event)\"\n        (p-all-unselected)=\"onAllUnselected($event)\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n        (p-change-visible-columns)=\"changeVisibleColumns.emit($event)\"\n        (p-restore-column-manager)=\"columnRestoreManager.emit($event)\"\n      >\n      </po-table>\n    </div>\n\n    <!-- DISCLAIMER -->\n    @if (multiple) {\n      <po-disclaimer-group\n        class=\"po-md-12\"\n        [p-disclaimers]=\"selecteds\"\n        (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\n        (p-remove-all)=\"onAllUnselectedTag($event)\"\n      >\n      </po-disclaimer-group>\n    }\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: PoDisclaimerGroupComponent, selector: "po-disclaimer-group" }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoTableComponent, selector: "po-table" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoLookupModalComponent, isStandalone: false, selector: "po-lookup-modal", viewQueries: [{ propertyName: "inputSearchEl", first: true, predicate: ["inpsearch"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter && advancedFilters.length > 0\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            #iconLookup\n            p-icon=\"ICON_SEARCH\"\n            class=\"po-field-icon po-icon-input\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            (click)=\"search()\"\n          >\n          </po-icon>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          [class.po-input-aa]=\"size === 'small'\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          (keydown.enter)=\"search()\"\n          type=\"text\"\n        />\n      </div>\n\n      @if (advancedFilters && advancedFilters.length > 0) {\n        <div class=\"po-lookup-advanced-search\">\n          <span\n            class=\"po-lookup-advanced-search-link\"\n            tabindex=\"0\"\n            (click)=\"onAdvancedFilter()\"\n            (keydown.enter)=\"onAdvancedFilter()\"\n          >\n            {{ literals.modalAdvancedSearch }}\n          </span>\n        </div>\n      }\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    @if (!!disclaimerGroup) {\n      <po-disclaimer-group\n        class=\"po-md-12\"\n        [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n        [p-title]=\"disclaimerGroup?.title\"\n        (p-change)=\"onChangeDisclaimerGroup()\"\n      >\n      </po-disclaimer-group>\n    }\n\n    <div class=\"po-row po-lookup-container-table\" [attr.data-multiple]=\"multiple\">\n      <po-table\n        #poTable\n        class=\"po-md-12\"\n        [p-components-size]=\"size\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"!multiple\"\n        [p-hide-action-fixed-columns]=\"true\"\n        [p-sort]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-hide-columns-manager]=\"hideColumnsManager\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-spacing]=\"spacing\"\n        [p-text-wrap]=\"textWrap\"\n        [p-virtual-scroll]=\"virtualScroll\"\n        (p-selected)=\"onSelect($event)\"\n        (p-unselected)=\"onUnselect($event)\"\n        (p-all-selected)=\"onAllSelected($event)\"\n        (p-all-unselected)=\"onAllUnselected($event)\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n        (p-change-visible-columns)=\"changeVisibleColumns.emit($event)\"\n        (p-restore-column-manager)=\"columnRestoreManager.emit($event)\"\n      >\n      </po-table>\n    </div>\n\n    <!-- DISCLAIMER -->\n    @if (multiple) {\n      <po-disclaimer-group\n        class=\"po-md-12\"\n        [p-disclaimers]=\"selecteds\"\n        (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\n        (p-remove-all)=\"onAllUnselectedTag($event)\"\n      >\n      </po-disclaimer-group>\n    }\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: PoDisclaimerGroupComponent, selector: "po-disclaimer-group" }, { 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", "p-compact-label"] }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoTableComponent, selector: "po-table" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoLookupModalComponent, decorators: [{
             type: Component,
@@ -35607,6 +35945,45 @@ class PoLookupBaseComponent {
      * @default `false`
      */
     labelTextWrap = input(false, { ...(ngDevMode ? { debugName: "labelTextWrap" } : {}), alias: 'p-label-text-wrap' });
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /**
      *
      * @deprecated v23.x.x use `p-helper`
@@ -36044,7 +36421,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 }, 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 });
+    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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", 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
@@ -36134,7 +36511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], virtualScroll: [{
                 type: Input,
                 args: [{ alias: 'p-virtual-scroll', transform: convertToBoolean }]
-            }], poHelperComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-helper", required: false }] }], labelTextWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label-text-wrap", required: false }] }], additionalHelp: [{
+            }], poHelperComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-helper", required: false }] }], labelTextWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label-text-wrap", required: false }] }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], additionalHelp: [{
                 type: Output,
                 args: ['p-additional-help']
             }], onError: [{
@@ -36638,11 +37015,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]=\"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 });
+    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      [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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]=\"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" }]
+            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      [p-compact-label]=\"compactLabel()\"\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 }]
@@ -36786,6 +37163,8 @@ const poMultiselectLiteralsDefault = {
  * | `--text-color-placeholder` &nbsp;      | Cor do texto do placeholder                           | `var(--color-action-disabled)`                    |
  * | `--color`                              | Cor principal do multiselect                          | `var(--color-neutral-dark-70)`                    |
  * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-05)`                   |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)  | `space-between`                                   |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                               | `1 auto`                                          |
  * | **Hover**                              |                                                       |                                                   |
  * | `--color-hover`                        | Cor principal no estado hover                         | `var(--color-action-hover)`                       |
  * | `--background-hover`                   | Cor de background no estado hover                     | `var(--color-brand-01-lighter)`                   |
@@ -36830,6 +37209,45 @@ class PoMultiselectBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /**
      * @optional
      *
@@ -37581,7 +37999,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 }, 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 });
+    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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, 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
@@ -37596,7 +38014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], blur: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], blur: [{
                 type: Output,
                 args: ['p-blur']
             }], label: [{
@@ -38563,11 +38981,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]=\"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 });
+    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        [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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]=\"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" }]
+            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        [p-compact-label]=\"compactLabel()\"\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 }]
@@ -38839,7 +39257,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]=\"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 });
+        ], 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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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,
@@ -38854,7 +39272,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]=\"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" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\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']
@@ -38956,7 +39374,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]=\"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 });
+        ], 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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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,
@@ -38971,7 +39389,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]=\"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" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\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']
@@ -39130,6 +39548,45 @@ class PoRichTextBaseComponent {
      * Rótulo do campo.
      */
     label;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /** Nome e identificador do campo. */
     name;
     /**
@@ -39379,7 +39836,7 @@ class PoRichTextBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextBaseComponent, deps: [{ token: PoRichTextService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoRichTextBaseComponent, isStandalone: true, inputs: { additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabledTextAlign: { classPropertyName: "disabledTextAlign", publicName: "p-disabled-text-align", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, errorMessage: { classPropertyName: "errorMessage", publicName: "p-error-message", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, hideToolbarActions: { classPropertyName: "hideToolbarActions", publicName: "p-hide-toolbar-actions", 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 }, height: { classPropertyName: "height", publicName: "p-height", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "p-readonly", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", 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 } }, outputs: { additionalHelp: "p-additional-help", change: "p-change", changeModel: "p-change-model", keydown: "p-keydown" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoRichTextBaseComponent, isStandalone: true, inputs: { additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabledTextAlign: { classPropertyName: "disabledTextAlign", publicName: "p-disabled-text-align", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, errorMessage: { classPropertyName: "errorMessage", publicName: "p-error-message", isSignal: false, isRequired: false, transformFunction: null }, errorLimit: { classPropertyName: "errorLimit", publicName: "p-error-limit", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, hideToolbarActions: { classPropertyName: "hideToolbarActions", publicName: "p-hide-toolbar-actions", 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 }, height: { classPropertyName: "height", publicName: "p-height", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "p-placeholder", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "p-readonly", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", 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 } }, outputs: { additionalHelp: "p-additional-help", change: "p-change", changeModel: "p-change-model", keydown: "p-keydown" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextBaseComponent, decorators: [{
             type: Directive
@@ -39407,7 +39864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], label: [{
                 type: Input,
                 args: ['p-label']
-            }], name: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], name: [{
                 type: Input,
                 args: ['name']
             }], optional: [{
@@ -40223,6 +40680,9 @@ const poUploadMinFileSize = 0;
  *
  * | Propriedade                            | Descrição                                             | Valor Padrão                                      |
  * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | **FIELD CONTAINER**                    |                                                       |                                                   |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)  | `space-between`                                   |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                               | `1 auto`                                          |
  * | **TEXT SUPPORT**                       |                                                       |                                                   |
  * | `--font-family-text-support`           | Família tipográfica usada no texto de suporte         | `var(--font-family-theme)`                        |
  * | `--text-color-text-support`            | Cor da fonte no texto de suporte                      | `var(--color-neutral-dark-90)`                    |
@@ -40312,6 +40772,45 @@ class PoUploadBaseComponent {
     dragDropHeight;
     /** Rótulo do campo. */
     label;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /** Texto de apoio para o campo. */
     help;
     /** URL que deve ser feita a requisição com os arquivos selecionados. */
@@ -41040,7 +41539,7 @@ class PoUploadBaseComponent {
         return files;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoUploadBaseComponent, deps: [{ token: PoUploadService }, { token: PoLanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoUploadBaseComponent, 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 }, dragDropHeight: { classPropertyName: "dragDropHeight", publicName: "p-drag-drop-height", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "p-url", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "p-auto-upload", isSignal: false, isRequired: false, transformFunction: null }, disabledRemoveFile: { classPropertyName: "disabledRemoveFile", publicName: "p-disabled-remove-file", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, showThumbnail: { classPropertyName: "showThumbnail", publicName: "p-show-thumbnail", isSignal: false, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "p-headers", isSignal: false, isRequired: false, transformFunction: null }, requiredUrl: { classPropertyName: "requiredUrl", publicName: "p-required-url", 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 }, customAction: { classPropertyName: "customAction", publicName: "p-custom-action", isSignal: false, isRequired: false, transformFunction: null }, customModalActions: { classPropertyName: "customModalActions", publicName: "p-custom-modal-actions", isSignal: false, isRequired: false, transformFunction: null }, directory: { classPropertyName: "directory", publicName: "p-directory", isSignal: false, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "p-drag-drop", isSignal: false, isRequired: false, transformFunction: null }, hideRestrictionsInfo: { classPropertyName: "hideRestrictionsInfo", publicName: "p-hide-restrictions-info", isSignal: false, isRequired: false, transformFunction: null }, hideSelectButton: { classPropertyName: "hideSelectButton", publicName: "p-hide-select-button", isSignal: false, isRequired: false, transformFunction: null }, hideSendButton: { classPropertyName: "hideSendButton", publicName: "p-hide-send-button", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, fileRestrictions: { classPropertyName: "fileRestrictions", publicName: "p-restrictions", isSignal: false, isRequired: false, transformFunction: null }, formField: { classPropertyName: "formField", publicName: "p-form-field", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "p-multiple", 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 } }, outputs: { additionalHelp: "p-additional-help", customActionClick: "p-custom-action-click", keydown: "p-keydown", onUpload: "p-upload", onCancel: "p-cancel", onOpenModalPreview: "p-open-modal-preview", onRemove: "p-remove", onError: "p-error", onSuccess: "p-success", ngModelChange: "ngModelChange" }, host: { properties: { "attr.p-required-url": "this.requiredUrl" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoUploadBaseComponent, 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 }, dragDropHeight: { classPropertyName: "dragDropHeight", publicName: "p-drag-drop-height", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "p-url", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "p-auto-upload", isSignal: false, isRequired: false, transformFunction: null }, disabledRemoveFile: { classPropertyName: "disabledRemoveFile", publicName: "p-disabled-remove-file", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, showThumbnail: { classPropertyName: "showThumbnail", publicName: "p-show-thumbnail", isSignal: false, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "p-headers", isSignal: false, isRequired: false, transformFunction: null }, requiredUrl: { classPropertyName: "requiredUrl", publicName: "p-required-url", 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 }, customAction: { classPropertyName: "customAction", publicName: "p-custom-action", isSignal: false, isRequired: false, transformFunction: null }, customModalActions: { classPropertyName: "customModalActions", publicName: "p-custom-modal-actions", isSignal: false, isRequired: false, transformFunction: null }, directory: { classPropertyName: "directory", publicName: "p-directory", isSignal: false, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "p-drag-drop", isSignal: false, isRequired: false, transformFunction: null }, hideRestrictionsInfo: { classPropertyName: "hideRestrictionsInfo", publicName: "p-hide-restrictions-info", isSignal: false, isRequired: false, transformFunction: null }, hideSelectButton: { classPropertyName: "hideSelectButton", publicName: "p-hide-select-button", isSignal: false, isRequired: false, transformFunction: null }, hideSendButton: { classPropertyName: "hideSendButton", publicName: "p-hide-send-button", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, fileRestrictions: { classPropertyName: "fileRestrictions", publicName: "p-restrictions", isSignal: false, isRequired: false, transformFunction: null }, formField: { classPropertyName: "formField", publicName: "p-form-field", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "p-multiple", 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 } }, outputs: { additionalHelp: "p-additional-help", customActionClick: "p-custom-action-click", keydown: "p-keydown", onUpload: "p-upload", onCancel: "p-cancel", onOpenModalPreview: "p-open-modal-preview", onRemove: "p-remove", onError: "p-error", onSuccess: "p-success", ngModelChange: "ngModelChange" }, host: { properties: { "attr.p-required-url": "this.requiredUrl" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoUploadBaseComponent, decorators: [{
             type: Directive
@@ -41061,7 +41560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], label: [{
                 type: Input,
                 args: ['p-label']
-            }], help: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], help: [{
                 type: Input,
                 args: ['p-help']
             }], url: [{
@@ -42073,7 +42572,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
                 useExisting: forwardRef(() => PoUploadComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true, read: ElementRef, static: true }, { propertyName: "poUploadDragDropComponent", first: true, predicate: PoUploadDragDropComponent, descendants: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }, { propertyName: "modalComponent", first: true, predicate: ["modal"], descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <div class=\"po-upload\" [attr.p-size]=\"size\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoProgressComponent, selector: "po-progress" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoUploadDragDropComponent, selector: "po-upload-drag-drop", inputs: ["p-directory-compatible", "p-disabled", "p-literals", "p-drag-drop-height"], outputs: ["p-file-change", "p-select-files"] }, { kind: "component", type: PoUploadFileRestrictionsComponent, selector: "po-upload-file-restrictions", inputs: ["p-max-files", "p-allowed-extensions", "p-max-file-size", "p-min-file-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true, read: ElementRef, static: true }, { propertyName: "poUploadDragDropComponent", first: true, predicate: PoUploadDragDropComponent, descendants: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }, { propertyName: "modalComponent", first: true, predicate: ["modal"], descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <div class=\"po-upload\" [attr.p-size]=\"size\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoProgressComponent, selector: "po-progress" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoUploadDragDropComponent, selector: "po-upload-drag-drop", inputs: ["p-directory-compatible", "p-disabled", "p-literals", "p-drag-drop-height"], outputs: ["p-file-change", "p-select-files"] }, { kind: "component", type: PoUploadFileRestrictionsComponent, selector: "po-upload-file-restrictions", inputs: ["p-max-files", "p-allowed-extensions", "p-max-file-size", "p-min-file-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoUploadComponent, decorators: [{
             type: Component,
@@ -42090,7 +42589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => PoUploadComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <div class=\"po-upload\" [attr.p-size]=\"size\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <div class=\"po-upload\" [attr.p-size]=\"size\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-size]=\"size\"\n    [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n" }]
         }], ctorParameters: () => [], propDecorators: { inputFile: [{
                 type: ViewChild,
                 args: ['inputFile', { read: ElementRef, static: true }]
@@ -42186,7 +42685,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]=\"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 });
+        ], 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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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,
@@ -42201,7 +42700,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]=\"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" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\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'];
@@ -42913,11 +43412,11 @@ class PoRichTextComponent extends PoRichTextBaseComponent {
         return setHelperSettings(label, additionalHelpTooltip, this.poHelperComponent(), this.size, this.additionalHelp.observed ? this.additionalHelp : undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoRichTextComponent, isStandalone: false, selector: "po-rich-text", providers: providers, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: PoRichTextBodyComponent, descendants: true, static: true }, { propertyName: "richTextToolbar", first: true, predicate: PoRichTextToolbarComponent, descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      [p-size]=\"size\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar?.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar?.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar?.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n      (p-keydown)=\"onKeyDown($event)\"\n    >\n    </po-rich-text-body>\n\n    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly\"\n        [p-hide-toolbar-actions]=\"toolbarActions\"\n        [p-size]=\"size\"\n        (p-link-editing)=\"richTextBody.linkEditing($event)\"\n        (p-command)=\"richTextBody.executeCommand($event)\"\n      >\n      </po-rich-text-toolbar>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"errorMsg\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }, { kind: "component", type: PoRichTextBodyComponent, selector: "po-rich-text-body", inputs: ["p-height", "p-label", "p-model-value", "p-placeholder", "p-readonly", "p-size"], outputs: ["p-change", "p-commands", "p-keydown", "p-selected-link", "p-shortcut-command", "p-value", "p-blur"] }, { kind: "component", type: PoRichTextToolbarComponent, selector: "po-rich-text-toolbar", inputs: ["p-hide-toolbar-actions", "p-readonly", "p-size"], outputs: ["p-command", "p-modal", "p-link-editing"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoRichTextComponent, isStandalone: false, selector: "po-rich-text", providers: providers, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: PoRichTextBodyComponent, descendants: true, static: true }, { propertyName: "richTextToolbar", first: true, predicate: PoRichTextToolbarComponent, descendants: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      [p-size]=\"size\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar?.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar?.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar?.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n      (p-keydown)=\"onKeyDown($event)\"\n    >\n    </po-rich-text-body>\n\n    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly\"\n        [p-hide-toolbar-actions]=\"toolbarActions\"\n        [p-size]=\"size\"\n        (p-link-editing)=\"richTextBody.linkEditing($event)\"\n        (p-command)=\"richTextBody.executeCommand($event)\"\n      >\n      </po-rich-text-toolbar>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"errorMsg\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoRichTextBodyComponent, selector: "po-rich-text-body", inputs: ["p-height", "p-label", "p-model-value", "p-placeholder", "p-readonly", "p-size"], outputs: ["p-change", "p-commands", "p-keydown", "p-selected-link", "p-shortcut-command", "p-value", "p-blur"] }, { kind: "component", type: PoRichTextToolbarComponent, selector: "po-rich-text-toolbar", inputs: ["p-hide-toolbar-actions", "p-readonly", "p-size"], outputs: ["p-command", "p-modal", "p-link-editing"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-rich-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      [p-size]=\"size\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar?.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar?.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar?.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n      (p-keydown)=\"onKeyDown($event)\"\n    >\n    </po-rich-text-body>\n\n    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly\"\n        [p-hide-toolbar-actions]=\"toolbarActions\"\n        [p-size]=\"size\"\n        (p-link-editing)=\"richTextBody.linkEditing($event)\"\n        (p-command)=\"richTextBody.executeCommand($event)\"\n      >\n      </po-rich-text-toolbar>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"errorMsg\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+            args: [{ selector: 'po-rich-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      [p-size]=\"size\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar?.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar?.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar?.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n      (p-keydown)=\"onKeyDown($event)\"\n    >\n    </po-rich-text-body>\n\n    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly\"\n        [p-hide-toolbar-actions]=\"toolbarActions\"\n        [p-size]=\"size\"\n        (p-link-editing)=\"richTextBody.linkEditing($event)\"\n        (p-command)=\"richTextBody.executeCommand($event)\"\n      >\n      </po-rich-text-toolbar>\n    }\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-error-limit]=\"errorLimit\"\n      [p-error-pattern]=\"errorMsg\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { bodyElement: [{
                 type: ViewChild,
                 args: [PoRichTextBodyComponent, { static: true }]
@@ -43098,6 +43597,8 @@ const PO_SELECT_FIELD_VALUE_DEFAULT = 'value';
  * | `--text-color`                         | Cor do texto                                          | `var(--color-neutral-dark-90)`                  |
  * | `--padding-horizontal`                 | Preenchimento horizontal                              | `0.5em`                                         |
  * | `--padding-vertical`                   | Preenchimento vertical                                | `0.7em`                                         |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)  | `space-between`                                 |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                               | `1 auto`                                        |
  * | **Hover**                              |                                                       |                                                 |
  * | `--color-hover`                        | Cor principal no estado hover                         | `var(--color-brand-01-dark)`                    |
  * | `--background-hover`                   | Cor de background no estado hover                     | `var(--color-brand-01-lighter)`                 |
@@ -43147,6 +43648,45 @@ class PoSelectComponent extends PoFieldValidateModel {
      * @default `false`
      */
     readonly = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /** Mensagem que aparecerá enquanto nenhuma opção estiver selecionada. */
     placeholder;
     displayValue;
@@ -43534,7 +44074,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 }, 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: [
+    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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, 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),
@@ -43545,7 +44085,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]=\"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 });
+        ], 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  [p-compact-label]=\"compactLabel()\"\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", "p-compact-label"] }, { 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,
@@ -43560,7 +44100,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]=\"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" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\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 }]
@@ -43576,7 +44116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], readonly: [{
                 type: Input,
                 args: [{ alias: 'p-readonly', transform: convertToBoolean }]
-            }], placeholder: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], placeholder: [{
                 type: Input,
                 args: ['p-placeholder']
             }], options: [{
@@ -43644,6 +44184,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * | `--text-color-placeholder`             | Cor do texto placeholder                              | `var(--color-neutral-light-30)`                 |
  * | `--color`                              | Cor pincipal do campo                                 | `var(--color-neutral-dark-70)`                  |
  * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-05)`                 |
+ * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)  | `space-between`                                 |
+ * | `--field-container-title-flex`         | Flex do título (`flex`)                               | `1 auto`                                        |
  *
  */
 class PoTextareaBaseComponent {
@@ -43690,6 +44232,45 @@ class PoTextareaBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @Input
+     *
+     * @optional
+     *
+     * @description
+     * Define se o título do campo será exibido de forma compacta.
+     *
+     * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
+     * - `po-label`
+     * - `p-requirement (showRequired)`
+     * - `po-helper`
+     *
+     * Ou seja, todos os elementos relacionados ao título do campo
+     * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
+     * a seguir o comportamento de layout compacto.
+     *
+     * Também é possível definir esse comportamento de forma global,
+     * uma única vez, na folha de estilo geral da aplicação, por meio
+     * da customização dos tokens CSS:
+     *
+     * - `--field-container-title-justify`
+     * - `--field-container-title-flex`
+     *
+     * Exemplo:
+     *
+     * ```
+     * :root {
+     *   --field-container-title-justify: flex-start;
+     *   --field-container-title-flex: 0 1 auto;
+     * }
+     * ```
+     *
+     * Dessa forma, o layout compacto passa a ser o padrão da aplicação,
+     * sem a necessidade de definir a propriedade individualmente em cada campo.
+     *
+     * @default `false`
+     */
+    compactLabel = input(false, { ...(ngDevMode ? { debugName: "compactLabel" } : {}), alias: 'p-compact-label', transform: convertToBoolean });
     /** Label do campo. */
     label;
     /** Texto de apoio do campo. */
@@ -44022,7 +44603,7 @@ class PoTextareaBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTextareaBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoTextareaBaseComponent, 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 }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, 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 }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "p-readonly", 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 }, minlength: { classPropertyName: "minlength", publicName: "p-minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "p-maxlength", isSignal: false, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "p-rows", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, 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" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoTextareaBaseComponent, 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 }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, 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 }, optional: { classPropertyName: "optional", publicName: "p-optional", 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 }, 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 }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "p-readonly", 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 }, minlength: { classPropertyName: "minlength", publicName: "p-minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "p-maxlength", isSignal: false, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "p-rows", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, 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" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTextareaBaseComponent, decorators: [{
             type: Directive
@@ -44037,7 +44618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], label: [{
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], label: [{
                 type: Input,
                 args: ['p-label']
             }], help: [{
@@ -44300,7 +44881,7 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
                 useExisting: forwardRef(() => PoTextareaComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.name]=\"name\"\n      [attr.p-size]=\"size\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.name]=\"name\"\n      [attr.p-size]=\"size\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTextareaComponent, decorators: [{
             type: Component,
@@ -44315,7 +44896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => PoTextareaComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.name]=\"name\"\n      [attr.p-size]=\"size\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], 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  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\" [attr.p-size]=\"size\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.name]=\"name\"\n      [attr.p-size]=\"size\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n      [p-helper]=\"!label ? poHelper.helperSettings : undefined\"\n      [p-show-helper]=\"!label ? displayAdditionalHelp : undefined\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { inputEl: [{
                 type: ViewChild,
                 args: ['inp', { read: ElementRef, static: true }]
@@ -45911,11 +46492,11 @@ 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-placeholder]=\"field.placeholder\"\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 }] });
+    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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-placeholder]=\"field.placeholder\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label", "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-compact-label", "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,
-            args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], standalone: false, 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-placeholder]=\"field.placeholder\"\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" }]
+            args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], standalone: false, 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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-placeholder]=\"field.placeholder\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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-compact-label]=\"field.compactLabel\"\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" }]
         }], ctorParameters: () => [], propDecorators: { components: [{
                 type: ViewChildren,
                 args: ['component']