@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.
- package/esm2020/column-resize/column-resize-directives/column-resize-flex.mjs +4 -4
- package/esm2020/column-resize/column-resize-directives/column-resize.mjs +4 -4
- package/esm2020/column-resize/column-resize-directives/default-enabled-column-resize-flex.mjs +4 -4
- package/esm2020/column-resize/column-resize-directives/default-enabled-column-resize.mjs +4 -4
- package/esm2020/column-resize/column-resize-module.mjs +9 -9
- package/esm2020/column-resize/column-resize-notifier.mjs +7 -7
- package/esm2020/column-resize/column-resize.mjs +4 -4
- package/esm2020/column-resize/column-size-store.mjs +4 -4
- package/esm2020/column-resize/event-dispatcher.mjs +4 -4
- package/esm2020/column-resize/overlay-handle.mjs +4 -4
- package/esm2020/column-resize/resizable.mjs +4 -4
- package/esm2020/column-resize/resize-strategy.mjs +10 -10
- package/esm2020/combobox/combobox-module.mjs +5 -5
- package/esm2020/combobox/combobox-panel.mjs +4 -4
- package/esm2020/combobox/combobox-popup.mjs +4 -4
- package/esm2020/combobox/combobox.mjs +4 -4
- package/esm2020/dialog/dialog-container.mjs +21 -9
- package/esm2020/dialog/dialog-module.mjs +5 -5
- package/esm2020/dialog/dialog.mjs +4 -4
- package/esm2020/listbox/listbox-module.mjs +5 -5
- package/esm2020/listbox/listbox.mjs +7 -7
- package/esm2020/menu/context-menu.mjs +36 -56
- package/esm2020/menu/menu-aim.mjs +7 -7
- package/esm2020/menu/menu-bar.mjs +16 -13
- package/esm2020/menu/menu-errors.mjs +1 -9
- package/esm2020/menu/menu-group.mjs +4 -4
- package/esm2020/menu/menu-item-checkbox.mjs +4 -4
- package/esm2020/menu/menu-item-radio.mjs +15 -8
- package/esm2020/menu/menu-item-selectable.mjs +4 -4
- package/esm2020/menu/menu-item-trigger.mjs +55 -73
- package/esm2020/menu/menu-item.mjs +26 -25
- package/esm2020/menu/menu-module.mjs +5 -9
- package/esm2020/menu/menu-stack.mjs +10 -6
- package/esm2020/menu/menu-trigger.mjs +43 -0
- package/esm2020/menu/menu.mjs +32 -45
- package/esm2020/menu/public-api.mjs +3 -3
- package/esm2020/popover-edit/edit-event-dispatcher.mjs +4 -4
- package/esm2020/popover-edit/edit-ref.mjs +4 -4
- package/esm2020/popover-edit/edit-services.mjs +4 -4
- package/esm2020/popover-edit/focus-dispatcher.mjs +4 -4
- package/esm2020/popover-edit/focus-escape-notifier.mjs +4 -4
- package/esm2020/popover-edit/lens-directives.mjs +10 -10
- package/esm2020/popover-edit/popover-edit-module.mjs +5 -5
- package/esm2020/popover-edit/popover-edit-position-strategy-factory.mjs +7 -7
- package/esm2020/popover-edit/table-directives.mjs +16 -16
- package/esm2020/scrolling/auto-size-virtual-scroll.mjs +4 -4
- package/esm2020/scrolling/scrolling-module.mjs +5 -5
- package/esm2020/selection/row-selection.mjs +4 -4
- package/esm2020/selection/select-all.mjs +4 -4
- package/esm2020/selection/selection-column.mjs +4 -4
- package/esm2020/selection/selection-module.mjs +5 -5
- package/esm2020/selection/selection-toggle.mjs +4 -4
- package/esm2020/selection/selection.mjs +4 -4
- package/esm2020/table-scroll-container/table-scroll-container-module.mjs +5 -5
- package/esm2020/table-scroll-container/table-scroll-container.mjs +4 -4
- package/esm2020/version.mjs +1 -1
- package/fesm2015/cdk-experimental.mjs +1 -1
- package/fesm2015/cdk-experimental.mjs.map +1 -1
- package/fesm2015/column-resize.mjs +50 -50
- package/fesm2015/column-resize.mjs.map +1 -1
- package/fesm2015/combobox.mjs +13 -13
- package/fesm2015/combobox.mjs.map +1 -1
- package/fesm2015/dialog.mjs +27 -15
- package/fesm2015/dialog.mjs.map +1 -1
- package/fesm2015/listbox.mjs +10 -10
- package/fesm2015/listbox.mjs.map +1 -1
- package/fesm2015/menu.mjs +313 -369
- package/fesm2015/menu.mjs.map +1 -1
- package/fesm2015/popover-edit.mjs +49 -49
- package/fesm2015/popover-edit.mjs.map +1 -1
- package/fesm2015/scrolling.mjs +7 -7
- package/fesm2015/scrolling.mjs.map +1 -1
- package/fesm2015/selection.mjs +19 -19
- package/fesm2015/selection.mjs.map +1 -1
- package/fesm2015/table-scroll-container.mjs +7 -7
- package/fesm2015/table-scroll-container.mjs.map +1 -1
- package/fesm2020/cdk-experimental.mjs +1 -1
- package/fesm2020/cdk-experimental.mjs.map +1 -1
- package/fesm2020/column-resize.mjs +50 -50
- package/fesm2020/column-resize.mjs.map +1 -1
- package/fesm2020/combobox.mjs +13 -13
- package/fesm2020/combobox.mjs.map +1 -1
- package/fesm2020/dialog.mjs +27 -15
- package/fesm2020/dialog.mjs.map +1 -1
- package/fesm2020/listbox.mjs +10 -10
- package/fesm2020/listbox.mjs.map +1 -1
- package/fesm2020/menu.mjs +218 -269
- package/fesm2020/menu.mjs.map +1 -1
- package/fesm2020/popover-edit.mjs +49 -49
- package/fesm2020/popover-edit.mjs.map +1 -1
- package/fesm2020/scrolling.mjs +7 -7
- package/fesm2020/scrolling.mjs.map +1 -1
- package/fesm2020/selection.mjs +19 -19
- package/fesm2020/selection.mjs.map +1 -1
- package/fesm2020/table-scroll-container.mjs +7 -7
- package/fesm2020/table-scroll-container.mjs.map +1 -1
- package/menu/context-menu.d.ts +9 -15
- package/menu/menu-bar.d.ts +2 -2
- package/menu/menu-errors.d.ts +0 -5
- package/menu/menu-item-radio.d.ts +4 -3
- package/menu/menu-item-trigger.d.ts +8 -17
- package/menu/menu-item.d.ts +5 -5
- package/menu/menu-module.d.ts +9 -10
- package/menu/menu-stack.d.ts +7 -6
- package/menu/menu-trigger.d.ts +24 -0
- package/menu/menu.d.ts +7 -23
- package/menu/public-api.d.ts +2 -2
- package/package.json +3 -3
- package/esm2020/menu/menu-panel.mjs +0 -37
- 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,
|
|
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
|
|
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$
|
|
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
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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: "
|
|
333
|
-
TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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: "
|
|
344
|
-
CdkTargetMenuAim.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
520
|
+
this.menuStack.close(this._parentMenu, 2 /* currentItem */);
|
|
505
521
|
}
|
|
506
522
|
else {
|
|
507
523
|
this.openMenu();
|
|
508
|
-
this.
|
|
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.
|
|
533
|
+
this.childMenu?.focusFirstItem('keyboard');
|
|
518
534
|
}
|
|
519
535
|
else {
|
|
520
|
-
this.
|
|
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.
|
|
531
|
-
: this.
|
|
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) &&
|
|
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.
|
|
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.
|
|
590
|
-
if (this.
|
|
591
|
-
this.
|
|
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.
|
|
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.
|
|
608
|
-
if (item === this.
|
|
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.
|
|
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: "
|
|
664
|
-
CdkMenuItemTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
665
|
-
|
|
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:
|
|
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:
|
|
702
|
+
}] }, { type: i1$1.Directionality, decorators: [{
|
|
689
703
|
type: Optional
|
|
690
|
-
}] }]; }, propDecorators: {
|
|
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.
|
|
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.
|
|
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.
|
|
839
|
-
: this.
|
|
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.
|
|
847
|
-
: this.
|
|
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.
|
|
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.
|
|
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: "
|
|
890
|
-
CdkMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
891
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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:
|
|
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:
|
|
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: "
|
|
972
|
-
CdkMenuItemSelectable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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: "
|
|
1030
|
-
CdkMenuGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
1031
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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.
|
|
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
|
|
1186
|
+
this._menuStack?.close(this, 2 /* currentItem */);
|
|
1215
1187
|
}
|
|
1216
1188
|
break;
|
|
1217
1189
|
case TAB:
|
|
1218
|
-
this._menuStack
|
|
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
|
|
1243
|
+
this._menuStack?.closed
|
|
1283
1244
|
.pipe(takeUntil(this.closed))
|
|
1284
1245
|
.subscribe(item => this._closeOpenMenu(item));
|
|
1285
|
-
this._menuStack
|
|
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
|
-
|
|
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: "
|
|
1366
|
-
CdkMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
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: "
|
|
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:
|
|
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:
|
|
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(
|
|
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: "
|
|
1612
|
-
CdkMenuBar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
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:
|
|
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: "
|
|
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:
|
|
1597
|
+
{ provide: MENU_STACK, useClass: MenuStack },
|
|
1634
1598
|
],
|
|
1635
1599
|
}]
|
|
1636
|
-
}], ctorParameters: function () { return [{ type:
|
|
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:
|
|
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: "
|
|
1692
|
-
CdkMenuItemRadio.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
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: "
|
|
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$
|
|
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:
|
|
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: "
|
|
1752
|
-
CdkMenuItemCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
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: "
|
|
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: "
|
|
1796
|
-
ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1797
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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.
|
|
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.
|
|
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.
|
|
1859
|
+
this.childMenu?.focusFirstItem('mouse');
|
|
1902
1860
|
}
|
|
1903
1861
|
else if (event.button === 0) {
|
|
1904
|
-
this.
|
|
1862
|
+
this.childMenu?.focusFirstItem('keyboard');
|
|
1905
1863
|
}
|
|
1906
1864
|
else {
|
|
1907
|
-
this.
|
|
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.
|
|
1956
|
-
if (this.
|
|
1957
|
-
this.
|
|
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.
|
|
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.
|
|
1964
|
-
if (item === this.
|
|
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.
|
|
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: "
|
|
2017
|
-
CdkContextMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
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
|
-
|
|
2022
|
-
|
|
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:
|
|
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:
|
|
1991
|
+
}] }, { type: i1$1.Directionality, decorators: [{
|
|
2040
1992
|
type: Optional
|
|
2041
|
-
}] }]; }, propDecorators: {
|
|
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: "
|
|
2077
|
-
CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
|
|
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: "
|
|
2097
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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,
|
|
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
|