@fundamental-ngx/core 0.35.5-rc.6 → 0.35.6

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.
Files changed (175) hide show
  1. package/action-bar/package.json +1 -1
  2. package/action-sheet/package.json +1 -1
  3. package/alert/package.json +1 -1
  4. package/avatar/package.json +1 -1
  5. package/avatar-group/package.json +1 -1
  6. package/bar/package.json +1 -1
  7. package/breadcrumb/esm2020/breadcrumb.component.mjs +1 -1
  8. package/breadcrumb/fesm2015/fundamental-ngx-core-breadcrumb.mjs +1 -1
  9. package/breadcrumb/fesm2020/fundamental-ngx-core-breadcrumb.mjs +1 -1
  10. package/breadcrumb/package.json +1 -1
  11. package/busy-indicator/package.json +1 -1
  12. package/button/package.json +1 -1
  13. package/calendar/package.json +1 -1
  14. package/card/package.json +1 -1
  15. package/carousel/package.json +1 -1
  16. package/checkbox/package.json +1 -1
  17. package/combobox/package.json +1 -1
  18. package/content-density/package.json +4 -4
  19. package/date-picker/date-picker.component.d.ts +1 -10
  20. package/date-picker/date-picker.module.d.ts +2 -3
  21. package/date-picker/esm2020/date-picker.component.mjs +6 -30
  22. package/date-picker/esm2020/date-picker.module.mjs +1 -5
  23. package/date-picker/fesm2015/fundamental-ngx-core-date-picker.mjs +5 -33
  24. package/date-picker/fesm2015/fundamental-ngx-core-date-picker.mjs.map +1 -1
  25. package/date-picker/fesm2020/fundamental-ngx-core-date-picker.mjs +5 -33
  26. package/date-picker/fesm2020/fundamental-ngx-core-date-picker.mjs.map +1 -1
  27. package/date-picker/package.json +1 -1
  28. package/datetime/package.json +1 -1
  29. package/datetime-picker/package.json +1 -1
  30. package/dialog/package.json +1 -1
  31. package/dynamic-page/package.json +1 -1
  32. package/dynamic-side-content/package.json +1 -1
  33. package/esm2020/breadcrumb/breadcrumb.component.mjs +1 -1
  34. package/esm2020/date-picker/date-picker.component.mjs +6 -30
  35. package/esm2020/date-picker/date-picker.module.mjs +1 -5
  36. package/esm2020/menu/menu-item/menu-item.component.mjs +43 -7
  37. package/esm2020/menu/menu.component.mjs +37 -34
  38. package/esm2020/menu/services/menu.service.mjs +14 -13
  39. package/esm2020/shellbar/product-menu/product-menu.component.mjs +1 -1
  40. package/esm2020/shellbar/user-menu/shellbar-user-menu.component.mjs +1 -1
  41. package/esm2020/split-button/split-button.component.mjs +6 -6
  42. package/esm2020/tabs/tab-list.component.mjs +1 -1
  43. package/esm2020/time/time-column/time-column.component.mjs +2 -12
  44. package/esm2020/tree/tree-child.component.mjs +2 -2
  45. package/facets/package.json +1 -1
  46. package/feed-input/package.json +1 -1
  47. package/feed-list-item/package.json +1 -1
  48. package/fesm2015/fundamental-ngx-core-breadcrumb.mjs +1 -1
  49. package/fesm2015/fundamental-ngx-core-date-picker.mjs +5 -33
  50. package/fesm2015/fundamental-ngx-core-date-picker.mjs.map +1 -1
  51. package/fesm2015/fundamental-ngx-core-menu.mjs +90 -50
  52. package/fesm2015/fundamental-ngx-core-menu.mjs.map +1 -1
  53. package/fesm2015/fundamental-ngx-core-shellbar.mjs +2 -2
  54. package/fesm2015/fundamental-ngx-core-split-button.mjs +5 -5
  55. package/fesm2015/fundamental-ngx-core-split-button.mjs.map +1 -1
  56. package/fesm2015/fundamental-ngx-core-tabs.mjs +1 -1
  57. package/fesm2015/fundamental-ngx-core-time.mjs +1 -11
  58. package/fesm2015/fundamental-ngx-core-time.mjs.map +1 -1
  59. package/fesm2015/fundamental-ngx-core-tree.mjs +1 -1
  60. package/fesm2015/fundamental-ngx-core-tree.mjs.map +1 -1
  61. package/fesm2020/fundamental-ngx-core-breadcrumb.mjs +1 -1
  62. package/fesm2020/fundamental-ngx-core-date-picker.mjs +5 -33
  63. package/fesm2020/fundamental-ngx-core-date-picker.mjs.map +1 -1
  64. package/fesm2020/fundamental-ngx-core-menu.mjs +90 -50
  65. package/fesm2020/fundamental-ngx-core-menu.mjs.map +1 -1
  66. package/fesm2020/fundamental-ngx-core-shellbar.mjs +2 -2
  67. package/fesm2020/fundamental-ngx-core-split-button.mjs +5 -5
  68. package/fesm2020/fundamental-ngx-core-split-button.mjs.map +1 -1
  69. package/fesm2020/fundamental-ngx-core-tabs.mjs +1 -1
  70. package/fesm2020/fundamental-ngx-core-time.mjs +1 -11
  71. package/fesm2020/fundamental-ngx-core-time.mjs.map +1 -1
  72. package/fesm2020/fundamental-ngx-core-tree.mjs +1 -1
  73. package/fesm2020/fundamental-ngx-core-tree.mjs.map +1 -1
  74. package/file-uploader/package.json +1 -1
  75. package/fixed-card-layout/package.json +1 -1
  76. package/flexible-column-layout/package.json +1 -1
  77. package/form/package.json +1 -1
  78. package/formatted-text/package.json +1 -1
  79. package/grid-list/package.json +1 -1
  80. package/icon/package.json +1 -1
  81. package/illustrated-message/package.json +1 -1
  82. package/infinite-scroll/package.json +1 -1
  83. package/info-label/package.json +1 -1
  84. package/inline-help/package.json +1 -1
  85. package/input-group/package.json +1 -1
  86. package/layout-grid/package.json +1 -1
  87. package/layout-panel/package.json +1 -1
  88. package/link/package.json +1 -1
  89. package/list/package.json +1 -1
  90. package/menu/esm2020/menu-item/menu-item.component.mjs +43 -7
  91. package/menu/esm2020/menu.component.mjs +37 -34
  92. package/menu/esm2020/services/menu.service.mjs +14 -13
  93. package/menu/fesm2015/fundamental-ngx-core-menu.mjs +90 -50
  94. package/menu/fesm2015/fundamental-ngx-core-menu.mjs.map +1 -1
  95. package/menu/fesm2020/fundamental-ngx-core-menu.mjs +90 -50
  96. package/menu/fesm2020/fundamental-ngx-core-menu.mjs.map +1 -1
  97. package/menu/menu-item/menu-item.component.d.ts +27 -7
  98. package/menu/menu.component.d.ts +10 -10
  99. package/menu/package.json +1 -1
  100. package/menu/services/menu.service.d.ts +3 -3
  101. package/message-box/package.json +1 -1
  102. package/message-strip/package.json +1 -1
  103. package/message-toast/package.json +1 -1
  104. package/micro-process-flow/package.json +1 -1
  105. package/mobile-mode/package.json +1 -1
  106. package/multi-input/package.json +1 -1
  107. package/nested-list/package.json +1 -1
  108. package/notification/package.json +1 -1
  109. package/object-identifier/package.json +1 -1
  110. package/object-marker/package.json +1 -1
  111. package/object-number/package.json +1 -1
  112. package/object-status/package.json +1 -1
  113. package/overflow-layout/package.json +14 -14
  114. package/package.json +2 -2
  115. package/pagination/package.json +1 -1
  116. package/panel/package.json +1 -1
  117. package/popover/package.json +1 -1
  118. package/product-switch/package.json +1 -1
  119. package/progress-indicator/package.json +1 -1
  120. package/quick-view/package.json +1 -1
  121. package/radio/package.json +1 -1
  122. package/rating-indicator/package.json +1 -1
  123. package/resizable-card-layout/package.json +1 -1
  124. package/scroll-spy/package.json +1 -1
  125. package/scrollbar/package.json +1 -1
  126. package/segmented-button/package.json +1 -1
  127. package/select/package.json +1 -1
  128. package/shared/package.json +1 -1
  129. package/shellbar/esm2020/product-menu/product-menu.component.mjs +1 -1
  130. package/shellbar/esm2020/user-menu/shellbar-user-menu.component.mjs +1 -1
  131. package/shellbar/fesm2015/fundamental-ngx-core-shellbar.mjs +2 -2
  132. package/shellbar/fesm2020/fundamental-ngx-core-shellbar.mjs +2 -2
  133. package/shellbar/package.json +1 -1
  134. package/side-navigation/package.json +1 -1
  135. package/slider/package.json +1 -1
  136. package/split-button/esm2020/split-button.component.mjs +6 -6
  137. package/split-button/fesm2015/fundamental-ngx-core-split-button.mjs +5 -5
  138. package/split-button/fesm2015/fundamental-ngx-core-split-button.mjs.map +1 -1
  139. package/split-button/fesm2020/fundamental-ngx-core-split-button.mjs +5 -5
  140. package/split-button/fesm2020/fundamental-ngx-core-split-button.mjs.map +1 -1
  141. package/split-button/package.json +1 -1
  142. package/splitter/package.json +1 -1
  143. package/status-indicator/package.json +1 -1
  144. package/step-input/package.json +1 -1
  145. package/switch/package.json +1 -1
  146. package/table/package.json +1 -1
  147. package/tabs/esm2020/tab-list.component.mjs +1 -1
  148. package/tabs/fesm2015/fundamental-ngx-core-tabs.mjs +1 -1
  149. package/tabs/fesm2020/fundamental-ngx-core-tabs.mjs +1 -1
  150. package/tabs/package.json +1 -1
  151. package/text/package.json +1 -1
  152. package/theming/package.json +1 -1
  153. package/tile/package.json +1 -1
  154. package/time/esm2020/time-column/time-column.component.mjs +2 -12
  155. package/time/fesm2015/fundamental-ngx-core-time.mjs +1 -11
  156. package/time/fesm2015/fundamental-ngx-core-time.mjs.map +1 -1
  157. package/time/fesm2020/fundamental-ngx-core-time.mjs +1 -11
  158. package/time/fesm2020/fundamental-ngx-core-time.mjs.map +1 -1
  159. package/time/package.json +1 -1
  160. package/time/time-column/time-column.component.d.ts +0 -2
  161. package/time-picker/package.json +1 -1
  162. package/timeline/package.json +1 -1
  163. package/title/package.json +1 -1
  164. package/token/package.json +1 -1
  165. package/toolbar/package.json +1 -1
  166. package/tree/esm2020/tree-child.component.mjs +2 -2
  167. package/tree/fesm2015/fundamental-ngx-core-tree.mjs +1 -1
  168. package/tree/fesm2015/fundamental-ngx-core-tree.mjs.map +1 -1
  169. package/tree/fesm2020/fundamental-ngx-core-tree.mjs +1 -1
  170. package/tree/fesm2020/fundamental-ngx-core-tree.mjs.map +1 -1
  171. package/tree/package.json +1 -1
  172. package/upload-collection/package.json +1 -1
  173. package/utils/package.json +2 -2
  174. package/vertical-navigation/package.json +1 -1
  175. package/wizard/package.json +1 -1
