@po-ui/ng-components 21.6.0 → 21.7.0

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

@@ -2248,7 +2248,7 @@ class PoControlPositionService {
      * @param targetElement elemento de onde deve partir a exibição
      * @param customPositions posições que sobrescreve as posições padrões
      * @param isSetElementWidth indica se deve definir o tamanho do elemento a ser exibido, caso for verdadeiro será igual do targetElement
-     * @param isCornerAligned indica se o elemento filho será alinhado nos cantos do elemneto pai.
+     * @param isCornerAligned indica se o elemento filho será alinhado nos cantos do elemento pai.
      */
     setElements(element, elementOffset, targetElement, customPositions, isSetElementWidth = false, isCornerAligned = false) {
         this.element = element instanceof ElementRef ? element.nativeElement : element;
@@ -6751,11 +6751,11 @@ class PoButtonComponent extends PoButtonBaseComponent {
         this.click.emit(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoButtonComponent, isStandalone: false, selector: "po-button", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon p-neutral-color [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoButtonComponent, isStandalone: false, selector: "po-button", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon p-neutral-color [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n" }]
+            args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n" }]
         }], propDecorators: { buttonElement: [{
                 type: ViewChild,
                 args: ['button', { static: true }]
@@ -6849,6 +6849,8 @@ class PoPopoverBaseComponent {
      * @default `false`
      */
     appendBox = false;
+    // Indica se o elemento filho será alinhado nos cantos do elemento pai.
+    cornerAligned = false;
     /**
      * @description
      *
@@ -6895,6 +6897,8 @@ class PoPopoverBaseComponent {
     target;
     /** Título do popover. */
     title;
+    // Define o width do popover.
+    width;
     /** Evento disparado ao fechar o popover. */
     closePopover = new EventEmitter();
     /** Evento disparado ao abrir o popover. */
@@ -6987,7 +6991,7 @@ class PoPopoverBaseComponent {
      */
     customClasses = input(undefined, { ...(ngDevMode ? { debugName: "customClasses" } : {}), alias: 'p-custom-classes' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoPopoverBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: PoPopoverBaseComponent, isStandalone: false, selector: "po-popover-base", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, target: { classPropertyName: "target", publicName: "p-target", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: false, isRequired: false, transformFunction: null }, hideArrow: { classPropertyName: "hideArrow", publicName: "p-hide-arrow", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "p-position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "p-trigger", isSignal: false, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "p-custom-classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopover: "p-close", openPopover: "p-open" }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: PoPopoverBaseComponent, isStandalone: false, selector: "po-popover-base", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, cornerAligned: { classPropertyName: "cornerAligned", publicName: "p-corner-aligned", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "p-target", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "p-width", isSignal: false, isRequired: false, transformFunction: null }, hideArrow: { classPropertyName: "hideArrow", publicName: "p-hide-arrow", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "p-position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "p-trigger", isSignal: false, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "p-custom-classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopover: "p-close", openPopover: "p-open" }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoPopoverBaseComponent, decorators: [{
             type: Component,
@@ -6999,12 +7003,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
         }], propDecorators: { appendBox: [{
                 type: Input,
                 args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
+            }], cornerAligned: [{
+                type: Input,
+                args: ['p-corner-aligned']
             }], target: [{
                 type: Input,
                 args: ['p-target']
             }], title: [{
                 type: Input,
                 args: ['p-title']
+            }], width: [{
+                type: Input,
+                args: ['p-width']
             }], closePopover: [{
                 type: Output,
                 args: ['p-close']
@@ -7052,8 +7062,10 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
     timeoutResize;
     targetElement;
     afterViewInitWasCalled = false;
+    widthPopover = undefined;
     keydownTargetListener;
     keydownPopoverListener;
+    resizeObserver;
     eventListenerFunction;
     tabbableSelector = [
         'a[href]:not([tabindex="-1"])',
@@ -7093,10 +7105,12 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         this.setRendererListenInit();
     }
     ngOnDestroy() {
+        this.disconnectResizeObserver();
         this.removeListeners();
     }
     close() {
         this.isHidden = true;
+        this.disconnectResizeObserver();
         this.closePopover.emit();
         if (this.trigger === 'function' && this.clickoutListener) {
             this.clickoutListener();
@@ -7118,6 +7132,16 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
             this.setPopoverPosition();
             this.setOpacity(1);
             this.openPopover.emit();
+            this.observeContentResize();
+            if (this.cornerAligned && !this.width) {
+                const el = this.popoverElement.nativeElement;
+                el.style.width = 'auto';
+                const width = el.scrollWidth;
+                this.widthPopover = width;
+                requestAnimationFrame(() => {
+                    this.setPopoverPosition();
+                });
+            }
             this.cd.detectChanges();
         });
         if (this.trigger === 'function') {
@@ -7212,7 +7236,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
     }
     setElementsControlPosition() {
         const popoverOffset = 8;
-        this.poControlPosition.setElements(this.popoverElement.nativeElement, popoverOffset, this.target);
+        this.poControlPosition.setElements(this.popoverElement.nativeElement, popoverOffset, this.target, undefined, false, this.cornerAligned);
     }
     focusOnTarget() {
         const el = this.targetElement;
@@ -7317,12 +7341,32 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         const prev = docTabs[idx - 1] || docTabs[docTabs.length - 1];
         prev?.focus?.();
     }
+    observeContentResize() {
+        this.disconnectResizeObserver();
+        if (!this.popoverElement?.nativeElement)
+            return;
+        let initialCall = true;
+        this.resizeObserver = new ResizeObserver(() => {
+            if (initialCall) {
+                initialCall = false;
+                return;
+            }
+            this.setElementsControlPosition();
+            this.setPopoverPosition();
+            this.cd.detectChanges();
+        });
+        this.resizeObserver.observe(this.popoverElement.nativeElement);
+    }
+    disconnectResizeObserver() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoPopoverComponent, deps: [{ token: i0.Renderer2 }, { token: PoControlPositionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoPopoverComponent, isStandalone: false, selector: "po-popover", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popoverElement", first: true, predicate: ["popoverElement"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"target\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n}\n\n<ng-template #sharedPopoverContent>\n  <div #popoverElement [hidden]=\"isHidden\" class=\"po-popover\" [ngClass]=\"customClasses()\">\n    @if (!hideArrow) {\n      <div class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n\n    <div class=\"po-popover-content\">\n      @if (title) {\n        <span class=\"po-popover-title\">{{ title }}</span>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoPopoverComponent, isStandalone: false, selector: "po-popover", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popoverElement", first: true, predicate: ["popoverElement"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"target\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n}\n\n<ng-template #sharedPopoverContent>\n  <div\n    #popoverElement\n    [hidden]=\"isHidden\"\n    class=\"po-popover\"\n    [style.width.px]=\"width ?? widthPopover\"\n    [ngClass]=\"customClasses()\"\n  >\n    @if (!hideArrow) {\n      <div class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n\n    <div class=\"po-popover-content\">\n      @if (title) {\n        <span class=\"po-popover-title\">{{ title }}</span>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-popover', providers: [PoControlPositionService], standalone: false, template: "@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"target\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n}\n\n<ng-template #sharedPopoverContent>\n  <div #popoverElement [hidden]=\"isHidden\" class=\"po-popover\" [ngClass]=\"customClasses()\">\n    @if (!hideArrow) {\n      <div class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n\n    <div class=\"po-popover-content\">\n      @if (title) {\n        <span class=\"po-popover-title\">{{ title }}</span>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'po-popover', providers: [PoControlPositionService], standalone: false, template: "@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"target\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n}\n\n<ng-template #sharedPopoverContent>\n  <div\n    #popoverElement\n    [hidden]=\"isHidden\"\n    class=\"po-popover\"\n    [style.width.px]=\"width ?? widthPopover\"\n    [ngClass]=\"customClasses()\"\n  >\n    @if (!hideArrow) {\n      <div class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n\n    <div class=\"po-popover-content\">\n      @if (title) {\n        <span class=\"po-popover-title\">{{ title }}</span>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: PoControlPositionService }, { type: i0.ChangeDetectorRef }], propDecorators: { popoverElement: [{
                 type: ViewChild,
                 args: ['popoverElement', { read: ElementRef, static: false }]
@@ -23745,7 +23789,7 @@ class PoThemeService {
         const a11yLevel = this.getA11yLevel();
         if (!this.isValidA11yLevel(a11yLevel))
             return false;
-        const defaultSize = 'small';
+        const defaultSize = enable ? 'small' : 'medium';
         document.documentElement.setAttribute('data-default-size', defaultSize);
         if (a11yLevel === PoThemeA11yEnum.AA && enable) {
             if (localStorage.getItem('po-default-size') !== defaultSize) {
@@ -39855,6 +39899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  */
 class PoRichTextBaseComponent {
     richTextService;
+    cd;
     /**
      *
      * @deprecated v23.x.x use `p-helper`
@@ -39905,6 +39950,34 @@ class PoRichTextBaseComponent {
      * @default `false`
      */
     disabledTextAlign;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Indica que o campo será desabilitado.
+     *
+     * @default `false`
+     */
+    disabled;
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = value;
+        this.cd?.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
     /**
      * @description
      *
@@ -40090,6 +40163,7 @@ class PoRichTextBaseComponent {
     invalid = false;
     onChangeModel = null;
     value;
+    _loading = false;
     _height;
     _placeholder;
     _readonly;
@@ -40188,8 +40262,15 @@ class PoRichTextBaseComponent {
      * - Não possuir `p-help` e/ou `p-label`.
      */
     showRequired = false;
-    constructor(richTextService) {
+    constructor(richTextService, cd) {
         this.richTextService = richTextService;
+        this.cd = cd;
+    }
+    // Função implementada do ControlValueAccessor
+    // Usada para interceptar os estados de habilitado via forms api
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cd.markForCheck();
     }
     onThemeChange() {
         this.applySizeBasedOnA11y();
@@ -40208,7 +40289,7 @@ class PoRichTextBaseComponent {
         this.validatorChange = fn;
     }
     validate(abstractControl) {
-        if (PoValidators.requiredFailed(this.required, false, abstractControl.value)) {
+        if (PoValidators.requiredFailed(this.required, this.disabled, abstractControl.value)) {
             return {
                 required: {
                     valid: false
@@ -40236,12 +40317,12 @@ class PoRichTextBaseComponent {
         const size = validateSizeFn(this._initialSize, PoFieldSize);
         this._size = size;
     }
-    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 }, 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" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextBaseComponent, deps: [{ token: PoRichTextService }, { token: i0.ChangeDetectorRef }], 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 }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, loading: { classPropertyName: "loading", publicName: "p-loading", 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" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: PoRichTextService }], propDecorators: { additionalHelpTooltip: [{
+        }], ctorParameters: () => [{ type: PoRichTextService }, { type: i0.ChangeDetectorRef }], propDecorators: { additionalHelpTooltip: [{
                 type: Input,
                 args: ['p-additional-help-tooltip']
             }], appendBox: [{
@@ -40253,6 +40334,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], disabledTextAlign: [{
                 type: Input,
                 args: [{ alias: 'p-disabled-text-align', transform: convertToBoolean }]
+            }], disabled: [{
+                type: Input,
+                args: [{ alias: 'p-disabled', transform: convertToBoolean }]
+            }], loading: [{
+                type: Input,
+                args: [{ alias: 'p-loading', transform: convertToBoolean }]
             }], errorMessage: [{
                 type: Input,
                 args: ['p-error-message']
@@ -40325,12 +40412,15 @@ const poRichTextBodyCommands = [
 ];
 class PoRichTextBodyComponent {
     richTextService = inject(PoRichTextService);
+    cd = inject(ChangeDetectorRef);
     bodyElement;
     height;
     label;
     modelValue;
     placeholder;
     readonly;
+    disabled = false;
+    loading = false;
     change = new EventEmitter();
     commands = new EventEmitter();
     keydown = new EventEmitter();
@@ -40344,6 +40434,12 @@ class PoRichTextBodyComponent {
     timeoutChange;
     valueBeforeChange;
     modelSubscription;
+    resizeObserver;
+    hasScroll = false;
+    hasValue = false;
+    onWindowResize() {
+        this.checkScrollState();
+    }
     ngOnInit() {
         this.bodyElement.nativeElement.designMode = 'on';
         this.modelSubscription = this.richTextService.getModel().subscribe(modelValue => {
@@ -40351,10 +40447,19 @@ class PoRichTextBodyComponent {
             this.bodyElement.nativeElement.innerHTML = '';
             this.updateValueWithModelValue();
             this.addClickListenerOnAnchorElements();
+            this.updateHasValue();
+            this.checkScrollState();
         });
+        this.initResizeObserver();
+    }
+    ngOnChanges(changes) {
+        if (changes['loading']) {
+            setTimeout(() => this.checkScrollState());
+        }
     }
     ngOnDestroy() {
         this.modelSubscription?.unsubscribe();
+        this.resizeObserver?.disconnect();
     }
     executeCommand(command) {
         this.bodyElement.nativeElement.focus();
@@ -40412,10 +40517,16 @@ class PoRichTextBodyComponent {
         this.removeBrElement();
         this.updateModel();
         this.emitSelectionCommands();
+        this.updateHasValue();
+        this.checkScrollState();
     }
     onPaste() {
         this.update();
-        setTimeout(() => this.addClickListenerOnAnchorElements());
+        setTimeout(() => {
+            this.addClickListenerOnAnchorElements();
+            this.updateHasValue();
+            this.checkScrollState();
+        });
     }
     update() {
         setTimeout(() => this.updateModel());
@@ -40423,8 +40534,14 @@ class PoRichTextBodyComponent {
             this.removeBrElement();
             this.updateModel();
             this.emitSelectionCommands();
+            this.updateHasValue();
+            this.checkScrollState();
         });
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        return mapInputSizeToLoadingIcon(size);
+    }
     addClickListenerOnAnchorElements() {
         this.bodyElement.nativeElement.querySelectorAll('a').forEach(element => {
             element.addEventListener('click', this.onAnchorClick);
@@ -40610,12 +40727,36 @@ class PoRichTextBodyComponent {
         }
         return isLink;
     }
+    get bodyEl() {
+        return this.bodyElement?.nativeElement;
+    }
+    updateHasValue() {
+        const text = this.bodyEl?.innerText?.trim();
+        this.hasValue = !!text;
+    }
+    checkScrollState() {
+        const el = this.bodyEl;
+        if (!el)
+            return;
+        this.hasScroll = el.scrollHeight > el.clientHeight;
+        this.cd.markForCheck();
+    }
+    initResizeObserver() {
+        const el = this.bodyEl;
+        if (!el || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.checkScrollState();
+        });
+        this.resizeObserver.observe(el);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: PoRichTextBodyComponent, isStandalone: false, selector: "po-rich-text-body", inputs: { height: ["p-height", "height"], label: ["p-label", "label"], modelValue: ["p-model-value", "modelValue"], placeholder: ["p-placeholder", "placeholder"], readonly: ["p-readonly", "readonly"], size: ["p-size", "size"] }, outputs: { change: "p-change", commands: "p-commands", keydown: "p-keydown", selectedLink: "p-selected-link", shortcutCommand: "p-shortcut-command", value: "p-value", blur: "p-blur" }, host: { properties: { "attr.p-size": "this.size" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["bodyElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #bodyElement\n  class=\"po-rich-text-body\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"label\"\n  [attr.contenteditable]=\"!readonly\"\n  [attr.data-placeholder]=\"placeholder\"\n  [style.height.px]=\"height\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n  (cut)=\"update()\"\n  (focus)=\"onFocus()\"\n  (keydown)=\"onKeyDown($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (paste)=\"onPaste()\"\n></div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoRichTextBodyComponent, isStandalone: false, selector: "po-rich-text-body", inputs: { height: ["p-height", "height"], label: ["p-label", "label"], modelValue: ["p-model-value", "modelValue"], placeholder: ["p-placeholder", "placeholder"], readonly: ["p-readonly", "readonly"], disabled: ["p-disabled", "disabled"], loading: ["p-loading", "loading"], size: ["p-size", "size"] }, outputs: { change: "p-change", commands: "p-commands", keydown: "p-keydown", selectedLink: "p-selected-link", shortcutCommand: "p-shortcut-command", value: "p-value", blur: "p-blur" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "attr.p-size": "this.size" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["bodyElement"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-field-container-rich-text-body\">\n  <div\n    #bodyElement\n    class=\"po-rich-text-body\"\n    [class.has-value]=\"hasValue\"\n    [class.has-scroll]=\"hasScroll\"\n    [class.has-loading]=\"loading\"\n    [class.po-rich-text-disabled]=\"disabled\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    [attr.aria-label]=\"label\"\n    [attr.contenteditable]=\"!readonly && !disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    [style.height.px]=\"height\"\n    (blur)=\"onBlur()\"\n    (click)=\"onClick()\"\n    (cut)=\"update()\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (paste)=\"onPaste()\"\n  ></div>\n  @if (loading) {\n    <div class=\"po-field-icon-container-right po-rich-text-loading-container\">\n      <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-rich-text-body', standalone: false, template: "<div\n  #bodyElement\n  class=\"po-rich-text-body\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"label\"\n  [attr.contenteditable]=\"!readonly\"\n  [attr.data-placeholder]=\"placeholder\"\n  [style.height.px]=\"height\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n  (cut)=\"update()\"\n  (focus)=\"onFocus()\"\n  (keydown)=\"onKeyDown($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (paste)=\"onPaste()\"\n></div>\n" }]
+            args: [{ selector: 'po-rich-text-body', standalone: false, template: "<div class=\"po-field-container-rich-text-body\">\n  <div\n    #bodyElement\n    class=\"po-rich-text-body\"\n    [class.has-value]=\"hasValue\"\n    [class.has-scroll]=\"hasScroll\"\n    [class.has-loading]=\"loading\"\n    [class.po-rich-text-disabled]=\"disabled\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    [attr.aria-label]=\"label\"\n    [attr.contenteditable]=\"!readonly && !disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    [style.height.px]=\"height\"\n    (blur)=\"onBlur()\"\n    (click)=\"onClick()\"\n    (cut)=\"update()\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (paste)=\"onPaste()\"\n  ></div>\n  @if (loading) {\n    <div class=\"po-field-icon-container-right po-rich-text-loading-container\">\n      <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { bodyElement: [{
                 type: ViewChild,
                 args: ['bodyElement', { static: true }]
@@ -40634,6 +40775,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], readonly: [{
                 type: Input,
                 args: ['p-readonly']
+            }], disabled: [{
+                type: Input,
+                args: ['p-disabled']
+            }], loading: [{
+                type: Input,
+                args: ['p-loading']
             }], change: [{
                 type: Output,
                 args: ['p-change']
@@ -40661,6 +40808,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], blur: [{
                 type: Output,
                 args: ['p-blur']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 const poRichTextLiteralsDefault = {
@@ -41553,6 +41703,7 @@ class PoUploadBaseComponent {
     _hideSendButton;
     _isMultiple;
     _literals;
+    _loading = false;
     _required;
     _size = undefined;
     _initialSize = undefined;
@@ -41737,6 +41888,26 @@ class PoUploadBaseComponent {
     get disabled() {
         return this._disabled;
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no botão `Selecionar arquivo`, à esquerda do texto, sinalizando que uma operação está em andamento.
+     *
+     * > Incompatível com `p-drag-drop` e `p-hide-select-button`, pois o estado de loading depende da exibição do botão `Selecionar arquivo`.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = value;
+        this.cd?.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
     /**
      * @optional
      *
@@ -41958,7 +42129,7 @@ class PoUploadBaseComponent {
         this._size = size;
     }
     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 }, 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: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-required-url": "this.requiredUrl", "attr.p-size": "this.size" } }, 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 }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, 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: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-required-url": "this.requiredUrl", "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoUploadBaseComponent, decorators: [{
             type: Directive
@@ -42072,6 +42243,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], disabled: [{
                 type: Input,
                 args: ['p-disabled']
+            }], loading: [{
+                type: Input,
+                args: [{ alias: 'p-loading', transform: convertToBoolean }]
             }], isMultiple: [{
                 type: Input,
                 args: ['p-multiple']
@@ -42615,6 +42789,13 @@ class PoUploadComponent extends PoUploadBaseComponent {
                 this.disabled ||
                 this.isExceededFileLimit(currentFiles.length));
     }
+    get isSelectButtonDisabled() {
+        return this.loading || this.isDisabled;
+    }
+    get isFieldDisabled() {
+        const isSelectButtonVisible = !this.hideSelectButton && !this.displayDragDrop;
+        return (isSelectButtonVisible && this.loading) || this.disabled;
+    }
     get maxFiles() {
         return this.isMultiple && this.fileRestrictions && this.fileRestrictions.maxFiles;
     }
@@ -42997,7 +43178,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  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-upload\">\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-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\">\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                          [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 });
+        ], 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 || isFieldDisabled\"\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\">\n    <div class=\"po-upload\">\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]=\"isSelectButtonDisabled\"\n          [p-loading]=\"loading\"\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-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\">\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                          [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]=\"isFieldDisabled\"\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,
@@ -43014,7 +43195,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  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-upload\">\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-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\">\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                          [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 || isFieldDisabled\"\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\">\n    <div class=\"po-upload\">\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]=\"isSelectButtonDisabled\"\n          [p-loading]=\"loading\"\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-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\">\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                          [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]=\"isFieldDisabled\"\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 }]
@@ -43465,6 +43646,7 @@ class PoRichTextToolbarComponent {
     get isInternetExplorer() {
         return PoUtils.isIE();
     }
+    disabled;
     size;
     constructor() {
         this.literals = {
@@ -43601,11 +43783,11 @@ class PoRichTextToolbarComponent {
         this.mediaButtons[0].disabled = state;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoRichTextToolbarComponent, isStandalone: false, selector: "po-rich-text-toolbar", inputs: { hideToolbarActions: ["p-hide-toolbar-actions", "hideToolbarActions"], readonly: ["p-readonly", "readonly"], size: ["p-size", "size"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, host: { properties: { "attr.p-size": "this.size" } }, viewQueries: [{ propertyName: "colorPickerInput", first: true, predicate: ["colorPickerInput"], descendants: true, read: ElementRef }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, static: true }, { propertyName: "richTextImageModal", first: true, predicate: PoRichTextImageModalComponent, descendants: true, static: true }, { propertyName: "richTextLinkModal", first: true, predicate: PoRichTextLinkModalComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\n  @if (!isActionHidden(formatToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"format\">\n      <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (showColor()) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n      <div class=\"po-rich-text-toolbar-color-picker-container\">\n        <button\n          type=\"button\"\n          class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n          [disabled]=\"readonly\"\n          [p-tooltip]=\"literals.textColor\"\n          [attr.aria-label]=\"literals.textColor\"\n        >\n          <input\n            #colorPickerInput\n            class=\"po-rich-text-toolbar-color-picker-input\"\n            type=\"color\"\n            [disabled]=\"readonly\"\n            (input)=\"changeTextColor($event.target.value)\"\n            [attr.aria-label]=\"literals.textColor\"\n          />\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (!isActionHidden(alignToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"align\">\n      <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(listToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"list\">\n      <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(linkToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"link\">\n      <po-button-group [p-buttons]=\"linkButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(mediaToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\n      <po-button-group [p-buttons]=\"mediaButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n</div>\n\n<po-rich-text-image-modal #richTextImageModal [p-size]=\"size\" (p-command)=\"emitCommand($event)\">\n</po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  [p-size]=\"size\"\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n", dependencies: [{ kind: "component", type: PoButtonGroupComponent, selector: "po-button-group" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoRichTextImageModalComponent, selector: "po-rich-text-image-modal", inputs: ["p-size"], outputs: ["p-command"] }, { kind: "component", type: PoRichTextLinkModalComponent, selector: "po-rich-text-link-modal", inputs: ["p-size"], outputs: ["p-command", "p-link-editing"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoRichTextToolbarComponent, isStandalone: false, selector: "po-rich-text-toolbar", inputs: { hideToolbarActions: ["p-hide-toolbar-actions", "hideToolbarActions"], readonly: ["p-readonly", "readonly"], disabled: ["p-disabled", "disabled"], size: ["p-size", "size"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, host: { properties: { "attr.p-size": "this.size" } }, viewQueries: [{ propertyName: "colorPickerInput", first: true, predicate: ["colorPickerInput"], descendants: true, read: ElementRef }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, static: true }, { propertyName: "richTextImageModal", first: true, predicate: PoRichTextImageModalComponent, descendants: true, static: true }, { propertyName: "richTextLinkModal", first: true, predicate: PoRichTextLinkModalComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"po-rich-text-toolbar\" #toolbarElement [class.po-rich-text-disabled]=\"disabled\">\n  @if (!isActionHidden(formatToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"format\">\n      <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (showColor()) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n      <div class=\"po-rich-text-toolbar-color-picker-container\">\n        <button\n          type=\"button\"\n          class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n          [disabled]=\"readonly\"\n          [p-tooltip]=\"literals.textColor\"\n          [attr.aria-label]=\"literals.textColor\"\n        >\n          <input\n            #colorPickerInput\n            class=\"po-rich-text-toolbar-color-picker-input\"\n            type=\"color\"\n            [disabled]=\"readonly\"\n            (input)=\"changeTextColor($event.target.value)\"\n            [attr.aria-label]=\"literals.textColor\"\n          />\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (!isActionHidden(alignToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"align\">\n      <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(listToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"list\">\n      <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(linkToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"link\">\n      <po-button-group [p-buttons]=\"linkButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(mediaToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\n      <po-button-group [p-buttons]=\"mediaButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n</div>\n\n<po-rich-text-image-modal #richTextImageModal [p-size]=\"size\" (p-command)=\"emitCommand($event)\">\n</po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  [p-size]=\"size\"\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n", dependencies: [{ kind: "component", type: PoButtonGroupComponent, selector: "po-button-group" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoRichTextImageModalComponent, selector: "po-rich-text-image-modal", inputs: ["p-size"], outputs: ["p-command"] }, { kind: "component", type: PoRichTextLinkModalComponent, selector: "po-rich-text-link-modal", inputs: ["p-size"], outputs: ["p-command", "p-link-editing"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoRichTextToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-rich-text-toolbar', standalone: false, template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\n  @if (!isActionHidden(formatToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"format\">\n      <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (showColor()) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n      <div class=\"po-rich-text-toolbar-color-picker-container\">\n        <button\n          type=\"button\"\n          class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n          [disabled]=\"readonly\"\n          [p-tooltip]=\"literals.textColor\"\n          [attr.aria-label]=\"literals.textColor\"\n        >\n          <input\n            #colorPickerInput\n            class=\"po-rich-text-toolbar-color-picker-input\"\n            type=\"color\"\n            [disabled]=\"readonly\"\n            (input)=\"changeTextColor($event.target.value)\"\n            [attr.aria-label]=\"literals.textColor\"\n          />\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (!isActionHidden(alignToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"align\">\n      <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(listToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"list\">\n      <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(linkToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"link\">\n      <po-button-group [p-buttons]=\"linkButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(mediaToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\n      <po-button-group [p-buttons]=\"mediaButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n</div>\n\n<po-rich-text-image-modal #richTextImageModal [p-size]=\"size\" (p-command)=\"emitCommand($event)\">\n</po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  [p-size]=\"size\"\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
+            args: [{ selector: 'po-rich-text-toolbar', standalone: false, template: "<div class=\"po-rich-text-toolbar\" #toolbarElement [class.po-rich-text-disabled]=\"disabled\">\n  @if (!isActionHidden(formatToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"format\">\n      <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (showColor()) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n      <div class=\"po-rich-text-toolbar-color-picker-container\">\n        <button\n          type=\"button\"\n          class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n          [disabled]=\"readonly\"\n          [p-tooltip]=\"literals.textColor\"\n          [attr.aria-label]=\"literals.textColor\"\n        >\n          <input\n            #colorPickerInput\n            class=\"po-rich-text-toolbar-color-picker-input\"\n            type=\"color\"\n            [disabled]=\"readonly\"\n            (input)=\"changeTextColor($event.target.value)\"\n            [attr.aria-label]=\"literals.textColor\"\n          />\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (!isActionHidden(alignToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"align\">\n      <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(listToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"list\">\n      <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(linkToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"link\">\n      <po-button-group [p-buttons]=\"linkButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n\n  @if (!isActionHidden(mediaToolbarAction)) {\n    <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\n      <po-button-group [p-buttons]=\"mediaButtons\" [p-size]=\"size\"> </po-button-group>\n    </div>\n  }\n</div>\n\n<po-rich-text-image-modal #richTextImageModal [p-size]=\"size\" (p-command)=\"emitCommand($event)\">\n</po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  [p-size]=\"size\"\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
         }], ctorParameters: () => [], propDecorators: { colorPickerInput: [{
                 type: ViewChild,
                 args: ['colorPickerInput', { read: ElementRef }]
@@ -43633,6 +43815,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], readonly: [{
                 type: Input,
                 args: ['p-readonly']
+            }], disabled: [{
+                type: Input,
+                args: ['p-disabled']
             }], size: [{
                 type: HostBinding,
                 args: ['attr.p-size']
@@ -43693,7 +43878,8 @@ class PoRichTextComponent extends PoRichTextBaseComponent {
     }
     constructor() {
         const richTextService = inject(PoRichTextService);
-        super(richTextService);
+        const cd = inject(ChangeDetectorRef);
+        super(richTextService, cd);
     }
     ngOnInit() {
         this.toolbarActions = [...this.hideToolbarActions];
@@ -43846,11 +44032,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  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\">\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 });
+    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-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 class=\"po-field-container-content\">\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-disabled]=\"isDisabled\"\n      [p-loading]=\"loading\"\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    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly || isDisabled\"\n        [p-disabled]=\"isDisabled\"\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-disabled]=\"isDisabled\"\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-disabled", "p-loading", "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-disabled", "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  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\">\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-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 class=\"po-field-container-content\">\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-disabled]=\"isDisabled\"\n      [p-loading]=\"loading\"\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    @if (!isAllActionsHidden()) {\n      <po-rich-text-toolbar\n        #richTextToolbar\n        [p-readonly]=\"readonly || isDisabled\"\n        [p-disabled]=\"isDisabled\"\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-disabled]=\"isDisabled\"\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 }]
@@ -44845,6 +45031,7 @@ class PoTextareaBaseComponent {
     keydown = new EventEmitter();
     displayAdditionalHelp = false;
     _disabled = false;
+    _loading = false;
     _maxlength;
     _minlength;
     _placeholder = '';
@@ -44881,6 +45068,24 @@ class PoTextareaBaseComponent {
     get disabled() {
         return this._disabled;
     }
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
+     *
+     * @default `false`
+     */
+    set loading(value) {
+        this._loading = value;
+        this.cd?.markForCheck();
+    }
+    get loading() {
+        return this._loading;
+    }
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
     /**
      * @optional
      *
@@ -44989,7 +45194,9 @@ class PoTextareaBaseComponent {
     }
     onThemeChange() {
         this.applySizeBasedOnA11y();
+        this.onAfterThemeChange();
     }
+    onAfterThemeChange() { }
     callOnChange(value) {
         // Quando o input não possui um formulário, então esta função não é registrada
         if (this.onChangePropagate) {
@@ -45051,6 +45258,10 @@ class PoTextareaBaseComponent {
         this.writeValueModel(value);
         this.cd.markForCheck();
     }
+    //Transforma o tamanho do input para o tamanho do ícone de loading correspondente
+    mapSizeToIcon(size) {
+        return mapInputSizeToLoadingIcon(size);
+    }
     validateModel() {
         if (this.validatorChange) {
             this.validatorChange();
@@ -45061,7 +45272,7 @@ class PoTextareaBaseComponent {
         this._size = size;
     }
     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 }, 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" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, 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 }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, 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" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTextareaBaseComponent, decorators: [{
             type: Directive
@@ -45118,6 +45329,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], disabled: [{
                 type: Input,
                 args: ['p-disabled']
+            }], loading: [{
+                type: Input,
+                args: [{ alias: 'p-loading', transform: convertToBoolean }]
             }], readonly: [{
                 type: Input,
                 args: ['p-readonly']
@@ -45180,6 +45394,9 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
     id = `po-textarea[${uuid()}]`;
     valueBeforeChange;
     fireChange = false;
+    hasScroll = false;
+    hasValue = false;
+    resizeObserver;
     constructor() {
         const cd = inject(ChangeDetectorRef);
         super(cd);
@@ -45215,11 +45432,43 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
         if (this.autoFocus) {
             this.focus();
         }
+        this.initResizeObserver();
+        window.addEventListener('resize', this.onWindowResize);
+    }
+    onAfterThemeChange() {
+        requestAnimationFrame(() => {
+            this.calculateTextareaHeight();
+            this.checkScrollState();
+        });
     }
     ngOnChanges(changes) {
         if (changes.label) {
             this.displayAdditionalHelp = false;
         }
+        if (changes.loading) {
+            if (changes.loading.isFirstChange() && this.loading) {
+                requestAnimationFrame(() => {
+                    this.calculateTextareaHeight();
+                    this.checkScrollState();
+                });
+            }
+            else {
+                this.calculateTextareaHeight();
+                requestAnimationFrame(() => {
+                    this.checkScrollState();
+                });
+            }
+        }
+        if (!changes.loading && this.loading && (changes.rows || changes.size)) {
+            requestAnimationFrame(() => {
+                this.calculateTextareaHeight();
+                this.checkScrollState();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        window.removeEventListener('resize', this.onWindowResize);
     }
     getAdditionalHelpTooltip() {
         return this.isAdditionalHelpEventTriggered() ? null : this.additionalHelpTooltip;
@@ -45242,6 +45491,8 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
             else {
                 this.inputEl.nativeElement.value = value;
             }
+            this.hasValue = !!value;
+            this.checkScrollState();
         }
         // Emite evento quando o model é atualizado, inclusive a primeira vez
         if (value) {
@@ -45255,6 +45506,8 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
         const value = this.validMaxLength(this.maxlength, event.target.value);
         this.callOnChange(value);
         this.inputEl.nativeElement.value = value;
+        this.hasValue = !!value;
+        this.checkScrollState();
     }
     eventOnFocus() {
         // Atualiza valor da variável que será usada para verificar se o campo teve alteração
@@ -45333,6 +45586,49 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
     setHelper(label, additionalHelpTooltip) {
         return setHelperSettings(label, additionalHelpTooltip, this.poHelperComponent(), this.size, this.isAdditionalHelpEventTriggered() ? this.additionalHelp : undefined);
     }
+    onWindowResize = () => {
+        this.checkScrollState();
+        if (this.loading) {
+            this.calculateTextareaHeight();
+        }
+    };
+    checkScrollState() {
+        const el = this.inputEl?.nativeElement;
+        if (!el)
+            return;
+        this.hasScroll = el.scrollHeight > el.clientHeight;
+        this.cd.markForCheck();
+    }
+    calculateTextareaHeight() {
+        const textarea = this.inputEl?.nativeElement;
+        if (!textarea)
+            return;
+        if (this.loading) {
+            textarea.style.height = '';
+            const style = getComputedStyle(textarea);
+            const lineHeight = Number.parseFloat(style.lineHeight);
+            const paddingTop = Number.parseFloat(style.paddingTop);
+            const paddingBottom = Number.parseFloat(style.paddingBottom);
+            const borderTop = Number.parseFloat(style.borderTopWidth);
+            const borderBottom = Number.parseFloat(style.borderBottomWidth);
+            const calculatedHeight = this.rows * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
+            textarea.style.height = `${calculatedHeight}px`;
+        }
+        else {
+            textarea.style.height = '';
+        }
+    }
+    initResizeObserver() {
+        const el = this.inputEl?.nativeElement;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            requestAnimationFrame(() => {
+                this.checkScrollState();
+            });
+        });
+        this.resizeObserver.observe(el);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoTextareaComponent, isStandalone: false, selector: "po-textarea", providers: [
             {
@@ -45345,7 +45641,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  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\">\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      [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 });
+        ], 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\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\">\n    <div class=\"po-field-container-textarea-body\">\n      <textarea\n        #inp\n        class=\"po-textarea\"\n        [class.has-scroll]=\"hasScroll\"\n        [class.has-value]=\"hasValue\"\n        [class.has-loading]=\"loading\"\n        (blur)=\"eventOnBlur()\"\n        (focus)=\"eventOnFocus()\"\n        (input)=\"eventOnInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [attr.name]=\"name\"\n        [disabled]=\"isDisabled\"\n        [id]=\"id\"\n        [placeholder]=\"isDisabled ? '' : placeholder\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [rows]=\"rows\"\n      ></textarea>\n      @if (loading) {\n        <div class=\"po-field-icon-container-right po-textarea-loading-container\">\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      }\n    </div>\n  </div>\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      [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: 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: PoTextareaComponent, decorators: [{
             type: Component,
@@ -45360,7 +45656,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  [p-compact-label]=\"compactLabel()\"\n>\n  <div class=\"po-field-container-content\">\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      [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\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\">\n    <div class=\"po-field-container-textarea-body\">\n      <textarea\n        #inp\n        class=\"po-textarea\"\n        [class.has-scroll]=\"hasScroll\"\n        [class.has-value]=\"hasValue\"\n        [class.has-loading]=\"loading\"\n        (blur)=\"eventOnBlur()\"\n        (focus)=\"eventOnFocus()\"\n        (input)=\"eventOnInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [attr.name]=\"name\"\n        [disabled]=\"isDisabled\"\n        [id]=\"id\"\n        [placeholder]=\"isDisabled ? '' : placeholder\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [rows]=\"rows\"\n      ></textarea>\n      @if (loading) {\n        <div class=\"po-field-icon-container-right po-textarea-loading-container\">\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      }\n    </div>\n  </div>\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      [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 }]
@@ -59677,11 +59973,11 @@ class PoHeaderToolsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderToolsComponent, deps: [{ token: i1$1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderToolsComponent, isStandalone: false, selector: "po-header-tools", inputs: { forceActionTools: ["p-force-actions-tools", "forceActionTools"], actionTools: ["p-actions-tools", "actionTools"], literals: ["p-literals", "literals"], headerTemplate: ["p-header-template", "headerTemplate"] }, viewQueries: [{ propertyName: "buttonActionElements", predicate: ["buttonActionElement"], descendants: true, read: ElementRef }, { propertyName: "buttonActionComponents", predicate: ["buttonActionElement"], descendants: true }, { propertyName: "poPopupActions", predicate: ["poPopupAction"], descendants: true }, { propertyName: "poPopoverActions", predicate: ["poPopoverAction"], descendants: true }], ngImport: i0, template: "<div class=\"po-header-nav-tools\">\n  @if (headerTemplate) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  }\n  @for (action of actionTools; track action?.label; let i = $index) {\n    <li [class.po-header-nav-item-small]=\"i !== actionTools.length - 1\">\n      <po-button\n        #buttonActionElement\n        [p-tooltip]=\"action?.tooltip\"\n        [p-icon]=\"action?.badge ? badge : action?.icon || 'an an-dots-nine'\"\n        p-kind=\"tertiary\"\n        (p-click)=\"onClickAction(i)\"\n        [class.po-header-selected-tool]=\"checkSelected(i)\"\n        [p-aria-expanded]=\"checkSelected(i)\"\n        [p-aria-label]=\"getAriaLabel(action)\"\n        p-size=\"medium\"\n      >\n      </po-button>\n\n      <ng-template #badge>\n        <i class=\"po-header-badge\" [class]=\"action?.icon || 'an an-bell'\">\n          <po-badge class=\"po-header-status\" [p-value]=\"action?.badge\"></po-badge>\n        </i>\n      </ng-template>\n\n      <po-popup\n        #poPopupAction\n        [p-actions]=\"action?.items\"\n        [p-target]=\"buttonActionElements?.get(i)\"\n        [p-hide-arrow]=\"true\"\n        (p-close)=\"onClosePopup(i)\"\n        p-size=\"medium\"\n      >\n      </po-popup>\n\n      @if (action?.popover) {\n        <po-popover\n          #poPopoverAction\n          [p-target]=\"buttonActionElements?.get(i)\"\n          p-position=\"bottom-left\"\n          [p-hide-arrow]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"action.popover?.content\"></ng-container>\n        </po-popover>\n      }\n    </li>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderToolsComponent, isStandalone: false, selector: "po-header-tools", inputs: { forceActionTools: ["p-force-actions-tools", "forceActionTools"], actionTools: ["p-actions-tools", "actionTools"], literals: ["p-literals", "literals"], headerTemplate: ["p-header-template", "headerTemplate"] }, viewQueries: [{ propertyName: "buttonActionElements", predicate: ["buttonActionElement"], descendants: true, read: ElementRef }, { propertyName: "buttonActionComponents", predicate: ["buttonActionElement"], descendants: true }, { propertyName: "poPopupActions", predicate: ["poPopupAction"], descendants: true }, { propertyName: "poPopoverActions", predicate: ["poPopoverAction"], descendants: true }], ngImport: i0, template: "<div class=\"po-header-nav-tools\">\n  @if (headerTemplate) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  }\n  @for (action of actionTools; track action?.label; let i = $index) {\n    <li [class.po-header-nav-item-small]=\"i !== actionTools.length - 1\">\n      <po-button\n        #buttonActionElement\n        [p-tooltip]=\"action?.tooltip\"\n        [p-icon]=\"action?.badge ? badge : action?.icon || 'an an-dots-nine'\"\n        p-kind=\"tertiary\"\n        (p-click)=\"onClickAction(i)\"\n        [class.po-header-selected-tool]=\"checkSelected(i)\"\n        [p-aria-expanded]=\"checkSelected(i)\"\n        [p-aria-label]=\"getAriaLabel(action)\"\n        p-size=\"medium\"\n      >\n      </po-button>\n\n      <ng-template #badge>\n        <i class=\"po-header-badge\" [class]=\"action?.icon || 'an an-bell'\">\n          <po-badge class=\"po-header-status\" [p-value]=\"action?.badge\"></po-badge>\n        </i>\n      </ng-template>\n\n      <po-popup\n        #poPopupAction\n        [p-actions]=\"action?.items\"\n        [p-target]=\"buttonActionElements?.get(i)\"\n        [p-hide-arrow]=\"true\"\n        (p-close)=\"onClosePopup(i)\"\n        p-size=\"medium\"\n      >\n      </po-popup>\n\n      @if (action?.popover) {\n        <po-popover\n          #poPopoverAction\n          p-position=\"bottom-right\"\n          [p-width]=\"action.popover.width\"\n          [p-target]=\"buttonActionElements?.get(i)\"\n          [p-hide-arrow]=\"true\"\n          [p-corner-aligned]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"action.popover?.content\"></ng-container>\n        </po-popover>\n      }\n    </li>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderToolsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-header-tools', standalone: false, template: "<div class=\"po-header-nav-tools\">\n  @if (headerTemplate) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  }\n  @for (action of actionTools; track action?.label; let i = $index) {\n    <li [class.po-header-nav-item-small]=\"i !== actionTools.length - 1\">\n      <po-button\n        #buttonActionElement\n        [p-tooltip]=\"action?.tooltip\"\n        [p-icon]=\"action?.badge ? badge : action?.icon || 'an an-dots-nine'\"\n        p-kind=\"tertiary\"\n        (p-click)=\"onClickAction(i)\"\n        [class.po-header-selected-tool]=\"checkSelected(i)\"\n        [p-aria-expanded]=\"checkSelected(i)\"\n        [p-aria-label]=\"getAriaLabel(action)\"\n        p-size=\"medium\"\n      >\n      </po-button>\n\n      <ng-template #badge>\n        <i class=\"po-header-badge\" [class]=\"action?.icon || 'an an-bell'\">\n          <po-badge class=\"po-header-status\" [p-value]=\"action?.badge\"></po-badge>\n        </i>\n      </ng-template>\n\n      <po-popup\n        #poPopupAction\n        [p-actions]=\"action?.items\"\n        [p-target]=\"buttonActionElements?.get(i)\"\n        [p-hide-arrow]=\"true\"\n        (p-close)=\"onClosePopup(i)\"\n        p-size=\"medium\"\n      >\n      </po-popup>\n\n      @if (action?.popover) {\n        <po-popover\n          #poPopoverAction\n          [p-target]=\"buttonActionElements?.get(i)\"\n          p-position=\"bottom-left\"\n          [p-hide-arrow]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"action.popover?.content\"></ng-container>\n        </po-popover>\n      }\n    </li>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-header-tools', standalone: false, template: "<div class=\"po-header-nav-tools\">\n  @if (headerTemplate) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  }\n  @for (action of actionTools; track action?.label; let i = $index) {\n    <li [class.po-header-nav-item-small]=\"i !== actionTools.length - 1\">\n      <po-button\n        #buttonActionElement\n        [p-tooltip]=\"action?.tooltip\"\n        [p-icon]=\"action?.badge ? badge : action?.icon || 'an an-dots-nine'\"\n        p-kind=\"tertiary\"\n        (p-click)=\"onClickAction(i)\"\n        [class.po-header-selected-tool]=\"checkSelected(i)\"\n        [p-aria-expanded]=\"checkSelected(i)\"\n        [p-aria-label]=\"getAriaLabel(action)\"\n        p-size=\"medium\"\n      >\n      </po-button>\n\n      <ng-template #badge>\n        <i class=\"po-header-badge\" [class]=\"action?.icon || 'an an-bell'\">\n          <po-badge class=\"po-header-status\" [p-value]=\"action?.badge\"></po-badge>\n        </i>\n      </ng-template>\n\n      <po-popup\n        #poPopupAction\n        [p-actions]=\"action?.items\"\n        [p-target]=\"buttonActionElements?.get(i)\"\n        [p-hide-arrow]=\"true\"\n        (p-close)=\"onClosePopup(i)\"\n        p-size=\"medium\"\n      >\n      </po-popup>\n\n      @if (action?.popover) {\n        <po-popover\n          #poPopoverAction\n          p-position=\"bottom-right\"\n          [p-width]=\"action.popover.width\"\n          [p-target]=\"buttonActionElements?.get(i)\"\n          [p-hide-arrow]=\"true\"\n          [p-corner-aligned]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"action.popover?.content\"></ng-container>\n        </po-popover>\n      }\n    </li>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { buttonActionElements: [{
                 type: ViewChildren,
                 args: ['buttonActionElement', { read: ElementRef }]
@@ -59760,11 +60056,11 @@ class PoHeaderCustomerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderCustomerComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderCustomerComponent, isStandalone: false, selector: "po-header-customer", inputs: { headerUser: ["p-header-user", "headerUser"] }, viewQueries: [{ propertyName: "poPopupAction", first: true, predicate: ["poPopupAction"], descendants: true }, { propertyName: "poPopoverAction", first: true, predicate: ["poPopoverAction"], descendants: true }], ngImport: i0, template: "<div class=\"po-header-nav-tools\" (click)=\"onClickUserSection()\" (keydown)=\"onKeyDownCustomer($event)\">\n  <li\n    #targetRef\n    tabindex=\"0\"\n    class=\"po-header-nav-customer-container\"\n    (click)=\"onClickPopup()\"\n    role=\"menu\"\n    [attr.aria-label]=\"literals.labelUser\"\n  >\n    <div class=\"po-header-nav-customer-brand\">\n      <img [src]=\"headerUser?.customerBrand\" alt=\"User\" />\n    </div>\n\n    <div class=\"po-header-nav-customer-divider\"></div>\n\n    <div class=\"po-header-nav-customer-avatar-wrapper\">\n      <div class=\"po-header-nav-customer-avatar\">\n        <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n      </div>\n      @if (headerUser?.status) {\n        <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n      }\n    </div>\n  </li>\n\n  <li class=\"po-header-nav-customer-avatar-wrapper po-header-icon-small\">\n    <div class=\"po-header-nav-customer-avatar\">\n      <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n    </div>\n    @if (headerUser?.status) {\n      <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n    }\n  </li>\n</div>\n\n@if (headerUser?.items?.length) {\n  <po-popup\n    #poPopupAction\n    [p-actions]=\"headerUser.items\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    p-position=\"bottom-left\"\n    p-size=\"medium\"\n  >\n  </po-popup>\n}\n\n@if (headerUser?.popover) {\n  <po-popover #poPopoverAction [p-target]=\"targetRef\" p-position=\"bottom-left\" [p-hide-arrow]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerUser.popover.content\"></ng-container>\n  </po-popover>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderCustomerComponent, isStandalone: false, selector: "po-header-customer", inputs: { headerUser: ["p-header-user", "headerUser"] }, viewQueries: [{ propertyName: "poPopupAction", first: true, predicate: ["poPopupAction"], descendants: true }, { propertyName: "poPopoverAction", first: true, predicate: ["poPopoverAction"], descendants: true }], ngImport: i0, template: "<div class=\"po-header-nav-tools\" (click)=\"onClickUserSection()\" (keydown)=\"onKeyDownCustomer($event)\">\n  <li\n    #targetRef\n    tabindex=\"0\"\n    class=\"po-header-nav-customer-container\"\n    (click)=\"onClickPopup()\"\n    role=\"menu\"\n    [attr.aria-label]=\"literals.labelUser\"\n  >\n    <div class=\"po-header-nav-customer-brand\">\n      <img [src]=\"headerUser?.customerBrand\" alt=\"User\" />\n    </div>\n\n    <div class=\"po-header-nav-customer-divider\"></div>\n\n    <div class=\"po-header-nav-customer-avatar-wrapper\">\n      <div class=\"po-header-nav-customer-avatar\">\n        <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n      </div>\n      @if (headerUser?.status) {\n        <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n      }\n    </div>\n  </li>\n\n  <li class=\"po-header-nav-customer-avatar-wrapper po-header-icon-small\">\n    <div class=\"po-header-nav-customer-avatar\">\n      <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n    </div>\n    @if (headerUser?.status) {\n      <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n    }\n  </li>\n</div>\n\n@if (headerUser?.items?.length) {\n  <po-popup\n    #poPopupAction\n    [p-actions]=\"headerUser.items\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    p-position=\"bottom-left\"\n    p-size=\"medium\"\n  >\n  </po-popup>\n}\n\n@if (headerUser?.popover) {\n  <po-popover\n    #poPopoverAction\n    p-position=\"bottom-right\"\n    [p-width]=\"headerUser.popover.width\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    [p-corner-aligned]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerUser.popover.content\"></ng-container>\n  </po-popover>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderCustomerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-header-customer', standalone: false, template: "<div class=\"po-header-nav-tools\" (click)=\"onClickUserSection()\" (keydown)=\"onKeyDownCustomer($event)\">\n  <li\n    #targetRef\n    tabindex=\"0\"\n    class=\"po-header-nav-customer-container\"\n    (click)=\"onClickPopup()\"\n    role=\"menu\"\n    [attr.aria-label]=\"literals.labelUser\"\n  >\n    <div class=\"po-header-nav-customer-brand\">\n      <img [src]=\"headerUser?.customerBrand\" alt=\"User\" />\n    </div>\n\n    <div class=\"po-header-nav-customer-divider\"></div>\n\n    <div class=\"po-header-nav-customer-avatar-wrapper\">\n      <div class=\"po-header-nav-customer-avatar\">\n        <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n      </div>\n      @if (headerUser?.status) {\n        <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n      }\n    </div>\n  </li>\n\n  <li class=\"po-header-nav-customer-avatar-wrapper po-header-icon-small\">\n    <div class=\"po-header-nav-customer-avatar\">\n      <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n    </div>\n    @if (headerUser?.status) {\n      <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n    }\n  </li>\n</div>\n\n@if (headerUser?.items?.length) {\n  <po-popup\n    #poPopupAction\n    [p-actions]=\"headerUser.items\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    p-position=\"bottom-left\"\n    p-size=\"medium\"\n  >\n  </po-popup>\n}\n\n@if (headerUser?.popover) {\n  <po-popover #poPopoverAction [p-target]=\"targetRef\" p-position=\"bottom-left\" [p-hide-arrow]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerUser.popover.content\"></ng-container>\n  </po-popover>\n}\n" }]
+            args: [{ selector: 'po-header-customer', standalone: false, template: "<div class=\"po-header-nav-tools\" (click)=\"onClickUserSection()\" (keydown)=\"onKeyDownCustomer($event)\">\n  <li\n    #targetRef\n    tabindex=\"0\"\n    class=\"po-header-nav-customer-container\"\n    (click)=\"onClickPopup()\"\n    role=\"menu\"\n    [attr.aria-label]=\"literals.labelUser\"\n  >\n    <div class=\"po-header-nav-customer-brand\">\n      <img [src]=\"headerUser?.customerBrand\" alt=\"User\" />\n    </div>\n\n    <div class=\"po-header-nav-customer-divider\"></div>\n\n    <div class=\"po-header-nav-customer-avatar-wrapper\">\n      <div class=\"po-header-nav-customer-avatar\">\n        <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n      </div>\n      @if (headerUser?.status) {\n        <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n      }\n    </div>\n  </li>\n\n  <li class=\"po-header-nav-customer-avatar-wrapper po-header-icon-small\">\n    <div class=\"po-header-nav-customer-avatar\">\n      <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n    </div>\n    @if (headerUser?.status) {\n      <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n    }\n  </li>\n</div>\n\n@if (headerUser?.items?.length) {\n  <po-popup\n    #poPopupAction\n    [p-actions]=\"headerUser.items\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    p-position=\"bottom-left\"\n    p-size=\"medium\"\n  >\n  </po-popup>\n}\n\n@if (headerUser?.popover) {\n  <po-popover\n    #poPopoverAction\n    p-position=\"bottom-right\"\n    [p-width]=\"headerUser.popover.width\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    [p-corner-aligned]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerUser.popover.content\"></ng-container>\n  </po-popover>\n}\n" }]
         }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { poPopupAction: [{
                 type: ViewChild,
                 args: ['poPopupAction']