@angular/cdk-experimental 14.0.0-next.4 → 14.0.0-next.7

package/fesm2015/menu.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Directive, EventEmitter, Optional, Inject, Input, Output, Self, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Directive, Injector, Inject, EventEmitter, Optional, SkipSelf, Input, Output, Self, 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 { Subject, fromEvent, merge, defer, partition } from 'rxjs';
 import { filter, takeUntil, startWith, mergeMap, mapTo, mergeAll, take, switchMap, skip } from 'rxjs/operators';
-import * as i1$1 from '@angular/cdk/collections';
+import * as i1$2 from '@angular/cdk/collections';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i2 from '@angular/cdk/bidi';
+import * as i1$1 from '@angular/cdk/bidi';
 import { TemplatePortal } from '@angular/cdk/portal';
 
 /**
@@ -29,14 +29,113 @@ const CDK_MENU = new InjectionToken('cdk-menu');
  * 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 MenuStack. */
+const MENU_STACK = new InjectionToken('cdk-menu-stack');
 /**
- * Throws an exception when a menu panel already has a menu stack.
- * @docs-private
+ * 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.
  */
-function throwExistingMenuStackError() {
-    throw Error('CdkMenuPanel is already referenced by different CdkMenuTrigger. Ensure that a menu is' +
-        ' opened by a single trigger only.');
+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];
+    }
 }
+MenuStack.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MenuStack.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @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 an instance of the PointerFocusTracker is not provided.
  * @docs-private
@@ -223,9 +322,9 @@ class TargetMenuAim {
         this._destroyed.complete();
     }
 }
-TargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TargetMenuAim, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TargetMenuAim });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TargetMenuAim, decorators: [{
+TargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: TargetMenuAim, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: TargetMenuAim });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: TargetMenuAim, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 /**
@@ -234,9 +333,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  */
 class CdkTargetMenuAim {
 }
-CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CdkTargetMenuAim.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }], exportAs: ["cdkTargetMenuAim"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
+CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CdkTargetMenuAim.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }], exportAs: ["cdkTargetMenuAim"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkTargetMenuAim]',
@@ -252,103 +351,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  * 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;
+/** Injection token used for an implementation of MenuStack. */
+const MENU_TRIGGER = new InjectionToken('cdk-menu-trigger');
+class MenuTrigger {
+    constructor(injector, menuStack) {
+        this.injector = injector;
+        this.menuStack = menuStack;
+    }
+    getChildMenuInjector() {
+        this._childMenuInjector =
+            this._childMenuInjector ||
+                Injector.create({
+                    providers: [
+                        { provide: MENU_TRIGGER, useValue: this },
+                        { provide: MENU_STACK, useValue: this.menuStack },
+                    ],
+                    parent: this.injector,
+                });
+        return this._childMenuInjector;
     }
-    /** Get the top most element on the stack. */
-    peek() {
-        return this._elements[this._elements.length - 1];
+    registerChildMenu(child) {
+        this.childMenu = child;
     }
 }
-/** NoopMenuStack is a placeholder MenuStack used for inline menus. */
-class NoopMenuStack extends MenuStack {
-    /** Noop push - does not add elements to the MenuStack. */
-    push(_) { }
-}
+MenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuTrigger, deps: [{ token: i0.Injector }, { token: MENU_STACK }], target: i0.ɵɵFactoryTarget.Injectable });
+MenuTrigger.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuTrigger });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuTrigger, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i0.Injector }, { type: MenuStack, decorators: [{
+                        type: Inject,
+                        args: [MENU_STACK]
+                    }] }];
+    } });
 
 /**
  * @license
@@ -381,8 +416,9 @@ function isClickInsideMenuOverlay(target) {
  * 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) {
+class CdkMenuItemTrigger extends MenuTrigger {
+    constructor(injector, _elementRef, _viewContainerRef, _overlay, _ngZone, menuStack, _parentMenu, _menuAim, _directionality) {
+        super(injector, menuStack);
         this._elementRef = _elementRef;
         this._viewContainerRef = _viewContainerRef;
         this._overlay = _overlay;
@@ -394,8 +430,6 @@ class CdkMenuItemTrigger {
         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. */
