@ngrdt/menu 0.0.16 → 0.0.18

package/fesm2022/ngrdt-menu.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewChildren, ViewChild, Input, HostBinding, HostListener, EnvironmentInjector, booleanAttribute, numberAttribute, Directive, ViewEncapsulation, QueryList, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, input, linkedSignal, computed, signal, untracked, effect, afterRenderEffect, afterNextRender, HostListener, ViewChild, ViewChildren, ChangeDetectionStrategy, Component, booleanAttribute, numberAttribute, EnvironmentInjector, Directive, ViewEncapsulation, QueryList, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
 import * as i3 from '@ngrdt/router';
@@ -10,7 +10,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, Subscription, fromEvent, throttleTime, animationFrameScheduler } from 'rxjs';
+import { delay, of, map, first, fromEvent, throttleTime, animationFrameScheduler, switchMap, withLatestFrom } from 'rxjs';
 import { RDT_BUTTON_BASE_PROVIDER, RdtButtonOutletDirective } from '@ngrdt/button';
 
 var RdtMenuShortcutMode;
@@ -195,24 +195,25 @@ class RdtMenuOverlayComponent {
     children;
     focusableElements;
     menuItemContainer;
-    item;
-    level;
-    preferredHorizontalDir = DEFAULT_MENU_HORIZONTAL_DIR;
-    preferredVerticalDir = DEFAULT_MENU_VERTICAL_DIR;
-    expanded = false;
-    autofocusItem = null;
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    level = input.required(...(ngDevMode ? [{ debugName: "level" }] : []));
+    preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR, ...(ngDevMode ? [{ debugName: "preferredHorizontalDir" }] : []));
+    preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR, ...(ngDevMode ? [{ debugName: "preferredVerticalDir" }] : []));
+    expandedInput = input(false, ...(ngDevMode ? [{ debugName: "expandedInput", alias: 'expanded' }] : [{ alias: 'expanded' }]));
+    expanded = linkedSignal(() => this.expandedInput());
+    autofocusItemInput = input(null, ...(ngDevMode ? [{ debugName: "autofocusItemInput", alias: 'autofocusItem' }] : [{
+            alias: 'autofocusItem',
+        }]));
+    autofocusItem = linkedSignal(() => this.autofocusItemInput());
     // Element used to relatively position menu,
     // typically parent element.
     // If not specified, parent element is used.
