@angular/cdk-experimental 13.0.0-next.7 → 13.0.0-rc.2

package/fesm2020/menu.mjs

@@ -0,0 +1,2202 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Directive, EventEmitter, Optional, Inject, Input, Output, Self, HostListener, ContentChildren, NgModule } from '@angular/core';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, TAB, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import * as i2 from '@angular/cdk/bidi';
+import { Subject, fromEvent, merge, defer } from 'rxjs';
+import { filter, takeUntil, startWith, mergeMap, mapTo, mergeAll, take, switchMap } from 'rxjs/operators';
+import * as i1$1 from '@angular/cdk/collections';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { TemplatePortal } from '@angular/cdk/portal';
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/** Injection token used to return classes implementing the Menu interface */
+const CDK_MENU = new InjectionToken('cdk-menu');
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * MenuStack allows subscribers to listen for close events (when a MenuStackItem is popped off
+ * of the stack) in order to perform closing actions. Upon the MenuStack being empty it emits
+ * from the `empty` observable specifying the next focus action which the listener should perform
+ * as requested by the closer.
+ */
+class MenuStack {
+    constructor() {
+        /** All MenuStackItems tracked by this MenuStack. */
+        this._elements = [];
+        /** Emits the element which was popped off of the stack when requested by a closer. */
+        this._close = new Subject();
+        /** Emits once the MenuStack has become empty after popping off elements. */
+        this._empty = new Subject();
+        /** Observable which emits the MenuStackItem which has been requested to close. */
+        this.closed = this._close;
+        /**
+         * Observable which emits when the MenuStack is empty after popping off the last element. It
+         * emits a FocusNext event which specifies the action the closer has requested the listener
+         * perform.
+         */
+        this.emptied = this._empty;
+    }
+    /** @param menu the MenuStackItem to put on the stack. */
+    push(menu) {
+        this._elements.push(menu);
+    }
+    /**
+     * Pop items off of the stack up to and including `lastItem` and emit each on the close
+     * observable. If the stack is empty or `lastItem` is not on the stack it does nothing.
+     * @param lastItem the last item to pop off the stack.
+     * @param focusNext the event to emit on the `empty` observable if the method call resulted in an
+     * empty stack. Does not emit if the stack was initially empty or if `lastItem` was not on the
+     * stack.
+     */
+    close(lastItem, focusNext) {
+        if (this._elements.indexOf(lastItem) >= 0) {
+            let poppedElement;
+            do {
+                poppedElement = this._elements.pop();
+                this._close.next(poppedElement);
+            } while (poppedElement !== lastItem);
+            if (this.isEmpty()) {
+                this._empty.next(focusNext);
+            }
+        }
+    }
+    /**
+     * Pop items off of the stack up to but excluding `lastItem` and emit each on the close
+     * observable. If the stack is empty or `lastItem` is not on the stack it does nothing.
+     * @param lastItem the element which should be left on the stack
+     * @return whether or not an item was removed from the stack
+     */
+    closeSubMenuOf(lastItem) {
+        let removed = false;
+        if (this._elements.indexOf(lastItem) >= 0) {
+            removed = this.peek() !== lastItem;
+            while (this.peek() !== lastItem) {
+                this._close.next(this._elements.pop());
+            }
+        }
+        return removed;
+    }
+    /**
+     * Pop off all MenuStackItems and emit each one on the `close` observable one by one.
+     * @param focusNext the event to emit on the `empty` observable once the stack is emptied. Does
+     * not emit if the stack was initially empty.
+     */
+    closeAll(focusNext) {
+        if (!this.isEmpty()) {
+            while (!this.isEmpty()) {
+                const menuStackItem = this._elements.pop();
+                if (menuStackItem) {
+                    this._close.next(menuStackItem);
+                }
+            }
+            this._empty.next(focusNext);
+        }
+    }
+    /** Return true if this stack is empty. */
+    isEmpty() {
+        return !this._elements.length;
+    }
+    /** Return the length of the stack. */
+    length() {
+        return this._elements.length;
+    }
+    /** Get the top most element on the stack. */
+    peek() {
+        return this._elements[this._elements.length - 1];
+    }
+}
+/** NoopMenuStack is a placeholder MenuStack used for inline menus. */
+class NoopMenuStack extends MenuStack {
+    /** Noop push - does not add elements to the MenuStack. */
+    push(_) { }
+}
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Throws an exception when a menu panel already has a menu stack.
+ * @docs-private
+ */
+function throwExistingMenuStackError() {
+    throw Error('CdkMenuPanel is already referenced by different CdkMenuTrigger. Ensure that a menu is' +
+        ' opened by a single trigger only.');
+}
+/**
+ * Throws an exception when an instance of the PointerFocusTracker is not provided.
+ * @docs-private
+ */
+function throwMissingPointerFocusTracker() {
+    throw Error('expected an instance of PointerFocusTracker to be provided');
+}
+/**
+ * Throws an exception when a reference to the parent menu is not provided.
+ * @docs-private
+ */
+function throwMissingMenuReference() {
+    throw Error('expected a reference to the parent menu');
+}
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/** Injection token used for an implementation of MenuAim. */
+const MENU_AIM = new InjectionToken('cdk-menu-aim');
+/** Capture every nth mouse move event. */
+const MOUSE_MOVE_SAMPLE_FREQUENCY = 3;
+/** The number of mouse move events to track. */
+const NUM_POINTS = 5;
+/**
+ * How long to wait before closing a sibling menu if a user stops short of the submenu they were
+ * predicted to go into.
+ */
+const CLOSE_DELAY = 300;
+/** Calculate the slope between point a and b. */
+function getSlope(a, b) {
+    return (b.y - a.y) / (b.x - a.x);
+}
+/** Calculate the y intercept for the given point and slope. */
+function getYIntercept(point, slope) {
+    return point.y - slope * point.x;
+}
+/**
+ * Whether the given mouse trajectory line defined by the slope and y intercept falls within the
+ * submenu as defined by `submenuPoints`
+ * @param submenuPoints the submenu DOMRect points.
+ * @param m the slope of the trajectory line.
+ * @param b the y intercept of the trajectory line.
+ *
+ * @return true if any point on the line falls within the submenu.
+ */
+function isWithinSubmenu(submenuPoints, m, b) {
+    const { left, right, top, bottom } = submenuPoints;
+    // Check for intersection with each edge of the submenu (left, right, top, bottom)
+    // by fixing one coordinate to that edge's coordinate (either x or y) and checking if the
+    // other coordinate is within bounds.
+    return ((m * left + b >= top && m * left + b <= bottom) ||
+        (m * right + b >= top && m * right + b <= bottom) ||
+        ((top - b) / m >= left && (top - b) / m <= right) ||
+        ((bottom - b) / m >= left && (bottom - b) / m <= right));
+}
+/**
+ * TargetMenuAim predicts if a user is moving into a submenu. It calculates the
+ * trajectory of the user's mouse movement in the current menu to determine if the
+ * mouse is moving towards an open submenu.
+ *
+ * The determination is made by calculating the slope of the users last NUM_POINTS moves where each
+ * pair of points determines if the trajectory line points into the submenu. It uses consensus
+ * approach by checking if at least NUM_POINTS / 2 pairs determine that the user is moving towards
+ * to submenu.
+ */
+class TargetMenuAim {
+    constructor(_ngZone) {
+        this._ngZone = _ngZone;
+        /** The last NUM_POINTS mouse move events. */
+        this._points = [];
+        /** Emits when this service is destroyed. */
+        this._destroyed = new Subject();
+    }
+    /** Set the Menu and its PointerFocusTracker. */
+    initialize(menu, pointerTracker) {
+        this._menu = menu;
+        this._pointerTracker = pointerTracker;
+        this._subscribeToMouseMoves();
+    }
+    /**
+     * Calls the `doToggle` callback when it is deemed that the user is not moving towards
+     * the submenu.
+     * @param doToggle the function called when the user is not moving towards the submenu.
+     */
+    toggle(doToggle) {
+        // If the menu is horizontal the sub-menus open below and there is no risk of premature
+        // closing of any sub-menus therefore we automatically resolve the callback.
+        if (this._menu.orientation === 'horizontal') {
+            doToggle();
+        }
+        this._checkConfigured();
+        const siblingItemIsWaiting = !!this._timeoutId;
+        const hasPoints = this._points.length > 1;
+        if (hasPoints && !siblingItemIsWaiting) {
+            if (this._isMovingToSubmenu()) {
+                this._startTimeout(doToggle);
+            }
+            else {
+                doToggle();
+            }
+        }
+        else if (!siblingItemIsWaiting) {
+            doToggle();
+        }
+    }
+    /**
+     * Start the delayed toggle handler if one isn't running already.
+     *
+     * The delayed toggle handler executes the `doToggle` callback after some period of time iff the
+     * users mouse is on an item in the current menu.
+     */
+    _startTimeout(doToggle) {
+        // If the users mouse is moving towards a submenu we don't want to immediately resolve.
+        // Wait for some period of time before determining if the previous menu should close in
+        // cases where the user may have moved towards the submenu but stopped on a sibling menu
+        // item intentionally.
+        const timeoutId = setTimeout(() => {
+            // Resolve if the user is currently moused over some element in the root menu
+            if (this._pointerTracker.activeElement && timeoutId === this._timeoutId) {
+                doToggle();
+            }
+            this._timeoutId = null;
+        }, CLOSE_DELAY);
+        this._timeoutId = timeoutId;
+    }
+    /** Whether the user is heading towards the open submenu. */
+    _isMovingToSubmenu() {
+        const submenuPoints = this._getSubmenuBounds();
+        if (!submenuPoints) {
+            return false;
+        }
+        let numMoving = 0;
+        const currPoint = this._points[this._points.length - 1];
+        // start from the second last point and calculate the slope between each point and the last
+        // point.
+        for (let i = this._points.length - 2; i >= 0; i--) {
+            const previous = this._points[i];
+            const slope = getSlope(currPoint, previous);
+            if (isWithinSubmenu(submenuPoints, slope, getYIntercept(currPoint, slope))) {
+                numMoving++;
+            }
+        }
+        return numMoving >= Math.floor(NUM_POINTS / 2);
+    }
+    /** Get the bounding DOMRect for the open submenu. */
+    _getSubmenuBounds() {
+        return this._pointerTracker?.previousElement
+            ?.getMenu()
+            ?._elementRef.nativeElement.getBoundingClientRect();
+    }
+    /**
+     * Check if a reference to the PointerFocusTracker and menu element is provided.
+     * @throws an error if neither reference is provided.
+     */
+    _checkConfigured() {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this._pointerTracker) {
+                throwMissingPointerFocusTracker();
+            }
+            if (!this._menu) {
+                throwMissingMenuReference();
+            }
+        }
+    }
+    /** Subscribe to the root menus mouse move events and update the tracked mouse points. */
+    _subscribeToMouseMoves() {
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._menu._elementRef.nativeElement, 'mousemove')
+                .pipe(filter((_, index) => index % MOUSE_MOVE_SAMPLE_FREQUENCY === 0), takeUntil(this._destroyed))
+                .subscribe((event) => {
+                this._points.push({ x: event.clientX, y: event.clientY });
+                if (this._points.length > NUM_POINTS) {
+                    this._points.shift();
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+}
+TargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: TargetMenuAim, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: TargetMenuAim });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: TargetMenuAim, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+/**
+ * CdkTargetMenuAim is a provider for the TargetMenuAim service. It should be added to an
+ * element with either the `cdkMenu` or `cdkMenuBar` directive and child menu items.
+ */
+class CdkTargetMenuAim {
+}
+CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CdkTargetMenuAim.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }], exportAs: ["cdkTargetMenuAim"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkTargetMenuAim]',
+                    exportAs: 'cdkTargetMenuAim',
+                    providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }],
+                }]
+        }] });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Whether the target element is a menu item to be ignored by the overlay background click handler.
+ */
+function isClickInsideMenuOverlay(target) {
+    while (target?.parentElement) {
+        const isOpenTrigger = target.getAttribute('aria-expanded') === 'true' &&
+            target.classList.contains('cdk-menu-trigger');
+        const isOverlayMenu = target.classList.contains('cdk-menu') && !target.classList.contains('cdk-menu-inline');
+        if (isOpenTrigger || isOverlayMenu) {
+            return true;
+        }
+        target = target.parentElement;
+    }
+    return false;
+}
+/**
+ * A directive to be combined with CdkMenuItem which opens the Menu it is bound to. If the
+ * element is in a top level MenuBar it will open the menu on click, or if a sibling is already
+ * opened it will open on hover. If it is inside of a Menu it will open the attached Submenu on
+ * hover regardless of its sibling state.
+ *
+ * The directive must be placed along with the `cdkMenuItem` directive in order to enable full
+ * functionality.
+ */
+class CdkMenuItemTrigger {
+    constructor(_elementRef, _viewContainerRef, _overlay, _ngZone, _parentMenu, _menuAim, _directionality) {
+        this._elementRef = _elementRef;
+        this._viewContainerRef = _viewContainerRef;
+        this._overlay = _overlay;
+        this._ngZone = _ngZone;
+        this._parentMenu = _parentMenu;
+        this._menuAim = _menuAim;
+        this._directionality = _directionality;
+        /** Emits when the attached menu is requested to open */
+        this.opened = new EventEmitter();
+        /** Emits when the attached menu is requested to close */
+        this.closed = new EventEmitter();
+        /** The menu stack for this trigger and its sub-menus. */
+        this._menuStack = new MenuStack();
+        /** A reference to the overlay which manages the triggered menu */
+        this._overlayRef = null;
+        /** Emits when this trigger is destroyed. */
+        this._destroyed = new Subject();
+        /** Emits when the outside pointer events listener on the overlay should be stopped. */
+        this._stopOutsideClicksListener = merge(this.closed, this._destroyed);
+        this._registerCloseHandler();
+        this._subscribeToMouseEnter();
+    }
+    /** Template reference variable to the menu this trigger opens */
+    get menuPanel() {
+        return this._menuPanel;
+    }
+    set menuPanel(panel) {
+        // If the provided panel already has a stack, that means it already has a trigger configured.
+        // Note however that there are some edge cases where two triggers **may** share the same menu,
+        // e.g. two triggers in two separate menus.
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) && panel?._menuStack) {
+            throwExistingMenuStackError();
+        }
+        this._menuPanel = panel;
+        if (this._menuPanel) {
+            this._menuPanel._menuStack = this._getMenuStack();
+        }
+    }
+    /** Open/close the attached menu if the trigger has been configured with one */
+    toggle() {
+        if (this.hasMenu()) {
+            this.isMenuOpen() ? this.closeMenu() : this.openMenu();
+        }
+    }
+    /** Open the attached menu. */
+    openMenu() {
+        if (!this.isMenuOpen()) {
+            this.opened.next();
+            this._overlayRef = this._overlayRef || this._overlay.create(this._getOverlayConfig());
+            this._overlayRef.attach(this._getPortal());
+            this._subscribeToOutsideClicks();
+        }
+    }
+    /** Close the opened menu. */
+    closeMenu() {
+        if (this.isMenuOpen()) {
+            this.closed.next();
+            this._overlayRef.detach();
+        }
+        this._closeSiblingTriggers();
+    }
+    /** Return true if the trigger has an attached menu */
+    hasMenu() {
+        return !!this.menuPanel;
+    }
+    /** Whether the menu this button is a trigger for is open */
+    isMenuOpen() {
+        return this._overlayRef ? this._overlayRef.hasAttached() : false;
+    }
+    /**
+     * Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.
+     * @return the menu if it is open, otherwise undefined.
+     */
+    getMenu() {
+        return this.menuPanel?._menu;
+    }
+    /**
+     * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
+     * into.
+     */
+    _subscribeToMouseEnter() {
+        // Closes any sibling menu items and opens the menu associated with this trigger.
+        const toggleMenus = () => this._ngZone.run(() => {
+            this._closeSiblingTriggers();
+            this.openMenu();
+        });
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._elementRef.nativeElement, 'mouseenter')
+                .pipe(filter(() => !this._getMenuStack()?.isEmpty() && !this.isMenuOpen()), takeUntil(this._destroyed))
+                .subscribe(() => {
+                if (this._menuAim) {
+                    this._menuAim.toggle(toggleMenus);
+                }
+                else {
+                    toggleMenus();
+                }
+            });
+        });
+    }
+    /**
+     * Handles keyboard events for the menu item, specifically opening/closing the attached menu and
+     * focusing the appropriate submenu item.
+     * @param event the keyboard event to handle
+     */
+    _toggleOnKeydown(event) {
+        const keyCode = event.keyCode;
+        switch (keyCode) {
+            case SPACE:
+            case ENTER:
+                event.preventDefault();
+                this.toggle();
+                this.menuPanel?._menu?.focusFirstItem('keyboard');
+                break;
+            case RIGHT_ARROW:
+                if (this._parentMenu && this._isParentVertical()) {
+                    event.preventDefault();
+                    if (this._directionality?.value === 'rtl') {
+                        this._getMenuStack().close(this._parentMenu, 2 /* currentItem */);
+                    }
+                    else {
+                        this.openMenu();
+                        this.menuPanel?._menu?.focusFirstItem('keyboard');
+                    }
+                }
+                break;
+            case LEFT_ARROW:
+                if (this._parentMenu && this._isParentVertical()) {
+                    event.preventDefault();
+                    if (this._directionality?.value === 'rtl') {
+                        this.openMenu();
+                        this.menuPanel?._menu?.focusFirstItem('keyboard');
+                    }
+                    else {
+                        this._getMenuStack().close(this._parentMenu, 2 /* currentItem */);
+                    }
+                }
+                break;
+            case DOWN_ARROW:
+            case UP_ARROW:
+                if (!this._isParentVertical()) {
+                    event.preventDefault();
+                    this.openMenu();
+                    keyCode === DOWN_ARROW
+                        ? this.menuPanel?._menu?.focusFirstItem('keyboard')
+                        : this.menuPanel?._menu?.focusLastItem('keyboard');
+                }
+                break;
+        }
+    }
+    /** Close out any sibling menu trigger menus. */
+    _closeSiblingTriggers() {
+        if (this._parentMenu) {
+            const menuStack = this._getMenuStack();
+            // If nothing was removed from the stack and the last element is not the parent item
+            // that means that the parent menu is a menu bar since we don't put the menu bar on the
+            // stack
+            const isParentMenuBar = !menuStack.closeSubMenuOf(this._parentMenu) && menuStack.peek() !== this._parentMenu;
+            if (isParentMenuBar) {
+                menuStack.closeAll();
+            }
+        }
+        else {
+            this._getMenuStack().closeAll();
+        }
+    }
+    /** Get the configuration object used to create the overlay */
+    _getOverlayConfig() {
+        return new OverlayConfig({
+            positionStrategy: this._getOverlayPositionStrategy(),
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            direction: this._directionality,
+        });
+    }
+    /** Build the position strategy for the overlay which specifies where to place the menu */
+    _getOverlayPositionStrategy() {
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(this._elementRef)
+            .withPositions(this._getOverlayPositions());
+    }
+    /** Determine and return where to position the opened menu relative to the menu item */
+    _getOverlayPositions() {
+        // TODO: use a common positioning config from (possibly) cdk/overlay
+        return !this._parentMenu || this._parentMenu.orientation === 'horizontal'
+            ? [
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+            ]
+            : [
+                { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+                { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
+                { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+                { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
+            ];
+    }
+    /**
+     * Get the portal to be attached to the overlay which contains the menu. Allows for the menu
+     * content to change dynamically and be reflected in the application.
+     */
+    _getPortal() {
+        const hasMenuContentChanged = this.menuPanel?._templateRef !== this._panelContent?.templateRef;
+        if (this.menuPanel && (!this._panelContent || hasMenuContentChanged)) {
+            this._panelContent = new TemplatePortal(this.menuPanel._templateRef, this._viewContainerRef);
+        }
+        return this._panelContent;
+    }
+    /**
+     * @return true if if the enclosing parent menu is configured in a vertical orientation.
+     */
+    _isParentVertical() {
+        return this._parentMenu?.orientation === 'vertical';
+    }
+    /**
+     * Subscribe to the MenuStack close events if this is a standalone trigger and close out the menu
+     * this triggers when requested.
+     */
+    _registerCloseHandler() {
+        if (!this._parentMenu) {
+            this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
+                if (item === this._menuPanel?._menu) {
+                    this.closeMenu();
+                }
+            });
+        }
+    }
+    /** Get the menu stack for this trigger - either from the parent or this trigger. */
+    _getMenuStack() {
+        // We use a function since at the construction of the MenuItemTrigger the parent Menu won't have
+        // its menu stack set. Therefore we need to reference the menu stack from the parent each time
+        // we want to use it.
+        return this._parentMenu?._menuStack || this._menuStack;
+    }
+    ngOnDestroy() {
+        this._destroyOverlay();
+        this._resetPanelMenuStack();
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /** Set the menu panels menu stack back to null. */
+    _resetPanelMenuStack() {
+        // If a CdkMenuTrigger is placed in a submenu, each time the trigger is rendered (its parent
+        // menu is opened) the panel setter for CdkMenuPanel is called. From the first render onward,
+        // the attached CdkMenuPanel has the MenuStack set. Since we throw an error if a panel already
+        // has a stack set, we want to reset the attached stack here to prevent the error from being
+        // thrown if the trigger re-configures its attached panel (in the case where there is a 1:1
+        // relationship between the panel and trigger).
+        if (this._menuPanel) {
+            this._menuPanel._menuStack = null;
+        }
+    }
+    /**
+     * Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
+     * click occurs outside the menus.
+     */
+    _subscribeToOutsideClicks() {
+        if (this._overlayRef) {
+            this._overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntil(this._stopOutsideClicksListener))
+                .subscribe(event => {
+                if (!isClickInsideMenuOverlay(event.target)) {
+                    this._getMenuStack().closeAll();
+                }
+            });
+        }
+    }
+    /** Destroy and unset the overlay reference it if exists */
+    _destroyOverlay() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+}
+CdkMenuItemTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItemTrigger, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: i0.NgZone }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenuItemTrigger, selector: "[cdkMenuTriggerFor]", inputs: { menuPanel: ["cdkMenuTriggerFor", "menuPanel"] }, outputs: { opened: "cdkMenuOpened", closed: "cdkMenuClosed" }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "keydown": "_toggleOnKeydown($event)", "click": "toggle()" }, properties: { "attr.aria-expanded": "isMenuOpen()" }, classAttribute: "cdk-menu-trigger" }, exportAs: ["cdkMenuTriggerFor"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuTriggerFor]',
+                    exportAs: 'cdkMenuTriggerFor',
+                    host: {
+                        '(keydown)': '_toggleOnKeydown($event)',
+                        '(click)': 'toggle()',
+                        'class': 'cdk-menu-trigger',
+                        'aria-haspopup': 'menu',
+                        '[attr.aria-expanded]': 'isMenuOpen()',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CDK_MENU]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MENU_AIM]
+                }] }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { menuPanel: [{
+                type: Input,
+                args: ['cdkMenuTriggerFor']
+            }], opened: [{
+                type: Output,
+                args: ['cdkMenuOpened']
+            }], closed: [{
+                type: Output,
+                args: ['cdkMenuClosed']
+            }] } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+// TODO refactor this to be configurable allowing for custom elements to be removed
+/** Removes all icons from within the given element. */
+function removeIcons(element) {
+    for (const icon of Array.from(element.querySelectorAll('mat-icon, .material-icons'))) {
+        icon.remove();
+    }
+}
+/**
+ * Directive which provides the ability for an element to be focused and navigated to using the
+ * keyboard when residing in a CdkMenu, CdkMenuBar, or CdkMenuGroup. It performs user defined
+ * behavior when clicked.
+ */
+class CdkMenuItem {
+    constructor(_elementRef, _ngZone, _parentMenu, _menuAim, _dir, 
+    /** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
+    // `CdkMenuItem` is commonly used in combination with a `CdkMenuItemTrigger`.
+    // tslint:disable-next-line: lightweight-tokens
+    _menuTrigger) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this._parentMenu = _parentMenu;
+        this._menuAim = _menuAim;
+        this._dir = _dir;
+        this._menuTrigger = _menuTrigger;
+        this._disabled = false;
+        /**
+         * If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse
+         * event.
+         */
+        this.triggered = new EventEmitter();
+        /**
+         * The tabindex for this menu item managed internally and used for implementing roving a
+         * tab index.
+         */
+        this._tabindex = -1;
+        /** Emits when the menu item is destroyed. */
+        this._destroyed = new Subject();
+        this._setupMouseEnter();
+        if (this._isStandaloneItem()) {
+            this._tabindex = 0;
+        }
+    }
+    /**  Whether the CdkMenuItem is disabled - defaults to false */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    /** Place focus on the element. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+    // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+    // can move this back into `host`.
+    // tslint:disable:no-host-decorator-in-concrete
+    /** Reset the _tabindex to -1. */
+    _resetTabIndex() {
+        if (!this._isStandaloneItem()) {
+            this._tabindex = -1;
+        }
+    }
+    // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+    // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+    // can move this back into `host`.
+    // tslint:disable:no-host-decorator-in-concrete
+    /**
+     * Set the tab index to 0 if not disabled and it's a focus event, or a mouse enter if this element
+     * is not in a menu bar.
+     */
+    _setTabIndex(event) {
+        if (this.disabled) {
+            return;
+        }
+        // don't set the tabindex if there are no open sibling or parent menus
+        if (!event || !this._getMenuStack()?.isEmpty()) {
+            this._tabindex = 0;
+        }
+    }
+    /** Whether this menu item is standalone or within a menu or menu bar. */
+    _isStandaloneItem() {
+        return !this._parentMenu;
+    }
+    // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+    // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+    // can move this back into `host`.
+    // tslint:disable:no-host-decorator-in-concrete
+    /**
+     * If the menu item is not disabled and the element does not have a menu trigger attached, emit
+     * on the cdkMenuItemTriggered emitter and close all open menus.
+     */
+    trigger() {
+        if (!this.disabled && !this.hasMenu()) {
+            this.triggered.next();
+            this._getMenuStack()?.closeAll();
+        }
+    }
+    /** Whether the menu item opens a menu. */
+    hasMenu() {
+        return !!this._menuTrigger?.hasMenu();
+    }
+    /** Return true if this MenuItem has an attached menu and it is open. */
+    isMenuOpen() {
+        return !!this._menuTrigger?.isMenuOpen();
+    }
+    /**
+     * Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.
+     * @return the menu if it is open, otherwise undefined.
+     */
+    getMenu() {
+        return this._menuTrigger?.getMenu();
+    }
+    /** Get the MenuItemTrigger associated with this element. */
+    getMenuTrigger() {
+        return this._menuTrigger;
+    }
+    /** Get the label for this element which is required by the FocusableOption interface. */
+    getLabel() {
+        // TODO cloning the tree may be expensive; implement a better method
+        // we know that the current node is an element type
+        const clone = this._elementRef.nativeElement.cloneNode(true);
+        removeIcons(clone);
+        return clone.textContent?.trim() || '';
+    }
+    // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+    // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+    // can move this back into `host`.
+    // tslint:disable:no-host-decorator-in-concrete
+    /**
+     * Handles keyboard events for the menu item, specifically either triggering the user defined
+     * callback or opening/closing the current menu based on whether the left or right arrow key was
+     * pressed.
+     * @param event the keyboard event to handle
+     */
+    _onKeydown(event) {
+        switch (event.keyCode) {
+            case SPACE:
+            case ENTER:
+                event.preventDefault();
+                this.trigger();
+                break;
+            case RIGHT_ARROW:
+                if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
+                    event.preventDefault();
+                    this._dir?.value === 'rtl'
+                        ? this._getMenuStack()?.close(this._parentMenu, 1 /* previousItem */)
+                        : this._getMenuStack()?.closeAll(0 /* nextItem */);
+                }
+                break;
+            case LEFT_ARROW:
+                if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
+                    event.preventDefault();
+                    this._dir?.value === 'rtl'
+                        ? this._getMenuStack()?.closeAll(0 /* nextItem */)
+                        : this._getMenuStack()?.close(this._parentMenu, 1 /* previousItem */);
+                }
+                break;
+        }
+    }
+    /**
+     * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
+     * into.
+     */
+    _setupMouseEnter() {
+        if (!this._isStandaloneItem()) {
+            const closeOpenSiblings = () => this._ngZone.run(() => this._getMenuStack()?.closeSubMenuOf(this._parentMenu));
+            this._ngZone.runOutsideAngular(() => fromEvent(this._elementRef.nativeElement, 'mouseenter')
+                .pipe(filter(() => !this._getMenuStack()?.isEmpty() && !this.hasMenu()), takeUntil(this._destroyed))
+                .subscribe(() => {
+                if (this._menuAim) {
+                    this._menuAim.toggle(closeOpenSiblings);
+                }
+                else {
+                    closeOpenSiblings();
+                }
+            }));
+        }
+    }
+    /**
+     * Return true if the enclosing parent menu is configured in a horizontal orientation, false
+     * otherwise or if no parent.
+     */
+    _isParentVertical() {
+        return this._parentMenu?.orientation === 'vertical';
+    }
+    /** Get the MenuStack from the parent menu. */
+    _getMenuStack() {
+        // We use a function since at the construction of the MenuItemTrigger the parent Menu won't have
+        // its menu stack set. Therefore we need to reference the menu stack from the parent each time
+        // we want to use it.
+        return this._parentMenu?._menuStack;
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+    }
+}
+CdkMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItem, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i2.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: { disabled: "disabled" }, outputs: { triggered: "cdkMenuItemTriggered" }, host: { attributes: { "type": "button", "role": "menuitem" }, listeners: { "blur": "_resetTabIndex()", "mouseout": "_resetTabIndex()", "focus": "_setTabIndex()", "mouseenter": "_setTabIndex($event)", "click": "trigger()", "keydown": "_onKeydown($event)" }, properties: { "tabindex": "_tabindex", "attr.aria-disabled": "disabled || null" }, classAttribute: "cdk-menu-item" }, exportAs: ["cdkMenuItem"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuItem]',
+                    exportAs: 'cdkMenuItem',
+                    host: {
+                        '[tabindex]': '_tabindex',
+                        'type': 'button',
+                        'role': 'menuitem',
+                        'class': 'cdk-menu-item',
+                        '[attr.aria-disabled]': 'disabled || null',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CDK_MENU]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MENU_AIM]
+                }] }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: CdkMenuItemTrigger, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], triggered: [{
+                type: Output,
+                args: ['cdkMenuItemTriggered']
+            }], 
+        /** Reset the _tabindex to -1. */
+        _resetTabIndex: [{
+                type: HostListener,
+                args: ['blur']
+            }, {
+                type: HostListener,
+                args: ['mouseout']
+            }], 
+        /**
+         * Set the tab index to 0 if not disabled and it's a focus event, or a mouse enter if this element
+         * is not in a menu bar.
+         */
+        _setTabIndex: [{
+                type: HostListener,
+                args: ['focus']
+            }, {
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], 
+        /**
+         * If the menu item is not disabled and the element does not have a menu trigger attached, emit
+         * on the cdkMenuItemTriggered emitter and close all open menus.
+         */
+        trigger: [{
+                type: HostListener,
+                args: ['click']
+            }], 
+        /**
+         * Handles keyboard events for the menu item, specifically either triggering the user defined
+         * callback or opening/closing the current menu based on whether the left or right arrow key was
+         * pressed.
+         * @param event the keyboard event to handle
+         */
+        _onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/** Counter used to set a unique id and name for a selectable item */
+let nextId = 0;
+/**
+ * Base class providing checked state for MenuItems along with outputting a clicked event when the
+ * element is triggered. It provides functionality for selectable elements.
+ */
+class CdkMenuItemSelectable extends CdkMenuItem {
+    constructor() {
+        super(...arguments);
+        /** Event emitted when the selectable item is clicked */
+        this.toggled = new EventEmitter();
+        this._checked = false;
+        /** The name of the selectable element with a default value */
+        this.name = `cdk-selectable-item-${nextId++}`;
+        /** The id of the selectable element with a default value */
+        this.id = `cdk-selectable-item-${nextId++}`;
+    }
+    /** Whether the element is checked */
+    get checked() {
+        return this._checked;
+    }
+    set checked(value) {
+        this._checked = coerceBooleanProperty(value);
+    }
+    /** If the element is not disabled emit the click event */
+    trigger() {
+        if (!this.disabled) {
+            this.toggled.next(this);
+        }
+    }
+}
+CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemSelectable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenuItemSelectable, inputs: { checked: "checked", name: "name", id: "id" }, outputs: { toggled: "cdkMenuItemToggled" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
+            type: Directive
+        }], propDecorators: { toggled: [{
+                type: Output,
+                args: ['cdkMenuItemToggled']
+            }], checked: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Directive which acts as a grouping container for `CdkMenuItem` instances with
+ * `role="menuitemradio"`, similar to a `role="radiogroup"` element.
+ */
+class CdkMenuGroup {
+    constructor() {
+        /** Emits the element when checkbox or radiobutton state changed  */
+        this.change = new EventEmitter();
+        /** Emits when the _selectableItems QueryList triggers a change */
+        this._selectableChanges = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        this._registerMenuSelectionListeners();
+    }
+    /**
+     * Register the child selectable elements with the change emitter and ensure any new child
+     * elements do so as well.
+     */
+    _registerMenuSelectionListeners() {
+        this._selectableItems.forEach(selectable => this._registerClickListener(selectable));
+        this._selectableItems.changes.subscribe((selectableItems) => {
+            this._selectableChanges.next();
+            selectableItems.forEach(selectable => this._registerClickListener(selectable));
+        });
+    }
+    /** Register each selectable to emit on the change Emitter when clicked */
+    _registerClickListener(selectable) {
+        selectable.toggled
+            .pipe(takeUntil(this._selectableChanges))
+            .subscribe(() => this.change.next(selectable));
+    }
+    ngOnDestroy() {
+        this._selectableChanges.next();
+        this._selectableChanges.complete();
+    }
+}
+CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenuGroup, selector: "[cdkMenuGroup]", outputs: { change: "change" }, host: { attributes: { "role": "group" }, classAttribute: "cdk-menu-group" }, providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }], queries: [{ propertyName: "_selectableItems", predicate: CdkMenuItemSelectable, descendants: true }], exportAs: ["cdkMenuGroup"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuGroup]',
+                    exportAs: 'cdkMenuGroup',
+                    host: {
+                        'role': 'group',
+                        'class': 'cdk-menu-group',
+                    },
+                    providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }],
+                }]
+        }], propDecorators: { change: [{
+                type: Output
+            }], _selectableItems: [{
+                type: ContentChildren,
+                args: [CdkMenuItemSelectable, { descendants: true }]
+            }] } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Directive applied to an ng-template which wraps a CdkMenu and provides a reference to the
+ * child element it wraps which allows for opening of the CdkMenu in an overlay.
+ */
+class CdkMenuPanel {
+    constructor(_templateRef) {
+        this._templateRef = _templateRef;
+    }
+    /**
+     * Set the Menu component on the menu panel. Since we cannot use ContentChild to fetch the
+     * child Menu component, the child Menu must register its self with the parent MenuPanel.
+     */
+    _registerMenu(child) {
+        this._menu = child;
+        // The ideal solution would be to affect the CdkMenuPanel injector from the CdkMenuTrigger and
+        // inject the menu stack reference into the child menu and menu items, however this isn't
+        // possible at this time.
+        this._menu._menuStack = this._menuStack;
+        this._menuStack?.push(child);
+    }
+}
+CdkMenuPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuPanel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuPanel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenuPanel, selector: "ng-template[cdkMenuPanel]", exportAs: ["cdkMenuPanel"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuPanel, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cdkMenuPanel]', exportAs: 'cdkMenuPanel' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * PointerFocusTracker keeps track of the currently active item under mouse focus. It also has
+ * observables which emit when the users mouse enters and leaves a tracked element.
+ */
+class PointerFocusTracker {
+    constructor(_items) {
+        this._items = _items;
+        /** Emits when an element is moused into. */
+        this.entered = this._getItemPointerEntries();
+        /** Emits when an element is moused out. */
+        this.exited = this._getItemPointerExits();
+        /** Emits when this is destroyed. */
+        this._destroyed = new Subject();
+        this.entered.subscribe(element => (this.activeElement = element));
+        this.exited.subscribe(() => {
+            this.previousElement = this.activeElement;
+            this.activeElement = undefined;
+        });
+    }
+    /**
+     * Gets a stream of pointer (mouse) entries into the given items.
+     * This should typically run outside the Angular zone.
+     */
+    _getItemPointerEntries() {
+        return defer(() => this._items.changes.pipe(startWith(this._items), mergeMap((list) => list.map(element => fromEvent(element._elementRef.nativeElement, 'mouseenter').pipe(mapTo(element), takeUntil(this._items.changes)))), mergeAll()));
+    }
+    /**
+     * Gets a stream of pointer (mouse) exits out of the given items.
+     * This should typically run outside the Angular zone.
+     */
+    _getItemPointerExits() {
+        return defer(() => this._items.changes.pipe(startWith(this._items), mergeMap((list) => list.map(element => fromEvent(element._elementRef.nativeElement, 'mouseout').pipe(mapTo(element), takeUntil(this._items.changes)))), mergeAll()));
+    }
+    /** Stop the managers listeners. */
+    destroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+}
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Directive which configures the element as a Menu which should contain child elements marked as
+ * CdkMenuItem or CdkMenuGroup. Sets the appropriate role and aria-attributes for a menu and
+ * contains accessible keyboard and mouse handling logic.
+ *
+ * It also acts as a RadioGroup for elements marked with role `menuitemradio`.
+ */
+class CdkMenu extends CdkMenuGroup {
+    constructor(_ngZone, _elementRef, _menuAim, _dir, 
+    // `CdkMenuPanel` is always used in combination with a `CdkMenu`.
+    // tslint:disable-next-line: lightweight-tokens
+    _menuPanel) {
+        super();
+        this._ngZone = _ngZone;
+        this._elementRef = _elementRef;
+        this._menuAim = _menuAim;
+        this._dir = _dir;
+        this._menuPanel = _menuPanel;
+        /**
+         * Sets the aria-orientation attribute and determines where menus will be opened.
+         * Does not affect styling/layout.
+         */
+        this.orientation = 'vertical';
+        /** Event emitted when the menu is closed. */
+        this.closed = new EventEmitter();
+        // We provide a default MenuStack implementation in case the menu is an inline menu.
+        // For Menus part of a MenuBar nested within a MenuPanel this will be overwritten
+        // to the correct parent MenuStack.
+        /** Track the Menus making up the open menu stack. */
+        this._menuStack = new NoopMenuStack();
+    }
+    ngOnInit() {
+        this._registerWithParentPanel();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this._completeChangeEmitter();
+        this._setKeyManager();
+        this._subscribeToMenuOpen();
+        this._subscribeToMenuStack();
+        this._subscribeToMouseManager();
+        this._menuAim?.initialize(this, this._pointerTracker);
+    }
+    // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+    // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+    // can move this back into `host`.
+    // tslint:disable:no-host-decorator-in-concrete
+    /** Place focus on the first MenuItem in the menu and set the focus origin. */
+    focusFirstItem(focusOrigin = 'program') {
+        this._keyManager.setFocusOrigin(focusOrigin);
+        this._keyManager.setFirstItemActive();
+    }
+    /** Place focus on the last MenuItem in the menu and set the focus origin. */
+    focusLastItem(focusOrigin = 'program') {
+        this._keyManager.setFocusOrigin(focusOrigin);
+        this._keyManager.setLastItemActive();
+    }
+    // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+    // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+    // can move this back into `host`.
+    // tslint:disable:no-host-decorator-in-concrete
+    /** Handle keyboard events for the Menu. */
+    _handleKeyEvent(event) {
+        const keyManager = this._keyManager;
+        switch (event.keyCode) {
+            case LEFT_ARROW:
+            case RIGHT_ARROW:
+                if (this._isHorizontal()) {
+                    event.preventDefault();
+                    keyManager.setFocusOrigin('keyboard');
+                    keyManager.onKeydown(event);
+                }
+                break;
+            case UP_ARROW:
+            case DOWN_ARROW:
+                if (!this._isHorizontal()) {
+                    event.preventDefault();
+                    keyManager.setFocusOrigin('keyboard');
+                    keyManager.onKeydown(event);
+                }
+                break;
+            case ESCAPE:
+                if (!hasModifierKey(event)) {
+                    event.preventDefault();
+                    this._menuStack.close(this, 2 /* currentItem */);
+                }
+                break;
+            case TAB:
+                this._menuStack.closeAll();
+                break;
+            default:
+                keyManager.onKeydown(event);
+        }
+    }
+    /** Register this menu with its enclosing parent menu panel */
+    _registerWithParentPanel() {
+        this._getMenuPanel()?._registerMenu(this);
+    }
+    /**
+     * Get the enclosing CdkMenuPanel defaulting to the injected reference over the developer
+     * provided reference.
+     */
+    _getMenuPanel() {
+        return this._menuPanel || this._explicitPanel;
+    }
+    /**
+     * Complete the change emitter if there are any nested MenuGroups or register to complete the
+     * change emitter if a MenuGroup is rendered at some point
+     */
+    _completeChangeEmitter() {
+        if (this._hasNestedGroups()) {
+            this.change.complete();
+        }
+        else {
+            this._nestedGroups.changes.pipe(take(1)).subscribe(() => this.change.complete());
+        }
+    }
+    /** Return true if there are nested CdkMenuGroup elements within the Menu */
+    _hasNestedGroups() {
+        // view engine has a bug where @ContentChildren will return the current element
+        // along with children if the selectors match - not just the children.
+        // Here, if there is at least one element, we check to see if the first element is a CdkMenu in
+        // order to ensure that we return true iff there are child CdkMenuGroup elements.
+        return this._nestedGroups.length > 0 && !(this._nestedGroups.first instanceof CdkMenu);
+    }
+    /** Setup the FocusKeyManager with the correct orientation for the menu. */
+    _setKeyManager() {
+        this._keyManager = new FocusKeyManager(this._allItems)
+            .withWrap()
+            .withTypeAhead()
+            .withHomeAndEnd();
+        if (this._isHorizontal()) {
+            this._keyManager.withHorizontalOrientation(this._dir?.value || 'ltr');
+        }
+        else {
+            this._keyManager.withVerticalOrientation();
+        }
+    }
+    /**
+     * Set the PointerFocusTracker and ensure that when mouse focus changes the key manager is updated
+     * with the latest menu item under mouse focus.
+     */
+    _subscribeToMouseManager() {
+        this._ngZone.runOutsideAngular(() => {
+            this._pointerTracker = new PointerFocusTracker(this._allItems);
+            this._pointerTracker.entered
+                .pipe(takeUntil(this.closed))
+                .subscribe(item => this._keyManager.setActiveItem(item));
+        });
+    }
+    /** Subscribe to the MenuStack close and empty observables. */
+    _subscribeToMenuStack() {
+        this._menuStack.closed
+            .pipe(takeUntil(this.closed))
+            .subscribe(item => this._closeOpenMenu(item));
+        this._menuStack.emptied
+            .pipe(takeUntil(this.closed))
+            .subscribe(event => this._toggleMenuFocus(event));
+    }
+    /**
+     * Close the open menu if the current active item opened the requested MenuStackItem.
+     * @param item the MenuStackItem requested to be closed.
+     */
+    _closeOpenMenu(menu) {
+        const keyManager = this._keyManager;
+        const trigger = this._openItem;
+        if (menu === trigger?.getMenuTrigger()?.getMenu()) {
+            trigger?.getMenuTrigger()?.closeMenu();
+            // If the user has moused over a sibling item we want to focus the element under mouse focus
+            // not the trigger which previously opened the now closed menu.
+            if (trigger) {
+                keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger);
+            }
+        }
+    }
+    /** Set focus the either the current, previous or next item based on the FocusNext event. */
+    _toggleMenuFocus(event) {
+        const keyManager = this._keyManager;
+        switch (event) {
+            case 0 /* nextItem */:
+                keyManager.setFocusOrigin('keyboard');
+                keyManager.setNextItemActive();
+                break;
+            case 1 /* previousItem */:
+                keyManager.setFocusOrigin('keyboard');
+                keyManager.setPreviousItemActive();
+                break;
+            case 2 /* currentItem */:
+                if (keyManager.activeItem) {
+                    keyManager.setFocusOrigin('keyboard');
+                    keyManager.setActiveItem(keyManager.activeItem);
+                }
+                break;
+        }
+    }
+    // TODO(andy9775): remove duplicate logic between menu an menu bar
+    /**
+     * Subscribe to the menu trigger's open events in order to track the trigger which opened the menu
+     * and stop tracking it when the menu is closed.
+     */
+    _subscribeToMenuOpen() {
+        const exitCondition = merge(this._allItems.changes, this.closed);
+        this._allItems.changes
+            .pipe(startWith(this._allItems), mergeMap((list) => list
+            .filter(item => item.hasMenu())
+            .map(item => item.getMenuTrigger().opened.pipe(mapTo(item), takeUntil(exitCondition)))), mergeAll(), switchMap((item) => {
+            this._openItem = item;
+            return item.getMenuTrigger().closed;
+        }), takeUntil(this.closed))
+            .subscribe(() => (this._openItem = undefined));
+    }
+    /** Return true if this menu has been configured in a horizontal orientation. */
+    _isHorizontal() {
+        return this.orientation === 'horizontal';
+    }
+    /**
+     * Return true if this menu is an inline menu. That is, it does not exist in a pop-up and is
+     * always visible in the dom.
+     */
+    _isInline() {
+        // NoopMenuStack is the default. If this menu is not inline than the NoopMenuStack is replaced
+        // automatically.
+        return this._menuStack instanceof NoopMenuStack;
+    }
+    ngOnDestroy() {
+        this._emitClosedEvent();
+        this._pointerTracker?.destroy();
+    }
+    /** Emit and complete the closed event emitter */
+    _emitClosedEvent() {
+        this.closed.next();
+        this.closed.complete();
+    }
+}
+CdkMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenu, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_AIM, optional: true, self: true }, { token: i2.Directionality, optional: true }, { token: CdkMenuPanel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenu, selector: "[cdkMenu]", inputs: { orientation: ["cdkMenuOrientation", "orientation"], _explicitPanel: ["cdkMenuPanel", "_explicitPanel"] }, outputs: { closed: "closed" }, host: { attributes: { "role": "menu" }, listeners: { "focus": "focusFirstItem()", "keydown": "_handleKeyEvent($event)" }, properties: { "tabindex": "_isInline() ? 0 : null", "class.cdk-menu-inline": "_isInline()", "attr.aria-orientation": "orientation" }, classAttribute: "cdk-menu" }, providers: [
+        { provide: CdkMenuGroup, useExisting: CdkMenu },
+        { provide: CDK_MENU, useExisting: CdkMenu },
+    ], queries: [{ propertyName: "_nestedGroups", predicate: CdkMenuGroup, descendants: true }, { propertyName: "_allItems", predicate: CdkMenuItem, descendants: true }], exportAs: ["cdkMenu"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenu]',
+                    exportAs: 'cdkMenu',
+                    host: {
+                        '[tabindex]': '_isInline() ? 0 : null',
+                        'role': 'menu',
+                        'class': 'cdk-menu',
+                        '[class.cdk-menu-inline]': '_isInline()',
+                        '[attr.aria-orientation]': 'orientation',
+                    },
+                    providers: [
+                        { provide: CdkMenuGroup, useExisting: CdkMenu },
+                        { provide: CDK_MENU, useExisting: CdkMenu },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MENU_AIM]
+                }] }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: CdkMenuPanel, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { orientation: [{
+                type: Input,
+                args: ['cdkMenuOrientation']
+            }], closed: [{
+                type: Output
+            }], _nestedGroups: [{
+                type: ContentChildren,
+                args: [CdkMenuGroup, { descendants: true }]
+            }], _allItems: [{
+                type: ContentChildren,
+                args: [CdkMenuItem, { descendants: true }]
+            }], _explicitPanel: [{
+                type: Input,
+                args: ['cdkMenuPanel']
+            }], 
+        /** Place focus on the first MenuItem in the menu and set the focus origin. */
+        focusFirstItem: [{
+                type: HostListener,
+                args: ['focus']
+            }], 
+        /** Handle keyboard events for the Menu. */
+        _handleKeyEvent: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Directive applied to an element which configures it as a MenuBar by setting the appropriate
+ * role, aria attributes, and accessible keyboard and mouse handling logic. The component that
+ * this directive is applied to should contain components marked with CdkMenuItem.
+ *
+ */
+class CdkMenuBar extends CdkMenuGroup {
+    constructor(_menuStack, _ngZone, _elementRef, _menuAim, _dir) {
+        super();
+        this._menuStack = _menuStack;
+        this._ngZone = _ngZone;
+        this._elementRef = _elementRef;
+        this._menuAim = _menuAim;
+        this._dir = _dir;
+        /**
+         * Sets the aria-orientation attribute and determines where menus will be opened.
+         * Does not affect styling/layout.
+         */
+        this.orientation = 'horizontal';
+        /** Emits when the MenuBar is destroyed. */
+        this._destroyed = new Subject();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this._setKeyManager();
+        this._subscribeToMenuOpen();
+        this._subscribeToMenuStack();
+        this._subscribeToMouseManager();
+        this._menuAim?.initialize(this, this._pointerTracker);
+    }
+    // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+    // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+    // can move this back into `host`.
+    // tslint:disable:no-host-decorator-in-concrete
+    /** Place focus on the first MenuItem in the menu and set the focus origin. */
+    focusFirstItem(focusOrigin = 'program') {
+        this._keyManager.setFocusOrigin(focusOrigin);
+        this._keyManager.setFirstItemActive();
+    }
+    /** Place focus on the last MenuItem in the menu and set the focus origin. */
+    focusLastItem(focusOrigin = 'program') {
+        this._keyManager.setFocusOrigin(focusOrigin);
+        this._keyManager.setLastItemActive();
+    }
+    // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+    // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+    // can move this back into `host`.
+    // tslint:disable:no-host-decorator-in-concrete
+    /**
+     * Handle keyboard events, specifically changing the focused element and/or toggling the active
+     * items menu.
+     * @param event the KeyboardEvent to handle.
+     */
+    _handleKeyEvent(event) {
+        const keyManager = this._keyManager;
+        switch (event.keyCode) {
+            case UP_ARROW:
+            case DOWN_ARROW:
+            case LEFT_ARROW:
+            case RIGHT_ARROW:
+                const horizontalArrows = event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW;
+                // For a horizontal menu if the left/right keys were clicked, or a vertical menu if the
+                // up/down keys were clicked: if the current menu is open, close it then focus and open the
+                // next  menu.
+                if ((this._isHorizontal() && horizontalArrows) ||
+                    (!this._isHorizontal() && !horizontalArrows)) {
+                    event.preventDefault();
+                    const prevIsOpen = keyManager.activeItem?.isMenuOpen();
+                    keyManager.activeItem?.getMenuTrigger()?.closeMenu();
+                    keyManager.setFocusOrigin('keyboard');
+                    keyManager.onKeydown(event);
+                    if (prevIsOpen) {
+                        keyManager.activeItem?.getMenuTrigger()?.openMenu();
+                    }
+                }
+                break;
+            case ESCAPE:
+                event.preventDefault();
+                keyManager.activeItem?.getMenuTrigger()?.closeMenu();
+                break;
+            case TAB:
+                keyManager.activeItem?.getMenuTrigger()?.closeMenu();
+                break;
+            default:
+                keyManager.onKeydown(event);
+        }
+    }
+    /** Setup the FocusKeyManager with the correct orientation for the menu bar. */
+    _setKeyManager() {
+        this._keyManager = new FocusKeyManager(this._allItems)
+            .withWrap()
+            .withTypeAhead()
+            .withHomeAndEnd();
+        if (this._isHorizontal()) {
+            this._keyManager.withHorizontalOrientation(this._dir?.value || 'ltr');
+        }
+        else {
+            this._keyManager.withVerticalOrientation();
+        }
+    }
+    /**
+     * Set the PointerFocusTracker and ensure that when mouse focus changes the key manager is updated
+     * with the latest menu item under mouse focus.
+     */
+    _subscribeToMouseManager() {
+        this._ngZone.runOutsideAngular(() => {
+            this._pointerTracker = new PointerFocusTracker(this._allItems);
+            this._pointerTracker.entered.pipe(takeUntil(this._destroyed)).subscribe(item => {
+                if (this._hasOpenSubmenu()) {
+                    this._keyManager.setActiveItem(item);
+                }
+            });
+        });
+    }
+    /** Subscribe to the MenuStack close and empty observables. */
+    _subscribeToMenuStack() {
+        this._menuStack.closed
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(item => this._closeOpenMenu(item));
+        this._menuStack.emptied
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(event => this._toggleOpenMenu(event));
+    }
+    /**
+     * Close the open menu if the current active item opened the requested MenuStackItem.
+     * @param item the MenuStackItem requested to be closed.
+     */
+    _closeOpenMenu(menu) {
+        const trigger = this._openItem;
+        const keyManager = this._keyManager;
+        if (menu === trigger?.getMenuTrigger()?.getMenu()) {
+            trigger?.getMenuTrigger()?.closeMenu();
+            // If the user has moused over a sibling item we want to focus the element under mouse focus
+            // not the trigger which previously opened the now closed menu.
+            if (trigger) {
+                keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger);
+            }
+        }
+    }
+    /**
+     * Set focus to either the current, previous or next item based on the FocusNext event, then
+     * open the previous or next item.
+     */
+    _toggleOpenMenu(event) {
+        const keyManager = this._keyManager;
+        switch (event) {
+            case 0 /* nextItem */:
+                keyManager.setFocusOrigin('keyboard');
+                keyManager.setNextItemActive();
+                keyManager.activeItem?.getMenuTrigger()?.openMenu();
+                break;
+            case 1 /* previousItem */:
+                keyManager.setFocusOrigin('keyboard');
+                keyManager.setPreviousItemActive();
+                keyManager.activeItem?.getMenuTrigger()?.openMenu();
+                break;
+            case 2 /* currentItem */:
+                if (keyManager.activeItem) {
+                    keyManager.setFocusOrigin('keyboard');
+                    keyManager.setActiveItem(keyManager.activeItem);
+                }
+                break;
+        }
+    }
+    /**
+     * @return true if the menu bar is configured to be horizontal.
+     */
+    _isHorizontal() {
+        return this.orientation === 'horizontal';
+    }
+    /**
+     * Subscribe to the menu trigger's open events in order to track the trigger which opened the menu
+     * and stop tracking it when the menu is closed.
+     */
+    _subscribeToMenuOpen() {
+        const exitCondition = merge(this._allItems.changes, this._destroyed);
+        this._allItems.changes
+            .pipe(startWith(this._allItems), mergeMap((list) => list
+            .filter(item => item.hasMenu())
+            .map(item => item.getMenuTrigger().opened.pipe(mapTo(item), takeUntil(exitCondition)))), mergeAll(), switchMap((item) => {
+            this._openItem = item;
+            return item.getMenuTrigger().closed;
+        }), takeUntil(this._destroyed))
+            .subscribe(() => (this._openItem = undefined));
+    }
+    /** Return true if the MenuBar has an open submenu. */
+    _hasOpenSubmenu() {
+        return !!this._openItem;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._destroyed.next();
+        this._destroyed.complete();
+        this._pointerTracker?.destroy();
+    }
+}
+CdkMenuBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuBar, deps: [{ token: MenuStack }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_AIM, optional: true, self: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuBar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenuBar, selector: "[cdkMenuBar]", inputs: { orientation: ["cdkMenuBarOrientation", "orientation"] }, host: { attributes: { "role": "menubar", "tabindex": "0" }, listeners: { "focus": "focusFirstItem()", "keydown": "_handleKeyEvent($event)" }, properties: { "attr.aria-orientation": "orientation" }, classAttribute: "cdk-menu-bar" }, providers: [
+        { provide: CdkMenuGroup, useExisting: CdkMenuBar },
+        { provide: CDK_MENU, useExisting: CdkMenuBar },
+        { provide: MenuStack, useClass: MenuStack },
+    ], queries: [{ propertyName: "_allItems", predicate: CdkMenuItem, descendants: true }], exportAs: ["cdkMenuBar"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuBar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuBar]',
+                    exportAs: 'cdkMenuBar',
+                    host: {
+                        'role': 'menubar',
+                        'class': 'cdk-menu-bar',
+                        'tabindex': '0',
+                        '[attr.aria-orientation]': 'orientation',
+                    },
+                    providers: [
+                        { provide: CdkMenuGroup, useExisting: CdkMenuBar },
+                        { provide: CDK_MENU, useExisting: CdkMenuBar },
+                        { provide: MenuStack, useClass: MenuStack },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: MenuStack }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MENU_AIM]
+                }] }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { orientation: [{
+                type: Input,
+                args: ['cdkMenuBarOrientation']
+            }], _allItems: [{
+                type: ContentChildren,
+                args: [CdkMenuItem, { descendants: true }]
+            }], 
+        /** Place focus on the first MenuItem in the menu and set the focus origin. */
+        focusFirstItem: [{
+                type: HostListener,
+                args: ['focus']
+            }], 
+        /**
+         * Handle keyboard events, specifically changing the focused element and/or toggling the active
+         * items menu.
+         * @param event the KeyboardEvent to handle.
+         */
+        _handleKeyEvent: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * A directive providing behavior for the "menuitemradio" ARIA role, which behaves similarly to
+ * a conventional radio-button. Any sibling `CdkMenuItemRadio` instances within the same `CdkMenu`
+ * or `CdkMenuGroup` comprise a radio group with unique selection enforced.
+ */
+class CdkMenuItemRadio extends CdkMenuItemSelectable {
+    constructor(_selectionDispatcher, element, ngZone, parentMenu, menuAim, dir, 
+    /** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
+    // `CdkMenuItemRadio` is commonly used in combination with a `CdkMenuItemTrigger`.
+    // tslint:disable-next-line: lightweight-tokens
+    menuTrigger) {
+        super(element, ngZone, parentMenu, menuAim, dir, menuTrigger);
+        this._selectionDispatcher = _selectionDispatcher;
+        this._registerDispatcherListener();
+    }
+    /** Configure the unique selection dispatcher listener in order to toggle the checked state  */
+    _registerDispatcherListener() {
+        this._removeDispatcherListener = this._selectionDispatcher.listen((id, name) => (this.checked = this.id === id && this.name === name));
+    }
+    /** Toggles the checked state of the radio-button. */
+    trigger() {
+        super.trigger();
+        if (!this.disabled) {
+            this._selectionDispatcher.notify(this.id, this.name);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._removeDispatcherListener();
+    }
+}
+CdkMenuItemRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItemRadio, deps: [{ token: i1$1.UniqueSelectionDispatcher }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i2.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemRadio.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenuItemRadio, selector: "[cdkMenuItemRadio]", host: { attributes: { "type": "button", "role": "menuitemradio" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
+        { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
+        { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+    ], exportAs: ["cdkMenuItemRadio"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuItemRadio]',
+                    exportAs: 'cdkMenuItemRadio',
+                    host: {
+                        '[tabindex]': '_tabindex',
+                        'type': 'button',
+                        'role': 'menuitemradio',
+                        '[attr.aria-checked]': 'checked || null',
+                        '[attr.aria-disabled]': 'disabled || null',
+                    },
+                    providers: [
+                        { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
+                        { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.UniqueSelectionDispatcher }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CDK_MENU]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MENU_AIM]
+                }] }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: CdkMenuItemTrigger, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * A directive providing behavior for the "menuitemcheckbox" ARIA role, which behaves similarly to a
+ * conventional checkbox.
+ */
+class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
+    /** Toggle the checked state of the checkbox. */
+    trigger() {
+        super.trigger();
+        if (!this.disabled) {
+            this.checked = !this.checked;
+        }
+    }
+}
+CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkMenuItemCheckbox, selector: "[cdkMenuItemCheckbox]", host: { attributes: { "type": "button", "role": "menuitemcheckbox" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
+        { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
+        { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+    ], exportAs: ["cdkMenuItemCheckbox"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkMenuItemCheckbox]',
+                    exportAs: 'cdkMenuItemCheckbox',
+                    host: {
+                        '[tabindex]': '_tabindex',
+                        'type': 'button',
+                        'role': 'menuitemcheckbox',
+                        '[attr.aria-checked]': 'checked || null',
+                        '[attr.aria-disabled]': 'disabled || null',
+                    },
+                    providers: [
+                        { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
+                        { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+                    ],
+                }]
+        }] });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/** Tracks the last open context menu trigger across the entire application. */
+class ContextMenuTracker {
+    /**
+     * Close the previous open context menu and set the given one as being open.
+     * @param trigger the trigger for the currently open Context Menu.
+     */
+    update(trigger) {
+        if (ContextMenuTracker._openContextMenuTrigger !== trigger) {
+            ContextMenuTracker._openContextMenuTrigger?.close();
+            ContextMenuTracker._openContextMenuTrigger = trigger;
+        }
+    }
+}
+ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: ContextMenuTracker, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Injection token for the ContextMenu options object. */
+const CDK_CONTEXT_MENU_DEFAULT_OPTIONS = new InjectionToken('cdk-context-menu-default-options');
+/**
+ * A directive which when placed on some element opens a the Menu it is bound to when a user
+ * right-clicks within that element. It is aware of nested Context Menus and the lowest level
+ * non-disabled context menu will trigger.
+ */
+class CdkContextMenuTrigger {
+    constructor(_viewContainerRef, _overlay, _contextMenuTracker, _options, _directionality) {
+        this._viewContainerRef = _viewContainerRef;
+        this._overlay = _overlay;
+        this._contextMenuTracker = _contextMenuTracker;
+        this._options = _options;
+        this._directionality = _directionality;
+        /** Emits when the attached menu is requested to open. */
+        this.opened = new EventEmitter();
+        /** Emits when the attached menu is requested to close. */
+        this.closed = new EventEmitter();
+        this._disabled = false;
+        /** A reference to the overlay which manages the triggered menu. */
+        this._overlayRef = null;
+        /** Emits when the element is destroyed. */
+        this._destroyed = new Subject();
+        /** The menu stack for this trigger and its associated menus. */
+        this._menuStack = new MenuStack();
+        /** Emits when the outside pointer events listener on the overlay should be stopped. */
+        this._stopOutsideClicksListener = merge(this.closed, this._destroyed);
+        this._setMenuStackListener();
+    }
+    /** Template reference variable to the menu to open on right click. */
+    get menuPanel() {
+        return this._menuPanel;
+    }
+    set menuPanel(panel) {
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) && panel._menuStack) {
+            throwExistingMenuStackError();
+        }
+        this._menuPanel = panel;
+        if (this._menuPanel) {
+            this._menuPanel._menuStack = this._menuStack;
+        }
+    }
+    /** Whether the context menu should be disabled. */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    /**
+     * Open the attached menu at the specified location.
+     * @param coordinates where to open the context menu
+     */
+    open(coordinates) {
+        if (this.disabled) {
+            return;
+        }
+        else if (this.isOpen()) {
+            // since we're moving this menu we need to close any submenus first otherwise they end up
+            // disconnected from this one.
+            this._menuStack.closeSubMenuOf(this._menuPanel._menu);
+            this._overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
+            this._overlayRef.updatePosition();
+        }
+        else {
+            this.opened.next();
+            if (this._overlayRef) {
+                this._overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
+                this._overlayRef.updatePosition();
+            }
+            else {
+                this._overlayRef = this._overlay.create(this._getOverlayConfig(coordinates));
+            }
+            this._overlayRef.attach(this._getMenuContent());
+            this._subscribeToOutsideClicks();
+        }
+    }
+    /** Close the opened menu. */
+    close() {
+        this._menuStack.closeAll();
+    }
+    /**
+     * Open the context menu and close any previously open menus.
+     * @param event the mouse event which opens the context menu.
+     */
+    _openOnContextMenu(event) {
+        if (!this.disabled) {
+            // Prevent the native context menu from opening because we're opening a custom one.
+            event.preventDefault();
+            // Stop event propagation to ensure that only the closest enabled context menu opens.
+            // Otherwise, any context menus attached to containing elements would *also* open,
+            // resulting in multiple stacked context menus being displayed.
+            event.stopPropagation();
+            this._contextMenuTracker.update(this);
+            this.open({ x: event.clientX, y: event.clientY });
+            // A context menu can be triggered via a mouse right click or a keyboard shortcut.
+            if (event.button === 2) {
+                this._menuPanel._menu?.focusFirstItem('mouse');
+            }
+            else if (event.button === 0) {
+                this._menuPanel._menu?.focusFirstItem('keyboard');
+            }
+            else {
+                this._menuPanel._menu?.focusFirstItem('program');
+            }
+        }
+    }
+    /** Whether the attached menu is open. */
+    isOpen() {
+        return !!this._overlayRef?.hasAttached();
+    }
+    /**
+     * Get the configuration object used to create the overlay.
+     * @param coordinates the location to place the opened menu
+     */
+    _getOverlayConfig(coordinates) {
+        return new OverlayConfig({
+            positionStrategy: this._getOverlayPositionStrategy(coordinates),
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            direction: this._directionality,
+        });
+    }
+    /**
+     * Build the position strategy for the overlay which specifies where to place the menu.
+     * @param coordinates the location to place the opened menu
+     */
+    _getOverlayPositionStrategy(coordinates) {
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(coordinates)
+            .withDefaultOffsetX(this._options.offsetX)
+            .withDefaultOffsetY(this._options.offsetY)
+            .withPositions(this._getOverlayPositions());
+    }
+    /**
+     * Determine and return where to position the opened menu relative to the mouse location.
+     */
+    _getOverlayPositions() {
+        // TODO: this should be configurable through the injected context menu options
+        return [
+            { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+            { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
+            { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
+        ];
+    }
+    /**
+     * Get the portal to be attached to the overlay which contains the menu. Allows for the menu
+     * content to change dynamically and be reflected in the application.
+     */
+    _getMenuContent() {
+        const hasMenuContentChanged = this.menuPanel._templateRef !== this._panelContent?.templateRef;
+        if (this.menuPanel && (!this._panelContent || hasMenuContentChanged)) {
+            this._panelContent = new TemplatePortal(this.menuPanel._templateRef, this._viewContainerRef);
+        }
+        return this._panelContent;
+    }
+    /** Subscribe to the menu stack close events and close this menu when requested. */
+    _setMenuStackListener() {
+        this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
+            if (item === this._menuPanel._menu && this.isOpen()) {
+                this.closed.next();
+                this._overlayRef.detach();
+            }
+        });
+    }
+    /**
+     * Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
+     * click occurs outside the menus.
+     */
+    _subscribeToOutsideClicks() {
+        if (this._overlayRef) {
+            this._overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntil(this._stopOutsideClicksListener))
+                .subscribe(event => {
+                if (!isClickInsideMenuOverlay(event.target)) {
+                    this._menuStack.closeAll();
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._destroyOverlay();
+        this._resetPanelMenuStack();
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /** Destroy and unset the overlay reference it if exists. */
+    _destroyOverlay() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    /** Set the menu panels menu stack back to null. */
+    _resetPanelMenuStack() {
+        // If a ContextMenuTrigger is placed in a conditionally rendered view, each time the trigger is
+        // rendered the panel setter for ContextMenuTrigger is called. From the first render onward,
+        // the attached CdkMenuPanel has the MenuStack set. Since we throw an error if a panel already
+        // has a stack set, we want to reset the attached stack here to prevent the error from being
+        // thrown if the trigger re-configures its attached panel (in the case where there is a 1:1
+        // relationship between the panel and trigger).
+        if (this._menuPanel) {
+            this._menuPanel._menuStack = null;
+        }
+    }
+}
+CdkContextMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkContextMenuTrigger, deps: [{ token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: ContextMenuTracker }, { token: CDK_CONTEXT_MENU_DEFAULT_OPTIONS }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkContextMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0-next.15", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: { menuPanel: ["cdkContextMenuTriggerFor", "menuPanel"], disabled: ["cdkContextMenuDisabled", "disabled"] }, outputs: { opened: "cdkContextMenuOpened", closed: "cdkContextMenuClosed" }, host: { listeners: { "contextmenu": "_openOnContextMenu($event)" } }, providers: [
+        // In cases where the first menu item in the context menu is a trigger the submenu opens on a
+        // hover event. Offsetting the opened context menu by 2px prevents this from occurring.
+        { provide: CDK_CONTEXT_MENU_DEFAULT_OPTIONS, useValue: { offsetX: 2, offsetY: 2 } },
+    ], exportAs: ["cdkContextMenuTriggerFor"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkContextMenuTriggerFor]',
+                    exportAs: 'cdkContextMenuTriggerFor',
+                    host: {
+                        '(contextmenu)': '_openOnContextMenu($event)',
+                    },
+                    providers: [
+                        // In cases where the first menu item in the context menu is a trigger the submenu opens on a
+                        // hover event. Offsetting the opened context menu by 2px prevents this from occurring.
+                        { provide: CDK_CONTEXT_MENU_DEFAULT_OPTIONS, useValue: { offsetX: 2, offsetY: 2 } },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: ContextMenuTracker }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CDK_CONTEXT_MENU_DEFAULT_OPTIONS]
+                }] }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { menuPanel: [{
+                type: Input,
+                args: ['cdkContextMenuTriggerFor']
+            }], opened: [{
+                type: Output,
+                args: ['cdkContextMenuOpened']
+            }], closed: [{
+                type: Output,
+                args: ['cdkContextMenuClosed']
+            }], disabled: [{
+                type: Input,
+                args: ['cdkContextMenuDisabled']
+            }] } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const EXPORTED_DECLARATIONS = [
+    CdkMenuBar,
+    CdkMenu,
+    CdkMenuPanel,
+    CdkMenuItem,
+    CdkMenuItemRadio,
+    CdkMenuItemCheckbox,
+    CdkMenuItemTrigger,
+    CdkMenuGroup,
+    CdkContextMenuTrigger,
+    CdkTargetMenuAim,
+];
+class CdkMenuModule {
+}
+CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuModule, declarations: [CdkMenuBar,
+        CdkMenu,
+        CdkMenuPanel,
+        CdkMenuItem,
+        CdkMenuItemRadio,
+        CdkMenuItemCheckbox,
+        CdkMenuItemTrigger,
+        CdkMenuGroup,
+        CdkContextMenuTrigger,
+        CdkTargetMenuAim], imports: [OverlayModule], exports: [CdkMenuBar,
+        CdkMenu,
+        CdkMenuPanel,
+        CdkMenuItem,
+        CdkMenuItemRadio,
+        CdkMenuItemCheckbox,
+        CdkMenuItemTrigger,
+        CdkMenuGroup,
+        CdkContextMenuTrigger,
+        CdkTargetMenuAim] });
+CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0-next.15", ngImport: i0, type: CdkMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [OverlayModule],
+                    exports: EXPORTED_DECLARATIONS,
+                    declarations: EXPORTED_DECLARATIONS,
+                }]
+        }] });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CDK_CONTEXT_MENU_DEFAULT_OPTIONS, CDK_MENU, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemTrigger, CdkMenuModule, CdkMenuPanel, CdkTargetMenuAim, ContextMenuTracker, MENU_AIM, MenuStack, TargetMenuAim, isClickInsideMenuOverlay };
+//# sourceMappingURL=menu.mjs.map