@po-ui/ng-components 21.6.0 → 21.8.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, TemplateRef, ViewChild, HostBinding, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ChangeDetectorRef, ViewChildren, ContentChildren, InjectionToken, ViewContainerRef, Optional, Inject, input, forwardRef, Renderer2, IterableDiffers, ContentChild, Pipe, Injector, provideAppInitializer, computed } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, TemplateRef, ViewChild, HostBinding, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ChangeDetectorRef, ViewChildren, ContentChildren, InjectionToken, ViewContainerRef, Optional, Inject, input, forwardRef, Renderer2, IterableDiffers, ContentChild, model, output, signal, effect, Pipe, Injector, provideAppInitializer, computed } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, DecimalPipe, DOCUMENT, TitleCasePipe, DatePipe, NgOptimizedImage, Location } from '@angular/common';
 import * as i2 from '@angular/platform-browser';
@@ -231,6 +231,8 @@ const AnimaliaIconDictionary = {
     ICON_REFRESH: 'an an-arrow-clockwise',
     ICON_SEARCH: 'an an-magnifying-glass',
     ICON_SETTINGS: 'an an-gear-six',
+    ICON_SIDEBAR: 'an an-sidebar',
+    ICON_SIDEBAR_SIMPLES: 'an an-sidebar-simple',
     ICON_SORT: 'an an-arrows-down-up',
     ICON_SORT_ASC: 'an an-arrow-up',
     ICON_SORT_ASCENDING: 'an an-sort-ascending',
@@ -2248,7 +2250,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;
@@ -5905,8 +5907,6 @@ class PoCheckboxBaseComponent {
      */
     appendBox = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6053,8 +6053,6 @@ class PoCheckboxBaseComponent {
         return this._size ?? getDefaultSizeFn(PoCheckboxSize);
     }
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6066,8 +6064,6 @@ class PoCheckboxBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6241,8 +6237,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  */
 class PoHelperBaseComponent {
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6266,8 +6260,6 @@ class PoHelperBaseComponent {
     helper = input(undefined, { ...(ngDevMode ? { debugName: "helper" } : {}), alias: 'p-helper',
         transform: this.transformHelper.bind(this) });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6286,8 +6278,6 @@ class PoHelperBaseComponent {
         return validateSizeFn(this.size(), PoFieldSize);
     }
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6298,8 +6288,6 @@ class PoHelperBaseComponent {
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), alias: 'p-disabled' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6476,8 +6464,6 @@ var PoButtonType;
  */
 class PoButtonBaseComponent {
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6486,8 +6472,6 @@ class PoButtonBaseComponent {
      */
     label = input(undefined, { ...(ngDevMode ? { debugName: "label" } : {}), alias: 'p-label' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6514,8 +6498,6 @@ class PoButtonBaseComponent {
      */
     icon = input(undefined, { ...(ngDevMode ? { debugName: "icon" } : {}), alias: 'p-icon' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6601,8 +6583,6 @@ class PoButtonBaseComponent {
         return this._disabled;
     }
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6751,11 +6731,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 +6829,8 @@ class PoPopoverBaseComponent {
      * @default `false`
      */
     appendBox = false;
+    // Indica se o elemento filho será alinhado nos cantos do elemento pai.
+    cornerAligned = false;
     /**
      * @description
      *
@@ -6895,6 +6877,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. */
@@ -6975,8 +6959,6 @@ class PoPopoverBaseComponent {
         return this._trigger;
     }
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -6987,7 +6969,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 +6981,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 +7040,10 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
     timeoutResize;
     targetElement;
     afterViewInitWasCalled = false;
+    widthPopover = undefined;
     keydownTargetListener;
     keydownPopoverListener;
+    resizeObserver;
     eventListenerFunction;
     tabbableSelector = [
         'a[href]:not([tabindex="-1"])',
@@ -7072,6 +7062,11 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         this.poControlPosition = poControlPosition;
         this.cd = cd;
     }
+    onThemeChange() {
+        requestAnimationFrame(() => {
+            this.setPopoverPosition();
+        });
+    }
     ngOnChanges(changes) {
         if (changes['appendBox']) {
             this.cd.detectChanges();
@@ -7093,10 +7088,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 +7115,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 +7219,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,15 +7324,38 @@ 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", host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" } }, 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 }]
+            }], onThemeChange: [{
+                type: HostListener,
+                args: ['window:PoUiThemeChange']
             }] } });
 
 /**
@@ -7841,8 +7871,6 @@ class PoFieldContainerComponent {
     /** Define o tamanho do componente. */
     size;
     /**
-     * @Input
-     *
      * Define se o título do campo será exibido de forma compacta.
      *
      * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
@@ -9383,8 +9411,6 @@ const PO_TOGGLE_TYPE_DEFAULT = 'none';
  */
 class PoButtonGroupBaseComponent {
     /**
-     * @Input
-     *
      * @description
      *
      * Lista de botões.
@@ -9853,8 +9879,6 @@ class PoComboBaseComponent {
      */
     autoFocus = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -10134,8 +10158,6 @@ class PoComboBaseComponent {
      */
     listboxControlPosition = poMultiselectContainerPositionDefault$1;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -10147,8 +10169,6 @@ class PoComboBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -16316,6 +16336,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
+/**
+ * @description
+ *
+ * O componente `po-context-menu` é uma barra lateral de contexto (sidebar) para navegação interna entre contextos.
+ * Inspirado visualmente no `po-menu`, porém independente e focado em navegação contextual.
+ *
+ * No caso de uso do componente `po-page-default` em conjunto, ambos devem estar no mesmo nível
+ * e inseridos em uma div com a classe **po-context-menu-wrapper**.
+ * Esta classe é responsável por fazer os cálculos necessários para o alinhamento dos componentes.
+ *
+ * O uso simultâneo dos componentes `po-menu` e `po-context-menu` não é recomendado.
+ * Porém, se os mesmos forem necessários na mesma interface, certifique-se de que não permaneçam expandidos
+ * simultaneamente para não comprometer a usabilidade.
+ *
+ * #### Tokens customizáveis
+ *
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade                            | Descrição                                                    | Valor Padrão                                    |
+ * |----------------------------------------|--------------------------------------------------------------|-------------------------------------------------|
+ * | **Default Values**                     |                                                              |                                                 |
+ * | `--font-family`                        | Família tipográfica usada                                    | `var(--font-family-theme)`                      |
+ * | `--font-size`                          | Tamanho da fonte dos itens                                   | `var(--font-size-default)`                      |
+ * | `--font-size-context-title`            | Tamanho da fonte do título de contexto                       | `var(--font-size-sm)`                           |
+ * | `--font-size-title`                    | Tamanho da fonte do título principal                         | `var(--font-size-lg)`                           |
+ * | `--line-height`                        | Altura da linha                                              | `var(--line-height-md)`                         |
+ * | `--border-radius`                      | Raio dos cantos dos itens                                    | `var(--border-radius-md)`                       |
+ * | `--border-color`                       | Cor da borda lateral direita do componente                   | `var(--color-neutral-light-20)`                 |
+ * | `--background-color`                   | Cor de fundo do componente                                   | `var(--color-neutral-light-05)`                 |
+ * | `--color`                              | Cor do texto dos itens                                       | `var(--color-action-default)`                   |
+ * | `--color-context-title`                | Cor do texto do título de contexto                           | `var(--color-neutral-mid-40)`                   |
+ * | `--color-title`                        | Cor do texto do título principal                             | `var(--color-neutral-dark-80)`                  |
+ * | `--font-weight`                        | Peso da fonte dos itens                                      | `var(--font-weight-bold)`                       |
+ * | `--font-weight-title`                  | Peso da fonte do título principal                            | `var(--font-weight-bold)`                       |
+ * | `--outline-color-focused`              | Cor do outline no estado de focus                            | `var(--color-action-focus)`                     |
+ * | **Hover**                              |                                                              |                                                 |
+ * | `--color-hover`                        | Cor do texto no estado hover                                 | `var(--color-brand-01-darkest)`                 |
+ * | `--background-color-hover`             | Cor de fundo no estado hover                                 | `var(--color-brand-01-lighter)`                 |
+ * | **Pressed**                            |                                                              |                                                 |
+ * | `--background-color-pressed`           | Cor de fundo no estado pressed                               | `var(--color-brand-01-light)`                   |
+ * | **Active (Selected)**                  |                                                              |                                                 |
+ * | `--background-color-actived`           | Cor de fundo do item selecionado                             | `var(--color-brand-01-lightest)`                |
+ * | `--color-actived`                      | Cor do texto do item selecionado                             | `var(--color-action-pressed)`                   |
+ *
+ */
+class PoContextMenuBaseComponent {
+    /**
+     * Título do contexto superior
+     */
+    contextTitle = input('', { ...(ngDevMode ? { debugName: "contextTitle" } : {}), alias: 'p-context-title' });
+    /**
+     * Título principal do menu
+     */
+    title = input('', { ...(ngDevMode ? { debugName: "title" } : {}), alias: 'p-title' });
+    /**
+     * Lista de itens para renderização.
+     *
+     * > Ao receber os itens, o componente valida que apenas um item pode ter `selected: true`.
+     * > Se mais de um item estiver com `selected: true`, apenas o primeiro será mantido como selecionado.
+     */
+    items = input([], { ...(ngDevMode ? { debugName: "items" } : {}), alias: 'p-items' });
+    /**
+     * Define se o menu está aberto ou fechado.
+     *
+     * Suporta two-way binding:
+     *
+     * ```html
+     * <po-context-menu
+     *   [(p-expanded)]="expanded"
+     * />
+     * ```
+     *
+     * ou
+     *
+     * ```html
+     * <po-context-menu
+     *   [(p-expanded)]="expanded"
+     *   (p-expandedChange)="handlerExpanded($event)"
+     * />
+     * ```
+     *
+     * @default `true`
+     */
+    expanded = model(true, { ...(ngDevMode ? { debugName: "expanded" } : {}), alias: 'p-expanded' });
+    /**
+     * Evento emitido ao selecionar um item. Emite o item selecionado.
+     */
+    itemSelected = output({ alias: 'p-item-selected' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoContextMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoContextMenuBaseComponent, isStandalone: true, inputs: { contextTitle: { classPropertyName: "contextTitle", publicName: "p-context-title", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "p-items", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "p-expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "p-expandedChange", itemSelected: "p-item-selected" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoContextMenuBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { contextTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-context-title", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-items", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-expanded", required: false }] }, { type: i0.Output, args: ["p-expandedChange"] }], itemSelected: [{ type: i0.Output, args: ["p-item-selected"] }] } });
+
+const poContextMenuLiteralsDefault = {
+    en: {
+        close: 'Close menu',
+        open: 'Open menu'
+    },
+    es: {
+        close: 'Cerrar menú',
+        open: 'Abrir menú'
+    },
+    pt: {
+        close: 'Fechar menu',
+        open: 'Abrir menu'
+    },
+    ru: {
+        close: 'Закрыть меню',
+        open: 'Открыть меню'
+    }
+};
+/**
+ * @docsExtends PoContextMenuBaseComponent
+ *
+ * @example
+ *
+ * <example name="po-context-menu-basic" title="PO Context Menu Basic">
+ *  <file name="sample-po-context-menu-basic/sample-po-context-menu-basic.component.html"> </file>
+ *  <file name="sample-po-context-menu-basic/sample-po-context-menu-basic.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-context-menu-labs" title="PO Context Menu Labs">
+ *  <file name="sample-po-context-menu-labs/sample-po-context-menu-labs.component.html"> </file>
+ *  <file name="sample-po-context-menu-labs/sample-po-context-menu-labs.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-context-menu-user" title="PO Context - Cadastro de Usuário">
+ *  <file name="sample-po-context-menu-user/sample-po-context-menu-user.component.html"> </file>
+ *  <file name="sample-po-context-menu-user/sample-po-context-menu-user.component.ts"> </file>
+ *  <file name="sample-po-context-menu-user/sample-po-context-menu-user.component.css"> </file>
+ * </example>
+ */
+class PoContextMenuComponent extends PoContextMenuBaseComponent {
+    languageService = inject(PoLanguageService);
+    literals;
+    _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _titleTooltipCalculated = false;
+    _contextTitleTooltipCalculated = false;
+    titleTooltip = signal(null, ...(ngDevMode ? [{ debugName: "titleTooltip" }] : []));
+    contextTitleTooltip = signal(null, ...(ngDevMode ? [{ debugName: "contextTitleTooltip" }] : []));
+    constructor() {
+        super();
+        this.setLiterals();
+        effect(() => {
+            const currentItems = this.items();
+            if (this.hasMultipleSelected(currentItems)) {
+                this._items.set(this.sanitizeSelection(currentItems));
+            }
+            else {
+                this._items.set(currentItems);
+            }
+            if (this.title() !== this.titleTooltip()) {
+                this.titleTooltip.set(null);
+                this._titleTooltipCalculated = false;
+            }
+            if (this.contextTitle() !== this.contextTitleTooltip()) {
+                this.contextTitleTooltip.set(null);
+                this._contextTitleTooltipCalculated = false;
+            }
+        });
+    }
+    toggleExpand() {
+        this.expanded.update(v => !v);
+    }
+    selectItem(item) {
+        let selectedItem;
+        const updatedItems = this._items().map(i => {
+            const updated = { ...i, selected: i === item };
+            if (updated.selected) {
+                selectedItem = updated;
+            }
+            return updated;
+        });
+        this._items.set(updatedItems);
+        this.itemSelected.emit(selectedItem);
+        if (item.action) {
+            item.action(selectedItem);
+        }
+    }
+    handlerItemTooltip(item, value) {
+        if (item.tooltip) {
+            return;
+        }
+        const label = value.firstElementChild;
+        if (label.scrollHeight > label.offsetHeight) {
+            this._items.update(items => items.map(i => (i === item ? { ...i, tooltip: item.label } : i)));
+        }
+    }
+    handlerTitleTooltip(value) {
+        if (this._titleTooltipCalculated) {
+            return;
+        }
+        this.applyTooltipIfOverflows(value, this.title(), this.titleTooltip);
+        this._titleTooltipCalculated = true;
+    }
+    handlerContextTitleTooltip(value) {
+        if (this._contextTitleTooltipCalculated) {
+            return;
+        }
+        this.applyTooltipIfOverflows(value, this.contextTitle(), this.contextTitleTooltip);
+        this._contextTitleTooltipCalculated = true;
+    }
+    setLiterals() {
+        this.literals = {
+            ...poContextMenuLiteralsDefault[this.languageService?.getLanguageDefault()],
+            ...poContextMenuLiteralsDefault[this.languageService?.getShortLanguage()]
+        };
+    }
+    hasMultipleSelected(items) {
+        let count = 0;
+        for (const item of items) {
+            if (item.selected && ++count > 1) {
+                return true;
+            }
+        }
+        return false;
+    }
+    sanitizeSelection(items) {
+        const firstIndex = items.findIndex(i => i.selected);
+        return items.map((item, index) => (item.selected && index !== firstIndex ? { ...item, selected: false } : item));
+    }
+    applyTooltipIfOverflows(element, textValue, storageSignal) {
+        const hasOverflow = element.scrollHeight > element.offsetHeight;
+        if (hasOverflow) {
+            storageSignal.set(textValue);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoContextMenuComponent, isStandalone: false, selector: "po-context-menu", usesInheritance: true, ngImport: i0, template: "<div class=\"po-context-menu\" [class.po-context-menu-collapsed]=\"!expanded()\">\n  <div class=\"po-context-menu-header\">\n    <button\n      class=\"po-context-menu-toggle\"\n      type=\"button\"\n      [attr.aria-label]=\"expanded() ? literals.close : literals.open\"\n      (click)=\"toggleExpand()\"\n    >\n      <po-icon [p-icon]=\"expanded() ? 'ICON_SIDEBAR' : 'ICON_SIDEBAR_SIMPLES'\" />\n    </button>\n\n    @if (expanded()) {\n      <div class=\"po-context-menu-header-content\">\n        @if (contextTitle()) {\n          <span\n            #contextTitleRef\n            class=\"po-context-menu-context-title\"\n            (mouseenter)=\"handlerContextTitleTooltip(contextTitleRef)\"\n            p-tooltip-position=\"right\"\n            [p-tooltip]=\"contextTitleTooltip()\"\n          >\n            {{ contextTitle() }}\n          </span>\n        }\n        @if (title()) {\n          <span\n            #titleRef\n            class=\"po-context-menu-title\"\n            (mouseenter)=\"handlerTitleTooltip(titleRef)\"\n            p-tooltip-position=\"right\"\n            [p-tooltip]=\"titleTooltip()\"\n          >\n            {{ title() }}\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (expanded()) {\n    <nav class=\"po-context-menu-body\">\n      <ul class=\"po-context-menu-list\" role=\"menu\">\n        @for (item of _items(); track $index) {\n          <li\n            #itemRef\n            class=\"po-context-menu-list-item\"\n            role=\"menuitem\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"item.label\"\n            [class.po-context-menu-item-selected]=\"item.selected\"\n            (click)=\"selectItem(item)\"\n            (keydown.enter)=\"selectItem(item)\"\n            (keydown.space)=\"selectItem(item)\"\n            (mouseenter)=\"handlerItemTooltip(item, itemRef)\"\n            p-tooltip-position=\"right\"\n            [p-tooltip]=\"item.tooltip\"\n          >\n            <span class=\"po-context-menu-item-label\">{{ item.label }}</span>\n          </li>\n        }\n      </ul>\n    </nav>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-context-menu\" [class.po-context-menu-collapsed]=\"!expanded()\">\n  <div class=\"po-context-menu-header\">\n    <button\n      class=\"po-context-menu-toggle\"\n      type=\"button\"\n      [attr.aria-label]=\"expanded() ? literals.close : literals.open\"\n      (click)=\"toggleExpand()\"\n    >\n      <po-icon [p-icon]=\"expanded() ? 'ICON_SIDEBAR' : 'ICON_SIDEBAR_SIMPLES'\" />\n    </button>\n\n    @if (expanded()) {\n      <div class=\"po-context-menu-header-content\">\n        @if (contextTitle()) {\n          <span\n            #contextTitleRef\n            class=\"po-context-menu-context-title\"\n            (mouseenter)=\"handlerContextTitleTooltip(contextTitleRef)\"\n            p-tooltip-position=\"right\"\n            [p-tooltip]=\"contextTitleTooltip()\"\n          >\n            {{ contextTitle() }}\n          </span>\n        }\n        @if (title()) {\n          <span\n            #titleRef\n            class=\"po-context-menu-title\"\n            (mouseenter)=\"handlerTitleTooltip(titleRef)\"\n            p-tooltip-position=\"right\"\n            [p-tooltip]=\"titleTooltip()\"\n          >\n            {{ title() }}\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (expanded()) {\n    <nav class=\"po-context-menu-body\">\n      <ul class=\"po-context-menu-list\" role=\"menu\">\n        @for (item of _items(); track $index) {\n          <li\n            #itemRef\n            class=\"po-context-menu-list-item\"\n            role=\"menuitem\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"item.label\"\n            [class.po-context-menu-item-selected]=\"item.selected\"\n            (click)=\"selectItem(item)\"\n            (keydown.enter)=\"selectItem(item)\"\n            (keydown.space)=\"selectItem(item)\"\n            (mouseenter)=\"handlerItemTooltip(item, itemRef)\"\n            p-tooltip-position=\"right\"\n            [p-tooltip]=\"item.tooltip\"\n          >\n            <span class=\"po-context-menu-item-label\">{{ item.label }}</span>\n          </li>\n        }\n      </ul>\n    </nav>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @description
+ *
+ * Módulo do componente po-context-menu.
+ */
+class PoContextMenuModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: PoContextMenuModule, declarations: [PoContextMenuComponent], imports: [CommonModule, PoIconModule, PoTooltipModule], exports: [PoContextMenuComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoContextMenuModule, imports: [CommonModule, PoIconModule, PoTooltipModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PoIconModule, PoTooltipModule],
+                    declarations: [PoContextMenuComponent],
+                    exports: [PoContextMenuComponent]
+                }]
+        }] });
+
 const PoDisclaimerLiterals = {
     en: {
         remove: 'Remove'
@@ -17247,8 +17525,6 @@ class PoCheckboxGroupBaseComponent {
      */
     autoFocus = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -17330,8 +17606,6 @@ class PoCheckboxGroupBaseComponent {
      */
     errorLimit = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -17343,8 +17617,6 @@ class PoCheckboxGroupBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -18033,8 +18305,6 @@ class PoRadioGroupBaseComponent {
      */
     autoFocus = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -18112,8 +18382,6 @@ class PoRadioGroupBaseComponent {
      */
     errorLimit = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -18125,8 +18393,6 @@ class PoRadioGroupBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -19612,8 +19878,6 @@ class PoDatepickerBaseComponent {
      */
     autoFocus = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -19747,8 +20011,6 @@ class PoDatepickerBaseComponent {
      */
     keydown = new EventEmitter();
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -19760,8 +20022,6 @@ class PoDatepickerBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -23745,7 +24005,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) {
@@ -25229,9 +25489,6 @@ class PoSwitchComponent extends PoFieldModel {
     _initialSize = undefined;
     statusChangesSubscription;
     /**
-     *
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -25409,8 +25666,6 @@ class PoSwitchComponent extends PoFieldModel {
         return this._size ?? getDefaultSizeFn(PoFieldSize);
     }
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -25422,8 +25677,6 @@ class PoSwitchComponent extends PoFieldModel {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -30831,8 +31084,6 @@ class PoDatepickerRangeBaseComponent {
      */
     autoFocus = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -30960,8 +31211,6 @@ class PoDatepickerRangeBaseComponent {
      */
     errorLimit = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -30973,8 +31222,6 @@ class PoDatepickerRangeBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -32323,8 +32570,6 @@ class PoInputBaseComponent {
      */
     autoFocus = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -32776,8 +33021,6 @@ class PoInputBaseComponent {
         }
     }
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -32789,8 +33032,6 @@ class PoInputBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -36283,8 +36524,6 @@ class PoLookupBaseComponent {
      */
     virtualScroll = true;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -36296,8 +36535,6 @@ class PoLookupBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -36310,8 +36547,6 @@ class PoLookupBaseComponent {
      */
     labelTextWrap = input(false, { ...(ngDevMode ? { debugName: "labelTextWrap" } : {}), alias: 'p-label-text-wrap' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -37587,8 +37822,6 @@ class PoMultiselectBaseComponent {
      */
     autoFocus = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -37761,8 +37994,6 @@ class PoMultiselectBaseComponent {
      */
     listboxControlPosition = poMultiselectContainerPositionDefault;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -37774,8 +38005,6 @@ class PoMultiselectBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -39855,6 +40084,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 +40135,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
      *
@@ -39941,8 +40199,6 @@ class PoRichTextBaseComponent {
      */
     label;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -40024,8 +40280,6 @@ class PoRichTextBaseComponent {
         return this._hideToolbarActions;
     }
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -40037,8 +40291,6 @@ class PoRichTextBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -40090,6 +40342,7 @@ class PoRichTextBaseComponent {
     invalid = false;
     onChangeModel = null;
     value;
+    _loading = false;
     _height;
     _placeholder;
     _readonly;
@@ -40188,8 +40441,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 +40468,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 +40496,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 +40513,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 +40591,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 +40613,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 +40626,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 +40696,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 +40713,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 +40906,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 +40954,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 +40987,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 = {
@@ -41183,8 +41512,6 @@ class PoUploadBaseComponent {
     /** Rótulo do campo. */
     label;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -41295,8 +41622,6 @@ class PoUploadBaseComponent {
      */
     requiredUrl = true;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -41308,8 +41633,6 @@ class PoUploadBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -41553,6 +41876,7 @@ class PoUploadBaseComponent {
     _hideSendButton;
     _isMultiple;
     _literals;
+    _loading = false;
     _required;
     _size = undefined;
     _initialSize = undefined;
@@ -41737,6 +42061,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 +42302,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 +42416,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 +42962,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 +43351,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 +43368,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 +43819,7 @@ class PoRichTextToolbarComponent {
     get isInternetExplorer() {
         return PoUtils.isIE();
     }
+    disabled;
     size;
     constructor() {
         this.literals = {
@@ -43601,11 +43956,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 +43988,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 +44051,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 +44205,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 }]
@@ -44083,8 +44442,6 @@ class PoSelectComponent extends PoFieldValidateModel {
      */
     readonly = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -44283,8 +44640,6 @@ class PoSelectComponent extends PoFieldValidateModel {
         return this._size ?? getDefaultSizeFn(PoFieldSize);
     }
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -44296,8 +44651,6 @@ class PoSelectComponent extends PoFieldValidateModel {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -44682,8 +45035,6 @@ class PoTextareaBaseComponent {
      */
     autoFocus = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -44765,8 +45116,6 @@ class PoTextareaBaseComponent {
      */
     errorLimit = false;
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -44778,8 +45127,6 @@ class PoTextareaBaseComponent {
      */
     poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : {}), alias: 'p-helper' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -44845,6 +45192,7 @@ class PoTextareaBaseComponent {
     keydown = new EventEmitter();
     displayAdditionalHelp = false;
     _disabled = false;
+    _loading = false;
     _maxlength;
     _minlength;
     _placeholder = '';
@@ -44881,6 +45229,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 +45355,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 +45419,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 +45433,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 +45490,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 +45555,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 +45593,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 +45652,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 +45667,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 +45747,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 +45802,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 +45817,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 }]
@@ -50627,6 +51084,18 @@ class PoMenuBaseComponent {
      * @default `false`
      */
     automaticToggle = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento emitido toda vez que o estado do menu muda, enviando `true` quando expandido e `false` quando colapsado.
+     *
+     * ```html
+     * <po-menu (p-toggle)="onMenuToggle($event)"></po-menu>
+     * ```
+     */
+    toggleChange = output({ alias: 'p-toggle' });
     /**
      * @optional
      *
@@ -50965,14 +51434,14 @@ class PoMenuBaseComponent {
         this._componentsSize = size;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoMenuBaseComponent, deps: [{ token: PoMenuGlobalService }, { token: PoMenuService }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoMenuBaseComponent, isStandalone: true, inputs: { automaticToggle: ["p-automatic-toggle", "automaticToggle", convertToBoolean], collapsed: ["p-collapsed", "collapsed"], componentsSize: ["p-components-size", "componentsSize"], menus: ["p-menus", "menus"], filter: ["p-filter", "filter"], searchTreeItems: ["p-search-tree-items", "searchTreeItems"], service: ["p-service", "service"], params: ["p-params", "params"], logo: ["p-logo", "logo"], menuid: ["p-menu-id", "menuid"], logoAlt: ["p-logo-alt", "logoAlt"], shortLogo: ["p-short-logo", "shortLogo"], onlyMenuItem: ["p-only-menu-item", "onlyMenuItem"], logoLink: ["p-logo-link", "logoLink"] }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-components-size": "this.componentsSize" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoMenuBaseComponent, isStandalone: true, inputs: { automaticToggle: ["p-automatic-toggle", "automaticToggle", convertToBoolean], collapsed: ["p-collapsed", "collapsed"], componentsSize: ["p-components-size", "componentsSize"], menus: ["p-menus", "menus"], filter: ["p-filter", "filter"], searchTreeItems: ["p-search-tree-items", "searchTreeItems"], service: ["p-service", "service"], params: ["p-params", "params"], logo: ["p-logo", "logo"], menuid: ["p-menu-id", "menuid"], logoAlt: ["p-logo-alt", "logoAlt"], shortLogo: ["p-short-logo", "shortLogo"], onlyMenuItem: ["p-only-menu-item", "onlyMenuItem"], logoLink: ["p-logo-link", "logoLink"] }, outputs: { toggleChange: "p-toggle" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-components-size": "this.componentsSize" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoMenuBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: PoMenuGlobalService }, { type: PoMenuService }, { type: PoLanguageService }], propDecorators: { automaticToggle: [{
                 type: Input,
                 args: [{ alias: 'p-automatic-toggle', transform: convertToBoolean }]
-            }], collapsed: [{
+            }], toggleChange: [{ type: i0.Output, args: ["p-toggle"] }], collapsed: [{
                 type: Input,
                 args: ['p-collapsed']
             }], componentsSize: [{
@@ -51263,13 +51732,13 @@ class PoMenuComponent extends PoMenuBaseComponent {
     }
     onMouseEnter() {
         if (this.collapsed && this.automaticToggle) {
-            this.collapsed = false;
+            this.setCollapsed(false);
             this.allowCollapseHover = true;
         }
     }
     onMouseLeave() {
         if (!this.collapsed && this.allowCollapseHover && this.automaticToggle) {
-            this.collapsed = true;
+            this.setCollapsed(true);
         }
     }
     checkingRouterChildrenFragments() {
@@ -51478,7 +51947,7 @@ class PoMenuComponent extends PoMenuBaseComponent {
         this.groupedMenuItem['isOpened'] = !this.collapsed && this.allowCollapseMenu;
     }
     toggleMenuCollapse(collapsed = false) {
-        this.collapsed = collapsed;
+        this.setCollapsed(collapsed);
         if (this.groupedMenuItem && this.activeMenuItem) {
             this.groupedMenuItem =
                 this.getActiveMenuParent(this.menus, this.activeMenuItem, this.groupedMenuItem) || this.groupedMenuItem;
@@ -51514,6 +51983,10 @@ class PoMenuComponent extends PoMenuBaseComponent {
         this.menuPrevious = this.stringify(this.menus);
         this.validateMenus(this.menus);
     }
+    setCollapsed(value) {
+        this.collapsed = value;
+        this.toggleChange.emit(!value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoMenuComponent, isStandalone: false, selector: "po-menu", providers: [PoMenuItemsService, PoMenuService], queries: [{ propertyName: "menuHeaderTemplate", first: true, predicate: PoMenuHeaderTemplateDirective, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (onlyMenuItem) {\n  <ng-container *ngTemplateOutlet=\"menuItemsTemplate; context: { showFilter: true, showTemplate: true }\"></ng-container>\n} @else {\n  @if (mobileOpened) {\n    <div class=\"po-menu-overlay\" (click)=\"toggleMenuMobile()\"></div>\n  }\n  <div>\n    <div class=\"po-menu-mobile po-clickable\" (click)=\"toggleMenuMobile()\">\n      <po-icon p-icon=\"ICON_MENU\"></po-icon>\n    </div>\n    <div class=\"po-menu\" [attr.aria-expanded]=\"!collapsed\" [ngClass]=\"{ 'po-menu-animation': mobileOpened }\">\n      <div class=\"po-menu-container\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n        <div class=\"po-menu-header\">\n          @if (logo || (shortLogo && enableCollapse)) {\n            <div class=\"po-menu-header-container-logo\">\n              <po-logo\n                [p-class]=\"enableCollapse ? 'po-menu-short-logo' : 'po-menu-logo'\"\n                [p-logo]=\"enableCollapse ? shortLogo || logo : logo\"\n                [p-logo-alt]=\"logoAlt\"\n                [p-link]=\"logoLink\"\n              ></po-logo>\n            </div>\n          }\n          @if (!enableCollapse && menuHeaderTemplate) {\n            <div class=\"po-menu-header-template\">\n              <ng-container *ngTemplateOutlet=\"menuCustomTemplate\"></ng-container>\n            </div>\n          }\n          @if (filter) {\n            <ng-container *ngTemplateOutlet=\"menuFilterTemplate\"></ng-container>\n          }\n        </div>\n        <div class=\"po-menu-body\">\n          <div class=\"po-menu-outer\">\n            <div class=\"po-menu-inner\">\n              <nav class=\"po-menu-nav\">\n                <ng-container\n                  *ngTemplateOutlet=\"menuItemsTemplate; context: { showFilter: false, showTemplate: false }\"\n                ></ng-container>\n              </nav>\n            </div>\n          </div>\n        </div>\n      </div>\n      @if (hasFooter) {\n        <div class=\"po-menu-footer\">\n          <button\n            class=\"po-menu-collapse-button-icon\"\n            type=\"button\"\n            [attr.aria-label]=\"enableCollapseButton ? literals.close : literals.open\"\n            (click)=\"toggle()\"\n          >\n            @if (enableCollapseButton) {\n              <span aria-hidden=\"true\">{{ literals.close }}</span>\n            }\n            <po-icon [p-icon]=\"enableCollapse ? 'ICON_MENU_OPEN' : 'ICON_MENU_CLOSE'\"></po-icon>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #menuCustomTemplate>\n  <ng-container *ngTemplateOutlet=\"menuHeaderTemplate.templateRef\"></ng-container>\n</ng-template>\n\n<ng-template #menuFilterTemplate>\n  <po-menu-filter\n    [p-enable-collapse]=\"enableCollapse\"\n    [p-loading]=\"filterLoading\"\n    [p-components-size]=\"componentsSize\"\n    (p-filter)=\"debounceFilter($event)\"\n  ></po-menu-filter>\n</ng-template>\n\n<ng-template #menuItemsTemplate let-showFilter=\"showFilter\" let-showTemplate=\"showTemplate\">\n  @if (menuHeaderTemplate && showTemplate) {\n    <ng-container *ngTemplateOutlet=\"menuCustomTemplate\"></ng-container>\n  }\n\n  @if (filter && showFilter) {\n    <ng-container *ngTemplateOutlet=\"menuFilterTemplate\"></ng-container>\n  }\n\n  <ul class=\"po-menu-list\" role=\"menu\">\n    @if (noData) {\n      <li class=\"po-menu-list-item\" role=\"presentation\">\n        <po-menu-item\n          p-icon=\"ICON_INFO\"\n          p-type=\"noData\"\n          [p-level]=\"1\"\n          [p-label]=\"literals.itemNotFound\"\n          [p-short-label]=\"literals.itemNotFound\"\n        ></po-menu-item>\n      </li>\n    }\n    @for (menu of filteredItems; track menu; let menuIndex = $index) {\n      <li\n        class=\"po-menu-list-item\"\n        role=\"presentation\"\n        [attr.aria-level]=\"menu.level\"\n        [class.po-menu-item-first]=\"menuIndex === 0\"\n      >\n        <po-menu-item\n          [p-action]=\"menu.action\"\n          [p-badge-alert]=\"menu.badgeAlert\"\n          [p-badge-color]=\"menu.badge?.color\"\n          [p-badge-value]=\"menu.badge?.value\"\n          [p-collapsed-menu]=\"enableCollapse\"\n          [p-icon]=\"allowIcons ? menu.icon : null\"\n          [p-id]=\"menu.id\"\n          [p-label]=\"menu.label\"\n          [p-level]=\"menu.level\"\n          [p-link]=\"menu.link\"\n          [p-short-label]=\"menu.shortLabel\"\n          [p-sub-items]=\"menu.subItems\"\n          [p-type]=\"menu.type\"\n        ></po-menu-item>\n      </li>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoLogoComponent, selector: "po-logo", inputs: ["p-class", "p-link", "p-logo", "p-logo-alt"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoMenuFilterComponent, selector: "po-menu-filter", inputs: ["p-components-size", "p-loading", "p-enable-collapse"], outputs: ["p-filter"] }, { kind: "component", type: PoMenuItemComponent, selector: "po-menu-item", inputs: ["p-action", "p-badge-alert", "p-badge-color", "p-collapsed-menu", "p-icon", "p-id", "p-is-opened", "p-label", "p-level", "p-link", "p-short-label", "p-type", "p-badge-value", "p-is-selected", "p-is-sub-item", "p-sub-items"] }] });
 }
@@ -53957,9 +54430,6 @@ var PoSkeletonVariant;
  */
 class PoSkeletonBaseComponent {
     /**
-     *
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -53976,9 +54446,6 @@ class PoSkeletonBaseComponent {
      */
     variant = input(PoSkeletonVariant.text, { ...(ngDevMode ? { debugName: "variant" } : {}), alias: 'p-variant' });
     /**
-     *
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -53994,9 +54461,6 @@ class PoSkeletonBaseComponent {
      */
     type = input(PoSkeletonType.normal, { ...(ngDevMode ? { debugName: "type" } : {}), alias: 'p-type' });
     /**
-     *
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -54012,9 +54476,6 @@ class PoSkeletonBaseComponent {
      */
     animation = input(PoSkeletonAnimation.shimmer, { ...(ngDevMode ? { debugName: "animation" } : {}), alias: 'p-animation' });
     /**
-     *
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -54035,9 +54496,6 @@ class PoSkeletonBaseComponent {
      */
     size = input(PoSkeletonSize.md, { ...(ngDevMode ? { debugName: "size" } : {}), alias: 'p-size' });
     /**
-     *
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -54051,8 +54509,6 @@ class PoSkeletonBaseComponent {
      */
     width = input('', { ...(ngDevMode ? { debugName: "width" } : {}), alias: 'p-width' });
     /**
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -54064,9 +54520,6 @@ class PoSkeletonBaseComponent {
      */
     height = input('', { ...(ngDevMode ? { debugName: "height" } : {}), alias: 'p-height' });
     /**
-     *
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -54078,9 +54531,6 @@ class PoSkeletonBaseComponent {
      */
     borderRadius = input('', { ...(ngDevMode ? { debugName: "borderRadius" } : {}), alias: 'p-border-radius' });
     /**
-     *
-     * @Input
-     *
      * @optional
      *
      * @description
@@ -56087,6 +56537,8 @@ class PoTabBaseComponent {
      * @default `false`
      */
     hideClose = false;
+    /** ID da Tab */
+    id = uuid();
     /** Método disparado ao clicar na aba. */
     click = new EventEmitter();
     /**
@@ -56100,8 +56552,15 @@ class PoTabBaseComponent {
      *
      */
     closeTab = new EventEmitter();
-    // ID da aba
-    id = uuid();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento emitido quando a aba é ativada.
+     * Emite a instância do componente da aba que foi ativada.
+     */
+    activatedTab = output({ alias: 'p-activated-tab' });
     _active = false;
     _disabled = false;
     _hide = false;
@@ -56157,7 +56616,7 @@ class PoTabBaseComponent {
         return this._hide;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTabBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoTabBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], hideClose: ["p-hide-close", "hideClose", convertToBoolean], active: ["p-active", "active"], disabled: ["p-disabled", "disabled"], hide: ["p-hide", "hide"] }, outputs: { click: "p-click", closeTab: "p-close-tab" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoTabBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], hideClose: ["p-hide-close", "hideClose", convertToBoolean], id: "id", active: ["p-active", "active"], disabled: ["p-disabled", "disabled"], hide: ["p-hide", "hide"] }, outputs: { click: "p-click", closeTab: "p-close-tab", activatedTab: "p-activated-tab" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTabBaseComponent, decorators: [{
             type: Directive
@@ -56167,13 +56626,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], hideClose: [{
                 type: Input,
                 args: [{ alias: 'p-hide-close', transform: convertToBoolean }]
+            }], id: [{
+                type: Input,
+                args: ['id']
             }], click: [{
                 type: Output,
                 args: ['p-click']
             }], closeTab: [{
                 type: Output,
                 args: ['p-close-tab']
-            }], active: [{
+            }], activatedTab: [{ type: i0.Output, args: ["p-activated-tab"] }], active: [{
                 type: Input,
                 args: ['p-active']
             }], disabled: [{
@@ -56691,6 +57153,7 @@ class PoTabsComponent extends PoTabsBaseComponent {
     // Função disparada quando alguma tab ficar ativa
     onTabActive(tab) {
         this.previousActiveTab = this.tabsChildren.find(tabChild => tabChild.active && tabChild.id !== tab.id);
+        tab.activatedTab.emit(tab);
         this.deactivateTab();
     }
     // funcao será disparada quando mudar o estado do poTab para desabilitado ou escondido.
@@ -56947,6 +57410,31 @@ class PoTabsComponent extends PoTabsBaseComponent {
             this.setTabIndex(tabRemoveElements[0], 0);
         }
     }
+    /**
+     * Ativa a aba correspondente ao `id` informado.
+     *
+     * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
+     *
+     * ```
+     * import { PoTabsComponent } from '@po-ui/ng-components';
+     *
+     * ...
+     *
+     * @ViewChild('poTab', { static: true }) poTab: PoTabsComponent;
+     *
+     * focusOnTab() {
+     *   this.poTab.activateTab('meu-id-da-aba');
+     * }
+     * ```
+     *
+     * @param id Identificador único da aba a ser ativada.
+     */
+    activateTab(id) {
+        const tab = this.tabsChildrenArray.find(x => x.id === id);
+        if (tab) {
+            this.selectedTab(tab);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoTabsComponent, isStandalone: false, selector: "po-tabs", queries: [{ propertyName: "tabsChildren", predicate: PoTabComponent }], viewQueries: [{ propertyName: "tabDropdown", first: true, predicate: ["tabDropdown"], descendants: true, static: true }, { propertyName: "containerTabs", first: true, predicate: ["containerTabs"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabButton", predicate: ["tabButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-tabs-container\">\n  <div #containerTabs class=\"po-tabs-header\">\n    <div class=\"po-tabs-button-wrapper\" role=\"tablist\">\n      @for (tab of tabs; track trackByFn($index, tab)) {\n        <po-tab-button\n          #tabButton\n          class=\"po-tab-button\"\n          [p-active]=\"tab.active\"\n          [p-disabled]=\"tab.disabled\"\n          [p-hide]=\"tab.hide\"\n          [p-id]=\"tab.id\"\n          [hidden]=\"tab.hide\"\n          [attr.disabled]=\"tab.disabled\"\n          [p-label]=\"tab.label\"\n          [id]=\"tab.id\"\n          (keyup.enter)=\"closeListbox()\"\n          (p-activated)=\"onTabActive(tab)\"\n          (p-change-state)=\"onTabChangeState(tab)\"\n          (p-click)=\"selectedTab(tab)\"\n        >\n        </po-tab-button>\n      }\n\n      @if (isShowTabDropdown) {\n        <po-tab-dropdown\n          #tabDropdown\n          class=\"po-tab-dropdown\"\n          [class.po-tab-dropdown-device]=\"!tabsDefault?.length\"\n          [p-label]=\"literals.moreTabs\"\n          [p-size]=\"size\"\n          [p-tabs]=\"overflowedTabs\"\n          (p-change-state)=\"onTabChangeState($event)\"\n          (p-click)=\"onTabActiveByDropdown($event)\"\n        >\n        </po-tab-dropdown>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"po-tabs-content\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: PoTabButtonComponent, selector: "po-tab-button", inputs: ["p-disabled", "p-id", "p-label", "p-active", "p-hide"], outputs: ["p-activated", "p-change-state", "p-click"] }, { kind: "component", type: PoTabDropdownComponent, selector: "po-tab-dropdown", inputs: ["p-label", "p-tabs", "p-size"], outputs: ["p-activated", "p-change-state", "p-click"] }] });
 }
@@ -58378,8 +58866,6 @@ class PoWidgetBaseComponent {
      */
     tagIcon;
     /**
-     * @Input p-tag-position
-     *
      * @optional
      *
      * @description
@@ -58422,8 +58908,6 @@ class PoWidgetBaseComponent {
         return this._size ?? getDefaultSizeFn(PoFieldSize);
     }
     /**
-     * @Input p-avatar
-     *
      * @optional
      *
      * @description
@@ -59105,24 +59589,27 @@ const poNavbarLiteralsDefault = {
  * | `--border-radius-bottom-left`            | Valor do radius do lado esquerdo do header                 | `var(--border-radius-md)`                         |
  * | `--border-radius-bottom-right`           | Valor do radius do lado direito do header                  | `var(--border-radius-md)`                         |
  * | `--base shadow`                          | Cor da sombra do header                                    | `0 1px 8px rgba(0, 0, 0, 0.1)`                  |
+ * | `--stroke-color`                         | Cor da borda inferior do header                            | `var(--color-brand-01-base)`                      |
  * | **Sub-menu**                             |                                                            |                                                   |
  * | `--border-radius`                        | Valor do radius dos itens do sub-menu                      | `var(--border-radius-md);`                        |
  * | `--text-color-submenu`                   | Cor do texto dos itens do sub-menu                         | `var(--color-brand-01-base)`                      |
  * | `--icon-color`                           | Cor do ícone do sub-menu com itens                         | `var(--color-brand-01-base)`                      |
  * | `--border-color`                         | Cor da borda                                               | `var(--color-transparent)`                        |
  * | `--shadow`                               | Contém o valor da sombra do elemento                       | `var(--shadow-none)`                              |
+ * | `--font-family-submenu`                  | Fonte do texto dos itens de sub-menu                       | `var(--font-family-theme)`                        |
+ * | `--font-weight-submenu`                  | Peso da fonte do texto dos itens de sub-menu               | `var(--font-weight-bold)`                         |
  * | **Sub-menu - Hover**                     |                                                            |                                                   |
  * | `--background-hover`                     | Cor de background dos itens do sub-menu no estado hover    | `var(--color-brand-01-lighter)`                   |
  * | `--icon-color-hover`                     | Cor do ícone dos itens de sub-menu no estado hover         | `var(--color-brand-01-darkest)`                   |
- * | `--text-color-hover`                     | Cor do texo dos itens de sub-menu no estado hover          | `var(--color-brand-01-darkest)`                   |
+ * | `--text-color-hover`                     | Cor do texto dos itens de sub-menu no estado hover         | `var(--color-brand-01-darkest)`                   |
  * | **Sub-menu - pressed**                   |                                                            |                                                   |
  * | `--background-pressed`                   | Cor de background dos itens do sub-menu no estado pressed  | `var(--color-brand-01-light)`                     |
  * | `--icon-color-pressed`                   | Cor do ícone dos itens de sub-menu no estado pressed       | `var(--color-brand-01-darkest)`                   |
- * | `--text-color-pressed`                   | Cor do texo dos itens de sub-menu no estado pressed        | `var(--color-brand-01-darkest)`                   |
+ * | `--text-color-pressed`                   | Cor do texto dos itens de sub-menu no estado pressed       | `var(--color-brand-01-darkest)`                   |
  * | **Sub-menu - selected**                  |                                                            |                                                   |
  * | `--background-selected`                  | Cor de background dos itens do sub-menu no estado selected | `var(--color-brand-01-light)`                     |
  * | `--icon-color-selected`                  | Cor do ícone dos itens de sub-menu no estado selected      | `var(--color-neutral-dark-95)`                    |
- * | `--text-color-selected`                  | Cor do texo dos itens de sub-menu no estado selected       | `var(--color-brand-01-darkest)`                   |
+ * | `--text-color-selected`                  | Cor do texto dos itens de sub-menu no estado selected      | `var(--color-brand-01-darkest)`                   |
  * | **Customer**                             |                                                            |                                                   |
  * | `--background-color-customer`            | Cor do background da seção customer                        | `var(--color-neutral-light-00)`                   |
  * | `--border-color`                         | Cor da borda da seção customer                             | `var(--color-neutral-light-10)`                   |
@@ -59130,9 +59617,9 @@ const poNavbarLiteralsDefault = {
  * | `--border-width`                         | Largura da borda da seção customer                         | `var(--border-width-sm)`                          |
  * | **Customer - hover**                     |                                                            |                                                   |
  * | `--background-color-customer-hover`      | Cor do background da seção customer no estado hover        | `var(--color-brand-01-lighter)`                   |
- * | `--background-color-customer-hover`      | Cor do background da seção customer no estado hover        | `var(--color-brand-01-lighter)`                   |
  * | **Customer - pressed**                   |                                                            |                                                   |
  * | `--background-color-customer-pressed`    | Cor do background da seção customer no estado pressed      | `var(--color-brand-01-light)`                     |
+ * | `--border-width-pressed`                 | Largura da borda da seção customer no estado pressed       | `var(--border-width-md)`                          |
  *
  */
 class PoHeaderBaseComponent {
@@ -59142,6 +59629,7 @@ class PoHeaderBaseComponent {
     _brand;
     _literals;
     language = poLocaleDefault;
+    themeChangeSignal = signal(0, ...(ngDevMode ? [{ debugName: "themeChangeSignal" }] : []));
     /**
      * @optional
      *
@@ -59303,6 +59791,31 @@ class PoHeaderBaseComponent {
     get literals() {
         return this._literals || poNavbarLiteralsDefault[this.language];
     }
+    /**
+     * @optional
+     *
+     * @Input
+     *
+     * @description
+     *
+     * Define o tamanho do componente:
+     * - `small`: altura de 44px (disponível apenas para acessibilidade AA).
+     * - `medium`: altura de 56px.
+     *
+     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
+     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
+     *
+     * @default `medium`
+     */
+    sizeInput = input('', { ...(ngDevMode ? { debugName: "sizeInput" } : {}), alias: 'p-size' });
+    size = computed(() => {
+        this.themeChangeSignal();
+        const value = this.sizeInput();
+        return value ? validateSizeFn(value, PoFieldSize) : getDefaultSizeFn(PoFieldSize);
+    }, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    get hostSize() {
+        return this.sizeInput() ? validateSizeFn(this.sizeInput(), PoFieldSize) : getDefaultSizeFn(PoFieldSize);
+    }
     /**
      * @optional
      *
@@ -59321,8 +59834,19 @@ class PoHeaderBaseComponent {
     generateRandomId() {
         return String(Math.floor(Math.random() * 9999 + 1));
     }
+    onThemeChange() {
+        this.themeChangeSignal.update(v => v + 1);
+        requestAnimationFrame(() => {
+            try {
+                this.updateMenu();
+            }
+            catch {
+                console.error('updateMenu with errors. probably tried to execute before the component was rendered.');
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.9", type: PoHeaderBaseComponent, isStandalone: true, inputs: { amountMore: ["p-amount-more", "amountMore"], hideButtonMenu: ["p-hide-button-menu", "hideButtonMenu"], filterMenu: ["p-filter-menu", "filterMenu", convertToBoolean], sideMenuOnlyAction: ["p-side-menu-only-action", "sideMenuOnlyAction"], forceActionTools: ["p-force-actions-tools", "forceActionTools"], notChangeContext: ["p-not-change-context", "notChangeContext"], brand: ["p-brand", "brand"], actionsTools: ["p-actions-tools", "actionsTools"], headerUser: ["p-header-user", "headerUser"], menuItems: ["p-menu-items", "menuItems"], menuCollapse: ["p-menus", "menuCollapse"], headerTemplate: ["p-header-template", "headerTemplate"], literals: ["p-literals", "literals"] }, outputs: { colapsedMenuEvent: "p-colapsed-menu" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PoHeaderBaseComponent, isStandalone: true, inputs: { amountMore: { classPropertyName: "amountMore", publicName: "p-amount-more", isSignal: false, isRequired: false, transformFunction: null }, hideButtonMenu: { classPropertyName: "hideButtonMenu", publicName: "p-hide-button-menu", isSignal: false, isRequired: false, transformFunction: null }, filterMenu: { classPropertyName: "filterMenu", publicName: "p-filter-menu", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, sideMenuOnlyAction: { classPropertyName: "sideMenuOnlyAction", publicName: "p-side-menu-only-action", isSignal: false, isRequired: false, transformFunction: null }, forceActionTools: { classPropertyName: "forceActionTools", publicName: "p-force-actions-tools", isSignal: false, isRequired: false, transformFunction: null }, notChangeContext: { classPropertyName: "notChangeContext", publicName: "p-not-change-context", isSignal: false, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "p-brand", isSignal: false, isRequired: false, transformFunction: null }, actionsTools: { classPropertyName: "actionsTools", publicName: "p-actions-tools", isSignal: false, isRequired: false, transformFunction: null }, headerUser: { classPropertyName: "headerUser", publicName: "p-header-user", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "p-menu-items", isSignal: false, isRequired: false, transformFunction: null }, menuCollapse: { classPropertyName: "menuCollapse", publicName: "p-menus", isSignal: false, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "p-header-template", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colapsedMenuEvent: "p-colapsed-menu" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.hostSize" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderBaseComponent, decorators: [{
             type: Directive
@@ -59365,9 +59889,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], literals: [{
                 type: Input,
                 args: ['p-literals']
+            }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }], hostSize: [{
+                type: HostBinding,
+                args: ['attr.p-size']
             }], colapsedMenuEvent: [{
                 type: Output,
                 args: ['p-colapsed-menu']
+            }], onThemeChange: [{
+                type: HostListener,
+                args: ['window:PoUiThemeChange']
             }] } });
 
 class PoHeaderbrandComponent {
@@ -59384,6 +59914,7 @@ class PoHeaderbrandComponent {
     // itens do menu caso não seja enviado um menu externo pelo usuário
     menuCollapse = [];
     externalMenu;
+    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}), alias: 'p-size' });
     constructor(cd, router) {
         this.cd = cd;
         this.router = router;
@@ -59420,11 +59951,11 @@ class PoHeaderbrandComponent {
         return this.titleBrand?.nativeElement.offsetWidth >= 151;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderbrandComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderbrandComponent, isStandalone: false, selector: "po-header-brand", inputs: { brand: ["p-brand", "brand"], hideButtonMenu: ["p-hide-button-menu", "hideButtonMenu"], menuCollapse: ["p-menus", "menuCollapse"], externalMenu: ["p-external", "externalMenu"] }, outputs: { clickMenu: "p-click-menu" }, viewQueries: [{ propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ElementRef, static: true }, { propertyName: "titleBrand", first: true, predicate: ["titleBrand"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-header-nav-brand\">\n  @if (externalMenu) {\n    <po-button\n      #target\n      class=\"po-nav-header-medium\"\n      p-size=\"medium\"\n      p-icon=\"ICON_MENU\"\n      p-kind=\"tertiary\"\n      (p-click)=\"clickMenu.emit()\"\n    >\n    </po-button>\n  } @else if (menuCollapse.length && !hideButtonMenu) {\n    <po-button p-size=\"medium\" #target p-icon=\"ICON_MENU\" p-kind=\"tertiary\" (p-click)=\"clickMenu.emit()\"> </po-button>\n  }\n\n  @if (brand?.logo && !smallLogo) {\n    <div class=\"po-header-nav-brand-logo\" (click)=\"onClickLogo()\">\n      <img [src]=\"brand.logo\" alt=\"Logo\" />\n    </div>\n  }\n\n  @if ((brand?.logo || brand?.smallLogo) && smallLogo) {\n    <div class=\"po-header-nav-brand-logo-small\" (click)=\"onClickLogo()\">\n      <img [src]=\"brand?.smallLogo || brand?.logo\" alt=\"Logo\" />\n    </div>\n  }\n  <span #titleBrand [p-tooltip]=\"showTooltip ? brand?.title : ''\" class=\"po-header-nav-brand-text\">{{\n    brand?.title\n  }}</span>\n</div>\n", dependencies: [{ kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderbrandComponent, isStandalone: false, selector: "po-header-brand", inputs: { brand: { classPropertyName: "brand", publicName: "p-brand", isSignal: false, isRequired: false, transformFunction: null }, hideButtonMenu: { classPropertyName: "hideButtonMenu", publicName: "p-hide-button-menu", isSignal: false, isRequired: false, transformFunction: null }, menuCollapse: { classPropertyName: "menuCollapse", publicName: "p-menus", isSignal: false, isRequired: false, transformFunction: null }, externalMenu: { classPropertyName: "externalMenu", publicName: "p-external", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickMenu: "p-click-menu" }, viewQueries: [{ propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ElementRef, static: true }, { propertyName: "titleBrand", first: true, predicate: ["titleBrand"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-header-nav-brand\">\n  @if (externalMenu) {\n    <po-button\n      #target\n      class=\"po-nav-header-medium\"\n      [p-size]=\"size()\"\n      p-icon=\"ICON_MENU\"\n      p-kind=\"tertiary\"\n      (p-click)=\"clickMenu.emit()\"\n    >\n    </po-button>\n  } @else if (menuCollapse.length && !hideButtonMenu) {\n    <po-button [p-size]=\"size()\" #target p-icon=\"ICON_MENU\" p-kind=\"tertiary\" (p-click)=\"clickMenu.emit()\"> </po-button>\n  }\n\n  @if (brand?.logo && !smallLogo) {\n    <div class=\"po-header-nav-brand-logo\" (click)=\"onClickLogo()\">\n      <img [src]=\"brand.logo\" alt=\"Logo\" />\n    </div>\n  }\n\n  @if ((brand?.logo || brand?.smallLogo) && smallLogo) {\n    <div class=\"po-header-nav-brand-logo-small\" (click)=\"onClickLogo()\">\n      <img [src]=\"brand?.smallLogo || brand?.logo\" alt=\"Logo\" />\n    </div>\n  }\n  <span #titleBrand [p-tooltip]=\"showTooltip ? brand?.title : ''\" class=\"po-header-nav-brand-text\">{{\n    brand?.title\n  }}</span>\n</div>\n", dependencies: [{ kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderbrandComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-header-brand', standalone: false, template: "<div class=\"po-header-nav-brand\">\n  @if (externalMenu) {\n    <po-button\n      #target\n      class=\"po-nav-header-medium\"\n      p-size=\"medium\"\n      p-icon=\"ICON_MENU\"\n      p-kind=\"tertiary\"\n      (p-click)=\"clickMenu.emit()\"\n    >\n    </po-button>\n  } @else if (menuCollapse.length && !hideButtonMenu) {\n    <po-button p-size=\"medium\" #target p-icon=\"ICON_MENU\" p-kind=\"tertiary\" (p-click)=\"clickMenu.emit()\"> </po-button>\n  }\n\n  @if (brand?.logo && !smallLogo) {\n    <div class=\"po-header-nav-brand-logo\" (click)=\"onClickLogo()\">\n      <img [src]=\"brand.logo\" alt=\"Logo\" />\n    </div>\n  }\n\n  @if ((brand?.logo || brand?.smallLogo) && smallLogo) {\n    <div class=\"po-header-nav-brand-logo-small\" (click)=\"onClickLogo()\">\n      <img [src]=\"brand?.smallLogo || brand?.logo\" alt=\"Logo\" />\n    </div>\n  }\n  <span #titleBrand [p-tooltip]=\"showTooltip ? brand?.title : ''\" class=\"po-header-nav-brand-text\">{{\n    brand?.title\n  }}</span>\n</div>\n" }]
+            args: [{ selector: 'po-header-brand', standalone: false, template: "<div class=\"po-header-nav-brand\">\n  @if (externalMenu) {\n    <po-button\n      #target\n      class=\"po-nav-header-medium\"\n      [p-size]=\"size()\"\n      p-icon=\"ICON_MENU\"\n      p-kind=\"tertiary\"\n      (p-click)=\"clickMenu.emit()\"\n    >\n    </po-button>\n  } @else if (menuCollapse.length && !hideButtonMenu) {\n    <po-button [p-size]=\"size()\" #target p-icon=\"ICON_MENU\" p-kind=\"tertiary\" (p-click)=\"clickMenu.emit()\"> </po-button>\n  }\n\n  @if (brand?.logo && !smallLogo) {\n    <div class=\"po-header-nav-brand-logo\" (click)=\"onClickLogo()\">\n      <img [src]=\"brand.logo\" alt=\"Logo\" />\n    </div>\n  }\n\n  @if ((brand?.logo || brand?.smallLogo) && smallLogo) {\n    <div class=\"po-header-nav-brand-logo-small\" (click)=\"onClickLogo()\">\n      <img [src]=\"brand?.smallLogo || brand?.logo\" alt=\"Logo\" />\n    </div>\n  }\n  <span #titleBrand [p-tooltip]=\"showTooltip ? brand?.title : ''\" class=\"po-header-nav-brand-text\">{{\n    brand?.title\n  }}</span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Router }], propDecorators: { targetRef: [{
                 type: ViewChild,
                 args: ['target', { read: ElementRef, static: true }]
@@ -59446,7 +59977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], externalMenu: [{
                 type: Input,
                 args: ['p-external']
-            }] } });
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }] } });
 
 const poHeaderMoreLiteralsDefault = {
     en: {
@@ -59476,6 +60007,7 @@ class PoHeaderMenuItemComponent {
     item;
     itemOverFlow;
     overflowButton = false;
+    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}), alias: 'p-size' });
     itemClick = new EventEmitter();
     constructor(cd, router, languageService) {
         this.cd = cd;
@@ -59575,11 +60107,11 @@ class PoHeaderMenuItemComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderMenuItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Router }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderMenuItemComponent, isStandalone: false, selector: "po-header-menu-item", inputs: { item: ["p-item", "item"], itemOverFlow: ["p-item-overflow", "itemOverFlow"], overflowButton: ["p-button-overflow", "overflowButton"] }, outputs: { itemClick: "p-item-click" }, viewQueries: [{ propertyName: "buttonMoreElement", first: true, predicate: ["buttonMoreElement"], descendants: true, read: ElementRef }, { propertyName: "poPopupElement", first: true, predicate: PoPopupComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (overflowButton) {\n  <li\n    #buttonMoreElement\n    #overflowButton\n    class=\"po-header-nav-submenu-more\"\n    tabindex=\"0\"\n    (click)=\"openListButtonMore()\"\n    (keydown)=\"onKeyDownButtonMore($event)\"\n  >\n    <div\n      role=\"button\"\n      [attr.aria-expanded]=\"poPopupElement?.showPopup\"\n      class=\"po-header-nav-submenu-button-more\"\n      [class.open]=\"poPopupElement?.showPopup\"\n    >\n      <span>{{ literals.more }}</span>\n      <po-icon\n        class=\"po-header-icon po-header-nav-submenu-more-icon\"\n        [p-icon]=\"poPopupElement?.showPopup ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n      ></po-icon>\n    </div>\n  </li>\n} @else {\n  <li\n    #menusubmenuitem\n    tabindex=\"0\"\n    [p-tooltip]=\"item?.label\"\n    class=\"po-header-nav-submenu\"\n    (click)=\"onAction(item)\"\n    (keydown)=\"onKeyDownButtonList($event, item)\"\n    [attr.aria-current]=\"selectedItem\"\n  >\n    <div\n      class=\"po-header-nav-submenu-button\"\n      [attr.aria-selected]=\"item?.$selected\"\n      [class.submenu-item-selected]=\"selectedItem\"\n    >\n      <span>{{ item?.label }}</span>\n    </div>\n  </li>\n}\n\n@if (overflowButton) {\n  <po-popup\n    #popup\n    p-size=\"medium\"\n    [p-actions]=\"itemOverFlow\"\n    [p-target]=\"buttonMoreElement\"\n    [p-hide-arrow]=\"true\"\n    (p-click-item)=\"onAction($event, false)\"\n    (p-close)=\"onClosePopup()\"\n  >\n  </po-popup>\n}\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { 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: PoHeaderMenuItemComponent, isStandalone: false, selector: "po-header-menu-item", inputs: { item: { classPropertyName: "item", publicName: "p-item", isSignal: false, isRequired: false, transformFunction: null }, itemOverFlow: { classPropertyName: "itemOverFlow", publicName: "p-item-overflow", isSignal: false, isRequired: false, transformFunction: null }, overflowButton: { classPropertyName: "overflowButton", publicName: "p-button-overflow", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "p-item-click" }, viewQueries: [{ propertyName: "buttonMoreElement", first: true, predicate: ["buttonMoreElement"], descendants: true, read: ElementRef }, { propertyName: "poPopupElement", first: true, predicate: PoPopupComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (overflowButton) {\n  <li\n    #buttonMoreElement\n    #overflowButton\n    class=\"po-header-nav-submenu-more\"\n    tabindex=\"0\"\n    (click)=\"openListButtonMore()\"\n    (keydown)=\"onKeyDownButtonMore($event)\"\n  >\n    <div\n      role=\"button\"\n      [attr.aria-expanded]=\"poPopupElement?.showPopup\"\n      class=\"po-header-nav-submenu-button-more\"\n      [class.open]=\"poPopupElement?.showPopup\"\n    >\n      <span>{{ literals.more }}</span>\n      <po-icon\n        class=\"po-header-icon po-header-nav-submenu-more-icon\"\n        [p-icon]=\"poPopupElement?.showPopup ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n      ></po-icon>\n    </div>\n  </li>\n} @else {\n  <li\n    #menusubmenuitem\n    tabindex=\"0\"\n    [p-tooltip]=\"item?.label\"\n    class=\"po-header-nav-submenu\"\n    (click)=\"onAction(item)\"\n    (keydown)=\"onKeyDownButtonList($event, item)\"\n    [attr.aria-current]=\"selectedItem\"\n  >\n    <div\n      class=\"po-header-nav-submenu-button\"\n      [attr.aria-selected]=\"item?.$selected\"\n      [class.submenu-item-selected]=\"selectedItem\"\n    >\n      <span>{{ item?.label }}</span>\n    </div>\n  </li>\n}\n\n@if (overflowButton) {\n  <po-popup\n    #popup\n    [p-size]=\"size()\"\n    [p-actions]=\"itemOverFlow\"\n    [p-target]=\"buttonMoreElement\"\n    [p-hide-arrow]=\"true\"\n    (p-click-item)=\"onAction($event, false)\"\n    (p-close)=\"onClosePopup()\"\n  >\n  </po-popup>\n}\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { 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: PoHeaderMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-header-menu-item', standalone: false, template: "@if (overflowButton) {\n  <li\n    #buttonMoreElement\n    #overflowButton\n    class=\"po-header-nav-submenu-more\"\n    tabindex=\"0\"\n    (click)=\"openListButtonMore()\"\n    (keydown)=\"onKeyDownButtonMore($event)\"\n  >\n    <div\n      role=\"button\"\n      [attr.aria-expanded]=\"poPopupElement?.showPopup\"\n      class=\"po-header-nav-submenu-button-more\"\n      [class.open]=\"poPopupElement?.showPopup\"\n    >\n      <span>{{ literals.more }}</span>\n      <po-icon\n        class=\"po-header-icon po-header-nav-submenu-more-icon\"\n        [p-icon]=\"poPopupElement?.showPopup ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n      ></po-icon>\n    </div>\n  </li>\n} @else {\n  <li\n    #menusubmenuitem\n    tabindex=\"0\"\n    [p-tooltip]=\"item?.label\"\n    class=\"po-header-nav-submenu\"\n    (click)=\"onAction(item)\"\n    (keydown)=\"onKeyDownButtonList($event, item)\"\n    [attr.aria-current]=\"selectedItem\"\n  >\n    <div\n      class=\"po-header-nav-submenu-button\"\n      [attr.aria-selected]=\"item?.$selected\"\n      [class.submenu-item-selected]=\"selectedItem\"\n    >\n      <span>{{ item?.label }}</span>\n    </div>\n  </li>\n}\n\n@if (overflowButton) {\n  <po-popup\n    #popup\n    p-size=\"medium\"\n    [p-actions]=\"itemOverFlow\"\n    [p-target]=\"buttonMoreElement\"\n    [p-hide-arrow]=\"true\"\n    (p-click-item)=\"onAction($event, false)\"\n    (p-close)=\"onClosePopup()\"\n  >\n  </po-popup>\n}\n" }]
+            args: [{ selector: 'po-header-menu-item', standalone: false, template: "@if (overflowButton) {\n  <li\n    #buttonMoreElement\n    #overflowButton\n    class=\"po-header-nav-submenu-more\"\n    tabindex=\"0\"\n    (click)=\"openListButtonMore()\"\n    (keydown)=\"onKeyDownButtonMore($event)\"\n  >\n    <div\n      role=\"button\"\n      [attr.aria-expanded]=\"poPopupElement?.showPopup\"\n      class=\"po-header-nav-submenu-button-more\"\n      [class.open]=\"poPopupElement?.showPopup\"\n    >\n      <span>{{ literals.more }}</span>\n      <po-icon\n        class=\"po-header-icon po-header-nav-submenu-more-icon\"\n        [p-icon]=\"poPopupElement?.showPopup ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n      ></po-icon>\n    </div>\n  </li>\n} @else {\n  <li\n    #menusubmenuitem\n    tabindex=\"0\"\n    [p-tooltip]=\"item?.label\"\n    class=\"po-header-nav-submenu\"\n    (click)=\"onAction(item)\"\n    (keydown)=\"onKeyDownButtonList($event, item)\"\n    [attr.aria-current]=\"selectedItem\"\n  >\n    <div\n      class=\"po-header-nav-submenu-button\"\n      [attr.aria-selected]=\"item?.$selected\"\n      [class.submenu-item-selected]=\"selectedItem\"\n    >\n      <span>{{ item?.label }}</span>\n    </div>\n  </li>\n}\n\n@if (overflowButton) {\n  <po-popup\n    #popup\n    [p-size]=\"size()\"\n    [p-actions]=\"itemOverFlow\"\n    [p-target]=\"buttonMoreElement\"\n    [p-hide-arrow]=\"true\"\n    (p-click-item)=\"onAction($event, false)\"\n    (p-close)=\"onClosePopup()\"\n  >\n  </po-popup>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Router }, { type: PoLanguageService }], propDecorators: { buttonMoreElement: [{
                 type: ViewChild,
                 args: ['buttonMoreElement', { read: ElementRef }]
@@ -59595,7 +60127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], overflowButton: [{
                 type: Input,
                 args: ['p-button-overflow']
-            }], itemClick: [{
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }], itemClick: [{
                 type: Output,
                 args: ['p-item-click']
             }] } });
@@ -59619,6 +60151,7 @@ class PoHeaderToolsComponent {
         this.cd.detectChanges();
     }
     literals;
+    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}), alias: 'p-size' });
     get actionTools() {
         return this._actionTools;
     }
@@ -59677,11 +60210,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: { classPropertyName: "forceActionTools", publicName: "p-force-actions-tools", isSignal: false, isRequired: false, transformFunction: null }, actionTools: { classPropertyName: "actionTools", publicName: "p-actions-tools", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "p-header-template", isSignal: false, isRequired: false, transformFunction: null } }, 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]=\"size()\"\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]=\"size()\"\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]=\"size()\"\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]=\"size()\"\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 }]
@@ -59703,7 +60236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], literals: [{
                 type: Input,
                 args: ['p-literals']
-            }], headerTemplate: [{
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }], headerTemplate: [{
                 type: Input,
                 args: ['p-header-template']
             }] } });
@@ -59727,6 +60260,7 @@ class PoHeaderCustomerComponent {
     poPopupAction;
     poPopoverAction;
     headerUser;
+    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}), alias: 'p-size' });
     constructor(languageService) {
         const language = languageService.getShortLanguage();
         this.literals = {
@@ -59760,11 +60294,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: { classPropertyName: "headerUser", publicName: "p-header-user", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null } }, 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]=\"size()\"\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]=\"size()\"\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']
@@ -59774,7 +60308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], headerUser: [{
                 type: Input,
                 args: ['p-header-user']
-            }] } });
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }] } });
 
 /**
  * @docsExtends PoHeaderBaseComponent
@@ -60075,11 +60609,11 @@ class PoHeaderComponent extends PoHeaderBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: PoMenuGlobalService }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderComponent, isStandalone: false, selector: "po-header", queries: [{ propertyName: "menuHeaderTemplate", first: true, predicate: PoMenuHeaderTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "buttonFirstAction", first: true, predicate: ["buttonFirstAction"], descendants: true, read: ElementRef }, { propertyName: "navElement", first: true, predicate: ["navElement"], descendants: true, read: ElementRef }, { propertyName: "menuWrapperBrand", first: true, predicate: ["menuWrapperBrand"], descendants: true }, { propertyName: "menuWrapperTools", first: true, predicate: ["menuWrapperTools"], descendants: true }, { propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, static: true }, { propertyName: "overflowButtonComponentEl", first: true, predicate: ["overflowButton"], descendants: true }, { propertyName: "menuComponent", first: true, predicate: PoMenuComponent, descendants: true }, { propertyName: "menuSubItems", predicate: ["menusubmenuitem"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav #navElement class=\"po-header-nav\">\n  <div #menuWrapperBrand>\n    <po-header-brand\n      [p-brand]=\"brand\"\n      (p-click-menu)=\"onClickMenu()\"\n      [p-menus]=\"menuCollapseJoin\"\n      [p-external]=\"applicationMenu\"\n      [p-hide-button-menu]=\"hideButtonMenu\"\n    ></po-header-brand>\n  </div>\n\n  <ul #menuWrapperItens class=\"po-header-nav-submenus-wrapper\">\n    @for (item of visibleMenuItems; track item.id) {\n      <po-header-menu-item #menusubmenuitem [p-item]=\"item\" (p-item-click)=\"onSelected($event)\"></po-header-menu-item>\n    }\n  </ul>\n\n  @if (showOverflow && overflowItems.length) {\n    <po-header-menu-item\n      #overflowButton\n      #menusubmenuitem\n      [p-button-overflow]=\"true\"\n      [p-item-overflow]=\"overflowItems\"\n      (p-item-click)=\"onSelected($event)\"\n    ></po-header-menu-item>\n  }\n\n  <ul #menuWrapperTools class=\"po-header-tools-wrapper\">\n    <po-header-tools\n      [p-force-actions-tools]=\"forceActionTools\"\n      [p-actions-tools]=\"actionsTools\"\n      [p-header-template]=\"headerTemplate\"\n      [p-literals]=\"literals\"\n    ></po-header-tools>\n\n    @if (headerUser?.customerBrand && headerUser?.avatar) {\n      <po-header-customer [p-header-user]=\"headerUser\"></po-header-customer>\n    }\n  </ul>\n</nav>\n\n@if (!sideMenuOnlyAction && !applicationMenu && menuCollapseJoin.length) {\n  <div class=\"po-header-overlay\" [class.show]=\"showMenu\" (click)=\"onCloseMenu()\"></div>\n\n  <aside class=\"po-header-side-menu\" [class.open]=\"showMenu\">\n    <div class=\"po-header-sidemenu-outer\">\n      <po-menu\n        [p-only-menu-item]=\"true\"\n        [p-menus]=\"menuCollapseJoin\"\n        [p-filter]=\"filterMenu\"\n        p-menu-id=\"po-header-nav-bar\"\n      >\n        <div *p-menu-header-template>\n          <ng-template *ngTemplateOutlet=\"menuHeaderTemplate?.templateRef\"></ng-template>\n        </div>\n      </po-menu>\n    </div>\n  </aside>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoMenuComponent, selector: "po-menu" }, { kind: "directive", type: PoMenuHeaderTemplateDirective, selector: "[p-menu-header-template]" }, { kind: "component", type: PoHeaderbrandComponent, selector: "po-header-brand", inputs: ["p-brand", "p-hide-button-menu", "p-menus", "p-external"], outputs: ["p-click-menu"] }, { kind: "component", type: PoHeaderMenuItemComponent, selector: "po-header-menu-item", inputs: ["p-item", "p-item-overflow", "p-button-overflow"], outputs: ["p-item-click"] }, { kind: "component", type: PoHeaderToolsComponent, selector: "po-header-tools", inputs: ["p-force-actions-tools", "p-actions-tools", "p-literals", "p-header-template"] }, { kind: "component", type: PoHeaderCustomerComponent, selector: "po-header-customer", inputs: ["p-header-user"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHeaderComponent, isStandalone: false, selector: "po-header", queries: [{ propertyName: "menuHeaderTemplate", first: true, predicate: PoMenuHeaderTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "buttonFirstAction", first: true, predicate: ["buttonFirstAction"], descendants: true, read: ElementRef }, { propertyName: "navElement", first: true, predicate: ["navElement"], descendants: true, read: ElementRef }, { propertyName: "menuWrapperBrand", first: true, predicate: ["menuWrapperBrand"], descendants: true }, { propertyName: "menuWrapperTools", first: true, predicate: ["menuWrapperTools"], descendants: true }, { propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, static: true }, { propertyName: "overflowButtonComponentEl", first: true, predicate: ["overflowButton"], descendants: true }, { propertyName: "menuComponent", first: true, predicate: PoMenuComponent, descendants: true }, { propertyName: "menuSubItems", predicate: ["menusubmenuitem"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav #navElement class=\"po-header-nav\">\n  <div #menuWrapperBrand>\n    <po-header-brand\n      [p-brand]=\"brand\"\n      (p-click-menu)=\"onClickMenu()\"\n      [p-menus]=\"menuCollapseJoin\"\n      [p-external]=\"applicationMenu\"\n      [p-hide-button-menu]=\"hideButtonMenu\"\n      [p-size]=\"size()\"\n    ></po-header-brand>\n  </div>\n\n  <ul #menuWrapperItens class=\"po-header-nav-submenus-wrapper\">\n    @for (item of visibleMenuItems; track item.id) {\n      <po-header-menu-item\n        #menusubmenuitem\n        [p-item]=\"item\"\n        (p-item-click)=\"onSelected($event)\"\n        [p-size]=\"size()\"\n      ></po-header-menu-item>\n    }\n  </ul>\n\n  @if (showOverflow && overflowItems.length) {\n    <po-header-menu-item\n      #overflowButton\n      #menusubmenuitem\n      [p-button-overflow]=\"true\"\n      [p-item-overflow]=\"overflowItems\"\n      (p-item-click)=\"onSelected($event)\"\n      [p-size]=\"size()\"\n    ></po-header-menu-item>\n  }\n\n  <ul #menuWrapperTools class=\"po-header-tools-wrapper\">\n    <po-header-tools\n      [p-force-actions-tools]=\"forceActionTools\"\n      [p-actions-tools]=\"actionsTools\"\n      [p-header-template]=\"headerTemplate\"\n      [p-literals]=\"literals\"\n      [p-size]=\"size()\"\n    ></po-header-tools>\n\n    @if (headerUser?.customerBrand && headerUser?.avatar) {\n      <po-header-customer [p-header-user]=\"headerUser\" [p-size]=\"size()\"></po-header-customer>\n    }\n  </ul>\n</nav>\n\n@if (!sideMenuOnlyAction && !applicationMenu && menuCollapseJoin.length) {\n  <div class=\"po-header-overlay\" [class.show]=\"showMenu\" (click)=\"onCloseMenu()\"></div>\n\n  <aside class=\"po-header-side-menu\" [class.open]=\"showMenu\">\n    <div class=\"po-header-sidemenu-outer\">\n      <po-menu\n        [p-only-menu-item]=\"true\"\n        [p-menus]=\"menuCollapseJoin\"\n        [p-filter]=\"filterMenu\"\n        p-menu-id=\"po-header-nav-bar\"\n      >\n        <div *p-menu-header-template>\n          <ng-template *ngTemplateOutlet=\"menuHeaderTemplate?.templateRef\"></ng-template>\n        </div>\n      </po-menu>\n    </div>\n  </aside>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoMenuComponent, selector: "po-menu" }, { kind: "directive", type: PoMenuHeaderTemplateDirective, selector: "[p-menu-header-template]" }, { kind: "component", type: PoHeaderbrandComponent, selector: "po-header-brand", inputs: ["p-brand", "p-hide-button-menu", "p-menus", "p-external", "p-size"], outputs: ["p-click-menu"] }, { kind: "component", type: PoHeaderMenuItemComponent, selector: "po-header-menu-item", inputs: ["p-item", "p-item-overflow", "p-button-overflow", "p-size"], outputs: ["p-item-click"] }, { kind: "component", type: PoHeaderToolsComponent, selector: "po-header-tools", inputs: ["p-force-actions-tools", "p-actions-tools", "p-literals", "p-size", "p-header-template"] }, { kind: "component", type: PoHeaderCustomerComponent, selector: "po-header-customer", inputs: ["p-header-user", "p-size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-header', standalone: false, template: "<nav #navElement class=\"po-header-nav\">\n  <div #menuWrapperBrand>\n    <po-header-brand\n      [p-brand]=\"brand\"\n      (p-click-menu)=\"onClickMenu()\"\n      [p-menus]=\"menuCollapseJoin\"\n      [p-external]=\"applicationMenu\"\n      [p-hide-button-menu]=\"hideButtonMenu\"\n    ></po-header-brand>\n  </div>\n\n  <ul #menuWrapperItens class=\"po-header-nav-submenus-wrapper\">\n    @for (item of visibleMenuItems; track item.id) {\n      <po-header-menu-item #menusubmenuitem [p-item]=\"item\" (p-item-click)=\"onSelected($event)\"></po-header-menu-item>\n    }\n  </ul>\n\n  @if (showOverflow && overflowItems.length) {\n    <po-header-menu-item\n      #overflowButton\n      #menusubmenuitem\n      [p-button-overflow]=\"true\"\n      [p-item-overflow]=\"overflowItems\"\n      (p-item-click)=\"onSelected($event)\"\n    ></po-header-menu-item>\n  }\n\n  <ul #menuWrapperTools class=\"po-header-tools-wrapper\">\n    <po-header-tools\n      [p-force-actions-tools]=\"forceActionTools\"\n      [p-actions-tools]=\"actionsTools\"\n      [p-header-template]=\"headerTemplate\"\n      [p-literals]=\"literals\"\n    ></po-header-tools>\n\n    @if (headerUser?.customerBrand && headerUser?.avatar) {\n      <po-header-customer [p-header-user]=\"headerUser\"></po-header-customer>\n    }\n  </ul>\n</nav>\n\n@if (!sideMenuOnlyAction && !applicationMenu && menuCollapseJoin.length) {\n  <div class=\"po-header-overlay\" [class.show]=\"showMenu\" (click)=\"onCloseMenu()\"></div>\n\n  <aside class=\"po-header-side-menu\" [class.open]=\"showMenu\">\n    <div class=\"po-header-sidemenu-outer\">\n      <po-menu\n        [p-only-menu-item]=\"true\"\n        [p-menus]=\"menuCollapseJoin\"\n        [p-filter]=\"filterMenu\"\n        p-menu-id=\"po-header-nav-bar\"\n      >\n        <div *p-menu-header-template>\n          <ng-template *ngTemplateOutlet=\"menuHeaderTemplate?.templateRef\"></ng-template>\n        </div>\n      </po-menu>\n    </div>\n  </aside>\n}\n" }]
+            args: [{ selector: 'po-header', standalone: false, template: "<nav #navElement class=\"po-header-nav\">\n  <div #menuWrapperBrand>\n    <po-header-brand\n      [p-brand]=\"brand\"\n      (p-click-menu)=\"onClickMenu()\"\n      [p-menus]=\"menuCollapseJoin\"\n      [p-external]=\"applicationMenu\"\n      [p-hide-button-menu]=\"hideButtonMenu\"\n      [p-size]=\"size()\"\n    ></po-header-brand>\n  </div>\n\n  <ul #menuWrapperItens class=\"po-header-nav-submenus-wrapper\">\n    @for (item of visibleMenuItems; track item.id) {\n      <po-header-menu-item\n        #menusubmenuitem\n        [p-item]=\"item\"\n        (p-item-click)=\"onSelected($event)\"\n        [p-size]=\"size()\"\n      ></po-header-menu-item>\n    }\n  </ul>\n\n  @if (showOverflow && overflowItems.length) {\n    <po-header-menu-item\n      #overflowButton\n      #menusubmenuitem\n      [p-button-overflow]=\"true\"\n      [p-item-overflow]=\"overflowItems\"\n      (p-item-click)=\"onSelected($event)\"\n      [p-size]=\"size()\"\n    ></po-header-menu-item>\n  }\n\n  <ul #menuWrapperTools class=\"po-header-tools-wrapper\">\n    <po-header-tools\n      [p-force-actions-tools]=\"forceActionTools\"\n      [p-actions-tools]=\"actionsTools\"\n      [p-header-template]=\"headerTemplate\"\n      [p-literals]=\"literals\"\n      [p-size]=\"size()\"\n    ></po-header-tools>\n\n    @if (headerUser?.customerBrand && headerUser?.avatar) {\n      <po-header-customer [p-header-user]=\"headerUser\" [p-size]=\"size()\"></po-header-customer>\n    }\n  </ul>\n</nav>\n\n@if (!sideMenuOnlyAction && !applicationMenu && menuCollapseJoin.length) {\n  <div class=\"po-header-overlay\" [class.show]=\"showMenu\" (click)=\"onCloseMenu()\"></div>\n\n  <aside class=\"po-header-side-menu\" [class.open]=\"showMenu\">\n    <div class=\"po-header-sidemenu-outer\">\n      <po-menu\n        [p-only-menu-item]=\"true\"\n        [p-menus]=\"menuCollapseJoin\"\n        [p-filter]=\"filterMenu\"\n        p-menu-id=\"po-header-nav-bar\"\n      >\n        <div *p-menu-header-template>\n          <ng-template *ngTemplateOutlet=\"menuHeaderTemplate?.templateRef\"></ng-template>\n        </div>\n      </po-menu>\n    </div>\n  </aside>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PoMenuGlobalService }, { type: PoLanguageService }], propDecorators: { buttonFirstAction: [{
                 type: ViewChild,
                 args: ['buttonFirstAction', { read: ElementRef }]
@@ -60179,6 +60713,7 @@ const PO_MODULES = [
     PoCalendarModule,
     PoChartModule,
     PoContainerModule,
+    PoContextMenuModule,
     PoDisclaimerGroupModule,
     PoDisclaimerModule,
     PoDividerModule,
@@ -60233,6 +60768,7 @@ class PoComponentsModule {
             PoCalendarModule,
             PoChartModule,
             PoContainerModule,
+            PoContextMenuModule,
             PoDisclaimerGroupModule,
             PoDisclaimerModule,
             PoDividerModule,
@@ -60283,6 +60819,7 @@ class PoComponentsModule {
             PoCalendarModule,
             PoChartModule,
             PoContainerModule,
+            PoContextMenuModule,
             PoDisclaimerGroupModule,
             PoDisclaimerModule,
             PoDividerModule,
@@ -60334,6 +60871,7 @@ class PoComponentsModule {
             PoCalendarModule,
             PoChartModule,
             PoContainerModule,
+            PoContextMenuModule,
             PoDisclaimerGroupModule,
             PoDisclaimerModule,
             PoDividerModule,
@@ -61391,5 +61929,5 @@ function validateProperty(property, target) {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, LOADING_ICON_COMPONENT, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboModule, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoContextTabButtonComponent, PoContextTabsComponent, PoContextTabsModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHeaderComponent, PoHeaderModule, PoHelperComponent, PoHelperModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSkeletonAnimation, PoSkeletonComponent, PoSkeletonModule, PoSkeletonSize, PoSkeletonType, PoSkeletonVariant, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
+export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, LOADING_ICON_COMPONENT, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboModule, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoContextMenuComponent, PoContextMenuModule, PoContextTabButtonComponent, PoContextTabsComponent, PoContextTabsModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHeaderComponent, PoHeaderModule, PoHelperComponent, PoHelperModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSkeletonAnimation, PoSkeletonComponent, PoSkeletonModule, PoSkeletonSize, PoSkeletonType, PoSkeletonVariant, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map