-    anchorElement;
-    roleAttr = 'menu';
-    tabindexAttr = '-1';
-    get zIndex() {
-        return this.level + 10;
-    }
-    get isRootLevel() {
-        return this.level === 0;
-    }
+    anchorElementInput = input(null, ...(ngDevMode ? [{ debugName: "anchorElementInput", alias: 'anchorElement' }] : [{
+            alias: 'anchorElement',
+        }]));
+    anchorElement = computed(() => this.anchorElementInput() ?? this.elRef.nativeElement.parentElement, ...(ngDevMode ? [{ debugName: "anchorElement" }] : []));
+    zIndex = computed(() => this.level() + 10, ...(ngDevMode ? [{ debugName: "zIndex" }] : []));
+    isRootLevel = computed(() => this.level() === 0, ...(ngDevMode ? [{ debugName: "isRootLevel" }] : []));
     // Bounding box of this excluding any extra offset.
     _box;
     get box() {
@@ -221,72 +222,69 @@ class RdtMenuOverlayComponent {
     // Bounding box of parent element.
     _anchorBox;
     _containerPadding = { top: 0, bottom: 0 };
-    // Recalculate child components only after they are initialized.
-    _viewWasInit = false;
     // Currently applied vertical and horizontal directions.
-    verticalDir = null;
-    horizontalDir = null;
-    expandedChild = null;
-    autofocusSubmenuItem = null;
+    verticalDir = signal(null, ...(ngDevMode ? [{ debugName: "verticalDir", equal: areVertDirsEqual }] : [{
+            equal: areVertDirsEqual,
+        }]));
+    horizontalDir = signal(null, ...(ngDevMode ? [{ debugName: "horizontalDir", equal: areHorDirsEqual }] : [{
+            equal: areHorDirsEqual,
+        }]));
+    expandedChild = signal(null, ...(ngDevMode ? [{ debugName: "expandedChild" }] : []));
+    autofocusSubmenuItem = signal(null, ...(ngDevMode ? [{ debugName: "autofocusSubmenuItem" }] : []));
     keyActions = {
         [KB_CODE.ARROW.UP]: (index) => this.focusPrevItem(index),
         [KB_CODE.ARROW.DOWN]: (index) => this.focusNextItem(index),
         [KB_CODE.ARROW.RIGHT]: (index) => this.openSubmenu(index, 'first', RdtMenuExpandSource.Shortcut),
         [KB_CODE.ARROW.LEFT]: () => this.closeSelf(),
         [KB_CODE.HOME]: () => this.focusItem(0),
-        [KB_CODE.END]: () => this.focusItem(this.item.items.length - 1),
+        [KB_CODE.END]: () => this.focusItem(untracked(this.item).items.length - 1),
         [KB_CODE.ESCAPE]: () => this.closeSelf(),
         [KB_CODE.ENTER]: (index) => this.invokeItemClickByIndex(index),
         [KB_CODE.SPACEBAR]: (index) => this.invokeItemClickByIndex(index),
     };
     get selfExpandSrc() {
-        if (this.expanded) {
+        if (this.expanded()) {
             if (this.parentMenu) {
-                return this.parentMenu.expandedChild?.src;
+                return this.parentMenu.expandedChild()?.src;
             }
             else {
-                return this.topLevelMenu.expandedChild?.src;
+                return this.topLevelMenu.expandedChild()?.src;
             }
         }
         return undefined;
     }
-    ngOnInit() {
-        this.setClasses();
-        this.listenTabKeyPress();
-    }
-    ngOnChanges(changes) {
-        const recalcTriggers = [
-            'preferredHorizontalDir',
-            'preferredVerticalDir',
-            'expanded',
-        ];
-        if (recalcTriggers.some((key) => key in changes) && this._viewWasInit) {
-            this.recalculatePosition(this.preferredHorizontalDir, this.preferredVerticalDir);
-        }
-        if (!this.expanded) {
-            this.expandedChild = null;
-        }
-        if ('expanded' in changes && this.expanded) {
-            // Wait for Angular to set .expanded class,
-            // because invisible elements cannot be focused.
-            setTimeout(() => {
-                switch (this.autofocusItem) {
-                    case null:
-                        this.focusItem(0, false);
-                        break;
-                    case 'first':
-                        this.focusItem(0, true);
-                        break;
-                    case 'last':
-                        this.focusItem(this.item.items.length - 1, true);
-                }
-            });
+    recalcEffect = effect(() => {
+        this.recalculatePosition(this.preferredHorizontalDir(), this.preferredVerticalDir());
+    }, ...(ngDevMode ? [{ debugName: "recalcEffect" }] : []));
+    expandedEffect = effect(() => {
+        if (!this.expanded()) {
+            this.expandedChild.set(null);
+        }
+    }, ...(ngDevMode ? [{ debugName: "expandedEffect" }] : []));
+    expandedFocusEffect = afterRenderEffect(() => {
+        const rootItem = untracked(this.item);
+        this.expandedInput();
+        const expanded = untracked(this.expanded);
+        const autofocusItem = untracked(this.autofocusItem);
+        if (expanded) {
+            switch (autofocusItem) {
+                case null:
+                    this.focusItem(0, false);
+                    break;
+                case 'first':
+                    this.focusItem(0, true);
+                    break;
+                case 'last':
+                    this.focusItem(rootItem.items.length - 1, true);
+            }
         }
-    }
-    ngAfterViewInit() {
-        this.measureContainerPadding();
-        this.recalculatePosition(this.preferredHorizontalDir, this.preferredVerticalDir);
-        this._viewWasInit = true;
+    });
+    constructor() {
+        afterNextRender(() => {
+            this.measureContainerPadding();
+            this.recalculatePosition(this.preferredHorizontalDir(), this.preferredVerticalDir());
+            this.listenTabKeyPress();
+        });
     }
     getMinOffsetLeft() {
         return this.topLevelMenu.bodyMargin.left;
@@ -305,9 +303,11 @@ class RdtMenuOverlayComponent {
             this.topLevelMenu.bodyMargin.bottom);
     }
     recalculatePosition(preferredHorizontalDir, preferredVerticalDir) {
-        // Make menu invisible so the menu does not move around in case of slow computer.
+        const isRoot = untracked(this.isRootLevel);
+        const horizontalDir = untracked(this.horizontalDir);
+        const verticalDir = untracked(this.verticalDir);
         this.measureBoundingRect();
-        if (!this._box || !this._anchorBox) {
+        if (!this._box || !this._anchorBox || !this.topLevelMenu.clientSize) {
             return;
         }
         const newHorDir = this.getRealHorizontalDir(preferredHorizontalDir);
@@ -315,13 +315,13 @@ class RdtMenuOverlayComponent {
         // Horizontal direction
         if (newHorDir.dir === 'right') {
             newHorDir.left += this._anchorBox.left;
-            if (!this.isRootLevel) {
+            if (!isRoot) {
                 newHorDir.left += this._anchorBox.width;
             }
         }
         else if (newHorDir.dir === 'left') {
             newHorDir.left += this._anchorBox.left - this._box.width;
-            if (this.isRootLevel) {
+            if (isRoot) {
                 newHorDir.left += this._anchorBox.width;
             }
         }
@@ -330,7 +330,7 @@ class RdtMenuOverlayComponent {
         // Vertical direction
         if (newVertDir.dir === 'down') {
             newVertDir.top = this._anchorBox.top;
-            if (this.isRootLevel) {
+            if (isRoot) {
                 newVertDir.top += this._anchorBox.height;
             }
             else {
@@ -339,45 +339,54 @@ class RdtMenuOverlayComponent {
         }
         else if (newVertDir.dir === 'up') {
             newVertDir.top = this._anchorBox.top - this._box.height;
-            if (!this.isRootLevel) {
+            if (!isRoot) {
                 newVertDir.top += this._anchorBox.height + this._containerPadding.top;
             }
         }
         // Restrictions from header and footer
         newVertDir.top = Math.min(Math.max(this.getMinOffsetTop(), newVertDir.top), this.getMaxOffsetTop());
-        if (!areHorDirsEqual(this.horizontalDir, newHorDir) ||
-            !areVertDirsEqual(this.verticalDir, newVertDir)) {
-            this.horizontalDir = newHorDir;
-            this.verticalDir = newVertDir;
+        if (!areHorDirsEqual(horizontalDir, newHorDir) ||
+            !areVertDirsEqual(verticalDir, newVertDir)) {
+            this.horizontalDir.set(newHorDir);
+            this.verticalDir.set(newVertDir);
             this.setClasses();
             this.measureBoundingRect();
         }
         this.recalculateChildren();
     }
+    recalculateChildren() {
+        const horizontalDir = untracked(this.horizontalDir);
+        const verticalDir = untracked(this.verticalDir);
+        if (this.children && horizontalDir && verticalDir) {
+            this.children.forEach((child) => child.recalculatePosition(horizontalDir.dir, verticalDir.dir));
+        }
+    }
     onItemPointerEnter(item) {
-        if (this.topLevelMenu.openOnHover &&
-            this.expandedChild?.src !== RdtMenuExpandSource.Click) {
-            this.autofocusSubmenuItem = null;
+        const expandedChild = untracked(this.expandedChild);
+        const openOnHover = untracked(this.topLevelMenu.openOnHover);
+        if (openOnHover && expandedChild?.src !== RdtMenuExpandSource.Click) {
+            this.autofocusSubmenuItem.set(null);
             if (menuItemHasChildren(item)) {
-                this.expandedChild = { item, src: RdtMenuExpandSource.Hover };
-                this.expanded = true;
+                this.expandedChild.set({ item, src: RdtMenuExpandSource.Hover });
+                this.expanded.set(true);
             }
             else {
                 //console.log('expanded child', this.expandedChild);
-                this.expandedChild = null;
+                this.expandedChild.set(null);
             }
         }
     }
     onItemClick(item) {
+        const expandedChild = untracked(this.expandedChild);
         const hasChildren = menuItemHasChildren(item);
-        if ((hasChildren && this.expandedChild?.item !== item) ||
-            (this.topLevelMenu.openOnHover &&
-                this.expandedChild?.src === RdtMenuExpandSource.Hover)) {
-            this.autofocusSubmenuItem = null;
-            this.expandedChild = { item, src: RdtMenuExpandSource.Click };
+        const openOnHover = this.topLevelMenu.openOnHover();
+        if ((hasChildren && expandedChild?.item !== item) ||
+            (openOnHover && expandedChild?.src === RdtMenuExpandSource.Hover)) {
+            this.autofocusSubmenuItem.set(null);
+            this.expandedChild.set({ item, src: RdtMenuExpandSource.Click });
         }
         else {
-            this.expandedChild = null;
+            this.expandedChild.set(null);
         }
         // Could also listen to router events, but might be triggered by
         // child router navigation.
@@ -393,23 +402,24 @@ class RdtMenuOverlayComponent {
             this.router.navigate(item.routerLink);
         }
         this.onItemClick(item);
-        this.autofocusSubmenuItem = 'first';
+        this.autofocusSubmenuItem.set('first');
     }
     getChildRoutes(item) {
         return this.topLevelMenu.getChildRoutes(item);
     }
     closeSubmenus(focusExpanded = false) {
-        if (focusExpanded && this.expandedChild) {
-            this.focusItem(this.expandedChild.item);
+        const expandedChild = this.expandedChild();
+        if (focusExpanded && expandedChild) {
+            this.focusItem(expandedChild.item);
         }
-        this.expandedChild = null;
+        this.expandedChild.set(null);
         this.cd.markForCheck();
     }
     focusItemRecursively(path) {
         const children = [...path];
         const thisItem = children.shift();
-        this.autofocusSubmenuItem = null;
-        this.autofocusItem = null;
+        this.autofocusSubmenuItem.set(null);
+        this.autofocusItem.set(null);
         if (children.length > 0) {
             this.expandAndGetChild(thisItem, RdtMenuExpandSource.Focus)
                 .pipe(delay(1))
@@ -429,20 +439,22 @@ class RdtMenuOverlayComponent {
         }
     }
     expandAndGetChild(item, src) {
-        if (this.item.items.indexOf(item) < 0) {
+        const rootItem = untracked(this.item);
+        if (rootItem.items.indexOf(item) < 0) {
             throw new Error('Attempting to expand item that is not child item of this.item');
         }
-        this.expandedChild = { item, src };
+        this.expandedChild.set({ item, src });
         this.cd.markForCheck();
-        const child = this.children.find((child) => child.item === item);
+        const child = this.children.find((child) => untracked(child.item) === item);
         if (child) {
             return of(child);
         }
         else {
-            return this.children.changes.pipe(map(() => this.children.find((child) => child.item === item)), first(RdtObjectUtils.notNullGuard));
+            return this.children.changes.pipe(map(() => this.children.find((child) => untracked(child.item) === item)), first(RdtObjectUtils.notNullGuard));
         }
     }
     onKeyDown(itemIndex, event) {
+        const rootItem = untracked(this.item);
         const hasAction = event.code in this.keyActions;
         const isLetter = RdtStringUtils.isAlphabetCharacter(event.key) ||
             RdtStringUtils.isNumericCharacter(event.key);
@@ -456,7 +468,7 @@ class RdtMenuOverlayComponent {
             this.keyActions[event.code](itemIndex);
         }
         else if (isLetter) {
-            const next = findNextItemWithPrefix(this.item.items, itemIndex, event.key);
+            const next = findNextItemWithPrefix(rootItem.items, itemIndex, event.key);
             if (next !== null) {
                 this.focusItem(next);
             }
@@ -473,7 +485,8 @@ class RdtMenuOverlayComponent {
         }, 1);
     }
     invokeItemClickByIndex(itemIndex) {
-        const item = this.item.items[itemIndex];
+        const rootItem = untracked(this.item);
+        const item = rootItem.items[itemIndex];
         if (!item) {
             return;
         }
@@ -485,7 +498,7 @@ class RdtMenuOverlayComponent {
             itemIndex = item;
         }
         else {
-            itemIndex = this.item.items.indexOf(item);
+            itemIndex = this.item().items.indexOf(item);
         }
         if (itemIndex >= 0 && itemIndex < this.focusableElements.length) {
             this.blurAllFocusable();
@@ -505,18 +518,21 @@ class RdtMenuOverlayComponent {
         }
     }
     focusNextItem(itemIndex) {
-        const next = (itemIndex + 1) % this.item.items.length;
+        const rootItem = untracked(this.item);
+        const next = (itemIndex + 1) % rootItem.items.length;
         this.focusItem(next);
     }
     focusPrevItem(itemIndex) {
-        const prev = (itemIndex - 1 + this.item.items.length) % this.item.items.length;
+        const rootItem = untracked(this.item);
+        const prev = (itemIndex - 1 + rootItem.items.length) % rootItem.items.length;
         this.focusItem(prev);
     }
     openSubmenu(itemIndex, visibleFocus, src) {
-        if (itemIndex < this.item.items.length &&
-            menuItemHasChildren(this.item.items[itemIndex])) {
-            this.expandedChild = { item: this.item.items[itemIndex], src };
-            this.autofocusSubmenuItem = visibleFocus;
+        const rootItem = untracked(this.item);
+        if (itemIndex < rootItem.items.length &&
+            menuItemHasChildren(rootItem.items[itemIndex])) {
+            this.expandedChild.set({ item: rootItem.items[itemIndex], src });
+            this.autofocusSubmenuItem.set(visibleFocus);
         }
     }
     closeSelf(focusExpanded = true) {
@@ -528,21 +544,23 @@ class RdtMenuOverlayComponent {
         }
     }
     checkActiveElement(event) {
-        if (this.topLevelMenu.closeOnFocusOut && !this.topLevelMenu.openOnHover) {
+        const closeOnFocusOut = untracked(this.topLevelMenu.closeOnFocusOut);
+        if (closeOnFocusOut && !this.topLevelMenu.openOnHover) {
             const thisEl = this.elRef.nativeElement;
             const target = event.relatedTarget;
             if (!(target instanceof HTMLElement) || !thisEl.contains(target)) {
-                this.expandedChild = null;
+                this.expandedChild.set(null);
             }
         }
     }
     // Calculates direction of this menu and offset in case
     // menu won't fit in left nor right of parent menu.
     getRealHorizontalDir(preferredHorizontalDir) {
+        const isRoot = untracked(this.isRootLevel);
         let left;
         let right;
         // This menu is directly under menubar
-        if (this.level === 0) {
+        if (isRoot) {
             left = this._anchorBox.right - this._box.width;
             right =
                 this.topLevelMenu.clientSize.width -
@@ -602,9 +620,10 @@ class RdtMenuOverlayComponent {
         }
     }
     getRealVerticalDir(preferredVerticalDir) {
+        const isRoot = untracked(this.isRootLevel);
         let bottom;
         let top;
-        if (this.level === 0) {
+        if (isRoot) {
             bottom =
                 this.topLevelMenu.clientSize.height +
                     this._anchorBox.bottom -
@@ -647,7 +666,7 @@ class RdtMenuOverlayComponent {
     // Should always be called after parent menu has already been measured.
     measureBoundingRect() {
         this._box = this.elRef.nativeElement.getBoundingClientRect();
-        const anchor = this.anchorElement ?? this.elRef.nativeElement.parentElement;
+        const anchor = this.anchorElement();
         this._anchorBox = anchor.getBoundingClientRect();
     }
     measureContainerPadding() {
@@ -656,14 +675,12 @@ class RdtMenuOverlayComponent {
         const paddingBottom = parseFloat(computedStyles.paddingBottom);
         this._containerPadding = { top: paddingTop, bottom: paddingBottom };
     }
-    recalculateChildren() {
-        if (this.expanded && this.horizontalDir && this.verticalDir) {
-            this.children.forEach((child) => child.recalculatePosition(this.horizontalDir.dir, this.verticalDir.dir));
-        }
-    }
     setClasses() {
-        if (this.verticalDir) {
-            if (this.verticalDir.dir === 'up') {
+        const isRoot = this.isRootLevel();
+        const vertical = this.verticalDir();
+        const horizontal = this.horizontalDir();
+        if (vertical) {
+            if (vertical.dir === 'up') {
                 this.setClass('rdt-overlay-up');
                 this.removeClass('rdt-overlay-down');
             }
@@ -671,10 +688,10 @@ class RdtMenuOverlayComponent {
                 this.removeClass('rdt-overlay-up');
                 this.setClass('rdt-overlay-down');
             }
-            this.setOffset('top', this.verticalDir.top);
+            this.setOffset('top', vertical.top);
         }
-        if (this.horizontalDir) {
-            if (this.horizontalDir.dir === 'left') {
+        if (horizontal) {
+            if (horizontal.dir === 'left') {
                 this.setClass('rdt-overlay-left');
                 this.removeClass('rdt-overlay-right');
             }
@@ -682,9 +699,9 @@ class RdtMenuOverlayComponent {
                 this.removeClass('rdt-overlay-left');
                 this.setClass('rdt-overlay-right');
             }
-            this.setOffset('left', this.horizontalDir.left);
+            this.setOffset('left', horizontal.left);
         }
-        if (this.isRootLevel) {
+        if (isRoot) {
             this.setClass('rdt-menu-root');
             this.removeClass('rdt-menu-sub');
         }
@@ -713,13 +730,18 @@ class RdtMenuOverlayComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => this.onTabKeyPress(event));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: { item: "item", level: "level", preferredHorizontalDir: "preferredHorizontalDir", preferredVerticalDir: "preferredVerticalDir", expanded: "expanded", autofocusItem: "autofocusItem", anchorElement: "anchorElement" }, host: { listeners: { "window:focusout": "checkActiveElement($event)" }, properties: { "class.expanded": "this.expanded", "attr.role": "this.roleAttr", "attr.tabindex": "this.tabindexAttr", "style.z-index": "this.zIndex" } }, viewQueries: [{ propertyName: "menuItemContainer", first: true, predicate: ["menuItemContainer"], descendants: true }, { propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  <li\r\n    *ngFor=\"let item of item.items; let i = index\"\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    <ng-container *ngIf=\"!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        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"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          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO:\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n          <span\r\n            class=\"menu-item-icon rdt-menu-icon-right\"\r\n            *ngIf=\"item.items\"\r\n          ></span>\r\n        </div>\r\n      </button>\r\n    </ng-container>\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        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\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    <ng-container *ngIf=\"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    </ng-container>\r\n\r\n    <ng-container *ngIf=\"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    </ng-container>\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    <rdt-menu-overlay\r\n      *ngIf=\"item.items && expanded\"\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  </li>\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);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 [aria-expanded=true].menu-item-content{--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-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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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      [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"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        }\r\n        <!-- TODO:\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n        @if (item.items) {\r\n        <span class=\"menu-item-icon rdt-menu-icon-right\"></span>\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 [aria-expanded=true].menu-item-content{--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-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: "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: "18.2.7", ngImport: i0, type: RdtMenuOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdt-menu-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  <li\r\n    *ngFor=\"let item of item.items; let i = index\"\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    <ng-container *ngIf=\"!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        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"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          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO:\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n          <span\r\n            class=\"menu-item-icon rdt-menu-icon-right\"\r\n            *ngIf=\"item.items\"\r\n          ></span>\r\n        </div>\r\n      </button>\r\n    </ng-container>\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        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\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    <ng-container *ngIf=\"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    </ng-container>\r\n\r\n    <ng-container *ngIf=\"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    </ng-container>\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    <rdt-menu-overlay\r\n      *ngIf=\"item.items && expanded\"\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  </li>\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);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 [aria-expanded=true].menu-item-content{--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-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"] }]
-        }], propDecorators: { children: [{
+            args: [{ selector: 'rdt-menu-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
+                        '[class.expanded]': 'expanded()',
+                        '[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      [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"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        }\r\n        <!-- TODO:\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n        @if (item.items) {\r\n        <span class=\"menu-item-icon rdt-menu-icon-right\"></span>\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 [aria-expanded=true].menu-item-content{--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-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]
             }], focusableElements: [{
@@ -728,48 +750,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }], menuItemContainer: [{
                 type: ViewChild,
                 args: ['menuItemContainer']
-            }], item: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], preferredHorizontalDir: [{
-                type: Input
-            }], preferredVerticalDir: [{
-                type: Input
-            }], expanded: [{
-                type: HostBinding,
-                args: ['class.expanded']
-            }, {
-                type: Input
-            }], autofocusItem: [{
-                type: Input
-            }], anchorElement: [{
-                type: Input
-            }], roleAttr: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], tabindexAttr: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], zIndex: [{
-                type: HostBinding,
-                args: ['style.z-index']
             }], checkActiveElement: [{
                 type: HostListener,
                 args: ['window:focusout', ['$event']]
             }] } });
 
 class RdtMenuBaseComponent {
-    preferredVerticalDir = DEFAULT_MENU_VERTICAL_DIR;
-    preferredHorizontalDir = DEFAULT_MENU_HORIZONTAL_DIR;
+    preferredVerticalDir = input(DEFAULT_MENU_VERTICAL_DIR, ...(ngDevMode ? [{ debugName: "preferredVerticalDir" }] : []));
+    preferredHorizontalDir = input(DEFAULT_MENU_HORIZONTAL_DIR, ...(ngDevMode ? [{ debugName: "preferredHorizontalDir" }] : []));
     // Mode only matters if item has shortcut and only children, no command nor routerLink
     // FOCUS_ITEM will put focus on item with shortcut
     // OPEN_SUBMENU will open its submenu and put focus on the first item in it
     // If item has command or routerLink, it will always be activated and everything closed
-    shortcutMode = RdtMenuShortcutMode.OPEN_SUBMENU;
-    closeOnFocusOut = false;
-    openOnHover = false;
-    hitboxMargin = 10;
+    shortcutMode = input(RdtMenuShortcutMode.OPEN_SUBMENU, ...(ngDevMode ? [{ debugName: "shortcutMode" }] : []));
+    closeOnFocusOut = input(false, ...(ngDevMode ? [{ debugName: "closeOnFocusOut", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    openOnHover = input(false, ...(ngDevMode ? [{ debugName: "openOnHover", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    hitboxMargin = input(10, ...(ngDevMode ? [{ debugName: "hitboxMargin", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     cd = inject(ChangeDetectorRef);
     destroyRef = inject(DestroyRef);
     rdtRouter = inject(RdtRouterService);
@@ -781,10 +777,19 @@ class RdtMenuBaseComponent {
     injector = inject(EnvironmentInjector);
     children;
     focusableElements;
-    classes = 'rdt-menu-base';
-    expandedChild = null;
+    expandedChild = signal(null, ...(ngDevMode ? [{ debugName: "expandedChild" }] : []));
     autofocusSubmenuItem = null;
-    parsedItems;
+    filteredItems = computed(() => {
+        this.navigationEnd();
+        const items = this.allParsedItems();
+        const current = this.rdtRouter.parseAbsoluteUrl();
+        if (!current) {
+            return items;
+        }
+        else {
+            return this.filterRec(items, current);
+        }
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
     get clientSize() {
         return this._clientSize;
     }
@@ -797,78 +802,74 @@ class RdtMenuBaseComponent {
         return this._buttonContainerRect;
     }
     _buttonContainerRect;
-    allParsedItems;
-    childRoutesMap = new Map();
-    shortcutSub = new Subscription();
-    shortcutMap = {};
+    childRoutesMap = computed(() => getChildRoutesMap(this.filteredItems()), ...(ngDevMode ? [{ debugName: "childRoutesMap" }] : []));
     keyActions = {
         [KB_CODE.ARROW.LEFT]: (index) => this.focusPrevItem(index),
         [KB_CODE.ARROW.RIGHT]: (index) => this.focusNextItem(index),
         [KB_CODE.ARROW.DOWN]: (index) => this.openSubmenu(index, 'first', RdtMenuExpandSource.Shortcut),
         [KB_CODE.ARROW.UP]: (index) => this.openSubmenu(index, 'last', RdtMenuExpandSource.Shortcut),
         [KB_CODE.HOME]: () => this.focusItem(0),
-        [KB_CODE.END]: () => this.focusItem(this.parsedItems.length - 1),
+        [KB_CODE.END]: () => this.focusItem(untracked(this.filteredItems).length - 1),
         [KB_CODE.ENTER]: (index) => this.invokeItemClickByIndex(index),
         [KB_CODE.SPACEBAR]: (index) => this.invokeItemClickByIndex(index),
     };
+    navigationEnd = toSignal(this.rdtRouter.navigationEnd$);
     // Returns all routes asociated with item or its subitems.
     getChildRoutes(item) {
-        return this.childRoutesMap.get(item) ?? [];
+        return this.childRoutesMap().get(item) ?? [];
     }
-    ngOnInit() {
-        this.rdtRouter.navigationEnd$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((ev) => this.filterItems());
-        this.measure();
-    }
-    ngOnChanges(changes) {
-        if (this.children) {
-            this.recalculateChildren();
-        }
-    }
-    ngAfterViewInit() {
-        this.listenWindowResize();
-        // Not using timeout results in horizontal overflow on html element
-        setTimeout(() => {
+    constructor() {
+        this.listenShortcuts();
+        afterNextRender(() => {
+            this.listenWindowResize();
             this.measure();
             this.recalculateChildren();
-        }, 50);
+        });
     }
+    recalcChildrenEffect = effect(() => {
+        this.recalculateChildren();
+    }, ...(ngDevMode ? [{ debugName: "recalcChildrenEffect" }] : []));
     recalculateChildren() {
-        this.children.forEach((child) => {
-            child.recalculatePosition(this.preferredHorizontalDir, this.preferredVerticalDir);
-        });
+        if (this.children) {
+            this.children.forEach((child) => {
+                child.recalculatePosition(this.preferredHorizontalDir(), this.preferredVerticalDir());
+            });
+        }
     }
     closeSubmenus(focusExpanded = false) {
-        if (focusExpanded && this.expandedChild) {
-            this.focusItem(this.expandedChild.item);
+        const expandedChild = untracked(this.expandedChild);
+        if (focusExpanded && expandedChild) {
+            this.focusItem(expandedChild.item);
         }
-        this.expandedChild = null;
+        this.expandedChild.set(null);
         this.cd.markForCheck();
     }
     onItemClick(item) {
-        if ((menuItemHasChildren(item) && this.expandedChild?.item !== item) ||
-            (this.openOnHover &&
-                this.expandedChild?.src === RdtMenuExpandSource.Hover)) {
+        const expandedChild = untracked(this.expandedChild);
+        const openOnHover = untracked(this.openOnHover);
+        if ((menuItemHasChildren(item) && expandedChild?.item !== item) ||
+            (openOnHover && expandedChild?.src === RdtMenuExpandSource.Hover)) {
             this.autofocusSubmenuItem = null;
-            this.expandedChild = { item, src: RdtMenuExpandSource.Click };
+            this.expandedChild.set({ item, src: RdtMenuExpandSource.Click });
         }
         else {
-            this.expandedChild = null;
+            this.expandedChild.set(null);
         }
         if (typeof item.command === 'function') {
             item.command();
         }
     }
     onItemPointerEnter(item) {
-        if (this.openOnHover) {
+        const expandedChild = untracked(this.expandedChild);
+        const openOnHover = untracked(this.openOnHover);
+        if (openOnHover) {
             if (menuItemHasChildren(item) &&
-                this.expandedChild?.src !== RdtMenuExpandSource.Click) {
+                expandedChild?.src !== RdtMenuExpandSource.Click) {
                 this.autofocusSubmenuItem = null;
-                this.expandedChild = { item, src: RdtMenuExpandSource.Hover };
+                this.expandedChild.set({ item, src: RdtMenuExpandSource.Hover });
             }
             else {
-                this.expandedChild = null;
+                this.expandedChild.set(null);
             }
         }
     }
@@ -886,7 +887,8 @@ class RdtMenuBaseComponent {
             this.keyActions[event.code](itemIndex);
         }
         else if (isLetter) {
-            const next = findNextItemWithPrefix(this.parsedItems, itemIndex, event.key);
+            const filteredItems = untracked(this.filteredItems);
+            const next = findNextItemWithPrefix(filteredItems, itemIndex, event.key);
             if (next !== null) {
                 this.focusItem(next);
             }
@@ -899,18 +901,6 @@ class RdtMenuBaseComponent {
         this.onItemClick(item);
         this.autofocusSubmenuItem = 'first';
     }
-    filterItems() {
-        const current = this.rdtRouter.parseAbsoluteUrl();
-        if (!current) {
-            this.parsedItems = this.allParsedItems;
-        }
-        else {
-            this.parsedItems = this.filterRec(this.allParsedItems, current);
-        }
-        this.childRoutesMap = getChildRoutesMap(this.parsedItems);
-        this.listenShortcuts();
-        this.cd.markForCheck();
-    }
     filterRec(items, current) {
         let currentParent = current.route;
         const currentParams = current.params;
@@ -952,27 +942,30 @@ class RdtMenuBaseComponent {
         });
     }
     invokeItemClickByIndex(itemIndex) {
-        const item = this.parsedItems[itemIndex];
+        const filteredItems = untracked(this.filteredItems);
+        const item = filteredItems[itemIndex];
         if (!item) {
             return;
         }
         this.invokeItemClick(item);
     }
     openSubmenu(itemIndex, visibleFocus, src) {
-        if (itemIndex < this.parsedItems.length &&
-            menuItemHasChildren(this.parsedItems[itemIndex])) {
-            const item = this.parsedItems[itemIndex];
+        const filteredItems = untracked(this.filteredItems);
+        if (itemIndex < filteredItems.length &&
+            menuItemHasChildren(filteredItems[itemIndex])) {
+            const item = filteredItems[itemIndex];
             this.autofocusSubmenuItem = visibleFocus;
-            this.expandedChild = { item, src };
+            this.expandedChild.set({ item, src });
         }
     }
     focusItem(item) {
+        const filteredItems = untracked(this.filteredItems);
         let itemIndex;
         if (typeof item === 'number') {
             itemIndex = item;
         }
         else {
-            itemIndex = this.parsedItems.indexOf(item);
+            itemIndex = filteredItems.indexOf(item);
         }
         if (itemIndex >= 0 && itemIndex < this.focusableElements.length) {
             this.blurAllFocusable();
@@ -980,11 +973,13 @@ class RdtMenuBaseComponent {
         }
     }
     focusNextItem(itemIndex) {
-        const next = (itemIndex + 1) % this.parsedItems.length;
+        const filteredItems = untracked(this.filteredItems);
+        const next = (itemIndex + 1) % filteredItems.length;
         this.focusItem(next);
     }
     focusPrevItem(itemIndex) {
-        const prev = (itemIndex - 1 + this.parsedItems.length) % this.parsedItems.length;
+        const filteredItems = untracked(this.filteredItems);
+        const prev = (itemIndex - 1 + filteredItems.length) % filteredItems.length;
         this.focusItem(prev);
     }
     blurAllFocusable() {
@@ -998,7 +993,9 @@ class RdtMenuBaseComponent {
         }
     }
     onPointerMove(event) {
-        if (this.openOnHover && this.expandedChild) {
+        const expandedChild = untracked(this.expandedChild);
+        const openOnHover = untracked(this.openOnHover);
+        if (openOnHover && expandedChild) {
             const hitboxes = this.getHitboxes();
             const isInside = hitboxes.some((hitbox) => this.isPointerInsideHitbox(hitbox.rect, event));
             for (let i = hitboxes.length - 1; i >= 0; i--) {
@@ -1012,12 +1009,13 @@ class RdtMenuBaseComponent {
     }
     // Closes menu if user navigates outside it using Tab.
     checkActiveElement(event) {
-        if (this.closeOnFocusOut && !this.openOnHover) {
+        const closeOnFocusOut = untracked(this.closeOnFocusOut);
+        if (closeOnFocusOut && !this.openOnHover) {
             console.log('focusout', event);
             const thisEl = this.elRef.nativeElement;
             const target = event.relatedTarget;
             if (!(target instanceof HTMLElement) || !thisEl.contains(target)) {
-                this.expandedChild = null;
+                this.expandedChild.set(null);
             }
         }
     }
@@ -1070,14 +1068,13 @@ class RdtMenuBaseComponent {
         });
     }
     listenShortcuts() {
-        const itemsWithShortcuts = getMenuItemsShortcuts(this.parsedItems);
-        const shortcuts = itemsWithShortcuts.map((it) => it.shortcut);
-        this.shortcutMap = this.getShortcutMap(itemsWithShortcuts);
-        this.shortcutSub.unsubscribe();
-        this.shortcutSub = this.shortcutService
-            .listen(shortcuts)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((evt) => this.onShortcut(evt.shortcut));
+        const filteredItems$ = toObservable(this.filteredItems);
+        const itemsWithShortcuts$ = filteredItems$.pipe(map(getMenuItemsShortcuts));
+        const shortcuts$ = itemsWithShortcuts$.pipe(map((items) => items.map((it) => it.shortcut)));
+        const map$ = itemsWithShortcuts$.pipe(map((items) => this.getShortcutMap(items)));
+        shortcuts$
+            .pipe(switchMap((shortcuts) => this.shortcutService.listen(shortcuts)), withLatestFrom(map$), takeUntilDestroyed(this.destroyRef))
+            .subscribe(([evt, map]) => this.onShortcut(evt.shortcut, map));
     }
     getShortcutMap(itemsWithShortcuts) {
         const shortcutMap = {};
@@ -1086,10 +1083,10 @@ class RdtMenuBaseComponent {
         });
         return shortcutMap;
     }
-    onShortcut(shortcut) {
-        const path = this.shortcutMap[shortcut.hotkeysValue];
+    onShortcut(shortcut, map) {
+        const path = map[shortcut.hotkeysValue];
         if (!path) {
-            console.warn(`Menu shortcut ${shortcut.hotkeysValue} was detected, but there is no path associated with it.`, this.shortcutMap);
+            console.warn(`Menu shortcut ${shortcut.hotkeysValue} was detected, but there is no path associated with it.`, map);
         }
         const last = path[path.length - 1];
         const hasRoute = menuItemHasRoute(last);
@@ -1108,8 +1105,9 @@ class RdtMenuBaseComponent {
         }
     }
     activateItemRecursively(path, src) {
+        const shortcutMode = untracked(this.shortcutMode);
         const children = [...path];
-        if (this.shortcutMode === RdtMenuShortcutMode.OPEN_SUBMENU) {
+        if (shortcutMode === RdtMenuShortcutMode.OPEN_SUBMENU) {
             const last = children[children.length - 1];
             if (menuItemHasChildren(last) && last.items[0]) {
                 children.push(last.items[0]);
@@ -1117,12 +1115,12 @@ class RdtMenuBaseComponent {
         }
         const thisItem = children.shift();
         if (children.length > 0) {
-            this.expandedChild = { item: thisItem, src };
-            const overlay = this.children.find((child) => child.item === thisItem);
+            this.expandedChild.set({ item: thisItem, src });
+            const overlay = this.children.find((child) => untracked(child.item) === thisItem);
             overlay.focusItemRecursively(children);
         }
         else {
-            this.expandedChild = null;
+            this.expandedChild.set(null);
             this.focusItem(thisItem);
         }
     }
@@ -1130,10 +1128,11 @@ class RdtMenuBaseComponent {
         const rect = hitbox;
         const x = event.clientX;
         const y = event.clientY;
-        return (x >= rect.left - this.hitboxMargin &&
-            x <= rect.right + this.hitboxMargin &&
-            y >= rect.top - this.hitboxMargin &&
-            y <= rect.bottom + this.hitboxMargin);
+        const margin = untracked(this.hitboxMargin);
+        return (x >= rect.left - margin &&
+            x <= rect.right + margin &&
+            y >= rect.top - margin &&
+            y <= rect.bottom + margin);
     }
     getHitboxes() {
         const boxes = this.getOpenMenuBoundingBoxes();
@@ -1151,7 +1150,7 @@ class RdtMenuBaseComponent {
         return boxes;
     }
     getOpenMenuBoundingBoxesRec(overlay, boxes) {
-        if (overlay.expanded) {
+        if (overlay.expanded()) {
             let someByClick = false;
             overlay.children.forEach((child) => (someByClick ||= this.getOpenMenuBoundingBoxesRec(child, boxes)));
             const fixed = someByClick || overlay.selfExpandSrc === RdtMenuExpandSource.Click;
@@ -1164,44 +1163,25 @@ class RdtMenuBaseComponent {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.7", type: RdtMenuBaseComponent, inputs: { preferredVerticalDir: "preferredVerticalDir", preferredHorizontalDir: "preferredHorizontalDir", shortcutMode: "shortcutMode", closeOnFocusOut: ["closeOnFocusOut", "closeOnFocusOut", booleanAttribute], openOnHover: ["openOnHover", "openOnHover", booleanAttribute], hitboxMargin: ["hitboxMargin", "hitboxMargin", numberAttribute] }, host: { listeners: { "window:pointermove": "onPointerMove($event)", "window:focusout": "checkActiveElement($event)", "document:click": "onDocumentClick($event)" }, properties: { "class": "this.classes" } }, viewQueries: [{ propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: RdtMenuBaseComponent, isStandalone: true, inputs: { preferredVerticalDir: { classPropertyName: "preferredVerticalDir", publicName: "preferredVerticalDir", isSignal: true, isRequired: false, transformFunction: null }, preferredHorizontalDir: { classPropertyName: "preferredHorizontalDir", publicName: "preferredHorizontalDir", isSignal: true, isRequired: false, transformFunction: null }, shortcutMode: { classPropertyName: "shortcutMode", publicName: "shortcutMode", isSignal: true, isRequired: false, transformFunction: null }, closeOnFocusOut: { classPropertyName: "closeOnFocusOut", publicName: "closeOnFocusOut", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, hitboxMargin: { classPropertyName: "hitboxMargin", publicName: "hitboxMargin", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:pointermove": "onPointerMove($event)", "document:click": "onDocumentClick($event)", "window:focusout": "checkActiveElement($event)" }, classAttribute: "rdt-menu-base" }, viewQueries: [{ propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBaseComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { preferredVerticalDir: [{
-                type: Input
-            }], preferredHorizontalDir: [{
-                type: Input
-            }], shortcutMode: [{
-                type: Input
-            }], closeOnFocusOut: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], openOnHover: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hitboxMargin: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], children: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuBaseComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        class: 'rdt-menu-base',
+                        '(window:pointermove)': 'onPointerMove($event)',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(window:focusout)': 'checkActiveElement($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { children: [{
                 type: ViewChildren,
                 args: [RdtMenuOverlayComponent]
             }], focusableElements: [{
                 type: ViewChildren,
                 args: ['focusableItem']
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], onPointerMove: [{
-                type: HostListener,
-                args: ['window:pointermove', ['$event']]
-            }], checkActiveElement: [{
-                type: HostListener,
-                args: ['window:focusout', ['$event']]
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 class RdtMenuBarComponent extends RdtMenuBaseComponent {
@@ -1209,149 +1189,136 @@ class RdtMenuBarComponent extends RdtMenuBaseComponent {
     get buttonContainer() {
         return this.buttonContainerRef?.nativeElement;
     }
-    get items() {
-        return this._items;
-    }
-    set items(value) {
-        this._items = value;
-        this.allParsedItems = parseMenuItems(value, this.injector);
-        this.filterItems();
-    }
-    _items;
-    headerHeight = 0;
-    footerHeight = 0;
-    roleAttr = 'menubar';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: RdtMenuBarComponent, selector: "rdt-menu-bar", inputs: { items: "items", headerHeight: ["headerHeight", "headerHeight", numberAttribute], footerHeight: ["footerHeight", "footerHeight", numberAttribute] }, host: { properties: { "attr.role": "this.roleAttr" } }, providers: [
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    allParsedItems = computed(() => parseMenuItems(this.items(), this.injector), ...(ngDevMode ? [{ debugName: "allParsedItems" }] : []));
+    headerHeight = input(0, ...(ngDevMode ? [{ debugName: "headerHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    footerHeight = input(0, ...(ngDevMode ? [{ debugName: "footerHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: RdtMenuBarComponent, isStandalone: false, selector: "rdt-menu-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menubar" } }, providers: [
             {
                 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 parsedItems; 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      [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"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        }\r\n        <!-- TODO\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"expand_more\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n        -->\r\n        @if(item.items) {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\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        }\r\n        <!--\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-bar-item-icon\"\r\n          inverted\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-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);outline:var(--rdt-menu-bar-item-outline);font-size:inherit}.menu-bar-item-content:hover{--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.focus-visible:focus,.menu-bar-item .menu-bar-item-content: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: "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      [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"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        }\r\n        <!-- TODO\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"expand_more\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n        -->\r\n        @if(item.items) {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\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        }\r\n        <!--\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-bar-item-icon\"\r\n          inverted\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-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{--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.focus-visible:focus,.menu-bar-item .menu-bar-item-content: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: "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: "18.2.7", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-menu-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: RdtMenuBaseComponent,
                             useExisting: RdtMenuBarComponent,
                         },
-                    ], template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n  @for(item of parsedItems; 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      [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"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        }\r\n        <!-- TODO\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"expand_more\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n        -->\r\n        @if(item.items) {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\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        }\r\n        <!--\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-bar-item-icon\"\r\n          inverted\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-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);outline:var(--rdt-menu-bar-item-outline);font-size:inherit}.menu-bar-item-content:hover{--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.focus-visible:focus,.menu-bar-item .menu-bar-item-content: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"] }]
+                    ], 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      [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"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        }\r\n        <!-- TODO\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"expand_more\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n        -->\r\n        @if(item.items) {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\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        }\r\n        <!--\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-bar-item-icon\"\r\n          inverted\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-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{--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.focus-visible:focus,.menu-bar-item .menu-bar-item-content: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 }]
-            }], items: [{
-                type: Input
-            }], headerHeight: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], footerHeight: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], roleAttr: [{
-                type: HostBinding,
-                args: ['attr.role']
             }] } });
 
 class RdtMenuComponent extends RdtMenuBaseComponent {
     buttonClass = inject(RDT_BUTTON_BASE_PROVIDER);
-    trigger;
-    dataTestId = '';
-    get items() {
-        return this._items;
-    }
-    set items(value) {
-        this._items = value;
+    trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    dataTestId = input('', ...(ngDevMode ? [{ debugName: "dataTestId" }] : []));
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    allParsedItems = computed(() => {
+        const items = this.items();
         const wrapper = {
             label: '',
             icon: '',
-            items: value,
+            items: items,
         };
-        this.allParsedItems = parseMenuItems([wrapper], this.injector);
-        this.filterItems();
-    }
-    _items;
+        return parseMenuItems([wrapper], this.injector);
+    }, ...(ngDevMode ? [{ debugName: "allParsedItems" }] : []));
     focusableElements = new QueryList();
     get buttonContainer() {
-        return this.anchorElement ?? undefined;
+        return this.anchorElement() ?? undefined;
     }
     get parsedItem() {
-        return this.parsedItems[0];
+        return this.filteredItems()[0];
     }
     get anchorElement() {
-        return this.trigger.anchorElement;
+        return this.trigger().anchorElement;
     }
-    ngOnInit() {
-        super.ngOnInit();
-        this.trigger.tabIndex = 0;
-        this.trigger.dataTestId = this.dataTestId;
-        this.trigger.click$.subscribe(() => this.toggle());
-        this.listenPointerOver();
-        if (this.anchorElement) {
-            console.log('Anchor element:', this.anchorElement);
-            this.focusableElements.reset([{ nativeElement: this.anchorElement }]);
-        }
-    }
-    ngDoCheck() {
-        if (this.trigger) {
-            this.trigger.aria = {
-                role: 'menuitem',
-                'aria-haspopup': 'true',
-                'aria-expanded': this.expandedChild?.item === this.parsedItem,
-            };
-        }
+    constructor() {
+        super();
+        afterNextRender(() => {
+            this.listenPointerOver();
+            this.updateFocusableElements();
+        });
+        this.subscribeClicks();
+    }
+    triggerTabIndexEffect = effect(() => {
+        const trigger = this.trigger();
+        trigger.tabIndex.set(0);
+    }, ...(ngDevMode ? [{ debugName: "triggerTabIndexEffect" }] : []));
+    triggerDataTestIdEffect = effect(() => {
+        const trigger = this.trigger();
+        const dataTestId = this.dataTestId();
+        trigger.dataTestId.set(dataTestId);
+    }, ...(ngDevMode ? [{ debugName: "triggerDataTestIdEffect" }] : []));
+    triggerAriaEffect = effect(() => {
+        const trigger = this.trigger();
+        const expandedChild = this.expandedChild();
+        trigger.aria.set({
+            role: 'menuitem',
+            'aria-haspopup': 'true',
+            'aria-expanded': expandedChild?.item === this.parsedItem,
+        });
+    }, ...(ngDevMode ? [{ debugName: "triggerAriaEffect" }] : []));
+    subscribeClicks() {
+        toObservable(this.trigger)
+            .pipe(switchMap((trigger) => trigger.click$), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.toggle());
     }
     toggle() {
         this.onItemClick(this.parsedItem);
-        this.cd.markForCheck();
     }
     listenPointerOver() {
-        const target = this.anchorElement;
+        const target = this.anchorElement();
         const listener = this.renderer.listen(target, 'pointerover', (event) => {
             this.onItemPointerEnter(this.parsedItem);
             this.cd.markForCheck();
         });
         this.destroyRef.onDestroy(() => listener());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuComponent, selector: "rdt-menu", inputs: { trigger: "trigger", dataTestId: "dataTestId", items: "items" }, providers: [
+    updateFocusableElements() {
+        const anchor = this.anchorElement();
+        if (anchor) {
+            this.focusableElements.reset([{ nativeElement: anchor }]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: RdtMenuComponent, isStandalone: false, selector: "rdt-menu", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, dataTestId: { classPropertyName: "dataTestId", publicName: "dataTestId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: RdtMenuBaseComponent,
                 useExisting: RdtMenuComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [anchorElement]=\"anchorElement!\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expandedChild?.item === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\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{display:block;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: "@if (parsedItem) {\r\n<rdt-menu-overlay\r\n  [anchorElement]=\"anchorElement()\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expandedChild()?.item === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n  [level]=\"0\"\r\n/>\r\n}\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{display:block;position:relative}\n"], dependencies: [{ 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: "18.2.7", ngImport: i0, type: RdtMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rdt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: RdtMenuBaseComponent,
                             useExisting: RdtMenuComponent,
                         },
-                    ], template: "<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [anchorElement]=\"anchorElement!\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expandedChild?.item === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\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{display:block;position:relative}\n"] }]
-        }], propDecorators: { trigger: [{
-                type: Input,
-                args: [{ required: true }]
-            }], dataTestId: [{
-                type: Input
-            }], items: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+                    ], standalone: false, template: "@if (parsedItem) {\r\n<rdt-menu-overlay\r\n  [anchorElement]=\"anchorElement()\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expandedChild()?.item === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir()\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir()\"\r\n  [level]=\"0\"\r\n/>\r\n}\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{display:block;position:relative}\n"] }]
+        }], ctorParameters: () => [] });
 
 class RdtMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, declarations: [RdtMenuOverlayComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuModule, declarations: [RdtMenuOverlayComponent,
             RdtMenuComponent,
             RdtMenuBarComponent], imports: [CommonModule,
             RouterModule,
             RdtAnyRouteActiveDirective,
             RdtKeyListenerDirective,
             RdtButtonOutletDirective], exports: [RdtMenuComponent, RdtMenuBarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuModule, imports: [CommonModule,
             RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RdtMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [