@po-ui/ng-components 19.39.6 → 19.39.8

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

@@ -2392,7 +2392,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;
@@ -2852,8 +2852,13 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
     }
     hideTooltip() {
         if (this.tooltipContent) {
-            this.renderer.setStyle(this.tooltipContent, 'opacity', 0);
-            this.renderer.setStyle(this.tooltipContent, 'visibility', 'hidden');
+            try {
+                this.renderer.setStyle(this.tooltipContent, 'opacity', 0);
+                this.renderer.setStyle(this.tooltipContent, 'visibility', 'hidden');
+            }
+            catch (e) {
+                // Tolerate errors when DOM element is partially destroyed during teardown
+            }
             this.isHidden = true;
             this.removeScrollEventListener();
         }
@@ -2942,6 +2947,7 @@ const poTagTypeDefault = 'po-tag-' + PoTagType.Info;
  * <example name="po-tag-labs" title="PO Tag Labs">
  *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.html"> </file>
  *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.ts"> </file>
+ *  <file name="sample-po-tag-labs/sample-po-tag-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-tag-bank-account" title="PO Tag - Bank Account">
@@ -3936,6 +3942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * <example name="po-avatar-business-card" title="PO Avatar - Business Card" >
  *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.html"> </file>
  *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.ts"> </file>
+ *  <file name="sample-po-avatar-business-card/sample-po-avatar-business-card.component.css"> </file>
  * </example>
  */
 class PoAvatarComponent extends PoAvatarBaseComponent {
@@ -4285,11 +4292,11 @@ class PoBadgeComponent extends PoBadgeBaseComponent {
         return value > PO_BADGE_MAX_NOTIFICATIONS ? '9+' : value.toString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoBadgeComponent, isStandalone: false, selector: "po-badge", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"{{ getChangeStyle() }} po-badge po-badge-{{ size ? size : 'medium' }}\"\n  [class.po-badge-notification]=\"isNotification && !status\"\n  [class.po-badge-border]=\"showBorder\"\n  [attr.data-status]=\"status\"\n  [ariaLabel]=\"notificationLabel\"\n  [ngStyle]=\"customColor && !status ? { 'background-color': customColor } : {}\"\n>\n  @if (!isNotification && size !== 'small' && badgeIcon && status !== 'disabled') {\n    <po-icon [p-icon]=\"badgeIcon\"></po-icon>\n  }\n  @if (value > 1) {\n    <span class=\"po-badge-value\" aria-hidden=\"true\">{{ badgeValue }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoBadgeComponent, isStandalone: false, selector: "po-badge", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"{{ getChangeStyle() }} po-badge po-badge-{{ size ? size : 'medium' }}\"\n  [class.po-badge-notification]=\"isNotification && !status\"\n  [class.po-badge-border]=\"showBorder\"\n  [attr.data-status]=\"status\"\n  [ariaLabel]=\"notificationLabel\"\n  [ngStyle]=\"customColor && !status ? { 'background-color': customColor } : {}\"\n>\n  @if (!isNotification && size !== 'small' && badgeIcon && status !== 'disabled') {\n    <po-icon [p-icon]=\"badgeIcon\"></po-icon>\n  }\n  @if (value > 1) {\n    <span class=\"po-badge-value\" aria-hidden=\"true\">{{ badgeValue }}</span>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-badge', standalone: false, template: "<div\n  class=\"{{ getChangeStyle() }} po-badge po-badge-{{ size ? size : 'medium' }}\"\n  [class.po-badge-notification]=\"isNotification && !status\"\n  [class.po-badge-border]=\"showBorder\"\n  [attr.data-status]=\"status\"\n  [ariaLabel]=\"notificationLabel\"\n  [ngStyle]=\"customColor && !status ? { 'background-color': customColor } : {}\"\n>\n  @if (!isNotification && size !== 'small' && badgeIcon && status !== 'disabled') {\n    <po-icon [p-icon]=\"badgeIcon\"></po-icon>\n  }\n  @if (value > 1) {\n    <span class=\"po-badge-value\" aria-hidden=\"true\">{{ badgeValue }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}\n"] }]
