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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/esm2020/column-resize/column-resize-directives/column-resize-flex.mjs +4 -4
  2. package/esm2020/column-resize/column-resize-directives/column-resize.mjs +4 -4
  3. package/esm2020/column-resize/column-resize-directives/default-enabled-column-resize-flex.mjs +4 -4
  4. package/esm2020/column-resize/column-resize-directives/default-enabled-column-resize.mjs +4 -4
  5. package/esm2020/column-resize/column-resize-module.mjs +9 -9
  6. package/esm2020/column-resize/column-resize-notifier.mjs +7 -7
  7. package/esm2020/column-resize/column-resize.mjs +4 -4
  8. package/esm2020/column-resize/column-size-store.mjs +4 -4
  9. package/esm2020/column-resize/event-dispatcher.mjs +4 -4
  10. package/esm2020/column-resize/overlay-handle.mjs +4 -4
  11. package/esm2020/column-resize/resizable.mjs +4 -4
  12. package/esm2020/column-resize/resize-strategy.mjs +10 -10
  13. package/esm2020/combobox/combobox-module.mjs +5 -5
  14. package/esm2020/combobox/combobox-panel.mjs +4 -4
  15. package/esm2020/combobox/combobox-popup.mjs +4 -4
  16. package/esm2020/combobox/combobox.mjs +4 -4
  17. package/esm2020/dialog/dialog-container.mjs +21 -9
  18. package/esm2020/dialog/dialog-module.mjs +5 -5
  19. package/esm2020/dialog/dialog.mjs +4 -4
  20. package/esm2020/listbox/listbox-module.mjs +5 -5
  21. package/esm2020/listbox/listbox.mjs +7 -7
  22. package/esm2020/menu/context-menu.mjs +36 -56
  23. package/esm2020/menu/menu-aim.mjs +7 -7
  24. package/esm2020/menu/menu-bar.mjs +16 -13
  25. package/esm2020/menu/menu-errors.mjs +1 -9
  26. package/esm2020/menu/menu-group.mjs +4 -4
  27. package/esm2020/menu/menu-item-checkbox.mjs +4 -4
  28. package/esm2020/menu/menu-item-radio.mjs +15 -8
  29. package/esm2020/menu/menu-item-selectable.mjs +4 -4
  30. package/esm2020/menu/menu-item-trigger.mjs +55 -73
  31. package/esm2020/menu/menu-item.mjs +26 -25
  32. package/esm2020/menu/menu-module.mjs +5 -9
  33. package/esm2020/menu/menu-stack.mjs +10 -6
  34. package/esm2020/menu/menu-trigger.mjs +43 -0
  35. package/esm2020/menu/menu.mjs +32 -45
  36. package/esm2020/menu/public-api.mjs +3 -3
  37. package/esm2020/popover-edit/edit-event-dispatcher.mjs +4 -4
  38. package/esm2020/popover-edit/edit-ref.mjs +4 -4
  39. package/esm2020/popover-edit/edit-services.mjs +4 -4
  40. package/esm2020/popover-edit/focus-dispatcher.mjs +4 -4
  41. package/esm2020/popover-edit/focus-escape-notifier.mjs +4 -4
  42. package/esm2020/popover-edit/lens-directives.mjs +10 -10
  43. package/esm2020/popover-edit/popover-edit-module.mjs +5 -5
  44. package/esm2020/popover-edit/popover-edit-position-strategy-factory.mjs +7 -7
  45. package/esm2020/popover-edit/table-directives.mjs +16 -16
  46. package/esm2020/scrolling/auto-size-virtual-scroll.mjs +4 -4
  47. package/esm2020/scrolling/scrolling-module.mjs +5 -5
  48. package/esm2020/selection/row-selection.mjs +4 -4
  49. package/esm2020/selection/select-all.mjs +4 -4
  50. package/esm2020/selection/selection-column.mjs +4 -4
  51. package/esm2020/selection/selection-module.mjs +5 -5
  52. package/esm2020/selection/selection-toggle.mjs +4 -4
  53. package/esm2020/selection/selection.mjs +4 -4
  54. package/esm2020/table-scroll-container/table-scroll-container-module.mjs +5 -5
  55. package/esm2020/table-scroll-container/table-scroll-container.mjs +4 -4
  56. package/esm2020/version.mjs +1 -1
  57. package/fesm2015/cdk-experimental.mjs +1 -1
  58. package/fesm2015/cdk-experimental.mjs.map +1 -1
  59. package/fesm2015/column-resize.mjs +50 -50
  60. package/fesm2015/column-resize.mjs.map +1 -1
  61. package/fesm2015/combobox.mjs +13 -13
  62. package/fesm2015/combobox.mjs.map +1 -1
  63. package/fesm2015/dialog.mjs +27 -15
  64. package/fesm2015/dialog.mjs.map +1 -1
  65. package/fesm2015/listbox.mjs +10 -10
  66. package/fesm2015/listbox.mjs.map +1 -1
  67. package/fesm2015/menu.mjs +313 -369
  68. package/fesm2015/menu.mjs.map +1 -1
  69. package/fesm2015/popover-edit.mjs +49 -49
  70. package/fesm2015/popover-edit.mjs.map +1 -1
  71. package/fesm2015/scrolling.mjs +7 -7
  72. package/fesm2015/scrolling.mjs.map +1 -1
  73. package/fesm2015/selection.mjs +19 -19
  74. package/fesm2015/selection.mjs.map +1 -1
  75. package/fesm2015/table-scroll-container.mjs +7 -7
  76. package/fesm2015/table-scroll-container.mjs.map +1 -1
  77. package/fesm2020/cdk-experimental.mjs +1 -1
  78. package/fesm2020/cdk-experimental.mjs.map +1 -1
  79. package/fesm2020/column-resize.mjs +50 -50
  80. package/fesm2020/column-resize.mjs.map +1 -1
  81. package/fesm2020/combobox.mjs +13 -13
  82. package/fesm2020/combobox.mjs.map +1 -1
  83. package/fesm2020/dialog.mjs +27 -15
  84. package/fesm2020/dialog.mjs.map +1 -1
  85. package/fesm2020/listbox.mjs +10 -10
  86. package/fesm2020/listbox.mjs.map +1 -1
  87. package/fesm2020/menu.mjs +218 -269
  88. package/fesm2020/menu.mjs.map +1 -1
  89. package/fesm2020/popover-edit.mjs +49 -49
  90. package/fesm2020/popover-edit.mjs.map +1 -1
  91. package/fesm2020/scrolling.mjs +7 -7
  92. package/fesm2020/scrolling.mjs.map +1 -1
  93. package/fesm2020/selection.mjs +19 -19
  94. package/fesm2020/selection.mjs.map +1 -1
  95. package/fesm2020/table-scroll-container.mjs +7 -7
  96. package/fesm2020/table-scroll-container.mjs.map +1 -1
  97. package/menu/context-menu.d.ts +9 -15
  98. package/menu/menu-bar.d.ts +2 -2
  99. package/menu/menu-errors.d.ts +0 -5
  100. package/menu/menu-item-radio.d.ts +4 -3
  101. package/menu/menu-item-trigger.d.ts +8 -17
  102. package/menu/menu-item.d.ts +5 -5
  103. package/menu/menu-module.d.ts +9 -10
  104. package/menu/menu-stack.d.ts +7 -6
  105. package/menu/menu-trigger.d.ts +24 -0
  106. package/menu/menu.d.ts +7 -23
  107. package/menu/public-api.d.ts +2 -2
  108. package/package.json +3 -3
  109. package/esm2020/menu/menu-panel.mjs +0 -37
  110. package/menu/menu-panel.d.ts +0 -30
