@fundamental-ngx/core 0.59.1-rc.9 → 0.59.1

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, Directive, EventEmitter, signal, viewChild, inject, ElementRef, DestroyRef, NgZone, ChangeDetectorRef, HostListener, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild, ContentChildren, output, contentChildren, Renderer2, effect, NgModule } from '@angular/core';
+import { input, booleanAttribute, Directive, EventEmitter, signal, viewChild, inject, ElementRef, DestroyRef, NgZone, ChangeDetectorRef, computed, HostListener, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild, ContentChildren, output, contentChildren, Renderer2, effect, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { RtlService, InitialFocusDirective, KeyboardSupportService, TemplateDirective } from '@fundamental-ngx/cdk/utils';
+import { RtlService, KeyUtil, InitialFocusDirective, KeyboardSupportService, TemplateDirective } from '@fundamental-ngx/cdk/utils';
 import { BarComponent, BarLeftDirective, BarRightDirective, ButtonBarComponent, BarElementDirective, BarMiddleDirective } from '@fundamental-ngx/core/bar';
 import { contentDensityObserverProviders, ContentDensityMode } 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 { Subject, startWith, observeOn, asyncScheduler, take, merge, takeUntil } from 'rxjs';
+import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { PopoverComponent, PopoverBodyComponent, PopoverControlComponent } from '@fundamental-ngx/core/popover';
-import { map as map$1 } from 'rxjs/operators';
 import { DialogService, DialogComponent, DialogBodyComponent, DialogFooterComponent, DialogHeaderComponent } from '@fundamental-ngx/core/dialog';
 
 class UserMenuUserNameDirective {
@@ -76,11 +76,52 @@ class UserMenuListItemComponent {
         this._zone = inject(NgZone);
         /** @hidden */
         this._changeDetectionRef = inject(ChangeDetectorRef);
+        /** @hidden RTL service for direction detection */
+        this._rtlService = inject(RtlService, {
+            optional: true
+        });
+        /** @hidden Computed signal to track RTL state */
+        this._isRtl = computed(() => this._rtlService?.rtl() ?? false, ...(ngDevMode ? [{ debugName: "_isRtl" }] : []));
     }
     /** @hidden */
     focusHandler() {
         this.focused.next(this);
     }
+    /** @hidden */
+    onKeyDown(event) {
+        if (!this.hasSubmenu() || this.mobile()) {
+            return;
+        }
+        const popoverInstance = this.popover();
+        if (!popoverInstance) {
+            return;
+        }
+        const isRtl = this._isRtl();
+        // In RTL mode, LEFT arrow opens submenu and RIGHT arrow closes it
+        // In LTR mode, RIGHT arrow opens submenu and LEFT arrow closes it
+        const openKey = isRtl ? LEFT_ARROW : RIGHT_ARROW;
+        const closeKey = isRtl ? RIGHT_ARROW : LEFT_ARROW;
+        if (KeyUtil.isKeyCode(event, openKey) && !this.isOpen()) {
+            event.preventDefault();
+            popoverInstance.open();
+        }
+        else if (KeyUtil.isKeyCode(event, closeKey) && this.isOpen()) {
+            event.preventDefault();
+            popoverInstance.close();
+        }
+    }
+    /** @hidden Handle keyboard in popover body */
+    onPopoverBodyKeyDown(event) {
+        const isRtl = this._isRtl();
+        const closeKey = isRtl ? RIGHT_ARROW : LEFT_ARROW;
+        if (KeyUtil.isKeyCode(event, closeKey) && this.isOpen()) {
+            event.preventDefault();
+            const popoverInstance = this.popover();
+            if (popoverInstance) {
+                popoverInstance.close();
+            }
+        }
+    }
     /** Handles submenu selection in mobile mode */
     onShowDetailsView() {
         if (this.submenu() && this.mobile()) {
@@ -121,7 +162,7 @@ class UserMenuListItemComponent {
         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: "21.1.0", ngImport: i0, type: UserMenuListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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()", "keydown": "onKeyDown($event)" }, 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 (keydown)=\"onPopoverBodyKeyDown($event)\">\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: "21.1.0", ngImport: i0, type: UserMenuListItemComponent, decorators: [{
             type: Component,
@@ -130,7 +171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         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" }]
+                    }, 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 (keydown)=\"onPopoverBodyKeyDown($event)\">\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: [{
@@ -142,6 +183,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }], uniqueId: [{ type: i0.Input, args: [{ isSignal: true, alias: "uniqueId", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], textId: [{ type: i0.Input, args: [{ isSignal: true, alias: "textId", required: false }] }], hasSubmenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSubmenu", required: false }] }], submenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenu", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }], focusHandler: [{
                 type: HostListener,
                 args: ['focusin']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
 class UserMenuBodyComponent {
@@ -174,10 +218,14 @@ class UserMenuBodyComponent {
          * Needed in mobile mode
          */
         this.bodyHeader = viewChild('bodyHeader', ...(ngDevMode ? [{ debugName: "bodyHeader" }] : []));
+        /**
+         * Handle the navigation icon (arrow) of the Back button in RTL mode
+         */
+        this.navigationArrow = computed(() => this._rtlService?.rtl() ? 'navigation-right-arrow' : 'navigation-left-arrow', ...(ngDevMode ? [{ debugName: "navigationArrow" }] : []));
         /** @hidden */
         this.userNameEl = contentChild(UserMenuUserNameDirective, { ...(ngDevMode ? { debugName: "userNameEl" } : {}), read: ElementRef });
         /** @hidden */
-        this._rtlService = inject(RtlService);
+        this._rtlService = inject(RtlService, { optional: true });
         /** @hidden */
         this._refresh$ = new Subject();
         /** @hidden */
@@ -188,10 +236,6 @@ class UserMenuBodyComponent {
         event.stopPropagation();
     }
     /** @hidden */
-    ngOnInit() {
-        this.navigationArrow$ = this._rtlService.rtl.pipe(map((isRtl) => (isRtl ? 'navigation-right-arrow' : 'navigation-left-arrow')));
-    }
-    /** @hidden */
     ngAfterViewInit() {
         this._listItems.changes
             .pipe(startWith(this._listItems), takeUntilDestroyed(this._destroyRef))
@@ -260,7 +304,7 @@ class UserMenuBodyComponent {
         this.clearSubmenu();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UserMenuBodyComponent, isStandalone: true, selector: "fd-user-menu-body", host: { listeners: { "click": "onClick($event)" }, classAttribute: "fd-user-menu__body" }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "userNameEl", first: true, predicate: UserMenuUserNameDirective, descendants: true, read: ElementRef, isSignal: true }, { 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 style=\"position: fixed; top: 0; left: 0; right: 0; z-index: 10\">\n        @if (submenu()) {\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <fd-button-bar\n                        fdkInitialFocus\n                        ariaLabel=\"previous\"\n                        [glyph]=\"navigationArrow$ | async\"\n                        (click)=\"clearSubmenu()\"\n                    >\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            @if (!submenu()) {\n                <fd-bar-element\n                    [fullWidth]=\"true\"\n                    class=\"fd-user-menu__scroll-header-element\"\n                    [class.hidden]=\"isUserNameVisible()\"\n                    role=\"presentation\"\n                    aria-hidden=\"true\"\n                >\n                    <div\n                        [innerHTML]=\"userNameContent()\"\n                        class=\"fd-user-menu__user-name fd-user-menu__user-name--truncate\"\n                        style=\"text-align: center; margin-inline-start: 2.75rem\"\n                    ></div>\n                </fd-bar-element>\n            }\n\n            <fd-bar-element>\n                <fd-button-bar ariaLabel=\"close\" 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", "clear", "size", "role"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UserMenuBodyComponent, isStandalone: true, selector: "fd-user-menu-body", host: { listeners: { "click": "onClick($event)" }, classAttribute: "fd-user-menu__body" }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "userNameEl", first: true, predicate: UserMenuUserNameDirective, descendants: true, read: ElementRef, isSignal: true }, { 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 style=\"position: fixed; top: 0; left: 0; right: 0; z-index: 10\">\n        @if (submenu()) {\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <fd-button-bar\n                        fdkInitialFocus\n                        ariaLabel=\"previous\"\n                        [glyph]=\"navigationArrow()\"\n                        (click)=\"clearSubmenu()\"\n                    >\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            @if (!submenu()) {\n                <fd-bar-element\n                    [fullWidth]=\"true\"\n                    class=\"fd-user-menu__scroll-header-element\"\n                    [class.hidden]=\"isUserNameVisible()\"\n                    role=\"presentation\"\n                    aria-hidden=\"true\"\n                >\n                    <div\n                        [innerHTML]=\"userNameContent()\"\n                        class=\"fd-user-menu__user-name fd-user-menu__user-name--truncate\"\n                        style=\"text-align: center; margin-inline-start: 2.75rem\"\n                    ></div>\n                </fd-bar-element>\n            }\n\n            <fd-bar-element>\n                <fd-button-bar ariaLabel=\"close\" 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", "clear", "size", "role"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuBodyComponent, decorators: [{
             type: Component,
@@ -275,7 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         ButtonBarComponent,
                         BarElementDirective,
                         InitialFocusDirective
-                    ], providers: [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 style=\"position: fixed; top: 0; left: 0; right: 0; z-index: 10\">\n        @if (submenu()) {\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <fd-button-bar\n                        fdkInitialFocus\n                        ariaLabel=\"previous\"\n                        [glyph]=\"navigationArrow$ | async\"\n                        (click)=\"clearSubmenu()\"\n                    >\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            @if (!submenu()) {\n                <fd-bar-element\n                    [fullWidth]=\"true\"\n                    class=\"fd-user-menu__scroll-header-element\"\n                    [class.hidden]=\"isUserNameVisible()\"\n                    role=\"presentation\"\n                    aria-hidden=\"true\"\n                >\n                    <div\n                        [innerHTML]=\"userNameContent()\"\n                        class=\"fd-user-menu__user-name fd-user-menu__user-name--truncate\"\n                        style=\"text-align: center; margin-inline-start: 2.75rem\"\n                    ></div>\n                </fd-bar-element>\n            }\n\n            <fd-bar-element>\n                <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"closeDialog(dialogRef)\"> </fd-button-bar>\n            </fd-bar-element>\n        </div>\n    </div>\n</ng-template>\n" }]
+                    ], providers: [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 style=\"position: fixed; top: 0; left: 0; right: 0; z-index: 10\">\n        @if (submenu()) {\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <fd-button-bar\n                        fdkInitialFocus\n                        ariaLabel=\"previous\"\n                        [glyph]=\"navigationArrow()\"\n                        (click)=\"clearSubmenu()\"\n                    >\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            @if (!submenu()) {\n                <fd-bar-element\n                    [fullWidth]=\"true\"\n                    class=\"fd-user-menu__scroll-header-element\"\n                    [class.hidden]=\"isUserNameVisible()\"\n                    role=\"presentation\"\n                    aria-hidden=\"true\"\n                >\n                    <div\n                        [innerHTML]=\"userNameContent()\"\n                        class=\"fd-user-menu__user-name fd-user-menu__user-name--truncate\"\n                        style=\"text-align: center; margin-inline-start: 2.75rem\"\n                    ></div>\n                </fd-bar-element>\n            }\n\n            <fd-bar-element>\n                <fd-button-bar ariaLabel=\"close\" 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 }]
@@ -395,7 +439,7 @@ class UserMenuListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: UserMenuListComponent, isStandalone: true, selector: "fd-user-menu-list", host: { listeners: { "keydown": "keyDownHandler($event)" } }, queries: [{ propertyName: "_listItems", predicate: UserMenuListItemComponent, descendants: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: UserMenuListComponent, isStandalone: true, selector: "fd-user-menu-list", host: { listeners: { "keydown": "keyDownHandler($event)" } }, queries: [{ propertyName: "_listItems", predicate: UserMenuListItemComponent }], 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 />
@@ -419,7 +463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], propDecorators: { _listItems: [{
                 type: ContentChildren,
-                args: [UserMenuListItemComponent, { descendants: true }]
+                args: [UserMenuListItemComponent, { descendants: false }]
             }], keyDownHandler: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -469,7 +513,7 @@ class UserMenuSublistComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuSublistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", 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">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", 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" }, providers: [KeyboardSupportService], 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 }); }
 }
@@ -480,7 +524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
     </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"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [KeyboardSupportService], styles: ["[fd-user-menu-sublist]{margin-block-start:0!important}\n"] }]
         }], propDecorators: { _listItems: [{
                 type: ContentChildren,
                 args: [UserMenuListItemComponent, { descendants: true }]
@@ -537,6 +581,8 @@ class UserMenuComponent {
         /** @hidden */
         this.userMenuBody = contentChild(UserMenuBodyComponent, { ...(ngDevMode ? { debugName: "userMenuBody" } : {}), descendants: true });
         /** @hidden */
+        this.navigationArrow = computed(() => this._rtlService.rtl() ? 'navigation-right-arrow' : 'navigation-left-arrow', ...(ngDevMode ? [{ debugName: "navigationArrow" }] : []));
+        /** @hidden */
         this._listItems = contentChildren(UserMenuListItemComponent, { ...(ngDevMode ? { debugName: "_listItems" } : {}), descendants: true });
         /** @hidden */
         this._rtlService = inject(RtlService);
@@ -553,10 +599,6 @@ class UserMenuComponent {
         });
     }
     /** @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));