@fundamental-ngx/core 0.64.1-rc.6 → 0.64.1-rc.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,13 +2,13 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, booleanAttribute, Directive, EventEmitter, output, signal, viewChild, inject, ElementRef, Injector, ChangeDetectorRef, DestroyRef, computed, afterNextRender, HostListener, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild, ContentChildren, contentChildren, Renderer2, effect, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
|
+
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
6
6
|
import { RtlService, KeyUtil, InitialFocusDirective, KeyboardSupportService, TemplateDirective } from '@fundamental-ngx/cdk/utils';
|
|
7
7
|
import { BarComponent, BarLeftDirective, BarRightDirective, ButtonBarComponent, BarElementDirective, BarMiddleDirective } from '@fundamental-ngx/core/bar';
|
|
8
8
|
import { contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
|
|
9
9
|
import { TitleComponent } from '@fundamental-ngx/core/title';
|
|
10
10
|
import { FdTranslatePipe } from '@fundamental-ngx/i18n';
|
|
11
|
-
import { Subject, startWith, merge, takeUntil } from 'rxjs';
|
|
11
|
+
import { Subject, startWith, merge, takeUntil, filter, switchMap } from 'rxjs';
|
|
12
12
|
import { LEFT_ARROW, RIGHT_ARROW, ESCAPE } from '@angular/cdk/keycodes';
|
|
13
13
|
import { PopoverComponent, PopoverBodyComponent, PopoverControlComponent } from '@fundamental-ngx/core/popover';
|
|
14
14
|
import { DialogService, DialogComponent, DialogBodyComponent, DialogFooterComponent, DialogHeaderComponent } from '@fundamental-ngx/core/dialog';
|
|
@@ -33,12 +33,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
33
33
|
}]
|
|
34
34
|
}], propDecorators: { truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }] } });
|
|
35
35
|
|
|
36
|
+
/**
|
|
37
|
+
* Resets roving tabindex to the first list item.
|
|
38
|
+
*
|
|
39
|
+
* In a roving tabindex pattern, only one item has tabindex="0" at a time,
|
|
40
|
+
* allowing arrow keys to navigate within the list. This function resets
|
|
41
|
+
* the pattern so the first item becomes tabbable again.
|
|
42
|
+
*
|
|
43
|
+
* Typically called when focus leaves the menu to ensure that when users
|
|
44
|
+
* Tab back in, focus starts at the first item rather than the last-focused item.
|
|
45
|
+
*/
|
|
46
|
+
function resetListFocus(items) {
|
|
47
|
+
if (!items || items.length === 0) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
// Reset tabindex: first item gets 0, rest get -1
|
|
51
|
+
items[0]._tabIndex$.set(0);
|
|
52
|
+
for (let i = 1; i < items.length; i++) {
|
|
53
|
+
items[i]._tabIndex$.set(-1);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
36
57
|
let uniqueId = 0;
|
|
37
58
|
let uniqueTextId = 0;
|
|
38
59
|
let uniqueSubtitleId = 0;
|
|
39
60
|
class UserMenuListItemComponent {
|
|
40
61
|
/** @hidden Event name for child menu item state changes */
|
|
41
62
|
static { this.STATE_CHANGE_EVENT = 'fdMenuItemStateChange'; }
|
|
63
|
+
/** @hidden Event name for sibling close coordination */
|
|
64
|
+
static { this.SIBLING_CLOSE_EVENT = 'fdMenuItemCloseSubmenu'; }
|
|
65
|
+
/** @hidden Event name for force closing nested submenus */
|
|
66
|
+
static { this.FORCE_CLOSE_EVENT = 'fdMenuItemForceClose'; }
|
|
42
67
|
constructor() {
|
|
43
68
|
/** Event emitter for isOpenChange event that controls the submenu popover body */
|
|
44
69
|
this.isOpenChange = new EventEmitter();
|
|
@@ -121,11 +146,16 @@ class UserMenuListItemComponent {
|
|
|
121
146
|
this._pendingClose = false;
|
|
122
147
|
/** @hidden Cleanup function for child state listener */
|
|
123
148
|
this._childStateListenerCleanup = null;
|
|
149
|
+
/** @hidden Cleanup function for sibling close listener */
|
|
150
|
+
this._siblingCloseListenerCleanup = null;
|
|
124
151
|
/** @hidden Grace period in ms before closing submenu on mouseleave */
|
|
125
152
|
this._hoverCloseDelay = 150;
|
|
153
|
+
afterNextRender(() => this._setupEventListeners(), { injector: this._injector });
|
|
126
154
|
this._destroyRef.onDestroy(() => {
|
|
127
155
|
this._childStateListenerCleanup?.();
|
|
128
156
|
this._childStateListenerCleanup = null;
|
|
157
|
+
this._siblingCloseListenerCleanup?.();
|
|
158
|
+
this._siblingCloseListenerCleanup = null;
|
|
129
159
|
this._cancelHoverCloseTimer();
|
|
130
160
|
});
|
|
131
161
|
}
|
|
@@ -178,13 +208,20 @@ class UserMenuListItemComponent {
|
|
|
178
208
|
}
|
|
179
209
|
/** @hidden Open submenu on host mouseenter (non-mobile only) */
|
|
180
210
|
onHostMouseEnter() {
|
|
181
|
-
if (
|
|
211
|
+
if (this.mobile()) {
|
|
182
212
|
return;
|
|
183
213
|
}
|
|
184
214
|
this._cancelHoverCloseTimer();
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
215
|
+
// Focus this item to maintain keyboard navigation state
|
|
216
|
+
this.focus();
|
|
217
|
+
// Close sibling submenus at the same nesting level
|
|
218
|
+
this._closeSiblingSubmenus();
|
|
219
|
+
// Open this item's submenu if it has one
|
|
220
|
+
if (this.hasSubmenu()) {
|
|
221
|
+
const popoverInstance = this.popover();
|
|
222
|
+
if (popoverInstance && !this.isOpen()) {
|
|
223
|
+
popoverInstance.open();
|
|
224
|
+
}
|
|
188
225
|
}
|
|
189
226
|
}
|
|
190
227
|
/** @hidden Schedule submenu close on host mouseleave */
|
|
@@ -255,6 +292,8 @@ class UserMenuListItemComponent {
|
|
|
255
292
|
this._setupChildStateListener(popoverBodyEl?._elementRef.nativeElement);
|
|
256
293
|
}
|
|
257
294
|
else {
|
|
295
|
+
// When closing, also close all nested child submenus
|
|
296
|
+
this._closeAllNestedSubmenus(popoverBodyEl?._elementRef.nativeElement);
|
|
258
297
|
// Reset state when closing
|
|
259
298
|
this._openChildCount = 0;
|
|
260
299
|
this._pendingClose = false;
|
|
@@ -329,6 +368,116 @@ class UserMenuListItemComponent {
|
|
|
329
368
|
this._hoverCloseTimer = null;
|
|
330
369
|
}
|
|
331
370
|
}
|
|
371
|
+
/**
|
|
372
|
+
* Closes sibling menu items' submenus at the same nesting level.
|
|
373
|
+
* Uses custom DOM events to coordinate between siblings.
|
|
374
|
+
* Only dispatches if there are siblings that actually have submenus.
|
|
375
|
+
* @hidden
|
|
376
|
+
*/
|
|
377
|
+
_closeSiblingSubmenus() {
|
|
378
|
+
const thisElement = this._elementRef.nativeElement;
|
|
379
|
+
const parentElement = thisElement.parentElement;
|
|
380
|
+
if (!parentElement) {
|
|
381
|
+
return;
|
|
382
|
+
}
|
|
383
|
+
// Check if any siblings have submenus before dispatching the event
|
|
384
|
+
// This prevents unnecessary closes when navigating within a submenu that has no submenu siblings
|
|
385
|
+
const siblings = Array.from(parentElement.children);
|
|
386
|
+
const hasSubmenuSiblings = siblings.some((sibling) => {
|
|
387
|
+
if (sibling === thisElement) {
|
|
388
|
+
return false;
|
|
389
|
+
}
|
|
390
|
+
// Check if this sibling has a popover (indicating a submenu)
|
|
391
|
+
return sibling.querySelector('fd-popover') !== null;
|
|
392
|
+
});
|
|
393
|
+
if (!hasSubmenuSiblings) {
|
|
394
|
+
// No siblings with submenus, no need to dispatch close event
|
|
395
|
+
return;
|
|
396
|
+
}
|
|
397
|
+
// Dispatch an event that siblings will listen for
|
|
398
|
+
const event = new CustomEvent(UserMenuListItemComponent.SIBLING_CLOSE_EVENT, {
|
|
399
|
+
detail: { sourceElement: thisElement },
|
|
400
|
+
bubbles: false // Don't bubble, only direct siblings should hear it
|
|
401
|
+
});
|
|
402
|
+
parentElement.dispatchEvent(event);
|
|
403
|
+
}
|
|
404
|
+
/**
|
|
405
|
+
* Recursively closes all nested child submenus within a popover body.
|
|
406
|
+
* Called when a submenu is closing to ensure all descendants are also closed.
|
|
407
|
+
* @hidden
|
|
408
|
+
*/
|
|
409
|
+
_closeAllNestedSubmenus(popoverBodyEl) {
|
|
410
|
+
if (!popoverBodyEl) {
|
|
411
|
+
return;
|
|
412
|
+
}
|
|
413
|
+
// Find all menu items with popovers inside this popover body
|
|
414
|
+
const childItems = popoverBodyEl.querySelectorAll('[fd-user-menu-list-item]');
|
|
415
|
+
childItems.forEach((itemEl) => {
|
|
416
|
+
const popover = itemEl.querySelector('fd-popover');
|
|
417
|
+
if (popover) {
|
|
418
|
+
// Find the popover body of this child item
|
|
419
|
+
const childPopoverBody = popover.querySelector('fd-popover-body');
|
|
420
|
+
if (childPopoverBody) {
|
|
421
|
+
// Recursively close any nested submenus first
|
|
422
|
+
this._closeAllNestedSubmenus(childPopoverBody);
|
|
423
|
+
}
|
|
424
|
+
// Close this child item's popover by dispatching a close event
|
|
425
|
+
const closeEvent = new CustomEvent(UserMenuListItemComponent.FORCE_CLOSE_EVENT, {
|
|
426
|
+
bubbles: false
|
|
427
|
+
});
|
|
428
|
+
itemEl.dispatchEvent(closeEvent);
|
|
429
|
+
}
|
|
430
|
+
});
|
|
431
|
+
}
|
|
432
|
+
/**
|
|
433
|
+
* Helper method to close the popover if it's open.
|
|
434
|
+
* Reduces code duplication across event handlers.
|
|
435
|
+
* @hidden
|
|
436
|
+
*/
|
|
437
|
+
_closePopover() {
|
|
438
|
+
const popoverInstance = this.popover();
|
|
439
|
+
if (popoverInstance && this.isOpen()) {
|
|
440
|
+
popoverInstance.close();
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
/**
|
|
444
|
+
* Set up event listeners for coordinating submenu behavior.
|
|
445
|
+
* Called after next render when DOM is ready.
|
|
446
|
+
* @hidden
|
|
447
|
+
*/
|
|
448
|
+
_setupEventListeners() {
|
|
449
|
+
const thisElement = this._elementRef.nativeElement;
|
|
450
|
+
const parentElement = thisElement.parentElement;
|
|
451
|
+
if (!parentElement) {
|
|
452
|
+
return;
|
|
453
|
+
}
|
|
454
|
+
// Listen for sibling close events from the parent
|
|
455
|
+
const handleSiblingClose = (event) => {
|
|
456
|
+
const customEvent = event;
|
|
457
|
+
const sourceElement = customEvent.detail.sourceElement;
|
|
458
|
+
// Ignore events from ourselves or non-siblings
|
|
459
|
+
if (sourceElement === thisElement || sourceElement.parentElement !== parentElement) {
|
|
460
|
+
return;
|
|
461
|
+
}
|
|
462
|
+
// Ignore if in different popover contexts
|
|
463
|
+
const thisPopoverBody = thisElement.closest('fd-popover-body');
|
|
464
|
+
const sourcePopoverBody = sourceElement.closest('fd-popover-body');
|
|
465
|
+
if (thisPopoverBody !== sourcePopoverBody) {
|
|
466
|
+
return;
|
|
467
|
+
}
|
|
468
|
+
this._closePopover();
|
|
469
|
+
};
|
|
470
|
+
// Listen for force close events (used when recursively closing nested submenus)
|
|
471
|
+
const handleForceClose = () => {
|
|
472
|
+
this._closePopover();
|
|
473
|
+
};
|
|
474
|
+
parentElement.addEventListener(UserMenuListItemComponent.SIBLING_CLOSE_EVENT, handleSiblingClose);
|
|
475
|
+
thisElement.addEventListener(UserMenuListItemComponent.FORCE_CLOSE_EVENT, handleForceClose);
|
|
476
|
+
this._siblingCloseListenerCleanup = () => {
|
|
477
|
+
parentElement.removeEventListener(UserMenuListItemComponent.SIBLING_CLOSE_EVENT, handleSiblingClose);
|
|
478
|
+
thisElement.removeEventListener(UserMenuListItemComponent.FORCE_CLOSE_EVENT, handleForceClose);
|
|
479
|
+
};
|
|
480
|
+
}
|
|
332
481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
482
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, iconAfterActive: { classPropertyName: "iconAfterActive", publicName: "iconAfterActive", 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 }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, subtitleId: { classPropertyName: "subtitleId", publicName: "subtitleId", isSignal: true, isRequired: false, transformFunction: null }, truncateSubtitle: { classPropertyName: "truncateSubtitle", publicName: "truncateSubtitle", 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: { isOpenChange: "isOpenChange", showSubmenu: "showSubmenu", updateTitle: "updateTitle", keyDown: "keyDown" }, host: { attributes: { "role": "none" }, listeners: { "mouseenter": "onHostMouseEnter()", "mouseleave": "onHostMouseLeave()", "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 <div class=\"fd-menu__content\">\n <span class=\"fd-menu__title\" [class.fd-menu__title--truncate]=\"truncateText()\" [id]=\"textId()\">{{\n text()\n }}</span>\n @if (subtitle()) {\n <span\n class=\"fd-menu__subtitle\"\n [class.fd-menu__subtitle--truncate]=\"truncateSubtitle()\"\n [id]=\"subtitleId()\"\n >{{ subtitle() }}</span\n >\n }\n </div>\n\n @if (iconAfter()) {\n <span class=\"fd-menu__addon-after\" [class.fd-menu__addon-after--active]=\"iconAfterActive()\">\n <i [class]=\"'sap-icon--' + iconAfter()\" role=\"presentation\"></i>\n </span>\n }\n\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]=\"false\"\n [restoreFocusOnClose]=\"true\"\n [closeOnOutsideClick]=\"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 <div class=\"fd-menu__content\">\n <span\n class=\"fd-menu__title\"\n [class.fd-menu__title--truncate]=\"truncateText()\"\n [id]=\"textId()\"\n >{{ text() }}</span\n >\n @if (subtitle()) {\n <span\n class=\"fd-menu__subtitle\"\n [class.fd-menu__subtitle--truncate]=\"truncateSubtitle()\"\n [id]=\"subtitleId()\"\n >{{ subtitle() }}</span\n >\n }\n </div>\n @if (iconAfter()) {\n <span class=\"fd-menu__addon-after\" [class.fd-menu__addon-after--active]=\"iconAfterActive()\">\n <i [class]=\"'sap-icon--' + iconAfter()\" role=\"presentation\"></i>\n </span>\n }\n <span class=\"fd-menu__addon-after fd-menu__addon-after--submenu\"></span>\n </button>\n </fd-popover-control>\n <fd-popover-body\n (keydown)=\"onPopoverBodyKeyDown($event)\"\n (mouseenter)=\"onSubmenuMouseEnter()\"\n (mouseleave)=\"onSubmenuMouseLeave($event)\"\n >\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 <div class=\"fd-menu__content\">\n <span class=\"fd-menu__title\" [class.fd-menu__title--truncate]=\"truncateText()\" [id]=\"textId()\">{{\n text()\n }}</span>\n @if (subtitle()) {\n <span\n class=\"fd-menu__subtitle\"\n [class.fd-menu__subtitle--truncate]=\"truncateSubtitle()\"\n [id]=\"subtitleId()\"\n >{{ subtitle() }}</span\n >\n }\n </div>\n\n @if (iconAfter()) {\n <span class=\"fd-menu__addon-after\" [class.fd-menu__addon-after--active]=\"iconAfterActive()\">\n <i [class]=\"'sap-icon--' + iconAfter()\" role=\"presentation\"></i>\n </span>\n }\n </button>\n}\n", dependencies: [{ kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { 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 }); }
|
|
334
483
|
}
|
|
@@ -411,6 +560,33 @@ class UserMenuBodyComponent {
|
|
|
411
560
|
onClick(event) {
|
|
412
561
|
event.stopPropagation();
|
|
413
562
|
}
|
|
563
|
+
/**
|
|
564
|
+
* Reset roving tabindex when focus leaves the menu entirely,
|
|
565
|
+
* so Tab re-entry starts at the first item instead of the last-focused item.
|
|
566
|
+
*
|
|
567
|
+
* First checks relatedTarget synchronously for quick exits, then uses
|
|
568
|
+
* setTimeout(0) to defer the check until after the current event loop tick,
|
|
569
|
+
* handling cases where focus transitions through multiple items before leaving
|
|
570
|
+
* (relatedTarget can be temporarily null during rapid moves, but activeElement
|
|
571
|
+
* will be correctly set after the current event completes).
|
|
572
|
+
* @hidden
|
|
573
|
+
*/
|
|
574
|
+
onFocusOut(event) {
|
|
575
|
+
const relatedTarget = event.relatedTarget;
|
|
576
|
+
const currentTarget = event.currentTarget;
|
|
577
|
+
// Synchronous check: if relatedTarget is known and inside menu, don't reset
|
|
578
|
+
if (relatedTarget && currentTarget.contains(relatedTarget)) {
|
|
579
|
+
return;
|
|
580
|
+
}
|
|
581
|
+
// Deferred check: ensure focus has fully settled before resetting
|
|
582
|
+
// This handles rapid transitions where relatedTarget might be null temporarily
|
|
583
|
+
setTimeout(() => {
|
|
584
|
+
const activeElement = document.activeElement;
|
|
585
|
+
if (!activeElement || !currentTarget.contains(activeElement)) {
|
|
586
|
+
this._resetListFocus();
|
|
587
|
+
}
|
|
588
|
+
}, 0);
|
|
589
|
+
}
|
|
414
590
|
/** @hidden */
|
|
415
591
|
ngAfterViewInit() {
|
|
416
592
|
this._listItems.changes
|
|
@@ -488,13 +664,22 @@ class UserMenuBodyComponent {
|
|
|
488
664
|
dialogRef.dismiss('Close');
|
|
489
665
|
this.clearSubmenu();
|
|
490
666
|
}
|
|
667
|
+
/** @hidden */
|
|
668
|
+
_resetListFocus() {
|
|
669
|
+
if (!this._listItems || this._listItems.length === 0) {
|
|
670
|
+
return;
|
|
671
|
+
}
|
|
672
|
+
resetListFocus(this._listItems.toArray());
|
|
673
|
+
}
|
|
491
674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
492
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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]=\"('coreUserMenu.previousButton' | fdTranslate)()\"\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\n [ariaLabel]=\"('coreUserMenu.closeButton' | fdTranslate)()\"\n glyph=\"decline\"\n (click)=\"closeDialog(dialogRef)\"\n >\n </fd-button-bar>\n </fd-bar-element>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "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: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { 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: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
675
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: UserMenuBodyComponent, isStandalone: true, selector: "fd-user-menu-body", host: { listeners: { "click": "onClick($event)", "focusout": "onFocusOut($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]=\"('coreUserMenu.previousButton' | fdTranslate)()\"\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\n [ariaLabel]=\"('coreUserMenu.closeButton' | fdTranslate)()\"\n glyph=\"decline\"\n (click)=\"closeDialog(dialogRef)\"\n >\n </fd-button-bar>\n </fd-bar-element>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "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: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { 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: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
493
676
|
}
|
|
494
677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuBodyComponent, decorators: [{
|
|
495
678
|
type: Component,
|
|
496
679
|
args: [{ selector: 'fd-user-menu-body', host: {
|
|
497
|
-
class: 'fd-user-menu__body'
|
|
680
|
+
class: 'fd-user-menu__body',
|
|
681
|
+
'(click)': 'onClick($event)',
|
|
682
|
+
'(focusout)': 'onFocusOut($event)'
|
|
498
683
|
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
499
684
|
BarComponent,
|
|
500
685
|
CommonModule,
|
|
@@ -509,10 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
509
694
|
}], propDecorators: { _listItems: [{
|
|
510
695
|
type: ContentChildren,
|
|
511
696
|
args: [UserMenuListItemComponent, { descendants: true }]
|
|
512
|
-
}], bodyHeader: [{ type: i0.ViewChild, args: ['bodyHeader', { isSignal: true }] }], userNameEl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UserMenuUserNameDirective), { ...{ read: ElementRef }, isSignal: true }] }]
|
|
513
|
-
type: HostListener,
|
|
514
|
-
args: ['click', ['$event']]
|
|
515
|
-
}] } });
|
|
697
|
+
}], bodyHeader: [{ type: i0.ViewChild, args: ['bodyHeader', { isSignal: true }] }], userNameEl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UserMenuUserNameDirective), { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
516
698
|
|
|
517
699
|
class UserMenuContentContainerComponent {
|
|
518
700
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuContentContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -536,19 +718,32 @@ class UserMenuControlComponent {
|
|
|
536
718
|
/** @hidden */
|
|
537
719
|
constructor(el) {
|
|
538
720
|
this.el = el;
|
|
539
|
-
/** Event emitted
|
|
721
|
+
/** Event emitted when control element is clicked */
|
|
540
722
|
this.clicked = new EventEmitter();
|
|
541
723
|
}
|
|
542
724
|
/** @hidden */
|
|
543
725
|
onClick() {
|
|
544
726
|
this.clicked.emit();
|
|
545
727
|
}
|
|
728
|
+
/**
|
|
729
|
+
* Handles keyboard activation (Enter or Space).
|
|
730
|
+
* Prevents default to avoid scrolling on Space.
|
|
731
|
+
* Emits clicked event for mobile mode; in popover mode, the event
|
|
732
|
+
* bubbles to the popover component which handles the toggle.
|
|
733
|
+
* @hidden
|
|
734
|
+
*/
|
|
735
|
+
onKeydown(event) {
|
|
736
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
737
|
+
event.preventDefault();
|
|
738
|
+
this.clicked.emit();
|
|
739
|
+
}
|
|
740
|
+
}
|
|
546
741
|
/** @hidden */
|
|
547
742
|
focus() {
|
|
548
743
|
this.el.nativeElement.focus();
|
|
549
744
|
}
|
|
550
745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuControlComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: UserMenuControlComponent, isStandalone: true, selector: "fd-user-menu-control", outputs: { clicked: "clicked" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "onClick()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: UserMenuControlComponent, isStandalone: true, selector: "fd-user-menu-control", outputs: { clicked: "clicked" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
552
747
|
}
|
|
553
748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuControlComponent, decorators: [{
|
|
554
749
|
type: Component,
|
|
@@ -558,15 +753,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
558
753
|
encapsulation: ViewEncapsulation.None,
|
|
559
754
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
560
755
|
host: {
|
|
561
|
-
tabindex: '0'
|
|
756
|
+
tabindex: '0',
|
|
757
|
+
'(click)': 'onClick()',
|
|
758
|
+
'(keydown)': 'onKeydown($event)'
|
|
562
759
|
},
|
|
563
760
|
imports: []
|
|
564
761
|
}]
|
|
565
762
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clicked: [{
|
|
566
763
|
type: Output
|
|
567
|
-
}], onClick: [{
|
|
568
|
-
type: HostListener,
|
|
569
|
-
args: ['click']
|
|
570
764
|
}] } });
|
|
571
765
|
|
|
572
766
|
class UserMenuFooterComponent {
|
|
@@ -789,6 +983,9 @@ class UserMenuComponent {
|
|
|
789
983
|
/** @hidden */
|
|
790
984
|
this.userMenuBody = contentChild(UserMenuBodyComponent, { ...(ngDevMode ? { debugName: "userMenuBody" } : /* istanbul ignore next */ {}), descendants: true });
|
|
791
985
|
/** @hidden */
|
|
986
|
+
this.dialogTemplate = viewChild('dialogTemplate', /* @ts-ignore */
|
|
987
|
+
...(ngDevMode ? [{ debugName: "dialogTemplate" }] : /* istanbul ignore next */ []));
|
|
988
|
+
/** @hidden */
|
|
792
989
|
this.navigationArrow = computed(() => this._rtlService.rtl() ? 'navigation-right-arrow' : 'navigation-left-arrow', /* @ts-ignore */
|
|
793
990
|
...(ngDevMode ? [{ debugName: "navigationArrow" }] : /* istanbul ignore next */ []));
|
|
794
991
|
/** @hidden */
|
|
@@ -801,7 +998,10 @@ class UserMenuComponent {
|
|
|
801
998
|
this._changeDetectionRef = inject(ChangeDetectorRef);
|
|
802
999
|
/** @hidden */
|
|
803
1000
|
this._renderer = inject(Renderer2);
|
|
1001
|
+
/** @hidden */
|
|
804
1002
|
this._destroyRef = inject(DestroyRef);
|
|
1003
|
+
/** @hidden */
|
|
1004
|
+
this._injector = inject(Injector);
|
|
805
1005
|
effect(() => {
|
|
806
1006
|
const isMobile = this.mobile();
|
|
807
1007
|
this._listItems()?.forEach((item) => item.mobile.set(isMobile));
|
|
@@ -811,6 +1011,7 @@ class UserMenuComponent {
|
|
|
811
1011
|
ngAfterViewInit() {
|
|
812
1012
|
const isMobile = this.mobile();
|
|
813
1013
|
this._listItems()?.forEach((item) => item.mobile.set(isMobile));
|
|
1014
|
+
this._setupMobileControlSubscription();
|
|
814
1015
|
const el = this.userNameEl()?.nativeElement;
|
|
815
1016
|
if (!el) {
|
|
816
1017
|
return;
|
|
@@ -843,12 +1044,8 @@ class UserMenuComponent {
|
|
|
843
1044
|
/** Method that closes the user menu */
|
|
844
1045
|
close() {
|
|
845
1046
|
this.isOpenChangeHandle(false);
|
|
846
|
-
if (this.
|
|
847
|
-
this.
|
|
848
|
-
item.isOpen.set(false);
|
|
849
|
-
item._elementRef?.nativeElement.querySelector('.fd-menu__link')?.classList.remove('is-active');
|
|
850
|
-
});
|
|
851
|
-
this._listItems()[0]?._tabIndex$.set(0);
|
|
1047
|
+
if (this.mobile()) {
|
|
1048
|
+
this._closeAllSubmenus();
|
|
852
1049
|
}
|
|
853
1050
|
this._clearSubmenu();
|
|
854
1051
|
this._dialogRef?.close();
|
|
@@ -863,6 +1060,18 @@ class UserMenuComponent {
|
|
|
863
1060
|
ariaDescribedBy: 'fd-user-menu-body',
|
|
864
1061
|
contentDensity: ContentDensityMode.COZY
|
|
865
1062
|
});
|
|
1063
|
+
// Focus first list item when dialog loads
|
|
1064
|
+
// Use requestAnimationFrame for consistent timing with popover mode
|
|
1065
|
+
toObservable(this._dialogRef.isLoaded, { injector: this._injector })
|
|
1066
|
+
.pipe(filter((loaded) => loaded), takeUntilDestroyed(this._destroyRef))
|
|
1067
|
+
.subscribe(() => {
|
|
1068
|
+
requestAnimationFrame(() => {
|
|
1069
|
+
const firstListItem = this._listItems()[0];
|
|
1070
|
+
if (firstListItem) {
|
|
1071
|
+
firstListItem.focus();
|
|
1072
|
+
}
|
|
1073
|
+
});
|
|
1074
|
+
});
|
|
866
1075
|
const refSub = this._dialogRef.afterClosed.subscribe({
|
|
867
1076
|
next: () => {
|
|
868
1077
|
this.userMenuControl()?.focus();
|
|
@@ -885,6 +1094,8 @@ class UserMenuComponent {
|
|
|
885
1094
|
this.isOpenChange.emit(isOpen);
|
|
886
1095
|
if (!isOpen && !this.mobile()) {
|
|
887
1096
|
this.userMenuControl()?.focus();
|
|
1097
|
+
// Close all nested submenus when the menu closes
|
|
1098
|
+
this._closeAllSubmenus();
|
|
888
1099
|
}
|
|
889
1100
|
const userMenuControlEl = this.userMenuControlElement()?.nativeElement;
|
|
890
1101
|
this.userMenuControlElement()?.nativeElement &&
|
|
@@ -892,6 +1103,31 @@ class UserMenuComponent {
|
|
|
892
1103
|
? this._renderer.addClass(userMenuControlEl, 'is-active')
|
|
893
1104
|
: this._renderer.removeClass(userMenuControlEl, 'is-active'));
|
|
894
1105
|
this._changeDetectionRef.detectChanges();
|
|
1106
|
+
// Focus first list item when popover opens
|
|
1107
|
+
// Use requestAnimationFrame to allow popover rendering to complete
|
|
1108
|
+
if (isOpen && !this.mobile()) {
|
|
1109
|
+
requestAnimationFrame(() => {
|
|
1110
|
+
const firstListItem = this._listItems()[0];
|
|
1111
|
+
if (firstListItem) {
|
|
1112
|
+
firstListItem.focus();
|
|
1113
|
+
}
|
|
1114
|
+
});
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
/**
|
|
1118
|
+
* Set up subscription to user menu control clicks for mobile mode.
|
|
1119
|
+
* Switches to control's clicked observable when control becomes available.
|
|
1120
|
+
* @hidden
|
|
1121
|
+
*/
|
|
1122
|
+
_setupMobileControlSubscription() {
|
|
1123
|
+
toObservable(this.userMenuControl, { injector: this._injector })
|
|
1124
|
+
.pipe(filter((control) => !!control && this.mobile()), switchMap((control) => control.clicked), takeUntilDestroyed(this._destroyRef))
|
|
1125
|
+
.subscribe(() => {
|
|
1126
|
+
const template = this.dialogTemplate();
|
|
1127
|
+
if (template) {
|
|
1128
|
+
this.openDialog(template);
|
|
1129
|
+
}
|
|
1130
|
+
});
|
|
895
1131
|
}
|
|
896
1132
|
/** @hidden */
|
|
897
1133
|
_clearSubmenu() {
|
|
@@ -900,8 +1136,45 @@ class UserMenuComponent {
|
|
|
900
1136
|
userMenuBody.clearSubmenu();
|
|
901
1137
|
}
|
|
902
1138
|
}
|
|
1139
|
+
/**
|
|
1140
|
+
* Closes all nested submenus by explicitly calling popover.close() on each item.
|
|
1141
|
+
* This ensures that when the main menu closes (e.g., via click outside),
|
|
1142
|
+
* all nested submenu popovers are also closed.
|
|
1143
|
+
* Iterates in reverse order to close deeply nested submenus before their parents.
|
|
1144
|
+
* @hidden
|
|
1145
|
+
*/
|
|
1146
|
+
_closeAllSubmenus() {
|
|
1147
|
+
// Close in reverse order to ensure deeply nested items close first
|
|
1148
|
+
const items = this._listItems();
|
|
1149
|
+
for (let i = items.length - 1; i >= 0; i--) {
|
|
1150
|
+
const item = items[i];
|
|
1151
|
+
const popoverInstance = item.popover();
|
|
1152
|
+
if (popoverInstance && item.isOpen()) {
|
|
1153
|
+
popoverInstance.close();
|
|
1154
|
+
}
|
|
1155
|
+
item.isOpen.set(false);
|
|
1156
|
+
item._elementRef?.nativeElement.querySelector('.fd-menu__link')?.classList.remove('is-active');
|
|
1157
|
+
}
|
|
1158
|
+
this._resetListFocus();
|
|
1159
|
+
}
|
|
1160
|
+
/**
|
|
1161
|
+
* Resets roving tabindex to the first list item.
|
|
1162
|
+
*
|
|
1163
|
+
* Roving tabindex preserves focus within the list (important for submenus),
|
|
1164
|
+
* but when tabbing back into the menu from outside, focus should start at
|
|
1165
|
+
* the first item, not the last-focused item. Called when focus leaves the menu.
|
|
1166
|
+
*
|
|
1167
|
+
* @hidden
|
|
1168
|
+
*/
|
|
1169
|
+
_resetListFocus() {
|
|
1170
|
+
const items = this._listItems();
|
|
1171
|
+
if (!items || items.length === 0) {
|
|
1172
|
+
return;
|
|
1173
|
+
}
|
|
1174
|
+
resetListFocus(items);
|
|
1175
|
+
}
|
|
903
1176
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
904
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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: "userMenuControl", first: true, predicate: UserMenuControlComponent, descendants: true, isSignal: true }, { propertyName: "userNameEl", first: true, predicate: UserMenuUserNameDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "userMenuControlElement", first: true, predicate: UserMenuControlElementDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "userMenuBody", first: true, predicate: UserMenuBodyComponent, descendants: true, isSignal: true }, { propertyName: "_listItems", predicate: UserMenuListItemComponent, descendants: true, isSignal: 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 [disableScrollbar]=\"true\"\n [noArrow]=\"false\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n </fd-popover-control>\n <fd-popover-body fd-user-menu-popover-control>\n <div class=\"fd-user-menu__popover-wrapper\">\n <div\n fd-popover-body-header\n class=\"fd-user-menu__scroll-header\"\n [class.hidden]=\"isUserNameVisible()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n\n <div fd-popover-body-footer>\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\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-header>\n @if (userMenuBody()?.bodyHeader()) {\n <ng-template fdkTemplate=\"header\">\n <ng-container\n *ngTemplateOutlet=\"userMenuBody()?.bodyHeader() ?? null; context: { dialogRef: dialog }\"\n >\n </ng-container>\n </ng-template>\n }\n </fd-dialog-header>\n <fd-dialog-body style=\"padding: 0\">\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </fd-dialog-body>\n <fd-dialog-footer>\n <ng-template fdkTemplate=\"customFooter\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </ng-template>\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 #header>\n <div fd-popover-body-header>\n <div fd-bar barDesign=\"header\">\n <div fd-bar-middle>\n <fd-bar-element>\n <div\n class=\"fd-user-menu__user-name fd-user-menu__user-name--truncate\"\n [innerHTML]=\"userNameContent()\"\n ></div>\n </fd-bar-element>\n </div>\n </div>\n </div>\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: [".fd-dialog__body{--fdButton_Menu_Border_Radius:0}.fd-menu{--fdMenu_Icon_Width:2.25rem;--fdMenu_Link_Height:2.75rem;--fdMenu_Item_Spacing_Left:.75rem;--fdMenu_Item_Spacing_Right:.75rem;--fdMenu_Item_Border_Bottom_Color:transparent;--fdMenu_Shortcut_Padding_Left:1rem;--fdMenu_Shortcut_Padding_Right:.75rem;--fdMenu_Text_Spacing_Right:.75rem;--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Regular);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Background_Color:var(--sapList_Background);--fdMenu_Active_Dot_Size:.75rem;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;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu:after,.fd-menu:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{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;border-radius:var(--fdButton_Menu_Border_Radius);-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;max-width:20rem}.fd-menu__list:after,.fd-menu__list:before,.fd-menu__sublist:after,.fd-menu__sublist:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list--no-shadow,.fd-menu__sublist--no-shadow{-webkit-box-shadow:none;box-shadow:none}.fd-menu__sublist{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;left:100%;line-height:normal;margin-block:0;margin-block:.25rem 0;margin-inline:0;margin-inline:-.25rem 0;min-width:100%;padding-block:0;padding-inline:0;position:absolute;top:0;z-index:2}.fd-menu__sublist:after,.fd-menu__sublist:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__sublist[dir=rtl],[dir=rtl] .fd-menu__sublist{left:auto;right:100%}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{position:relative;width:100%}.fd-menu__list--overflow{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-y:scroll;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow.is-focus,.fd-menu__list--overflow:focus{outline:none;z-index:5}.fd-menu__list--overflow::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb:active,.fd-menu__list--overflow::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-corner,.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-corner,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu__separator{background-color:var(--sapGroup_ContentBorderColor);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;height:.0625rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:100%}.fd-menu__separator:after,.fd-menu__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item{background-color:var(--sapList_Background);border:0;border-radius: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;max-width:100%;padding-block:0;padding-inline:0;position:relative}.fd-menu__item:after,.fd-menu__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item:first-child,.fd-menu__item:first-child .fd-menu__link:after{border-top-left-radius:var(--fdButton_Menu_Border_Radius);border-top-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item:last-of-type,.fd-menu__item:last-of-type .fd-menu__link:after{border-bottom-left-radius:var(--fdButton_Menu_Border_Radius);border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item.has-separator{border-bottom:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-menu__link{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;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-align:center;-ms-flex-align:center;align-items:center;background:var(--fdMenu_Item_Background_Color);border-bottom:.0625rem solid var(--fdMenu_Item_Border_Bottom_Color);border-radius:inherit;min-height:var(--fdMenu_Link_Height);outline:none;padding-inline:var(--fdMenu_Item_Spacing_Left) var(--fdMenu_Item_Spacing_Right);text-decoration:none;width:100%}.fd-menu__link:after,.fd-menu__link:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__link.is-focus:after,.fd-menu__link:focus:after{border-color:var(--sapContent_FocusColor);border-radius:0!important;border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.125rem;pointer-events:none;position:absolute}.fd-menu__link.is-hover,.fd-menu__link:hover{--fdMenu_Item_Background_Color:var(--sapList_Hover_Background)}.fd-menu__link.is-selected,.fd-menu__link[aria-selected=true]{--fdMenu_Item_Background_Color:var(--sapList_SelectionBackgroundColor);--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Border_Bottom_Color:var(--sapList_SelectionBorderColor)}.fd-menu__link.is-selected.is-hover:not(:active,.is-active),.fd-menu__link.is-selected:hover:not(:active,.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active,.is-active),.fd-menu__link[aria-selected=true]:hover:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_Hover_SelectionBackground);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected_Hover)}.fd-menu__link.is-selected.is-focus,.fd-menu__link.is-selected:focus,.fd-menu__link[aria-selected=true].is-focus,.fd-menu__link[aria-selected=true]:focus{z-index:5}.fd-menu__link.is-selected.is-focus:after,.fd-menu__link.is-selected:focus:after,.fd-menu__link[aria-selected=true].is-focus:after,.fd-menu__link[aria-selected=true]:focus:after{bottom:.125rem}.fd-menu__link.is-active,.fd-menu__link:active{--fdMenu_Item_Background_Color:var(--sapList_Active_Background);--fdMenu_Icon_Color:var(--sapList_Active_TextColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Active);--fdMenu_Text_Color:var(--fdMenu_Text_Color_Active)}.fd-menu__link.is-active:after,.fd-menu__link:active:after{display:none}.fd-menu__link.is-active.is-focus,.fd-menu__link.is-active:focus,.fd-menu__link:active.is-focus,.fd-menu__link:active:focus{outline-color:var(--fdMenu_Active_State_Focus);z-index:5}.fd-menu__link.is-disabled,.fd-menu__link:disabled,.fd-menu__link[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-menu__link.is-disabled.is-focus,.fd-menu__link.is-disabled:focus,.fd-menu__link:disabled.is-focus,.fd-menu__link:disabled:focus,.fd-menu__link[aria-disabled=true].is-focus,.fd-menu__link[aria-disabled=true]:focus{z-index:5}.fd-menu__link.is-disabled.is-focus:after,.fd-menu__link.is-disabled:focus:after,.fd-menu__link:disabled.is-focus:after,.fd-menu__link:disabled:focus:after,.fd-menu__link[aria-disabled=true].is-focus:after,.fd-menu__link[aria-disabled=true]:focus:after{display:none}.fd-menu__link.has-child{--fdMenu_Item_Spacing_Right:0}.fd-menu__link.has-child.is-expanded:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_SelectionBackgroundColor);--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Border_Bottom_Color:var(--sapList_SelectionBorderColor)}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-hover:not(:active,.is-active),.fd-menu__link.has-child.is-expanded:not(:active,.is-active):hover:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-hover:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):hover:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_Hover_SelectionBackground);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected_Hover)}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):focus{z-index:5}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus:after,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):focus:after{bottom:.125rem}.fd-menu__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdMenu_Text_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;padding-block:0;padding-inline:0;text-align:start;text-shadow:var(--fdMenu_Text_Shadow);width:100%}.fd-menu__title:after,.fd-menu__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__title:has(+.fd-menu__input){min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu__title--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-menu__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-align:start;width:100%;-webkit-margin-after:.25rem;color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);margin-block-end:.25rem;text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__subtitle:after,.fd-menu__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__subtitle--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-menu__content{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;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.fd-menu__content:after,.fd-menu__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-after,.fd-menu__addon-before{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;color:var(--fdMenu_Icon_Color);font-size:var(--sapFontLargeSize);height:100%;max-width:var(--fdMenu_Icon_Width);min-width:var(--fdMenu_Icon_Width);text-shadow:var(--fdMenu_Text_Shadow);width:var(--fdMenu_Icon_Width)}.fd-menu__addon-after:after,.fd-menu__addon-after:before,.fd-menu__addon-before:after,.fd-menu__addon-before:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-after [class*=sap-icon],.fd-menu__addon-after[class*=sap-icon],.fd-menu__addon-before [class*=sap-icon],.fd-menu__addon-before[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-menu__addon-after--active,.fd-menu__addon-before--active{--fdMenu_Icon_Color:var(--sapContent_Selected_ForegroundColor)}.fd-menu__addon-after--submenu{font-size:var(--fdMenu_Affordance_Arrow_Size)}.fd-menu__addon-after--submenu:before{content:\"\\e066\"}.fd-menu__addon-after--submenu:before,.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{content:\"\\e067\"}.fd-menu__active-dot{background:var(--sapContent_Selected_ForegroundColor);border:0;border-radius:100%;-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;height:var(--fdMenu_Active_Dot_Size);line-height:normal;margin-block:0;margin-inline:0;min-width:var(--fdMenu_Active_Dot_Size);padding-block:0;padding-inline:0;width:var(--fdMenu_Active_Dot_Size)}.fd-menu__active-dot:after,.fd-menu__active-dot:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__checkmark [class*=sap-icon],.fd-menu__checkmark[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;color:var(--sapContent_Selected_ForegroundColor);font-size:inherit;font-size:1rem;line-height:1}.fd-menu__shortcut{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;-ms-flex-negative:0;color:var(--fdMenu_Shortcut_Color);flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;-webkit-padding-start:var(--fdMenu_Shortcut_Padding_Left);padding-inline-start:var(--fdMenu_Shortcut_Padding_Left)}.fd-menu__shortcut:after,.fd-menu__shortcut:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__shortcut:last-child{padding-inline:var(--fdMenu_Shortcut_Padding_Left) var(--fdMenu_Shortcut_Padding_Right)}.fd-menu--overflow{border-radius:var(--fdButton_Menu_Border_Radius);-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);overflow-y:scroll;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu--overflow.is-focus,.fd-menu--overflow:focus{outline:none;z-index:5}.fd-menu--overflow::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb:active,.fd-menu--overflow::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-corner,.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-corner,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu--overflow .fd-menu__list{-webkit-box-shadow:none;box-shadow:none}.fd-menu--overflow .fd-menu__item:first-child{border-top-right-radius:0}.fd-menu--overflow .fd-menu__item:first-child[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:first-child{border-top-left-radius:0;border-top-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-right-radius:0}.fd-menu--overflow .fd-menu__item:last-of-type[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-left-radius:0;border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--full-width{max-width:100%}.fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):first-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):first-child{-webkit-margin-start:var(--fdMenu_Icon_Width);margin-inline-start:var(--fdMenu_Icon_Width)}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):last-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):last-child{-webkit-margin-end:var(--fdMenu_Text_Spacing_Right);margin-inline-end:var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):only-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):only-child{margin-inline:var(--fdMenu_Icon_Width) var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left:1rem;--fdMenu_Item_Spacing_Right:1rem}.fd-menu--icons .fd-menu__sublist .fd-menu__title:first-child{-webkit-margin-start:0;margin-inline-start:0}.fd-menu--icons .fd-menu__sublist .fd-menu__title:last-child{-webkit-margin-end:0;margin-inline-end:0}.fd-menu--icons .fd-menu__sublist .fd-menu__title:only-child{margin-inline:0}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:first-child{-webkit-margin-start:var(--fdMenu_Icon_Width);margin-inline-start:var(--fdMenu_Icon_Width)}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:last-child{-webkit-margin-end:var(--fdMenu_Text_Spacing_Right);margin-inline-end:var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:only-child{margin-inline:var(--fdMenu_Icon_Width) var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__input,.fd-menu--icons input{margin-inline:var(--fdMenu_Text_Spacing_Right) var(--fdMenu_Text_Spacing_Right)}.fd-menu--mobile{max-width:100%;width:100%;--fdMenu_Icon_Width:2.75rem;--fdMenu_Item_Spacing_Left:1rem;--fdMenu_Item_Spacing_Right:1rem;--fdMenu_Shortcut_Padding_Right:1rem;--fdMenu_Text_Spacing_Right:1rem}.fd-menu--mobile .fd-menu__list,.fd-menu--mobile .fd-menu__sublist{border-radius:0;-webkit-box-shadow:none;box-shadow:none;margin-block:0;margin-inline:0;position:static}.fd-menu--mobile .fd-menu__list .fd-menu__item,.fd-menu--mobile .fd-menu__sublist .fd-menu__item{border-radius:0}.fd-menu--mobile.fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--mobile.fd-menu--icons .fd-menu__input,.fd-menu--mobile.fd-menu--icons input{margin-inline:1rem}.fd-menu[class*=-compact],.fd-menu[class*=-condensed],[class*=-compact] .fd-menu:not([class*=-cozy]),[class*=-condensed] .fd-menu:not([class*=-cozy]){--fdMenu_Icon_Width:2rem;--fdMenu_Link_Height:2rem;--fdMenu_Item_Spacing_Left:.5rem;--fdMenu_Item_Spacing_Right:.5rem;--fdMenu_Shortcut_Padding_Right:.5rem;--fdMenu_Text_Spacing_Right:.5rem}.fd-menu[class*=-compact].fd-menu--icons,.fd-menu[class*=-condensed].fd-menu--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__input,.fd-menu[class*=-compact].fd-menu--icons input,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__input,.fd-menu[class*=-condensed].fd-menu--icons input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons input{margin-inline:.5rem}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left:.5rem;--fdMenu_Item_Spacing_Right:.5rem}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.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{min-width:20rem;overflow:visible;width:20rem}.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__header-content-area{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;padding:.5rem;width:100%}.fd-user-menu__header-content-area:after,.fd-user-menu__header-content-area: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;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--fdUserMenu_User_Name_Font_Family);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1.4rem;margin-block:0;margin-inline:0;max-width:100%;padding-block:0;padding-inline:0;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__user-name--truncate{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.8rem;overflow:hidden;text-overflow:ellipsis;white-space:normal}.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%;padding-block:0;padding-inline:0;white-space:normal;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__subline--truncate,.fd-user-menu__user-info--truncate,.fd-user-menu__user-role--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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{border-radius:0}.fd-user-menu .fd-user-menu__menu-list .fd-menu__subtitle:not(.fd-menu__subtitle--truncate),.fd-user-menu .fd-user-menu__menu-list .fd-menu__title:not(.fd-menu__title--truncate){white-space:normal}.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 .fd-menu[class*=-compact],.fd-user-menu .fd-menu[class*=-condensed],[class*=-compact] .fd-user-menu .fd-menu:not([class*=-cozy]),[class*=-condensed] .fd-user-menu .fd-menu:not([class*=-cozy]){--fdMenu_Icon_Width:2.5rem;--fdMenu_Link_Height:2.5rem;--fdMenu_Item_Spacing_Left:.75rem;--fdMenu_Item_Spacing_Right:.75rem}.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(--sapTitleColor);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(--sapContent_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{background:transparent}.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-control{display:flex;width:fit-content;height:fit-content;align-items:center;border-radius:50rem;justify-content:center}fd-user-menu-control:is(:focus){outline-offset:.0625rem;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.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;width:20rem;min-width:20rem;max-width:20rem}.fd-user-menu__body:has(.fd-user-menu__details-view){padding:0}.fd-user-menu__header-container{max-width:100%}.fd-user-menu .fd-popover__body>.fd-scrollbar{width:20rem;min-width:20rem;max-width:20rem}.fd-user-menu__scroll-header{width:20rem;min-width:20rem;max-width:20rem;position:absolute;top:0;z-index:10;overflow:hidden;border-top-left-radius:var(--fdPopover_Border_Radius);border-top-right-radius:var(--fdPopover_Border_Radius);background:var(--sapPageHeader_Background);transition:all .15s ease}.fd-user-menu__scroll-header.hidden{opacity:0;pointer-events:none}.fd-user-menu__scroll-header-element{transition:all .15s ease}.fd-user-menu__scroll-header-element.hidden{opacity:0;pointer-events:none}.fd-user-menu__footer .fd-bar.fd-bar--footer{position:sticky;bottom:0}.fd-user-menu__popover-wrapper{overflow:auto;display:flex;flex-direction:column;overscroll-behavior:contain;scroll-behavior:smooth;overflow-anchor:none}.fd-user-menu__body{overflow:auto;flex:1}.fd-user-menu__footer{min-height:2rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/user-menu.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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: BarComponent, selector: "[fd-bar]", inputs: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "role"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { 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" }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1177
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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: "userMenuControl", first: true, predicate: UserMenuControlComponent, descendants: true, isSignal: true }, { propertyName: "userNameEl", first: true, predicate: UserMenuUserNameDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "userMenuControlElement", first: true, predicate: UserMenuControlElementDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "userMenuBody", first: true, predicate: UserMenuBodyComponent, descendants: true, isSignal: true }, { propertyName: "_listItems", predicate: UserMenuListItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, isSignal: 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 [disableScrollbar]=\"true\"\n [noArrow]=\"false\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n </fd-popover-control>\n <fd-popover-body fd-user-menu-popover-control>\n <div class=\"fd-user-menu__popover-wrapper\">\n <div\n fd-popover-body-header\n class=\"fd-user-menu__scroll-header\"\n [class.hidden]=\"isUserNameVisible()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n\n <div fd-popover-body-footer>\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n </div>\n </fd-popover-body>\n </fd-popover>\n} @else {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n\n <ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n <fd-dialog-header>\n @if (userMenuBody()?.bodyHeader()) {\n <ng-template fdkTemplate=\"header\">\n <ng-container\n *ngTemplateOutlet=\"userMenuBody()?.bodyHeader() ?? null; context: { dialogRef: dialog }\"\n >\n </ng-container>\n </ng-template>\n }\n </fd-dialog-header>\n <fd-dialog-body style=\"padding: 0\">\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </fd-dialog-body>\n <fd-dialog-footer>\n <ng-template fdkTemplate=\"customFooter\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </ng-template>\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 #header>\n <div fd-popover-body-header>\n <div fd-bar barDesign=\"header\">\n <div fd-bar-middle>\n <fd-bar-element>\n <div\n class=\"fd-user-menu__user-name fd-user-menu__user-name--truncate\"\n [innerHTML]=\"userNameContent()\"\n ></div>\n </fd-bar-element>\n </div>\n </div>\n </div>\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: [".fd-dialog__body{--fdButton_Menu_Border_Radius:0}.fd-menu{--fdMenu_Icon_Width:2.25rem;--fdMenu_Link_Height:2.75rem;--fdMenu_Item_Spacing_Left:.75rem;--fdMenu_Item_Spacing_Right:.75rem;--fdMenu_Item_Border_Bottom_Color:transparent;--fdMenu_Shortcut_Padding_Left:1rem;--fdMenu_Shortcut_Padding_Right:.75rem;--fdMenu_Text_Spacing_Right:.75rem;--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Regular);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Background_Color:var(--sapList_Background);--fdMenu_Active_Dot_Size:.75rem;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;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu:after,.fd-menu:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{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;border-radius:var(--fdButton_Menu_Border_Radius);-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;max-width:20rem}.fd-menu__list:after,.fd-menu__list:before,.fd-menu__sublist:after,.fd-menu__sublist:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list--no-shadow,.fd-menu__sublist--no-shadow{-webkit-box-shadow:none;box-shadow:none}.fd-menu__sublist{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;left:100%;line-height:normal;margin-block:0;margin-block:.25rem 0;margin-inline:0;margin-inline:-.25rem 0;min-width:100%;padding-block:0;padding-inline:0;position:absolute;top:0;z-index:2}.fd-menu__sublist:after,.fd-menu__sublist:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__sublist[dir=rtl],[dir=rtl] .fd-menu__sublist{left:auto;right:100%}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{position:relative;width:100%}.fd-menu__list--overflow{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-y:scroll;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow.is-focus,.fd-menu__list--overflow:focus{outline:none;z-index:5}.fd-menu__list--overflow::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb:active,.fd-menu__list--overflow::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-corner,.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-corner,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu__separator{background-color:var(--sapGroup_ContentBorderColor);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;height:.0625rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:100%}.fd-menu__separator:after,.fd-menu__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item{background-color:var(--sapList_Background);border:0;border-radius: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;max-width:100%;padding-block:0;padding-inline:0;position:relative}.fd-menu__item:after,.fd-menu__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item:first-child,.fd-menu__item:first-child .fd-menu__link:after{border-top-left-radius:var(--fdButton_Menu_Border_Radius);border-top-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item:last-of-type,.fd-menu__item:last-of-type .fd-menu__link:after{border-bottom-left-radius:var(--fdButton_Menu_Border_Radius);border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item.has-separator{border-bottom:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-menu__link{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;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-align:center;-ms-flex-align:center;align-items:center;background:var(--fdMenu_Item_Background_Color);border-bottom:.0625rem solid var(--fdMenu_Item_Border_Bottom_Color);border-radius:inherit;min-height:var(--fdMenu_Link_Height);outline:none;padding-inline:var(--fdMenu_Item_Spacing_Left) var(--fdMenu_Item_Spacing_Right);text-decoration:none;width:100%}.fd-menu__link:after,.fd-menu__link:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__link.is-focus:after,.fd-menu__link:focus:after{border-color:var(--sapContent_FocusColor);border-radius:0!important;border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.125rem;pointer-events:none;position:absolute}.fd-menu__link.is-hover,.fd-menu__link:hover{--fdMenu_Item_Background_Color:var(--sapList_Hover_Background)}.fd-menu__link.is-selected,.fd-menu__link[aria-selected=true]{--fdMenu_Item_Background_Color:var(--sapList_SelectionBackgroundColor);--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Border_Bottom_Color:var(--sapList_SelectionBorderColor)}.fd-menu__link.is-selected.is-hover:not(:active,.is-active),.fd-menu__link.is-selected:hover:not(:active,.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active,.is-active),.fd-menu__link[aria-selected=true]:hover:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_Hover_SelectionBackground);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected_Hover)}.fd-menu__link.is-selected.is-focus,.fd-menu__link.is-selected:focus,.fd-menu__link[aria-selected=true].is-focus,.fd-menu__link[aria-selected=true]:focus{z-index:5}.fd-menu__link.is-selected.is-focus:after,.fd-menu__link.is-selected:focus:after,.fd-menu__link[aria-selected=true].is-focus:after,.fd-menu__link[aria-selected=true]:focus:after{bottom:.125rem}.fd-menu__link.is-active,.fd-menu__link:active{--fdMenu_Item_Background_Color:var(--sapList_Active_Background);--fdMenu_Icon_Color:var(--sapList_Active_TextColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Active);--fdMenu_Text_Color:var(--fdMenu_Text_Color_Active)}.fd-menu__link.is-active:after,.fd-menu__link:active:after{display:none}.fd-menu__link.is-active.is-focus,.fd-menu__link.is-active:focus,.fd-menu__link:active.is-focus,.fd-menu__link:active:focus{outline-color:var(--fdMenu_Active_State_Focus);z-index:5}.fd-menu__link.is-disabled,.fd-menu__link:disabled,.fd-menu__link[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-menu__link.is-disabled.is-focus,.fd-menu__link.is-disabled:focus,.fd-menu__link:disabled.is-focus,.fd-menu__link:disabled:focus,.fd-menu__link[aria-disabled=true].is-focus,.fd-menu__link[aria-disabled=true]:focus{z-index:5}.fd-menu__link.is-disabled.is-focus:after,.fd-menu__link.is-disabled:focus:after,.fd-menu__link:disabled.is-focus:after,.fd-menu__link:disabled:focus:after,.fd-menu__link[aria-disabled=true].is-focus:after,.fd-menu__link[aria-disabled=true]:focus:after{display:none}.fd-menu__link.has-child{--fdMenu_Item_Spacing_Right:0}.fd-menu__link.has-child.is-expanded:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_SelectionBackgroundColor);--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Border_Bottom_Color:var(--sapList_SelectionBorderColor)}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-hover:not(:active,.is-active),.fd-menu__link.has-child.is-expanded:not(:active,.is-active):hover:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-hover:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):hover:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_Hover_SelectionBackground);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected_Hover)}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):focus{z-index:5}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus:after,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):focus:after{bottom:.125rem}.fd-menu__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdMenu_Text_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;padding-block:0;padding-inline:0;text-align:start;text-shadow:var(--fdMenu_Text_Shadow);width:100%}.fd-menu__title:after,.fd-menu__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__title:has(+.fd-menu__input){min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu__title--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-menu__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-align:start;width:100%;-webkit-margin-after:.25rem;color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);margin-block-end:.25rem;text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__subtitle:after,.fd-menu__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__subtitle--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-menu__content{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;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.fd-menu__content:after,.fd-menu__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-after,.fd-menu__addon-before{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;color:var(--fdMenu_Icon_Color);font-size:var(--sapFontLargeSize);height:100%;max-width:var(--fdMenu_Icon_Width);min-width:var(--fdMenu_Icon_Width);text-shadow:var(--fdMenu_Text_Shadow);width:var(--fdMenu_Icon_Width)}.fd-menu__addon-after:after,.fd-menu__addon-after:before,.fd-menu__addon-before:after,.fd-menu__addon-before:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-after [class*=sap-icon],.fd-menu__addon-after[class*=sap-icon],.fd-menu__addon-before [class*=sap-icon],.fd-menu__addon-before[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-menu__addon-after--active,.fd-menu__addon-before--active{--fdMenu_Icon_Color:var(--sapContent_Selected_ForegroundColor)}.fd-menu__addon-after--submenu{font-size:var(--fdMenu_Affordance_Arrow_Size)}.fd-menu__addon-after--submenu:before{content:\"\\e066\"}.fd-menu__addon-after--submenu:before,.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{content:\"\\e067\"}.fd-menu__active-dot{background:var(--sapContent_Selected_ForegroundColor);border:0;border-radius:100%;-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;height:var(--fdMenu_Active_Dot_Size);line-height:normal;margin-block:0;margin-inline:0;min-width:var(--fdMenu_Active_Dot_Size);padding-block:0;padding-inline:0;width:var(--fdMenu_Active_Dot_Size)}.fd-menu__active-dot:after,.fd-menu__active-dot:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__checkmark [class*=sap-icon],.fd-menu__checkmark[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;color:var(--sapContent_Selected_ForegroundColor);font-size:inherit;font-size:1rem;line-height:1}.fd-menu__shortcut{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;-ms-flex-negative:0;color:var(--fdMenu_Shortcut_Color);flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;-webkit-padding-start:var(--fdMenu_Shortcut_Padding_Left);padding-inline-start:var(--fdMenu_Shortcut_Padding_Left)}.fd-menu__shortcut:after,.fd-menu__shortcut:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__shortcut:last-child{padding-inline:var(--fdMenu_Shortcut_Padding_Left) var(--fdMenu_Shortcut_Padding_Right)}.fd-menu--overflow{border-radius:var(--fdButton_Menu_Border_Radius);-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);overflow-y:scroll;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu--overflow.is-focus,.fd-menu--overflow:focus{outline:none;z-index:5}.fd-menu--overflow::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb:active,.fd-menu--overflow::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-corner,.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-corner,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu--overflow .fd-menu__list{-webkit-box-shadow:none;box-shadow:none}.fd-menu--overflow .fd-menu__item:first-child{border-top-right-radius:0}.fd-menu--overflow .fd-menu__item:first-child[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:first-child{border-top-left-radius:0;border-top-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-right-radius:0}.fd-menu--overflow .fd-menu__item:last-of-type[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-left-radius:0;border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--full-width{max-width:100%}.fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):first-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):first-child{-webkit-margin-start:var(--fdMenu_Icon_Width);margin-inline-start:var(--fdMenu_Icon_Width)}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):last-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):last-child{-webkit-margin-end:var(--fdMenu_Text_Spacing_Right);margin-inline-end:var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):only-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):only-child{margin-inline:var(--fdMenu_Icon_Width) var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left:1rem;--fdMenu_Item_Spacing_Right:1rem}.fd-menu--icons .fd-menu__sublist .fd-menu__title:first-child{-webkit-margin-start:0;margin-inline-start:0}.fd-menu--icons .fd-menu__sublist .fd-menu__title:last-child{-webkit-margin-end:0;margin-inline-end:0}.fd-menu--icons .fd-menu__sublist .fd-menu__title:only-child{margin-inline:0}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:first-child{-webkit-margin-start:var(--fdMenu_Icon_Width);margin-inline-start:var(--fdMenu_Icon_Width)}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:last-child{-webkit-margin-end:var(--fdMenu_Text_Spacing_Right);margin-inline-end:var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:only-child{margin-inline:var(--fdMenu_Icon_Width) var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__input,.fd-menu--icons input{margin-inline:var(--fdMenu_Text_Spacing_Right) var(--fdMenu_Text_Spacing_Right)}.fd-menu--mobile{max-width:100%;width:100%;--fdMenu_Icon_Width:2.75rem;--fdMenu_Item_Spacing_Left:1rem;--fdMenu_Item_Spacing_Right:1rem;--fdMenu_Shortcut_Padding_Right:1rem;--fdMenu_Text_Spacing_Right:1rem}.fd-menu--mobile .fd-menu__list,.fd-menu--mobile .fd-menu__sublist{border-radius:0;-webkit-box-shadow:none;box-shadow:none;margin-block:0;margin-inline:0;position:static}.fd-menu--mobile .fd-menu__list .fd-menu__item,.fd-menu--mobile .fd-menu__sublist .fd-menu__item{border-radius:0}.fd-menu--mobile.fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--mobile.fd-menu--icons .fd-menu__input,.fd-menu--mobile.fd-menu--icons input{margin-inline:1rem}.fd-menu[class*=-compact],.fd-menu[class*=-condensed],[class*=-compact] .fd-menu:not([class*=-cozy]),[class*=-condensed] .fd-menu:not([class*=-cozy]){--fdMenu_Icon_Width:2rem;--fdMenu_Link_Height:2rem;--fdMenu_Item_Spacing_Left:.5rem;--fdMenu_Item_Spacing_Right:.5rem;--fdMenu_Shortcut_Padding_Right:.5rem;--fdMenu_Text_Spacing_Right:.5rem}.fd-menu[class*=-compact].fd-menu--icons,.fd-menu[class*=-condensed].fd-menu--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__input,.fd-menu[class*=-compact].fd-menu--icons input,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__input,.fd-menu[class*=-condensed].fd-menu--icons input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons input{margin-inline:.5rem}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left:.5rem;--fdMenu_Item_Spacing_Right:.5rem}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.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{min-width:20rem;overflow:visible;width:20rem}.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__header-content-area{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;padding:.5rem;width:100%}.fd-user-menu__header-content-area:after,.fd-user-menu__header-content-area: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;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--fdUserMenu_User_Name_Font_Family);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1.4rem;margin-block:0;margin-inline:0;max-width:100%;padding-block:0;padding-inline:0;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__user-name--truncate{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.8rem;overflow:hidden;text-overflow:ellipsis;white-space:normal}.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%;padding-block:0;padding-inline:0;white-space:normal;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__subline--truncate,.fd-user-menu__user-info--truncate,.fd-user-menu__user-role--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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{border-radius:0}.fd-user-menu .fd-user-menu__menu-list .fd-menu__subtitle:not(.fd-menu__subtitle--truncate),.fd-user-menu .fd-user-menu__menu-list .fd-menu__title:not(.fd-menu__title--truncate){white-space:normal}.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 .fd-menu[class*=-compact],.fd-user-menu .fd-menu[class*=-condensed],[class*=-compact] .fd-user-menu .fd-menu:not([class*=-cozy]),[class*=-condensed] .fd-user-menu .fd-menu:not([class*=-cozy]){--fdMenu_Icon_Width:2.5rem;--fdMenu_Link_Height:2.5rem;--fdMenu_Item_Spacing_Left:.75rem;--fdMenu_Item_Spacing_Right:.75rem}.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(--sapTitleColor);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(--sapContent_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{background:transparent}.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-control{display:flex;width:fit-content;height:fit-content;align-items:center;border-radius:50rem;justify-content:center}fd-user-menu-control:is(:focus){outline-offset:.0625rem;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.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;width:20rem;min-width:20rem;max-width:20rem}.fd-user-menu__body:has(.fd-user-menu__details-view){padding:0}.fd-user-menu__header-container{max-width:100%}.fd-user-menu .fd-popover__body>.fd-scrollbar{width:20rem;min-width:20rem;max-width:20rem}.fd-user-menu__scroll-header{width:20rem;min-width:20rem;max-width:20rem;position:absolute;top:0;z-index:10;overflow:hidden;border-top-left-radius:var(--fdPopover_Border_Radius);border-top-right-radius:var(--fdPopover_Border_Radius);background:var(--sapPageHeader_Background);transition:all .15s ease}.fd-user-menu__scroll-header.hidden{opacity:0;pointer-events:none}.fd-user-menu__scroll-header-element{transition:all .15s ease}.fd-user-menu__scroll-header-element.hidden{opacity:0;pointer-events:none}.fd-user-menu__footer .fd-bar.fd-bar--footer{position:sticky;bottom:0}.fd-user-menu__popover-wrapper{overflow:auto;display:flex;flex-direction:column;overscroll-behavior:contain;scroll-behavior:smooth;overflow-anchor:none}.fd-user-menu__body{overflow:auto;flex:1}.fd-user-menu__footer{min-height:2rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/user-menu.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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: BarComponent, selector: "[fd-bar]", inputs: ["barDesign", "inPage", "inHomePage", "clear", "size", "initialSuggestionTitle", "initialSuggestionSubline", "role"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { 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" }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
905
1178
|
}
|
|
906
1179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuComponent, decorators: [{
|
|
907
1180
|
type: Component,
|
|
@@ -920,11 +1193,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
920
1193
|
DialogFooterComponent,
|
|
921
1194
|
DialogHeaderComponent,
|
|
922
1195
|
TemplateDirective
|
|
923
|
-
], 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 [disableScrollbar]=\"true\"\n [noArrow]=\"false\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n </fd-popover-control>\n <fd-popover-body fd-user-menu-popover-control>\n <div class=\"fd-user-menu__popover-wrapper\">\n <div\n fd-popover-body-header\n class=\"fd-user-menu__scroll-header\"\n [class.hidden]=\"isUserNameVisible()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n\n <div fd-popover-body-footer>\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\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-header>\n @if (userMenuBody()?.bodyHeader()) {\n <ng-template fdkTemplate=\"header\">\n <ng-container\n *ngTemplateOutlet=\"userMenuBody()?.bodyHeader() ?? null; context: { dialogRef: dialog }\"\n >\n </ng-container>\n </ng-template>\n }\n </fd-dialog-header>\n <fd-dialog-body style=\"padding: 0\">\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </fd-dialog-body>\n <fd-dialog-footer>\n <ng-template fdkTemplate=\"customFooter\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </ng-template>\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 #header>\n <div fd-popover-body-header>\n <div fd-bar barDesign=\"header\">\n <div fd-bar-middle>\n <fd-bar-element>\n <div\n class=\"fd-user-menu__user-name fd-user-menu__user-name--truncate\"\n [innerHTML]=\"userNameContent()\"\n ></div>\n </fd-bar-element>\n </div>\n </div>\n </div>\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: [".fd-dialog__body{--fdButton_Menu_Border_Radius:0}.fd-menu{--fdMenu_Icon_Width:2.25rem;--fdMenu_Link_Height:2.75rem;--fdMenu_Item_Spacing_Left:.75rem;--fdMenu_Item_Spacing_Right:.75rem;--fdMenu_Item_Border_Bottom_Color:transparent;--fdMenu_Shortcut_Padding_Left:1rem;--fdMenu_Shortcut_Padding_Right:.75rem;--fdMenu_Text_Spacing_Right:.75rem;--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Regular);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Background_Color:var(--sapList_Background);--fdMenu_Active_Dot_Size:.75rem;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;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu:after,.fd-menu:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{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;border-radius:var(--fdButton_Menu_Border_Radius);-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;max-width:20rem}.fd-menu__list:after,.fd-menu__list:before,.fd-menu__sublist:after,.fd-menu__sublist:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list--no-shadow,.fd-menu__sublist--no-shadow{-webkit-box-shadow:none;box-shadow:none}.fd-menu__sublist{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;left:100%;line-height:normal;margin-block:0;margin-block:.25rem 0;margin-inline:0;margin-inline:-.25rem 0;min-width:100%;padding-block:0;padding-inline:0;position:absolute;top:0;z-index:2}.fd-menu__sublist:after,.fd-menu__sublist:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__sublist[dir=rtl],[dir=rtl] .fd-menu__sublist{left:auto;right:100%}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{position:relative;width:100%}.fd-menu__list--overflow{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-y:scroll;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow.is-focus,.fd-menu__list--overflow:focus{outline:none;z-index:5}.fd-menu__list--overflow::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb:active,.fd-menu__list--overflow::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-corner,.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-corner,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu__separator{background-color:var(--sapGroup_ContentBorderColor);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;height:.0625rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:100%}.fd-menu__separator:after,.fd-menu__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item{background-color:var(--sapList_Background);border:0;border-radius: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;max-width:100%;padding-block:0;padding-inline:0;position:relative}.fd-menu__item:after,.fd-menu__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item:first-child,.fd-menu__item:first-child .fd-menu__link:after{border-top-left-radius:var(--fdButton_Menu_Border_Radius);border-top-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item:last-of-type,.fd-menu__item:last-of-type .fd-menu__link:after{border-bottom-left-radius:var(--fdButton_Menu_Border_Radius);border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item.has-separator{border-bottom:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-menu__link{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;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-align:center;-ms-flex-align:center;align-items:center;background:var(--fdMenu_Item_Background_Color);border-bottom:.0625rem solid var(--fdMenu_Item_Border_Bottom_Color);border-radius:inherit;min-height:var(--fdMenu_Link_Height);outline:none;padding-inline:var(--fdMenu_Item_Spacing_Left) var(--fdMenu_Item_Spacing_Right);text-decoration:none;width:100%}.fd-menu__link:after,.fd-menu__link:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__link.is-focus:after,.fd-menu__link:focus:after{border-color:var(--sapContent_FocusColor);border-radius:0!important;border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.125rem;pointer-events:none;position:absolute}.fd-menu__link.is-hover,.fd-menu__link:hover{--fdMenu_Item_Background_Color:var(--sapList_Hover_Background)}.fd-menu__link.is-selected,.fd-menu__link[aria-selected=true]{--fdMenu_Item_Background_Color:var(--sapList_SelectionBackgroundColor);--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Border_Bottom_Color:var(--sapList_SelectionBorderColor)}.fd-menu__link.is-selected.is-hover:not(:active,.is-active),.fd-menu__link.is-selected:hover:not(:active,.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active,.is-active),.fd-menu__link[aria-selected=true]:hover:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_Hover_SelectionBackground);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected_Hover)}.fd-menu__link.is-selected.is-focus,.fd-menu__link.is-selected:focus,.fd-menu__link[aria-selected=true].is-focus,.fd-menu__link[aria-selected=true]:focus{z-index:5}.fd-menu__link.is-selected.is-focus:after,.fd-menu__link.is-selected:focus:after,.fd-menu__link[aria-selected=true].is-focus:after,.fd-menu__link[aria-selected=true]:focus:after{bottom:.125rem}.fd-menu__link.is-active,.fd-menu__link:active{--fdMenu_Item_Background_Color:var(--sapList_Active_Background);--fdMenu_Icon_Color:var(--sapList_Active_TextColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Active);--fdMenu_Text_Color:var(--fdMenu_Text_Color_Active)}.fd-menu__link.is-active:after,.fd-menu__link:active:after{display:none}.fd-menu__link.is-active.is-focus,.fd-menu__link.is-active:focus,.fd-menu__link:active.is-focus,.fd-menu__link:active:focus{outline-color:var(--fdMenu_Active_State_Focus);z-index:5}.fd-menu__link.is-disabled,.fd-menu__link:disabled,.fd-menu__link[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-menu__link.is-disabled.is-focus,.fd-menu__link.is-disabled:focus,.fd-menu__link:disabled.is-focus,.fd-menu__link:disabled:focus,.fd-menu__link[aria-disabled=true].is-focus,.fd-menu__link[aria-disabled=true]:focus{z-index:5}.fd-menu__link.is-disabled.is-focus:after,.fd-menu__link.is-disabled:focus:after,.fd-menu__link:disabled.is-focus:after,.fd-menu__link:disabled:focus:after,.fd-menu__link[aria-disabled=true].is-focus:after,.fd-menu__link[aria-disabled=true]:focus:after{display:none}.fd-menu__link.has-child{--fdMenu_Item_Spacing_Right:0}.fd-menu__link.has-child.is-expanded:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_SelectionBackgroundColor);--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Border_Bottom_Color:var(--sapList_SelectionBorderColor)}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-hover:not(:active,.is-active),.fd-menu__link.has-child.is-expanded:not(:active,.is-active):hover:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-hover:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):hover:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_Hover_SelectionBackground);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected_Hover)}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):focus{z-index:5}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus:after,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):focus:after{bottom:.125rem}.fd-menu__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdMenu_Text_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;padding-block:0;padding-inline:0;text-align:start;text-shadow:var(--fdMenu_Text_Shadow);width:100%}.fd-menu__title:after,.fd-menu__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__title:has(+.fd-menu__input){min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu__title--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-menu__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-align:start;width:100%;-webkit-margin-after:.25rem;color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);margin-block-end:.25rem;text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__subtitle:after,.fd-menu__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__subtitle--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-menu__content{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;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.fd-menu__content:after,.fd-menu__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-after,.fd-menu__addon-before{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;color:var(--fdMenu_Icon_Color);font-size:var(--sapFontLargeSize);height:100%;max-width:var(--fdMenu_Icon_Width);min-width:var(--fdMenu_Icon_Width);text-shadow:var(--fdMenu_Text_Shadow);width:var(--fdMenu_Icon_Width)}.fd-menu__addon-after:after,.fd-menu__addon-after:before,.fd-menu__addon-before:after,.fd-menu__addon-before:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-after [class*=sap-icon],.fd-menu__addon-after[class*=sap-icon],.fd-menu__addon-before [class*=sap-icon],.fd-menu__addon-before[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-menu__addon-after--active,.fd-menu__addon-before--active{--fdMenu_Icon_Color:var(--sapContent_Selected_ForegroundColor)}.fd-menu__addon-after--submenu{font-size:var(--fdMenu_Affordance_Arrow_Size)}.fd-menu__addon-after--submenu:before{content:\"\\e066\"}.fd-menu__addon-after--submenu:before,.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{content:\"\\e067\"}.fd-menu__active-dot{background:var(--sapContent_Selected_ForegroundColor);border:0;border-radius:100%;-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;height:var(--fdMenu_Active_Dot_Size);line-height:normal;margin-block:0;margin-inline:0;min-width:var(--fdMenu_Active_Dot_Size);padding-block:0;padding-inline:0;width:var(--fdMenu_Active_Dot_Size)}.fd-menu__active-dot:after,.fd-menu__active-dot:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__checkmark [class*=sap-icon],.fd-menu__checkmark[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;color:var(--sapContent_Selected_ForegroundColor);font-size:inherit;font-size:1rem;line-height:1}.fd-menu__shortcut{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;-ms-flex-negative:0;color:var(--fdMenu_Shortcut_Color);flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;-webkit-padding-start:var(--fdMenu_Shortcut_Padding_Left);padding-inline-start:var(--fdMenu_Shortcut_Padding_Left)}.fd-menu__shortcut:after,.fd-menu__shortcut:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__shortcut:last-child{padding-inline:var(--fdMenu_Shortcut_Padding_Left) var(--fdMenu_Shortcut_Padding_Right)}.fd-menu--overflow{border-radius:var(--fdButton_Menu_Border_Radius);-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);overflow-y:scroll;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu--overflow.is-focus,.fd-menu--overflow:focus{outline:none;z-index:5}.fd-menu--overflow::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb:active,.fd-menu--overflow::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-corner,.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-corner,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu--overflow .fd-menu__list{-webkit-box-shadow:none;box-shadow:none}.fd-menu--overflow .fd-menu__item:first-child{border-top-right-radius:0}.fd-menu--overflow .fd-menu__item:first-child[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:first-child{border-top-left-radius:0;border-top-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-right-radius:0}.fd-menu--overflow .fd-menu__item:last-of-type[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-left-radius:0;border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--full-width{max-width:100%}.fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):first-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):first-child{-webkit-margin-start:var(--fdMenu_Icon_Width);margin-inline-start:var(--fdMenu_Icon_Width)}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):last-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):last-child{-webkit-margin-end:var(--fdMenu_Text_Spacing_Right);margin-inline-end:var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):only-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):only-child{margin-inline:var(--fdMenu_Icon_Width) var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left:1rem;--fdMenu_Item_Spacing_Right:1rem}.fd-menu--icons .fd-menu__sublist .fd-menu__title:first-child{-webkit-margin-start:0;margin-inline-start:0}.fd-menu--icons .fd-menu__sublist .fd-menu__title:last-child{-webkit-margin-end:0;margin-inline-end:0}.fd-menu--icons .fd-menu__sublist .fd-menu__title:only-child{margin-inline:0}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:first-child{-webkit-margin-start:var(--fdMenu_Icon_Width);margin-inline-start:var(--fdMenu_Icon_Width)}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:last-child{-webkit-margin-end:var(--fdMenu_Text_Spacing_Right);margin-inline-end:var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:only-child{margin-inline:var(--fdMenu_Icon_Width) var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__input,.fd-menu--icons input{margin-inline:var(--fdMenu_Text_Spacing_Right) var(--fdMenu_Text_Spacing_Right)}.fd-menu--mobile{max-width:100%;width:100%;--fdMenu_Icon_Width:2.75rem;--fdMenu_Item_Spacing_Left:1rem;--fdMenu_Item_Spacing_Right:1rem;--fdMenu_Shortcut_Padding_Right:1rem;--fdMenu_Text_Spacing_Right:1rem}.fd-menu--mobile .fd-menu__list,.fd-menu--mobile .fd-menu__sublist{border-radius:0;-webkit-box-shadow:none;box-shadow:none;margin-block:0;margin-inline:0;position:static}.fd-menu--mobile .fd-menu__list .fd-menu__item,.fd-menu--mobile .fd-menu__sublist .fd-menu__item{border-radius:0}.fd-menu--mobile.fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--mobile.fd-menu--icons .fd-menu__input,.fd-menu--mobile.fd-menu--icons input{margin-inline:1rem}.fd-menu[class*=-compact],.fd-menu[class*=-condensed],[class*=-compact] .fd-menu:not([class*=-cozy]),[class*=-condensed] .fd-menu:not([class*=-cozy]){--fdMenu_Icon_Width:2rem;--fdMenu_Link_Height:2rem;--fdMenu_Item_Spacing_Left:.5rem;--fdMenu_Item_Spacing_Right:.5rem;--fdMenu_Shortcut_Padding_Right:.5rem;--fdMenu_Text_Spacing_Right:.5rem}.fd-menu[class*=-compact].fd-menu--icons,.fd-menu[class*=-condensed].fd-menu--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__input,.fd-menu[class*=-compact].fd-menu--icons input,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__input,.fd-menu[class*=-condensed].fd-menu--icons input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons input{margin-inline:.5rem}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left:.5rem;--fdMenu_Item_Spacing_Right:.5rem}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.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{min-width:20rem;overflow:visible;width:20rem}.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__header-content-area{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;padding:.5rem;width:100%}.fd-user-menu__header-content-area:after,.fd-user-menu__header-content-area: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;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--fdUserMenu_User_Name_Font_Family);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1.4rem;margin-block:0;margin-inline:0;max-width:100%;padding-block:0;padding-inline:0;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__user-name--truncate{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.8rem;overflow:hidden;text-overflow:ellipsis;white-space:normal}.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%;padding-block:0;padding-inline:0;white-space:normal;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__subline--truncate,.fd-user-menu__user-info--truncate,.fd-user-menu__user-role--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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{border-radius:0}.fd-user-menu .fd-user-menu__menu-list .fd-menu__subtitle:not(.fd-menu__subtitle--truncate),.fd-user-menu .fd-user-menu__menu-list .fd-menu__title:not(.fd-menu__title--truncate){white-space:normal}.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 .fd-menu[class*=-compact],.fd-user-menu .fd-menu[class*=-condensed],[class*=-compact] .fd-user-menu .fd-menu:not([class*=-cozy]),[class*=-condensed] .fd-user-menu .fd-menu:not([class*=-cozy]){--fdMenu_Icon_Width:2.5rem;--fdMenu_Link_Height:2.5rem;--fdMenu_Item_Spacing_Left:.75rem;--fdMenu_Item_Spacing_Right:.75rem}.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(--sapTitleColor);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(--sapContent_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{background:transparent}.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-control{display:flex;width:fit-content;height:fit-content;align-items:center;border-radius:50rem;justify-content:center}fd-user-menu-control:is(:focus){outline-offset:.0625rem;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.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;width:20rem;min-width:20rem;max-width:20rem}.fd-user-menu__body:has(.fd-user-menu__details-view){padding:0}.fd-user-menu__header-container{max-width:100%}.fd-user-menu .fd-popover__body>.fd-scrollbar{width:20rem;min-width:20rem;max-width:20rem}.fd-user-menu__scroll-header{width:20rem;min-width:20rem;max-width:20rem;position:absolute;top:0;z-index:10;overflow:hidden;border-top-left-radius:var(--fdPopover_Border_Radius);border-top-right-radius:var(--fdPopover_Border_Radius);background:var(--sapPageHeader_Background);transition:all .15s ease}.fd-user-menu__scroll-header.hidden{opacity:0;pointer-events:none}.fd-user-menu__scroll-header-element{transition:all .15s ease}.fd-user-menu__scroll-header-element.hidden{opacity:0;pointer-events:none}.fd-user-menu__footer .fd-bar.fd-bar--footer{position:sticky;bottom:0}.fd-user-menu__popover-wrapper{overflow:auto;display:flex;flex-direction:column;overscroll-behavior:contain;scroll-behavior:smooth;overflow-anchor:none}.fd-user-menu__body{overflow:auto;flex:1}.fd-user-menu__footer{min-height:2rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/user-menu.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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"] }]
|
|
1196
|
+
], 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 [disableScrollbar]=\"true\"\n [noArrow]=\"false\"\n >\n <fd-popover-control>\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n </fd-popover-control>\n <fd-popover-body fd-user-menu-popover-control>\n <div class=\"fd-user-menu__popover-wrapper\">\n <div\n fd-popover-body-header\n class=\"fd-user-menu__scroll-header\"\n [class.hidden]=\"isUserNameVisible()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n\n <div fd-popover-body-footer>\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n </div>\n </fd-popover-body>\n </fd-popover>\n} @else {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n\n <ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n <fd-dialog-header>\n @if (userMenuBody()?.bodyHeader()) {\n <ng-template fdkTemplate=\"header\">\n <ng-container\n *ngTemplateOutlet=\"userMenuBody()?.bodyHeader() ?? null; context: { dialogRef: dialog }\"\n >\n </ng-container>\n </ng-template>\n }\n </fd-dialog-header>\n <fd-dialog-body style=\"padding: 0\">\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </fd-dialog-body>\n <fd-dialog-footer>\n <ng-template fdkTemplate=\"customFooter\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </ng-template>\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 #header>\n <div fd-popover-body-header>\n <div fd-bar barDesign=\"header\">\n <div fd-bar-middle>\n <fd-bar-element>\n <div\n class=\"fd-user-menu__user-name fd-user-menu__user-name--truncate\"\n [innerHTML]=\"userNameContent()\"\n ></div>\n </fd-bar-element>\n </div>\n </div>\n </div>\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: [".fd-dialog__body{--fdButton_Menu_Border_Radius:0}.fd-menu{--fdMenu_Icon_Width:2.25rem;--fdMenu_Link_Height:2.75rem;--fdMenu_Item_Spacing_Left:.75rem;--fdMenu_Item_Spacing_Right:.75rem;--fdMenu_Item_Border_Bottom_Color:transparent;--fdMenu_Shortcut_Padding_Left:1rem;--fdMenu_Shortcut_Padding_Right:.75rem;--fdMenu_Text_Spacing_Right:.75rem;--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Regular);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Background_Color:var(--sapList_Background);--fdMenu_Active_Dot_Size:.75rem;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;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu:after,.fd-menu:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{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;border-radius:var(--fdButton_Menu_Border_Radius);-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;max-width:20rem}.fd-menu__list:after,.fd-menu__list:before,.fd-menu__sublist:after,.fd-menu__sublist:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list--no-shadow,.fd-menu__sublist--no-shadow{-webkit-box-shadow:none;box-shadow:none}.fd-menu__sublist{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;left:100%;line-height:normal;margin-block:0;margin-block:.25rem 0;margin-inline:0;margin-inline:-.25rem 0;min-width:100%;padding-block:0;padding-inline:0;position:absolute;top:0;z-index:2}.fd-menu__sublist:after,.fd-menu__sublist:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__sublist[dir=rtl],[dir=rtl] .fd-menu__sublist{left:auto;right:100%}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{position:relative;width:100%}.fd-menu__list--overflow{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-y:scroll;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow.is-focus,.fd-menu__list--overflow:focus{outline:none;z-index:5}.fd-menu__list--overflow::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb:active,.fd-menu__list--overflow::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-corner,.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-corner,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu__separator{background-color:var(--sapGroup_ContentBorderColor);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;height:.0625rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:100%}.fd-menu__separator:after,.fd-menu__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item{background-color:var(--sapList_Background);border:0;border-radius: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;max-width:100%;padding-block:0;padding-inline:0;position:relative}.fd-menu__item:after,.fd-menu__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item:first-child,.fd-menu__item:first-child .fd-menu__link:after{border-top-left-radius:var(--fdButton_Menu_Border_Radius);border-top-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item:last-of-type,.fd-menu__item:last-of-type .fd-menu__link:after{border-bottom-left-radius:var(--fdButton_Menu_Border_Radius);border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item.has-separator{border-bottom:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-menu__link{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;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-align:center;-ms-flex-align:center;align-items:center;background:var(--fdMenu_Item_Background_Color);border-bottom:.0625rem solid var(--fdMenu_Item_Border_Bottom_Color);border-radius:inherit;min-height:var(--fdMenu_Link_Height);outline:none;padding-inline:var(--fdMenu_Item_Spacing_Left) var(--fdMenu_Item_Spacing_Right);text-decoration:none;width:100%}.fd-menu__link:after,.fd-menu__link:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__link.is-focus:after,.fd-menu__link:focus:after{border-color:var(--sapContent_FocusColor);border-radius:0!important;border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.125rem;pointer-events:none;position:absolute}.fd-menu__link.is-hover,.fd-menu__link:hover{--fdMenu_Item_Background_Color:var(--sapList_Hover_Background)}.fd-menu__link.is-selected,.fd-menu__link[aria-selected=true]{--fdMenu_Item_Background_Color:var(--sapList_SelectionBackgroundColor);--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Border_Bottom_Color:var(--sapList_SelectionBorderColor)}.fd-menu__link.is-selected.is-hover:not(:active,.is-active),.fd-menu__link.is-selected:hover:not(:active,.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active,.is-active),.fd-menu__link[aria-selected=true]:hover:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_Hover_SelectionBackground);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected_Hover)}.fd-menu__link.is-selected.is-focus,.fd-menu__link.is-selected:focus,.fd-menu__link[aria-selected=true].is-focus,.fd-menu__link[aria-selected=true]:focus{z-index:5}.fd-menu__link.is-selected.is-focus:after,.fd-menu__link.is-selected:focus:after,.fd-menu__link[aria-selected=true].is-focus:after,.fd-menu__link[aria-selected=true]:focus:after{bottom:.125rem}.fd-menu__link.is-active,.fd-menu__link:active{--fdMenu_Item_Background_Color:var(--sapList_Active_Background);--fdMenu_Icon_Color:var(--sapList_Active_TextColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Active);--fdMenu_Text_Color:var(--fdMenu_Text_Color_Active)}.fd-menu__link.is-active:after,.fd-menu__link:active:after{display:none}.fd-menu__link.is-active.is-focus,.fd-menu__link.is-active:focus,.fd-menu__link:active.is-focus,.fd-menu__link:active:focus{outline-color:var(--fdMenu_Active_State_Focus);z-index:5}.fd-menu__link.is-disabled,.fd-menu__link:disabled,.fd-menu__link[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-menu__link.is-disabled.is-focus,.fd-menu__link.is-disabled:focus,.fd-menu__link:disabled.is-focus,.fd-menu__link:disabled:focus,.fd-menu__link[aria-disabled=true].is-focus,.fd-menu__link[aria-disabled=true]:focus{z-index:5}.fd-menu__link.is-disabled.is-focus:after,.fd-menu__link.is-disabled:focus:after,.fd-menu__link:disabled.is-focus:after,.fd-menu__link:disabled:focus:after,.fd-menu__link[aria-disabled=true].is-focus:after,.fd-menu__link[aria-disabled=true]:focus:after{display:none}.fd-menu__link.has-child{--fdMenu_Item_Spacing_Right:0}.fd-menu__link.has-child.is-expanded:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_SelectionBackgroundColor);--fdMenu_Icon_Color:var(--sapContent_NonInteractiveIconColor);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected);--fdMenu_Text_Color:var(--sapList_TextColor);--fdMenu_Item_Border_Bottom_Color:var(--sapList_SelectionBorderColor)}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-hover:not(:active,.is-active),.fd-menu__link.has-child.is-expanded:not(:active,.is-active):hover:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-hover:not(:active,.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):hover:not(:active,.is-active){--fdMenu_Item_Background_Color:var(--sapList_Hover_SelectionBackground);--fdMenu_Shortcut_Color:var(--fdMenu_Shortcut_Color_Selected_Hover)}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):focus{z-index:5}.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus:after,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active):focus:after{bottom:.125rem}.fd-menu__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdMenu_Text_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;padding-block:0;padding-inline:0;text-align:start;text-shadow:var(--fdMenu_Text_Shadow);width:100%}.fd-menu__title:after,.fd-menu__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__title:has(+.fd-menu__input){min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu__title--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-menu__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-align:start;width:100%;-webkit-margin-after:.25rem;color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);margin-block-end:.25rem;text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__subtitle:after,.fd-menu__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__subtitle--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-menu__content{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;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.fd-menu__content:after,.fd-menu__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-after,.fd-menu__addon-before{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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;color:var(--fdMenu_Icon_Color);font-size:var(--sapFontLargeSize);height:100%;max-width:var(--fdMenu_Icon_Width);min-width:var(--fdMenu_Icon_Width);text-shadow:var(--fdMenu_Text_Shadow);width:var(--fdMenu_Icon_Width)}.fd-menu__addon-after:after,.fd-menu__addon-after:before,.fd-menu__addon-before:after,.fd-menu__addon-before:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-after [class*=sap-icon],.fd-menu__addon-after[class*=sap-icon],.fd-menu__addon-before [class*=sap-icon],.fd-menu__addon-before[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-menu__addon-after--active,.fd-menu__addon-before--active{--fdMenu_Icon_Color:var(--sapContent_Selected_ForegroundColor)}.fd-menu__addon-after--submenu{font-size:var(--fdMenu_Affordance_Arrow_Size)}.fd-menu__addon-after--submenu:before{content:\"\\e066\"}.fd-menu__addon-after--submenu:before,.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{content:\"\\e067\"}.fd-menu__active-dot{background:var(--sapContent_Selected_ForegroundColor);border:0;border-radius:100%;-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;height:var(--fdMenu_Active_Dot_Size);line-height:normal;margin-block:0;margin-inline:0;min-width:var(--fdMenu_Active_Dot_Size);padding-block:0;padding-inline:0;width:var(--fdMenu_Active_Dot_Size)}.fd-menu__active-dot:after,.fd-menu__active-dot:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__checkmark [class*=sap-icon],.fd-menu__checkmark[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;color:var(--sapContent_Selected_ForegroundColor);font-size:inherit;font-size:1rem;line-height:1}.fd-menu__shortcut{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;-ms-flex-negative:0;color:var(--fdMenu_Shortcut_Color);flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;-webkit-padding-start:var(--fdMenu_Shortcut_Padding_Left);padding-inline-start:var(--fdMenu_Shortcut_Padding_Left)}.fd-menu__shortcut:after,.fd-menu__shortcut:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__shortcut:last-child{padding-inline:var(--fdMenu_Shortcut_Padding_Left) var(--fdMenu_Shortcut_Padding_Right)}.fd-menu--overflow{border-radius:var(--fdButton_Menu_Border_Radius);-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);overflow-y:scroll;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu--overflow.is-focus,.fd-menu--overflow:focus{outline:none;z-index:5}.fd-menu--overflow::-webkit-scrollbar{height:var(--fdScrollbar_Dimension);width:var(--fdScrollbar_Dimension)}.fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow::-webkit-scrollbar-track{background-color:var(--fdScrollbar_Track_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb{background-color:transparent;border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb:active,.fd-menu--overflow::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);box-shadow:inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color)}.fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow::-webkit-scrollbar-track{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-corner,.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-track,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-corner,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-track{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu--overflow .fd-menu__list{-webkit-box-shadow:none;box-shadow:none}.fd-menu--overflow .fd-menu__item:first-child{border-top-right-radius:0}.fd-menu--overflow .fd-menu__item:first-child[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:first-child{border-top-left-radius:0;border-top-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-right-radius:0}.fd-menu--overflow .fd-menu__item:last-of-type[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-left-radius:0;border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--full-width{max-width:100%}.fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):first-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):first-child{-webkit-margin-start:var(--fdMenu_Icon_Width);margin-inline-start:var(--fdMenu_Icon_Width)}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):last-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):last-child{-webkit-margin-end:var(--fdMenu_Text_Spacing_Right);margin-inline-end:var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__content:not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__content):only-child,.fd-menu--icons .fd-menu__title:not(.fd-menu__content>.fd-menu__title):not(.fd-menu__sublist:not(.fd-menu__sublist--icons) .fd-menu__title):only-child{margin-inline:var(--fdMenu_Icon_Width) var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left:1rem;--fdMenu_Item_Spacing_Right:1rem}.fd-menu--icons .fd-menu__sublist .fd-menu__title:first-child{-webkit-margin-start:0;margin-inline-start:0}.fd-menu--icons .fd-menu__sublist .fd-menu__title:last-child{-webkit-margin-end:0;margin-inline-end:0}.fd-menu--icons .fd-menu__sublist .fd-menu__title:only-child{margin-inline:0}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:first-child{-webkit-margin-start:var(--fdMenu_Icon_Width);margin-inline-start:var(--fdMenu_Icon_Width)}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:last-child{-webkit-margin-end:var(--fdMenu_Text_Spacing_Right);margin-inline-end:var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons .fd-menu__title:only-child{margin-inline:var(--fdMenu_Icon_Width) var(--fdMenu_Text_Spacing_Right)}.fd-menu--icons .fd-menu__input,.fd-menu--icons input{margin-inline:var(--fdMenu_Text_Spacing_Right) var(--fdMenu_Text_Spacing_Right)}.fd-menu--mobile{max-width:100%;width:100%;--fdMenu_Icon_Width:2.75rem;--fdMenu_Item_Spacing_Left:1rem;--fdMenu_Item_Spacing_Right:1rem;--fdMenu_Shortcut_Padding_Right:1rem;--fdMenu_Text_Spacing_Right:1rem}.fd-menu--mobile .fd-menu__list,.fd-menu--mobile .fd-menu__sublist{border-radius:0;-webkit-box-shadow:none;box-shadow:none;margin-block:0;margin-inline:0;position:static}.fd-menu--mobile .fd-menu__list .fd-menu__item,.fd-menu--mobile .fd-menu__sublist .fd-menu__item{border-radius:0}.fd-menu--mobile.fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu--mobile.fd-menu--icons .fd-menu__input,.fd-menu--mobile.fd-menu--icons input{margin-inline:1rem}.fd-menu[class*=-compact],.fd-menu[class*=-condensed],[class*=-compact] .fd-menu:not([class*=-cozy]),[class*=-condensed] .fd-menu:not([class*=-cozy]){--fdMenu_Icon_Width:2rem;--fdMenu_Link_Height:2rem;--fdMenu_Item_Spacing_Left:.5rem;--fdMenu_Item_Spacing_Right:.5rem;--fdMenu_Shortcut_Padding_Right:.5rem;--fdMenu_Text_Spacing_Right:.5rem}.fd-menu[class*=-compact].fd-menu--icons,.fd-menu[class*=-condensed].fd-menu--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__input,.fd-menu[class*=-compact].fd-menu--icons input,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__input,.fd-menu[class*=-condensed].fd-menu--icons input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons input{margin-inline:.5rem}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left:.5rem;--fdMenu_Item_Spacing_Right:.5rem}.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons{--fdMenu_Item_Spacing_Left:0;--fdMenu_Item_Spacing_Right:0}.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{min-width:20rem;overflow:visible;width:20rem}.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__header-content-area{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;padding:.5rem;width:100%}.fd-user-menu__header-content-area:after,.fd-user-menu__header-content-area: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;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--fdUserMenu_User_Name_Font_Family);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1.4rem;margin-block:0;margin-inline:0;max-width:100%;padding-block:0;padding-inline:0;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__user-name--truncate{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.8rem;overflow:hidden;text-overflow:ellipsis;white-space:normal}.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%;padding-block:0;padding-inline:0;white-space:normal;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__subline--truncate,.fd-user-menu__user-info--truncate,.fd-user-menu__user-role--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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{border-radius:0}.fd-user-menu .fd-user-menu__menu-list .fd-menu__subtitle:not(.fd-menu__subtitle--truncate),.fd-user-menu .fd-user-menu__menu-list .fd-menu__title:not(.fd-menu__title--truncate){white-space:normal}.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 .fd-menu[class*=-compact],.fd-user-menu .fd-menu[class*=-condensed],[class*=-compact] .fd-user-menu .fd-menu:not([class*=-cozy]),[class*=-condensed] .fd-user-menu .fd-menu:not([class*=-cozy]){--fdMenu_Icon_Width:2.5rem;--fdMenu_Link_Height:2.5rem;--fdMenu_Item_Spacing_Left:.75rem;--fdMenu_Item_Spacing_Right:.75rem}.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(--sapTitleColor);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(--sapContent_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{background:transparent}.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-control{display:flex;width:fit-content;height:fit-content;align-items:center;border-radius:50rem;justify-content:center}fd-user-menu-control:is(:focus){outline-offset:.0625rem;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.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;width:20rem;min-width:20rem;max-width:20rem}.fd-user-menu__body:has(.fd-user-menu__details-view){padding:0}.fd-user-menu__header-container{max-width:100%}.fd-user-menu .fd-popover__body>.fd-scrollbar{width:20rem;min-width:20rem;max-width:20rem}.fd-user-menu__scroll-header{width:20rem;min-width:20rem;max-width:20rem;position:absolute;top:0;z-index:10;overflow:hidden;border-top-left-radius:var(--fdPopover_Border_Radius);border-top-right-radius:var(--fdPopover_Border_Radius);background:var(--sapPageHeader_Background);transition:all .15s ease}.fd-user-menu__scroll-header.hidden{opacity:0;pointer-events:none}.fd-user-menu__scroll-header-element{transition:all .15s ease}.fd-user-menu__scroll-header-element.hidden{opacity:0;pointer-events:none}.fd-user-menu__footer .fd-bar.fd-bar--footer{position:sticky;bottom:0}.fd-user-menu__popover-wrapper{overflow:auto;display:flex;flex-direction:column;overscroll-behavior:contain;scroll-behavior:smooth;overflow-anchor:none}.fd-user-menu__body{overflow:auto;flex:1}.fd-user-menu__footer{min-height:2rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/user-menu.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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"] }]
|
|
924
1197
|
}], ctorParameters: () => [], propDecorators: { isOpenChange: [{ type: i0.Output, args: ["isOpenChange"] }], mobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobile", required: false }] }], userMenuControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UserMenuControlComponent), { isSignal: true }] }], userNameEl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UserMenuUserNameDirective), { ...{ read: ElementRef }, isSignal: true }] }], userMenuControlElement: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UserMenuControlElementDirective), { ...{
|
|
925
1198
|
descendants: true,
|
|
926
1199
|
read: ElementRef
|
|
927
|
-
}, isSignal: true }] }], userMenuBody: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UserMenuBodyComponent), { ...{ descendants: true }, isSignal: true }] }], _listItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UserMenuListItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
1200
|
+
}, isSignal: true }] }], userMenuBody: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UserMenuBodyComponent), { ...{ descendants: true }, isSignal: true }] }], dialogTemplate: [{ type: i0.ViewChild, args: ['dialogTemplate', { isSignal: true }] }], _listItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UserMenuListItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
928
1201
|
|
|
929
1202
|
class UserMenuHeaderContainerDirective {
|
|
930
1203
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuHeaderContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|