package/fesm2020/menu.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, Injectable, Directive, EventEmitter, Optional, Inject, Input, Output, Self, ContentChildren, NgModule } from '@angular/core';
2
+ import { InjectionToken, Injectable, Directive, Injector, Inject, EventEmitter, Optional, SkipSelf, Input, Output, Self, ContentChildren, NgModule } from '@angular/core';
3
3
  import * as i1 from '@angular/cdk/overlay';
4
4
  import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
5
5
  import { FocusKeyManager } from '@angular/cdk/a11y';
6
6
  import { UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, TAB, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
7
- import * as i2 from '@angular/cdk/bidi';
7
+ import * as i1$1 from '@angular/cdk/bidi';
8
8
  import { Subject, fromEvent, merge, defer, partition } from 'rxjs';
9
9
  import { filter, takeUntil, startWith, mergeMap, mapTo, mergeAll, take, switchMap, skip } from 'rxjs/operators';
10
- import * as i1$1 from '@angular/cdk/collections';
10
+ import * as i1$2 from '@angular/cdk/collections';
11
11
  import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
12
12
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
13
13
  import { TemplatePortal } from '@angular/cdk/portal';
@@ -29,6 +29,8 @@ const CDK_MENU = new InjectionToken('cdk-menu');
29
29
  * Use of this source code is governed by an MIT-style license that can be
30
30
  * found in the LICENSE file at https://angular.io/license
31
31
  */
32
+ /** Injection token used for an implementation of MenuStack. */
33
+ const MENU_STACK = new InjectionToken('cdk-menu-stack');
32
34
  /**
33
35
  * MenuStack allows subscribers to listen for close events (when a MenuStackItem is popped off
34
36
  * of the stack) in order to perform closing actions. Upon the MenuStack being empty it emits
@@ -121,11 +123,11 @@ class MenuStack {
121
123
  return this._elements[this._elements.length - 1];
122
124
  }
123
125
  }
124
- /** NoopMenuStack is a placeholder MenuStack used for inline menus. */
125
- class NoopMenuStack extends MenuStack {
126
- /** Noop push - does not add elements to the MenuStack. */
127
- push(_) { }
128
- }
126
+ MenuStack.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
127
+ MenuStack.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack });
128
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack, decorators: [{
129
+ type: Injectable
130
+ }] });
129
131
 
130
132
  /**
131
133
  * @license
@@ -134,14 +136,6 @@ class NoopMenuStack extends MenuStack {
134
136
  * Use of this source code is governed by an MIT-style license that can be
135
137
  * found in the LICENSE file at https://angular.io/license
136
138
  */
137
- /**
138
- * Throws an exception when a menu panel already has a menu stack.
139
- * @docs-private
140
- */
141
- function throwExistingMenuStackError() {
142
- throw Error('CdkMenuPanel is already referenced by different CdkMenuTrigger. Ensure that a menu is' +
143
- ' opened by a single trigger only.');
144
- }
145
139
  /**
146
140
  * Throws an exception when an instance of the PointerFocusTracker is not provided.
147
141
  * @docs-private
@@ -329,9 +323,9 @@ class TargetMenuAim {
329
323
  this._destroyed.complete();
330
324
  }
331
325
  }
332
- TargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TargetMenuAim, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
333
- TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TargetMenuAim });
334
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TargetMenuAim, decorators: [{
326
+ 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 });
327
+ TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: TargetMenuAim });
328
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: TargetMenuAim, decorators: [{
335
329
  type: Injectable
336
330
  }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
337
331
  /**
@@ -340,9 +334,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
340
334
  */
341
335
  class CdkTargetMenuAim {
342
336
  }
343
- CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
344
- 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 });
345
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
337
+ CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
338
+ 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 });
339
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
346
340
  type: Directive,
347
341
  args: [{
348
342
  selector: '[cdkTargetMenuAim]',
@@ -351,6 +345,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
351
345
  }]
352
346
  }] });
353
347
 
348
+ /**
349
+ * @license
350
+ * Copyright Google LLC All Rights Reserved.
351
+ *
352
+ * Use of this source code is governed by an MIT-style license that can be
353
+ * found in the LICENSE file at https://angular.io/license
354
+ */
355
+ /** Injection token used for an implementation of MenuStack. */
356
+ const MENU_TRIGGER = new InjectionToken('cdk-menu-trigger');
357
+ class MenuTrigger {
358
+ constructor(injector, menuStack) {
359
+ this.injector = injector;
360
+ this.menuStack = menuStack;
361
+ }
362
+ getChildMenuInjector() {
363
+ this._childMenuInjector =
364
+ this._childMenuInjector ||
365
+ Injector.create({
366
+ providers: [
367
+ { provide: MENU_TRIGGER, useValue: this },
368
+ { provide: MENU_STACK, useValue: this.menuStack },
369
+ ],
370
+ parent: this.injector,
371
+ });
372
+ return this._childMenuInjector;
373
+ }
374
+ registerChildMenu(child) {
375
+ this.childMenu = child;
376
+ }
377
+ }
378
+ 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 });
379
+ MenuTrigger.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuTrigger });
380
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuTrigger, decorators: [{
381
+ type: Injectable
382
+ }], ctorParameters: function () { return [{ type: i0.Injector }, { type: MenuStack, decorators: [{
383
+ type: Inject,
384
+ args: [MENU_STACK]
385
+ }] }]; } });
386
+
354
387
  /**
355
388
  * @license
356
389
  * Copyright Google LLC All Rights Reserved.
@@ -382,8 +415,9 @@ function isClickInsideMenuOverlay(target) {
382
415
  * The directive must be placed along with the `cdkMenuItem` directive in order to enable full
383
416
  * functionality.
384
417
  */
385
- class CdkMenuItemTrigger {
386
- constructor(_elementRef, _viewContainerRef, _overlay, _ngZone, _parentMenu, _menuAim, _directionality) {
418
+ class CdkMenuItemTrigger extends MenuTrigger {
419
+ constructor(injector, _elementRef, _viewContainerRef, _overlay, _ngZone, menuStack, _parentMenu, _menuAim, _directionality) {
420
+ super(injector, menuStack);
387
421
  this._elementRef = _elementRef;
388
422
  this._viewContainerRef = _viewContainerRef;
389
423
  this._overlay = _overlay;
@@ -395,8 +429,6 @@ class CdkMenuItemTrigger {
395
429
  this.opened = new EventEmitter();
396
430
  /** Emits when the attached menu is requested to close */
397
431
  this.closed = new EventEmitter();
398
- /** The menu stack for this trigger and its sub-menus. */
399
- this._menuStack = new MenuStack();
400
432
  /** A reference to the overlay which manages the triggered menu */
401
433
  this._overlayRef = null;
402
434
  /** Emits when this trigger is destroyed. */
@@ -406,22 +438,6 @@ class CdkMenuItemTrigger {
406
438
  this._registerCloseHandler();
407
439
  this._subscribeToMouseEnter();
408
440
  }
409
- /** Template reference variable to the menu this trigger opens */
410
- get menuPanel() {
411
- return this._menuPanel;
412
- }
413
- set menuPanel(panel) {
414
- // If the provided panel already has a stack, that means it already has a trigger configured.
415
- // Note however that there are some edge cases where two triggers **may** share the same menu,
416
- // e.g. two triggers in two separate menus.
417
- if ((typeof ngDevMode === 'undefined' || ngDevMode) && panel?._menuStack) {
418
- throwExistingMenuStackError();
419
- }
420
- this._menuPanel = panel;
421
- if (this._menuPanel) {
422
- this._menuPanel._menuStack = this._getMenuStack();
423
- }
424
- }
425
441
  /** Open/close the attached menu if the trigger has been configured with one */
426
442
  toggle() {
427
443
  if (this.hasMenu()) {
@@ -447,7 +463,7 @@ class CdkMenuItemTrigger {
447
463
  }
448
464
  /** Return true if the trigger has an attached menu */
449
465
  hasMenu() {
450
- return !!this.menuPanel;
466
+ return !!this._menuTemplateRef;
451
467
  }
452
468
  /** Whether the menu this button is a trigger for is open */
453
469
  isMenuOpen() {
@@ -458,7 +474,7 @@ class CdkMenuItemTrigger {
458
474
  * @return the menu if it is open, otherwise undefined.
459
475
  */
460
476
  getMenu() {
461
- return this.menuPanel?._menu;
477
+ return this.childMenu;
462
478
  }
463
479
  /**
464
480
  * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
@@ -472,7 +488,7 @@ class CdkMenuItemTrigger {
472
488
  });
473
489
  this._ngZone.runOutsideAngular(() => {
474
490
  fromEvent(this._elementRef.nativeElement, 'mouseenter')
475
- .pipe(filter(() => !this._getMenuStack()?.isEmpty() && !this.isMenuOpen()), takeUntil(this._destroyed))
491
+ .pipe(filter(() => !this.menuStack.isEmpty() && !this.isMenuOpen()), takeUntil(this._destroyed))
476
492
  .subscribe(() => {
477
493
  if (this._menuAim) {
478
494
  this._menuAim.toggle(toggleMenus);
@@ -495,17 +511,17 @@ class CdkMenuItemTrigger {
495
511
  case ENTER:
496
512
  event.preventDefault();
497
513
  this.toggle();
498
- this.menuPanel?._menu?.focusFirstItem('keyboard');
514
+ this.childMenu?.focusFirstItem('keyboard');
499
515
  break;
500
516
  case RIGHT_ARROW:
501
517
  if (this._parentMenu && this._isParentVertical()) {
502
518
  event.preventDefault();
503
519
  if (this._directionality?.value === 'rtl') {
504
- this._getMenuStack().close(this._parentMenu, 2 /* currentItem */);
520
+ this.menuStack.close(this._parentMenu, 2 /* currentItem */);
505
521
  }
506
522
  else {
507
523
  this.openMenu();
508
- this.menuPanel?._menu?.focusFirstItem('keyboard');
524
+ this.childMenu?.focusFirstItem('keyboard');
509
525
  }
510
526
  }
511
527
  break;
@@ -514,10 +530,10 @@ class CdkMenuItemTrigger {
514
530
  event.preventDefault();
515
531
  if (this._directionality?.value === 'rtl') {
516
532
  this.openMenu();
517
- this.menuPanel?._menu?.focusFirstItem('keyboard');
533
+ this.childMenu?.focusFirstItem('keyboard');
518
534
  }
519
535
  else {
520
- this._getMenuStack().close(this._parentMenu, 2 /* currentItem */);
536
+ this.menuStack.close(this._parentMenu, 2 /* currentItem */);
521
537
  }
522
538
  }
523
539
  break;
@@ -527,8 +543,8 @@ class CdkMenuItemTrigger {
527
543
  event.preventDefault();
528
544
  this.openMenu();
529
545
  keyCode === DOWN_ARROW
530
- ? this.menuPanel?._menu?.focusFirstItem('keyboard')
531
- : this.menuPanel?._menu?.focusLastItem('keyboard');
546
+ ? this.childMenu?.focusFirstItem('keyboard')
547
+ : this.childMenu?.focusLastItem('keyboard');
532
548
  }
533
549
  break;
534
550
  }
@@ -536,17 +552,17 @@ class CdkMenuItemTrigger {
536
552
  /** Close out any sibling menu trigger menus. */
537
553
  _closeSiblingTriggers() {
538
554
  if (this._parentMenu) {
539
- const menuStack = this._getMenuStack();
540
555
  // If nothing was removed from the stack and the last element is not the parent item
541
556
  // that means that the parent menu is a menu bar since we don't put the menu bar on the
542
557
  // stack
543
- const isParentMenuBar = !menuStack.closeSubMenuOf(this._parentMenu) && menuStack.peek() !== this._parentMenu;
558
+ const isParentMenuBar = !this.menuStack.closeSubMenuOf(this._parentMenu) &&
559
+ this.menuStack.peek() !== this._parentMenu;
544
560
  if (isParentMenuBar) {
545
- menuStack.closeAll();
561
+ this.menuStack.closeAll();
546
562
  }
547
563
  }
548
564
  else {
549
- this._getMenuStack().closeAll();
565
+ this.menuStack.closeAll();
550
566
  }
551
567
  }
552
568
  /** Get the configuration object used to create the overlay */
@@ -586,11 +602,11 @@ class CdkMenuItemTrigger {
586
602
  * content to change dynamically and be reflected in the application.
587
603
  */
588
604
  _getPortal() {
589
- const hasMenuContentChanged = this.menuPanel?._templateRef !== this._panelContent?.templateRef;
590
- if (this.menuPanel && (!this._panelContent || hasMenuContentChanged)) {
591
- this._panelContent = new TemplatePortal(this.menuPanel._templateRef, this._viewContainerRef);
605
+ const hasMenuContentChanged = this._menuTemplateRef !== this._menuPortal?.templateRef;
606
+ if (this._menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {
607
+ this._menuPortal = new TemplatePortal(this._menuTemplateRef, this._viewContainerRef, undefined, this.getChildMenuInjector());
592
608
  }
593
- return this._panelContent;
609
+ return this._menuPortal;
594
610
  }
595
611
  /**
596
612
  * @return true if if the enclosing parent menu is configured in a vertical orientation.
@@ -604,38 +620,18 @@ class CdkMenuItemTrigger {
604
620
  */
605
621
  _registerCloseHandler() {
606
622
  if (!this._parentMenu) {
607
- this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
608
- if (item === this._menuPanel?._menu) {
623
+ this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
624
+ if (item === this.childMenu) {
609
625
  this.closeMenu();
610
626
  }
611
627
  });
612
628
  }
613
629
  }
614
- /** Get the menu stack for this trigger - either from the parent or this trigger. */
615
- _getMenuStack() {
616
- // We use a function since at the construction of the MenuItemTrigger the parent Menu won't have
617
- // its menu stack set. Therefore we need to reference the menu stack from the parent each time
618
- // we want to use it.
619
- return this._parentMenu?._menuStack || this._menuStack;
620
- }
621
630
  ngOnDestroy() {
622
631
  this._destroyOverlay();
623
- this._resetPanelMenuStack();
624
632
  this._destroyed.next();
625
633
  this._destroyed.complete();
626
634
  }
627
- /** Set the menu panels menu stack back to null. */
628
- _resetPanelMenuStack() {
629
- // If a CdkMenuTrigger is placed in a submenu, each time the trigger is rendered (its parent
630
- // menu is opened) the panel setter for CdkMenuPanel is called. From the first render onward,
631
- // the attached CdkMenuPanel has the MenuStack set. Since we throw an error if a panel already
632
- // has a stack set, we want to reset the attached stack here to prevent the error from being
633
- // thrown if the trigger re-configures its attached panel (in the case where there is a 1:1
634
- // relationship between the panel and trigger).
635
- if (this._menuPanel) {
636
- this._menuPanel._menuStack = null;
637
- }
638
- }
639
635
  /**
640
636
  * Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
641
637
  * click occurs outside the menus.
@@ -647,7 +643,7 @@ class CdkMenuItemTrigger {
647
643
  .pipe(takeUntil(this._stopOutsideClicksListener))
648
644
  .subscribe(event => {
649
645
  if (!isClickInsideMenuOverlay(event.target)) {
650
- this._getMenuStack().closeAll();
646
+ this.menuStack.closeAll();
651
647
  }
652
648
  });
653
649
  }
@@ -660,9 +656,16 @@ class CdkMenuItemTrigger {
660
656
  }
661
657
  }
662
658
  }
663
- 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 });
664
- 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 });
665
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
659
+ 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 });
660
+ 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: [
661
+ { provide: MENU_TRIGGER, useExisting: CdkMenuItemTrigger },
662
+ {
663
+ provide: MENU_STACK,
664
+ deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
665
+ useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
666
+ },
667
+ ], exportAs: ["cdkMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
668
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
666
669
  type: Directive,
667
670
  args: [{
668
671
  selector: '[cdkMenuTriggerFor]',
@@ -674,8 +677,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
674
677
  'aria-haspopup': 'menu',
675
678
  '[attr.aria-expanded]': 'isMenuOpen()',
676
679
  },
680
+ providers: [
681
+ { provide: MENU_TRIGGER, useExisting: CdkMenuItemTrigger },
682
+ {
683
+ provide: MENU_STACK,
684
+ deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
685
+ useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
686
+ },
687
+ ],
677
688
  }]
678
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: i0.NgZone }, { type: undefined, decorators: [{
689
+ }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
690
+ type: Inject,
691
+ args: [MENU_STACK]
692
+ }] }, { type: undefined, decorators: [{
679
693
  type: Optional
680
694
  }, {
681
695
  type: Inject,
@@ -685,9 +699,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
685
699
  }, {
686
700
  type: Inject,
687
701
  args: [MENU_AIM]
688
- }] }, { type: i2.Directionality, decorators: [{
702
+ }] }, { type: i1$1.Directionality, decorators: [{
689
703
  type: Optional
690
- }] }]; }, propDecorators: { menuPanel: [{
704
+ }] }]; }, propDecorators: { _menuTemplateRef: [{
691
705
  type: Input,
692
706
  args: ['cdkMenuTriggerFor']
693
707
  }], opened: [{
@@ -718,13 +732,14 @@ function removeIcons(element) {
718
732
  * behavior when clicked.
719
733
  */
720
734
  class CdkMenuItem {
721
- constructor(_elementRef, _ngZone, _parentMenu, _menuAim, _dir,
735
+ constructor(_elementRef, _ngZone, _menuStack, _parentMenu, _menuAim, _dir,
722
736
  /** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
723
737
  // `CdkMenuItem` is commonly used in combination with a `CdkMenuItemTrigger`.
724
738
  // tslint:disable-next-line: lightweight-tokens
725
739
  _menuTrigger) {
726
740
  this._elementRef = _elementRef;
727
741
  this._ngZone = _ngZone;
742
+ this._menuStack = _menuStack;
728
743
  this._parentMenu = _parentMenu;
729
744
  this._menuAim = _menuAim;
730
745
  this._dir = _dir;
@@ -773,7 +788,7 @@ class CdkMenuItem {
773
788
  return;
774
789
  }
775
790
  // don't set the tabindex if there are no open sibling or parent menus
776
- if (!event || !this._getMenuStack()?.isEmpty()) {
791
+ if (!event || !this._menuStack?.isEmpty()) {
777
792
  this._tabindex = 0;
778
793
  }
779
794
  }
@@ -788,7 +803,7 @@ class CdkMenuItem {
788
803
  trigger() {
789
804
  if (!this.disabled && !this.hasMenu()) {
790
805
  this.triggered.next();
791
- this._getMenuStack()?.closeAll();
806
+ this._menuStack?.closeAll();
792
807
  }
793
808
  }
794
809
  /** Whether the menu item opens a menu. */
@@ -835,16 +850,16 @@ class CdkMenuItem {
835
850
  if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
836
851
  event.preventDefault();
837
852
  this._dir?.value === 'rtl'
838
- ? this._getMenuStack()?.close(this._parentMenu, 1 /* previousItem */)
839
- : this._getMenuStack()?.closeAll(0 /* nextItem */);
853
+ ? this._menuStack?.close(this._parentMenu, 1 /* previousItem */)
854
+ : this._menuStack?.closeAll(0 /* nextItem */);
840
855
  }
841
856
  break;
842
857
  case LEFT_ARROW:
843
858
  if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
844
859
  event.preventDefault();
845
860
  this._dir?.value === 'rtl'
846
- ? this._getMenuStack()?.closeAll(0 /* nextItem */)
847
- : this._getMenuStack()?.close(this._parentMenu, 1 /* previousItem */);
861
+ ? this._menuStack?.closeAll(0 /* nextItem */)
862
+ : this._menuStack?.close(this._parentMenu, 1 /* previousItem */);
848
863
  }
849
864
  break;
850
865
  }
@@ -855,9 +870,9 @@ class CdkMenuItem {
855
870
  */
856
871
  _setupMouseEnter() {
857
872
  if (!this._isStandaloneItem()) {
858
- const closeOpenSiblings = () => this._ngZone.run(() => this._getMenuStack()?.closeSubMenuOf(this._parentMenu));
873
+ const closeOpenSiblings = () => this._ngZone.run(() => this._menuStack?.closeSubMenuOf(this._parentMenu));
859
874
  this._ngZone.runOutsideAngular(() => fromEvent(this._elementRef.nativeElement, 'mouseenter')
860
- .pipe(filter(() => !this._getMenuStack()?.isEmpty() && !this.hasMenu()), takeUntil(this._destroyed))
875
+ .pipe(filter(() => !this._menuStack?.isEmpty() && !this.hasMenu()), takeUntil(this._destroyed))
861
876
  .subscribe(() => {
862
877
  if (this._menuAim) {
863
878
  this._menuAim.toggle(closeOpenSiblings);
@@ -875,20 +890,13 @@ class CdkMenuItem {
875
890
  _isParentVertical() {
876
891
  return this._parentMenu?.orientation === 'vertical';
877
892
  }
878
- /** Get the MenuStack from the parent menu. */
879
- _getMenuStack() {
880
- // We use a function since at the construction of the MenuItemTrigger the parent Menu won't have
881
- // its menu stack set. Therefore we need to reference the menu stack from the parent each time
882
- // we want to use it.
883
- return this._parentMenu?._menuStack;
884
- }
885
893
  ngOnDestroy() {
886
894
  this._destroyed.next();
887
895
  }
888
896
  }
889
- 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 });
890
- 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 });
891
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItem, decorators: [{
897
+ 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 });
898
+ 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 });
899
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItem, decorators: [{
892
900
  type: Directive,
893
901
  args: [{
894
902
  selector: '[cdkMenuItem]',
@@ -907,7 +915,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
907
915
  '(keydown)': '_onKeydown($event)',
908
916
  },
909
917
  }]
910
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
918
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
919
+ type: Optional
920
+ }, {
921
+ type: Inject,
922
+ args: [MENU_STACK]
923
+ }] }, { type: undefined, decorators: [{
911
924
  type: Optional
912
925
  }, {
913
926
  type: Inject,
@@ -917,7 +930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
917
930
  }, {
918
931
  type: Inject,
919
932
  args: [MENU_AIM]
920
- }] }, { type: i2.Directionality, decorators: [{
933
+ }] }, { type: i1$1.Directionality, decorators: [{
921
934
  type: Optional
922
935
  }] }, { type: CdkMenuItemTrigger, decorators: [{
923
936
  type: Self
@@ -968,9 +981,9 @@ class CdkMenuItemSelectable extends CdkMenuItem {
968
981
  }
969
982
  }
970
983
  }
971
- CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
972
- 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 });
973
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
984
+ CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
985
+ 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 });
986
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
974
987
  type: Directive
975
988
  }], propDecorators: { toggled: [{
976
989
  type: Output,
@@ -1026,9 +1039,9 @@ class CdkMenuGroup {
1026
1039
  this._selectableChanges.complete();
1027
1040
  }
1028
1041
  }
1029
- CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1030
- 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 });
1031
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuGroup, decorators: [{
1042
+ CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1043
+ 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 });
1044
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuGroup, decorators: [{
1032
1045
  type: Directive,
1033
1046
  args: [{
1034
1047
  selector: '[cdkMenuGroup]',
@@ -1046,41 +1059,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
1046
1059
  args: [CdkMenuItemSelectable, { descendants: true }]
1047
1060
  }] } });
1048
1061
 
1049
- /**
1050
- * @license
1051
- * Copyright Google LLC All Rights Reserved.
1052
- *
1053
- * Use of this source code is governed by an MIT-style license that can be
1054
- * found in the LICENSE file at https://angular.io/license
1055
- */
1056
- /**
1057
- * Directive applied to an ng-template which wraps a CdkMenu and provides a reference to the
1058
- * child element it wraps which allows for opening of the CdkMenu in an overlay.
1059
- */
1060
- class CdkMenuPanel {
1061
- constructor(_templateRef) {
1062
- this._templateRef = _templateRef;
1063
- }
1064
- /**
1065
- * Set the Menu component on the menu panel. Since we cannot use ContentChild to fetch the
1066
- * child Menu component, the child Menu must register its self with the parent MenuPanel.
1067
- */
1068
- _registerMenu(child) {
1069
- this._menu = child;
1070
- // The ideal solution would be to affect the CdkMenuPanel injector from the CdkMenuTrigger and
1071
- // inject the menu stack reference into the child menu and menu items, however this isn't
1072
- // possible at this time.
1073
- this._menu._menuStack = this._menuStack;
1074
- this._menuStack?.push(child);
1075
- }
1076
- }
1077
- CdkMenuPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuPanel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1078
- CdkMenuPanel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: CdkMenuPanel, selector: "ng-template[cdkMenuPanel]", exportAs: ["cdkMenuPanel"], ngImport: i0 });
1079
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuPanel, decorators: [{
1080
- type: Directive,
1081
- args: [{ selector: 'ng-template[cdkMenuPanel]', exportAs: 'cdkMenuPanel' }]
1082
- }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
1083
-
1084
1062
  /**
1085
1063
  * @license
1086
1064
  * Copyright Google LLC All Rights Reserved.
@@ -1143,16 +1121,14 @@ class PointerFocusTracker {
1143
1121
  * It also acts as a RadioGroup for elements marked with role `menuitemradio`.
1144
1122
  */
1145
1123
  class CdkMenu extends CdkMenuGroup {
1146
- constructor(_ngZone, _elementRef, _menuAim, _dir,
1147
- // `CdkMenuPanel` is always used in combination with a `CdkMenu`.
1148
- // tslint:disable-next-line: lightweight-tokens
1149
- _menuPanel) {
1124
+ constructor(_ngZone, _elementRef, _menuStack, _parentTrigger, _menuAim, _dir) {
1150
1125
  super();
1151
1126
  this._ngZone = _ngZone;
1152
1127
  this._elementRef = _elementRef;
1128
+ this._menuStack = _menuStack;
1129
+ this._parentTrigger = _parentTrigger;
1153
1130
  this._menuAim = _menuAim;
1154
1131
  this._dir = _dir;
1155
- this._menuPanel = _menuPanel;
1156
1132
  /**
1157
1133
  * Sets the aria-orientation attribute and determines where menus will be opened.
1158
1134
  * Does not affect styling/layout.
@@ -1160,14 +1136,10 @@ class CdkMenu extends CdkMenuGroup {
1160
1136
  this.orientation = 'vertical';
1161
1137
  /** Event emitted when the menu is closed. */
1162
1138
  this.closed = new EventEmitter();
1163
- // We provide a default MenuStack implementation in case the menu is an inline menu.
1164
- // For Menus part of a MenuBar nested within a MenuPanel this will be overwritten
1165
- // to the correct parent MenuStack.
1166
- /** Track the Menus making up the open menu stack. */
1167
- this._menuStack = new NoopMenuStack();
1168
1139
  }
1169
1140
  ngOnInit() {
1170
- this._registerWithParentPanel();
1141
+ this._menuStack?.push(this);
1142
+ this._parentTrigger?.registerChildMenu(this);
1171
1143
  }
1172
1144
  ngAfterContentInit() {
1173
1145
  super.ngAfterContentInit();
@@ -1211,27 +1183,16 @@ class CdkMenu extends CdkMenuGroup {
1211
1183
  case ESCAPE:
1212
1184
  if (!hasModifierKey(event)) {
1213
1185
  event.preventDefault();
1214
- this._menuStack.close(this, 2 /* currentItem */);
1186
+ this._menuStack?.close(this, 2 /* currentItem */);
1215
1187
  }
1216
1188
  break;
1217
1189
  case TAB:
1218
- this._menuStack.closeAll();
1190
+ this._menuStack?.closeAll();
1219
1191
  break;
1220
1192
  default:
1221
1193
  keyManager.onKeydown(event);
1222
1194
  }
1223
1195
  }
1224
- /** Register this menu with its enclosing parent menu panel */
1225
- _registerWithParentPanel() {
1226
- this._getMenuPanel()?._registerMenu(this);
1227
- }
1228
- /**
1229
- * Get the enclosing CdkMenuPanel defaulting to the injected reference over the developer
1230
- * provided reference.
1231
- */
1232
- _getMenuPanel() {
1233
- return this._menuPanel || this._explicitPanel;
1234
- }
1235
1196
  /**
1236
1197
  * Complete the change emitter if there are any nested MenuGroups or register to complete the
1237
1198
  * change emitter if a MenuGroup is rendered at some point
@@ -1279,10 +1240,10 @@ class CdkMenu extends CdkMenuGroup {
1279
1240
  }
1280
1241
  /** Subscribe to the MenuStack close and empty observables. */
1281
1242
  _subscribeToMenuStack() {
1282
- this._menuStack.closed
1243
+ this._menuStack?.closed
1283
1244
  .pipe(takeUntil(this.closed))
1284
1245
  .subscribe(item => this._closeOpenMenu(item));
1285
- this._menuStack.emptied
1246
+ this._menuStack?.emptied
1286
1247
  .pipe(takeUntil(this.closed))
1287
1248
  .subscribe(event => this._toggleMenuFocus(event));
1288
1249
  }
@@ -1347,9 +1308,7 @@ class CdkMenu extends CdkMenuGroup {
1347
1308
  * always visible in the dom.
1348
1309
  */
1349
1310
  _isInline() {
1350
- // NoopMenuStack is the default. If this menu is not inline than the NoopMenuStack is replaced
1351
- // automatically.
1352
- return this._menuStack instanceof NoopMenuStack;
1311
+ return !this._menuStack;
1353
1312
  }
1354
1313
  ngOnDestroy() {
1355
1314
  super.ngOnDestroy();
@@ -1362,12 +1321,12 @@ class CdkMenu extends CdkMenuGroup {
1362
1321
  this.closed.complete();
1363
1322
  }
1364
1323
  }
1365
- 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 });
1366
- 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: [
1324
+ 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 });
1325
+ 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: [
1367
1326
  { provide: CdkMenuGroup, useExisting: CdkMenu },
1368
1327
  { provide: CDK_MENU, useExisting: CdkMenu },
1369
1328
  ], queries: [{ propertyName: "_nestedGroups", predicate: CdkMenuGroup, descendants: true }, { propertyName: "_allItems", predicate: CdkMenuItem, descendants: true }], exportAs: ["cdkMenu"], usesInheritance: true, ngImport: i0 });
1370
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenu, decorators: [{
1329
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenu, decorators: [{
1371
1330
  type: Directive,
1372
1331
  args: [{
1373
1332
  selector: '[cdkMenu]',
@@ -1386,16 +1345,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
1386
1345
  { provide: CDK_MENU, useExisting: CdkMenu },
1387
1346
  ],
1388
1347
  }]
1389
- }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
1348
+ }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: MenuStack, decorators: [{
1349
+ type: Optional
1350
+ }, {
1351
+ type: Inject,
1352
+ args: [MENU_STACK]
1353
+ }] }, { type: MenuTrigger, decorators: [{
1354
+ type: Optional
1355
+ }, {
1356
+ type: Inject,
1357
+ args: [MENU_TRIGGER]
1358
+ }] }, { type: undefined, decorators: [{
1390
1359
  type: Self
1391
1360
  }, {
1392
1361
  type: Optional
1393
1362
  }, {
1394
1363
  type: Inject,
1395
1364
  args: [MENU_AIM]
1396
- }] }, { type: i2.Directionality, decorators: [{
1397
- type: Optional
1398
- }] }, { type: CdkMenuPanel, decorators: [{
1365
+ }] }, { type: i1$1.Directionality, decorators: [{
1399
1366
  type: Optional
1400
1367
  }] }]; }, propDecorators: { orientation: [{
1401
1368
  type: Input,
@@ -1408,9 +1375,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
1408
1375
  }], _allItems: [{
1409
1376
  type: ContentChildren,
1410
1377
  args: [CdkMenuItem, { descendants: true }]
1411
- }], _explicitPanel: [{
1412
- type: Input,
1413
- args: ['cdkMenuPanel']
1414
1378
  }] } });
