@po-ui/ng-components 21.26.0 → 21.27.0

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

@@ -4850,8 +4850,9 @@ class PoPopupBaseComponent {
     }
     closeEvent = new EventEmitter();
     clickItem = new EventEmitter();
+    openEvent = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoPopupBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: PoPopupBaseComponent, isStandalone: true, inputs: { templateIcon: ["p-template-icon", "templateIcon"], actions: ["p-actions", "actions"], hideArrow: ["p-hide-arrow", "hideArrow"], isCornerAlign: ["p-is-corner-align", "isCornerAlign"], position: ["p-position", "position"], customPositions: ["p-custom-positions", "customPositions"], size: ["p-size", "size"], target: ["p-target", "target"] }, outputs: { closeEvent: "p-close", clickItem: "p-click-item" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: PoPopupBaseComponent, isStandalone: true, inputs: { templateIcon: ["p-template-icon", "templateIcon"], actions: ["p-actions", "actions"], hideArrow: ["p-hide-arrow", "hideArrow"], isCornerAlign: ["p-is-corner-align", "isCornerAlign"], position: ["p-position", "position"], customPositions: ["p-custom-positions", "customPositions"], size: ["p-size", "size"], target: ["p-target", "target"] }, outputs: { closeEvent: "p-close", clickItem: "p-click-item", openEvent: "p-open" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoPopupBaseComponent, decorators: [{
             type: Directive
@@ -4885,6 +4886,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }], clickItem: [{
                 type: Output,
                 args: ['p-click-item']
+            }], openEvent: [{
+                type: Output,
+                args: ['p-open']
             }] } });
 
 var PoItemListType;
@@ -9039,6 +9043,7 @@ class PoPopupComponent extends PoPopupBaseComponent {
         this.showPopup = true;
         this.changeDetector.detectChanges();
         this.validateInitialContent();
+        this.openEvent.emit();
     }
     returnBooleanValue(popupAction, property) {
         return PoUtils.isTypeof(popupAction[property], 'function')
@@ -70888,11 +70893,11 @@ class PoHeaderToolsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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.2.19", 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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); action?.onClose?.(action?.label)\"\n        (p-open)=\"action?.onOpen?.(action?.label)\"\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          (p-close)=\"action?.onClose?.(action?.label)\"\n          (p-open)=\"action?.onOpen?.(action?.label)\"\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.2.19", 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]=\"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" }]
+            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); action?.onClose?.(action?.label)\"\n        (p-open)=\"action?.onOpen?.(action?.label)\"\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          (p-close)=\"action?.onClose?.(action?.label)\"\n          (p-open)=\"action?.onOpen?.(action?.label)\"\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 }]
@@ -70972,11 +70977,11 @@ class PoHeaderCustomerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoHeaderCustomerComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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-close)=\"headerUser?.onClose?.()\"\n    (p-open)=\"headerUser?.onOpen?.()\"\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    (p-close)=\"headerUser?.onClose?.()\"\n    (p-open)=\"headerUser?.onOpen?.()\"\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.2.19", 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]=\"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" }]
+            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-close)=\"headerUser?.onClose?.()\"\n    (p-open)=\"headerUser?.onOpen?.()\"\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    (p-close)=\"headerUser?.onClose?.()\"\n    (p-open)=\"headerUser?.onOpen?.()\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerUser.popover.content\"></ng-container>\n  </po-popover>\n}\n" }]
         }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { poPopupAction: [{
                 type: ViewChild,
                 args: ['poPopupAction']