@ngrdt/menu 0.0.47 → 0.0.49

package/fesm2022/ngrdt-menu.mjs

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, computed, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, input, linkedSignal, signal, untracked, effect, afterRenderEffect, afterNextRender, HostListener, ViewChild, ViewChildren, ChangeDetectionStrategy, Component, booleanAttribute, numberAttribute, EnvironmentInjector, Directive, ViewEncapsulation, QueryList, NgModule } from '@angular/core';
+import { InjectionToken, computed, untracked, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, input, linkedSignal, signal, effect, afterRenderEffect, afterNextRender, HostListener, ViewChild, ViewChildren, ChangeDetectionStrategy, Component, booleanAttribute, numberAttribute, EnvironmentInjector, Directive, ViewEncapsulation, QueryList, NgModule } from '@angular/core';
+import * as i5 from '@ngrdt/icon';
+import { RdtIconRegistryService, RdtIcon, RdtIconOutletDirective } from '@ngrdt/icon';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { takeUntilDestroyed, toSignal, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
@@ -10,9 +12,7 @@ import { RdtRouterService, RdtAnyRouteActiveDirective } from '@ngrdt/router';
 import * as i4 from '@ngrdt/shortcuts';
 import { RdtShortcutService, RdtShortcut, RdtKeyListenerDirective } from '@ngrdt/shortcuts';
 import { RdtStringUtils, KB_CODE, RdtObjectUtils } from '@ngrdt/utils';
-import { delay, of, map, first, fromEvent, throttleTime, animationFrameScheduler, switchMap, withLatestFrom } from 'rxjs';
-import * as i5 from '@ngrdt/icon';
-import { RdtIconOutletDirective } from '@ngrdt/icon';
+import { delay, of, map, first, merge, fromEvent, throttleTime, animationFrameScheduler, switchMap, withLatestFrom } from 'rxjs';
 import { RDT_BUTTON_BASE_PROVIDER } from '@ngrdt/button';
 
 var RdtMenuShortcutMode;
@@ -135,7 +135,7 @@ function findNextItemWithPrefix(items, itemIndex, prefix) {
     prefix = prefix.toLocaleLowerCase();
     for (let i = (itemIndex + 1) % len; i !== itemIndex; i = (i + 1) % len) {
         const label = items[i].label.toLocaleLowerCase();
-        if (label.startsWith(prefix)) {
+        if (label.startsWith(prefix) && untracked(items[i].disabled) === false) {
             return i;
         }
     }
@@ -198,6 +198,8 @@ class RdtMenuOverlayComponent {
     router = inject(Router);
     document = inject(DOCUMENT);
     shortcutService = inject(RdtShortcutService);
+    iconRegistry = inject(RdtIconRegistryService);
+    arrowRightIcon = this.iconRegistry.getIcon(RdtIcon.MenuArrowRight);
     children;
     focusableElements;
     menuItemContainer;
@@ -740,7 +742,7 @@ class RdtMenuOverlayComponent {
             .subscribe((event) => this.onTabKeyPress(event));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtMenuOverlayComponent, isStandalone: false, selector: "rdt-menu-overlay", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: true, transformFunction: null }, preferredHorizontalDir: { classPropertyName: "preferredHorizontalDir", publicName: "preferredHorizontalDir", isSignal: true, isRequired: false, transformFunction: null }, preferredVerticalDir: { classPropertyName: "preferredVerticalDir", publicName: "preferredVerticalDir", isSignal: true, isRequired: false, transformFunction: null }, expandedInput: { classPropertyName: "expandedInput", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, autofocusItemInput: { classPropertyName: "autofocusItemInput", publicName: "autofocusItem", isSignal: true, isRequired: false, transformFunction: null }, anchorElementInput: { classPropertyName: "anchorElementInput", publicName: "anchorElement", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1", "role": "menu" }, listeners: { "window:focusout": "checkActiveElement($event)" }, properties: { "class.expanded": "expanded()", "style.z-index": "zIndex()" } }, viewQueries: [{ propertyName: "menuItemContainer", first: true, predicate: ["menuItemContainer"], descendants: true }, { propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], ngImport: i0, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  @for(item of item().items; track item; let i = $index) {\r\n  <li\r\n    role=\"presentation\"\r\n    class=\"menu-item\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    (pointerenter)=\"onItemPointerEnter(item)\"\r\n    rdtAnyRouteActive=\"menu-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [disabled]=\"item.disabled()\"\r\n      [ariaDisabled]=\"item.disabled()\"\r\n      [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n      [ariaExpanded]=\"item === expandedChild()?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        @if (item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if (item.items) {\r\n        <span class=\"menu-item-icon rdt-menu-icon-right\"></span>\r\n        } @else if (item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        }\r\n        <!-- TODO:\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-item-icon\"\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    @if (item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [queryParams]=\"item.queryParams\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    }\r\n\r\n    <!-- Child menus exist only if this menu is expanded. -->\r\n    <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n    @if (item.items && expanded()) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild()?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem()\"\r\n      [preferredHorizontalDir]=\"horizontalDir()?.dir!\"\r\n      [preferredVerticalDir]=\"verticalDir()?.dir!\"\r\n      [level]=\"level() + 1\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px))}:host.expanded{visibility:visible}ul.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-background);margin-top:0;margin-bottom:0;margin-block-start:0;margin-block-end:0}.menu-item-content{cursor:pointer;display:flex;align-items:center;width:100%;padding:var(--rdt-menu-item-padding);background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color);font-size:var(--rdt-menu-item-font-size);font-weight:var(--rdt-menu-item-font-weight);border:var(--rdt-menu-item-border);outline:var(--rdt-menu-item-outline)}.menu-item{display:flex;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-route-active-background);--rdt-menu-item-text-color: var(--rdt-menu-item-route-active-text-color);--rdt-menu-item-border: var(--rdt-menu-item-route-active-border);--rdt-menu-item-outline: var(--rdt-menu-item-route-active-outline)}.menu-item .menu-item-content:hover{--rdt-menu-item-background: var(--rdt-menu-item-hover-background);--rdt-menu-item-text-color: var(--rdt-menu-item-hover-text-color);--rdt-menu-item-border: var(--rdt-menu-item-hover-border);--rdt-menu-item-outline: var(--rdt-menu-item-hover-outline)}.menu-item .menu-item-content[aria-expanded=true]{--rdt-menu-item-background: var(--rdt-menu-item-expanded-background);--rdt-menu-item-text-color: var(--rdt-menu-item-expanded-text-color);--rdt-menu-item-border: var(--rdt-menu-item-expanded-border);--rdt-menu-item-outline: var(--rdt-menu-item-expanded-outline)}.menu-item .menu-item-content.focus-visible:focus,.menu-item .menu-item-content:focus-visible{--rdt-menu-item-background: var(--rdt-menu-item-focus-background);--rdt-menu-item-text-color: var(--rdt-menu-item-focus-text-color);--rdt-menu-item-border: var(--rdt-menu-item-focus-border);--rdt-menu-item-outline: var(--rdt-menu-item-focus-outline)}.menu-item .menu-item-content[disabled]{--rdt-menu-item-background: var(--rdt-menu-item-disabled-background);--rdt-menu-item-text-color: var(--rdt-menu-item-disabled-text-color);--rdt-menu-item-border: var(--rdt-menu-item-disabled-border);--rdt-menu-item-outline: var(--rdt-menu-item-disabled-outline);cursor:not-allowed}.menu-item-icon.rdt-menu-icon-right{width:0;height:0;border-top:var(--rdt-menu-default-icon-size) solid transparent;border-bottom:var(--rdt-menu-default-icon-size) solid transparent;border-left:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-item-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["rdtAnyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "directive", type: i5.RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtMenuOverlayComponent, isStandalone: false, selector: "rdt-menu-overlay", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: true, transformFunction: null }, preferredHorizontalDir: { classPropertyName: "preferredHorizontalDir", publicName: "preferredHorizontalDir", isSignal: true, isRequired: false, transformFunction: null }, preferredVerticalDir: { classPropertyName: "preferredVerticalDir", publicName: "preferredVerticalDir", isSignal: true, isRequired: false, transformFunction: null }, expandedInput: { classPropertyName: "expandedInput", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, autofocusItemInput: { classPropertyName: "autofocusItemInput", publicName: "autofocusItem", isSignal: true, isRequired: false, transformFunction: null }, anchorElementInput: { classPropertyName: "anchorElementInput", publicName: "anchorElement", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1", "role": "menu" }, listeners: { "window:focusout": "checkActiveElement($event)" }, properties: { "class.expanded": "expanded()", "style.z-index": "zIndex()" } }, viewQueries: [{ propertyName: "menuItemContainer", first: true, predicate: ["menuItemContainer"], descendants: true }, { propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], ngImport: i0, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  @for(item of item().items; track item; let i = $index) {\r\n  <li\r\n    role=\"presentation\"\r\n    class=\"menu-item\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    (pointerenter)=\"onItemPointerEnter(item)\"\r\n    rdtAnyRouteActive=\"menu-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [disabled]=\"item.disabled()\"\r\n      [ariaDisabled]=\"item.disabled()\"\r\n      [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n      [ariaExpanded]=\"item === expandedChild()?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        @if (item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if (item.items) { @if (arrowRightIcon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: arrowRightIcon }\"\r\n        ></ng-container>\r\n        } @else {\r\n        <span class=\"menu-item-icon rdt-menu-icon-right\"></span>\r\n        } } @else if (item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        }\r\n        <!-- TODO:\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-item-icon\"\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    @if (item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [queryParams]=\"item.queryParams\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    }\r\n\r\n    <!-- Child menus exist only if this menu is expanded. -->\r\n    <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n    @if (item.items && expanded()) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild()?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem()\"\r\n      [preferredHorizontalDir]=\"horizontalDir()?.dir!\"\r\n      [preferredVerticalDir]=\"verticalDir()?.dir!\"\r\n      [level]=\"level() + 1\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px))}:host.expanded{visibility:visible}ul.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-background);margin-top:0;margin-bottom:0;margin-block-start:0;margin-block-end:0}.menu-item-content{cursor:pointer;display:flex;align-items:center;width:100%;padding:var(--rdt-menu-item-padding);background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color);font-size:var(--rdt-menu-item-font-size);font-weight:var(--rdt-menu-item-font-weight);border:var(--rdt-menu-item-border);outline:var(--rdt-menu-item-outline)}.menu-item{display:flex;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-route-active-background);--rdt-menu-item-text-color: var(--rdt-menu-item-route-active-text-color);--rdt-menu-item-border: var(--rdt-menu-item-route-active-border);--rdt-menu-item-outline: var(--rdt-menu-item-route-active-outline)}.menu-item .menu-item-content:hover{--rdt-menu-item-background: var(--rdt-menu-item-hover-background);--rdt-menu-item-text-color: var(--rdt-menu-item-hover-text-color);--rdt-menu-item-border: var(--rdt-menu-item-hover-border);--rdt-menu-item-outline: var(--rdt-menu-item-hover-outline)}.menu-item .menu-item-content[aria-expanded=true]{--rdt-menu-item-background: var(--rdt-menu-item-expanded-background);--rdt-menu-item-text-color: var(--rdt-menu-item-expanded-text-color);--rdt-menu-item-border: var(--rdt-menu-item-expanded-border);--rdt-menu-item-outline: var(--rdt-menu-item-expanded-outline)}.menu-item .menu-item-content.focus-visible:focus,.menu-item .menu-item-content:focus-visible{--rdt-menu-item-background: var(--rdt-menu-item-focus-background);--rdt-menu-item-text-color: var(--rdt-menu-item-focus-text-color);--rdt-menu-item-border: var(--rdt-menu-item-focus-border);--rdt-menu-item-outline: var(--rdt-menu-item-focus-outline)}.menu-item .menu-item-content[disabled]{--rdt-menu-item-background: var(--rdt-menu-item-disabled-background);--rdt-menu-item-text-color: var(--rdt-menu-item-disabled-text-color);--rdt-menu-item-border: var(--rdt-menu-item-disabled-border);--rdt-menu-item-outline: var(--rdt-menu-item-disabled-outline);cursor:not-allowed}.menu-item-icon.rdt-menu-icon-right{width:0;height:0;border-top:var(--rdt-menu-default-icon-size) solid transparent;border-bottom:var(--rdt-menu-default-icon-size) solid transparent;border-left:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-item-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["rdtAnyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "directive", type: i5.RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuOverlayComponent, decorators: [{
             type: Component,
@@ -749,7 +751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         '[style.z-index]': 'zIndex()',
                         tabindex: '-1',
                         role: 'menu',
-                    }, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  @for(item of item().items; track item; let i = $index) {\r\n  <li\r\n    role=\"presentation\"\r\n    class=\"menu-item\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    (pointerenter)=\"onItemPointerEnter(item)\"\r\n    rdtAnyRouteActive=\"menu-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [disabled]=\"item.disabled()\"\r\n      [ariaDisabled]=\"item.disabled()\"\r\n      [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n      [ariaExpanded]=\"item === expandedChild()?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        @if (item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if (item.items) {\r\n        <span class=\"menu-item-icon rdt-menu-icon-right\"></span>\r\n        } @else if (item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        }\r\n        <!-- TODO:\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-item-icon\"\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    @if (item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [queryParams]=\"item.queryParams\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    }\r\n\r\n    <!-- Child menus exist only if this menu is expanded. -->\r\n    <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n    @if (item.items && expanded()) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild()?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem()\"\r\n      [preferredHorizontalDir]=\"horizontalDir()?.dir!\"\r\n      [preferredVerticalDir]=\"verticalDir()?.dir!\"\r\n      [level]=\"level() + 1\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px))}:host.expanded{visibility:visible}ul.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-background);margin-top:0;margin-bottom:0;margin-block-start:0;margin-block-end:0}.menu-item-content{cursor:pointer;display:flex;align-items:center;width:100%;padding:var(--rdt-menu-item-padding);background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color);font-size:var(--rdt-menu-item-font-size);font-weight:var(--rdt-menu-item-font-weight);border:var(--rdt-menu-item-border);outline:var(--rdt-menu-item-outline)}.menu-item{display:flex;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-route-active-background);--rdt-menu-item-text-color: var(--rdt-menu-item-route-active-text-color);--rdt-menu-item-border: var(--rdt-menu-item-route-active-border);--rdt-menu-item-outline: var(--rdt-menu-item-route-active-outline)}.menu-item .menu-item-content:hover{--rdt-menu-item-background: var(--rdt-menu-item-hover-background);--rdt-menu-item-text-color: var(--rdt-menu-item-hover-text-color);--rdt-menu-item-border: var(--rdt-menu-item-hover-border);--rdt-menu-item-outline: var(--rdt-menu-item-hover-outline)}.menu-item .menu-item-content[aria-expanded=true]{--rdt-menu-item-background: var(--rdt-menu-item-expanded-background);--rdt-menu-item-text-color: var(--rdt-menu-item-expanded-text-color);--rdt-menu-item-border: var(--rdt-menu-item-expanded-border);--rdt-menu-item-outline: var(--rdt-menu-item-expanded-outline)}.menu-item .menu-item-content.focus-visible:focus,.menu-item .menu-item-content:focus-visible{--rdt-menu-item-background: var(--rdt-menu-item-focus-background);--rdt-menu-item-text-color: var(--rdt-menu-item-focus-text-color);--rdt-menu-item-border: var(--rdt-menu-item-focus-border);--rdt-menu-item-outline: var(--rdt-menu-item-focus-outline)}.menu-item .menu-item-content[disabled]{--rdt-menu-item-background: var(--rdt-menu-item-disabled-background);--rdt-menu-item-text-color: var(--rdt-menu-item-disabled-text-color);--rdt-menu-item-border: var(--rdt-menu-item-disabled-border);--rdt-menu-item-outline: var(--rdt-menu-item-disabled-outline);cursor:not-allowed}.menu-item-icon.rdt-menu-icon-right{width:0;height:0;border-top:var(--rdt-menu-default-icon-size) solid transparent;border-bottom:var(--rdt-menu-default-icon-size) solid transparent;border-left:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-item-text-color)}\n"] }]
+                    }, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  @for(item of item().items; track item; let i = $index) {\r\n  <li\r\n    role=\"presentation\"\r\n    class=\"menu-item\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    (pointerenter)=\"onItemPointerEnter(item)\"\r\n    rdtAnyRouteActive=\"menu-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [disabled]=\"item.disabled()\"\r\n      [ariaDisabled]=\"item.disabled()\"\r\n      [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n      [ariaExpanded]=\"item === expandedChild()?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        @if (item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if (item.items) { @if (arrowRightIcon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: arrowRightIcon }\"\r\n        ></ng-container>\r\n        } @else {\r\n        <span class=\"menu-item-icon rdt-menu-icon-right\"></span>\r\n        } } @else if (item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        }\r\n        <!-- TODO:\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-item-icon\"\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    @if (item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [queryParams]=\"item.queryParams\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    }\r\n\r\n    <!-- Child menus exist only if this menu is expanded. -->\r\n    <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n    @if (item.items && expanded()) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild()?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem()\"\r\n      [preferredHorizontalDir]=\"horizontalDir()?.dir!\"\r\n      [preferredVerticalDir]=\"verticalDir()?.dir!\"\r\n      [level]=\"level() + 1\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px))}:host.expanded{visibility:visible}ul.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-background);margin-top:0;margin-bottom:0;margin-block-start:0;margin-block-end:0}.menu-item-content{cursor:pointer;display:flex;align-items:center;width:100%;padding:var(--rdt-menu-item-padding);background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color);font-size:var(--rdt-menu-item-font-size);font-weight:var(--rdt-menu-item-font-weight);border:var(--rdt-menu-item-border);outline:var(--rdt-menu-item-outline)}.menu-item{display:flex;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-route-active-background);--rdt-menu-item-text-color: var(--rdt-menu-item-route-active-text-color);--rdt-menu-item-border: var(--rdt-menu-item-route-active-border);--rdt-menu-item-outline: var(--rdt-menu-item-route-active-outline)}.menu-item .menu-item-content:hover{--rdt-menu-item-background: var(--rdt-menu-item-hover-background);--rdt-menu-item-text-color: var(--rdt-menu-item-hover-text-color);--rdt-menu-item-border: var(--rdt-menu-item-hover-border);--rdt-menu-item-outline: var(--rdt-menu-item-hover-outline)}.menu-item .menu-item-content[aria-expanded=true]{--rdt-menu-item-background: var(--rdt-menu-item-expanded-background);--rdt-menu-item-text-color: var(--rdt-menu-item-expanded-text-color);--rdt-menu-item-border: var(--rdt-menu-item-expanded-border);--rdt-menu-item-outline: var(--rdt-menu-item-expanded-outline)}.menu-item .menu-item-content.focus-visible:focus,.menu-item .menu-item-content:focus-visible{--rdt-menu-item-background: var(--rdt-menu-item-focus-background);--rdt-menu-item-text-color: var(--rdt-menu-item-focus-text-color);--rdt-menu-item-border: var(--rdt-menu-item-focus-border);--rdt-menu-item-outline: var(--rdt-menu-item-focus-outline)}.menu-item .menu-item-content[disabled]{--rdt-menu-item-background: var(--rdt-menu-item-disabled-background);--rdt-menu-item-text-color: var(--rdt-menu-item-disabled-text-color);--rdt-menu-item-border: var(--rdt-menu-item-disabled-border);--rdt-menu-item-outline: var(--rdt-menu-item-disabled-outline);cursor:not-allowed}.menu-item-icon.rdt-menu-icon-right{width:0;height:0;border-top:var(--rdt-menu-default-icon-size) solid transparent;border-bottom:var(--rdt-menu-default-icon-size) solid transparent;border-left:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-item-text-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { children: [{
                 type: ViewChildren,
                 args: [RdtMenuOverlayComponent]
@@ -784,6 +786,7 @@ class RdtMenuBaseComponent {
     router = inject(Router);
     shortcutService = inject(RdtShortcutService);
     injector = inject(EnvironmentInjector);
+    iconRegistry = inject(RdtIconRegistryService);
     children;
     focusableElements;
     expandedChild = signal(null);
@@ -830,18 +833,18 @@ class RdtMenuBaseComponent {
     constructor() {
         this.listenShortcuts();
         afterNextRender(() => {
-            this.listenWindowResize();
+            this.listenWindowResizeScroll();
             this.measure();
             this.recalculateChildren();
         });
     }
-    recalcChildrenEffect = effect(() => {
-        this.recalculateChildren();
-    });
+    recalcChildrenEffect = effect(() => this.recalculateChildren());
     recalculateChildren() {
+        const preferredH = this.preferredHorizontalDir();
+        const preferredV = this.preferredVerticalDir();
         if (this.children) {
             this.children.forEach((child) => {
-                child.recalculatePosition(this.preferredHorizontalDir(), this.preferredVerticalDir());
+                child.recalculatePosition(preferredH, preferredV);
             });
         }
     }
@@ -1073,8 +1076,8 @@ class RdtMenuBaseComponent {
             this._buttonContainerRect = undefined;
         }
     }
-    listenWindowResize() {
-        fromEvent(window, 'resize')
+    listenWindowResizeScroll() {
+        merge(fromEvent(window, 'resize'), fromEvent(window, 'scroll'))
             .pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.measure();
@@ -1200,6 +1203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class RdtMenuBarComponent extends RdtMenuBaseComponent {
     buttonContainerRef;
+    arrowDownIcon = this.iconRegistry.getIcon(RdtIcon.MenuArrowDown);
     get buttonContainer() {
         return this.buttonContainerRef?.nativeElement;
     }
@@ -1213,7 +1217,7 @@ class RdtMenuBarComponent extends RdtMenuBaseComponent {
                 provide: RdtMenuBaseComponent,
                 useExisting: RdtMenuBarComponent,
             },
-        ], viewQueries: [{ propertyName: "buttonContainerRef", first: true, predicate: ["buttonContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n  @for(item of filteredItems(); track item; let i = $index) {\r\n  <li\r\n    class=\"menu-bar-item\"\r\n    role=\"presentation\"\r\n    rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      (pointerenter)=\"onItemPointerEnter(item)\"\r\n      [disabled]=\"item.disabled()\"\r\n      [ariaDisabled]=\"item.disabled()\"\r\n      [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n      [ariaExpanded]=\"item === expandedChild()?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if(item.items) {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n        } @else if (item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if(item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if(item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [target]=\"item.target!\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if(item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.items) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild()?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;text-decoration:none;box-sizing:border-box}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}.rdt-menu-root{margin-left:0}.rdt-menu-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--rdt-menu-bar-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;margin-top:0;margin-block-start:0;margin-block-end:0;padding-left:0}.menu-bar-item{pointer-events:all;margin:var(--rdt-menu-bar-item-margin);position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-route-active-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-route-active-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-route-active-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-route-active-outline)}.menu-bar-item [aria-expanded=true].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-expanded-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-expanded-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-expanded-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-expanded-outline)}.menu-bar-item [disabled].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-disabled-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-disabled-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-disabled-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-disabled-outline);cursor:not-allowed}.menu-bar-item-content{cursor:pointer;display:flex;align-items:center;overflow:hidden;padding:var(--rdt-menu-bar-item-padding);border-radius:var(--rdt-menu-bar-item-border-radius);border:var(--rdt-menu-bar-item-border);background-color:var(--rdt-menu-bar-item-background);color:var(--rdt-menu-bar-item-text-color);font-weight:var(--rdt-menu-bar-item-font-weight);font-size:var(--rdt-menu-bar-item-font-size, inherit);outline:var(--rdt-menu-bar-item-outline)}.menu-bar-item-content:hover:not([disabled]){--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-hover-outline)}.menu-bar-item .menu-bar-item-content:not([disabled]).focus-visible:focus,.menu-bar-item .menu-bar-item-content:not([disabled]):focus-visible{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-focus-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-focus-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-focus-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-focus-outline)}.menu-bar-item-icon.rdt-menu-icon-down{width:0;height:0;border-left:var(--rdt-menu-default-icon-size) solid transparent;border-right:var(--rdt-menu-default-icon-size) solid transparent;border-top:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-bar-item-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["rdtAnyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "directive", type: i5.RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "buttonContainerRef", first: true, predicate: ["buttonContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n  @for(item of filteredItems(); track item; let i = $index) {\r\n  <li\r\n    class=\"menu-bar-item\"\r\n    role=\"presentation\"\r\n    rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      (pointerenter)=\"onItemPointerEnter(item)\"\r\n      [disabled]=\"item.disabled()\"\r\n      [ariaDisabled]=\"item.disabled()\"\r\n      [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n      [ariaExpanded]=\"item === expandedChild()?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if(item.items) { @if (arrowDownIcon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: arrowDownIcon }\"\r\n        ></ng-container>\r\n        } @else {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n        } } @else if (item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if(item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if(item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [target]=\"item.target!\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if(item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.items) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild()?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;text-decoration:none;box-sizing:border-box}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}.rdt-menu-root{margin-left:0}.rdt-menu-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--rdt-menu-bar-padding)}.menu-bar-item-container{display:flex;flex-wrap:wrap;list-style-type:none;margin-bottom:0;margin-top:0;margin-block-start:0;margin-block-end:0;padding-left:0}.menu-bar-item{pointer-events:all;margin:var(--rdt-menu-bar-item-margin);position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-route-active-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-route-active-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-route-active-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-route-active-outline)}.menu-bar-item [aria-expanded=true].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-expanded-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-expanded-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-expanded-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-expanded-outline)}.menu-bar-item [disabled].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-disabled-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-disabled-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-disabled-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-disabled-outline);cursor:not-allowed}.menu-bar-item-content{cursor:pointer;display:flex;align-items:center;overflow:hidden;padding:var(--rdt-menu-bar-item-padding);border-radius:var(--rdt-menu-bar-item-border-radius);border:var(--rdt-menu-bar-item-border);background-color:var(--rdt-menu-bar-item-background);color:var(--rdt-menu-bar-item-text-color);font-weight:var(--rdt-menu-bar-item-font-weight);font-size:var(--rdt-menu-bar-item-font-size, inherit);outline:var(--rdt-menu-bar-item-outline)}.menu-bar-item-content:hover:not([disabled]){--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-hover-outline)}.menu-bar-item .menu-bar-item-content:not([disabled]).focus-visible:focus,.menu-bar-item .menu-bar-item-content:not([disabled]):focus-visible{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-focus-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-focus-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-focus-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-focus-outline)}.menu-bar-item-icon.rdt-menu-icon-down{width:0;height:0;border-left:var(--rdt-menu-default-icon-size) solid transparent;border-right:var(--rdt-menu-default-icon-size) solid transparent;border-top:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-bar-item-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["rdtAnyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "directive", type: i5.RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
             type: Component,
@@ -1224,7 +1228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         },
                     ], standalone: false, host: {
                         role: 'menubar',
-                    }, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n  @for(item of filteredItems(); track item; let i = $index) {\r\n  <li\r\n    class=\"menu-bar-item\"\r\n    role=\"presentation\"\r\n    rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      (pointerenter)=\"onItemPointerEnter(item)\"\r\n      [disabled]=\"item.disabled()\"\r\n      [ariaDisabled]=\"item.disabled()\"\r\n      [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n      [ariaExpanded]=\"item === expandedChild()?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if(item.items) {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n        } @else if (item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if(item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if(item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [target]=\"item.target!\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if(item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.items) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild()?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;text-decoration:none;box-sizing:border-box}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}.rdt-menu-root{margin-left:0}.rdt-menu-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--rdt-menu-bar-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;margin-top:0;margin-block-start:0;margin-block-end:0;padding-left:0}.menu-bar-item{pointer-events:all;margin:var(--rdt-menu-bar-item-margin);position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-route-active-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-route-active-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-route-active-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-route-active-outline)}.menu-bar-item [aria-expanded=true].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-expanded-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-expanded-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-expanded-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-expanded-outline)}.menu-bar-item [disabled].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-disabled-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-disabled-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-disabled-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-disabled-outline);cursor:not-allowed}.menu-bar-item-content{cursor:pointer;display:flex;align-items:center;overflow:hidden;padding:var(--rdt-menu-bar-item-padding);border-radius:var(--rdt-menu-bar-item-border-radius);border:var(--rdt-menu-bar-item-border);background-color:var(--rdt-menu-bar-item-background);color:var(--rdt-menu-bar-item-text-color);font-weight:var(--rdt-menu-bar-item-font-weight);font-size:var(--rdt-menu-bar-item-font-size, inherit);outline:var(--rdt-menu-bar-item-outline)}.menu-bar-item-content:hover:not([disabled]){--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-hover-outline)}.menu-bar-item .menu-bar-item-content:not([disabled]).focus-visible:focus,.menu-bar-item .menu-bar-item-content:not([disabled]):focus-visible{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-focus-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-focus-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-focus-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-focus-outline)}.menu-bar-item-icon.rdt-menu-icon-down{width:0;height:0;border-left:var(--rdt-menu-default-icon-size) solid transparent;border-right:var(--rdt-menu-default-icon-size) solid transparent;border-top:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-bar-item-text-color)}\n"] }]
+                    }, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n  @for(item of filteredItems(); track item; let i = $index) {\r\n  <li\r\n    class=\"menu-bar-item\"\r\n    role=\"presentation\"\r\n    rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      (pointerenter)=\"onItemPointerEnter(item)\"\r\n      [disabled]=\"item.disabled()\"\r\n      [ariaDisabled]=\"item.disabled()\"\r\n      [ariaHasPopup]=\"item.items ? 'menu' : null\"\r\n      [ariaExpanded]=\"item === expandedChild()?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if(item.items) { @if (arrowDownIcon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: arrowDownIcon }\"\r\n        ></ng-container>\r\n        } @else {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n        } } @else if (item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        } @if(item.icon) {\r\n        <ng-container\r\n          rdtIconOutlet\r\n          [inputs]=\"{ name: item.icon }\"\r\n        ></ng-container>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if(item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [target]=\"item.target!\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if(item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.items) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild()?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;text-decoration:none;box-sizing:border-box}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}.rdt-menu-root{margin-left:0}.rdt-menu-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--rdt-menu-bar-padding)}.menu-bar-item-container{display:flex;flex-wrap:wrap;list-style-type:none;margin-bottom:0;margin-top:0;margin-block-start:0;margin-block-end:0;padding-left:0}.menu-bar-item{pointer-events:all;margin:var(--rdt-menu-bar-item-margin);position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-route-active-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-route-active-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-route-active-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-route-active-outline)}.menu-bar-item [aria-expanded=true].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-expanded-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-expanded-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-expanded-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-expanded-outline)}.menu-bar-item [disabled].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-disabled-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-disabled-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-disabled-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-disabled-outline);cursor:not-allowed}.menu-bar-item-content{cursor:pointer;display:flex;align-items:center;overflow:hidden;padding:var(--rdt-menu-bar-item-padding);border-radius:var(--rdt-menu-bar-item-border-radius);border:var(--rdt-menu-bar-item-border);background-color:var(--rdt-menu-bar-item-background);color:var(--rdt-menu-bar-item-text-color);font-weight:var(--rdt-menu-bar-item-font-weight);font-size:var(--rdt-menu-bar-item-font-size, inherit);outline:var(--rdt-menu-bar-item-outline)}.menu-bar-item-content:hover:not([disabled]){--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-hover-outline)}.menu-bar-item .menu-bar-item-content:not([disabled]).focus-visible:focus,.menu-bar-item .menu-bar-item-content:not([disabled]):focus-visible{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-focus-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-focus-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-focus-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-focus-outline)}.menu-bar-item-icon.rdt-menu-icon-down{width:0;height:0;border-left:var(--rdt-menu-default-icon-size) solid transparent;border-right:var(--rdt-menu-default-icon-size) solid transparent;border-top:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-bar-item-text-color)}\n"] }]
         }], propDecorators: { buttonContainerRef: [{
                 type: ViewChild,
                 args: ['buttonContainer', { static: true }]