@fundamental-ngx/core 0.55.4 → 0.55.5

package/fesm2022/fundamental-ngx-core-user-menu.mjs

@@ -0,0 +1,652 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, input, booleanAttribute, signal, viewChild, inject, ElementRef, DestroyRef, NgZone, ChangeDetectorRef, HostListener, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, ContentChildren, contentChildren, contentChild, effect, ContentChild, Directive, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RtlService, KeyboardSupportService } from '@fundamental-ngx/cdk/utils';
+import { BarComponent, BarLeftDirective, BarRightDirective, ButtonBarComponent, BarElementDirective } from '@fundamental-ngx/core/bar';
+import { contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
+import { TitleComponent } from '@fundamental-ngx/core/title';
+import { Subject, startWith, observeOn, asyncScheduler, take, map, merge, takeUntil } from 'rxjs';
+import { PopoverComponent, PopoverBodyComponent, PopoverControlComponent } from '@fundamental-ngx/core/popover';
+import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
+import { map as map$1 } from 'rxjs/operators';
+import { ContentDensityMode } from '@fundamental-ngx/core';
+import { DialogService, DialogComponent, DialogBodyComponent, DialogFooterComponent } from '@fundamental-ngx/core/dialog';
+
+let uniqueId = 0;
+let uniqueTextId = 0;
+class UserMenuListItemComponent {
+    constructor() {
+        /** Event emitter for keyDown event */
+        this.keyDown = new EventEmitter();
+        /** Event emitter for isOpenChange event that controls the submenu popover body */
+        this.isOpenChange = new EventEmitter();
+        /** Event emitter for showSubmenu event */
+        this.showSubmenu = new EventEmitter();
+        /** Event emitter for updateTitle event */
+        this.updateTitle = new EventEmitter();
+        /** Unique id for the menu list item. Default is provided. */
+        this.uniqueId = input(`fd-menu-list-item-${++uniqueId}`);
+        /** Icon name for the menu list item (optional) */
+        this.icon = input();
+        /** Required text for the menu list item */
+        this.text = input.required();
+        /** Unique id for the title. Default is provided. */
+        this.textId = input(`fd-menu-list-item-title-${++uniqueTextId}`);
+        /** Whether the item has a submenu */
+        this.hasSubmenu = input(false, { transform: booleanAttribute });
+        /** Template ref for user menu list item submenu */
+        this.submenu = input(null);
+        /** Whether the item is selected */
+        this.selected = input(false, { transform: booleanAttribute });
+        /** Whether the item's submenu is open */
+        this.isOpen = signal(false);
+        /** Whether the item is in mobile mode */
+        this.mobile = signal(false);
+        /** Reference to the popover */
+        this.popover = viewChild(PopoverComponent);
+        /** @hidden */
+        this.focused = new Subject();
+        /** Item's tabindex */
+        this._tabIndex$ = signal(null);
+        /** @hidden */
+        this._elementRef = inject(ElementRef);
+        /** @hidden */
+        this._destroyRef = inject(DestroyRef);
+        /** @hidden */
+        this._zone = inject(NgZone);
+        /** @hidden */
+        this._changeDetectionRef = inject(ChangeDetectorRef);
+    }
+    /** @hidden */
+    focusHandler() {
+        this.focused.next(this);
+    }
+    /** Handles submenu selection in mobile mode */
+    onShowDetailsView() {
+        if (this.submenu() && this.mobile()) {
+            this.showSubmenu.emit(this.submenu());
+            this.updateTitle.emit(this.text());
+        }
+    }
+    /** @hidden Support for KeyboardSupportItemInterface */
+    click() {
+        const linkElement = this._elementRef.nativeElement.querySelector('.fd-menu__link');
+        linkElement.click();
+    }
+    /** @hidden */
+    focus() {
+        const linkElement = this._elementRef.nativeElement.querySelector('.fd-menu__link');
+        linkElement.focus();
+    }
+    /** @hidden */
+    isOpenChangeHandle(isOpen, popover) {
+        const firstTabbableElement = popover.popoverBody._elementRef.nativeElement.querySelector('.fd-menu__link');
+        const linkElement = this._elementRef.nativeElement.querySelector('.fd-menu__link');
+        if (this.isOpen() === isOpen) {
+            return;
+        }
+        this.isOpen.set(isOpen);
+        this.isOpenChange.emit(isOpen);
+        this._onZoneStable().subscribe(() => {
+            this.isOpen() ? linkElement.classList.add('is-active') : linkElement.classList.remove('is-active');
+            firstTabbableElement.focus();
+        });
+        if (!this.isOpen()) {
+            linkElement.focus();
+        }
+        this._changeDetectionRef.detectChanges();
+    }
+    /** @hidden */
+    _onZoneStable() {
+        return this._zone.onStable.pipe(startWith(this._zone.isStable), observeOn(asyncScheduler), take(1), takeUntilDestroyed(this._destroyRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: UserMenuListItemComponent, isStandalone: true, selector: "[fd-user-menu-list-item]", inputs: { uniqueId: { classPropertyName: "uniqueId", publicName: "uniqueId", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, textId: { classPropertyName: "textId", publicName: "textId", isSignal: true, isRequired: false, transformFunction: null }, hasSubmenu: { classPropertyName: "hasSubmenu", publicName: "hasSubmenu", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keyDown: "keyDown", isOpenChange: "isOpenChange", showSubmenu: "showSubmenu", updateTitle: "updateTitle" }, host: { attributes: { "role": "none" }, listeners: { "focusin": "focusHandler()" }, properties: { "attr.id": "uniqueId()", "attr.aria-labelledby": "textId()" }, classAttribute: "fd-menu__item" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasSubmenu()) {\n    @if (mobile()) {\n        <button\n            role=\"menuitem\"\n            class=\"fd-menu__link\"\n            [class.is-selected]=\"selected()\"\n            [tabIndex]=\"_tabIndex$()\"\n            (click)=\"onShowDetailsView()\"\n        >\n            @if (icon()) {\n                <span class=\"fd-menu__addon-before\">\n                    <i [class]=\"'sap-icon--' + icon()\" role=\"presentation\"></i>\n                </span>\n            }\n\n            <span class=\"fd-menu__title\" [id]=\"textId()\">{{ text() }}</span>\n            <span class=\"fd-menu__addon-after fd-menu__addon-after--submenu\"></span>\n        </button>\n    } @else {\n        <fd-popover\n            #popover\n            [noArrow]=\"true\"\n            style=\"width: 100%\"\n            placement=\"left-start\"\n            [focusTrapped]=\"true\"\n            [focusAutoCapture]=\"true\"\n            [restoreFocusOnClose]=\"false\"\n            [isOpen]=\"isOpen()\"\n            (isOpenChange)=\"isOpenChangeHandle($event, popover)\"\n        >\n            <fd-popover-control>\n                <button\n                    role=\"menuitem\"\n                    class=\"fd-menu__link fd-menu__link--popover\"\n                    [class.is-selected]=\"selected()\"\n                    [tabIndex]=\"_tabIndex$()\"\n                >\n                    @if (icon()) {\n                        <span class=\"fd-menu__addon-before\">\n                            <i [class]=\"'sap-icon--' + icon()\" role=\"presentation\"></i>\n                        </span>\n                    }\n\n                    <span class=\"fd-menu__title\" [id]=\"textId()\">{{ text() }}</span>\n                    <span class=\"fd-menu__addon-after fd-menu__addon-after--submenu\"></span>\n                </button>\n            </fd-popover-control>\n            <fd-popover-body>\n                <ng-container *ngTemplateOutlet=\"submenu()\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    }\n} @else {\n    <button role=\"menuitem\" class=\"fd-menu__link\" [class.is-selected]=\"selected()\" [tabIndex]=\"_tabIndex$()\">\n        @if (icon()) {\n            <span class=\"fd-menu__addon-before\">\n                <i [class]=\"'sap-icon--' + icon()\" role=\"presentation\"></i>\n            </span>\n        }\n\n        <span class=\"fd-menu__title\" [id]=\"textId()\">{{ text() }}</span>\n    </button>\n}\n", dependencies: [{ kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[fd-user-menu-list-item]', host: {
+                        class: 'fd-menu__item',
+                        role: 'none',
+                        '[attr.id]': 'uniqueId()',
+                        '[attr.aria-labelledby]': 'textId()'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PopoverBodyComponent, PopoverComponent, PopoverControlComponent, CommonModule], template: "@if (hasSubmenu()) {\n    @if (mobile()) {\n        <button\n            role=\"menuitem\"\n            class=\"fd-menu__link\"\n            [class.is-selected]=\"selected()\"\n            [tabIndex]=\"_tabIndex$()\"\n            (click)=\"onShowDetailsView()\"\n        >\n            @if (icon()) {\n                <span class=\"fd-menu__addon-before\">\n                    <i [class]=\"'sap-icon--' + icon()\" role=\"presentation\"></i>\n                </span>\n            }\n\n            <span class=\"fd-menu__title\" [id]=\"textId()\">{{ text() }}</span>\n            <span class=\"fd-menu__addon-after fd-menu__addon-after--submenu\"></span>\n        </button>\n    } @else {\n        <fd-popover\n            #popover\n            [noArrow]=\"true\"\n            style=\"width: 100%\"\n            placement=\"left-start\"\n            [focusTrapped]=\"true\"\n            [focusAutoCapture]=\"true\"\n            [restoreFocusOnClose]=\"false\"\n            [isOpen]=\"isOpen()\"\n            (isOpenChange)=\"isOpenChangeHandle($event, popover)\"\n        >\n            <fd-popover-control>\n                <button\n                    role=\"menuitem\"\n                    class=\"fd-menu__link fd-menu__link--popover\"\n                    [class.is-selected]=\"selected()\"\n                    [tabIndex]=\"_tabIndex$()\"\n                >\n                    @if (icon()) {\n                        <span class=\"fd-menu__addon-before\">\n                            <i [class]=\"'sap-icon--' + icon()\" role=\"presentation\"></i>\n                        </span>\n                    }\n\n                    <span class=\"fd-menu__title\" [id]=\"textId()\">{{ text() }}</span>\n                    <span class=\"fd-menu__addon-after fd-menu__addon-after--submenu\"></span>\n                </button>\n            </fd-popover-control>\n            <fd-popover-body>\n                <ng-container *ngTemplateOutlet=\"submenu()\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    }\n} @else {\n    <button role=\"menuitem\" class=\"fd-menu__link\" [class.is-selected]=\"selected()\" [tabIndex]=\"_tabIndex$()\">\n        @if (icon()) {\n            <span class=\"fd-menu__addon-before\">\n                <i [class]=\"'sap-icon--' + icon()\" role=\"presentation\"></i>\n            </span>\n        }\n\n        <span class=\"fd-menu__title\" [id]=\"textId()\">{{ text() }}</span>\n    </button>\n}\n" }]
+        }], propDecorators: { keyDown: [{
+                type: Output
+            }], isOpenChange: [{
+                type: Output
+            }], showSubmenu: [{
+                type: Output
+            }], updateTitle: [{
+                type: Output
+            }], focusHandler: [{
+                type: HostListener,
+                args: ['focusin']
+            }] } });
+
+class UserMenuBodyComponent {
+    constructor() {
+        /**
+         * Template ref of the submenu
+         */
+        this.submenu = signal(null);
+        /**
+         * The text of the selected item
+         * Needed in mobile mode to update the title in the header
+         */
+        this.selectedItemTitle = signal(null);
+        /**
+         * Template ref to the header of the user menu body.
+         * Needed in mobile mode
+         */
+        this.bodyHeader = viewChild('bodyHeader');
+        /** @hidden */
+        this._rtlService = inject(RtlService);
+        /** @hidden */
+        this._refresh$ = new Subject();
+        /** @hidden */
+        this._destroyRef = inject(DestroyRef);
+        /** @hidden */
+        this._keyboardSupportService = inject(KeyboardSupportService);
+    }
+    /** @hidden */
+    onClick(event) {
+        event.stopPropagation();
+    }
+    /** @hidden */
+    keyDownHandler(event) {
+        if (this._keyboardSupportService.keyManager) {
+            this._keyboardSupportService.onKeyDown(event);
+        }
+    }
+    /** @hidden */
+    ngOnInit() {
+        this.navigationArrow$ = this._rtlService.rtl.pipe(map((isRtl) => (isRtl ? 'navigation-right-arrow' : 'navigation-left-arrow')));
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        this._keyboardSupportService.setKeyboardService(this._listItems, false, false);
+        this._listItems.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._setupInteractionListeners();
+        });
+        this._listItems.changes
+            .pipe(startWith(this._listItems), takeUntilDestroyed(this._destroyRef))
+            .subscribe((listItems) => {
+            listItems.forEach((item) => {
+                item.showSubmenu
+                    .pipe(takeUntilDestroyed(this._destroyRef))
+                    .subscribe((submenuTpl) => {
+                    this.selectItem(submenuTpl);
+                });
+                item.updateTitle.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((title) => {
+                    this.updateTitle(title);
+                });
+            });
+        });
+    }
+    /**
+     * Selects the item and sets the submenu template ref
+     */
+    selectItem(submenuTpl) {
+        this.submenu.set(submenuTpl);
+    }
+    /**
+     * Updates the title of the selected item
+     */
+    updateTitle(title) {
+        this.selectedItemTitle.set(title);
+    }
+    /**
+     * Clears the submenu template ref and the selected item title
+     * Closes the submenu and returns to the main view
+     */
+    clearSubmenu() {
+        this.submenu.set(null);
+        this.selectedItemTitle.set(null);
+    }
+    /**
+     * Closes the dialog in mobile mode
+     */
+    closeDialog(dialogRef) {
+        dialogRef.dismiss('Close');
+        this.clearSubmenu();
+    }
+    /** @hidden */
+    _setupInteractionListeners() {
+        this._refresh$.next();
+        this._refresh$.complete();
+        this._refresh$ = new Subject();
+        merge(...this._listItems.toArray().map((i) => i.focused))
+            .pipe(takeUntil(this._refresh$), takeUntilDestroyed(this._destroyRef))
+            .subscribe((focusedItem) => {
+            this._listItems.forEach((item) => {
+                item._tabIndex$.set(-1);
+            });
+            focusedItem._tabIndex$.set(0);
+            this._keyboardSupportService.keyManager.setActiveItem(focusedItem);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: UserMenuBodyComponent, isStandalone: true, selector: "fd-user-menu-body", host: { listeners: { "click": "onClick($event)", "keydown": "keyDownHandler($event)" }, classAttribute: "fd-user-menu__body" }, providers: [KeyboardSupportService, contentDensityObserverProviders()], queries: [{ propertyName: "_listItems", predicate: UserMenuListItemComponent, descendants: true }], viewQueries: [{ propertyName: "bodyHeader", first: true, predicate: ["bodyHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!submenu()) {\n    <ng-content select=\"[fd-user-menu-header]\"></ng-content>\n    <ng-content select=\"[fd-user-menu-content-container]\"></ng-content>\n} @else {\n    <div class=\"fd-user-menu__details-view\">\n        <ng-container *ngTemplateOutlet=\"submenu()\"></ng-container>\n    </div>\n}\n\n<ng-template #bodyHeader let-dialogRef=\"dialogRef\">\n    <div fd-bar [class.fd-user-menu__main-view-bar]=\"!submenu()\">\n        @if (submenu()) {\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <fd-button-bar ariaLabel=\"previous\" [glyph]=\"navigationArrow$ | async\" (click)=\"clearSubmenu()\">\n                    </fd-button-bar>\n                </fd-bar-element>\n                <fd-bar-element>\n                    <h5 fd-title>{{ selectedItemTitle() }}</h5>\n                </fd-bar-element>\n            </div>\n        }\n        <div fd-bar-right>\n            <fd-bar-element>\n                <fd-button-bar ariaLabel=\"previous\" glyph=\"decline\" (click)=\"closeDialog(dialogRef)\"> </fd-button-bar>\n            </fd-bar-element>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fd-user-menu-body', host: {
+                        class: 'fd-user-menu__body'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        BarComponent,
+                        CommonModule,
+                        TitleComponent,
+                        BarLeftDirective,
+                        BarRightDirective,
+                        ButtonBarComponent,
+                        BarElementDirective
+                    ], providers: [KeyboardSupportService, contentDensityObserverProviders()], template: "@if (!submenu()) {\n    <ng-content select=\"[fd-user-menu-header]\"></ng-content>\n    <ng-content select=\"[fd-user-menu-content-container]\"></ng-content>\n} @else {\n    <div class=\"fd-user-menu__details-view\">\n        <ng-container *ngTemplateOutlet=\"submenu()\"></ng-container>\n    </div>\n}\n\n<ng-template #bodyHeader let-dialogRef=\"dialogRef\">\n    <div fd-bar [class.fd-user-menu__main-view-bar]=\"!submenu()\">\n        @if (submenu()) {\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <fd-button-bar ariaLabel=\"previous\" [glyph]=\"navigationArrow$ | async\" (click)=\"clearSubmenu()\">\n                    </fd-button-bar>\n                </fd-bar-element>\n                <fd-bar-element>\n                    <h5 fd-title>{{ selectedItemTitle() }}</h5>\n                </fd-bar-element>\n            </div>\n        }\n        <div fd-bar-right>\n            <fd-bar-element>\n                <fd-button-bar ariaLabel=\"previous\" glyph=\"decline\" (click)=\"closeDialog(dialogRef)\"> </fd-button-bar>\n            </fd-bar-element>\n        </div>\n    </div>\n</ng-template>\n" }]
+        }], propDecorators: { _listItems: [{
+                type: ContentChildren,
+                args: [UserMenuListItemComponent, { descendants: true }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], keyDownHandler: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class UserMenuContentContainerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuContentContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: UserMenuContentContainerComponent, isStandalone: true, selector: "[fd-user-menu-content-container]", host: { classAttribute: "fd-user-menu__content-container" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuContentContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[fd-user-menu-content-container]',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'fd-user-menu__content-container'
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class UserMenuControlComponent {
+    constructor() {
+        /** Event emitted event when control element is clicked */
+        this.clicked = new EventEmitter();
+        /** @hidden Saves element that is focused before dialog opened */
+        this._focusedElementBeforeDialogOpened = null;
+    }
+    /** @hidden */
+    onClick() {
+        this._focusedElementBeforeDialogOpened = _getFocusedElementPierceShadowDom();
+        this.clicked.emit();
+    }
+    /** @hidden */
+    _focus() {
+        this._focusedElementBeforeDialogOpened?.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: UserMenuControlComponent, isStandalone: true, selector: "fd-user-menu-control", outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fd-user-menu-control',
+                    template: `<ng-content />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule]
+                }]
+        }], propDecorators: { clicked: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class UserMenuFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: UserMenuFooterComponent, isStandalone: true, selector: "fd-user-menu-footer", ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fd-user-menu-footer',
+                    template: `<ng-content />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule]
+                }]
+        }] });
+
+class UserMenuListComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: UserMenuListComponent, isStandalone: true, selector: "fd-user-menu-list", ngImport: i0, template: `
+        <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
+            <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
+                <ng-content />
+            </ul>
+        </nav>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fd-user-menu-list',
+                    template: `
+        <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
+            <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
+                <ng-content />
+            </ul>
+        </nav>
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class UserMenuSublistComponent {
+    constructor() {
+        /** Whether the sublist menu items have icons */
+        this.hasIcons = input(false, { transform: booleanAttribute });
+        /** @hidden */
+        this._refresh$ = new Subject();
+        /** @hidden */
+        this._destroyRef = inject(DestroyRef);
+        /** @hidden */
+        this._keyboardSupportService = inject((KeyboardSupportService));
+    }
+    /** @hidden */
+    onClick(event) {
+        event.stopPropagation();
+    }
+    /** @hidden */
+    keyDownHandler(event) {
+        if (this._keyboardSupportService.keyManager) {
+            this._keyboardSupportService.onKeyDown(event);
+        }
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        this._keyboardSupportService.setKeyboardService(this._listItems, false, false);
+        this._listItems.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._setupInteractionListeners();
+        });
+    }
+    /** @hidden */
+    _setupInteractionListeners() {
+        this._refresh$.next();
+        this._refresh$.complete();
+        this._refresh$ = new Subject();
+        merge(...this._listItems.toArray().map((i) => i.focused))
+            .pipe(takeUntil(this._refresh$), takeUntilDestroyed(this._destroyRef))
+            .subscribe((focusedItem) => {
+            this._listItems.forEach((item) => {
+                item._tabIndex$.set(-1);
+            });
+            focusedItem._tabIndex$.set(0);
+            this._keyboardSupportService.keyManager.setActiveItem(focusedItem);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuSublistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: UserMenuSublistComponent, isStandalone: true, selector: "[fd-user-menu-sublist]", inputs: { hasIcons: { classPropertyName: "hasIcons", publicName: "hasIcons", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "keyDownHandler($event)" }, properties: { "class.fd-menu--icons": "hasIcons()" }, classAttribute: "fd-menu fd-user-menu__menu" }, queries: [{ propertyName: "_listItems", predicate: UserMenuListItemComponent, descendants: true }], ngImport: i0, template: `<ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
+        <ng-content />
+    </ul> `, isInline: true, styles: ["[fd-user-menu-sublist]{margin-block-start:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuSublistComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[fd-user-menu-sublist]', template: `<ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
+        <ng-content />
+    </ul> `, host: {
+                        class: 'fd-menu fd-user-menu__menu',
+                        '[class.fd-menu--icons]': 'hasIcons()'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["[fd-user-menu-sublist]{margin-block-start:0!important}\n"] }]
+        }], propDecorators: { _listItems: [{
+                type: ContentChildren,
+                args: [UserMenuListItemComponent, { descendants: true }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], keyDownHandler: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class UserMenuComponent {
+    /** @hidden */
+    constructor() {
+        /** Event thrown, when the user menu is opened or closed */
+        this.isOpenChange = new EventEmitter();
+        /** @hidden */
+        this.listItems = contentChildren(UserMenuListItemComponent, { descendants: true });
+        /** @hidden */
+        this.userMenuBody = contentChild(UserMenuBodyComponent, { descendants: true });
+        /** Whether the user menu is in mobile mode */
+        this.mobile = input(false, { transform: booleanAttribute });
+        /** Whether the user menu is open */
+        this.isOpen = signal(false);
+        /** @hidden */
+        this._rtlService = inject(RtlService);
+        /** @hidden */
+        this._dialogService = inject(DialogService);
+        /** @hidden */
+        this._changeDetectionRef = inject(ChangeDetectorRef);
+        effect(() => {
+            const isMobile = this.mobile();
+            this.listItems()?.forEach((item) => item.mobile.set(isMobile));
+        });
+    }
+    /** @hidden */
+    ngOnInit() {
+        this.navigationArrow$ = this._rtlService.rtl.pipe(map$1((isRtl) => (isRtl ? 'navigation-right-arrow' : 'navigation-left-arrow')));
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        const isMobile = this.mobile();
+        this.listItems()?.forEach((item) => item.mobile.set(isMobile));
+    }
+    /** Method that opens the user menu */
+    open() {
+        this.isOpenChangeHandle(true);
+    }
+    /** Method that closes the user menu */
+    close() {
+        this.isOpenChangeHandle(false);
+        if (this.listItems().length > 0) {
+            this.listItems().forEach((item) => {
+                item.isOpen.set(false);
+                item._elementRef?.nativeElement.querySelector('.fd-menu__link')?.classList.remove('is-active');
+            });
+            this.listItems()[0]?._tabIndex$.set(0);
+        }
+        this._clearSubmenu();
+        this._dialogRef?.close();
+    }
+    /** Method that opens the user menu in dialog (for mobile mode) */
+    openDialog(dialogTemplate) {
+        this._dialogRef = this._dialogService.open(dialogTemplate, {
+            mobile: true,
+            verticalPadding: false,
+            horizontalPadding: false,
+            ariaLabelledBy: 'fd-user-menu-header',
+            ariaDescribedBy: 'fd-user-menu-body',
+            contentDensity: ContentDensityMode.COZY
+        });
+        const refSub = this._dialogRef.afterClosed.subscribe({
+            error: (type) => {
+                if (type === 'escape') {
+                    this._clearSubmenu();
+                    refSub.unsubscribe();
+                }
+            }
+        });
+    }
+    /** @hidden */
+    isOpenChangeHandle(isOpen) {
+        if (this.isOpen() === isOpen) {
+            return;
+        }
+        this.isOpen.set(isOpen);
+        this.isOpenChange.emit(isOpen);
+        if (!this.isOpen()) {
+            this.userMenuControl._focus();
+        }
+        this._changeDetectionRef.detectChanges();
+    }
+    /** @hidden */
+    _clearSubmenu() {
+        const userMenuBody = this.userMenuBody();
+        if (userMenuBody) {
+            userMenuBody.clearSubmenu();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: UserMenuComponent, isStandalone: true, selector: "fd-user-menu", inputs: { mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange" }, host: { classAttribute: "fd-user-menu" }, providers: [KeyboardSupportService, contentDensityObserverProviders()], queries: [{ propertyName: "listItems", predicate: UserMenuListItemComponent, descendants: true, isSignal: true }, { propertyName: "userMenuBody", first: true, predicate: UserMenuBodyComponent, descendants: true, isSignal: true }, { propertyName: "userMenuControl", first: true, predicate: UserMenuControlComponent, descendants: true }], ngImport: i0, template: "@if (!mobile()) {\n    <fd-popover\n        [isOpen]=\"isOpen()\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [focusAutoCapture]=\"true\"\n        [restoreFocusOnClose]=\"true\"\n        [focusTrapped]=\"true\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n\n            <div fd-popover-body-footer>\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n} @else {\n    <span (click)=\"openDialog(dialogTemplate)\">\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    </span>\n\n    <ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n            <fd-dialog-body style=\"padding: 0\">\n                @if (userMenuBody()?.bodyHeader()) {\n                    <ng-container\n                        *ngTemplateOutlet=\"userMenuBody()?.bodyHeader() ?? null; context: { dialogRef: dialog }\"\n                    >\n                    </ng-container>\n                }\n                <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n            </fd-dialog-body>\n            <fd-dialog-footer>\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n            </fd-dialog-footer>\n        </fd-dialog>\n    </ng-template>\n}\n\n<ng-template #control>\n    <ng-content select=\"fd-user-menu-control\" />\n</ng-template>\n\n<ng-template #body>\n    <ng-content select=\"fd-user-menu-body\" />\n</ng-template>\n\n<ng-template #footer>\n    <ng-content select=\"fd-user-menu-footer\" />\n</ng-template>\n", styles: ["@charset \"UTF-8\";.fd-user-menu{background:var(--sapGroup_ContentBackground)}.fd-user-menu .fd-user-menu__title-bar{--fdBar_Shadow:none}.fd-user-menu .fd-panel__header:has(.fd-panel__button[aria-expanded=false]){--fdPanel_Header_Border_Bottom_Left_Radius:0;--fdPanel_Header_Border_Bottom_Right_Radius:0}.fd-user-menu .fd-user-menu__popover-wrapper{overflow:visible}.fd-user-menu__body{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.5rem;max-width:20rem;min-width:18rem;overflow:visible;padding-block:2.5rem .5rem;padding-inline:.5rem;position:relative}.fd-user-menu__body:after,.fd-user-menu__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu__header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-user-menu__header:after,.fd-user-menu__header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu__header-container,.fd-user-menu__subheader{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;text-align:center;-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-user-menu__header-container:after,.fd-user-menu__header-container:before,.fd-user-menu__subheader:after,.fd-user-menu__subheader:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu__user-name{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--sapTextColor);font-family:var(--fdUserMenu_User_Name_Font_Family);font-size:var(--sapFontLargeSize);line-height:1.4rem;max-height:2.8rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:normal}.fd-user-menu__user-name:after,.fd-user-menu__user-name:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu__subline,.fd-user-menu__user-info,.fd-user-menu__user-role{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-width:100%;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-user-menu__subline:after,.fd-user-menu__subline:before,.fd-user-menu__user-info:after,.fd-user-menu__user-info:before,.fd-user-menu__user-role:after,.fd-user-menu__user-role:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu .fd-user-menu__menu{width:100%}.fd-user-menu .fd-user-menu__menu-list{border-radius:0;-webkit-box-shadow:none;box-shadow:none}.fd-user-menu .fd-user-menu__menu-list>:first-child,.fd-user-menu .fd-user-menu__menu-list>:last-child{border-radius:0}.fd-user-menu .fd-user-menu__menu-list.fd-user-menu__menu-list{border-radius:0;-webkit-box-shadow:none;box-shadow:none}.fd-user-menu .fd-user-menu__menu-list.fd-user-menu__menu-list>:first-child,.fd-user-menu .fd-user-menu__menu-list.fd-user-menu__menu-list>:last-child,.fd-user-menu .fd-user-menu__panel>div{border-radius:0}.fd-user-menu__content-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;--fdPanel_Margin_Bottom:.25rem}.fd-user-menu__content-container:after,.fd-user-menu__content-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu--mobile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;-webkit-padding-before:0;padding-block-start:0}.fd-user-menu--mobile .fd-user-menu__body{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-padding-before:1rem;padding-block-start:1rem}.fd-user-menu--tool-header .fd-user-menu__user-name{color:var(-\\2013sapTitleColor);font-family:var(--sapFontBlackFamily);font-size:1.25rem;line-height:1.3}.fd-user-menu--tool-header .fd-user-menu__navigation-submenu{border:none;border-radius:.5rem;padding-block:.5rem;padding-inline:.5rem;top:-.5rem;-webkit-margin-end:.3875rem;background:var(--sapGroup_ContentBackground);-webkit-box-shadow:var(--sapMenu_Shadow1);box-shadow:var(--sapMenu_Shadow1);margin-inline-end:.3875rem}.fd-user-menu--tool-header .fd-user-menu__navigation-submenu-wrapper{overflow:visible}.fd-user-menu--tool-header .fd-user-menu__user-role{color:var(\\2013sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight)}.fd-user-menu--tool-header .fd-user-menu__body{overflow:visible}.fd-user-menu--tool-header .fd-user-menu__body:has(.fd-user-menu__navigation-menu:first-child){padding-block:0}.fd-user-menu--tool-header .fd-user-menu__popover-body{background:var(--sapGroup_ContentBackground);border:none;border-radius:.75rem;-webkit-box-shadow:var(--sapMenu_Shadow2);box-shadow:var(--sapMenu_Shadow2);padding-block:.75rem;padding-inline:0}.fd-user-menu--tool-header .fd-user-menu__footer{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding-block:.75rem;padding-inline:1.125rem}.fd-user-menu--tool-header .fd-user-menu__footer:after,.fd-user-menu--tool-header .fd-user-menu__footer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu--tool-header .fd-navigation__item.fd-navigation__item--title{--fdNavigation_Item_Title_Display:flex;-webkit-margin-after:1rem;margin-block-end:1rem}.fd-user-menu__menu.fd-menu{width:100%;margin-block-start:.25rem}.fd-menu__list.fd-user-menu__menu-list>.fd-menu__item{position:unset;width:100%}.fd-dialog__body .fd-user-menu__body{min-width:100%;max-width:100%;min-height:100%;max-height:100%}.fd-dialog__body .fd-user-menu__body .fd-menu__list.fd-user-menu__menu-list{min-width:100%}.fd-user-menu__details-view .fd-menu.fd-user-menu__menu{padding:1rem}.fd-user-menu__main-view-bar.fd-bar{box-shadow:none}.fd-menu__link{position:relative}.fd-menu__item:is(:focus,:focus-within,:focus-visible){outline:none}.fd-user-menu__menu-list.fd-user-menu__menu-list{box-shadow:none;border-radius:0}.fd-user-menu__menu-list.fd-user-menu__menu-list>*:first-child,.fd-user-menu__menu-list.fd-user-menu__menu-list>*:last-child{border-radius:0}.fd-user-menu__body{position:relative}.fd-user-menu__body:has(.fd-user-menu__details-view){padding:0}.fd-user-menu__user-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;white-space:normal;line-height:1.4rem;max-height:2.8rem}.fd-panel__title,.fd-user-menu__subline{width:100%;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fd-user-menu__header-container{max-width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/user-menu.css:\n  (*!\n   * Fundamental Library Styles v0.39.2\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fd-user-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'fd-user-menu'
+                    }, imports: [
+                        CommonModule,
+                        PopoverComponent,
+                        PopoverBodyComponent,
+                        PopoverControlComponent,
+                        DialogComponent,
+                        DialogBodyComponent,
+                        DialogFooterComponent
+                    ], providers: [KeyboardSupportService, contentDensityObserverProviders()], template: "@if (!mobile()) {\n    <fd-popover\n        [isOpen]=\"isOpen()\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [focusAutoCapture]=\"true\"\n        [restoreFocusOnClose]=\"true\"\n        [focusTrapped]=\"true\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n\n            <div fd-popover-body-footer>\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n} @else {\n    <span (click)=\"openDialog(dialogTemplate)\">\n        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n    </span>\n\n    <ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n        <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n            <fd-dialog-body style=\"padding: 0\">\n                @if (userMenuBody()?.bodyHeader()) {\n                    <ng-container\n                        *ngTemplateOutlet=\"userMenuBody()?.bodyHeader() ?? null; context: { dialogRef: dialog }\"\n                    >\n                    </ng-container>\n                }\n                <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n            </fd-dialog-body>\n            <fd-dialog-footer>\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n            </fd-dialog-footer>\n        </fd-dialog>\n    </ng-template>\n}\n\n<ng-template #control>\n    <ng-content select=\"fd-user-menu-control\" />\n</ng-template>\n\n<ng-template #body>\n    <ng-content select=\"fd-user-menu-body\" />\n</ng-template>\n\n<ng-template #footer>\n    <ng-content select=\"fd-user-menu-footer\" />\n</ng-template>\n", styles: ["@charset \"UTF-8\";.fd-user-menu{background:var(--sapGroup_ContentBackground)}.fd-user-menu .fd-user-menu__title-bar{--fdBar_Shadow:none}.fd-user-menu .fd-panel__header:has(.fd-panel__button[aria-expanded=false]){--fdPanel_Header_Border_Bottom_Left_Radius:0;--fdPanel_Header_Border_Bottom_Right_Radius:0}.fd-user-menu .fd-user-menu__popover-wrapper{overflow:visible}.fd-user-menu__body{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.5rem;max-width:20rem;min-width:18rem;overflow:visible;padding-block:2.5rem .5rem;padding-inline:.5rem;position:relative}.fd-user-menu__body:after,.fd-user-menu__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu__header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-user-menu__header:after,.fd-user-menu__header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu__header-container,.fd-user-menu__subheader{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;text-align:center;-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-user-menu__header-container:after,.fd-user-menu__header-container:before,.fd-user-menu__subheader:after,.fd-user-menu__subheader:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu__user-name{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--sapTextColor);font-family:var(--fdUserMenu_User_Name_Font_Family);font-size:var(--sapFontLargeSize);line-height:1.4rem;max-height:2.8rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:normal}.fd-user-menu__user-name:after,.fd-user-menu__user-name:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu__subline,.fd-user-menu__user-info,.fd-user-menu__user-role{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;max-width:100%;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-user-menu__subline:after,.fd-user-menu__subline:before,.fd-user-menu__user-info:after,.fd-user-menu__user-info:before,.fd-user-menu__user-role:after,.fd-user-menu__user-role:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu .fd-user-menu__menu{width:100%}.fd-user-menu .fd-user-menu__menu-list{border-radius:0;-webkit-box-shadow:none;box-shadow:none}.fd-user-menu .fd-user-menu__menu-list>:first-child,.fd-user-menu .fd-user-menu__menu-list>:last-child{border-radius:0}.fd-user-menu .fd-user-menu__menu-list.fd-user-menu__menu-list{border-radius:0;-webkit-box-shadow:none;box-shadow:none}.fd-user-menu .fd-user-menu__menu-list.fd-user-menu__menu-list>:first-child,.fd-user-menu .fd-user-menu__menu-list.fd-user-menu__menu-list>:last-child,.fd-user-menu .fd-user-menu__panel>div{border-radius:0}.fd-user-menu__content-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;--fdPanel_Margin_Bottom:.25rem}.fd-user-menu__content-container:after,.fd-user-menu__content-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu--mobile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;-webkit-padding-before:0;padding-block-start:0}.fd-user-menu--mobile .fd-user-menu__body{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-padding-before:1rem;padding-block-start:1rem}.fd-user-menu--tool-header .fd-user-menu__user-name{color:var(-\\2013sapTitleColor);font-family:var(--sapFontBlackFamily);font-size:1.25rem;line-height:1.3}.fd-user-menu--tool-header .fd-user-menu__navigation-submenu{border:none;border-radius:.5rem;padding-block:.5rem;padding-inline:.5rem;top:-.5rem;-webkit-margin-end:.3875rem;background:var(--sapGroup_ContentBackground);-webkit-box-shadow:var(--sapMenu_Shadow1);box-shadow:var(--sapMenu_Shadow1);margin-inline-end:.3875rem}.fd-user-menu--tool-header .fd-user-menu__navigation-submenu-wrapper{overflow:visible}.fd-user-menu--tool-header .fd-user-menu__user-role{color:var(\\2013sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight)}.fd-user-menu--tool-header .fd-user-menu__body{overflow:visible}.fd-user-menu--tool-header .fd-user-menu__body:has(.fd-user-menu__navigation-menu:first-child){padding-block:0}.fd-user-menu--tool-header .fd-user-menu__popover-body{background:var(--sapGroup_ContentBackground);border:none;border-radius:.75rem;-webkit-box-shadow:var(--sapMenu_Shadow2);box-shadow:var(--sapMenu_Shadow2);padding-block:.75rem;padding-inline:0}.fd-user-menu--tool-header .fd-user-menu__footer{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding-block:.75rem;padding-inline:1.125rem}.fd-user-menu--tool-header .fd-user-menu__footer:after,.fd-user-menu--tool-header .fd-user-menu__footer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-user-menu--tool-header .fd-navigation__item.fd-navigation__item--title{--fdNavigation_Item_Title_Display:flex;-webkit-margin-after:1rem;margin-block-end:1rem}.fd-user-menu__menu.fd-menu{width:100%;margin-block-start:.25rem}.fd-menu__list.fd-user-menu__menu-list>.fd-menu__item{position:unset;width:100%}.fd-dialog__body .fd-user-menu__body{min-width:100%;max-width:100%;min-height:100%;max-height:100%}.fd-dialog__body .fd-user-menu__body .fd-menu__list.fd-user-menu__menu-list{min-width:100%}.fd-user-menu__details-view .fd-menu.fd-user-menu__menu{padding:1rem}.fd-user-menu__main-view-bar.fd-bar{box-shadow:none}.fd-menu__link{position:relative}.fd-menu__item:is(:focus,:focus-within,:focus-visible){outline:none}.fd-user-menu__menu-list.fd-user-menu__menu-list{box-shadow:none;border-radius:0}.fd-user-menu__menu-list.fd-user-menu__menu-list>*:first-child,.fd-user-menu__menu-list.fd-user-menu__menu-list>*:last-child{border-radius:0}.fd-user-menu__body{position:relative}.fd-user-menu__body:has(.fd-user-menu__details-view){padding:0}.fd-user-menu__user-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;white-space:normal;line-height:1.4rem;max-height:2.8rem}.fd-panel__title,.fd-user-menu__subline{width:100%;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fd-user-menu__header-container{max-width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/user-menu.css:\n  (*!\n   * Fundamental Library Styles v0.39.2\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isOpenChange: [{
+                type: Output
+            }], userMenuControl: [{
+                type: ContentChild,
+                args: [UserMenuControlComponent]
+            }] } });
+
+class UserMenuHeaderContainerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuHeaderContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: UserMenuHeaderContainerDirective, isStandalone: true, selector: "[fd-user-menu-header-container]", host: { classAttribute: "fd-user-menu__header-container" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuHeaderContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fd-user-menu-header-container]',
+                    host: {
+                        class: 'fd-user-menu__header-container'
+                    }
+                }]
+        }] });
+
+class UserMenuHeaderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: UserMenuHeaderDirective, isStandalone: true, selector: "[fd-user-menu-header]", host: { classAttribute: "fd-user-menu__header" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fd-user-menu-header]',
+                    host: {
+                        class: 'fd-user-menu__header'
+                    }
+                }]
+        }] });
+
+class UserMenuSublineDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuSublineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: UserMenuSublineDirective, isStandalone: true, selector: "[fd-user-menu-subline]", host: { classAttribute: "fd-user-menu__subline" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuSublineDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fd-user-menu-subline]',
+                    host: {
+                        class: 'fd-user-menu__subline'
+                    }
+                }]
+        }] });
+
+class UserMenuUserNameDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuUserNameDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: UserMenuUserNameDirective, isStandalone: true, selector: "[fd-user-menu-user-name]", host: { classAttribute: "fd-user-menu__user-name" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuUserNameDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fd-user-menu-user-name]',
+                    host: {
+                        class: 'fd-user-menu__user-name'
+                    }
+                }]
+        }] });
+
+const components = [
+    UserMenuComponent,
+    UserMenuControlComponent,
+    UserMenuBodyComponent,
+    UserMenuFooterComponent,
+    UserMenuListComponent,
+    UserMenuSublistComponent,
+    UserMenuListItemComponent,
+    UserMenuContentContainerComponent,
+    UserMenuHeaderDirective,
+    UserMenuHeaderContainerDirective,
+    UserMenuUserNameDirective,
+    UserMenuSublineDirective
+];
+/**
+ * @deprecated
+ * Use direct imports of components and directives.
+ */
+class UserMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: UserMenuModule, imports: [UserMenuComponent,
+            UserMenuControlComponent,
+            UserMenuBodyComponent,
+            UserMenuFooterComponent,
+            UserMenuListComponent,
+            UserMenuSublistComponent,
+            UserMenuListItemComponent,
+            UserMenuContentContainerComponent,
+            UserMenuHeaderDirective,
+            UserMenuHeaderContainerDirective,
+            UserMenuUserNameDirective,
+            UserMenuSublineDirective], exports: [UserMenuComponent,
+            UserMenuControlComponent,
+            UserMenuBodyComponent,
+            UserMenuFooterComponent,
+            UserMenuListComponent,
+            UserMenuSublistComponent,
+            UserMenuListItemComponent,
+            UserMenuContentContainerComponent,
+            UserMenuHeaderDirective,
+            UserMenuHeaderContainerDirective,
+            UserMenuUserNameDirective,
+            UserMenuSublineDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuModule, imports: [UserMenuComponent,
+            UserMenuControlComponent,
+            UserMenuBodyComponent,
+            UserMenuFooterComponent,
+            UserMenuListItemComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: UserMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components],
+                    exports: [...components]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UserMenuBodyComponent, UserMenuComponent, UserMenuContentContainerComponent, UserMenuControlComponent, UserMenuFooterComponent, UserMenuHeaderContainerDirective, UserMenuHeaderDirective, UserMenuListComponent, UserMenuListItemComponent, UserMenuModule, UserMenuSublineDirective, UserMenuSublistComponent, UserMenuUserNameDirective };
+//# sourceMappingURL=fundamental-ngx-core-user-menu.mjs.map