+            args: [{ selector: 'po-badge', standalone: false, template: "<div\n  class=\"{{ getChangeStyle() }} po-badge po-badge-{{ size ? size : 'medium' }}\"\n  [class.po-badge-notification]=\"isNotification && !status\"\n  [class.po-badge-border]=\"showBorder\"\n  [attr.data-status]=\"status\"\n  [ariaLabel]=\"notificationLabel\"\n  [ngStyle]=\"customColor && !status ? { 'background-color': customColor } : {}\"\n>\n  @if (!isNotification && size !== 'small' && badgeIcon && status !== 'disabled') {\n    <po-icon [p-icon]=\"badgeIcon\"></po-icon>\n  }\n  @if (value > 1) {\n    <span class=\"po-badge-value\" aria-hidden=\"true\">{{ badgeValue }}</span>\n  }\n</div>\n" }]
         }] });
 
 /**
@@ -5560,11 +5567,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * <example name="po-loading-overlay-basic" title="PO Loading Overlay Basic">
  *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.html"> </file>
  *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.ts"> </file>
+ *  <file name="sample-po-loading-overlay-basic/sample-po-loading-overlay-basic.component.css"> </file>
  * </example>
  *
  * <example name="po-loading-overlay-labs" title="PO Loading Overlay Labs">
  *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.html"> </file>
  *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.ts"> </file>
+ *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-loading-overlay-connection-test" title="PO Loading Overlay - Connection Test">
@@ -6844,6 +6853,8 @@ class PoPopoverBaseComponent {
      * @default `false`
      */
     appendBox = false;