1415
1379
 
1416
1380
  /**
@@ -1427,11 +1391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
1427
1391
  *
1428
1392
  */
1429
1393
  class CdkMenuBar extends CdkMenuGroup {
1430
- constructor(_menuStack, _ngZone, _elementRef, _menuAim, _dir) {
1394
+ constructor(_ngZone, _elementRef, _menuStack, _menuAim, _dir) {
1431
1395
  super();
1432
- this._menuStack = _menuStack;
1433
1396
  this._ngZone = _ngZone;
1434
1397
  this._elementRef = _elementRef;
1398
+ this._menuStack = _menuStack;
1435
1399
  this._menuAim = _menuAim;
1436
1400
  this._dir = _dir;
1437
1401
  /**
@@ -1608,13 +1572,13 @@ class CdkMenuBar extends CdkMenuGroup {
1608
1572
  this._pointerTracker?.destroy();
1609
1573
  }
1610
1574
  }
1611
- 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 });
1612
- 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: [
1575
+ 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 });
1576
+ 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: [
1613
1577
  { provide: CdkMenuGroup, useExisting: CdkMenuBar },
1614
1578
  { provide: CDK_MENU, useExisting: CdkMenuBar },
1615
- { provide: MenuStack, useClass: MenuStack },
1579
+ { provide: MENU_STACK, useClass: MenuStack },
1616
1580
  ], queries: [{ propertyName: "_allItems", predicate: CdkMenuItem, descendants: true }], exportAs: ["cdkMenuBar"], usesInheritance: true, ngImport: i0 });
1617
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuBar, decorators: [{
1581
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuBar, decorators: [{
1618
1582
  type: Directive,
1619
1583
  args: [{
1620
1584
  selector: '[cdkMenuBar]',
@@ -1630,17 +1594,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
1630
1594
  providers: [
1631
1595
  { provide: CdkMenuGroup, useExisting: CdkMenuBar },
1632
1596
  { provide: CDK_MENU, useExisting: CdkMenuBar },
1633
- { provide: MenuStack, useClass: MenuStack },
1597
+ { provide: MENU_STACK, useClass: MenuStack },
1634
1598
  ],
1635
1599
  }]
1636
- }], ctorParameters: function () { return [{ type: MenuStack }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
1600
+ }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: MenuStack, decorators: [{
1601
+ type: Inject,
1602
+ args: [MENU_STACK]
1603
+ }] }, { type: undefined, decorators: [{
1637
1604
  type: Self
1638
1605
  }, {
1639
1606
  type: Optional
1640
1607
  }, {
1641
1608
  type: Inject,
1642
1609
  args: [MENU_AIM]
1643
- }] }, { type: i2.Directionality, decorators: [{
1610
+ }] }, { type: i1$1.Directionality, decorators: [{
1644
1611
  type: Optional
1645
1612
  }] }]; }, propDecorators: { orientation: [{
1646
1613
  type: Input,
@@ -1663,12 +1630,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
1663
1630
  * or `CdkMenuGroup` comprise a radio group with unique selection enforced.
1664
1631
  */
1665
1632
  class CdkMenuItemRadio extends CdkMenuItemSelectable {
1666
- constructor(_selectionDispatcher, element, ngZone, parentMenu, menuAim, dir,
1633
+ constructor(_selectionDispatcher, element, ngZone, menuStack, parentMenu, menuAim, dir,
1667
1634
  /** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
1668
1635
  // `CdkMenuItemRadio` is commonly used in combination with a `CdkMenuItemTrigger`.
1669
1636
  // tslint:disable-next-line: lightweight-tokens
1670
1637
  menuTrigger) {
1671
- super(element, ngZone, parentMenu, menuAim, dir, menuTrigger);
1638
+ super(element, ngZone, menuStack, parentMenu, menuAim, dir, menuTrigger);
1672
1639
  this._selectionDispatcher = _selectionDispatcher;
1673
1640
  this._registerDispatcherListener();
1674
1641
  }
@@ -1688,12 +1655,12 @@ class CdkMenuItemRadio extends CdkMenuItemSelectable {
1688
1655
  this._removeDispatcherListener();
1689
1656
  }
1690
1657
  }
1691
- 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 });
1692
- 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: [
1658
+ 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 });
1659
+ 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: [
1693
1660
  { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
1694
1661
  { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
1695
1662
  ], exportAs: ["cdkMenuItemRadio"], usesInheritance: true, ngImport: i0 });
1696
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
1663
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
1697
1664
  type: Directive,
1698
1665
  args: [{
1699
1666
  selector: '[cdkMenuItemRadio]',
@@ -1710,7 +1677,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
1710
1677
  { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
1711
1678
  ],
1712
1679
  }]
1713
- }], ctorParameters: function () { return [{ type: i1$1.UniqueSelectionDispatcher }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
1680
+ }], ctorParameters: function () { return [{ type: i1$2.UniqueSelectionDispatcher }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
1681
+ type: Optional
1682
+ }, {
1683
+ type: Inject,
1684
+ args: [MENU_STACK]
1685
+ }] }, { type: undefined, decorators: [{
1714
1686
  type: Optional
1715
1687
  }, {
1716
1688
  type: Inject,
@@ -1720,7 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
1720
1692
  }, {
1721
1693
  type: Inject,
1722
1694
  args: [MENU_AIM]
1723
- }] }, { type: i2.Directionality, decorators: [{
1695
+ }] }, { type: i1$1.Directionality, decorators: [{
1724
1696
  type: Optional
1725
1697
  }] }, { type: CdkMenuItemTrigger, decorators: [{
1726
1698
  type: Self
@@ -1748,12 +1720,12 @@ class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
1748
1720
  }
1749
1721
  }
1750
1722
  }
1751
- CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
1752
- 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: [
1723
+ CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
1724
+ 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: [
1753
1725
  { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
1754
1726
  { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
1755
1727
  ], exportAs: ["cdkMenuItemCheckbox"], usesInheritance: true, ngImport: i0 });
1756
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
1728
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
1757
1729
  type: Directive,
1758
1730
  args: [{
1759
1731
  selector: '[cdkMenuItemCheckbox]',
@@ -1792,9 +1764,9 @@ class ContextMenuTracker {
1792
1764
  }
1793
1765
  }
1794
1766
  }
1795
- ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1796
- ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
1797
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ContextMenuTracker, decorators: [{
1767
+ ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1768
+ ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
1769
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, decorators: [{
1798
1770
  type: Injectable,
1799
1771
  args: [{ providedIn: 'root' }]
1800
1772
  }] });
@@ -1805,8 +1777,9 @@ const CDK_CONTEXT_MENU_DEFAULT_OPTIONS = new InjectionToken('cdk-context-menu-de
1805
1777
  * right-clicks within that element. It is aware of nested Context Menus and the lowest level
1806
1778
  * non-disabled context menu will trigger.
1807
1779
  */
1808
- class CdkContextMenuTrigger {
1809
- constructor(_viewContainerRef, _overlay, _contextMenuTracker, _options, _directionality) {
1780
+ class CdkContextMenuTrigger extends MenuTrigger {
1781
+ constructor(injector, _viewContainerRef, _overlay, _contextMenuTracker, menuStack, _options, _directionality) {
1782
+ super(injector, menuStack);
1810
1783
  this._viewContainerRef = _viewContainerRef;
1811
1784
  this._overlay = _overlay;
1812
1785
  this._contextMenuTracker = _contextMenuTracker;
@@ -1821,25 +1794,10 @@ class CdkContextMenuTrigger {
1821
1794
  this._overlayRef = null;
1822
1795
  /** Emits when the element is destroyed. */
1823
1796
  this._destroyed = new Subject();
1824
- /** The menu stack for this trigger and its associated menus. */
1825
- this._menuStack = new MenuStack();
1826
1797
  /** Emits when the outside pointer events listener on the overlay should be stopped. */
1827
1798
  this._stopOutsideClicksListener = merge(this.closed, this._destroyed);
1828
1799
  this._setMenuStackListener();
1829
1800
  }
1830
- /** Template reference variable to the menu to open on right click. */
1831
- get menuPanel() {
1832
- return this._menuPanel;
1833
- }
1834
- set menuPanel(panel) {
1835
- if ((typeof ngDevMode === 'undefined' || ngDevMode) && panel._menuStack) {
1836
- throwExistingMenuStackError();
1837
- }
1838
- this._menuPanel = panel;
1839
- if (this._menuPanel) {
1840
- this._menuPanel._menuStack = this._menuStack;
1841
- }
1842
- }
1843
1801
  /** Whether the context menu should be disabled. */
1844
1802
  get disabled() {
1845
1803
  return this._disabled;
@@ -1861,7 +1819,7 @@ class CdkContextMenuTrigger {
1861
1819
  else if (this.isOpen()) {
1862
1820
  // since we're moving this menu we need to close any submenus first otherwise they end up
1863
1821
  // disconnected from this one.
1864
- this._menuStack.closeSubMenuOf(this._menuPanel._menu);
1822
+ this.menuStack.closeSubMenuOf(this.childMenu);
1865
1823
  this._overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
1866
1824
  this._overlayRef.updatePosition();
1867
1825
  }
@@ -1880,7 +1838,7 @@ class CdkContextMenuTrigger {
1880
1838
  }
1881
1839
  /** Close the opened menu. */
1882
1840
  close() {
1883
- this._menuStack.closeAll();
1841
+ this.menuStack.closeAll();
1884
1842
  }
1885
1843
  /**
1886
1844
  * Open the context menu and close any previously open menus.
@@ -1898,13 +1856,13 @@ class CdkContextMenuTrigger {
1898
1856
  this._open({ x: event.clientX, y: event.clientY }, true);
1899
1857
  // A context menu can be triggered via a mouse right click or a keyboard shortcut.
1900
1858
  if (event.button === 2) {
1901
- this._menuPanel._menu?.focusFirstItem('mouse');
1859
+ this.childMenu?.focusFirstItem('mouse');
1902
1860
  }
1903
1861
  else if (event.button === 0) {
1904
- this._menuPanel._menu?.focusFirstItem('keyboard');
1862
+ this.childMenu?.focusFirstItem('keyboard');
1905
1863
  }
1906
1864
  else {
1907
- this._menuPanel._menu?.focusFirstItem('program');
1865
+ this.childMenu?.focusFirstItem('program');
1908
1866
  }
1909
1867
  }
1910
1868
  }
@@ -1952,16 +1910,16 @@ class CdkContextMenuTrigger {
1952
1910
  * content to change dynamically and be reflected in the application.
1953
1911
  */
1954
1912
  _getMenuContent() {
1955
- const hasMenuContentChanged = this.menuPanel._templateRef !== this._panelContent?.templateRef;
1956
- if (this.menuPanel && (!this._panelContent || hasMenuContentChanged)) {
1957
- this._panelContent = new TemplatePortal(this.menuPanel._templateRef, this._viewContainerRef);
1913
+ const hasMenuContentChanged = this._menuTemplateRef !== this._menuPortal?.templateRef;
1914
+ if (this._menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {
1915
+ this._menuPortal = new TemplatePortal(this._menuTemplateRef, this._viewContainerRef, undefined, this.getChildMenuInjector());
1958
1916
  }
1959
- return this._panelContent;
1917
+ return this._menuPortal;
1960
1918
  }
1961
1919
  /** Subscribe to the menu stack close events and close this menu when requested. */
1962
1920
  _setMenuStackListener() {
1963
- this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
1964
- if (item === this._menuPanel._menu && this.isOpen()) {
1921
+ this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
1922
+ if (item === this.childMenu && this.isOpen()) {
1965
1923
  this.closed.next();
1966
1924
  this._overlayRef.detach();
1967
1925
  }
@@ -1982,14 +1940,13 @@ class CdkContextMenuTrigger {
1982
1940
  }
1983
1941
  outsideClicks.pipe(takeUntil(this._stopOutsideClicksListener)).subscribe(event => {
1984
1942
  if (!isClickInsideMenuOverlay(event.target)) {
1985
- this._menuStack.closeAll();
1943
+ this.menuStack.closeAll();
1986
1944
  }
1987
1945
  });
1988
1946
  }
1989
1947
  }
1990
1948
  ngOnDestroy() {
1991
1949
  this._destroyOverlay();
1992
- this._resetPanelMenuStack();
1993
1950
  this._destroyed.next();
1994
1951
  this._destroyed.complete();
1995
1952
  }
@@ -2000,26 +1957,16 @@ class CdkContextMenuTrigger {
2000
1957
  this._overlayRef = null;
2001
1958
  }
2002
1959
  }
2003
- /** Set the menu panels menu stack back to null. */
2004
- _resetPanelMenuStack() {
2005
- // If a ContextMenuTrigger is placed in a conditionally rendered view, each time the trigger is
2006
- // rendered the panel setter for ContextMenuTrigger is called. From the first render onward,
2007
- // the attached CdkMenuPanel has the MenuStack set. Since we throw an error if a panel already
2008
- // has a stack set, we want to reset the attached stack here to prevent the error from being
2009
- // thrown if the trigger re-configures its attached panel (in the case where there is a 1:1
2010
- // relationship between the panel and trigger).
2011
- if (this._menuPanel) {
2012
- this._menuPanel._menuStack = null;
2013
- }
2014
- }
2015
1960
  }
2016
- 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 });
2017
- 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: [
1961
+ 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 });
1962
+ 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: [
2018
1963
  // In cases where the first menu item in the context menu is a trigger the submenu opens on a
2019
1964
  // hover event. Offsetting the opened context menu by 2px prevents this from occurring.
2020
1965
  { provide: CDK_CONTEXT_MENU_DEFAULT_OPTIONS, useValue: { offsetX: 2, offsetY: 2 } },
2021
- ], exportAs: ["cdkContextMenuTriggerFor"], ngImport: i0 });
2022
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
1966
+ { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
1967
+ { provide: MENU_STACK, useClass: MenuStack },
1968
+ ], exportAs: ["cdkContextMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
1969
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
2023
1970
  type: Directive,
2024
1971
  args: [{
2025
1972
  selector: '[cdkContextMenuTriggerFor]',
@@ -2031,14 +1978,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
2031
1978
  // In cases where the first menu item in the context menu is a trigger the submenu opens on a
2032
1979
  // hover event. Offsetting the opened context menu by 2px prevents this from occurring.
2033
1980
  { provide: CDK_CONTEXT_MENU_DEFAULT_OPTIONS, useValue: { offsetX: 2, offsetY: 2 } },
1981
+ { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
1982
+ { provide: MENU_STACK, useClass: MenuStack },
2034
1983
  ],
2035
1984
  }]
2036
- }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: ContextMenuTracker }, { type: undefined, decorators: [{
1985
+ }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: ContextMenuTracker }, { type: MenuStack, decorators: [{
1986
+ type: Inject,
1987
+ args: [MENU_STACK]
1988
+ }] }, { type: undefined, decorators: [{
2037
1989
  type: Inject,
2038
1990
  args: [CDK_CONTEXT_MENU_DEFAULT_OPTIONS]
2039
- }] }, { type: i2.Directionality, decorators: [{
1991
+ }] }, { type: i1$1.Directionality, decorators: [{
2040
1992
  type: Optional
2041
- }] }]; }, propDecorators: { menuPanel: [{
1993
+ }] }]; }, propDecorators: { _menuTemplateRef: [{
2042
1994
  type: Input,
2043
1995
  args: ['cdkContextMenuTriggerFor']
2044
1996
  }], opened: [{
@@ -2062,7 +2014,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
2062
2014
  const EXPORTED_DECLARATIONS = [
2063
2015
  CdkMenuBar,
2064
2016
  CdkMenu,
2065
- CdkMenuPanel,
2066
2017
  CdkMenuItem,
2067
2018
  CdkMenuItemRadio,
2068
2019
  CdkMenuItemCheckbox,
@@ -2073,10 +2024,9 @@ const EXPORTED_DECLARATIONS = [
2073
2024
  ];
2074
2025
  class CdkMenuModule {
2075
2026
  }
2076
- CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2077
- CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuModule, declarations: [CdkMenuBar,
2027
+ CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2028
+ CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, declarations: [CdkMenuBar,
2078
2029
  CdkMenu,
2079
- CdkMenuPanel,
2080
2030
  CdkMenuItem,
2081
2031
  CdkMenuItemRadio,
2082
2032
  CdkMenuItemCheckbox,
@@ -2085,7 +2035,6 @@ CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
2085
2035
  CdkContextMenuTrigger,
2086
2036
  CdkTargetMenuAim], imports: [OverlayModule], exports: [CdkMenuBar,
2087
2037
  CdkMenu,
2088
- CdkMenuPanel,
2089
2038
  CdkMenuItem,
2090
2039
  CdkMenuItemRadio,
2091
2040
  CdkMenuItemCheckbox,
@@ -2093,8 +2042,8 @@ CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
2093
2042
  CdkMenuGroup,
2094
2043
  CdkContextMenuTrigger,
2095
2044
  CdkTargetMenuAim] });
2096
- CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
2097
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: CdkMenuModule, decorators: [{
2045
+ CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
2046
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, decorators: [{
2098
2047
  type: NgModule,
2099
2048
  args: [{
2100
2049
  imports: [OverlayModule],
@@ -2123,5 +2072,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
2123
2072
  * Generated bundle index. Do not edit.
2124
2073
  */
2125
2074
 
2126
- 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 };
2075
+ 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 };
2127
2076
  //# sourceMappingURL=menu.mjs.map