@@ -20,6 +20,7 @@ import * as i4 from '@fundamental-ngx/core/button';
20
20
  import { ButtonModule } from '@fundamental-ngx/core/button';
21
21
  import * as i5 from '@fundamental-ngx/core/title';
22
22
  import * as i6 from '@fundamental-ngx/core/bar';
23
+ import { coerceBooleanProperty } from '@angular/cdk/coercion';
23
24
 
24
25
  /**
25
26
  * The directive that represents the menu title.
@@ -132,8 +133,8 @@ class MenuService {
132
133
  return this._rtlService?.rtl.value;
133
134
  }
134
135
  /** Reference to menu component */
135
- get menu() {
136
- return this._menu;
136
+ get menuComponent() {
137
+ return this._menuComponent;
137
138
  }
138
139
  /** Returns menu mode observable */
139
140
  get isMobileMode() {
@@ -174,9 +175,9 @@ class MenuService {
174
175
  this._emitActivePath();
175
176
  }
176
177
  /** Initializes menu service based on given Menu Component */
177
- setMenuRoot(menu) {
178
- this._menu = menu;
179
- this.menuMap = this._buildMenuMap(this._menu);
178
+ setMenuComponent(menu) {
179
+ this._menuComponent = menu;
180
+ this.menuMap = this._buildMenuMap(this._menuComponent);
180
181
  }
181
182
  /** Clears Active Node Path and resets Focused Node */
182
183
  resetMenuState() {
@@ -188,7 +189,7 @@ class MenuService {
188
189
  * - Validates Active Node Path
189
190
  * - Validates Focused Node */
190
191
  rebuildMenu() {
191
- this.menuMap = this._buildMenuMap(this._menu);
192
+ this.menuMap = this._buildMenuMap(this._menuComponent);
192
193
  const deadNode = this.activeNodePath.find((node) => !this.menuMap.has(node.item));
193
194
  if (deadNode?.item) {
194
195
  this.setActive(false, deadNode.item);
@@ -253,7 +254,7 @@ class MenuService {
253
254
  item: menuItem,
254
255
  parent: null,
255
256
  children: menuItem.submenu
256
- ? menuItem.submenu.menuItems.toArray().map((subMenuItem) => buildNode(subMenuItem))
257
+ ? menuItem.submenu.menuItems.map((subMenuItem) => buildNode(subMenuItem))
257
258
  : []
258
259
  };
259
260
  }
@@ -266,11 +267,12 @@ class MenuService {
266
267
  node.children.forEach((childNode) => toMap(childNode, map));
267
268
  return map;
268
269
  }
270
+ const rootItems = menu._menuItems.filter((rootItem) => !rootItem.parentSubmenu);
269
271
  /** root item */
270
272
  const menuTree = {
271
273
  item: null,
272
274
  parent: null,
273
- children: menu.menuItems.toArray().map((item) => buildNode(item))
275
+ children: rootItems.map((item) => buildNode(item))
274
276
  };
275
277
  setParents(menuTree, null);
276
278
  return toMap(menuTree);
@@ -280,8 +282,8 @@ class MenuService {
280
282
  const menuNode = this.menuMap.get(menuItem);
281
283
  const children = menuNode?.parent?.children.map((i) => i.item);
282
284
  const activeSibling = this.activeNodePath.find((i) => children?.includes(i.item));
283
- const activeParentIndex = this.activeNodePath.indexOf(menuNode?.parent);
284
285
  if (activeSibling) {
286
+ const activeParentIndex = this.activeNodePath.indexOf(menuNode?.parent);
285
287
  this._removeFromActivePath(activeParentIndex !== -1 ? activeSibling.item : this.activeNodePath[0].item);
286
288
  }
287
289
  }
@@ -331,8 +333,8 @@ class MenuService {
331
333
  focusRight(focusedNode);
332
334
  }
333
335
  }
334
- else if (KeyUtil.isKeyCode(event, ESCAPE) && this.menu.closeOnEscapeKey) {
335
- this.menu.close();
336
+ else if (KeyUtil.isKeyCode(event, ESCAPE) && this.menuComponent.closeOnEscapeKey) {
337
+ this.menuComponent.close();
336
338
  }
337
339
  else {
338
340
  matched = false;
@@ -343,7 +345,7 @@ class MenuService {
343
345
  }
344
346
  /** @hidden Emits an array of active menu items */
345
347
  _emitActivePath() {
346
- this.menu.activePath.emit(this.activeNodePath.map((node) => node.item));
348
+ this.menuComponent.activePath.emit(this.activeNodePath.map((node) => node.item));
347
349
  }
348
350
  /** @hidden Depending on direction returns closest enabled sibling of given node */
349
351
  _closestEnabled(node, direction) {
@@ -391,6 +393,13 @@ class MenuItemComponent {
391
393
  this._hoverSubscriptions = new Subscription();
392
394
  }
393
395
  /** @hidden */
396
+ ngOnInit() {
397
+ if (this.parentSubmenu) {
398
+ this._submenu = this.parentSubmenu;
399
+ this._submenu._registerItem(this);
400
+ }
401
+ }
402
+ /** @hidden */
394
403
  ngAfterContentInit() {
395
404
  this._setMenuService();
396
405
  this._initialiseItemState();
@@ -409,12 +418,15 @@ class MenuItemComponent {
409
418
  }
410
419
  /** @hidden */
411
420
  ngOnDestroy() {
421
+ if (this.parentSubmenu) {
422
+ this._submenu?._unregisterItem(this);
423
+ }
412
424
  this._subscriptions.unsubscribe();
413
425
  this._hoverSubscriptions.unsubscribe();
414
426
  }
415
427
  /** Whether menu item has popup (desktop mode) */
416
428
  get hasPopup() {
417
- return !!this.submenu && (!this.menuService?.menu || !this.menuService?.menu.mobile);
429
+ return !!this.submenu && (!this.menuService?.menuComponent || !this.menuService?.menuComponent.mobile);
418
430
  }
419
431
  /** Focuses Menu Item interactive element */
420
432
  focus() {
@@ -447,7 +459,7 @@ class MenuItemComponent {
447
459
  const hoverSubscriptions = new Subscription();
448
460
  const mouseEnter$ = fromEvent(this.menuInteractive.elementRef.nativeElement, 'mouseenter');
449
461
  const mouseLeave$ = fromEvent(this.menuInteractive.elementRef.nativeElement, 'mouseleave');
450
- const timerFactory$ = defer(() => timer(this.menuService ? this.menuService.menu.openOnHoverTime : 0).pipe(takeUntil(mouseLeave$)));
462
+ const timerFactory$ = defer(() => timer(this.menuService ? this.menuService.menuComponent.openOnHoverTime : 0).pipe(takeUntil(mouseLeave$)));
451
463
  // Set active on hover
452
464
  hoverSubscriptions.add(mouseEnter$
453
465
  .pipe(filter(() => !!this.menuService), switchMap(() => timerFactory$))
@@ -494,7 +506,7 @@ class MenuItemComponent {
494
506
  }
495
507
  }
496
508
  MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: MenuItemComponent, deps: [{ token: i0.ElementRef }, { token: MenuService, optional: true }, { token: i0.ChangeDetectorRef }, { token: SUBMENU, optional: true }], target: i0.ɵɵFactoryTarget.Component });
497
- MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: { disabled: "disabled", itemId: "itemId", submenu: "submenu" }, outputs: { onSelect: "onSelect" }, host: { attributes: { "attr.role": "menuitem" }, properties: { "class.fd-menu__item": "true" } }, queries: [{ propertyName: "menuItemTitle", first: true, predicate: MenuTitleDirective, descendants: true }, { propertyName: "menuInteractive", first: true, predicate: MenuInteractiveDirective, descendants: true }], exportAs: ["fd-menu-item"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-container *ngIf=\"hasPopup && submenu\">\n <ul\n class=\"fd-menu__sublist\"\n role=\"menu\"\n [attr.id]=\"itemId\"\n [attr.aria-hidden]=\"!submenuVisible\"\n [attr.aria-label]=\"submenu.ariaLabel\"\n [attr.aria-labelledby]=\"submenu.ariaLabelledby\"\n >\n <ng-container *ngTemplateOutlet=\"submenu.templateRef\"></ng-container>\n </ul>\n</ng-container>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
509
+ MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: { disabled: "disabled", itemId: "itemId", submenu: "submenu", parentSubmenu: "parentSubmenu" }, outputs: { onSelect: "onSelect" }, host: { attributes: { "attr.role": "menuitem" }, properties: { "class.fd-menu__item": "true" } }, queries: [{ propertyName: "menuItemTitle", first: true, predicate: MenuTitleDirective, descendants: true }, { propertyName: "menuInteractive", first: true, predicate: MenuInteractiveDirective, descendants: true }], exportAs: ["fd-menu-item"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-container *ngIf=\"hasPopup && submenu\">\n <ul\n class=\"fd-menu__sublist\"\n role=\"menu\"\n [attr.id]=\"itemId\"\n [attr.aria-hidden]=\"!submenuVisible\"\n [attr.aria-label]=\"submenu.ariaLabel\"\n [attr.aria-labelledby]=\"submenu.ariaLabelledby\"\n >\n <ng-container *ngTemplateOutlet=\"submenu.templateRef\"></ng-container>\n </ul>\n</ng-container>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
498
510
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: MenuItemComponent, decorators: [{
499
511
  type: Component,
500
512
  args: [{ selector: 'li[fd-menu-item]', exportAs: 'fd-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
@@ -514,6 +526,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
514
526
  type: Input
515
527
  }], submenu: [{
516
528
  type: Input
529
+ }], parentSubmenu: [{
530
+ type: Input
517
531
  }],
518
532
  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
519
533
  onSelect: [{
@@ -526,9 +540,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
526
540
  args: [MenuInteractiveDirective]
527
541
  }] } });
528
542
  class SubmenuComponent {
543
+ constructor() {
544
+ /** @hidden */
545
+ this._registeredItems = [];
546
+ /** @hidden */
547
+ this._menuItemsChange$ = new Subject();
548
+ }
549
+ /** @hidden */
550
+ get menuItems() {
551
+ return this._projectedItems.length ? this._projectedItems.toArray() : this._registeredItems;
552
+ }
553
+ /** @hidden */
554
+ ngAfterContentInit() {
555
+ this._projectedItems.changes.subscribe(() => this._menuItemsChange$.next());
556
+ }
557
+ /** @hidden method for manually registering item when it's not visible for @ContentChildren */
558
+ _registerItem(item) {
559
+ this._registeredItems.push(item);
560
+ this._menuItemsChange$.next();
561
+ }
562
+ /** @hidden method for manually unregistering item when it's not visible for @ContentChildren */
563
+ _unregisterItem(item) {
564
+ this._registeredItems = this._registeredItems.filter((i) => i !== item);
565
+ this._menuItemsChange$.next();
566
+ }
529
567
  }
530
568
  SubmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: SubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
531
- SubmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: SubmenuComponent, selector: "fd-submenu", inputs: { ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, providers: [{ provide: SUBMENU, useExisting: SubmenuComponent }], queries: [{ propertyName: "menuItems", predicate: MenuItemComponent }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["fdSubmenu"], ngImport: i0, template: `
569
+ SubmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: SubmenuComponent, selector: "fd-submenu", inputs: { ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, providers: [{ provide: SUBMENU, useExisting: SubmenuComponent }], queries: [{ propertyName: "_projectedItems", predicate: MenuItemComponent }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["fdSubmenu"], ngImport: i0, template: `
532
570
  <ng-template>
533
571
  <ng-content></ng-content>
534
572
  </ng-template>
@@ -554,7 +592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
554
592
  }], templateRef: [{
555
593
  type: ViewChild,
556
594
  args: [TemplateRef]
557
- }], menuItems: [{
595
+ }], _projectedItems: [{
558
596
  type: ContentChildren,
559
597
  args: [MenuItemComponent]
560
598
  }] } });
@@ -919,27 +957,34 @@ class MenuComponent extends BasePopoverClass {
919
957
  this.id = `fd-menu-${menuUniqueId++}`;
920
958
  /** Emits array of active menu items */
921
959
  this.activePath = new EventEmitter();
922
- /** Whether use menu in mobile mode */
923
- this.mobile = false;
924
- /** @hidden Whether Popover with the menu is opened */
925
- this.isOpen = false;
960
+ /** @hidden Whether use a menu in mobile mode */
961
+ this._mobile = false;
926
962
  /** @hidden */
927
963
  this._subscriptions = new Subscription();
928
964
  }
929
965
  /** Set menu in mobile mode */
930
- // eslint-disable-next-line @angular-eslint/no-input-rename
931
- set setMobileMode(value) {
932
- this.mobile = value;
966
+ set mobile(value) {
967
+ this._mobile = coerceBooleanProperty(value);
933
968
  this._menuService.setMenuMode(this.mobile);
934
969
  }
970
+ get mobile() {
971
+ return this._mobile;
972
+ }
973
+ /** @hidden */
974
+ get _popoverConfig() {
975
+ return {
976
+ ...this,
977
+ additionalBodyClass: (this.additionalBodyClass ?? '') + ' fd-popover--menu'
978
+ };
979
+ }
935
980
  /** @hidden */
936
981
  ngOnInit() {
937
982
  /** keep isOpen up to date */
938
983
  this.isOpenChange.subscribe((isOpen) => {
939
984
  this.isOpen = isOpen;
985
+ // when popover got closed by its own mechanism (e.x. click outside)
986
+ // we need to clean up a menu as well
940
987
  if (!isOpen) {
941
- // when popover got closed by its own mechanism (e.x. click outside)
942
- // we need to clean up menu as well
943
988
  this._cleanUpMenuAfterClose();
944
989
  }
945
990
  this._changeDetectorRef.markForCheck();
@@ -947,15 +992,15 @@ class MenuComponent extends BasePopoverClass {
947
992
  }
948
993
  /** @hidden */
949
994
  ngAfterContentInit() {
950
- this._menuService.setMenuRoot(this);
995
+ this._menuService.setMenuComponent(this);
951
996
  this._listenOnMenuItemsChange();
952
997
  }
953
998
  /** @hidden */
954
999
  ngAfterViewInit() {
955
1000
  this._menuService.isMobileMode.subscribe((isMobile) => {
956
1001
  this._setupView();
1002
+ // Since it is mobile, it's needed to disable popoverService
957
1003
  if (isMobile) {
958
- // Since it is mobile it's needed to disable popoverService
959
1004
  this._popoverService.deactivate();
960
1005
  }
961
1006
  });
@@ -984,7 +1029,7 @@ class MenuComponent extends BasePopoverClass {
984
1029
  this.isOpen = true;
985
1030
  this.isOpenChange.emit(this.isOpen);
986
1031
  }
987
- if (!this.mobile) {
1032
+ else {
988
1033
  this._popoverService.open();
989
1034
  }
990
1035
  this._changeDetectorRef.markForCheck();
@@ -995,7 +1040,7 @@ class MenuComponent extends BasePopoverClass {
995
1040
  this.isOpen = false;
996
1041
  this.isOpenChange.emit(this.isOpen);
997
1042
  }
998
- if (!this.mobile) {
1043
+ else {
999
1044
  this._popoverService.close();
1000
1045
  }
1001
1046
  this._cleanUpMenuAfterClose();
@@ -1026,13 +1071,9 @@ class MenuComponent extends BasePopoverClass {
1026
1071
  }
1027
1072
  /** @hidden */
1028
1073
  _setupPopoverService() {
1029
- this._subscriptions.add(this._popoverService._onLoad.subscribe((elementRef) => this._manageKeyboardSupport(elementRef)));
1030
- this._popoverService.templateContent = this.menuRootTemplate;
1031
- this._popoverService.initialise(this._externalTrigger, this);
1032
- }
1033
- /** @hidden */
1034
- _manageKeyboardSupport(elementRef) {
1035
- this._menuService.addKeyboardSupport(elementRef);
1074
+ this._subscriptions.add(this._popoverService._onLoad.subscribe((elementRef) => this._menuService.addKeyboardSupport(elementRef)));
1075
+ this._popoverService.templateContent = this._menuRootTemplate;
1076
+ this._popoverService.initialise(this._externalTrigger, this._popoverConfig);
1036
1077
  }
1037
1078
  /** @hidden Open Menu in mobile mode */
1038
1079
  async _setupMobileMode() {
@@ -1040,15 +1081,15 @@ class MenuComponent extends BasePopoverClass {
1040
1081
  providers: [{ provide: MENU_COMPONENT, useValue: this }],
1041
1082
  parent: this._injector
1042
1083
  });
1043
- this._mobileModeComponentRef = await this._dynamicComponentService.createDynamicModule(this.menuRootTemplate, MenuMobileModule, MenuMobileComponent, this._viewContainerRef, injector);
1084
+ this._mobileModeComponentRef = await this._dynamicComponentService.createDynamicModule(this._menuRootTemplate, MenuMobileModule, MenuMobileComponent, this._viewContainerRef, injector);
1044
1085
  this._listenOnTriggerRefClicks();
1045
1086
  }
1046
1087
  /** @hidden Listen on menu items change and rebuild menu */
1047
1088
  _listenOnMenuItemsChange() {
1048
- this._subscriptions.add(this.menuItems.changes.subscribe(() => this._menuService.rebuildMenu()));
1049
- this.menuItems.forEach((m) => {
1050
- if (m.submenu && m.submenu.menuItems) {
1051
- this._subscriptions.add(m.submenu.menuItems.changes.subscribe(() => this._menuService.rebuildMenu()));
1089
+ this._subscriptions.add(this._menuItems.changes.subscribe(() => this._menuService.rebuildMenu()));
1090
+ this._menuItems.forEach((menuItem) => {
1091
+ if (menuItem.submenu?.menuItems) {
1092
+ this._subscriptions.add(menuItem.submenu._menuItemsChange$.subscribe(() => this._menuService.rebuildMenu()));
1052
1093
  }
1053
1094
  });
1054
1095
  }
@@ -1086,17 +1127,16 @@ class MenuComponent extends BasePopoverClass {
1086
1127
  }
1087
1128
  }
1088
1129
  MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.DialogConfig, optional: true }, { token: i0.Renderer2 }, { token: MenuService }, { token: i0.ChangeDetectorRef }, { token: i3$1.PopoverService }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i3.DynamicComponentService, optional: true }, { token: i5$1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
1089
- MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: MenuComponent, selector: "fd-menu", inputs: { setMobileMode: ["mobile", "setMobileMode"], disabled: "disabled", focusTrapped: "focusTrapped", openOnHoverTime: "openOnHoverTime", mobileConfig: "mobileConfig", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", id: "id" }, outputs: { activePath: "activePath" }, providers: [MenuService, PopoverService, contentDensityObserverProviders()], queries: [{ propertyName: "menuItems", predicate: MenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "menuRootTemplate", first: true, predicate: ["menuRootTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container #viewContainer></ng-container>\n\n<ng-template #menuRootTemplate>\n <nav\n class=\"fd-menu\"\n fdInitialFocus\n [enabled]=\"focusTrapped\"\n [id]=\"id\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"menu\"\n [class.fd-menu--compact]=\"_contentDensityObserver.isCompact$ | async\"\n [class.fd-menu--mobile]=\"mobile\"\n >\n <ul role=\"none\" class=\"fd-menu__list fd-menu__list--no-shadow\">\n <ng-content></ng-content>\n </ul>\n </nav>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog__body{--fdButton_Menu_Border_Radius:0}.fd-menu{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:20rem;padding:0;width:-moz-fit-content;width:fit-content}.fd-menu:after,.fd-menu:before{box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_Shadow1);border:0;border-radius:var(--fdButton_Menu_Border_Radius);box-shadow:var(--sapContent_Shadow1);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-menu__list:after,.fd-menu__list:before,.fd-menu__sublist:after,.fd-menu__sublist:before{box-sizing:inherit;font-size:inherit}.fd-menu__list--no-shadow,.fd-menu__sublist--no-shadow{box-shadow:none}.fd-menu__sublist{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;left:100%;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0 -.25rem;min-width:100%;padding:0;position:absolute;top:0;z-index:2}.fd-menu__sublist:after,.fd-menu__sublist:before{box-sizing:inherit;font-size:inherit}.fd-menu__sublist[dir=rtl],[dir=rtl] .fd-menu__sublist{left:auto;margin:.25rem -.25rem 0 0;right:100%}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{position:relative;width:100%}.fd-menu__list--overflow{flex-wrap:nowrap;overflow-y:scroll}.fd-menu__separator{-webkit-box-sizing:border-box;background-color:var(--sapGroup_ContentBorderColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:.0625rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-menu__separator:after,.fd-menu__separator:before{box-sizing:inherit;font-size:inherit}.fd-menu__item{-webkit-box-sizing:border-box;background-color:var(--sapList_Background);border:0;border-radius:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-menu__item:after,.fd-menu__item:before{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-child,.fd-menu__item:last-child .fd-menu__link:after{border-bottom-left-radius:var(--fdButton_Menu_Border_Radius);border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__link{-webkit-box-sizing:border-box;align-items:center;border:0;border-radius:inherit;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;outline:none;padding:.75rem 1rem .75rem .75rem;text-decoration:none;width:100%}.fd-menu__link:after,.fd-menu__link:before{box-sizing:inherit;font-size:inherit}.fd-menu__link.is-focus:after,.fd-menu__link:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);bottom:.0625rem;content:\"\";left:.0625rem;pointer-events:none;position:absolute;right:.0625rem;top:.0625rem}.fd-menu__link.is-hover,.fd-menu__link:hover{background-color:var(--sapList_Hover_Background)}.fd-menu__link.is-selected,.fd-menu__link[aria-selected=true]{background-color:var(--sapList_SelectionBackgroundColor);border-bottom:.0625rem solid var(--sapList_SelectionBorderColor)}.fd-menu__link.is-selected .fd-menu__addon-after,.fd-menu__link.is-selected .fd-menu__addon-before,.fd-menu__link.is-selected .fd-menu__shortcut,.fd-menu__link[aria-selected=true] .fd-menu__addon-after,.fd-menu__link[aria-selected=true] .fd-menu__addon-before,.fd-menu__link[aria-selected=true] .fd-menu__shortcut{color:var(--sapContent_NonInteractiveIconColor)}.fd-menu__link.is-selected.is-hover:not(:active):not(.is-active),.fd-menu__link.is-selected:hover:not(:active):not(.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active):not(.is-active),.fd-menu__link[aria-selected=true]:hover:not(:active):not(.is-active){background-color:var(--sapList_Hover_SelectionBackground)}.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{background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}.fd-menu__link.is-active:after,.fd-menu__link:active:after{display:none}.fd-menu__link.is-active .fd-menu__addon-after,.fd-menu__link.is-active .fd-menu__addon-before,.fd-menu__link.is-active .fd-menu__shortcut,.fd-menu__link.is-active .fd-menu__title,.fd-menu__link:active .fd-menu__addon-after,.fd-menu__link:active .fd-menu__addon-before,.fd-menu__link:active .fd-menu__shortcut,.fd-menu__link:active .fd-menu__title{color:var(--sapList_Active_TextColor)}.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.is-expanded:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active){background-color:var(--sapList_SelectionBackgroundColor);border-bottom:.0625rem solid var(--sapList_SelectionBorderColor)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__addon-after,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__addon-before,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__shortcut,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__addon-after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__addon-before,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__shortcut{color:var(--sapContent_NonInteractiveIconColor)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-hover:not(:active):not(.is-active),.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):hover:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-hover:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):hover:not(:active):not(.is-active){background-color:var(--sapList_Hover_SelectionBackground)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus{z-index:5}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus:after,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus:after{bottom:.125rem}.fd-menu__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdMenu_Text_Shadow);white-space:nowrap;width:100%}.fd-menu__title:after,.fd-menu__title:before{box-sizing:inherit;font-size:inherit}.fd-menu__addon-after,.fd-menu__addon-before{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;height:1.25rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;min-width:2.25rem;padding:0;text-shadow:var(--fdMenu_Text_Shadow);width:2.25rem}.fd-menu__addon-after:after,.fd-menu__addon-after:before,.fd-menu__addon-before:after,.fd-menu__addon-before:before{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-before{margin:0 0 0 -.75rem}.fd-menu__addon-after,.fd-menu__addon-before[dir=rtl],[dir=rtl] .fd-menu__addon-before{margin:0 -1rem 0 0}.fd-menu__addon-after[dir=rtl],[dir=rtl] .fd-menu__addon-after{margin:0 0 0 -.75rem}.fd-menu__addon-after--submenu{font-size:var(--sapFontSmallSize)}.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{text-rendering:optimizeLegibility;font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{content:\"\\e067\"}.fd-menu__shortcut{-webkit-box-sizing:border-box;-ms-flex-negative:0;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;white-space:nowrap}.fd-menu__shortcut:after,.fd-menu__shortcut:before{box-sizing:inherit;font-size:inherit}.fd-menu__shortcut[dir=rtl],[dir=rtl] .fd-menu__shortcut{padding-left:0;padding-right:1rem}.fd-menu--overflow{-webkit-box-shadow:var(--sapContent_Shadow1);border-radius:var(--fdButton_Menu_Border_Radius);box-shadow:var(--sapContent_Shadow1);overflow-y:scroll}.fd-menu--overflow .fd-menu__list{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-child{border-bottom-right-radius:0}.fd-menu--overflow .fd-menu__item:last-child[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--full-width{max-width:100%}.fd-menu--compact .fd-menu__link{height:2rem;padding:.375rem .75rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-after,.fd-menu--compact .fd-menu__link .fd-menu__addon-before{min-width:2rem;width:2rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-before{margin:0 0 0 -.5rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-after,.fd-menu--compact .fd-menu__link[dir=rtl] .fd-menu__addon-before,[dir=rtl] .fd-menu--compact .fd-menu__link .fd-menu__addon-before{margin:0 -.75rem 0 0}.fd-menu--compact .fd-menu__link[dir=rtl] .fd-menu__addon-after,[dir=rtl] .fd-menu--compact .fd-menu__link .fd-menu__addon-after{margin:0 0 0 -.5rem}.fd-menu--mobile{max-width:100%;width:100%}.fd-menu--mobile .fd-menu__list,.fd-menu--mobile .fd-menu__sublist{-webkit-box-shadow:none;border-radius:0;box-shadow:none;margin: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__list .fd-menu__link,.fd-menu--mobile .fd-menu__sublist .fd-menu__link{padding:.75rem 1rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-after,.fd-menu--mobile .fd-menu__list .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{min-width:2.75rem;width:2.75rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{margin:0 0 0 -1rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-after,.fd-menu--mobile .fd-menu__list[dir=rtl] .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist[dir=rtl] .fd-menu__addon-before,[dir=rtl] .fd-menu--mobile .fd-menu__list .fd-menu__addon-before,[dir=rtl] .fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{margin:0 -1rem 0 0}.fd-menu--mobile .fd-menu__list[dir=rtl] .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist[dir=rtl] .fd-menu__addon-after,[dir=rtl] .fd-menu--mobile .fd-menu__list .fd-menu__addon-after,[dir=rtl] .fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after{margin:0 0 0 -1rem}:host{display:inline}fd-menu .fd-menu__list,fd-menu .fd-menu__sublist{flex-wrap:nowrap}\n"], directives: [{ type: i3.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1130
+ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: MenuComponent, selector: "fd-menu", inputs: { mobile: "mobile", disabled: "disabled", focusTrapped: "focusTrapped", openOnHoverTime: "openOnHoverTime", mobileConfig: "mobileConfig", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", id: "id" }, outputs: { activePath: "activePath" }, providers: [MenuService, PopoverService, contentDensityObserverProviders()], queries: [{ propertyName: "_menuItems", predicate: MenuItemComponent }], viewQueries: [{ propertyName: "_menuRootTemplate", first: true, predicate: ["menuRootTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container #viewContainer></ng-container>\n\n<ng-template #menuRootTemplate>\n <nav\n class=\"fd-menu\"\n fdInitialFocus\n [enabled]=\"focusTrapped\"\n [id]=\"id\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"menu\"\n [class.fd-menu--compact]=\"_contentDensityObserver.isCompact$ | async\"\n [class.fd-menu--mobile]=\"mobile\"\n >\n <ul role=\"none\" class=\"fd-menu__list fd-menu__list--no-shadow\">\n <ng-content></ng-content>\n </ul>\n </nav>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog__body{--fdButton_Menu_Border_Radius:0}.fd-menu{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:20rem;padding:0;width:-moz-fit-content;width:fit-content}.fd-menu:after,.fd-menu:before{box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_Shadow1);border:0;border-radius:var(--fdButton_Menu_Border_Radius);box-shadow:var(--sapContent_Shadow1);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-menu__list:after,.fd-menu__list:before,.fd-menu__sublist:after,.fd-menu__sublist:before{box-sizing:inherit;font-size:inherit}.fd-menu__list--no-shadow,.fd-menu__sublist--no-shadow{box-shadow:none}.fd-menu__sublist{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;left:100%;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0 -.25rem;min-width:100%;padding:0;position:absolute;top:0;z-index:2}.fd-menu__sublist:after,.fd-menu__sublist:before{box-sizing:inherit;font-size:inherit}.fd-menu__sublist[dir=rtl],[dir=rtl] .fd-menu__sublist{left:auto;margin:.25rem -.25rem 0 0;right:100%}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{position:relative;width:100%}.fd-menu__list--overflow{flex-wrap:nowrap;overflow-y:scroll}.fd-menu__separator{-webkit-box-sizing:border-box;background-color:var(--sapGroup_ContentBorderColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:.0625rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-menu__separator:after,.fd-menu__separator:before{box-sizing:inherit;font-size:inherit}.fd-menu__item{-webkit-box-sizing:border-box;background-color:var(--sapList_Background);border:0;border-radius:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-menu__item:after,.fd-menu__item:before{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-child,.fd-menu__item:last-child .fd-menu__link:after{border-bottom-left-radius:var(--fdButton_Menu_Border_Radius);border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__link{-webkit-box-sizing:border-box;align-items:center;border:0;border-radius:inherit;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;outline:none;padding:.75rem 1rem .75rem .75rem;text-decoration:none;width:100%}.fd-menu__link:after,.fd-menu__link:before{box-sizing:inherit;font-size:inherit}.fd-menu__link.is-focus:after,.fd-menu__link:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);bottom:.0625rem;content:\"\";left:.0625rem;pointer-events:none;position:absolute;right:.0625rem;top:.0625rem}.fd-menu__link.is-hover,.fd-menu__link:hover{background-color:var(--sapList_Hover_Background)}.fd-menu__link.is-selected,.fd-menu__link[aria-selected=true]{background-color:var(--sapList_SelectionBackgroundColor);border-bottom:.0625rem solid var(--sapList_SelectionBorderColor)}.fd-menu__link.is-selected .fd-menu__addon-after,.fd-menu__link.is-selected .fd-menu__addon-before,.fd-menu__link.is-selected .fd-menu__shortcut,.fd-menu__link[aria-selected=true] .fd-menu__addon-after,.fd-menu__link[aria-selected=true] .fd-menu__addon-before,.fd-menu__link[aria-selected=true] .fd-menu__shortcut{color:var(--sapContent_NonInteractiveIconColor)}.fd-menu__link.is-selected.is-hover:not(:active):not(.is-active),.fd-menu__link.is-selected:hover:not(:active):not(.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active):not(.is-active),.fd-menu__link[aria-selected=true]:hover:not(:active):not(.is-active){background-color:var(--sapList_Hover_SelectionBackground)}.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{background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}.fd-menu__link.is-active:after,.fd-menu__link:active:after{display:none}.fd-menu__link.is-active .fd-menu__addon-after,.fd-menu__link.is-active .fd-menu__addon-before,.fd-menu__link.is-active .fd-menu__shortcut,.fd-menu__link.is-active .fd-menu__title,.fd-menu__link:active .fd-menu__addon-after,.fd-menu__link:active .fd-menu__addon-before,.fd-menu__link:active .fd-menu__shortcut,.fd-menu__link:active .fd-menu__title{color:var(--sapList_Active_TextColor)}.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.is-expanded:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active){background-color:var(--sapList_SelectionBackgroundColor);border-bottom:.0625rem solid var(--sapList_SelectionBorderColor)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__addon-after,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__addon-before,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__shortcut,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__addon-after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__addon-before,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__shortcut{color:var(--sapContent_NonInteractiveIconColor)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-hover:not(:active):not(.is-active),.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):hover:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-hover:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):hover:not(:active):not(.is-active){background-color:var(--sapList_Hover_SelectionBackground)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus{z-index:5}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus:after,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus:after{bottom:.125rem}.fd-menu__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdMenu_Text_Shadow);white-space:nowrap;width:100%}.fd-menu__title:after,.fd-menu__title:before{box-sizing:inherit;font-size:inherit}.fd-menu__addon-after,.fd-menu__addon-before{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;height:1.25rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;min-width:2.25rem;padding:0;text-shadow:var(--fdMenu_Text_Shadow);width:2.25rem}.fd-menu__addon-after:after,.fd-menu__addon-after:before,.fd-menu__addon-before:after,.fd-menu__addon-before:before{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-before{margin:0 0 0 -.75rem}.fd-menu__addon-after,.fd-menu__addon-before[dir=rtl],[dir=rtl] .fd-menu__addon-before{margin:0 -1rem 0 0}.fd-menu__addon-after[dir=rtl],[dir=rtl] .fd-menu__addon-after{margin:0 0 0 -.75rem}.fd-menu__addon-after--submenu{font-size:var(--sapFontSmallSize)}.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{text-rendering:optimizeLegibility;font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{content:\"\\e067\"}.fd-menu__shortcut{-webkit-box-sizing:border-box;-ms-flex-negative:0;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;white-space:nowrap}.fd-menu__shortcut:after,.fd-menu__shortcut:before{box-sizing:inherit;font-size:inherit}.fd-menu__shortcut[dir=rtl],[dir=rtl] .fd-menu__shortcut{padding-left:0;padding-right:1rem}.fd-menu--overflow{-webkit-box-shadow:var(--sapContent_Shadow1);border-radius:var(--fdButton_Menu_Border_Radius);box-shadow:var(--sapContent_Shadow1);overflow-y:scroll}.fd-menu--overflow .fd-menu__list{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-child{border-bottom-right-radius:0}.fd-menu--overflow .fd-menu__item:last-child[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--full-width{max-width:100%}.fd-menu--compact .fd-menu__link{height:2rem;padding:.375rem .75rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-after,.fd-menu--compact .fd-menu__link .fd-menu__addon-before{min-width:2rem;width:2rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-before{margin:0 0 0 -.5rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-after,.fd-menu--compact .fd-menu__link[dir=rtl] .fd-menu__addon-before,[dir=rtl] .fd-menu--compact .fd-menu__link .fd-menu__addon-before{margin:0 -.75rem 0 0}.fd-menu--compact .fd-menu__link[dir=rtl] .fd-menu__addon-after,[dir=rtl] .fd-menu--compact .fd-menu__link .fd-menu__addon-after{margin:0 0 0 -.5rem}.fd-menu--mobile{max-width:100%;width:100%}.fd-menu--mobile .fd-menu__list,.fd-menu--mobile .fd-menu__sublist{-webkit-box-shadow:none;border-radius:0;box-shadow:none;margin: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__list .fd-menu__link,.fd-menu--mobile .fd-menu__sublist .fd-menu__link{padding:.75rem 1rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-after,.fd-menu--mobile .fd-menu__list .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{min-width:2.75rem;width:2.75rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{margin:0 0 0 -1rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-after,.fd-menu--mobile .fd-menu__list[dir=rtl] .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist[dir=rtl] .fd-menu__addon-before,[dir=rtl] .fd-menu--mobile .fd-menu__list .fd-menu__addon-before,[dir=rtl] .fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{margin:0 -1rem 0 0}.fd-menu--mobile .fd-menu__list[dir=rtl] .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist[dir=rtl] .fd-menu__addon-after,[dir=rtl] .fd-menu--mobile .fd-menu__list .fd-menu__addon-after,[dir=rtl] .fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after{margin:0 0 0 -1rem}:host{display:inline}fd-menu .fd-menu__list,fd-menu .fd-menu__sublist{flex-wrap:nowrap}.fd-popover--menu.fd-popover__popper{overflow:visible!important}\n"], directives: [{ type: i3.InitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus", "enabled", "focusLastElement"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1090
1131
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: MenuComponent, decorators: [{
1091
1132
  type: Component,
1092
- args: [{ selector: 'fd-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MenuService, PopoverService, contentDensityObserverProviders()], template: "<ng-container #viewContainer></ng-container>\n\n<ng-template #menuRootTemplate>\n <nav\n class=\"fd-menu\"\n fdInitialFocus\n [enabled]=\"focusTrapped\"\n [id]=\"id\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"menu\"\n [class.fd-menu--compact]=\"_contentDensityObserver.isCompact$ | async\"\n [class.fd-menu--mobile]=\"mobile\"\n >\n <ul role=\"none\" class=\"fd-menu__list fd-menu__list--no-shadow\">\n <ng-content></ng-content>\n </ul>\n </nav>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog__body{--fdButton_Menu_Border_Radius:0}.fd-menu{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:20rem;padding:0;width:-moz-fit-content;width:fit-content}.fd-menu:after,.fd-menu:before{box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_Shadow1);border:0;border-radius:var(--fdButton_Menu_Border_Radius);box-shadow:var(--sapContent_Shadow1);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-menu__list:after,.fd-menu__list:before,.fd-menu__sublist:after,.fd-menu__sublist:before{box-sizing:inherit;font-size:inherit}.fd-menu__list--no-shadow,.fd-menu__sublist--no-shadow{box-shadow:none}.fd-menu__sublist{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;left:100%;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0 -.25rem;min-width:100%;padding:0;position:absolute;top:0;z-index:2}.fd-menu__sublist:after,.fd-menu__sublist:before{box-sizing:inherit;font-size:inherit}.fd-menu__sublist[dir=rtl],[dir=rtl] .fd-menu__sublist{left:auto;margin:.25rem -.25rem 0 0;right:100%}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{position:relative;width:100%}.fd-menu__list--overflow{flex-wrap:nowrap;overflow-y:scroll}.fd-menu__separator{-webkit-box-sizing:border-box;background-color:var(--sapGroup_ContentBorderColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:.0625rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-menu__separator:after,.fd-menu__separator:before{box-sizing:inherit;font-size:inherit}.fd-menu__item{-webkit-box-sizing:border-box;background-color:var(--sapList_Background);border:0;border-radius:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-menu__item:after,.fd-menu__item:before{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-child,.fd-menu__item:last-child .fd-menu__link:after{border-bottom-left-radius:var(--fdButton_Menu_Border_Radius);border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__link{-webkit-box-sizing:border-box;align-items:center;border:0;border-radius:inherit;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;outline:none;padding:.75rem 1rem .75rem .75rem;text-decoration:none;width:100%}.fd-menu__link:after,.fd-menu__link:before{box-sizing:inherit;font-size:inherit}.fd-menu__link.is-focus:after,.fd-menu__link:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);bottom:.0625rem;content:\"\";left:.0625rem;pointer-events:none;position:absolute;right:.0625rem;top:.0625rem}.fd-menu__link.is-hover,.fd-menu__link:hover{background-color:var(--sapList_Hover_Background)}.fd-menu__link.is-selected,.fd-menu__link[aria-selected=true]{background-color:var(--sapList_SelectionBackgroundColor);border-bottom:.0625rem solid var(--sapList_SelectionBorderColor)}.fd-menu__link.is-selected .fd-menu__addon-after,.fd-menu__link.is-selected .fd-menu__addon-before,.fd-menu__link.is-selected .fd-menu__shortcut,.fd-menu__link[aria-selected=true] .fd-menu__addon-after,.fd-menu__link[aria-selected=true] .fd-menu__addon-before,.fd-menu__link[aria-selected=true] .fd-menu__shortcut{color:var(--sapContent_NonInteractiveIconColor)}.fd-menu__link.is-selected.is-hover:not(:active):not(.is-active),.fd-menu__link.is-selected:hover:not(:active):not(.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active):not(.is-active),.fd-menu__link[aria-selected=true]:hover:not(:active):not(.is-active){background-color:var(--sapList_Hover_SelectionBackground)}.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{background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}.fd-menu__link.is-active:after,.fd-menu__link:active:after{display:none}.fd-menu__link.is-active .fd-menu__addon-after,.fd-menu__link.is-active .fd-menu__addon-before,.fd-menu__link.is-active .fd-menu__shortcut,.fd-menu__link.is-active .fd-menu__title,.fd-menu__link:active .fd-menu__addon-after,.fd-menu__link:active .fd-menu__addon-before,.fd-menu__link:active .fd-menu__shortcut,.fd-menu__link:active .fd-menu__title{color:var(--sapList_Active_TextColor)}.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.is-expanded:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active){background-color:var(--sapList_SelectionBackgroundColor);border-bottom:.0625rem solid var(--sapList_SelectionBorderColor)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__addon-after,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__addon-before,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__shortcut,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__addon-after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__addon-before,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__shortcut{color:var(--sapContent_NonInteractiveIconColor)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-hover:not(:active):not(.is-active),.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):hover:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-hover:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):hover:not(:active):not(.is-active){background-color:var(--sapList_Hover_SelectionBackground)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus{z-index:5}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus:after,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus:after{bottom:.125rem}.fd-menu__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdMenu_Text_Shadow);white-space:nowrap;width:100%}.fd-menu__title:after,.fd-menu__title:before{box-sizing:inherit;font-size:inherit}.fd-menu__addon-after,.fd-menu__addon-before{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;height:1.25rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;min-width:2.25rem;padding:0;text-shadow:var(--fdMenu_Text_Shadow);width:2.25rem}.fd-menu__addon-after:after,.fd-menu__addon-after:before,.fd-menu__addon-before:after,.fd-menu__addon-before:before{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-before{margin:0 0 0 -.75rem}.fd-menu__addon-after,.fd-menu__addon-before[dir=rtl],[dir=rtl] .fd-menu__addon-before{margin:0 -1rem 0 0}.fd-menu__addon-after[dir=rtl],[dir=rtl] .fd-menu__addon-after{margin:0 0 0 -.75rem}.fd-menu__addon-after--submenu{font-size:var(--sapFontSmallSize)}.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{text-rendering:optimizeLegibility;font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{content:\"\\e067\"}.fd-menu__shortcut{-webkit-box-sizing:border-box;-ms-flex-negative:0;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;white-space:nowrap}.fd-menu__shortcut:after,.fd-menu__shortcut:before{box-sizing:inherit;font-size:inherit}.fd-menu__shortcut[dir=rtl],[dir=rtl] .fd-menu__shortcut{padding-left:0;padding-right:1rem}.fd-menu--overflow{-webkit-box-shadow:var(--sapContent_Shadow1);border-radius:var(--fdButton_Menu_Border_Radius);box-shadow:var(--sapContent_Shadow1);overflow-y:scroll}.fd-menu--overflow .fd-menu__list{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-child{border-bottom-right-radius:0}.fd-menu--overflow .fd-menu__item:last-child[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--full-width{max-width:100%}.fd-menu--compact .fd-menu__link{height:2rem;padding:.375rem .75rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-after,.fd-menu--compact .fd-menu__link .fd-menu__addon-before{min-width:2rem;width:2rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-before{margin:0 0 0 -.5rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-after,.fd-menu--compact .fd-menu__link[dir=rtl] .fd-menu__addon-before,[dir=rtl] .fd-menu--compact .fd-menu__link .fd-menu__addon-before{margin:0 -.75rem 0 0}.fd-menu--compact .fd-menu__link[dir=rtl] .fd-menu__addon-after,[dir=rtl] .fd-menu--compact .fd-menu__link .fd-menu__addon-after{margin:0 0 0 -.5rem}.fd-menu--mobile{max-width:100%;width:100%}.fd-menu--mobile .fd-menu__list,.fd-menu--mobile .fd-menu__sublist{-webkit-box-shadow:none;border-radius:0;box-shadow:none;margin: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__list .fd-menu__link,.fd-menu--mobile .fd-menu__sublist .fd-menu__link{padding:.75rem 1rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-after,.fd-menu--mobile .fd-menu__list .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{min-width:2.75rem;width:2.75rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{margin:0 0 0 -1rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-after,.fd-menu--mobile .fd-menu__list[dir=rtl] .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist[dir=rtl] .fd-menu__addon-before,[dir=rtl] .fd-menu--mobile .fd-menu__list .fd-menu__addon-before,[dir=rtl] .fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{margin:0 -1rem 0 0}.fd-menu--mobile .fd-menu__list[dir=rtl] .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist[dir=rtl] .fd-menu__addon-after,[dir=rtl] .fd-menu--mobile .fd-menu__list .fd-menu__addon-after,[dir=rtl] .fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after{margin:0 0 0 -1rem}:host{display:inline}fd-menu .fd-menu__list,fd-menu .fd-menu__sublist{flex-wrap:nowrap}\n"] }]
1133
+ args: [{ selector: 'fd-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MenuService, PopoverService, contentDensityObserverProviders()], template: "<ng-container #viewContainer></ng-container>\n\n<ng-template #menuRootTemplate>\n <nav\n class=\"fd-menu\"\n fdInitialFocus\n [enabled]=\"focusTrapped\"\n [id]=\"id\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"menu\"\n [class.fd-menu--compact]=\"_contentDensityObserver.isCompact$ | async\"\n [class.fd-menu--mobile]=\"mobile\"\n >\n <ul role=\"none\" class=\"fd-menu__list fd-menu__list--no-shadow\">\n <ng-content></ng-content>\n </ul>\n </nav>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog__body{--fdButton_Menu_Border_Radius:0}.fd-menu{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:20rem;padding:0;width:-moz-fit-content;width:fit-content}.fd-menu:after,.fd-menu:before{box-sizing:inherit;font-size:inherit}.fd-menu__list,.fd-menu__sublist{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_Shadow1);border:0;border-radius:var(--fdButton_Menu_Border_Radius);box-shadow:var(--sapContent_Shadow1);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-menu__list:after,.fd-menu__list:before,.fd-menu__sublist:after,.fd-menu__sublist:before{box-sizing:inherit;font-size:inherit}.fd-menu__list--no-shadow,.fd-menu__sublist--no-shadow{box-shadow:none}.fd-menu__sublist{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;left:100%;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0 -.25rem;min-width:100%;padding:0;position:absolute;top:0;z-index:2}.fd-menu__sublist:after,.fd-menu__sublist:before{box-sizing:inherit;font-size:inherit}.fd-menu__sublist[dir=rtl],[dir=rtl] .fd-menu__sublist{left:auto;margin:.25rem -.25rem 0 0;right:100%}.fd-menu__sublist[aria-hidden=true]{display:none}.fd-menu__list>.fd-menu__item{position:relative;width:100%}.fd-menu__list--overflow{flex-wrap:nowrap;overflow-y:scroll}.fd-menu__separator{-webkit-box-sizing:border-box;background-color:var(--sapGroup_ContentBorderColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:.0625rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-menu__separator:after,.fd-menu__separator:before{box-sizing:inherit;font-size:inherit}.fd-menu__item{-webkit-box-sizing:border-box;background-color:var(--sapList_Background);border:0;border-radius:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-menu__item:after,.fd-menu__item:before{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-child,.fd-menu__item:last-child .fd-menu__link:after{border-bottom-left-radius:var(--fdButton_Menu_Border_Radius);border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu__link{-webkit-box-sizing:border-box;align-items:center;border:0;border-radius:inherit;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;outline:none;padding:.75rem 1rem .75rem .75rem;text-decoration:none;width:100%}.fd-menu__link:after,.fd-menu__link:before{box-sizing:inherit;font-size:inherit}.fd-menu__link.is-focus:after,.fd-menu__link:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);bottom:.0625rem;content:\"\";left:.0625rem;pointer-events:none;position:absolute;right:.0625rem;top:.0625rem}.fd-menu__link.is-hover,.fd-menu__link:hover{background-color:var(--sapList_Hover_Background)}.fd-menu__link.is-selected,.fd-menu__link[aria-selected=true]{background-color:var(--sapList_SelectionBackgroundColor);border-bottom:.0625rem solid var(--sapList_SelectionBorderColor)}.fd-menu__link.is-selected .fd-menu__addon-after,.fd-menu__link.is-selected .fd-menu__addon-before,.fd-menu__link.is-selected .fd-menu__shortcut,.fd-menu__link[aria-selected=true] .fd-menu__addon-after,.fd-menu__link[aria-selected=true] .fd-menu__addon-before,.fd-menu__link[aria-selected=true] .fd-menu__shortcut{color:var(--sapContent_NonInteractiveIconColor)}.fd-menu__link.is-selected.is-hover:not(:active):not(.is-active),.fd-menu__link.is-selected:hover:not(:active):not(.is-active),.fd-menu__link[aria-selected=true].is-hover:not(:active):not(.is-active),.fd-menu__link[aria-selected=true]:hover:not(:active):not(.is-active){background-color:var(--sapList_Hover_SelectionBackground)}.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{background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}.fd-menu__link.is-active:after,.fd-menu__link:active:after{display:none}.fd-menu__link.is-active .fd-menu__addon-after,.fd-menu__link.is-active .fd-menu__addon-before,.fd-menu__link.is-active .fd-menu__shortcut,.fd-menu__link.is-active .fd-menu__title,.fd-menu__link:active .fd-menu__addon-after,.fd-menu__link:active .fd-menu__addon-before,.fd-menu__link:active .fd-menu__shortcut,.fd-menu__link:active .fd-menu__title{color:var(--sapList_Active_TextColor)}.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.is-expanded:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active){background-color:var(--sapList_SelectionBackgroundColor);border-bottom:.0625rem solid var(--sapList_SelectionBorderColor)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__addon-after,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__addon-before,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active) .fd-menu__shortcut,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__addon-after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__addon-before,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active) .fd-menu__shortcut{color:var(--sapContent_NonInteractiveIconColor)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-hover:not(:active):not(.is-active),.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):hover:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-hover:not(:active):not(.is-active),.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):hover:not(:active):not(.is-active){background-color:var(--sapList_Hover_SelectionBackground)}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus{z-index:5}.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus:after,.fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus:after,.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus:after{bottom:.125rem}.fd-menu__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdMenu_Text_Shadow);white-space:nowrap;width:100%}.fd-menu__title:after,.fd-menu__title:before{box-sizing:inherit;font-size:inherit}.fd-menu__addon-after,.fd-menu__addon-before{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;height:1.25rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;min-width:2.25rem;padding:0;text-shadow:var(--fdMenu_Text_Shadow);width:2.25rem}.fd-menu__addon-after:after,.fd-menu__addon-after:before,.fd-menu__addon-before:after,.fd-menu__addon-before:before{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-before{margin:0 0 0 -.75rem}.fd-menu__addon-after,.fd-menu__addon-before[dir=rtl],[dir=rtl] .fd-menu__addon-before{margin:0 -1rem 0 0}.fd-menu__addon-after[dir=rtl],[dir=rtl] .fd-menu__addon-after{margin:0 0 0 -.75rem}.fd-menu__addon-after--submenu{font-size:var(--sapFontSmallSize)}.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{text-rendering:optimizeLegibility;font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-menu__addon-after--submenu[dir=rtl]:before,[dir=rtl] .fd-menu__addon-after--submenu:before{content:\"\\e067\"}.fd-menu__shortcut{-webkit-box-sizing:border-box;-ms-flex-negative:0;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0 0 0 1rem;text-overflow:ellipsis;white-space:nowrap}.fd-menu__shortcut:after,.fd-menu__shortcut:before{box-sizing:inherit;font-size:inherit}.fd-menu__shortcut[dir=rtl],[dir=rtl] .fd-menu__shortcut{padding-left:0;padding-right:1rem}.fd-menu--overflow{-webkit-box-shadow:var(--sapContent_Shadow1);border-radius:var(--fdButton_Menu_Border_Radius);box-shadow:var(--sapContent_Shadow1);overflow-y:scroll}.fd-menu--overflow .fd-menu__list{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-child{border-bottom-right-radius:0}.fd-menu--overflow .fd-menu__item:last-child[dir=rtl],[dir=rtl] .fd-menu--overflow .fd-menu__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:var(--fdButton_Menu_Border_Radius)}.fd-menu--full-width{max-width:100%}.fd-menu--compact .fd-menu__link{height:2rem;padding:.375rem .75rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-after,.fd-menu--compact .fd-menu__link .fd-menu__addon-before{min-width:2rem;width:2rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-before{margin:0 0 0 -.5rem}.fd-menu--compact .fd-menu__link .fd-menu__addon-after,.fd-menu--compact .fd-menu__link[dir=rtl] .fd-menu__addon-before,[dir=rtl] .fd-menu--compact .fd-menu__link .fd-menu__addon-before{margin:0 -.75rem 0 0}.fd-menu--compact .fd-menu__link[dir=rtl] .fd-menu__addon-after,[dir=rtl] .fd-menu--compact .fd-menu__link .fd-menu__addon-after{margin:0 0 0 -.5rem}.fd-menu--mobile{max-width:100%;width:100%}.fd-menu--mobile .fd-menu__list,.fd-menu--mobile .fd-menu__sublist{-webkit-box-shadow:none;border-radius:0;box-shadow:none;margin: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__list .fd-menu__link,.fd-menu--mobile .fd-menu__sublist .fd-menu__link{padding:.75rem 1rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-after,.fd-menu--mobile .fd-menu__list .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{min-width:2.75rem;width:2.75rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{margin:0 0 0 -1rem}.fd-menu--mobile .fd-menu__list .fd-menu__addon-after,.fd-menu--mobile .fd-menu__list[dir=rtl] .fd-menu__addon-before,.fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist[dir=rtl] .fd-menu__addon-before,[dir=rtl] .fd-menu--mobile .fd-menu__list .fd-menu__addon-before,[dir=rtl] .fd-menu--mobile .fd-menu__sublist .fd-menu__addon-before{margin:0 -1rem 0 0}.fd-menu--mobile .fd-menu__list[dir=rtl] .fd-menu__addon-after,.fd-menu--mobile .fd-menu__sublist[dir=rtl] .fd-menu__addon-after,[dir=rtl] .fd-menu--mobile .fd-menu__list .fd-menu__addon-after,[dir=rtl] .fd-menu--mobile .fd-menu__sublist .fd-menu__addon-after{margin:0 0 0 -1rem}:host{display:inline}fd-menu .fd-menu__list,fd-menu .fd-menu__sublist{flex-wrap:nowrap}.fd-popover--menu.fd-popover__popper{overflow:visible!important}\n"] }]
1093
1134
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.DialogConfig, decorators: [{
1094
1135
  type: Optional
1095
1136
  }] }, { type: i0.Renderer2 }, { type: MenuService }, { type: i0.ChangeDetectorRef }, { type: i3$1.PopoverService }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i3.DynamicComponentService, decorators: [{
1096
1137
  type: Optional
1097
- }] }, { type: i5$1.ContentDensityObserver }]; }, propDecorators: { setMobileMode: [{
1098
- type: Input,
1099
- args: ['mobile']
1138
+ }] }, { type: i5$1.ContentDensityObserver }]; }, propDecorators: { mobile: [{
1139
+ type: Input
1100
1140
  }], disabled: [{
1101
1141
  type: Input
1102
1142
  }], focusTrapped: [{
@@ -1113,12 +1153,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
1113
1153
  type: Input
1114
1154
  }], activePath: [{
1115
1155
  type: Output
1116
- }], menuRootTemplate: [{
1156
+ }], _menuRootTemplate: [{
1117
1157
  type: ViewChild,
1118
1158
  args: ['menuRootTemplate']
1119
- }], menuItems: [{
1159
+ }], _menuItems: [{
1120
1160
  type: ContentChildren,
1121
- args: [MenuItemComponent, { descendants: true }]
1161
+ args: [MenuItemComponent]
1122
1162
  }] } });
1123
1163
 
1124
1164
  class MenuModule {