+    // Indica se o elemento filho será alinhado nos cantos do elemento pai.
+    cornerAligned = false;
     /**
      * @description
      *
@@ -6890,6 +6901,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. */
@@ -6982,7 +6995,7 @@ class PoPopoverBaseComponent {
      */
     customClasses = input(undefined, { alias: 'p-custom-classes' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoPopoverBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", 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: "19.0.7", 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: "19.0.7", ngImport: i0, type: PoPopoverBaseComponent, decorators: [{
             type: Component,
@@ -6994,12 +7007,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", 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']
@@ -7047,8 +7066,10 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
     timeoutResize;
     targetElement;
     afterViewInitWasCalled = false;
+    widthPopover = undefined;
     keydownTargetListener;
     keydownPopoverListener;
+    resizeObserver;
     eventListenerFunction;
     tabbableSelector = [
         'a[href]:not([tabindex="-1"])',
@@ -7088,10 +7109,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();
@@ -7113,6 +7136,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') {
@@ -7207,7 +7240,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;
@@ -7312,12 +7345,32 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         const prev = docTabs[idx - 1] || docTabs[docTabs.length - 1];
         prev?.focus?.();
     }
+    observeContentResize() {
+        this.disconnectResizeObserver();
+        if (!this.popoverElement?.nativeElement)
+            return;
+        let initialCall = true;
+        this.resizeObserver = new ResizeObserver(() => {
+            if (initialCall) {
+                initialCall = false;
+                return;
+            }
+            this.setElementsControlPosition();
+            this.setPopoverPosition();
+            this.cd.detectChanges();
+        });
+        this.resizeObserver.observe(this.popoverElement.nativeElement);
+    }
+    disconnectResizeObserver() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", 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: "19.0.7", 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: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoPopoverComponent, isStandalone: false, selector: "po-popover", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popoverElement", first: true, predicate: ["popoverElement"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (appendBox) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"target\"\n    [cdkConnectedOverlayOpen]=\"true\"\n    [cdkConnectedOverlayDisableClose]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n}\n\n<ng-template #sharedPopoverContent>\n  <div\n    #popoverElement\n    [hidden]=\"isHidden\"\n    class=\"po-popover\"\n    [style.width.px]=\"width ?? widthPopover\"\n    [ngClass]=\"customClasses()\"\n  >\n    @if (!hideArrow) {\n      <div class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n\n    <div class=\"po-popover-content\">\n      @if (title) {\n        <span class=\"po-popover-title\">{{ title }}</span>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", 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 }]
@@ -8682,11 +8735,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * <example name="po-popup-labs" title="PO Popup - Labs">
  *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.html"> </file>
  *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.ts"> </file>
+ *   <file name="sample-po-popup-labs/sample-po-popup-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-popup-email" title="PO Popup Email">
  *   <file name="sample-po-popup-email/sample-po-popup-email.component.html"> </file>
  *   <file name="sample-po-popup-email/sample-po-popup-email.component.ts"> </file>
+ *   <file name="sample-po-popup-email/sample-po-popup-email.component.css"> </file>
  * </example>
  *
  */
@@ -8802,7 +8857,7 @@ class PoPopupComponent extends PoPopupBaseComponent {
     }
     onScroll = ({ target }) => {
         const { showPopup, popupRef } = this;
-        if (showPopup && popupRef?.nativeElement && !popupRef.nativeElement.contains(target)) {
+        if (showPopup && popupRef?.nativeElement && target instanceof Node && !popupRef.nativeElement.contains(target)) {
             this.close();
         }
     };
@@ -12942,6 +12997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * <example name="po-container-dashboard" title="PO Container - Dashboard">
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.html"> </file>
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.ts"> </file>
+ *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.component.css"> </file>
  *  <file name="sample-po-container-dashboard/sample-po-container-dashboard.service.ts"> </file>
  * </example>
  */
@@ -16977,10 +17033,10 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         if (this.readonly || $event?.target !== this.inputEl?.nativeElement) {
             return;
         }
-        this.objMask.keyup($event);
+        this.objMask?.keyup($event);
         // Controla a atualização do model, verificando se a data é valida
-        if (this.objMask.valueToModel || this.objMask.valueToModel === '') {
-            if (this.objMask.valueToModel.length >= 10) {
+        if (this.objMask?.valueToModel || this.objMask?.valueToModel === '') {
+            if (this.objMask?.valueToModel.length >= 10) {
                 this.controlModel(this.getDateFromString(this.inputEl.nativeElement.value));
                 this.date = this.getDateFromString(this.inputEl.nativeElement.value);
             }
@@ -17111,9 +17167,9 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         this.onTouchedModel?.();
         const date = this.inputEl.nativeElement.value;
         const newDate = date ? this.getDateFromString(date) : undefined;
-        this.objMask.blur($event);
+        this.objMask?.blur($event);
         this.onblur.emit();
-        if (this.objMask.valueToModel) {
+        if (this.objMask?.valueToModel) {
             if (this.objMask.valueToModel.length >= 10) {
                 this.controlModel(newDate);
                 this.date = newDate;
@@ -17137,7 +17193,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         }
         else {
             // Atualiza a posição do cursor ao clicar
-            this.objMask.click($event);
+            this.objMask?.click($event);
         }
     }
     onKeyDown(event) {
@@ -18323,6 +18379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * <example name="po-progress-labs" title="PO Progress Labs">
  *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.html"> </file>
  *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.ts"> </file>
+ *   <file name="sample-po-progress-labs/sample-po-progress-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-progress-publication" title="PO Progress - Publication">
@@ -25280,12 +25337,14 @@ const ID_SEARCH_BUTTON_CLEAN = 'search-button-clean';
  * <example name="po-search-labs" title="PO Search Labs">
  *  <file name="sample-po-search-labs/sample-po-search-labs.component.html"> </file>
  *  <file name="sample-po-search-labs/sample-po-search-labs.component.ts"> </file>
+ *  <file name="sample-po-search-labs/sample-po-search-labs.component.css"> </file>
  *  <file name="sample-po-search-labs/sample-po-search-labs.service.ts"> </file>
  * </example>
  *
  * <example name="po-search-find-people" title="PO Search Find People">
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.html"> </file>
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.ts"> </file>
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.css"> </file>
  *  <file name="sample-po-search-find-people/sample-po-search-find-people.service.ts"> </file>
  * </example>
  *
@@ -25303,6 +25362,7 @@ const ID_SEARCH_BUTTON_CLEAN = 'search-button-clean';
  * <example name="po-search-execute" title="PO Search Form Fields with Execute">
  *  <file name="sample-po-search-execute/sample-po-search-execute.component.html"> </file>
  *  <file name="sample-po-search-execute/sample-po-search-execute.component.ts"> </file>
+ *  <file name="sample-po-search-execute/sample-po-search-execute.component.css"> </file>
  * </example>
  *
  * <example name="po-search-fields-locate" title="PO Search Form Fields with Locate">
@@ -28627,6 +28687,7 @@ const poComboContainerOffset = 8;
  * <example name="po-combo-scheduling" title="PO Combo - Scheduling">
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.html"> </file>
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.ts"> </file>
+ *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.component.css"> </file>
  *   <file name="sample-po-combo-scheduling/sample-po-combo-scheduling.service.ts"> </file>
  * </example>
  *
@@ -37019,6 +37080,7 @@ const providers$1 = [
  * <example name="po-multiselect-template" title="PO Multiselect - Template">
  *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.html"> </file>
  *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.ts"> </file>
+ *   <file name="sample-po-multiselect-template/sample-po-multiselect-template.component.css"> </file>
  * </example>
  *
  * <example name="po-multiselect-heroes" title="PO Multiselect - Heroes - using API">
@@ -42085,6 +42147,7 @@ const PO_SELECT_FIELD_VALUE_DEFAULT = 'value';
  * <example name="po-select-customer-registration" title="PO Select - Customer registration">
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.html"> </file>
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.ts"> </file>
+ *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.css"> </file>
  *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.service.ts"> </file>
  * </example>
  *
@@ -48994,11 +49057,13 @@ const poMenuRootLevel = 1;
  * <example name="po-menu-labs" title="PO Menu Labs">
  *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.html"> </file>
  *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.ts"> </file>
+ *   <file name="sample-po-menu-labs/sample-po-menu-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-menu-human-resources" title="PO Menu - Human Resources">
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.html"> </file>
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.ts"> </file>
+ *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.component.css"> </file>
  *   <file name="sample-po-menu-human-resources/sample-po-menu-human-resources.service.ts"> </file>
  * </example>
  */
@@ -50569,6 +50634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * <example name="po-page-default-dashboard" title="PO Page Default - Dashboard">
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.html"> </file>
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.ts"> </file>
+ *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.css"> </file>
  *  <file name="sample-po-page-default-dashboard/sample-po-page-default-dashboard.service.ts"> </file>
  * </example>
  */
@@ -53157,6 +53223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * <example name="po-stepper-sales" title="PO Stepper - Sales">
  *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.html"> </file>
  *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.ts"> </file>
+ *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.css"> </file>
  * </example>
  *
  * <example name="po-stepper-active" title="PO Stepper - Active">
@@ -56085,11 +56152,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * <example name="po-widget-labs" title="PO Widget Labs">
  *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.html"> </file>
  *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.ts"> </file>
+ *  <file name="sample-po-widget-labs/sample-po-widget-labs.component.css"> </file>
  * </example>
  *
  * <example name="po-widget-finance-dashboard" title="PO Widget - Finance dashboard">
  *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.html"> </file>
  *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.ts"> </file>
+ *  <file name="sample-po-widget-finance-dashboard/sample-po-widget-finance-dashboard.component.css"> </file>
  * </example>
  *
  * <example name="po-widget-card" title="PO Widget - Card">
@@ -56980,11 +57049,11 @@ class PoHeaderToolsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", 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: "19.0.7", 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: "19.0.7", type: PoHeaderToolsComponent, isStandalone: false, selector: "po-header-tools", inputs: { forceActionTools: ["p-force-actions-tools", "forceActionTools"], actionTools: ["p-actions-tools", "actionTools"], literals: ["p-literals", "literals"], headerTemplate: ["p-header-template", "headerTemplate"] }, viewQueries: [{ propertyName: "buttonActionElements", predicate: ["buttonActionElement"], descendants: true, read: ElementRef }, { propertyName: "buttonActionComponents", predicate: ["buttonActionElement"], descendants: true }, { propertyName: "poPopupActions", predicate: ["poPopupAction"], descendants: true }, { propertyName: "poPopoverActions", predicate: ["poPopoverAction"], descendants: true }], ngImport: i0, template: "<div class=\"po-header-nav-tools\">\n  @if (headerTemplate) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  }\n  @for (action of actionTools; track action?.label; let i = $index) {\n    <li [class.po-header-nav-item-small]=\"i !== actionTools.length - 1\">\n      <po-button\n        #buttonActionElement\n        [p-tooltip]=\"action?.tooltip\"\n        [p-icon]=\"action?.badge ? badge : action?.icon || 'an an-dots-nine'\"\n        p-kind=\"tertiary\"\n        (p-click)=\"onClickAction(i)\"\n        [class.po-header-selected-tool]=\"checkSelected(i)\"\n        [p-aria-expanded]=\"checkSelected(i)\"\n        [p-aria-label]=\"getAriaLabel(action)\"\n        p-size=\"medium\"\n      >\n      </po-button>\n\n      <ng-template #badge>\n        <i class=\"po-header-badge\" [class]=\"action?.icon || 'an an-bell'\">\n          <po-badge class=\"po-header-status\" [p-value]=\"action?.badge\"></po-badge>\n        </i>\n      </ng-template>\n\n      <po-popup\n        #poPopupAction\n        [p-actions]=\"action?.items\"\n        [p-target]=\"buttonActionElements?.get(i)\"\n        [p-hide-arrow]=\"true\"\n        (p-close)=\"onClosePopup(i)\"\n        p-size=\"medium\"\n      >\n      </po-popup>\n\n      @if (action?.popover) {\n        <po-popover\n          #poPopoverAction\n          p-position=\"bottom-right\"\n          [p-width]=\"action.popover.width\"\n          [p-target]=\"buttonActionElements?.get(i)\"\n          [p-hide-arrow]=\"true\"\n          [p-corner-aligned]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"action.popover?.content\"></ng-container>\n        </po-popover>\n      }\n    </li>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoHeaderToolsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-header-tools', standalone: false, template: "<div class=\"po-header-nav-tools\">\n  @if (headerTemplate) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  }\n  @for (action of actionTools; track action?.label; let i = $index) {\n    <li [class.po-header-nav-item-small]=\"i !== actionTools.length - 1\">\n      <po-button\n        #buttonActionElement\n        [p-tooltip]=\"action?.tooltip\"\n        [p-icon]=\"action?.badge ? badge : action?.icon || 'an an-dots-nine'\"\n        p-kind=\"tertiary\"\n        (p-click)=\"onClickAction(i)\"\n        [class.po-header-selected-tool]=\"checkSelected(i)\"\n        [p-aria-expanded]=\"checkSelected(i)\"\n        [p-aria-label]=\"getAriaLabel(action)\"\n        p-size=\"medium\"\n      >\n      </po-button>\n\n      <ng-template #badge>\n        <i class=\"po-header-badge\" [class]=\"action?.icon || 'an an-bell'\">\n          <po-badge class=\"po-header-status\" [p-value]=\"action?.badge\"></po-badge>\n        </i>\n      </ng-template>\n\n      <po-popup\n        #poPopupAction\n        [p-actions]=\"action?.items\"\n        [p-target]=\"buttonActionElements?.get(i)\"\n        [p-hide-arrow]=\"true\"\n        (p-close)=\"onClosePopup(i)\"\n        p-size=\"medium\"\n      >\n      </po-popup>\n\n      @if (action?.popover) {\n        <po-popover\n          #poPopoverAction\n          [p-target]=\"buttonActionElements?.get(i)\"\n          p-position=\"bottom-left\"\n          [p-hide-arrow]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"action.popover?.content\"></ng-container>\n        </po-popover>\n      }\n    </li>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-header-tools', standalone: false, template: "<div class=\"po-header-nav-tools\">\n  @if (headerTemplate) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  }\n  @for (action of actionTools; track action?.label; let i = $index) {\n    <li [class.po-header-nav-item-small]=\"i !== actionTools.length - 1\">\n      <po-button\n        #buttonActionElement\n        [p-tooltip]=\"action?.tooltip\"\n        [p-icon]=\"action?.badge ? badge : action?.icon || 'an an-dots-nine'\"\n        p-kind=\"tertiary\"\n        (p-click)=\"onClickAction(i)\"\n        [class.po-header-selected-tool]=\"checkSelected(i)\"\n        [p-aria-expanded]=\"checkSelected(i)\"\n        [p-aria-label]=\"getAriaLabel(action)\"\n        p-size=\"medium\"\n      >\n      </po-button>\n\n      <ng-template #badge>\n        <i class=\"po-header-badge\" [class]=\"action?.icon || 'an an-bell'\">\n          <po-badge class=\"po-header-status\" [p-value]=\"action?.badge\"></po-badge>\n        </i>\n      </ng-template>\n\n      <po-popup\n        #poPopupAction\n        [p-actions]=\"action?.items\"\n        [p-target]=\"buttonActionElements?.get(i)\"\n        [p-hide-arrow]=\"true\"\n        (p-close)=\"onClosePopup(i)\"\n        p-size=\"medium\"\n      >\n      </po-popup>\n\n      @if (action?.popover) {\n        <po-popover\n          #poPopoverAction\n          p-position=\"bottom-right\"\n          [p-width]=\"action.popover.width\"\n          [p-target]=\"buttonActionElements?.get(i)\"\n          [p-hide-arrow]=\"true\"\n          [p-corner-aligned]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"action.popover?.content\"></ng-container>\n        </po-popover>\n      }\n    </li>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { buttonActionElements: [{
                 type: ViewChildren,
                 args: ['buttonActionElement', { read: ElementRef }]
@@ -57063,11 +57132,11 @@ class PoHeaderCustomerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoHeaderCustomerComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", 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: "19.0.7", type: PoHeaderCustomerComponent, isStandalone: false, selector: "po-header-customer", inputs: { headerUser: ["p-header-user", "headerUser"] }, viewQueries: [{ propertyName: "poPopupAction", first: true, predicate: ["poPopupAction"], descendants: true }, { propertyName: "poPopoverAction", first: true, predicate: ["poPopoverAction"], descendants: true }], ngImport: i0, template: "<div class=\"po-header-nav-tools\" (click)=\"onClickUserSection()\" (keydown)=\"onKeyDownCustomer($event)\">\n  <li\n    #targetRef\n    tabindex=\"0\"\n    class=\"po-header-nav-customer-container\"\n    (click)=\"onClickPopup()\"\n    role=\"menu\"\n    [attr.aria-label]=\"literals.labelUser\"\n  >\n    <div class=\"po-header-nav-customer-brand\">\n      <img [src]=\"headerUser?.customerBrand\" alt=\"User\" />\n    </div>\n\n    <div class=\"po-header-nav-customer-divider\"></div>\n\n    <div class=\"po-header-nav-customer-avatar-wrapper\">\n      <div class=\"po-header-nav-customer-avatar\">\n        <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n      </div>\n      @if (headerUser?.status) {\n        <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n      }\n    </div>\n  </li>\n\n  <li class=\"po-header-nav-customer-avatar-wrapper po-header-icon-small\">\n    <div class=\"po-header-nav-customer-avatar\">\n      <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n    </div>\n    @if (headerUser?.status) {\n      <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n    }\n  </li>\n</div>\n\n@if (headerUser?.items?.length) {\n  <po-popup\n    #poPopupAction\n    [p-actions]=\"headerUser.items\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    p-position=\"bottom-left\"\n    p-size=\"medium\"\n  >\n  </po-popup>\n}\n\n@if (headerUser?.popover) {\n  <po-popover\n    #poPopoverAction\n    p-position=\"bottom-right\"\n    [p-width]=\"headerUser.popover.width\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    [p-corner-aligned]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerUser.popover.content\"></ng-container>\n  </po-popover>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoHeaderCustomerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-header-customer', standalone: false, template: "<div class=\"po-header-nav-tools\" (click)=\"onClickUserSection()\" (keydown)=\"onKeyDownCustomer($event)\">\n  <li\n    #targetRef\n    tabindex=\"0\"\n    class=\"po-header-nav-customer-container\"\n    (click)=\"onClickPopup()\"\n    role=\"menu\"\n    [attr.aria-label]=\"literals.labelUser\"\n  >\n    <div class=\"po-header-nav-customer-brand\">\n      <img [src]=\"headerUser?.customerBrand\" alt=\"User\" />\n    </div>\n\n    <div class=\"po-header-nav-customer-divider\"></div>\n\n    <div class=\"po-header-nav-customer-avatar-wrapper\">\n      <div class=\"po-header-nav-customer-avatar\">\n        <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n      </div>\n      @if (headerUser?.status) {\n        <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n      }\n    </div>\n  </li>\n\n  <li class=\"po-header-nav-customer-avatar-wrapper po-header-icon-small\">\n    <div class=\"po-header-nav-customer-avatar\">\n      <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n    </div>\n    @if (headerUser?.status) {\n      <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n    }\n  </li>\n</div>\n\n@if (headerUser?.items?.length) {\n  <po-popup\n    #poPopupAction\n    [p-actions]=\"headerUser.items\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    p-position=\"bottom-left\"\n    p-size=\"medium\"\n  >\n  </po-popup>\n}\n\n@if (headerUser?.popover) {\n  <po-popover #poPopoverAction [p-target]=\"targetRef\" p-position=\"bottom-left\" [p-hide-arrow]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerUser.popover.content\"></ng-container>\n  </po-popover>\n}\n" }]
+            args: [{ selector: 'po-header-customer', standalone: false, template: "<div class=\"po-header-nav-tools\" (click)=\"onClickUserSection()\" (keydown)=\"onKeyDownCustomer($event)\">\n  <li\n    #targetRef\n    tabindex=\"0\"\n    class=\"po-header-nav-customer-container\"\n    (click)=\"onClickPopup()\"\n    role=\"menu\"\n    [attr.aria-label]=\"literals.labelUser\"\n  >\n    <div class=\"po-header-nav-customer-brand\">\n      <img [src]=\"headerUser?.customerBrand\" alt=\"User\" />\n    </div>\n\n    <div class=\"po-header-nav-customer-divider\"></div>\n\n    <div class=\"po-header-nav-customer-avatar-wrapper\">\n      <div class=\"po-header-nav-customer-avatar\">\n        <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n      </div>\n      @if (headerUser?.status) {\n        <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n      }\n    </div>\n  </li>\n\n  <li class=\"po-header-nav-customer-avatar-wrapper po-header-icon-small\">\n    <div class=\"po-header-nav-customer-avatar\">\n      <img [src]=\"headerUser?.avatar\" alt=\"Avatar\" />\n    </div>\n    @if (headerUser?.status) {\n      <po-badge class=\"po-header-nav-avatar-status\" p-size=\"small\" [p-status]=\"headerUser.status\"></po-badge>\n    }\n  </li>\n</div>\n\n@if (headerUser?.items?.length) {\n  <po-popup\n    #poPopupAction\n    [p-actions]=\"headerUser.items\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    p-position=\"bottom-left\"\n    p-size=\"medium\"\n  >\n  </po-popup>\n}\n\n@if (headerUser?.popover) {\n  <po-popover\n    #poPopoverAction\n    p-position=\"bottom-right\"\n    [p-width]=\"headerUser.popover.width\"\n    [p-target]=\"targetRef\"\n    [p-hide-arrow]=\"true\"\n    [p-corner-aligned]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerUser.popover.content\"></ng-container>\n  </po-popover>\n}\n" }]
         }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { poPopupAction: [{
                 type: ViewChild,
                 args: ['poPopupAction']