@ngrdt/menu 0.0.1

package/fesm2022/ngrdt-menu.mjs

@@ -0,0 +1,1214 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewChildren, ViewChild, Input, HostBinding, HostListener, EnvironmentInjector, booleanAttribute, Directive, ViewEncapsulation, numberAttribute, NgModule } from '@angular/core';
+import { RdtStringUtils, KB_CODE, RdtObjectUtils } from '@ngrdt/utils';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
+import { delay, of, map, first, Subscription, fromEvent, throttleTime, animationFrameScheduler } from 'rxjs';
+import * as i3 from '@ngrdt/router';
+import { RdtRouterService, RdtAnyRouteActiveDirective } from '@ngrdt/router';
+import * as i4 from '@ngrdt/shortcuts';
+import { RdtShortcutService, RdtShortcut, RdtKeyListenerDirective } from '@ngrdt/shortcuts';
+import { RDT_BUTTON_BASE_PROVIDER, RdtButtonBase } from '@ngrdt/button';
+
+function parseMenuItems(items, injector, prefix = '') {
+    return items
+        .map((item) => {
+        let newPrefix;
+        if (item.dataTestId) {
+            newPrefix = item.dataTestId;
+        }
+        else if (prefix) {
+            newPrefix = RdtStringUtils.getDataTestId(item.label, prefix);
+        }
+        else {
+            newPrefix = RdtStringUtils.getDataTestId(item.label);
+        }
+        const newDataTestId = RdtStringUtils.getDataTestId(newPrefix, null, 'menu-item');
+        const res = {
+            label: item.label,
+            icon: item.icon,
+            shortcut: item.shortcut,
+            command: item.command,
+            visible: item.visible,
+            queryParams: item.queryParams,
+            requiredParent: item.requiredParent,
+            dataTestId: newDataTestId,
+        };
+        if (item.items) {
+            const childrenRes = res;
+            const parsedChildren = parseMenuItems(item.items, injector, newPrefix);
+            if (parsedChildren.length > 0) {
+                childrenRes.items = parsedChildren;
+            }
+            return childrenRes;
+        }
+        else if (item.routerLink) {
+            const linkRes = res;
+            linkRes.target = item.target ?? '_self';
+            if (item.routerLink) {
+                linkRes.routerLink = [item.routerLink.createAbsoluteUrl()];
+                if (!res.visible && item.routerLink.hasCanBeEnteredGuard) {
+                    const canBeEntered = item.routerLink.canBeEntered.bind(item.routerLink);
+                    linkRes.visible = () => canBeEntered(injector);
+                }
+            }
+            return linkRes;
+        }
+        else {
+            const linkRes = res;
+            if (item.externalLink) {
+                if (item.queryParams) {
+                    linkRes.externalLink = RdtStringUtils.appendQueryParams(item.externalLink, item.queryParams);
+                }
+                else {
+                    linkRes.externalLink = item.externalLink;
+                }
+            }
+            linkRes.target = item.target ?? '_blank';
+            return linkRes;
+        }
+    })
+        .filter((item) => !item.visible || item.visible())
+        .filter((item) => item.externalLink ||
+        item['routerLink'] ||
+        item.command ||
+        (item['items']?.length ?? 0) > 0);
+}
+
+var RdtMenuShortcutMode;
+(function (RdtMenuShortcutMode) {
+    RdtMenuShortcutMode["FOCUS_ITEM"] = "focus-item";
+    RdtMenuShortcutMode["OPEN_SUBMENU"] = "open-submenu";
+})(RdtMenuShortcutMode || (RdtMenuShortcutMode = {}));
+const RDT_MENU_MARGIN_TOP_PROPERTY_NAME = '--rdt-menu-margin-top';
+const RDT_MENU_MARGIN_BOTTOM_PROPERTY_NAME = '--rdt-menu-margin-bottom';
+const RDT_MENU_MARGIN_LEFT_PROPERTY_NAME = '--rdt-menu-margin-left';
+const RDT_MENU_MARGIN_RIGHT_PROPERTY_NAME = '--rdt-menu-margin-right';
+const DEFAULT_MENU_HORIZONTAL_DIR = 'left';
+const DEFAULT_MENU_VERTICAL_DIR = 'down';
+const RDT_MENU_HORIZONTAL_DIR_PROVIDER = new InjectionToken('RDT_MENU_HORIZONTAL_DIR');
+const RDT_MENU_VERTICAL_DIR_PROVIDER = new InjectionToken('RDT_MENU_VERTICAL_DIR');
+
+const INVISIBLE_CLASS = 'invisible';
+const FOCUS_VISIBLE = 'focus-visible';
+function getChildRoutesMapRec(item, map) {
+    let childRoutes;
+    if (menuItemHasChildren(item)) {
+        childRoutes = item.items.map((child) => getChildRoutesMapRec(child, map));
+    }
+    else {
+        childRoutes = [];
+    }
+    let res;
+    if (menuItemHasRoute(item) && item.routerLink) {
+        res = [item.routerLink].concat(...childRoutes);
+    }
+    else {
+        res = [].concat(...childRoutes);
+    }
+    map.set(item, res);
+    return res;
+}
+function getChildRoutesMap(items) {
+    const map = new Map();
+    items.forEach((item) => getChildRoutesMapRec(item, map));
+    return map;
+}
+function findNextItemWithPrefix(items, itemIndex, prefix) {
+    const len = items.length;
+    prefix = prefix.toLocaleLowerCase();
+    for (let i = (itemIndex + 1) % len; i !== itemIndex; i = (i + 1) % len) {
+        const label = items[i].label.toLocaleLowerCase();
+        if (label.startsWith(prefix)) {
+            return i;
+        }
+    }
+    return null;
+}
+function menuItemHasChildren(item) {
+    return 'items' in item;
+}
+function menuItemHasRoute(item) {
+    return 'routerLink' in item;
+}
+function getMenuItemsShortcutsRec(item, currentPath, res) {
+    const path = [...currentPath, item];
+    if (item.shortcut) {
+        res.push({
+            path: path,
+            shortcut: item.shortcut,
+        });
+    }
+    if (menuItemHasChildren(item)) {
+        item.items.forEach((child) => getMenuItemsShortcutsRec(child, path, res));
+    }
+}
+function getMenuItemsShortcuts(items) {
+    const res = [];
+    const initialPath = [];
+    items.forEach((item) => getMenuItemsShortcutsRec(item, initialPath, res));
+    return res;
+}
+function areHorDirsEqual(a, b) {
+    if (!a) {
+        return !b;
+    }
+    if (!b) {
+        return !a;
+    }
+    return a.dir === b.dir && a.left === b.left;
+}
+function areVertDirsEqual(a, b) {
+    if (!a) {
+        return !b;
+    }
+    if (!b) {
+        return !a;
+    }
+    return a.dir === b.dir && a.top === b.top;
+}
+
+// TODO: Split positioning and shortcut/focus management in separate classes
+class RdtMenuOverlayComponent {
+    elRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    renderer = inject(Renderer2);
+    topLevelMenu = inject(RdtMenuBaseComponent);
+    parentMenu = inject(RdtMenuOverlayComponent, {
+        optional: true,
+        skipSelf: true,
+    });
+    cd = inject(ChangeDetectorRef);
+    router = inject(Router);
+    document = inject(DOCUMENT);
+    shortcutService = inject(RdtShortcutService);
+    children;
+    focusableElements;
+    menuItemContainer;
+    item;
+    level;
+    preferredHorizontalDir = DEFAULT_MENU_HORIZONTAL_DIR;
+    preferredVerticalDir = DEFAULT_MENU_VERTICAL_DIR;
+    expanded = false;
+    autofocusItem = null;
+    // 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;
+    }
+    // Bounding box of this excluding any extra offset.
+    _box;
+    get box() {
+        return this._box;
+    }
+    // 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;
+    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'),
+        [KB_CODE.ARROW.LEFT]: () => this.closeSelf(),
+        [KB_CODE.HOME]: () => this.focusItem(0),
+        [KB_CODE.END]: () => this.focusItem(this.item.items.length - 1),
+        [KB_CODE.ESCAPE]: () => this.closeSelf(),
+        [KB_CODE.ENTER]: (index) => this.invokeItemClickByIndex(index),
+        [KB_CODE.SPACEBAR]: (index) => this.invokeItemClickByIndex(index),
+    };
+    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);
+                }
+            });
+        }
+    }
+    ngAfterViewInit() {
+        this.measureContainerPadding();
+        this.recalculatePosition(this.preferredHorizontalDir, this.preferredVerticalDir);
+        this._viewWasInit = true;
+    }
+    getMinOffsetLeft() {
+        return this.topLevelMenu.bodyMargin.left;
+    }
+    getMaxOffsetLeft() {
+        return (this.topLevelMenu.clientSize.width -
+            this._box.width -
+            this.topLevelMenu.bodyMargin.right);
+    }
+    getMinOffsetTop() {
+        return this.topLevelMenu.bodyMargin.top;
+    }
+    getMaxOffsetTop() {
+        return (this.topLevelMenu.clientSize.height -
+            this._box.height -
+            this.topLevelMenu.bodyMargin.bottom);
+    }
+    recalculatePosition(preferredHorizontalDir, preferredVerticalDir) {
+        // Make menu invisible so the menu does not move around in case of slow computer.
+        this.measureBoundingRect();
+        if (!this._box || !this._anchorBox) {
+            return;
+        }
+        const newHorDir = this.getRealHorizontalDir(preferredHorizontalDir);
+        const newVertDir = this.getRealVerticalDir(preferredVerticalDir);
+        // Horizontal direction
+        if (newHorDir.dir === 'right') {
+            newHorDir.left += this._anchorBox.left;
+            if (!this.isRootLevel) {
+                newHorDir.left += this._anchorBox.width;
+            }
+        }
+        else if (newHorDir.dir === 'left') {
+            newHorDir.left += this._anchorBox.left - this._box.width;
+            if (this.isRootLevel) {
+                newHorDir.left += this._anchorBox.width;
+            }
+        }
+        // Restrictions from left menu and right menu
+        newHorDir.left = Math.min(Math.max(this.getMinOffsetLeft(), newHorDir.left), this.getMaxOffsetLeft());
+        // Vertical direction
+        if (newVertDir.dir === 'down') {
+            newVertDir.top = this._anchorBox.top;
+            if (this.isRootLevel) {
+                newVertDir.top += this._anchorBox.height;
+            }
+            else {
+                newVertDir.top -= this._containerPadding.top;
+            }
+        }
+        else if (newVertDir.dir === 'up') {
+            newVertDir.top = this._anchorBox.top - this._box.height;
+            if (!this.isRootLevel) {
+                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;
+            this.setClasses();
+            this.measureBoundingRect();
+        }
+        this.recalculateChildren();
+    }
+    onItemClick(item) {
+        const hasChildren = menuItemHasChildren(item);
+        if (hasChildren && this.expandedChild !== item) {
+            this.autofocusSubmenuItem = null;
+            this.expandedChild = item;
+        }
+        else {
+            this.expandedChild = null;
+        }
+        // Could also listen to router events, but might be triggered by
+        // child router navigation.
+        if (!hasChildren) {
+            this.topLevelMenu.closeSubmenus();
+        }
+        if (typeof item.command === 'function') {
+            item.command();
+        }
+    }
+    invokeItemClick(item) {
+        if (menuItemHasRoute(item) && item.routerLink) {
+            this.router.navigate(item.routerLink);
+        }
+        this.onItemClick(item);
+        this.autofocusSubmenuItem = 'first';
+    }
+    getChildRoutes(item) {
+        return this.topLevelMenu.getChildRoutes(item);
+    }
+    closeSubmenus(focusExpanded = false) {
+        if (focusExpanded && this.expandedChild) {
+            this.focusItem(this.expandedChild);
+        }
+        this.expandedChild = null;
+        this.cd.markForCheck();
+    }
+    focusItemRecursively(path) {
+        const children = [...path];
+        const thisItem = children.shift();
+        this.autofocusSubmenuItem = null;
+        this.autofocusItem = null;
+        if (children.length > 0) {
+            this.expandAndGetChild(thisItem)
+                .pipe(delay(1))
+                .subscribe((overlay) => {
+                overlay.focusItemRecursively(children);
+            });
+        }
+        else {
+            // First focus the correct item because submenu might have focus on it.
+            // Removing focused element from DOM results in window:focusout event
+            // and that closes all menus
+            this.focusItem(thisItem);
+            // Now close submenus and therefore remove them from DOM
+            this.closeSubmenus();
+            // Wait until they are removed and focus the correct item again
+            setTimeout(() => this.focusItem(thisItem), 1);
+        }
+    }
+    expandAndGetChild(item) {
+        if (this.item.items.indexOf(item) < 0) {
+            throw new Error('Attempting to expand item that is not child item of this.item');
+        }
+        this.expandedChild = item;
+        this.cd.markForCheck();
+        const child = this.children.find((child) => 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));
+        }
+    }
+    onKeyDown(itemIndex, event) {
+        const hasAction = event.code in this.keyActions;
+        const isLetter = RdtStringUtils.isAlphabetCharacter(event.key) ||
+            RdtStringUtils.isNumericCharacter(event.key);
+        if (hasAction || isLetter) {
+            event.preventDefault();
+        }
+        if (hasAction) {
+            event.stopPropagation();
+        }
+        if (hasAction) {
+            this.keyActions[event.code](itemIndex);
+        }
+        else if (isLetter) {
+            const next = findNextItemWithPrefix(this.item.items, itemIndex, event.key);
+            if (next !== null) {
+                this.focusItem(next);
+            }
+        }
+    }
+    onTabKeyPress(event) {
+        // Do not prevent default to correctly switch to previous element
+        event.originalEvent.stopPropagation();
+        // Wait for document.activeElement to switch to new element
+        setTimeout(() => {
+            if (!this.elRef.nativeElement.contains(this.document.activeElement)) {
+                this.closeSelf(false);
+            }
+        }, 1);
+    }
+    invokeItemClickByIndex(itemIndex) {
+        const item = this.item.items[itemIndex];
+        if (!item) {
+            return;
+        }
+        this.invokeItemClick(item);
+    }
+    focusItem(item, visibleFocus = true) {
+        let itemIndex;
+        if (typeof item === 'number') {
+            itemIndex = item;
+        }
+        else {
+            itemIndex = this.item.items.indexOf(item);
+        }
+        if (itemIndex >= 0 && itemIndex < this.focusableElements.length) {
+            this.blurAllFocusable();
+            this.focusFocusable(itemIndex, visibleFocus);
+        }
+    }
+    blurAllFocusable() {
+        this.focusableElements.forEach((el) => this.renderer.removeClass(el.nativeElement, FOCUS_VISIBLE));
+    }
+    focusFocusable(itemIndex, visibleFocus) {
+        const elRef = this.focusableElements.get(itemIndex);
+        if (elRef) {
+            if (visibleFocus) {
+                this.renderer.addClass(elRef.nativeElement, FOCUS_VISIBLE);
+            }
+            elRef.nativeElement.focus();
+        }
+    }
+    focusNextItem(itemIndex) {
+        const next = (itemIndex + 1) % this.item.items.length;
+        this.focusItem(next);
+    }
+    focusPrevItem(itemIndex) {
+        const prev = (itemIndex - 1 + this.item.items.length) % this.item.items.length;
+        this.focusItem(prev);
+    }
+    openSubmenu(itemIndex, visibleFocus) {
+        if (itemIndex < this.item.items.length &&
+            menuItemHasChildren(this.item.items[itemIndex])) {
+            this.expandedChild = this.item.items[itemIndex];
+            this.autofocusSubmenuItem = visibleFocus;
+        }
+    }
+    closeSelf(focusExpanded = true) {
+        if (this.parentMenu) {
+            this.parentMenu.closeSubmenus(focusExpanded);
+        }
+        else {
+            this.topLevelMenu.closeSubmenus(focusExpanded);
+        }
+    }
+    checkActiveElement(event) {
+        if (this.topLevelMenu.closeOnFocusOut) {
+            const thisEl = this.elRef.nativeElement;
+            const target = event.relatedTarget;
+            if (!(target instanceof HTMLElement) || !thisEl.contains(target)) {
+                this.expandedChild = null;
+            }
+        }
+    }
+    // Calculates direction of this menu and offset in case
+    // menu won't fit in left nor right of parent menu.
+    getRealHorizontalDir(preferredHorizontalDir) {
+        let left;
+        let right;
+        // This menu is directly under menubar
+        if (this.level === 0) {
+            left = this._anchorBox.right - this._box.width;
+            right =
+                this.topLevelMenu.clientSize.width -
+                    (this._anchorBox.left + this._box.width);
+        }
+        else {
+            // Menu is nested
+            right =
+                this.topLevelMenu.clientSize.width -
+                    (this._anchorBox.right + this._box.width);
+            left = this._anchorBox.left - this._box.width;
+        }
+        left -= this.topLevelMenu.bodyMargin.left;
+        right -= this.topLevelMenu.bodyMargin.right;
+        if (preferredHorizontalDir === 'right') {
+            // We use preferred if possible.
+            if (right >= 0) {
+                return { dir: 'right', left: 0 };
+                // Then the other one.
+            }
+            else if (left >= 0) {
+                return { dir: 'left', left: 0 };
+                // Edge case if neither direction can be used (ultra narrow screen).
+                // Choose direction that covers least of parent menu.
+            }
+            else {
+                return this.getNarrowScreenHorizontalDir(left, right);
+            }
+        }
+        else {
+            if (left >= 0) {
+                return { dir: 'left', left: 0 };
+            }
+            else if (right >= 0) {
+                return { dir: 'right', left: 0 };
+            }
+            else {
+                return this.getNarrowScreenHorizontalDir(left, right);
+            }
+        }
+    }
+    // Finds out where to put menu in case screen is too narrow for two menus
+    // to fit next to each other. Minimizes area of parent menu covered by this.
+    getNarrowScreenHorizontalDir(left, right) {
+        const screenStart = this.topLevelMenu.bodyMargin.left;
+        const screenEnd = this.topLevelMenu.clientSize.width - this.topLevelMenu.bodyMargin.right;
+        const screenCenter = (screenStart - screenEnd) / 2;
+        const leftStart = Math.max(this._anchorBox.left, screenStart);
+        const leftEnd = Math.min(this._anchorBox.left + this._anchorBox.width, screenCenter);
+        const rightStart = Math.max(screenCenter, leftEnd);
+        const rightEnd = Math.min(this._anchorBox.left + this._anchorBox.width, screenEnd);
+        if (leftEnd - leftStart > rightEnd - rightStart) {
+            return { dir: 'right', left: right };
+        }
+        else {
+            return { dir: 'left', left: -left };
+        }
+    }
+    getRealVerticalDir(preferredVerticalDir) {
+        let bottom;
+        let top;
+        if (this.level === 0) {
+            bottom =
+                this.topLevelMenu.clientSize.height +
+                    this._anchorBox.bottom -
+                    this._box.height;
+            top = this._anchorBox.top - this._box.height;
+        }
+        else {
+            bottom =
+                this.topLevelMenu.clientSize.height -
+                    this._anchorBox.top -
+                    this._box.height;
+            top = this._anchorBox.bottom - this._box.height;
+        }
+        top -= this.topLevelMenu.bodyMargin.top;
+        bottom -= this.topLevelMenu.bodyMargin.bottom;
+        if (preferredVerticalDir === 'down') {
+            if (bottom >= 0) {
+                return { dir: 'down', top: 0 };
+            }
+            else if (top >= 0) {
+                return { dir: 'up', top: 0 };
+            }
+            else {
+                return { dir: preferredVerticalDir, top: 0 };
+            }
+        }
+        else {
+            if (top >= 0) {
+                return { dir: 'up', top: 0 };
+            }
+            else if (bottom >= 0) {
+                return { dir: 'down', top: 0 };
+            }
+            else {
+                return { dir: preferredVerticalDir, top: 0 };
+            }
+        }
+    }
+    // Measures bounding rect of this and offset container
+    // 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;
+        this._anchorBox = anchor.getBoundingClientRect();
+    }
+    measureContainerPadding() {
+        const computedStyles = getComputedStyle(this.menuItemContainer.nativeElement);
+        const paddingTop = parseFloat(computedStyles.paddingTop);
+        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') {
+                this.setClass('rdt-overlay-up');
+                this.removeClass('rdt-overlay-down');
+            }
+            else {
+                this.removeClass('rdt-overlay-up');
+                this.setClass('rdt-overlay-down');
+            }
+            this.setOffset('top', this.verticalDir.top);
+        }
+        if (this.horizontalDir) {
+            if (this.horizontalDir.dir === 'left') {
+                this.setClass('rdt-overlay-left');
+                this.removeClass('rdt-overlay-right');
+            }
+            else {
+                this.removeClass('rdt-overlay-left');
+                this.setClass('rdt-overlay-right');
+            }
+            this.setOffset('left', this.horizontalDir.left);
+        }
+        if (this.isRootLevel) {
+            this.setClass('rdt-menu-root');
+            this.removeClass('rdt-menu-sub');
+        }
+        else {
+            this.removeClass('rdt-menu-root');
+            this.setClass('rdt-menu-sub');
+        }
+    }
+    setClass(className) {
+        this.renderer.addClass(this.elRef.nativeElement, className);
+    }
+    removeClass(className) {
+        this.renderer.removeClass(this.elRef.nativeElement, className);
+    }
+    setOffset(direction, value) {
+        this.renderer.setStyle(this.elRef.nativeElement, direction, `${value}px`);
+    }
+    listenTabKeyPress() {
+        const shiftTab = RdtShortcut.createUnsafe('shift', 'tab');
+        const tab = RdtShortcut.createUnsafe('tab');
+        this.shortcutService
+            .listen([tab, shiftTab], {
+            element: this.elRef.nativeElement,
+            preventDefault: false,
+        })
+            .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    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\"\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          <vnsh-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <vnsh-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n          <span class=\"menu-item-icon\" *ngIf=\"item.items\">&gt;</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        <vnsh-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\"\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(--vnsh-menu-min-width);box-shadow:var(--vnsh-menu-box-shadow);border-radius:var(--vnsh-menu-border-radius);max-height:calc(100vh - var(--vnsh-menu-margin-top, 0px) - var(--vnsh-menu-margin-bottom, 0px));overflow-y:auto}:host.expanded{visibility:visible}.menu-item-container{list-style-type:none;padding:var(--vnsh-menu-padding-horizontal-padding) 0;border-radius:var(--vnsh-menu-border-radius);background-color:var(--vnsh-menu-item-background)}.menu-item{cursor:pointer;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{background-color:var(--vnsh-menu-item-background-route-active)}.menu-item-content{display:flex;align-items:center;padding:var(--vnsh-menu-item-padding);width:100%;background-color:var(--vnsh-menu-item-background);color:var(--vnsh-menu-item-text-color)}.menu-item-content:hover{background-color:var(--vnsh-menu-item-background-hover)}.menu-item-content.focus-visible:focus,.menu-item-content:focus-visible{background-color:var(--vnsh-menu-item-background-focus);outline:none}\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: ["anyRouteActive", "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: [{
+            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    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\"\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          <vnsh-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <vnsh-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n          <span class=\"menu-item-icon\" *ngIf=\"item.items\">&gt;</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        <vnsh-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\"\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(--vnsh-menu-min-width);box-shadow:var(--vnsh-menu-box-shadow);border-radius:var(--vnsh-menu-border-radius);max-height:calc(100vh - var(--vnsh-menu-margin-top, 0px) - var(--vnsh-menu-margin-bottom, 0px));overflow-y:auto}:host.expanded{visibility:visible}.menu-item-container{list-style-type:none;padding:var(--vnsh-menu-padding-horizontal-padding) 0;border-radius:var(--vnsh-menu-border-radius);background-color:var(--vnsh-menu-item-background)}.menu-item{cursor:pointer;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{background-color:var(--vnsh-menu-item-background-route-active)}.menu-item-content{display:flex;align-items:center;padding:var(--vnsh-menu-item-padding);width:100%;background-color:var(--vnsh-menu-item-background);color:var(--vnsh-menu-item-text-color)}.menu-item-content:hover{background-color:var(--vnsh-menu-item-background-hover)}.menu-item-content.focus-visible:focus,.menu-item-content:focus-visible{background-color:var(--vnsh-menu-item-background-focus);outline:none}\n"] }]
+        }], propDecorators: { children: [{
+                type: ViewChildren,
+                args: [RdtMenuOverlayComponent]
+            }], focusableElements: [{
+                type: ViewChildren,
+                args: ['focusableItem']
+            }], 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;
+    // 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 = true;
+    cd = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    rdtRouter = inject(RdtRouterService);
+    elRef = inject(ElementRef);
+    document = inject(DOCUMENT);
+    renderer = inject(Renderer2);
+    router = inject(Router);
+    shortcutService = inject(RdtShortcutService);
+    injector = inject(EnvironmentInjector);
+    children;
+    focusableElements;
+    classes = 'rdt-menu-base';
+    expanded = null;
+    autofocusSubmenuItem = null;
+    parsedItems;
+    get clientSize() {
+        return this._clientSize;
+    }
+    _clientSize;
+    get bodyMargin() {
+        return this._bodyMargin;
+    }
+    _bodyMargin;
+    allParsedItems;
+    childRoutesMap = new Map();
+    shortcutSub = new Subscription();
+    shortcutMap = {};
+    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'),
+        [KB_CODE.ARROW.UP]: (index) => this.openSubmenu(index, 'last'),
+        [KB_CODE.HOME]: () => this.focusItem(0),
+        [KB_CODE.END]: () => this.focusItem(this.parsedItems.length - 1),
+        [KB_CODE.ENTER]: (index) => this.invokeItemClickByIndex(index),
+        [KB_CODE.SPACEBAR]: (index) => this.invokeItemClickByIndex(index),
+    };
+    // Returns all routes asociated with item or its subitems.
+    getChildRoutes(item) {
+        return this.childRoutesMap.get(item) ?? [];
+    }
+    ngOnInit() {
+        this.childRoutesMap = getChildRoutesMap(this.parsedItems);
+        this.rdtRouter.navigationEnd$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((ev) => this.filterItems());
+        this.measure();
+    }
+    ngOnChanges(changes) {
+        if (this.children) {
+            this.recalculateChildren();
+        }
+        if ('items' in changes) {
+            this.childRoutesMap = getChildRoutesMap(this.parsedItems);
+            this.listenShortcuts();
+        }
+    }
+    ngAfterViewInit() {
+        this.listenWindowResize();
+        // Not using timeout results in horizontal overflow on html element
+        setTimeout(() => {
+            this.measure();
+            this.recalculateChildren();
+        }, 50);
+    }
+    recalculateChildren() {
+        this.children.forEach((child) => {
+            child.recalculatePosition(this.preferredHorizontalDir, this.preferredVerticalDir);
+        });
+    }
+    closeSubmenus(focusExpanded = false) {
+        if (focusExpanded && this.expanded) {
+            this.focusItem(this.expanded);
+        }
+        this.expanded = null;
+        this.cd.markForCheck();
+    }
+    onItemClick(item) {
+        if (menuItemHasChildren(item) && this.expanded !== item) {
+            this.autofocusSubmenuItem = null;
+            this.expanded = item;
+        }
+        else {
+            this.expanded = null;
+        }
+        if (typeof item.command === 'function') {
+            item.command();
+        }
+    }
+    onKeyDown(itemIndex, event) {
+        const hasAction = event.code in this.keyActions;
+        const isLetter = RdtStringUtils.isAlphabetCharacter(event.key) ||
+            RdtStringUtils.isNumericCharacter(event.key);
+        if (hasAction || isLetter) {
+            event.preventDefault();
+        }
+        if (hasAction) {
+            event.stopPropagation();
+        }
+        if (hasAction) {
+            this.keyActions[event.code](itemIndex);
+        }
+        else if (isLetter) {
+            const next = findNextItemWithPrefix(this.parsedItems, itemIndex, event.key);
+            if (next !== null) {
+                this.focusItem(next);
+            }
+        }
+    }
+    invokeItemClick(item) {
+        if (menuItemHasRoute(item) && item.routerLink) {
+            this.router.navigate(item.routerLink);
+        }
+        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.cd.markForCheck();
+    }
+    filterRec(items, current) {
+        let currentParent = current.route;
+        const currentParams = current.params;
+        const filtered = items.filter((item) => {
+            if (!item.requiredParent) {
+                return true;
+            }
+            const required = item.requiredParent;
+            while (currentParent.absolutePath !== required.absolutePath) {
+                currentParent = currentParent.parent;
+                if (!currentParent) {
+                    return false;
+                }
+            }
+            let requiredParent = required;
+            do {
+                const path = requiredParent.absolutePath;
+                if (path in currentParams) {
+                    for (const key in requiredParent.staticParams) {
+                        if (currentParams[path][key] !== requiredParent.staticParams[key]) {
+                            return false;
+                        }
+                    }
+                }
+                requiredParent = requiredParent.parent;
+            } while (requiredParent);
+            return true;
+        });
+        return filtered.map((item) => {
+            if (item.items) {
+                return {
+                    ...item,
+                    items: this.filterRec(item.items, current),
+                };
+            }
+            else {
+                return item;
+            }
+        });
+    }
+    invokeItemClickByIndex(itemIndex) {
+        const item = this.parsedItems[itemIndex];
+        if (!item) {
+            return;
+        }
+        this.invokeItemClick(item);
+    }
+    openSubmenu(itemIndex, visibleFocus) {
+        if (itemIndex < this.parsedItems.length &&
+            menuItemHasChildren(this.parsedItems[itemIndex])) {
+            const item = this.parsedItems[itemIndex];
+            this.autofocusSubmenuItem = visibleFocus;
+            this.expanded = item;
+        }
+    }
+    focusItem(item) {
+        let itemIndex;
+        if (typeof item === 'number') {
+            itemIndex = item;
+        }
+        else {
+            itemIndex = this.parsedItems.indexOf(item);
+        }
+        if (itemIndex >= 0 && itemIndex < this.focusableElements.length) {
+            this.blurAllFocusable();
+            this.focusFocusable(itemIndex);
+        }
+    }
+    focusNextItem(itemIndex) {
+        const next = (itemIndex + 1) % this.parsedItems.length;
+        this.focusItem(next);
+    }
+    focusPrevItem(itemIndex) {
+        const prev = (itemIndex - 1 + this.parsedItems.length) % this.parsedItems.length;
+        this.focusItem(prev);
+    }
+    blurAllFocusable() {
+        this.focusableElements.forEach((el) => this.renderer.removeClass(el.nativeElement, FOCUS_VISIBLE));
+    }
+    focusFocusable(itemIndex) {
+        const elRef = this.focusableElements.get(itemIndex);
+        if (elRef) {
+            this.renderer.addClass(elRef.nativeElement, FOCUS_VISIBLE);
+            elRef.nativeElement.focus();
+        }
+    }
+    // Closes menu if user navigates outside it using Tab.
+    checkActiveElement(event) {
+        if (this.closeOnFocusOut) {
+            const thisEl = this.elRef.nativeElement;
+            const target = event.relatedTarget;
+            if (!(target instanceof HTMLElement) || !thisEl.contains(target)) {
+                this.expanded = null;
+            }
+        }
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        const elRef = this.elRef.nativeElement;
+        if (!elRef.contains(target)) {
+            this.closeSubmenus();
+        }
+    }
+    measure() {
+        this.measureClientSize();
+        this.readMargin();
+    }
+    readMargin() {
+        const computedStyle = getComputedStyle(this.elRef.nativeElement);
+        const topVal = computedStyle.getPropertyValue(RDT_MENU_MARGIN_TOP_PROPERTY_NAME);
+        const bottomVal = computedStyle.getPropertyValue(RDT_MENU_MARGIN_BOTTOM_PROPERTY_NAME);
+        const leftVal = computedStyle.getPropertyValue(RDT_MENU_MARGIN_LEFT_PROPERTY_NAME);
+        const rightVal = computedStyle.getPropertyValue(RDT_MENU_MARGIN_RIGHT_PROPERTY_NAME);
+        this._bodyMargin = {
+            top: parseInt(topVal) || 0,
+            bottom: parseInt(bottomVal) || 0,
+            left: parseInt(leftVal) || 0,
+            right: parseInt(rightVal) || 0,
+        };
+    }
+    measureClientSize() {
+        this._clientSize = {
+            width: this.document.body.clientWidth,
+            height: this.document.body.clientHeight,
+        };
+    }
+    listenWindowResize() {
+        fromEvent(window, 'resize')
+            .pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.measure();
+            this.recalculateChildren();
+        });
+    }
+    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));
+    }
+    getShortcutMap(itemsWithShortcuts) {
+        const shortcutMap = {};
+        itemsWithShortcuts.forEach((item) => {
+            shortcutMap[item.shortcut.hotkeysValue] = item.path;
+        });
+        return shortcutMap;
+    }
+    onShortcut(shortcut) {
+        const path = this.shortcutMap[shortcut.hotkeysValue];
+        if (!path) {
+            console.warn(`Menu shortcut ${shortcut.hotkeysValue} was detected, but there is no path associated with it.`, this.shortcutMap);
+        }
+        const last = path[path.length - 1];
+        const hasRoute = menuItemHasRoute(last);
+        const hasCommand = typeof last.command === 'function';
+        if (hasRoute || hasCommand) {
+            this.closeSubmenus(false);
+            if (hasCommand) {
+                last.command();
+            }
+            if (hasRoute) {
+                this.router.navigate(last.routerLink);
+            }
+        }
+        else {
+            this.activateItemRecursively(path);
+        }
+    }
+    activateItemRecursively(path) {
+        const children = [...path];
+        if (this.shortcutMode === RdtMenuShortcutMode.OPEN_SUBMENU) {
+            const last = children[children.length - 1];
+            if (menuItemHasChildren(last) && last.items[0]) {
+                children.push(last.items[0]);
+            }
+        }
+        const thisItem = children.shift();
+        if (children.length > 0) {
+            this.expanded = thisItem;
+            const overlay = this.children.find((child) => child.item === thisItem);
+            overlay.focusItemRecursively(children);
+        }
+        else {
+            this.expanded = null;
+            this.focusItem(thisItem);
+        }
+    }
+    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] }, host: { listeners: { "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 });
+}
+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 }]
+            }], children: [{
+                type: ViewChildren,
+                args: [RdtMenuOverlayComponent]
+            }], focusableElements: [{
+                type: ViewChildren,
+                args: ['focusableItem']
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], checkActiveElement: [{
+                type: HostListener,
+                args: ['window:focusout', ['$event']]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class RdtMenuComponent extends RdtMenuBaseComponent {
+    buttonClass = inject(RDT_BUTTON_BASE_PROVIDER);
+    dataTestId = '';
+    get item() {
+        return this._item;
+    }
+    set item(value) {
+        this._item = value;
+        this.allParsedItems = parseMenuItems([value], this.injector);
+        this.filterItems();
+    }
+    _item;
+    button;
+    get parsedItem() {
+        return this.parsedItems[0];
+    }
+    get buttonInputs() {
+        return {
+            'attr.role': 'menuitem',
+            'attr.aria-haspopup': 'menu',
+            'attr.aria-expanded': this.expanded === this.parsedItem,
+            tabIndex: 0,
+            dataTestId: this.dataTestId,
+            text: this.parsedItem.label,
+            icon: this.parsedItem.icon,
+        };
+    }
+    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: { dataTestId: "dataTestId", item: "item" }, providers: [
+            {
+                provide: RdtMenuBaseComponent,
+                useExisting: RdtMenuComponent,
+            },
+        ], viewQueries: [{ propertyName: "button", first: true, predicate: RdtButtonBase, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\r\n  #focusableItem\r\n  *ngComponentOutlet=\"buttonClass; inputs: buttonInputs\"\r\n/>\r\n\r\n<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expanded === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\r\n<!-- TODO: Fix\r\n<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [anchorElement]=\"focusableItem.elRef.nativeElement\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expanded === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\r\n-->\r\n", styles: ["rdt-menu{display:block;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: RdtMenuBaseComponent,
+                            useExisting: RdtMenuComponent,
+                        },
+                    ], template: "<ng-container\r\n  #focusableItem\r\n  *ngComponentOutlet=\"buttonClass; inputs: buttonInputs\"\r\n/>\r\n\r\n<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expanded === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\r\n<!-- TODO: Fix\r\n<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [anchorElement]=\"focusableItem.elRef.nativeElement\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expanded === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\r\n-->\r\n", styles: ["rdt-menu{display:block;position:relative}\n"] }]
+        }], propDecorators: { dataTestId: [{
+                type: Input
+            }], item: [{
+                type: Input,
+                args: [{ required: true }]
+            }], button: [{
+                type: ViewChild,
+                args: [RdtButtonBase, { static: true }]
+            }] } });
+
+class RdtMenuBarComponent extends RdtMenuBaseComponent {
+    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: "16.1.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: [
+            {
+                provide: RdtMenuBaseComponent,
+                useExisting: RdtMenuBarComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\">\r\n  <li\r\n    *ngFor=\"let item of parsedItems; let i = index\"\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    <ng-container *ngIf=\"!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        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item === expanded\"\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          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO\r\n          <vnsh-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          <vnsh-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          <span class=\"menu-bar-item-icon\" *ngIf=\"item.items\">v</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-bar-item-right-content\">\r\n        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        <!--\r\n        <vnsh-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    <ng-container *ngIf=\"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    </ng-container>\r\n\r\n    <ng-container *ngIf=\"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    </ng-container>\r\n\r\n    <rdt-menu-overlay\r\n      *ngIf=\"item.items\"\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expanded\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n  </li>\r\n</ul>\r\n", styles: [":root{--rdt-menu-min-width: 12rem;--rdt-menu-border-radius: 5px;--rdt-menu-padding-horizontal-padding: .75rem;--rdt-menu-box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, .2), 0px 9px 12px 1px rgba(0, 0, 0, .14), 0px 3px 16px 2px rgba(0, 0, 0, .12);--rdt-menu-bar-item-background: transparent;--rdt-menu-bar-item-background-expanded: rgb(64, 116, 188);--rdt-menu-bar-item-background-route-active: var( --rdt-menu-bar-item-background-expanded );--rdt-menu-bar-item-background-hover: rgb(64, 116, 188);--rdt-menu-bar-item-background-focus: rgb(64, 116, 188);--rdt-menu-bar-item-background-disabled: black;--rdt-menu-bar-item-padding: .5rem;--rdt-menu-bar-item-border-radius: 5px;--rdt-menu-item-background: var(--white);--rdt-menu-item-background-hover: rgba(var(--primary-blue-rgb), .08);--rdt-menu-item-background-expanded: rgba(var(--primary-blue-rgb), .16);--rdt-menu-item-background-route-active: var( --rdt-menu-item-background-expanded );--rdt-menu-item-background-focus: var(--rdt-menu-item-background-expanded);--rdt-menu-item-background-disabled: black;--rdt-menu-item-text-color: var(--black);--rdt-menu-item-padding: .5rem 1rem;--rdt-menu-margin-top: var(--dp3-header-height);--rdt-menu-margin-bottom: var(--dp3-footer-height)}a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;border:none;text-decoration:none}.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-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--sub-menu-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;padding-left:0}.menu-bar-item{cursor:pointer;pointer-events:all;color:var(--white);margin:0 .5rem;position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-route-active)}.menu-bar-item[aria-expanded=true] .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-expanded)}.menu-bar-item-content{display:flex;align-items:center;padding:var(--rdt-menu-bar-item-padding);color:inherit!important;border-radius:var(--rdt-menu-bar-item-border-radius);overflow:hidden;background-color:var(--rdt-menu-bar-item-background)}.menu-bar-item-content:hover{background-color:var(--rdt-menu-bar-item-background-hover)}.menu-bar-item-content.focus-visible:focus,.menu-bar-item-content:focus-visible{outline:none;background-color:var(--rdt-menu-bar-item-background-focus)}\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: ["anyRouteActive", "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: [{
+            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\">\r\n  <li\r\n    *ngFor=\"let item of parsedItems; let i = index\"\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    <ng-container *ngIf=\"!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        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item === expanded\"\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          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO\r\n          <vnsh-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          <vnsh-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          <span class=\"menu-bar-item-icon\" *ngIf=\"item.items\">v</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-bar-item-right-content\">\r\n        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        <!--\r\n        <vnsh-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    <ng-container *ngIf=\"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    </ng-container>\r\n\r\n    <ng-container *ngIf=\"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    </ng-container>\r\n\r\n    <rdt-menu-overlay\r\n      *ngIf=\"item.items\"\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expanded\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n  </li>\r\n</ul>\r\n", styles: [":root{--rdt-menu-min-width: 12rem;--rdt-menu-border-radius: 5px;--rdt-menu-padding-horizontal-padding: .75rem;--rdt-menu-box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, .2), 0px 9px 12px 1px rgba(0, 0, 0, .14), 0px 3px 16px 2px rgba(0, 0, 0, .12);--rdt-menu-bar-item-background: transparent;--rdt-menu-bar-item-background-expanded: rgb(64, 116, 188);--rdt-menu-bar-item-background-route-active: var( --rdt-menu-bar-item-background-expanded );--rdt-menu-bar-item-background-hover: rgb(64, 116, 188);--rdt-menu-bar-item-background-focus: rgb(64, 116, 188);--rdt-menu-bar-item-background-disabled: black;--rdt-menu-bar-item-padding: .5rem;--rdt-menu-bar-item-border-radius: 5px;--rdt-menu-item-background: var(--white);--rdt-menu-item-background-hover: rgba(var(--primary-blue-rgb), .08);--rdt-menu-item-background-expanded: rgba(var(--primary-blue-rgb), .16);--rdt-menu-item-background-route-active: var( --rdt-menu-item-background-expanded );--rdt-menu-item-background-focus: var(--rdt-menu-item-background-expanded);--rdt-menu-item-background-disabled: black;--rdt-menu-item-text-color: var(--black);--rdt-menu-item-padding: .5rem 1rem;--rdt-menu-margin-top: var(--dp3-header-height);--rdt-menu-margin-bottom: var(--dp3-footer-height)}a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;border:none;text-decoration:none}.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-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--sub-menu-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;padding-left:0}.menu-bar-item{cursor:pointer;pointer-events:all;color:var(--white);margin:0 .5rem;position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-route-active)}.menu-bar-item[aria-expanded=true] .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-expanded)}.menu-bar-item-content{display:flex;align-items:center;padding:var(--rdt-menu-bar-item-padding);color:inherit!important;border-radius:var(--rdt-menu-bar-item-border-radius);overflow:hidden;background-color:var(--rdt-menu-bar-item-background)}.menu-bar-item-content:hover{background-color:var(--rdt-menu-bar-item-background-hover)}.menu-bar-item-content.focus-visible:focus,.menu-bar-item-content:focus-visible{outline:none;background-color:var(--rdt-menu-bar-item-background-focus)}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], headerHeight: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], footerHeight: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], roleAttr: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+
+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,
+            RdtMenuComponent,
+            RdtMenuBarComponent], imports: [CommonModule,
+            RouterModule,
+            RdtAnyRouteActiveDirective,
+            RdtKeyListenerDirective], exports: [RdtMenuComponent, RdtMenuBarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, imports: [CommonModule,
+            RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        RdtAnyRouteActiveDirective,
+                        RdtKeyListenerDirective,
+                    ],
+                    declarations: [
+                        RdtMenuOverlayComponent,
+                        RdtMenuComponent,
+                        RdtMenuBarComponent,
+                    ],
+                    exports: [RdtMenuComponent, RdtMenuBarComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_MENU_HORIZONTAL_DIR, DEFAULT_MENU_VERTICAL_DIR, RDT_MENU_HORIZONTAL_DIR_PROVIDER, RDT_MENU_MARGIN_BOTTOM_PROPERTY_NAME, RDT_MENU_MARGIN_LEFT_PROPERTY_NAME, RDT_MENU_MARGIN_RIGHT_PROPERTY_NAME, RDT_MENU_MARGIN_TOP_PROPERTY_NAME, RDT_MENU_VERTICAL_DIR_PROVIDER, RdtMenuBarComponent, RdtMenuComponent, RdtMenuModule, RdtMenuShortcutMode };
+//# sourceMappingURL=ngrdt-menu.mjs.map