@@ -405,22 +439,6 @@ class CdkMenuItemTrigger {
         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 === null || panel === void 0 ? void 0 : 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()) {
@@ -446,7 +464,7 @@ class CdkMenuItemTrigger {
     }
     /** Return true if the trigger has an attached menu */
     hasMenu() {
-        return !!this.menuPanel;
+        return !!this._menuTemplateRef;
     }
     /** Whether the menu this button is a trigger for is open */
     isMenuOpen() {
@@ -457,8 +475,7 @@ class CdkMenuItemTrigger {
      * @return the menu if it is open, otherwise undefined.
      */
     getMenu() {
-        var _a;
-        return (_a = this.menuPanel) === null || _a === void 0 ? void 0 : _a._menu;
+        return this.childMenu;
     }
     /**
      * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
@@ -472,7 +489,7 @@ class CdkMenuItemTrigger {
         });
         this._ngZone.runOutsideAngular(() => {
             fromEvent(this._elementRef.nativeElement, 'mouseenter')
-                .pipe(filter(() => { var _a; return !((_a = this._getMenuStack()) === null || _a === void 0 ? void 0 : _a.isEmpty()) && !this.isMenuOpen(); }), takeUntil(this._destroyed))
+                .pipe(filter(() => !this.menuStack.isEmpty() && !this.isMenuOpen()), takeUntil(this._destroyed))
                 .subscribe(() => {
                 if (this._menuAim) {
                     this._menuAim.toggle(toggleMenus);
@@ -489,36 +506,36 @@ class CdkMenuItemTrigger {
      * @param event the keyboard event to handle
      */
     _toggleOnKeydown(event) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g;
         const keyCode = event.keyCode;
         switch (keyCode) {
             case SPACE:
             case ENTER:
                 event.preventDefault();
                 this.toggle();
-                (_b = (_a = this.menuPanel) === null || _a === void 0 ? void 0 : _a._menu) === null || _b === void 0 ? void 0 : _b.focusFirstItem('keyboard');
+                (_a = this.childMenu) === null || _a === void 0 ? void 0 : _a.focusFirstItem('keyboard');
                 break;
             case RIGHT_ARROW:
                 if (this._parentMenu && this._isParentVertical()) {
                     event.preventDefault();
-                    if (((_c = this._directionality) === null || _c === void 0 ? void 0 : _c.value) === 'rtl') {
-                        this._getMenuStack().close(this._parentMenu, 2 /* currentItem */);
+                    if (((_b = this._directionality) === null || _b === void 0 ? void 0 : _b.value) === 'rtl') {
+                        this.menuStack.close(this._parentMenu, 2 /* currentItem */);
                     }
                     else {
                         this.openMenu();
-                        (_e = (_d = this.menuPanel) === null || _d === void 0 ? void 0 : _d._menu) === null || _e === void 0 ? void 0 : _e.focusFirstItem('keyboard');
+                        (_c = this.childMenu) === null || _c === void 0 ? void 0 : _c.focusFirstItem('keyboard');
                     }
                 }
                 break;
             case LEFT_ARROW:
                 if (this._parentMenu && this._isParentVertical()) {
                     event.preventDefault();
-                    if (((_f = this._directionality) === null || _f === void 0 ? void 0 : _f.value) === 'rtl') {
+                    if (((_d = this._directionality) === null || _d === void 0 ? void 0 : _d.value) === 'rtl') {
                         this.openMenu();
-                        (_h = (_g = this.menuPanel) === null || _g === void 0 ? void 0 : _g._menu) === null || _h === void 0 ? void 0 : _h.focusFirstItem('keyboard');
+                        (_e = this.childMenu) === null || _e === void 0 ? void 0 : _e.focusFirstItem('keyboard');
                     }
                     else {
-                        this._getMenuStack().close(this._parentMenu, 2 /* currentItem */);
+                        this.menuStack.close(this._parentMenu, 2 /* currentItem */);
                     }
                 }
                 break;
@@ -528,8 +545,8 @@ class CdkMenuItemTrigger {
                     event.preventDefault();
                     this.openMenu();
                     keyCode === DOWN_ARROW
-                        ? (_k = (_j = this.menuPanel) === null || _j === void 0 ? void 0 : _j._menu) === null || _k === void 0 ? void 0 : _k.focusFirstItem('keyboard')
-                        : (_m = (_l = this.menuPanel) === null || _l === void 0 ? void 0 : _l._menu) === null || _m === void 0 ? void 0 : _m.focusLastItem('keyboard');
+                        ? (_f = this.childMenu) === null || _f === void 0 ? void 0 : _f.focusFirstItem('keyboard')
+                        : (_g = this.childMenu) === null || _g === void 0 ? void 0 : _g.focusLastItem('keyboard');
                 }
                 break;
         }
@@ -537,17 +554,17 @@ class CdkMenuItemTrigger {
     /** 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;
+            const isParentMenuBar = !this.menuStack.closeSubMenuOf(this._parentMenu) &&
+                this.menuStack.peek() !== this._parentMenu;
             if (isParentMenuBar) {
-                menuStack.closeAll();
+                this.menuStack.closeAll();
             }
         }
         else {
-            this._getMenuStack().closeAll();
+            this.menuStack.closeAll();
         }
     }
     /** Get the configuration object used to create the overlay */
@@ -587,12 +604,12 @@ class CdkMenuItemTrigger {
      * content to change dynamically and be reflected in the application.
      */
     _getPortal() {
-        var _a, _b;
-        const hasMenuContentChanged = ((_a = this.menuPanel) === null || _a === void 0 ? void 0 : _a._templateRef) !== ((_b = this._panelContent) === null || _b === void 0 ? void 0 : _b.templateRef);
-        if (this.menuPanel && (!this._panelContent || hasMenuContentChanged)) {
-            this._panelContent = new TemplatePortal(this.menuPanel._templateRef, this._viewContainerRef);
+        var _a;
+        const hasMenuContentChanged = this._menuTemplateRef !== ((_a = this._menuPortal) === null || _a === void 0 ? void 0 : _a.templateRef);
+        if (this._menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {
+            this._menuPortal = new TemplatePortal(this._menuTemplateRef, this._viewContainerRef, undefined, this.getChildMenuInjector());
         }
-        return this._panelContent;
+        return this._menuPortal;
     }
     /**
      * @return true if if the enclosing parent menu is configured in a vertical orientation.
@@ -607,40 +624,18 @@ class CdkMenuItemTrigger {
      */
     _registerCloseHandler() {
         if (!this._parentMenu) {
-            this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
-                var _a;
-                if (item === ((_a = this._menuPanel) === null || _a === void 0 ? void 0 : _a._menu)) {
+            this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
+                if (item === this.childMenu) {
                     this.closeMenu();
                 }
             });
         }
     }
-    /** Get the menu stack for this trigger - either from the parent or this trigger. */
-    _getMenuStack() {
-        var _a;
-        // 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 ((_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a._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.
@@ -652,7 +647,7 @@ class CdkMenuItemTrigger {
                 .pipe(takeUntil(this._stopOutsideClicksListener))
                 .subscribe(event => {
                 if (!isClickInsideMenuOverlay(event.target)) {
-                    this._getMenuStack().closeAll();
+                    this.menuStack.closeAll();
                 }
             });
         }
@@ -665,9 +660,16 @@ class CdkMenuItemTrigger {
         }
     }
 }
-CdkMenuItemTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
+CdkMenuItemTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemTrigger, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: i0.NgZone }, { token: MENU_STACK }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuItemTrigger, selector: "[cdkMenuTriggerFor]", inputs: { _menuTemplateRef: ["cdkMenuTriggerFor", "_menuTemplateRef"] }, 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" }, providers: [
+        { provide: MENU_TRIGGER, useExisting: CdkMenuItemTrigger },
+        {
+            provide: MENU_STACK,
+            deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+            useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
+        },
+    ], exportAs: ["cdkMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuTriggerFor]',
@@ -679,9 +681,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         'aria-haspopup': 'menu',
                         '[attr.aria-expanded]': 'isMenuOpen()',
                     },
+                    providers: [
+                        { provide: MENU_TRIGGER, useExisting: CdkMenuItemTrigger },
+                        {
+                            provide: MENU_STACK,
+                            deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+                            useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
+                        },
+                    ],
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
+                        type: Inject,
+                        args: [MENU_STACK]
+                    }] }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -691,10 +704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     }, {
                         type: Inject,
                         args: [MENU_AIM]
-                    }] }, { type: i2.Directionality, decorators: [{
+                    }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }];
-    }, propDecorators: { menuPanel: [{
+    }, propDecorators: { _menuTemplateRef: [{
                 type: Input,
                 args: ['cdkMenuTriggerFor']
             }], opened: [{
@@ -725,13 +738,14 @@ function removeIcons(element) {
  * behavior when clicked.
  */
 class CdkMenuItem {
-    constructor(_elementRef, _ngZone, _parentMenu, _menuAim, _dir, 
+    constructor(_elementRef, _ngZone, _menuStack, _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._menuStack = _menuStack;
         this._parentMenu = _parentMenu;
         this._menuAim = _menuAim;
         this._dir = _dir;
@@ -781,7 +795,7 @@ class CdkMenuItem {
             return;
         }
         // don't set the tabindex if there are no open sibling or parent menus
-        if (!event || !((_a = this._getMenuStack()) === null || _a === void 0 ? void 0 : _a.isEmpty())) {
+        if (!event || !((_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.isEmpty())) {
             this._tabindex = 0;
         }
     }
@@ -797,7 +811,7 @@ class CdkMenuItem {
         var _a;
         if (!this.disabled && !this.hasMenu()) {
             this.triggered.next();
-            (_a = this._getMenuStack()) === null || _a === void 0 ? void 0 : _a.closeAll();
+            (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.closeAll();
         }
     }
     /** Whether the menu item opens a menu. */
@@ -849,16 +863,16 @@ class CdkMenuItem {
                 if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
                     event.preventDefault();
                     ((_a = this._dir) === null || _a === void 0 ? void 0 : _a.value) === 'rtl'
-                        ? (_b = this._getMenuStack()) === null || _b === void 0 ? void 0 : _b.close(this._parentMenu, 1 /* previousItem */)
-                        : (_c = this._getMenuStack()) === null || _c === void 0 ? void 0 : _c.closeAll(0 /* nextItem */);
+                        ? (_b = this._menuStack) === null || _b === void 0 ? void 0 : _b.close(this._parentMenu, 1 /* previousItem */)
+                        : (_c = this._menuStack) === null || _c === void 0 ? void 0 : _c.closeAll(0 /* nextItem */);
                 }
                 break;
             case LEFT_ARROW:
                 if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
                     event.preventDefault();
                     ((_d = this._dir) === null || _d === void 0 ? void 0 : _d.value) === 'rtl'
-                        ? (_e = this._getMenuStack()) === null || _e === void 0 ? void 0 : _e.closeAll(0 /* nextItem */)
-                        : (_f = this._getMenuStack()) === null || _f === void 0 ? void 0 : _f.close(this._parentMenu, 1 /* previousItem */);
+                        ? (_e = this._menuStack) === null || _e === void 0 ? void 0 : _e.closeAll(0 /* nextItem */)
+                        : (_f = this._menuStack) === null || _f === void 0 ? void 0 : _f.close(this._parentMenu, 1 /* previousItem */);
                 }
                 break;
         }
@@ -869,9 +883,9 @@ class CdkMenuItem {
      */
     _setupMouseEnter() {
         if (!this._isStandaloneItem()) {
-            const closeOpenSiblings = () => this._ngZone.run(() => { var _a; return (_a = this._getMenuStack()) === null || _a === void 0 ? void 0 : _a.closeSubMenuOf(this._parentMenu); });
+            const closeOpenSiblings = () => this._ngZone.run(() => { var _a; return (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.closeSubMenuOf(this._parentMenu); });
             this._ngZone.runOutsideAngular(() => fromEvent(this._elementRef.nativeElement, 'mouseenter')
-                .pipe(filter(() => { var _a; return !((_a = this._getMenuStack()) === null || _a === void 0 ? void 0 : _a.isEmpty()) && !this.hasMenu(); }), takeUntil(this._destroyed))
+                .pipe(filter(() => { var _a; return !((_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.isEmpty()) && !this.hasMenu(); }), takeUntil(this._destroyed))
                 .subscribe(() => {
                 if (this._menuAim) {
                     this._menuAim.toggle(closeOpenSiblings);
@@ -890,21 +904,13 @@ class CdkMenuItem {
         var _a;
         return ((_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a.orientation) === 'vertical';
     }
-    /** Get the MenuStack from the parent menu. */
-    _getMenuStack() {
-        var _a;
-        // 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 (_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a._menuStack;
-    }
     ngOnDestroy() {
         this._destroyed.next();
     }
 }
-CdkMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: CdkMenuItem, decorators: [{
+CdkMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItem, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK, optional: true }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", 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: "14.0.0-next.6", ngImport: i0, type: CdkMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuItem]',
@@ -924,7 +930,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     },
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MENU_STACK]
+                    }] }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -934,7 +945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     }, {
                         type: Inject,
                         args: [MENU_AIM]
-                    }] }, { type: i2.Directionality, decorators: [{
+                    }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }, { type: CdkMenuItemTrigger, decorators: [{
                         type: Self
@@ -986,9 +997,9 @@ class CdkMenuItemSelectable extends CdkMenuItem {
         }
     }
 }
-CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemSelectable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: CdkMenuItemSelectable, inputs: { checked: "checked", name: "name", id: "id" }, outputs: { toggled: "cdkMenuItemToggled" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
+CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemSelectable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuItemSelectable, inputs: { checked: "checked", name: "name", id: "id" }, outputs: { toggled: "cdkMenuItemToggled" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
             type: Directive
         }], propDecorators: { toggled: [{
                 type: Output,
@@ -1044,9 +1055,9 @@ class CdkMenuGroup {
         this._selectableChanges.complete();
     }
 }
-CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", ngImport: i0, type: CdkMenuGroup, decorators: [{
+CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", 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: "14.0.0-next.6", ngImport: i0, type: CdkMenuGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuGroup]',
@@ -1111,42 +1122,6 @@ class PointerFocusTracker {
     }
 }
 
-/**
- * @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) {
-        var _a;
-        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;
-        (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.push(child);
-    }
-}
-CdkMenuPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuPanel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuPanel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: CdkMenuPanel, selector: "ng-template[cdkMenuPanel]", exportAs: ["cdkMenuPanel"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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.
@@ -1162,16 +1137,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  * 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) {
+    constructor(_ngZone, _elementRef, _menuStack, _parentTrigger, _menuAim, _dir) {
         super();
         this._ngZone = _ngZone;
         this._elementRef = _elementRef;
+        this._menuStack = _menuStack;
+        this._parentTrigger = _parentTrigger;
         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.
@@ -1179,14 +1152,11 @@ class CdkMenu extends CdkMenuGroup {
         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();
+        var _a, _b;
+        (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.push(this);
+        (_b = this._parentTrigger) === null || _b === void 0 ? void 0 : _b.registerChildMenu(this);
     }
     ngAfterContentInit() {
         var _a;
@@ -1210,6 +1180,7 @@ class CdkMenu extends CdkMenuGroup {
     }
     /** Handle keyboard events for the Menu. */
     _handleKeyEvent(event) {
+        var _a, _b;
         const keyManager = this._keyManager;
         switch (event.keyCode) {
             case LEFT_ARROW:
@@ -1231,28 +1202,16 @@ class CdkMenu extends CdkMenuGroup {
             case ESCAPE:
                 if (!hasModifierKey(event)) {
                     event.preventDefault();
-                    this._menuStack.close(this, 2 /* currentItem */);
+                    (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.close(this, 2 /* currentItem */);
                 }
                 break;
             case TAB:
-                this._menuStack.closeAll();
+                (_b = this._menuStack) === null || _b === void 0 ? void 0 : _b.closeAll();
                 break;
             default:
                 keyManager.onKeydown(event);
         }
     }
-    /** Register this menu with its enclosing parent menu panel */
-    _registerWithParentPanel() {
-        var _a;
-        (_a = this._getMenuPanel()) === null || _a === void 0 ? void 0 : _a._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
@@ -1301,12 +1260,9 @@ class CdkMenu extends CdkMenuGroup {
     }
     /** 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));
+        var _a, _b;
+        (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.closed.pipe(takeUntil(this.closed)).subscribe(item => this._closeOpenMenu(item));
+        (_b = this._menuStack) === null || _b === void 0 ? void 0 : _b.emptied.pipe(takeUntil(this.closed)).subscribe(event => this._toggleMenuFocus(event));
     }
     /**
      * Close the open menu if the current active item opened the requested MenuStackItem.
@@ -1370,9 +1326,7 @@ class CdkMenu extends CdkMenuGroup {
      * 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;
+        return !this._menuStack;
     }
     ngOnDestroy() {
         var _a;
@@ -1386,12 +1340,12 @@ class CdkMenu extends CdkMenuGroup {
         this.closed.complete();
     }
 }
-CdkMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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: [
+CdkMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenu, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_STACK, optional: true }, { token: MENU_TRIGGER, optional: true }, { token: MENU_AIM, optional: true, self: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenu, selector: "[cdkMenu]", inputs: { orientation: ["cdkMenuOrientation", "orientation"] }, 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.2.0", ngImport: i0, type: CdkMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenu, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenu]',
@@ -1411,16 +1365,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     ],
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: MenuStack, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MENU_STACK]
+                    }] }, { type: MenuTrigger, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MENU_TRIGGER]
+                    }] }, { type: undefined, decorators: [{
                         type: Self
                     }, {
                         type: Optional
                     }, {
                         type: Inject,
                         args: [MENU_AIM]
-                    }] }, { type: i2.Directionality, decorators: [{
-                        type: Optional
-                    }] }, { type: CdkMenuPanel, decorators: [{
+                    }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { orientation: [{
@@ -1434,9 +1396,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
             }], _allItems: [{
                 type: ContentChildren,
                 args: [CdkMenuItem, { descendants: true }]
-            }], _explicitPanel: [{
-                type: Input,
-                args: ['cdkMenuPanel']
             }] } });
 
 /**
@@ -1453,11 +1412,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  *
  */
 class CdkMenuBar extends CdkMenuGroup {
-    constructor(_menuStack, _ngZone, _elementRef, _menuAim, _dir) {
+    constructor(_ngZone, _elementRef, _menuStack, _menuAim, _dir) {
         super();
-        this._menuStack = _menuStack;
         this._ngZone = _ngZone;
         this._elementRef = _elementRef;
+        this._menuStack = _menuStack;
         this._menuAim = _menuAim;
         this._dir = _dir;
         /**
@@ -1640,13 +1599,13 @@ class CdkMenuBar extends CdkMenuGroup {
         (_a = this._pointerTracker) === null || _a === void 0 ? void 0 : _a.destroy();
     }
 }
-CdkMenuBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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: [
+CdkMenuBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuBar, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_STACK }, { token: MENU_AIM, optional: true, self: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuBar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", 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 },
+        { provide: MENU_STACK, useClass: MenuStack },
     ], queries: [{ propertyName: "_allItems", predicate: CdkMenuItem, descendants: true }], exportAs: ["cdkMenuBar"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuBar, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuBar]',
@@ -1662,18 +1621,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     providers: [
                         { provide: CdkMenuGroup, useExisting: CdkMenuBar },
                         { provide: CDK_MENU, useExisting: CdkMenuBar },
-                        { provide: MenuStack, useClass: MenuStack },
+                        { provide: MENU_STACK, useClass: MenuStack },
                     ],
                 }]
         }], ctorParameters: function () {
-        return [{ type: MenuStack }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: MenuStack, decorators: [{
+                        type: Inject,
+                        args: [MENU_STACK]
+                    }] }, { type: undefined, decorators: [{
                         type: Self
                     }, {
                         type: Optional
                     }, {
                         type: Inject,
                         args: [MENU_AIM]
-                    }] }, { type: i2.Directionality, decorators: [{
+                    }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { orientation: [{
@@ -1690,12 +1652,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  * or `CdkMenuGroup` comprise a radio group with unique selection enforced.
  */
 class CdkMenuItemRadio extends CdkMenuItemSelectable {
-    constructor(_selectionDispatcher, element, ngZone, parentMenu, menuAim, dir, 
+    constructor(_selectionDispatcher, element, ngZone, menuStack, 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);
+        super(element, ngZone, menuStack, parentMenu, menuAim, dir, menuTrigger);
         this._selectionDispatcher = _selectionDispatcher;
         this._registerDispatcherListener();
     }
@@ -1715,12 +1677,12 @@ class CdkMenuItemRadio extends CdkMenuItemSelectable {
         this._removeDispatcherListener();
     }
 }
-CdkMenuItemRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: CdkMenuItemRadio, selector: "[cdkMenuItemRadio]", host: { attributes: { "type": "button", "role": "menuitemradio" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
+CdkMenuItemRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemRadio, deps: [{ token: i1$2.UniqueSelectionDispatcher }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK, optional: true }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemRadio.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", 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.2.0", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuItemRadio]',
@@ -1738,7 +1700,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     ],
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$1.UniqueSelectionDispatcher }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        return [{ type: i1$2.UniqueSelectionDispatcher }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MENU_STACK]
+                    }] }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -1748,7 +1715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     }, {
                         type: Inject,
                         args: [MENU_AIM]
-                    }] }, { type: i2.Directionality, decorators: [{
+                    }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }, { type: CdkMenuItemTrigger, decorators: [{
                         type: Self
@@ -1777,12 +1744,12 @@ class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
         }
     }
 }
-CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: CdkMenuItemCheckbox, selector: "[cdkMenuItemCheckbox]", host: { attributes: { "type": "button", "role": "menuitemcheckbox" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
+CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", 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.2.0", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuItemCheckbox]',
@@ -1822,9 +1789,9 @@ class ContextMenuTracker {
         }
     }
 }
-ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ContextMenuTracker, decorators: [{
+ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1835,8 +1802,9 @@ const CDK_CONTEXT_MENU_DEFAULT_OPTIONS = new InjectionToken('cdk-context-menu-de
  * 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) {
+class CdkContextMenuTrigger extends MenuTrigger {
+    constructor(injector, _viewContainerRef, _overlay, _contextMenuTracker, menuStack, _options, _directionality) {
+        super(injector, menuStack);
         this._viewContainerRef = _viewContainerRef;
         this._overlay = _overlay;
         this._contextMenuTracker = _contextMenuTracker;
@@ -1851,25 +1819,10 @@ class CdkContextMenuTrigger {
         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;
@@ -1891,7 +1844,7 @@ class CdkContextMenuTrigger {
         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.menuStack.closeSubMenuOf(this.childMenu);
             this._overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
             this._overlayRef.updatePosition();
         }
@@ -1910,7 +1863,7 @@ class CdkContextMenuTrigger {
     }
     /** Close the opened menu. */
     close() {
-        this._menuStack.closeAll();
+        this.menuStack.closeAll();
     }
     /**
      * Open the context menu and close any previously open menus.
@@ -1929,13 +1882,13 @@ class CdkContextMenuTrigger {
             this._open({ x: event.clientX, y: event.clientY }, true);
             // A context menu can be triggered via a mouse right click or a keyboard shortcut.
             if (event.button === 2) {
-                (_a = this._menuPanel._menu) === null || _a === void 0 ? void 0 : _a.focusFirstItem('mouse');
+                (_a = this.childMenu) === null || _a === void 0 ? void 0 : _a.focusFirstItem('mouse');
             }
             else if (event.button === 0) {
-                (_b = this._menuPanel._menu) === null || _b === void 0 ? void 0 : _b.focusFirstItem('keyboard');
+                (_b = this.childMenu) === null || _b === void 0 ? void 0 : _b.focusFirstItem('keyboard');
             }
             else {
-                (_c = this._menuPanel._menu) === null || _c === void 0 ? void 0 : _c.focusFirstItem('program');
+                (_c = this.childMenu) === null || _c === void 0 ? void 0 : _c.focusFirstItem('program');
             }
         }
     }
@@ -1985,16 +1938,16 @@ class CdkContextMenuTrigger {
      */
     _getMenuContent() {
         var _a;
-        const hasMenuContentChanged = this.menuPanel._templateRef !== ((_a = this._panelContent) === null || _a === void 0 ? void 0 : _a.templateRef);
-        if (this.menuPanel && (!this._panelContent || hasMenuContentChanged)) {
-            this._panelContent = new TemplatePortal(this.menuPanel._templateRef, this._viewContainerRef);
+        const hasMenuContentChanged = this._menuTemplateRef !== ((_a = this._menuPortal) === null || _a === void 0 ? void 0 : _a.templateRef);
+        if (this._menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {
+            this._menuPortal = new TemplatePortal(this._menuTemplateRef, this._viewContainerRef, undefined, this.getChildMenuInjector());
         }
-        return this._panelContent;
+        return this._menuPortal;
     }
     /** 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.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
+            if (item === this.childMenu && this.isOpen()) {
                 this.closed.next();
                 this._overlayRef.detach();
             }
@@ -2015,14 +1968,13 @@ class CdkContextMenuTrigger {
             }
             outsideClicks.pipe(takeUntil(this._stopOutsideClicksListener)).subscribe(event => {
                 if (!isClickInsideMenuOverlay(event.target)) {
-                    this._menuStack.closeAll();
+                    this.menuStack.closeAll();
                 }
             });
         }
     }
     ngOnDestroy() {
         this._destroyOverlay();
-        this._resetPanelMenuStack();
         this._destroyed.next();
         this._destroyed.complete();
     }
@@ -2033,26 +1985,16 @@ class CdkContextMenuTrigger {
             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.2.0", 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.2.0", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: { menuPanel: ["cdkContextMenuTriggerFor", "menuPanel"], disabled: ["cdkContextMenuDisabled", "disabled"] }, outputs: { opened: "cdkContextMenuOpened", closed: "cdkContextMenuClosed" }, host: { listeners: { "contextmenu": "_openOnContextMenu($event)" } }, providers: [
+CdkContextMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkContextMenuTrigger, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: ContextMenuTracker }, { token: MENU_STACK }, { token: CDK_CONTEXT_MENU_DEFAULT_OPTIONS }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkContextMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: { _menuTemplateRef: ["cdkContextMenuTriggerFor", "_menuTemplateRef"], 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.2.0", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
+        { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
+        { provide: MENU_STACK, useClass: MenuStack },
+    ], exportAs: ["cdkContextMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkContextMenuTriggerFor]',
@@ -2064,16 +2006,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         // 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 } },
+                        { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
+                        { provide: MENU_STACK, useClass: MenuStack },
                     ],
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: ContextMenuTracker }, { type: undefined, decorators: [{
+        return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: ContextMenuTracker }, { type: MenuStack, decorators: [{
+                        type: Inject,
+                        args: [MENU_STACK]
+                    }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [CDK_CONTEXT_MENU_DEFAULT_OPTIONS]
-                    }] }, { type: i2.Directionality, decorators: [{
+                    }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }];
-    }, propDecorators: { menuPanel: [{
+    }, propDecorators: { _menuTemplateRef: [{
                 type: Input,
                 args: ['cdkContextMenuTriggerFor']
             }], opened: [{
@@ -2097,7 +2044,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
 const EXPORTED_DECLARATIONS = [
     CdkMenuBar,
     CdkMenu,
-    CdkMenuPanel,
     CdkMenuItem,
     CdkMenuItemRadio,
     CdkMenuItemCheckbox,
@@ -2108,10 +2054,9 @@ const EXPORTED_DECLARATIONS = [
 ];
 class CdkMenuModule {
 }
-CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuModule, declarations: [CdkMenuBar,
+CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, declarations: [CdkMenuBar,
         CdkMenu,
-        CdkMenuPanel,
         CdkMenuItem,
         CdkMenuItemRadio,
         CdkMenuItemCheckbox,
@@ -2120,7 +2065,6 @@ CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         CdkContextMenuTrigger,
         CdkTargetMenuAim], imports: [OverlayModule], exports: [CdkMenuBar,
         CdkMenu,
-        CdkMenuPanel,
         CdkMenuItem,
         CdkMenuItemRadio,
         CdkMenuItemCheckbox,
@@ -2128,8 +2072,8 @@ CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         CdkMenuGroup,
         CdkContextMenuTrigger,
         CdkTargetMenuAim] });
-CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuModule, decorators: [{
+CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayModule],
@@ -2158,5 +2102,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  * 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 };
+export { CDK_CONTEXT_MENU_DEFAULT_OPTIONS, CDK_MENU, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemTrigger, CdkMenuModule, CdkTargetMenuAim, ContextMenuTracker, MENU_AIM, MENU_STACK, MENU_TRIGGER, MenuStack, MenuTrigger, TargetMenuAim, isClickInsideMenuOverlay };
 //# sourceMappingURL=menu.mjs.map