@fundamental-ngx/core 0.63.0-rc.8 → 0.63.0
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.
- package/fesm2022/fundamental-ngx-core-action-bar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-bar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-button.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-calendar.mjs +52 -47
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-card.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-card.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-carousel.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-checkbox.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-combobox.mjs +42 -4
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-date-picker.mjs +7 -6
- package/fesm2022/fundamental-ngx-core-date-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs +12 -12
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime.mjs +295 -100
- package/fesm2022/fundamental-ngx-core-datetime.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dialog.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-dynamic-side-content.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-facets.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-feed-input.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-file-uploader.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-flexible-column-layout.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-form.mjs +19 -16
- package/fesm2022/fundamental-ngx-core-form.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-generic-tag.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-grid-list.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-icon.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-info-label.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-input-group.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-layout-grid.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-link.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-list.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-message-box.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-message-page.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-message-strip.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-message-strip.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-toast.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-input.mjs +45 -8
- package/fesm2022/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-nested-list.mjs +1 -1
- package/fesm2022/fundamental-ngx-core-nested-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-notification.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-attribute.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-marker.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-status.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs +1 -1
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-pagination.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-panel.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-popover.mjs +110 -6
- package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-product-switch.mjs +3 -3
- package/fesm2022/fundamental-ngx-core-product-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-progress-indicator.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-progress-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-quick-view.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-radio.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-select.mjs +9 -3
- package/fesm2022/fundamental-ngx-core-select.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-settings.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-shellbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-side-navigation.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-skeleton.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-slider.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-slider.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-split-button.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-step-input.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-switch.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-table.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-tabs.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-text.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-tile.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-time-picker.mjs +8 -17
- package/fesm2022/fundamental-ngx-core-time-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time.mjs +8 -16
- package/fesm2022/fundamental-ngx-core-time.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-title.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-token.mjs +24 -14
- package/fesm2022/fundamental-ngx-core-token.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-toolbar.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-toolbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tree.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-user-menu.mjs +114 -8
- package/fesm2022/fundamental-ngx-core-user-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-wizard.mjs +2 -2
- package/package.json +5 -5
- package/types/fundamental-ngx-core-calendar.d.ts +5 -12
- package/types/fundamental-ngx-core-combobox.d.ts +9 -1
- package/types/fundamental-ngx-core-datetime-picker.d.ts +0 -2
- package/types/fundamental-ngx-core-datetime.d.ts +109 -68
- package/types/fundamental-ngx-core-form.d.ts +2 -0
- package/types/fundamental-ngx-core-multi-input.d.ts +22 -4
- package/types/fundamental-ngx-core-popover.d.ts +378 -319
- package/types/fundamental-ngx-core-time-picker.d.ts +2 -8
- package/types/fundamental-ngx-core-time.d.ts +1 -7
- package/types/fundamental-ngx-core-token.d.ts +8 -2
- package/types/fundamental-ngx-core-user-menu.d.ts +23 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, Directive, EventEmitter, output, signal, viewChild, inject, ElementRef, Injector, ChangeDetectorRef, computed, afterNextRender, HostListener, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild,
|
|
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
5
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -37,6 +37,8 @@ let uniqueId = 0;
|
|
|
37
37
|
let uniqueTextId = 0;
|
|
38
38
|
let uniqueSubtitleId = 0;
|
|
39
39
|
class UserMenuListItemComponent {
|
|
40
|
+
/** @hidden Event name for child menu item state changes */
|
|
41
|
+
static { this.STATE_CHANGE_EVENT = 'fdMenuItemStateChange'; }
|
|
40
42
|
constructor() {
|
|
41
43
|
/** Event emitter for isOpenChange event that controls the submenu popover body */
|
|
42
44
|
this.isOpenChange = new EventEmitter();
|
|
@@ -88,6 +90,8 @@ class UserMenuListItemComponent {
|
|
|
88
90
|
this._injector = inject(Injector);
|
|
89
91
|
/** @hidden */
|
|
90
92
|
this._changeDetectionRef = inject(ChangeDetectorRef);
|
|
93
|
+
/** @hidden */
|
|
94
|
+
this._destroyRef = inject(DestroyRef);
|
|
91
95
|
/** @hidden RTL service for direction detection */
|
|
92
96
|
this._rtlService = inject(RtlService, {
|
|
93
97
|
optional: true
|
|
@@ -98,8 +102,19 @@ class UserMenuListItemComponent {
|
|
|
98
102
|
this._keyboardTriggered = false;
|
|
99
103
|
/** @hidden Timer for delayed close on mouseleave */
|
|
100
104
|
this._hoverCloseTimer = null;
|
|
105
|
+
/** @hidden Track number of open child submenus */
|
|
106
|
+
this._openChildCount = 0;
|
|
107
|
+
/** @hidden Flag indicating mouse has left the popover and close is pending */
|
|
108
|
+
this._pendingClose = false;
|
|
109
|
+
/** @hidden Cleanup function for child state listener */
|
|
110
|
+
this._childStateListenerCleanup = null;
|
|
101
111
|
/** @hidden Grace period in ms before closing submenu on mouseleave */
|
|
102
112
|
this._hoverCloseDelay = 150;
|
|
113
|
+
this._destroyRef.onDestroy(() => {
|
|
114
|
+
this._childStateListenerCleanup?.();
|
|
115
|
+
this._childStateListenerCleanup = null;
|
|
116
|
+
this._cancelHoverCloseTimer();
|
|
117
|
+
});
|
|
103
118
|
}
|
|
104
119
|
/** @hidden */
|
|
105
120
|
focusHandler() {
|
|
@@ -169,9 +184,26 @@ class UserMenuListItemComponent {
|
|
|
169
184
|
/** @hidden Cancel close when mouse enters the submenu popover body */
|
|
170
185
|
onSubmenuMouseEnter() {
|
|
171
186
|
this._cancelHoverCloseTimer();
|
|
187
|
+
this._pendingClose = false;
|
|
172
188
|
}
|
|
173
189
|
/** @hidden Schedule close when mouse leaves the submenu popover body */
|
|
174
|
-
onSubmenuMouseLeave() {
|
|
190
|
+
onSubmenuMouseLeave(event) {
|
|
191
|
+
if (!this.hasSubmenu() || this.mobile()) {
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
194
|
+
const relatedTarget = event.relatedTarget;
|
|
195
|
+
// Navigate: popover() -> popoverBody signal -> PopoverBodyComponent -> ElementRef -> nativeElement
|
|
196
|
+
const thisItemsPopoverBody = this.popover()?.popoverBody?.()?._elementRef?.nativeElement;
|
|
197
|
+
// Don't close if mouse is still in this item's popover
|
|
198
|
+
if (thisItemsPopoverBody && relatedTarget && thisItemsPopoverBody.contains(relatedTarget)) {
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
// Mark that we want to close, but wait if children are open
|
|
202
|
+
this._pendingClose = true;
|
|
203
|
+
// If any child submenu is open, wait for it to close
|
|
204
|
+
if (this._openChildCount > 0) {
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
175
207
|
this._scheduleHoverClose();
|
|
176
208
|
}
|
|
177
209
|
/** Handles submenu selection in mobile mode */
|
|
@@ -203,6 +235,19 @@ class UserMenuListItemComponent {
|
|
|
203
235
|
this._keyboardTriggered = false;
|
|
204
236
|
this.isOpen.set(isOpen);
|
|
205
237
|
this.isOpenChange.emit(isOpen);
|
|
238
|
+
// Notify parent item (if any) about child state change
|
|
239
|
+
this._notifyParentOfStateChange(isOpen);
|
|
240
|
+
// Setup listener for child state changes if opening
|
|
241
|
+
if (isOpen) {
|
|
242
|
+
this._setupChildStateListener(popoverBodyEl?._elementRef.nativeElement);
|
|
243
|
+
}
|
|
244
|
+
else {
|
|
245
|
+
// Reset state when closing
|
|
246
|
+
this._openChildCount = 0;
|
|
247
|
+
this._pendingClose = false;
|
|
248
|
+
this._childStateListenerCleanup?.();
|
|
249
|
+
this._childStateListenerCleanup = null;
|
|
250
|
+
}
|
|
206
251
|
afterNextRender(() => {
|
|
207
252
|
this.isOpen() ? linkElement.classList.add('is-selected') : linkElement.classList.remove('is-selected');
|
|
208
253
|
if (keyboardTriggered && firstTabbableElement && this.isOpen()) {
|
|
@@ -214,6 +259,45 @@ class UserMenuListItemComponent {
|
|
|
214
259
|
}
|
|
215
260
|
this._changeDetectionRef.detectChanges();
|
|
216
261
|
}
|
|
262
|
+
/** @hidden Notify parent menu item of this item's state change */
|
|
263
|
+
_notifyParentOfStateChange(isOpen) {
|
|
264
|
+
// Dispatch custom event that bubbles up to parent popover bodies
|
|
265
|
+
const event = new CustomEvent(UserMenuListItemComponent.STATE_CHANGE_EVENT, {
|
|
266
|
+
detail: { isOpen },
|
|
267
|
+
bubbles: true
|
|
268
|
+
});
|
|
269
|
+
this._elementRef.nativeElement.dispatchEvent(event);
|
|
270
|
+
}
|
|
271
|
+
/** @hidden Setup listener for child menu item state changes */
|
|
272
|
+
_setupChildStateListener(popoverBody) {
|
|
273
|
+
if (!popoverBody) {
|
|
274
|
+
return;
|
|
275
|
+
}
|
|
276
|
+
// Clean up previous listener if any
|
|
277
|
+
this._childStateListenerCleanup?.();
|
|
278
|
+
// Listen for state changes from child menu items
|
|
279
|
+
const handleChildStateChange = (event) => {
|
|
280
|
+
const customEvent = event;
|
|
281
|
+
// Stop propagation to prevent parent popover bodies from double-counting
|
|
282
|
+
// this event. Each level re-emits its own state change via _notifyParentOfStateChange.
|
|
283
|
+
event.stopPropagation();
|
|
284
|
+
if (customEvent.detail.isOpen) {
|
|
285
|
+
this._openChildCount++;
|
|
286
|
+
}
|
|
287
|
+
else {
|
|
288
|
+
this._openChildCount = Math.max(0, this._openChildCount - 1);
|
|
289
|
+
// If no more children are open and we have a pending close, execute it
|
|
290
|
+
if (this._openChildCount === 0 && this._pendingClose) {
|
|
291
|
+
this._scheduleHoverClose();
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
};
|
|
295
|
+
popoverBody.addEventListener(UserMenuListItemComponent.STATE_CHANGE_EVENT, handleChildStateChange);
|
|
296
|
+
// Store cleanup function (destroyed via constructor-registered onDestroy)
|
|
297
|
+
this._childStateListenerCleanup = () => {
|
|
298
|
+
popoverBody.removeEventListener(UserMenuListItemComponent.STATE_CHANGE_EVENT, handleChildStateChange);
|
|
299
|
+
};
|
|
300
|
+
}
|
|
217
301
|
/** @hidden Schedule a delayed close of the submenu popover */
|
|
218
302
|
_scheduleHoverClose() {
|
|
219
303
|
this._cancelHoverCloseTimer();
|
|
@@ -222,6 +306,7 @@ class UserMenuListItemComponent {
|
|
|
222
306
|
if (popoverInstance && this.isOpen()) {
|
|
223
307
|
popoverInstance.close();
|
|
224
308
|
}
|
|
309
|
+
this._pendingClose = false;
|
|
225
310
|
}, this._hoverCloseDelay);
|
|
226
311
|
}
|
|
227
312
|
/** @hidden Cancel any pending hover close timer */
|
|
@@ -232,7 +317,7 @@ class UserMenuListItemComponent {
|
|
|
232
317
|
}
|
|
233
318
|
}
|
|
234
319
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
235
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UserMenuListItemComponent, isStandalone: true, selector: "[fd-user-menu-list-item]", inputs: { uniqueId: { classPropertyName: "uniqueId", publicName: "uniqueId", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, 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()\"\n >\n <ng-container
|
|
320
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UserMenuListItemComponent, isStandalone: true, selector: "[fd-user-menu-list-item]", inputs: { uniqueId: { classPropertyName: "uniqueId", publicName: "uniqueId", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, 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 }); }
|
|
236
321
|
}
|
|
237
322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuListItemComponent, decorators: [{
|
|
238
323
|
type: Component,
|
|
@@ -243,8 +328,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
243
328
|
'[attr.aria-labelledby]': 'textId()',
|
|
244
329
|
'(mouseenter)': 'onHostMouseEnter()',
|
|
245
330
|
'(mouseleave)': 'onHostMouseLeave()'
|
|
246
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PopoverBodyComponent, PopoverComponent, PopoverControlComponent, CommonModule], template: "@if (hasSubmenu()) {\n @if (mobile()) {\n <button\n role=\"menuitem\"\n class=\"fd-menu__link\"\n [class.is-selected]=\"selected()\"\n [tabIndex]=\"_tabIndex$()\"\n (click)=\"onShowDetailsView()\"\n >\n @if (icon()) {\n <span class=\"fd-menu__addon-before\">\n <i [class]=\"'sap-icon--' + icon()\" role=\"presentation\"></i>\n </span>\n }\n\n <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()\"\n >\n <ng-container
|
|
247
|
-
}], propDecorators: { isOpenChange: [{
|
|
331
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PopoverBodyComponent, PopoverComponent, PopoverControlComponent, CommonModule], template: "@if (hasSubmenu()) {\n @if (mobile()) {\n <button\n role=\"menuitem\"\n class=\"fd-menu__link\"\n [class.is-selected]=\"selected()\"\n [tabIndex]=\"_tabIndex$()\"\n (click)=\"onShowDetailsView()\"\n >\n @if (icon()) {\n <span class=\"fd-menu__addon-before\">\n <i [class]=\"'sap-icon--' + icon()\" role=\"presentation\"></i>\n </span>\n }\n\n <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" }]
|
|
332
|
+
}], ctorParameters: () => [], propDecorators: { isOpenChange: [{
|
|
248
333
|
type: Output
|
|
249
334
|
}], showSubmenu: [{
|
|
250
335
|
type: Output
|
|
@@ -483,6 +568,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
483
568
|
}]
|
|
484
569
|
}] });
|
|
485
570
|
|
|
571
|
+
class UserMenuHeaderContentAreaComponent {
|
|
572
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuHeaderContentAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: UserMenuHeaderContentAreaComponent, isStandalone: true, selector: "[fd-user-menu-header-content-area]", host: { classAttribute: "fd-user-menu__header-content-area" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
574
|
+
}
|
|
575
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuHeaderContentAreaComponent, decorators: [{
|
|
576
|
+
type: Component,
|
|
577
|
+
args: [{
|
|
578
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
|
579
|
+
selector: '[fd-user-menu-header-content-area]',
|
|
580
|
+
template: `<ng-content />`,
|
|
581
|
+
host: {
|
|
582
|
+
class: 'fd-user-menu__header-content-area'
|
|
583
|
+
},
|
|
584
|
+
encapsulation: ViewEncapsulation.None,
|
|
585
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
586
|
+
}]
|
|
587
|
+
}] });
|
|
588
|
+
|
|
486
589
|
class UserMenuListComponent {
|
|
487
590
|
constructor() {
|
|
488
591
|
/** @hidden */
|
|
@@ -774,7 +877,7 @@ class UserMenuComponent {
|
|
|
774
877
|
}
|
|
775
878
|
}
|
|
776
879
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
777
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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;font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu:before,.fd-menu:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:20rem;list-style:none;-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);border-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__list:before,.fd-menu__list:after,.fd-menu__sublist:before,.fd-menu__sublist:after{-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{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;position:absolute;top:0;left:100%;z-index:2;margin-block:.25rem 0;margin-inline:-.25rem 0;min-width:100%}.fd-menu__sublist:before,.fd-menu__sublist:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}[dir=rtl] .fd-menu__sublist,.fd-menu__sublist[dir=rtl]{right:100%;left:initial}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{width:100%;position:relative}.fd-menu__list--overflow{overflow-y:scroll;-ms-flex-wrap:nowrap;flex-wrap:nowrap;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow:focus,.fd-menu__list--overflow.is-focus{z-index:5;outline:none}.fd-menu__list--overflow::-webkit-scrollbar{width:var(--fdScrollbar_Dimension);height:var(--fdScrollbar_Dimension)}.fd-menu__list--overflow::-webkit-scrollbar-track,.fd-menu__list--overflow::-webkit-scrollbar-corner{background-color:var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb{background-color:transparent;-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);border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset))}.fd-menu__list--overflow::-webkit-scrollbar-thumb:hover,.fd-menu__list--overflow::-webkit-scrollbar-thumb:active{-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-track,.fd-menu__list--overflow::-webkit-scrollbar-corner{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-track,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-track,.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-corner{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu__separator{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:100%;height:.0625rem;background-color:var(--sapGroup_ContentBorderColor)}.fd-menu__separator:before,.fd-menu__separator:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;max-width:100%;position:relative;border-radius:0;background-color:var(--sapList_Background)}.fd-menu__item:before,.fd-menu__item:after{-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-right-radius:var(--fdButton_Menu_Border_Radius);border-top-left-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item:last-of-type,.fd-menu__item:last-of-type .fd-menu__link:after{border-bottom-right-radius:var(--fdButton_Menu_Border_Radius);border-bottom-left-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item.has-separator{border-bottom:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-menu__link{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-inline:var(--fdMenu_Item_Spacing_Left) var(--fdMenu_Item_Spacing_Right);width:100%;outline:none;text-decoration:none;border-radius:inherit;min-height:var(--fdMenu_Link_Height);background:var(--fdMenu_Item_Background_Color);border-bottom:.0625rem solid var(--fdMenu_Item_Border_Bottom_Color)}.fd-menu__link:before,.fd-menu__link:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__link:focus:after,.fd-menu__link.is-focus:after{border-width:var(--sapContent_FocusWidth);border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);content:\"\";position:absolute;pointer-events:none;inset:.125rem;border-radius:0!important}.fd-menu__link:hover,.fd-menu__link.is-hover{--fdMenu_Item_Background_Color: var(--sapList_Hover_Background)}.fd-menu__link[aria-selected=true],.fd-menu__link.is-selected{--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[aria-selected=true]:hover:not(:active,.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active,.is-active),.fd-menu__link.is-selected:hover:not(:active,.is-active),.fd-menu__link.is-selected.is-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[aria-selected=true]:focus,.fd-menu__link[aria-selected=true].is-focus,.fd-menu__link.is-selected:focus,.fd-menu__link.is-selected.is-focus{z-index:5}.fd-menu__link[aria-selected=true]:focus:after,.fd-menu__link[aria-selected=true].is-focus:after,.fd-menu__link.is-selected:focus:after,.fd-menu__link.is-selected.is-focus:after{bottom:.125rem}.fd-menu__link:active,.fd-menu__link.is-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:active:after,.fd-menu__link.is-active:after{display:none}.fd-menu__link:active:focus,.fd-menu__link:active.is-focus,.fd-menu__link.is-active:focus,.fd-menu__link.is-active.is-focus{z-index:5;outline-color:var(--fdMenu_Active_State_Focus)}.fd-menu__link[aria-disabled=true],.fd-menu__link.is-disabled,.fd-menu__link:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-menu__link[aria-disabled=true]:focus,.fd-menu__link[aria-disabled=true].is-focus,.fd-menu__link.is-disabled:focus,.fd-menu__link.is-disabled.is-focus,.fd-menu__link:disabled:focus,.fd-menu__link:disabled.is-focus{z-index:5}.fd-menu__link[aria-disabled=true]:focus:after,.fd-menu__link[aria-disabled=true].is-focus:after,.fd-menu__link.is-disabled:focus:after,.fd-menu__link.is-disabled.is-focus:after,.fd-menu__link:disabled:focus:after,.fd-menu__link:disabled.is-focus:after{display:none}.fd-menu__link.has-child{--fdMenu_Item_Spacing_Right: 0}.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active),.fd-menu__link.has-child.is-expanded: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[aria-expanded=true]: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.is-expanded:not(:active,.is-active):hover:not(:active,.is-active),.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-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[aria-expanded=true]:not(:active,.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus,.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus{z-index:5}.fd-menu__link.has-child[aria-expanded=true]: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.is-expanded:not(:active,.is-active):focus:after,.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus:after{bottom:.125rem}.fd-menu__title{line-height:normal;color:var(--sapTextColor);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:100%;text-align:start;margin-block:.25rem;font-size:var(--sapFontSize);color:var(--fdMenu_Text_Color);font-family:var(--sapFontFamily);text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__title:before,.fd-menu__title:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__title:has(+.fd-menu__input){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.fd-menu__title--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-menu__subtitle{line-height:normal;color:var(--sapTextColor);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:100%;text-align:start;-webkit-margin-after:.25rem;margin-block-end:.25rem;font-size:var(--sapFontSize);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__subtitle:before,.fd-menu__subtitle:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__subtitle--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-menu__content{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-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:before,.fd-menu__content:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-before,.fd-menu__addon-after{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--fdMenu_Icon_Width);min-width:var(--fdMenu_Icon_Width);max-width:var(--fdMenu_Icon_Width);height:100%;color:var(--fdMenu_Icon_Color);background-color:transparent;font-size:var(--sapFontLargeSize);text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__addon-before:before,.fd-menu__addon-before:after,.fd-menu__addon-after:before,.fd-menu__addon-after:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-before [class*=sap-icon],.fd-menu__addon-before[class*=sap-icon],.fd-menu__addon-after [class*=sap-icon],.fd-menu__addon-after[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1}.fd-menu__addon-before--active,.fd-menu__addon-after--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{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none;text-rendering:optimizeLegibility}.fd-menu__addon-after--submenu:before{content:\"\\e066\"}[dir=rtl] .fd-menu__addon-after--submenu:before,.fd-menu__addon-after--submenu[dir=rtl]:before{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none;text-rendering:optimizeLegibility}[dir=rtl] .fd-menu__addon-after--submenu:before,.fd-menu__addon-after--submenu[dir=rtl]:before{content:\"\\e067\"}.fd-menu__active-dot{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;height:var(--fdMenu_Active_Dot_Size);width:var(--fdMenu_Active_Dot_Size);min-width:var(--fdMenu_Active_Dot_Size);border-radius:100%;background:var(--sapContent_Selected_ForegroundColor)}.fd-menu__active-dot:before,.fd-menu__active-dot:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__checkmark [class*=sap-icon],.fd-menu__checkmark[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;font-size:1rem;color:var(--sapContent_Selected_ForegroundColor)}.fd-menu__shortcut{line-height:normal;color:var(--sapTextColor);-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;font-weight:400;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--fdMenu_Shortcut_Color);-webkit-padding-start:var(--fdMenu_Shortcut_Padding_Left);padding-inline-start:var(--fdMenu_Shortcut_Padding_Left)}.fd-menu__shortcut:before,.fd-menu__shortcut:after{-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{scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color);overflow-y:scroll;-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);border-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--overflow:focus,.fd-menu--overflow.is-focus{z-index:5;outline:none}.fd-menu--overflow::-webkit-scrollbar{width:var(--fdScrollbar_Dimension);height:var(--fdScrollbar_Dimension)}.fd-menu--overflow::-webkit-scrollbar-track,.fd-menu--overflow::-webkit-scrollbar-corner{background-color:var(--fdScrollbar_Track_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb{background-color:transparent;-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);border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset))}.fd-menu--overflow::-webkit-scrollbar-thumb:hover,.fd-menu--overflow::-webkit-scrollbar-thumb:active{-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-track,.fd-menu--overflow::-webkit-scrollbar-corner{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-track,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-track,.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-corner{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}[dir=rtl] .fd-menu--overflow .fd-menu__item:first-child,.fd-menu--overflow .fd-menu__item:first-child[dir=rtl]{border-top-right-radius:var(--fdButton_Menu_Border_Radius);border-top-left-radius:0}.fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-right-radius:0}[dir=rtl] .fd-menu--overflow .fd-menu__item:last-of-type,.fd-menu--overflow .fd-menu__item:last-of-type[dir=rtl]{border-bottom-right-radius:var(--fdButton_Menu_Border_Radius);border-bottom-left-radius:0}.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 input,.fd-menu--icons .fd-menu__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;position:static;margin-inline:0;margin-block:0}.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 input,.fd-menu--mobile.fd-menu--icons .fd-menu__input{margin-inline:1rem}[class*=-condensed] .fd-menu:not([class*=-cozy]),[class*=-compact] .fd-menu:not([class*=-cozy]),.fd-menu[class*=-condensed],.fd-menu[class*=-compact]{--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}[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons,.fd-menu[class*=-condensed].fd-menu--icons,.fd-menu[class*=-compact].fd-menu--icons{--fdMenu_Item_Spacing_Left: 0;--fdMenu_Item_Spacing_Right: 0}[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,.fd-menu[class*=-condensed].fd-menu--icons input,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__input,.fd-menu[class*=-compact].fd-menu--icons input,.fd-menu[class*=-compact].fd-menu--icons .fd-menu__input{margin-inline:.5rem}[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist,.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left: .5rem;--fdMenu_Item_Spacing_Right: .5rem}[class*=-condensed] .fd-menu:not([class*=-cozy]).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,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,.fd-menu[class*=-compact].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{overflow:visible;width:20rem;min-width:20rem}.fd-user-menu__body{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:flex;flex-direction:column;gap:.5rem;overflow:visible;min-width:18rem;max-width:20rem;position:relative;padding-inline:.5rem;padding-block:2.5rem .5rem}.fd-user-menu__body:before,.fd-user-menu__body:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__header{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:flex;flex-direction:column;gap:.5rem;align-items:center}.fd-user-menu__header:before,.fd-user-menu__header:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__header-container,.fd-user-menu__subheader{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:flex;flex-direction:column;gap:.25rem;align-items:center;max-width:100%;text-align:center;margin-block-end:.5rem}.fd-user-menu__header-container:before,.fd-user-menu__header-container:after,.fd-user-menu__subheader:before,.fd-user-menu__subheader:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__user-name{font-size:var(--sapFontSize);line-height:normal;font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;max-width:100%;line-height:1.4rem;white-space:normal;color:var(--sapTextColor);font-size:var(--sapFontLargeSize);font-family:var(--fdUserMenu_User_Name_Font_Family)}.fd-user-menu__user-name:before,.fd-user-menu__user-name:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__user-name--truncate{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;text-overflow:ellipsis;max-height:2.8rem}.fd-user-menu__user-info,.fd-user-menu__user-role,.fd-user-menu__subline{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:100%;max-width:100%;white-space:normal;color:var(--sapContent_LabelColor)}.fd-user-menu__user-info:before,.fd-user-menu__user-info:after,.fd-user-menu__user-role:before,.fd-user-menu__user-role:after,.fd-user-menu__subline:before,.fd-user-menu__subline:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__user-info--truncate,.fd-user-menu__user-role--truncate,.fd-user-menu__subline--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-user-menu .fd-user-menu__menu{width:100%}.fd-user-menu .fd-user-menu__menu-list{box-shadow:none;border-radius:0}.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{box-shadow:none;border-radius:0}.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__title:not(.fd-menu__title--truncate),.fd-user-menu .fd-user-menu__menu-list .fd-menu__subtitle:not(.fd-menu__subtitle--truncate){white-space:normal}.fd-user-menu .fd-user-menu__panel>div{border-radius:0}.fd-user-menu__content-container{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;--fdPanel_Margin_Bottom: .25rem}.fd-user-menu__content-container:before,.fd-user-menu__content-container:after{box-sizing:inherit;font-size:inherit}[class*=-condensed] .fd-user-menu .fd-menu:not([class*=-cozy]),[class*=-compact] .fd-user-menu .fd-menu:not([class*=-cozy]),.fd-user-menu .fd-menu[class*=-condensed],.fd-user-menu .fd-menu[class*=-compact]{--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:flex;flex-direction:column;height:100%;padding-block-start:0}.fd-user-menu--mobile .fd-user-menu__body{flex:1;padding-block-start:1rem}.fd-user-menu--tool-header .fd-user-menu__user-name{font-family:var(--sapFontBlackFamily);font-size:1.25rem;line-height:1.3;color:var(--sapTitleColor)}.fd-user-menu--tool-header .fd-user-menu__navigation-submenu{top:-.5rem;border:none;padding-block:.5rem;padding-inline:.5rem;border-radius:.5rem;margin-inline-end:.3875rem;box-shadow:var(--sapMenu_Shadow1);background:var(--sapGroup_ContentBackground)}.fd-user-menu--tool-header .fd-user-menu__navigation-submenu-wrapper{overflow:visible}.fd-user-menu--tool-header .fd-user-menu__user-role{font-family:var(--sapFontFamily);font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapContent_LabelColor)}.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{border:none;padding-block:.75rem;padding-inline:0;border-radius:.75rem;box-shadow:var(--sapMenu_Shadow2);background:var(--sapGroup_ContentBackground)}.fd-user-menu--tool-header .fd-user-menu__footer{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding-block:.75rem;padding-inline:1.125rem}.fd-user-menu--tool-header .fd-user-menu__footer:before,.fd-user-menu--tool-header .fd-user-menu__footer:after{box-sizing:inherit;font-size:inherit}.fd-user-menu--tool-header .fd-navigation__item.fd-navigation__item--title{--fdNavigation_Item_Title_Display: flex;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"], 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", "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 }); }
|
|
880
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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.7\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 }); }
|
|
778
881
|
}
|
|
779
882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserMenuComponent, decorators: [{
|
|
780
883
|
type: Component,
|
|
@@ -793,7 +896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
793
896
|
DialogFooterComponent,
|
|
794
897
|
DialogHeaderComponent,
|
|
795
898
|
TemplateDirective
|
|
796
|
-
], 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;font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fd-menu:before,.fd-menu:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:20rem;list-style:none;-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);border-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__list:before,.fd-menu__list:after,.fd-menu__sublist:before,.fd-menu__sublist:after{-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{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;position:absolute;top:0;left:100%;z-index:2;margin-block:.25rem 0;margin-inline:-.25rem 0;min-width:100%}.fd-menu__sublist:before,.fd-menu__sublist:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}[dir=rtl] .fd-menu__sublist,.fd-menu__sublist[dir=rtl]{right:100%;left:initial}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{width:100%;position:relative}.fd-menu__list--overflow{overflow-y:scroll;-ms-flex-wrap:nowrap;flex-wrap:nowrap;scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow:focus,.fd-menu__list--overflow.is-focus{z-index:5;outline:none}.fd-menu__list--overflow::-webkit-scrollbar{width:var(--fdScrollbar_Dimension);height:var(--fdScrollbar_Dimension)}.fd-menu__list--overflow::-webkit-scrollbar-track,.fd-menu__list--overflow::-webkit-scrollbar-corner{background-color:var(--fdScrollbar_Track_Color)}.fd-menu__list--overflow::-webkit-scrollbar-thumb{background-color:transparent;-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);border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset))}.fd-menu__list--overflow::-webkit-scrollbar-thumb:hover,.fd-menu__list--overflow::-webkit-scrollbar-thumb:active{-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-track,.fd-menu__list--overflow::-webkit-scrollbar-corner{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-track,[dir=rtl] .fd-menu__list--overflow::-webkit-scrollbar-corner,.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-track,.fd-menu__list--overflow[dir=rtl]::-webkit-scrollbar-corner{border-radius:var(--fdScrollbar_Border_Radius) 0 0 var(--fdScrollbar_Border_Radius)}.fd-menu__separator{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:100%;height:.0625rem;background-color:var(--sapGroup_ContentBorderColor)}.fd-menu__separator:before,.fd-menu__separator:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__item{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;max-width:100%;position:relative;border-radius:0;background-color:var(--sapList_Background)}.fd-menu__item:before,.fd-menu__item:after{-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-right-radius:var(--fdButton_Menu_Border_Radius);border-top-left-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item:last-of-type,.fd-menu__item:last-of-type .fd-menu__link:after{border-bottom-right-radius:var(--fdButton_Menu_Border_Radius);border-bottom-left-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__item.has-separator{border-bottom:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-menu__link{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-inline:var(--fdMenu_Item_Spacing_Left) var(--fdMenu_Item_Spacing_Right);width:100%;outline:none;text-decoration:none;border-radius:inherit;min-height:var(--fdMenu_Link_Height);background:var(--fdMenu_Item_Background_Color);border-bottom:.0625rem solid var(--fdMenu_Item_Border_Bottom_Color)}.fd-menu__link:before,.fd-menu__link:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__link:focus:after,.fd-menu__link.is-focus:after{border-width:var(--sapContent_FocusWidth);border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);content:\"\";position:absolute;pointer-events:none;inset:.125rem;border-radius:0!important}.fd-menu__link:hover,.fd-menu__link.is-hover{--fdMenu_Item_Background_Color: var(--sapList_Hover_Background)}.fd-menu__link[aria-selected=true],.fd-menu__link.is-selected{--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[aria-selected=true]:hover:not(:active,.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active,.is-active),.fd-menu__link.is-selected:hover:not(:active,.is-active),.fd-menu__link.is-selected.is-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[aria-selected=true]:focus,.fd-menu__link[aria-selected=true].is-focus,.fd-menu__link.is-selected:focus,.fd-menu__link.is-selected.is-focus{z-index:5}.fd-menu__link[aria-selected=true]:focus:after,.fd-menu__link[aria-selected=true].is-focus:after,.fd-menu__link.is-selected:focus:after,.fd-menu__link.is-selected.is-focus:after{bottom:.125rem}.fd-menu__link:active,.fd-menu__link.is-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:active:after,.fd-menu__link.is-active:after{display:none}.fd-menu__link:active:focus,.fd-menu__link:active.is-focus,.fd-menu__link.is-active:focus,.fd-menu__link.is-active.is-focus{z-index:5;outline-color:var(--fdMenu_Active_State_Focus)}.fd-menu__link[aria-disabled=true],.fd-menu__link.is-disabled,.fd-menu__link:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-menu__link[aria-disabled=true]:focus,.fd-menu__link[aria-disabled=true].is-focus,.fd-menu__link.is-disabled:focus,.fd-menu__link.is-disabled.is-focus,.fd-menu__link:disabled:focus,.fd-menu__link:disabled.is-focus{z-index:5}.fd-menu__link[aria-disabled=true]:focus:after,.fd-menu__link[aria-disabled=true].is-focus:after,.fd-menu__link.is-disabled:focus:after,.fd-menu__link.is-disabled.is-focus:after,.fd-menu__link:disabled:focus:after,.fd-menu__link:disabled.is-focus:after{display:none}.fd-menu__link.has-child{--fdMenu_Item_Spacing_Right: 0}.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active),.fd-menu__link.has-child.is-expanded: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[aria-expanded=true]: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.is-expanded:not(:active,.is-active):hover:not(:active,.is-active),.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-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[aria-expanded=true]:not(:active,.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active,.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active,.is-active):focus,.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus{z-index:5}.fd-menu__link.has-child[aria-expanded=true]: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.is-expanded:not(:active,.is-active):focus:after,.fd-menu__link.has-child.is-expanded:not(:active,.is-active).is-focus:after{bottom:.125rem}.fd-menu__title{line-height:normal;color:var(--sapTextColor);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:100%;text-align:start;margin-block:.25rem;font-size:var(--sapFontSize);color:var(--fdMenu_Text_Color);font-family:var(--sapFontFamily);text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__title:before,.fd-menu__title:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__title:has(+.fd-menu__input){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.fd-menu__title--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-menu__subtitle{line-height:normal;color:var(--sapTextColor);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:100%;text-align:start;-webkit-margin-after:.25rem;margin-block-end:.25rem;font-size:var(--sapFontSize);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__subtitle:before,.fd-menu__subtitle:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__subtitle--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-menu__content{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-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:before,.fd-menu__content:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-before,.fd-menu__addon-after{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--fdMenu_Icon_Width);min-width:var(--fdMenu_Icon_Width);max-width:var(--fdMenu_Icon_Width);height:100%;color:var(--fdMenu_Icon_Color);background-color:transparent;font-size:var(--sapFontLargeSize);text-shadow:var(--fdMenu_Text_Shadow)}.fd-menu__addon-before:before,.fd-menu__addon-before:after,.fd-menu__addon-after:before,.fd-menu__addon-after:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__addon-before [class*=sap-icon],.fd-menu__addon-before[class*=sap-icon],.fd-menu__addon-after [class*=sap-icon],.fd-menu__addon-after[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1}.fd-menu__addon-before--active,.fd-menu__addon-after--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{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none;text-rendering:optimizeLegibility}.fd-menu__addon-after--submenu:before{content:\"\\e066\"}[dir=rtl] .fd-menu__addon-after--submenu:before,.fd-menu__addon-after--submenu[dir=rtl]:before{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none;text-rendering:optimizeLegibility}[dir=rtl] .fd-menu__addon-after--submenu:before,.fd-menu__addon-after--submenu[dir=rtl]:before{content:\"\\e067\"}.fd-menu__active-dot{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;height:var(--fdMenu_Active_Dot_Size);width:var(--fdMenu_Active_Dot_Size);min-width:var(--fdMenu_Active_Dot_Size);border-radius:100%;background:var(--sapContent_Selected_ForegroundColor)}.fd-menu__active-dot:before,.fd-menu__active-dot:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-menu__checkmark [class*=sap-icon],.fd-menu__checkmark[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;font-size:1rem;color:var(--sapContent_Selected_ForegroundColor)}.fd-menu__shortcut{line-height:normal;color:var(--sapTextColor);-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;font-weight:400;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--fdMenu_Shortcut_Color);-webkit-padding-start:var(--fdMenu_Shortcut_Padding_Left);padding-inline-start:var(--fdMenu_Shortcut_Padding_Left)}.fd-menu__shortcut:before,.fd-menu__shortcut:after{-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{scrollbar-color:var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color);overflow-y:scroll;-webkit-box-shadow:var(--sapContent_Shadow1);box-shadow:var(--sapContent_Shadow1);border-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--overflow:focus,.fd-menu--overflow.is-focus{z-index:5;outline:none}.fd-menu--overflow::-webkit-scrollbar{width:var(--fdScrollbar_Dimension);height:var(--fdScrollbar_Dimension)}.fd-menu--overflow::-webkit-scrollbar-track,.fd-menu--overflow::-webkit-scrollbar-corner{background-color:var(--fdScrollbar_Track_Color)}.fd-menu--overflow::-webkit-scrollbar-thumb{background-color:transparent;-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);border:var(--fdScrollbar_Thumb_Offset) solid transparent;border-radius:calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset))}.fd-menu--overflow::-webkit-scrollbar-thumb:hover,.fd-menu--overflow::-webkit-scrollbar-thumb:active{-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-track,.fd-menu--overflow::-webkit-scrollbar-corner{border-radius:0 var(--fdScrollbar_Border_Radius) var(--fdScrollbar_Border_Radius) 0}[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-track,[dir=rtl] .fd-menu--overflow::-webkit-scrollbar-corner,.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-track,.fd-menu--overflow[dir=rtl]::-webkit-scrollbar-corner{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}[dir=rtl] .fd-menu--overflow .fd-menu__item:first-child,.fd-menu--overflow .fd-menu__item:first-child[dir=rtl]{border-top-right-radius:var(--fdButton_Menu_Border_Radius);border-top-left-radius:0}.fd-menu--overflow .fd-menu__item:last-of-type{border-bottom-right-radius:0}[dir=rtl] .fd-menu--overflow .fd-menu__item:last-of-type,.fd-menu--overflow .fd-menu__item:last-of-type[dir=rtl]{border-bottom-right-radius:var(--fdButton_Menu_Border_Radius);border-bottom-left-radius:0}.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 input,.fd-menu--icons .fd-menu__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;position:static;margin-inline:0;margin-block:0}.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 input,.fd-menu--mobile.fd-menu--icons .fd-menu__input{margin-inline:1rem}[class*=-condensed] .fd-menu:not([class*=-cozy]),[class*=-compact] .fd-menu:not([class*=-cozy]),.fd-menu[class*=-condensed],.fd-menu[class*=-compact]{--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}[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons,.fd-menu[class*=-condensed].fd-menu--icons,.fd-menu[class*=-compact].fd-menu--icons{--fdMenu_Item_Spacing_Left: 0;--fdMenu_Item_Spacing_Right: 0}[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons input,[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons input,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__input,.fd-menu[class*=-condensed].fd-menu--icons input,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__input,.fd-menu[class*=-compact].fd-menu--icons input,.fd-menu[class*=-compact].fd-menu--icons .fd-menu__input{margin-inline:.5rem}[class*=-condensed] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist,[class*=-compact] .fd-menu:not([class*=-cozy]).fd-menu--icons .fd-menu__sublist,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist,.fd-menu[class*=-compact].fd-menu--icons .fd-menu__sublist{--fdMenu_Item_Spacing_Left: .5rem;--fdMenu_Item_Spacing_Right: .5rem}[class*=-condensed] .fd-menu:not([class*=-cozy]).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,.fd-menu[class*=-condensed].fd-menu--icons .fd-menu__sublist.fd-menu__sublist--icons,.fd-menu[class*=-compact].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{overflow:visible;width:20rem;min-width:20rem}.fd-user-menu__body{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:flex;flex-direction:column;gap:.5rem;overflow:visible;min-width:18rem;max-width:20rem;position:relative;padding-inline:.5rem;padding-block:2.5rem .5rem}.fd-user-menu__body:before,.fd-user-menu__body:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__header{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:flex;flex-direction:column;gap:.5rem;align-items:center}.fd-user-menu__header:before,.fd-user-menu__header:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__header-container,.fd-user-menu__subheader{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:flex;flex-direction:column;gap:.25rem;align-items:center;max-width:100%;text-align:center;margin-block-end:.5rem}.fd-user-menu__header-container:before,.fd-user-menu__header-container:after,.fd-user-menu__subheader:before,.fd-user-menu__subheader:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__user-name{font-size:var(--sapFontSize);line-height:normal;font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;max-width:100%;line-height:1.4rem;white-space:normal;color:var(--sapTextColor);font-size:var(--sapFontLargeSize);font-family:var(--fdUserMenu_User_Name_Font_Family)}.fd-user-menu__user-name:before,.fd-user-menu__user-name:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__user-name--truncate{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;text-overflow:ellipsis;max-height:2.8rem}.fd-user-menu__user-info,.fd-user-menu__user-role,.fd-user-menu__subline{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;width:100%;max-width:100%;white-space:normal;color:var(--sapContent_LabelColor)}.fd-user-menu__user-info:before,.fd-user-menu__user-info:after,.fd-user-menu__user-role:before,.fd-user-menu__user-role:after,.fd-user-menu__subline:before,.fd-user-menu__subline:after{box-sizing:inherit;font-size:inherit}.fd-user-menu__user-info--truncate,.fd-user-menu__user-role--truncate,.fd-user-menu__subline--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-user-menu .fd-user-menu__menu{width:100%}.fd-user-menu .fd-user-menu__menu-list{box-shadow:none;border-radius:0}.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{box-shadow:none;border-radius:0}.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__title:not(.fd-menu__title--truncate),.fd-user-menu .fd-user-menu__menu-list .fd-menu__subtitle:not(.fd-menu__subtitle--truncate){white-space:normal}.fd-user-menu .fd-user-menu__panel>div{border-radius:0}.fd-user-menu__content-container{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;--fdPanel_Margin_Bottom: .25rem}.fd-user-menu__content-container:before,.fd-user-menu__content-container:after{box-sizing:inherit;font-size:inherit}[class*=-condensed] .fd-user-menu .fd-menu:not([class*=-cozy]),[class*=-compact] .fd-user-menu .fd-menu:not([class*=-cozy]),.fd-user-menu .fd-menu[class*=-condensed],.fd-user-menu .fd-menu[class*=-compact]{--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:flex;flex-direction:column;height:100%;padding-block-start:0}.fd-user-menu--mobile .fd-user-menu__body{flex:1;padding-block-start:1rem}.fd-user-menu--tool-header .fd-user-menu__user-name{font-family:var(--sapFontBlackFamily);font-size:1.25rem;line-height:1.3;color:var(--sapTitleColor)}.fd-user-menu--tool-header .fd-user-menu__navigation-submenu{top:-.5rem;border:none;padding-block:.5rem;padding-inline:.5rem;border-radius:.5rem;margin-inline-end:.3875rem;box-shadow:var(--sapMenu_Shadow1);background:var(--sapGroup_ContentBackground)}.fd-user-menu--tool-header .fd-user-menu__navigation-submenu-wrapper{overflow:visible}.fd-user-menu--tool-header .fd-user-menu__user-role{font-family:var(--sapFontFamily);font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapContent_LabelColor)}.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{border:none;padding-block:.75rem;padding-inline:0;border-radius:.75rem;box-shadow:var(--sapMenu_Shadow2);background:var(--sapGroup_ContentBackground)}.fd-user-menu--tool-header .fd-user-menu__footer{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding-block:.75rem;padding-inline:1.125rem}.fd-user-menu--tool-header .fd-user-menu__footer:before,.fd-user-menu--tool-header .fd-user-menu__footer:after{box-sizing:inherit;font-size:inherit}.fd-user-menu--tool-header .fd-navigation__item.fd-navigation__item--title{--fdNavigation_Item_Title_Display: flex;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"] }]
|
|
899
|
+
], 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.7\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"] }]
|
|
797
900
|
}], 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), { ...{
|
|
798
901
|
descendants: true,
|
|
799
902
|
read: ElementRef
|
|
@@ -858,6 +961,7 @@ const components = [
|
|
|
858
961
|
UserMenuSublistComponent,
|
|
859
962
|
UserMenuListItemComponent,
|
|
860
963
|
UserMenuContentContainerComponent,
|
|
964
|
+
UserMenuHeaderContentAreaComponent,
|
|
861
965
|
UserMenuHeaderDirective,
|
|
862
966
|
UserMenuHeaderContainerDirective,
|
|
863
967
|
UserMenuUserNameDirective,
|
|
@@ -878,6 +982,7 @@ class UserMenuModule {
|
|
|
878
982
|
UserMenuSublistComponent,
|
|
879
983
|
UserMenuListItemComponent,
|
|
880
984
|
UserMenuContentContainerComponent,
|
|
985
|
+
UserMenuHeaderContentAreaComponent,
|
|
881
986
|
UserMenuHeaderDirective,
|
|
882
987
|
UserMenuHeaderContainerDirective,
|
|
883
988
|
UserMenuUserNameDirective,
|
|
@@ -890,6 +995,7 @@ class UserMenuModule {
|
|
|
890
995
|
UserMenuSublistComponent,
|
|
891
996
|
UserMenuListItemComponent,
|
|
892
997
|
UserMenuContentContainerComponent,
|
|
998
|
+
UserMenuHeaderContentAreaComponent,
|
|
893
999
|
UserMenuHeaderDirective,
|
|
894
1000
|
UserMenuHeaderContainerDirective,
|
|
895
1001
|
UserMenuUserNameDirective,
|
|
@@ -911,5 +1017,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
911
1017
|
* Generated bundle index. Do not edit.
|
|
912
1018
|
*/
|
|
913
1019
|
|
|
914
|
-
export { UserMenuBodyComponent, UserMenuComponent, UserMenuContentContainerComponent, UserMenuControlComponent, UserMenuControlElementDirective, UserMenuFooterComponent, UserMenuHeaderContainerDirective, UserMenuHeaderDirective, UserMenuListComponent, UserMenuListItemComponent, UserMenuModule, UserMenuSublineDirective, UserMenuSublistComponent, UserMenuUserNameDirective };
|
|
1020
|
+
export { UserMenuBodyComponent, UserMenuComponent, UserMenuContentContainerComponent, UserMenuControlComponent, UserMenuControlElementDirective, UserMenuFooterComponent, UserMenuHeaderContainerDirective, UserMenuHeaderContentAreaComponent, UserMenuHeaderDirective, UserMenuListComponent, UserMenuListItemComponent, UserMenuModule, UserMenuSublineDirective, UserMenuSublistComponent, UserMenuUserNameDirective };
|
|
915
1021
|
//# sourceMappingURL=fundamental-ngx-core-user-menu.mjs.map
|