@angular/cdk-experimental 14.0.0-next.9 → 14.0.0-rc.2
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/column-resize/index.d.ts +419 -6
- package/combobox/index.d.ts +123 -8
- 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-popup.mjs +4 -4
- package/esm2020/combobox/combobox.mjs +4 -4
- package/esm2020/listbox/listbox-module.mjs +5 -5
- package/esm2020/listbox/listbox.mjs +7 -7
- package/esm2020/popover-edit/edit-event-dispatcher.mjs +7 -7
- 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 +6 -6
- package/esm2020/popover-edit/lens-directives.mjs +10 -10
- package/esm2020/popover-edit/popover-edit-module.mjs +6 -6
- package/esm2020/popover-edit/popover-edit-position-strategy-factory.mjs +7 -7
- package/esm2020/popover-edit/table-directives.mjs +19 -19
- 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 +10 -10
- 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 +10 -10
- package/fesm2015/combobox.mjs.map +1 -1
- package/fesm2015/listbox.mjs +10 -10
- package/fesm2015/listbox.mjs.map +1 -1
- package/fesm2015/popover-edit.mjs +58 -58
- 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 +23 -23
- 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 +10 -10
- package/fesm2020/combobox.mjs.map +1 -1
- package/fesm2020/listbox.mjs +10 -10
- package/fesm2020/listbox.mjs.map +1 -1
- package/fesm2020/popover-edit.mjs +58 -58
- 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 +23 -23
- 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/index.d.ts +6 -8
- package/listbox/index.d.ts +197 -8
- package/package.json +9 -25
- package/popover-edit/index.d.ts +532 -5
- package/scrolling/index.d.ts +173 -6
- package/selection/index.d.ts +273 -5
- package/table-scroll-container/index.d.ts +61 -5
- package/column-resize/column-resize-directives/column-resize-flex.d.ts +0 -28
- package/column-resize/column-resize-directives/column-resize.d.ts +0 -28
- package/column-resize/column-resize-directives/constants.d.ts +0 -10
- package/column-resize/column-resize-directives/default-enabled-column-resize-flex.d.ts +0 -28
- package/column-resize/column-resize-directives/default-enabled-column-resize.d.ts +0 -28
- package/column-resize/column-resize-module.d.ts +0 -23
- package/column-resize/column-resize-notifier.d.ts +0 -49
- package/column-resize/column-resize.d.ts +0 -39
- package/column-resize/column-resize_public_index.d.ts +0 -4
- package/column-resize/column-size-store.d.ts +0 -12
- package/column-resize/event-dispatcher.d.ts +0 -44
- package/column-resize/overlay-handle.d.ts +0 -43
- package/column-resize/package.json +0 -9
- package/column-resize/public-api.d.ts +0 -20
- package/column-resize/resizable.d.ts +0 -69
- package/column-resize/resize-ref.d.ts +0 -17
- package/column-resize/resize-strategy.d.ts +0 -83
- package/column-resize/selectors.d.ts +0 -10
- package/combobox/combobox-module.d.ts +0 -9
- package/combobox/combobox-popup.d.ts +0 -27
- package/combobox/combobox.d.ts +0 -68
- package/combobox/combobox_public_index.d.ts +0 -4
- package/combobox/package.json +0 -9
- package/combobox/public-api.d.ts +0 -10
- package/dialog/dialog-config.d.ts +0 -82
- package/dialog/dialog-container.d.ts +0 -99
- package/dialog/dialog-injectors.d.ts +0 -30
- package/dialog/dialog-module.d.ts +0 -10
- package/dialog/dialog-ref.d.ts +0 -57
- package/dialog/dialog.d.ts +0 -100
- package/dialog/dialog_public_index.d.ts +0 -4
- package/dialog/index.d.ts +0 -8
- package/dialog/package.json +0 -9
- package/dialog/public-api.d.ts +0 -13
- package/esm2020/dialog/dialog-config.mjs +0 -43
- package/esm2020/dialog/dialog-container.mjs +0 -300
- package/esm2020/dialog/dialog-injectors.mjs +0 -30
- package/esm2020/dialog/dialog-module.mjs +0 -56
- package/esm2020/dialog/dialog-ref.mjs +0 -116
- package/esm2020/dialog/dialog.mjs +0 -252
- package/esm2020/dialog/dialog_public_index.mjs +0 -5
- package/esm2020/dialog/index.mjs +0 -9
- package/esm2020/dialog/public-api.mjs +0 -14
- package/esm2020/menu/context-menu.mjs +0 -222
- package/esm2020/menu/index.mjs +0 -9
- package/esm2020/menu/menu-aim.mjs +0 -199
- package/esm2020/menu/menu-bar.mjs +0 -164
- package/esm2020/menu/menu-base.mjs +0 -129
- package/esm2020/menu/menu-errors.mjs +0 -22
- package/esm2020/menu/menu-group.mjs +0 -68
- package/esm2020/menu/menu-interface.mjs +0 -11
- package/esm2020/menu/menu-item-checkbox.mjs +0 -48
- package/esm2020/menu/menu-item-radio.mjs +0 -95
- package/esm2020/menu/menu-item-selectable.mjs +0 -57
- package/esm2020/menu/menu-item-trigger.mjs +0 -276
- package/esm2020/menu/menu-item.mjs +0 -250
- package/esm2020/menu/menu-module.mjs +0 -60
- package/esm2020/menu/menu-stack.mjs +0 -131
- package/esm2020/menu/menu-trigger.mjs +0 -70
- package/esm2020/menu/menu.mjs +0 -204
- package/esm2020/menu/menu_public_index.mjs +0 -5
- package/esm2020/menu/pointer-focus-tracker.mjs +0 -49
- package/esm2020/menu/public-api.mjs +0 -21
- package/fesm2015/dialog.mjs +0 -803
- package/fesm2015/dialog.mjs.map +0 -1
- package/fesm2015/menu.mjs +0 -1983
- package/fesm2015/menu.mjs.map +0 -1
- package/fesm2020/dialog.mjs +0 -797
- package/fesm2020/dialog.mjs.map +0 -1
- package/fesm2020/menu.mjs +0 -1954
- package/fesm2020/menu.mjs.map +0 -1
- package/listbox/listbox-module.d.ts +0 -7
- package/listbox/listbox.d.ts +0 -172
- package/listbox/listbox_public_index.d.ts +0 -4
- package/listbox/package.json +0 -9
- package/listbox/public-api.d.ts +0 -9
- package/menu/context-menu.d.ts +0 -84
- package/menu/index.d.ts +0 -8
- package/menu/menu-aim.d.ts +0 -96
- package/menu/menu-bar.d.ts +0 -47
- package/menu/menu-base.d.ts +0 -64
- package/menu/menu-errors.d.ts +0 -17
- package/menu/menu-group.d.ts +0 -33
- package/menu/menu-interface.d.ts +0 -23
- package/menu/menu-item-checkbox.d.ts +0 -12
- package/menu/menu-item-radio.d.ts +0 -36
- package/menu/menu-item-selectable.d.ts +0 -31
- package/menu/menu-item-trigger.d.ts +0 -89
- package/menu/menu-item.d.ts +0 -105
- package/menu/menu-module.d.ts +0 -16
- package/menu/menu-stack.d.ts +0 -94
- package/menu/menu-trigger.d.ts +0 -48
- package/menu/menu.d.ts +0 -57
- package/menu/menu_public_index.d.ts +0 -4
- package/menu/package.json +0 -9
- package/menu/pointer-focus-tracker.d.ts +0 -44
- package/menu/public-api.d.ts +0 -20
- package/popover-edit/constants.d.ts +0 -19
- package/popover-edit/edit-event-dispatcher.d.ts +0 -99
- package/popover-edit/edit-ref.d.ts +0 -52
- package/popover-edit/edit-services.d.ts +0 -37
- package/popover-edit/focus-dispatcher.d.ts +0 -31
- package/popover-edit/focus-escape-notifier.d.ts +0 -40
- package/popover-edit/form-value-container.d.ts +0 -24
- package/popover-edit/lens-directives.d.ts +0 -82
- package/popover-edit/package.json +0 -9
- package/popover-edit/polyfill.d.ts +0 -9
- package/popover-edit/popover-edit-module.d.ts +0 -9
- package/popover-edit/popover-edit-position-strategy-factory.d.ts +0 -42
- package/popover-edit/popover-edit_public_index.d.ts +0 -4
- package/popover-edit/public-api.d.ts +0 -17
- package/popover-edit/table-directives.d.ts +0 -150
- package/public-api.d.ts +0 -8
- package/scrolling/auto-size-virtual-scroll.d.ts +0 -160
- package/scrolling/package.json +0 -9
- package/scrolling/public-api.d.ts +0 -9
- package/scrolling/scrolling-module.d.ts +0 -7
- package/scrolling/scrolling_public_index.d.ts +0 -4
- package/selection/package.json +0 -9
- package/selection/public-api.d.ts +0 -14
- package/selection/row-selection.d.ts +0 -27
- package/selection/select-all.d.ts +0 -52
- package/selection/selection-column.d.ts +0 -34
- package/selection/selection-module.d.ts +0 -13
- package/selection/selection-set.d.ts +0 -56
- package/selection/selection-toggle.d.ts +0 -46
- package/selection/selection.d.ts +0 -65
- package/selection/selection_public_index.d.ts +0 -4
- package/table-scroll-container/package.json +0 -9
- package/table-scroll-container/public-api.d.ts +0 -9
- package/table-scroll-container/table-scroll-container-module.d.ts +0 -7
- package/table-scroll-container/table-scroll-container.d.ts +0 -53
- package/table-scroll-container/table-scroll-container_public_index.d.ts +0 -4
- package/version.d.ts +0 -10
package/fesm2015/menu.mjs
DELETED
|
@@ -1,1983 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Optional, SkipSelf, Inject, Injectable, Directive, EventEmitter, Injector, Self, Input, Output, ContentChildren, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/cdk/overlay';
|
|
4
|
-
import { OverlayConfig, STANDARD_DROPDOWN_BELOW_POSITIONS, STANDARD_DROPDOWN_ADJACENT_POSITIONS, OverlayModule } from '@angular/cdk/overlay';
|
|
5
|
-
import { UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, TAB, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
|
6
|
-
import { filter, takeUntil, startWith, mergeMap, mapTo, mergeAll, switchMap, take, skip } from 'rxjs/operators';
|
|
7
|
-
import * as i1$2 from '@angular/cdk/collections';
|
|
8
|
-
import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
|
|
9
|
-
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
10
|
-
import { Subject, fromEvent, merge, defer, partition } from 'rxjs';
|
|
11
|
-
import * as i1$1 from '@angular/cdk/bidi';
|
|
12
|
-
import { TemplatePortal } from '@angular/cdk/portal';
|
|
13
|
-
import { FocusKeyManager } from '@angular/cdk/a11y';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* @license
|
|
17
|
-
* Copyright Google LLC All Rights Reserved.
|
|
18
|
-
*
|
|
19
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
20
|
-
* found in the LICENSE file at https://angular.io/license
|
|
21
|
-
*/
|
|
22
|
-
/** Injection token used to return classes implementing the Menu interface */
|
|
23
|
-
const CDK_MENU = new InjectionToken('cdk-menu');
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* @license
|
|
27
|
-
* Copyright Google LLC All Rights Reserved.
|
|
28
|
-
*
|
|
29
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
30
|
-
* found in the LICENSE file at https://angular.io/license
|
|
31
|
-
*/
|
|
32
|
-
/** Injection token used for an implementation of MenuStack. */
|
|
33
|
-
const MENU_STACK = new InjectionToken('cdk-menu-stack');
|
|
34
|
-
/** A provider that provides the parent menu stack, or a new menu stack if there is no parent one. */
|
|
35
|
-
const PARENT_OR_NEW_MENU_STACK_PROVIDER = {
|
|
36
|
-
provide: MENU_STACK,
|
|
37
|
-
deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
|
|
38
|
-
useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
|
|
39
|
-
};
|
|
40
|
-
/** A provider that provides the parent menu stack, or a new menu stack if there is no parent one. */
|
|
41
|
-
const PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER = {
|
|
42
|
-
provide: MENU_STACK,
|
|
43
|
-
deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
|
|
44
|
-
useFactory: (parentMenuStack) => parentMenuStack || MenuStack.inline(),
|
|
45
|
-
};
|
|
46
|
-
/**
|
|
47
|
-
* MenuStack allows subscribers to listen for close events (when a MenuStackItem is popped off
|
|
48
|
-
* of the stack) in order to perform closing actions. Upon the MenuStack being empty it emits
|
|
49
|
-
* from the `empty` observable specifying the next focus action which the listener should perform
|
|
50
|
-
* as requested by the closer.
|
|
51
|
-
*/
|
|
52
|
-
class MenuStack {
|
|
53
|
-
constructor() {
|
|
54
|
-
/** All MenuStackItems tracked by this MenuStack. */
|
|
55
|
-
this._elements = [];
|
|
56
|
-
/** Emits the element which was popped off of the stack when requested by a closer. */
|
|
57
|
-
this._close = new Subject();
|
|
58
|
-
/** Emits once the MenuStack has become empty after popping off elements. */
|
|
59
|
-
this._empty = new Subject();
|
|
60
|
-
/** Observable which emits the MenuStackItem which has been requested to close. */
|
|
61
|
-
this.closed = this._close;
|
|
62
|
-
/**
|
|
63
|
-
* Observable which emits when the MenuStack is empty after popping off the last element. It
|
|
64
|
-
* emits a FocusNext event which specifies the action the closer has requested the listener
|
|
65
|
-
* perform.
|
|
66
|
-
*/
|
|
67
|
-
this.emptied = this._empty;
|
|
68
|
-
this._hasInlineMenu = false;
|
|
69
|
-
}
|
|
70
|
-
static inline() {
|
|
71
|
-
const stack = new MenuStack();
|
|
72
|
-
stack._hasInlineMenu = true;
|
|
73
|
-
return stack;
|
|
74
|
-
}
|
|
75
|
-
/** @param menu the MenuStackItem to put on the stack. */
|
|
76
|
-
push(menu) {
|
|
77
|
-
this._elements.push(menu);
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* Pop items off of the stack up to and including `lastItem` and emit each on the close
|
|
81
|
-
* observable. If the stack is empty or `lastItem` is not on the stack it does nothing.
|
|
82
|
-
* @param lastItem the last item to pop off the stack.
|
|
83
|
-
* @param focusNext the event to emit on the `empty` observable if the method call resulted in an
|
|
84
|
-
* empty stack. Does not emit if the stack was initially empty or if `lastItem` was not on the
|
|
85
|
-
* stack.
|
|
86
|
-
*/
|
|
87
|
-
close(lastItem, focusNext) {
|
|
88
|
-
if (this._elements.indexOf(lastItem) >= 0) {
|
|
89
|
-
let poppedElement;
|
|
90
|
-
do {
|
|
91
|
-
poppedElement = this._elements.pop();
|
|
92
|
-
this._close.next(poppedElement);
|
|
93
|
-
} while (poppedElement !== lastItem);
|
|
94
|
-
if (this.isEmpty()) {
|
|
95
|
-
this._empty.next(focusNext);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
/**
|
|
100
|
-
* Pop items off of the stack up to but excluding `lastItem` and emit each on the close
|
|
101
|
-
* observable. If the stack is empty or `lastItem` is not on the stack it does nothing.
|
|
102
|
-
* @param lastItem the element which should be left on the stack
|
|
103
|
-
* @return whether or not an item was removed from the stack
|
|
104
|
-
*/
|
|
105
|
-
closeSubMenuOf(lastItem) {
|
|
106
|
-
let removed = false;
|
|
107
|
-
if (this._elements.indexOf(lastItem) >= 0) {
|
|
108
|
-
removed = this.peek() !== lastItem;
|
|
109
|
-
while (this.peek() !== lastItem) {
|
|
110
|
-
this._close.next(this._elements.pop());
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
return removed;
|
|
114
|
-
}
|
|
115
|
-
/**
|
|
116
|
-
* Pop off all MenuStackItems and emit each one on the `close` observable one by one.
|
|
117
|
-
* @param focusNext the event to emit on the `empty` observable once the stack is emptied. Does
|
|
118
|
-
* not emit if the stack was initially empty.
|
|
119
|
-
*/
|
|
120
|
-
closeAll(focusNext) {
|
|
121
|
-
if (!this.isEmpty()) {
|
|
122
|
-
while (!this.isEmpty()) {
|
|
123
|
-
const menuStackItem = this._elements.pop();
|
|
124
|
-
if (menuStackItem) {
|
|
125
|
-
this._close.next(menuStackItem);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
this._empty.next(focusNext);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
/** Return true if this stack is empty. */
|
|
132
|
-
isEmpty() {
|
|
133
|
-
return !this._elements.length;
|
|
134
|
-
}
|
|
135
|
-
/** Return the length of the stack. */
|
|
136
|
-
length() {
|
|
137
|
-
return this._elements.length;
|
|
138
|
-
}
|
|
139
|
-
/** Get the top most element on the stack. */
|
|
140
|
-
peek() {
|
|
141
|
-
return this._elements[this._elements.length - 1];
|
|
142
|
-
}
|
|
143
|
-
hasInlineMenu() {
|
|
144
|
-
return this._hasInlineMenu;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
MenuStack.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
148
|
-
MenuStack.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuStack });
|
|
149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuStack, decorators: [{
|
|
150
|
-
type: Injectable
|
|
151
|
-
}] });
|
|
152
|
-
|
|
153
|
-
/**
|
|
154
|
-
* @license
|
|
155
|
-
* Copyright Google LLC All Rights Reserved.
|
|
156
|
-
*
|
|
157
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
158
|
-
* found in the LICENSE file at https://angular.io/license
|
|
159
|
-
*/
|
|
160
|
-
/**
|
|
161
|
-
* Throws an exception when an instance of the PointerFocusTracker is not provided.
|
|
162
|
-
* @docs-private
|
|
163
|
-
*/
|
|
164
|
-
function throwMissingPointerFocusTracker() {
|
|
165
|
-
throw Error('expected an instance of PointerFocusTracker to be provided');
|
|
166
|
-
}
|
|
167
|
-
/**
|
|
168
|
-
* Throws an exception when a reference to the parent menu is not provided.
|
|
169
|
-
* @docs-private
|
|
170
|
-
*/
|
|
171
|
-
function throwMissingMenuReference() {
|
|
172
|
-
throw Error('expected a reference to the parent menu');
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* @license
|
|
177
|
-
* Copyright Google LLC All Rights Reserved.
|
|
178
|
-
*
|
|
179
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
180
|
-
* found in the LICENSE file at https://angular.io/license
|
|
181
|
-
*/
|
|
182
|
-
/** Injection token used for an implementation of MenuAim. */
|
|
183
|
-
const MENU_AIM = new InjectionToken('cdk-menu-aim');
|
|
184
|
-
/** Capture every nth mouse move event. */
|
|
185
|
-
const MOUSE_MOVE_SAMPLE_FREQUENCY = 3;
|
|
186
|
-
/** The number of mouse move events to track. */
|
|
187
|
-
const NUM_POINTS = 5;
|
|
188
|
-
/**
|
|
189
|
-
* How long to wait before closing a sibling menu if a user stops short of the submenu they were
|
|
190
|
-
* predicted to go into.
|
|
191
|
-
*/
|
|
192
|
-
const CLOSE_DELAY = 300;
|
|
193
|
-
/** Calculate the slope between point a and b. */
|
|
194
|
-
function getSlope(a, b) {
|
|
195
|
-
return (b.y - a.y) / (b.x - a.x);
|
|
196
|
-
}
|
|
197
|
-
/** Calculate the y intercept for the given point and slope. */
|
|
198
|
-
function getYIntercept(point, slope) {
|
|
199
|
-
return point.y - slope * point.x;
|
|
200
|
-
}
|
|
201
|
-
/**
|
|
202
|
-
* Whether the given mouse trajectory line defined by the slope and y intercept falls within the
|
|
203
|
-
* submenu as defined by `submenuPoints`
|
|
204
|
-
* @param submenuPoints the submenu DOMRect points.
|
|
205
|
-
* @param m the slope of the trajectory line.
|
|
206
|
-
* @param b the y intercept of the trajectory line.
|
|
207
|
-
*
|
|
208
|
-
* @return true if any point on the line falls within the submenu.
|
|
209
|
-
*/
|
|
210
|
-
function isWithinSubmenu(submenuPoints, m, b) {
|
|
211
|
-
const { left, right, top, bottom } = submenuPoints;
|
|
212
|
-
// Check for intersection with each edge of the submenu (left, right, top, bottom)
|
|
213
|
-
// by fixing one coordinate to that edge's coordinate (either x or y) and checking if the
|
|
214
|
-
// other coordinate is within bounds.
|
|
215
|
-
return ((m * left + b >= top && m * left + b <= bottom) ||
|
|
216
|
-
(m * right + b >= top && m * right + b <= bottom) ||
|
|
217
|
-
((top - b) / m >= left && (top - b) / m <= right) ||
|
|
218
|
-
((bottom - b) / m >= left && (bottom - b) / m <= right));
|
|
219
|
-
}
|
|
220
|
-
/**
|
|
221
|
-
* TargetMenuAim predicts if a user is moving into a submenu. It calculates the
|
|
222
|
-
* trajectory of the user's mouse movement in the current menu to determine if the
|
|
223
|
-
* mouse is moving towards an open submenu.
|
|
224
|
-
*
|
|
225
|
-
* The determination is made by calculating the slope of the users last NUM_POINTS moves where each
|
|
226
|
-
* pair of points determines if the trajectory line points into the submenu. It uses consensus
|
|
227
|
-
* approach by checking if at least NUM_POINTS / 2 pairs determine that the user is moving towards
|
|
228
|
-
* to submenu.
|
|
229
|
-
*/
|
|
230
|
-
class TargetMenuAim {
|
|
231
|
-
constructor(_ngZone) {
|
|
232
|
-
this._ngZone = _ngZone;
|
|
233
|
-
/** The last NUM_POINTS mouse move events. */
|
|
234
|
-
this._points = [];
|
|
235
|
-
/** Emits when this service is destroyed. */
|
|
236
|
-
this._destroyed = new Subject();
|
|
237
|
-
}
|
|
238
|
-
/** Set the Menu and its PointerFocusTracker. */
|
|
239
|
-
initialize(menu, pointerTracker) {
|
|
240
|
-
this._menu = menu;
|
|
241
|
-
this._pointerTracker = pointerTracker;
|
|
242
|
-
this._subscribeToMouseMoves();
|
|
243
|
-
}
|
|
244
|
-
/**
|
|
245
|
-
* Calls the `doToggle` callback when it is deemed that the user is not moving towards
|
|
246
|
-
* the submenu.
|
|
247
|
-
* @param doToggle the function called when the user is not moving towards the submenu.
|
|
248
|
-
*/
|
|
249
|
-
toggle(doToggle) {
|
|
250
|
-
// If the menu is horizontal the sub-menus open below and there is no risk of premature
|
|
251
|
-
// closing of any sub-menus therefore we automatically resolve the callback.
|
|
252
|
-
if (this._menu.orientation === 'horizontal') {
|
|
253
|
-
doToggle();
|
|
254
|
-
}
|
|
255
|
-
this._checkConfigured();
|
|
256
|
-
const siblingItemIsWaiting = !!this._timeoutId;
|
|
257
|
-
const hasPoints = this._points.length > 1;
|
|
258
|
-
if (hasPoints && !siblingItemIsWaiting) {
|
|
259
|
-
if (this._isMovingToSubmenu()) {
|
|
260
|
-
this._startTimeout(doToggle);
|
|
261
|
-
}
|
|
262
|
-
else {
|
|
263
|
-
doToggle();
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
else if (!siblingItemIsWaiting) {
|
|
267
|
-
doToggle();
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
/**
|
|
271
|
-
* Start the delayed toggle handler if one isn't running already.
|
|
272
|
-
*
|
|
273
|
-
* The delayed toggle handler executes the `doToggle` callback after some period of time iff the
|
|
274
|
-
* users mouse is on an item in the current menu.
|
|
275
|
-
*/
|
|
276
|
-
_startTimeout(doToggle) {
|
|
277
|
-
// If the users mouse is moving towards a submenu we don't want to immediately resolve.
|
|
278
|
-
// Wait for some period of time before determining if the previous menu should close in
|
|
279
|
-
// cases where the user may have moved towards the submenu but stopped on a sibling menu
|
|
280
|
-
// item intentionally.
|
|
281
|
-
const timeoutId = setTimeout(() => {
|
|
282
|
-
// Resolve if the user is currently moused over some element in the root menu
|
|
283
|
-
if (this._pointerTracker.activeElement && timeoutId === this._timeoutId) {
|
|
284
|
-
doToggle();
|
|
285
|
-
}
|
|
286
|
-
this._timeoutId = null;
|
|
287
|
-
}, CLOSE_DELAY);
|
|
288
|
-
this._timeoutId = timeoutId;
|
|
289
|
-
}
|
|
290
|
-
/** Whether the user is heading towards the open submenu. */
|
|
291
|
-
_isMovingToSubmenu() {
|
|
292
|
-
const submenuPoints = this._getSubmenuBounds();
|
|
293
|
-
if (!submenuPoints) {
|
|
294
|
-
return false;
|
|
295
|
-
}
|
|
296
|
-
let numMoving = 0;
|
|
297
|
-
const currPoint = this._points[this._points.length - 1];
|
|
298
|
-
// start from the second last point and calculate the slope between each point and the last
|
|
299
|
-
// point.
|
|
300
|
-
for (let i = this._points.length - 2; i >= 0; i--) {
|
|
301
|
-
const previous = this._points[i];
|
|
302
|
-
const slope = getSlope(currPoint, previous);
|
|
303
|
-
if (isWithinSubmenu(submenuPoints, slope, getYIntercept(currPoint, slope))) {
|
|
304
|
-
numMoving++;
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
return numMoving >= Math.floor(NUM_POINTS / 2);
|
|
308
|
-
}
|
|
309
|
-
/** Get the bounding DOMRect for the open submenu. */
|
|
310
|
-
_getSubmenuBounds() {
|
|
311
|
-
var _a, _b, _c;
|
|
312
|
-
return (_c = (_b = (_a = this._pointerTracker) === null || _a === void 0 ? void 0 : _a.previousElement) === null || _b === void 0 ? void 0 : _b.getMenu()) === null || _c === void 0 ? void 0 : _c._elementRef.nativeElement.getBoundingClientRect();
|
|
313
|
-
}
|
|
314
|
-
/**
|
|
315
|
-
* Check if a reference to the PointerFocusTracker and menu element is provided.
|
|
316
|
-
* @throws an error if neither reference is provided.
|
|
317
|
-
*/
|
|
318
|
-
_checkConfigured() {
|
|
319
|
-
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
320
|
-
if (!this._pointerTracker) {
|
|
321
|
-
throwMissingPointerFocusTracker();
|
|
322
|
-
}
|
|
323
|
-
if (!this._menu) {
|
|
324
|
-
throwMissingMenuReference();
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
/** Subscribe to the root menus mouse move events and update the tracked mouse points. */
|
|
329
|
-
_subscribeToMouseMoves() {
|
|
330
|
-
this._ngZone.runOutsideAngular(() => {
|
|
331
|
-
fromEvent(this._menu._elementRef.nativeElement, 'mousemove')
|
|
332
|
-
.pipe(filter((_, index) => index % MOUSE_MOVE_SAMPLE_FREQUENCY === 0), takeUntil(this._destroyed))
|
|
333
|
-
.subscribe((event) => {
|
|
334
|
-
this._points.push({ x: event.clientX, y: event.clientY });
|
|
335
|
-
if (this._points.length > NUM_POINTS) {
|
|
336
|
-
this._points.shift();
|
|
337
|
-
}
|
|
338
|
-
});
|
|
339
|
-
});
|
|
340
|
-
}
|
|
341
|
-
ngOnDestroy() {
|
|
342
|
-
this._destroyed.next();
|
|
343
|
-
this._destroyed.complete();
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
TargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: TargetMenuAim, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
347
|
-
TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: TargetMenuAim });
|
|
348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: TargetMenuAim, decorators: [{
|
|
349
|
-
type: Injectable
|
|
350
|
-
}], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
|
|
351
|
-
/**
|
|
352
|
-
* CdkTargetMenuAim is a provider for the TargetMenuAim service. It should be added to an
|
|
353
|
-
* element with either the `cdkMenu` or `cdkMenuBar` directive and child menu items.
|
|
354
|
-
*/
|
|
355
|
-
class CdkTargetMenuAim {
|
|
356
|
-
}
|
|
357
|
-
CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
358
|
-
CdkTargetMenuAim.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }], exportAs: ["cdkTargetMenuAim"], ngImport: i0 });
|
|
359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
|
|
360
|
-
type: Directive,
|
|
361
|
-
args: [{
|
|
362
|
-
selector: '[cdkTargetMenuAim]',
|
|
363
|
-
exportAs: 'cdkTargetMenuAim',
|
|
364
|
-
providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }],
|
|
365
|
-
}]
|
|
366
|
-
}] });
|
|
367
|
-
|
|
368
|
-
/**
|
|
369
|
-
* @license
|
|
370
|
-
* Copyright Google LLC All Rights Reserved.
|
|
371
|
-
*
|
|
372
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
373
|
-
* found in the LICENSE file at https://angular.io/license
|
|
374
|
-
*/
|
|
375
|
-
/** Injection token used for an implementation of MenuStack. */
|
|
376
|
-
const MENU_TRIGGER = new InjectionToken('cdk-menu-trigger');
|
|
377
|
-
class MenuTrigger {
|
|
378
|
-
constructor(injector, menuStack) {
|
|
379
|
-
this.injector = injector;
|
|
380
|
-
this.menuStack = menuStack;
|
|
381
|
-
/** Emits when the attached menu is requested to open */
|
|
382
|
-
this.opened = new EventEmitter();
|
|
383
|
-
/** Emits when the attached menu is requested to close */
|
|
384
|
-
this.closed = new EventEmitter();
|
|
385
|
-
/** A reference to the overlay which manages the triggered menu */
|
|
386
|
-
this._overlayRef = null;
|
|
387
|
-
/** Emits when this trigger is destroyed. */
|
|
388
|
-
this._destroyed = new Subject();
|
|
389
|
-
/** Emits when the outside pointer events listener on the overlay should be stopped. */
|
|
390
|
-
this._stopOutsideClicksListener = merge(this.closed, this._destroyed);
|
|
391
|
-
}
|
|
392
|
-
ngOnDestroy() {
|
|
393
|
-
this._destroyOverlay();
|
|
394
|
-
this._destroyed.next();
|
|
395
|
-
this._destroyed.complete();
|
|
396
|
-
}
|
|
397
|
-
/** Whether the attached menu is open. */
|
|
398
|
-
isOpen() {
|
|
399
|
-
var _a;
|
|
400
|
-
return !!((_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached());
|
|
401
|
-
}
|
|
402
|
-
registerChildMenu(child) {
|
|
403
|
-
this.childMenu = child;
|
|
404
|
-
}
|
|
405
|
-
getChildMenuInjector() {
|
|
406
|
-
this._childMenuInjector =
|
|
407
|
-
this._childMenuInjector ||
|
|
408
|
-
Injector.create({
|
|
409
|
-
providers: [
|
|
410
|
-
{ provide: MENU_TRIGGER, useValue: this },
|
|
411
|
-
{ provide: MENU_STACK, useValue: this.menuStack },
|
|
412
|
-
],
|
|
413
|
-
parent: this.injector,
|
|
414
|
-
});
|
|
415
|
-
return this._childMenuInjector;
|
|
416
|
-
}
|
|
417
|
-
/** Destroy and unset the overlay reference it if exists */
|
|
418
|
-
_destroyOverlay() {
|
|
419
|
-
if (this._overlayRef) {
|
|
420
|
-
this._overlayRef.dispose();
|
|
421
|
-
this._overlayRef = null;
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
MenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuTrigger, deps: [{ token: i0.Injector }, { token: MENU_STACK }], target: i0.ɵɵFactoryTarget.Directive });
|
|
426
|
-
MenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: MenuTrigger, ngImport: i0 });
|
|
427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuTrigger, decorators: [{
|
|
428
|
-
type: Directive
|
|
429
|
-
}], ctorParameters: function () {
|
|
430
|
-
return [{ type: i0.Injector }, { type: MenuStack, decorators: [{
|
|
431
|
-
type: Inject,
|
|
432
|
-
args: [MENU_STACK]
|
|
433
|
-
}] }];
|
|
434
|
-
} });
|
|
435
|
-
|
|
436
|
-
/**
|
|
437
|
-
* @license
|
|
438
|
-
* Copyright Google LLC All Rights Reserved.
|
|
439
|
-
*
|
|
440
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
441
|
-
* found in the LICENSE file at https://angular.io/license
|
|
442
|
-
*/
|
|
443
|
-
/**
|
|
444
|
-
* Whether the target element is a menu item to be ignored by the overlay background click handler.
|
|
445
|
-
*/
|
|
446
|
-
function isClickInsideMenuOverlay(target) {
|
|
447
|
-
while (target === null || target === void 0 ? void 0 : target.parentElement) {
|
|
448
|
-
const isOpenTrigger = target.getAttribute('aria-expanded') === 'true' &&
|
|
449
|
-
target.classList.contains('cdk-menu-trigger');
|
|
450
|
-
const isOverlayMenu = target.classList.contains('cdk-menu') && !target.classList.contains('cdk-menu-inline');
|
|
451
|
-
if (isOpenTrigger || isOverlayMenu) {
|
|
452
|
-
return true;
|
|
453
|
-
}
|
|
454
|
-
target = target.parentElement;
|
|
455
|
-
}
|
|
456
|
-
return false;
|
|
457
|
-
}
|
|
458
|
-
/**
|
|
459
|
-
* A directive to be combined with CdkMenuItem which opens the Menu it is bound to. If the
|
|
460
|
-
* element is in a top level MenuBar it will open the menu on click, or if a sibling is already
|
|
461
|
-
* opened it will open on hover. If it is inside of a Menu it will open the attached Submenu on
|
|
462
|
-
* hover regardless of its sibling state.
|
|
463
|
-
*
|
|
464
|
-
* The directive must be placed along with the `cdkMenuItem` directive in order to enable full
|
|
465
|
-
* functionality.
|
|
466
|
-
*/
|
|
467
|
-
class CdkMenuItemTrigger extends MenuTrigger {
|
|
468
|
-
constructor(injector, _elementRef, _viewContainerRef, _overlay, _ngZone, menuStack, _parentMenu, _menuAim, _directionality) {
|
|
469
|
-
super(injector, menuStack);
|
|
470
|
-
this._elementRef = _elementRef;
|
|
471
|
-
this._viewContainerRef = _viewContainerRef;
|
|
472
|
-
this._overlay = _overlay;
|
|
473
|
-
this._ngZone = _ngZone;
|
|
474
|
-
this._parentMenu = _parentMenu;
|
|
475
|
-
this._menuAim = _menuAim;
|
|
476
|
-
this._directionality = _directionality;
|
|
477
|
-
this._registerCloseHandler();
|
|
478
|
-
this._subscribeToMouseEnter();
|
|
479
|
-
}
|
|
480
|
-
/** Open/close the attached menu if the trigger has been configured with one */
|
|
481
|
-
toggle() {
|
|
482
|
-
this.isOpen() ? this.close() : this.open();
|
|
483
|
-
}
|
|
484
|
-
/** Open the attached menu. */
|
|
485
|
-
open() {
|
|
486
|
-
if (!this.isOpen()) {
|
|
487
|
-
this.opened.next();
|
|
488
|
-
this._overlayRef = this._overlayRef || this._overlay.create(this._getOverlayConfig());
|
|
489
|
-
this._overlayRef.attach(this._getPortal());
|
|
490
|
-
this._subscribeToOutsideClicks();
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
/** Close the opened menu. */
|
|
494
|
-
close() {
|
|
495
|
-
if (this.isOpen()) {
|
|
496
|
-
this.closed.next();
|
|
497
|
-
this._overlayRef.detach();
|
|
498
|
-
}
|
|
499
|
-
this._closeSiblingTriggers();
|
|
500
|
-
}
|
|
501
|
-
/**
|
|
502
|
-
* Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.
|
|
503
|
-
* @return the menu if it is open, otherwise undefined.
|
|
504
|
-
*/
|
|
505
|
-
getMenu() {
|
|
506
|
-
return this.childMenu;
|
|
507
|
-
}
|
|
508
|
-
/**
|
|
509
|
-
* Subscribe to the mouseenter events and close any sibling menu items if this element is moused
|
|
510
|
-
* into.
|
|
511
|
-
*/
|
|
512
|
-
_subscribeToMouseEnter() {
|
|
513
|
-
// Closes any sibling menu items and opens the menu associated with this trigger.
|
|
514
|
-
const toggleMenus = () => this._ngZone.run(() => {
|
|
515
|
-
this._closeSiblingTriggers();
|
|
516
|
-
this.open();
|
|
517
|
-
});
|
|
518
|
-
this._ngZone.runOutsideAngular(() => {
|
|
519
|
-
fromEvent(this._elementRef.nativeElement, 'mouseenter')
|
|
520
|
-
.pipe(filter(() => !this.menuStack.isEmpty() && !this.isOpen()), takeUntil(this._destroyed))
|
|
521
|
-
.subscribe(() => {
|
|
522
|
-
if (this._menuAim) {
|
|
523
|
-
this._menuAim.toggle(toggleMenus);
|
|
524
|
-
}
|
|
525
|
-
else {
|
|
526
|
-
toggleMenus();
|
|
527
|
-
}
|
|
528
|
-
});
|
|
529
|
-
});
|
|
530
|
-
}
|
|
531
|
-
/**
|
|
532
|
-
* Handles keyboard events for the menu item, specifically opening/closing the attached menu and
|
|
533
|
-
* focusing the appropriate submenu item.
|
|
534
|
-
* @param event the keyboard event to handle
|
|
535
|
-
*/
|
|
536
|
-
_toggleOnKeydown(event) {
|
|
537
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
538
|
-
const keyCode = event.keyCode;
|
|
539
|
-
switch (keyCode) {
|
|
540
|
-
case SPACE:
|
|
541
|
-
case ENTER:
|
|
542
|
-
event.preventDefault();
|
|
543
|
-
this.toggle();
|
|
544
|
-
(_a = this.childMenu) === null || _a === void 0 ? void 0 : _a.focusFirstItem('keyboard');
|
|
545
|
-
break;
|
|
546
|
-
case RIGHT_ARROW:
|
|
547
|
-
if (this._parentMenu && this._isParentVertical() && ((_b = this._directionality) === null || _b === void 0 ? void 0 : _b.value) !== 'rtl') {
|
|
548
|
-
event.preventDefault();
|
|
549
|
-
this.open();
|
|
550
|
-
(_c = this.childMenu) === null || _c === void 0 ? void 0 : _c.focusFirstItem('keyboard');
|
|
551
|
-
}
|
|
552
|
-
break;
|
|
553
|
-
case LEFT_ARROW:
|
|
554
|
-
if (this._parentMenu && this._isParentVertical() && ((_d = this._directionality) === null || _d === void 0 ? void 0 : _d.value) === 'rtl') {
|
|
555
|
-
event.preventDefault();
|
|
556
|
-
this.open();
|
|
557
|
-
(_e = this.childMenu) === null || _e === void 0 ? void 0 : _e.focusFirstItem('keyboard');
|
|
558
|
-
}
|
|
559
|
-
break;
|
|
560
|
-
case DOWN_ARROW:
|
|
561
|
-
case UP_ARROW:
|
|
562
|
-
if (!this._isParentVertical()) {
|
|
563
|
-
event.preventDefault();
|
|
564
|
-
this.open();
|
|
565
|
-
keyCode === DOWN_ARROW
|
|
566
|
-
? (_f = this.childMenu) === null || _f === void 0 ? void 0 : _f.focusFirstItem('keyboard')
|
|
567
|
-
: (_g = this.childMenu) === null || _g === void 0 ? void 0 : _g.focusLastItem('keyboard');
|
|
568
|
-
}
|
|
569
|
-
break;
|
|
570
|
-
}
|
|
571
|
-
}
|
|
572
|
-
/** Close out any sibling menu trigger menus. */
|
|
573
|
-
_closeSiblingTriggers() {
|
|
574
|
-
if (this._parentMenu) {
|
|
575
|
-
// If nothing was removed from the stack and the last element is not the parent item
|
|
576
|
-
// that means that the parent menu is a menu bar since we don't put the menu bar on the
|
|
577
|
-
// stack
|
|
578
|
-
const isParentMenuBar = !this.menuStack.closeSubMenuOf(this._parentMenu) &&
|
|
579
|
-
this.menuStack.peek() !== this._parentMenu;
|
|
580
|
-
if (isParentMenuBar) {
|
|
581
|
-
this.menuStack.closeAll();
|
|
582
|
-
}
|
|
583
|
-
}
|
|
584
|
-
else {
|
|
585
|
-
this.menuStack.closeAll();
|
|
586
|
-
}
|
|
587
|
-
}
|
|
588
|
-
/** Get the configuration object used to create the overlay */
|
|
589
|
-
_getOverlayConfig() {
|
|
590
|
-
return new OverlayConfig({
|
|
591
|
-
positionStrategy: this._getOverlayPositionStrategy(),
|
|
592
|
-
scrollStrategy: this._overlay.scrollStrategies.block(),
|
|
593
|
-
direction: this._directionality,
|
|
594
|
-
});
|
|
595
|
-
}
|
|
596
|
-
/** Build the position strategy for the overlay which specifies where to place the menu */
|
|
597
|
-
_getOverlayPositionStrategy() {
|
|
598
|
-
return this._overlay
|
|
599
|
-
.position()
|
|
600
|
-
.flexibleConnectedTo(this._elementRef)
|
|
601
|
-
.withPositions(this._getOverlayPositions());
|
|
602
|
-
}
|
|
603
|
-
/** Determine and return where to position the opened menu relative to the menu item */
|
|
604
|
-
_getOverlayPositions() {
|
|
605
|
-
var _a;
|
|
606
|
-
return ((_a = this.menuPosition) !== null && _a !== void 0 ? _a : (!this._parentMenu || this._parentMenu.orientation === 'horizontal'
|
|
607
|
-
? STANDARD_DROPDOWN_BELOW_POSITIONS
|
|
608
|
-
: STANDARD_DROPDOWN_ADJACENT_POSITIONS));
|
|
609
|
-
}
|
|
610
|
-
/**
|
|
611
|
-
* Get the portal to be attached to the overlay which contains the menu. Allows for the menu
|
|
612
|
-
* content to change dynamically and be reflected in the application.
|
|
613
|
-
*/
|
|
614
|
-
_getPortal() {
|
|
615
|
-
var _a;
|
|
616
|
-
const hasMenuContentChanged = this._menuTemplateRef !== ((_a = this._menuPortal) === null || _a === void 0 ? void 0 : _a.templateRef);
|
|
617
|
-
if (this._menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {
|
|
618
|
-
this._menuPortal = new TemplatePortal(this._menuTemplateRef, this._viewContainerRef, undefined, this.getChildMenuInjector());
|
|
619
|
-
}
|
|
620
|
-
return this._menuPortal;
|
|
621
|
-
}
|
|
622
|
-
/**
|
|
623
|
-
* @return true if if the enclosing parent menu is configured in a vertical orientation.
|
|
624
|
-
*/
|
|
625
|
-
_isParentVertical() {
|
|
626
|
-
var _a;
|
|
627
|
-
return ((_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a.orientation) === 'vertical';
|
|
628
|
-
}
|
|
629
|
-
/**
|
|
630
|
-
* Subscribe to the MenuStack close events if this is a standalone trigger and close out the menu
|
|
631
|
-
* this triggers when requested.
|
|
632
|
-
*/
|
|
633
|
-
_registerCloseHandler() {
|
|
634
|
-
if (!this._parentMenu) {
|
|
635
|
-
this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
|
|
636
|
-
if (item === this.childMenu) {
|
|
637
|
-
this.close();
|
|
638
|
-
}
|
|
639
|
-
});
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
/**
|
|
643
|
-
* Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
|
|
644
|
-
* click occurs outside the menus.
|
|
645
|
-
*/
|
|
646
|
-
_subscribeToOutsideClicks() {
|
|
647
|
-
if (this._overlayRef) {
|
|
648
|
-
this._overlayRef
|
|
649
|
-
.outsidePointerEvents()
|
|
650
|
-
.pipe(takeUntil(this._stopOutsideClicksListener))
|
|
651
|
-
.subscribe(event => {
|
|
652
|
-
if (!isClickInsideMenuOverlay(event.target)) {
|
|
653
|
-
this.menuStack.closeAll();
|
|
654
|
-
}
|
|
655
|
-
});
|
|
656
|
-
}
|
|
657
|
-
}
|
|
658
|
-
}
|
|
659
|
-
CdkMenuItemTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", 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.9", type: CdkMenuItemTrigger, selector: "[cdkMenuTriggerFor]", inputs: { _menuTemplateRef: ["cdkMenuTriggerFor", "_menuTemplateRef"], menuPosition: ["cdkMenuPosition", "menuPosition"] }, outputs: { opened: "cdkMenuOpened", closed: "cdkMenuClosed" }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "keydown": "_toggleOnKeydown($event)", "click": "toggle()" }, properties: { "attr.aria-expanded": "isOpen()" }, classAttribute: "cdk-menu-trigger" }, providers: [
|
|
661
|
-
{ provide: MENU_TRIGGER, useExisting: CdkMenuItemTrigger },
|
|
662
|
-
PARENT_OR_NEW_MENU_STACK_PROVIDER,
|
|
663
|
-
], exportAs: ["cdkMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
|
|
664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
|
|
665
|
-
type: Directive,
|
|
666
|
-
args: [{
|
|
667
|
-
selector: '[cdkMenuTriggerFor]',
|
|
668
|
-
exportAs: 'cdkMenuTriggerFor',
|
|
669
|
-
host: {
|
|
670
|
-
'class': 'cdk-menu-trigger',
|
|
671
|
-
'aria-haspopup': 'menu',
|
|
672
|
-
'(keydown)': '_toggleOnKeydown($event)',
|
|
673
|
-
'(click)': 'toggle()',
|
|
674
|
-
'[attr.aria-expanded]': 'isOpen()',
|
|
675
|
-
},
|
|
676
|
-
inputs: ['_menuTemplateRef: cdkMenuTriggerFor', 'menuPosition: cdkMenuPosition'],
|
|
677
|
-
outputs: ['opened: cdkMenuOpened', 'closed: cdkMenuClosed'],
|
|
678
|
-
providers: [
|
|
679
|
-
{ provide: MENU_TRIGGER, useExisting: CdkMenuItemTrigger },
|
|
680
|
-
PARENT_OR_NEW_MENU_STACK_PROVIDER,
|
|
681
|
-
],
|
|
682
|
-
}]
|
|
683
|
-
}], ctorParameters: function () {
|
|
684
|
-
return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
|
|
685
|
-
type: Inject,
|
|
686
|
-
args: [MENU_STACK]
|
|
687
|
-
}] }, { type: undefined, decorators: [{
|
|
688
|
-
type: Optional
|
|
689
|
-
}, {
|
|
690
|
-
type: Inject,
|
|
691
|
-
args: [CDK_MENU]
|
|
692
|
-
}] }, { type: undefined, decorators: [{
|
|
693
|
-
type: Optional
|
|
694
|
-
}, {
|
|
695
|
-
type: Inject,
|
|
696
|
-
args: [MENU_AIM]
|
|
697
|
-
}] }, { type: i1$1.Directionality, decorators: [{
|
|
698
|
-
type: Optional
|
|
699
|
-
}] }];
|
|
700
|
-
} });
|
|
701
|
-
|
|
702
|
-
/**
|
|
703
|
-
* @license
|
|
704
|
-
* Copyright Google LLC All Rights Reserved.
|
|
705
|
-
*
|
|
706
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
707
|
-
* found in the LICENSE file at https://angular.io/license
|
|
708
|
-
*/
|
|
709
|
-
/**
|
|
710
|
-
* Directive which provides the ability for an element to be focused and navigated to using the
|
|
711
|
-
* keyboard when residing in a CdkMenu, CdkMenuBar, or CdkMenuGroup. It performs user defined
|
|
712
|
-
* behavior when clicked.
|
|
713
|
-
*/
|
|
714
|
-
class CdkMenuItem {
|
|
715
|
-
constructor(_elementRef, _ngZone, _menuStack, _parentMenu, _menuAim, _dir,
|
|
716
|
-
/** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
|
|
717
|
-
// `CdkMenuItem` is commonly used in combination with a `CdkMenuItemTrigger`.
|
|
718
|
-
// tslint:disable-next-line: lightweight-tokens
|
|
719
|
-
_menuTrigger) {
|
|
720
|
-
this._elementRef = _elementRef;
|
|
721
|
-
this._ngZone = _ngZone;
|
|
722
|
-
this._menuStack = _menuStack;
|
|
723
|
-
this._parentMenu = _parentMenu;
|
|
724
|
-
this._menuAim = _menuAim;
|
|
725
|
-
this._dir = _dir;
|
|
726
|
-
this._menuTrigger = _menuTrigger;
|
|
727
|
-
this._disabled = false;
|
|
728
|
-
/**
|
|
729
|
-
* If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse
|
|
730
|
-
* event.
|
|
731
|
-
*/
|
|
732
|
-
this.triggered = new EventEmitter();
|
|
733
|
-
/**
|
|
734
|
-
* The tabindex for this menu item managed internally and used for implementing roving a
|
|
735
|
-
* tab index.
|
|
736
|
-
*/
|
|
737
|
-
this._tabindex = -1;
|
|
738
|
-
/** Emits when the menu item is destroyed. */
|
|
739
|
-
this._destroyed = new Subject();
|
|
740
|
-
this._setupMouseEnter();
|
|
741
|
-
if (this._isStandaloneItem()) {
|
|
742
|
-
this._tabindex = 0;
|
|
743
|
-
}
|
|
744
|
-
}
|
|
745
|
-
/** Whether the CdkMenuItem is disabled - defaults to false */
|
|
746
|
-
get disabled() {
|
|
747
|
-
return this._disabled;
|
|
748
|
-
}
|
|
749
|
-
set disabled(value) {
|
|
750
|
-
this._disabled = coerceBooleanProperty(value);
|
|
751
|
-
}
|
|
752
|
-
/** Place focus on the element. */
|
|
753
|
-
focus() {
|
|
754
|
-
this._elementRef.nativeElement.focus();
|
|
755
|
-
}
|
|
756
|
-
/** Reset the _tabindex to -1. */
|
|
757
|
-
_resetTabIndex() {
|
|
758
|
-
if (!this._isStandaloneItem()) {
|
|
759
|
-
this._tabindex = -1;
|
|
760
|
-
}
|
|
761
|
-
}
|
|
762
|
-
/**
|
|
763
|
-
* Set the tab index to 0 if not disabled and it's a focus event, or a mouse enter if this element
|
|
764
|
-
* is not in a menu bar.
|
|
765
|
-
*/
|
|
766
|
-
_setTabIndex(event) {
|
|
767
|
-
if (this.disabled) {
|
|
768
|
-
return;
|
|
769
|
-
}
|
|
770
|
-
// don't set the tabindex if there are no open sibling or parent menus
|
|
771
|
-
if (!event || !this._menuStack.isEmpty()) {
|
|
772
|
-
this._tabindex = 0;
|
|
773
|
-
}
|
|
774
|
-
}
|
|
775
|
-
/** Whether this menu item is standalone or within a menu or menu bar. */
|
|
776
|
-
_isStandaloneItem() {
|
|
777
|
-
return !this._parentMenu;
|
|
778
|
-
}
|
|
779
|
-
/**
|
|
780
|
-
* If the menu item is not disabled and the element does not have a menu trigger attached, emit
|
|
781
|
-
* on the cdkMenuItemTriggered emitter and close all open menus.
|
|
782
|
-
*/
|
|
783
|
-
trigger() {
|
|
784
|
-
if (!this.disabled && !this.hasMenu()) {
|
|
785
|
-
this.triggered.next();
|
|
786
|
-
this._menuStack.closeAll();
|
|
787
|
-
}
|
|
788
|
-
}
|
|
789
|
-
/** Whether the menu item opens a menu. */
|
|
790
|
-
hasMenu() {
|
|
791
|
-
return !!this._menuTrigger;
|
|
792
|
-
}
|
|
793
|
-
/** Return true if this MenuItem has an attached menu and it is open. */
|
|
794
|
-
isMenuOpen() {
|
|
795
|
-
var _a;
|
|
796
|
-
return !!((_a = this._menuTrigger) === null || _a === void 0 ? void 0 : _a.isOpen());
|
|
797
|
-
}
|
|
798
|
-
/**
|
|
799
|
-
* Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.
|
|
800
|
-
* @return the menu if it is open, otherwise undefined.
|
|
801
|
-
*/
|
|
802
|
-
getMenu() {
|
|
803
|
-
var _a;
|
|
804
|
-
return (_a = this._menuTrigger) === null || _a === void 0 ? void 0 : _a.getMenu();
|
|
805
|
-
}
|
|
806
|
-
/** Get the MenuItemTrigger associated with this element. */
|
|
807
|
-
getMenuTrigger() {
|
|
808
|
-
return this._menuTrigger;
|
|
809
|
-
}
|
|
810
|
-
/** Get the label for this element which is required by the FocusableOption interface. */
|
|
811
|
-
getLabel() {
|
|
812
|
-
var _a;
|
|
813
|
-
return this.typeahead || ((_a = this._elementRef.nativeElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
|
|
814
|
-
}
|
|
815
|
-
/**
|
|
816
|
-
* Handles keyboard events for the menu item, specifically either triggering the user defined
|
|
817
|
-
* callback or opening/closing the current menu based on whether the left or right arrow key was
|
|
818
|
-
* pressed.
|
|
819
|
-
* @param event the keyboard event to handle
|
|
820
|
-
*/
|
|
821
|
-
_onKeydown(event) {
|
|
822
|
-
var _a, _b;
|
|
823
|
-
switch (event.keyCode) {
|
|
824
|
-
case SPACE:
|
|
825
|
-
case ENTER:
|
|
826
|
-
event.preventDefault();
|
|
827
|
-
this.trigger();
|
|
828
|
-
break;
|
|
829
|
-
case RIGHT_ARROW:
|
|
830
|
-
if (this._parentMenu && this._isParentVertical()) {
|
|
831
|
-
if (((_a = this._dir) === null || _a === void 0 ? void 0 : _a.value) === 'rtl') {
|
|
832
|
-
if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
|
|
833
|
-
event.preventDefault();
|
|
834
|
-
this._menuStack.close(this._parentMenu, 1 /* previousItem */);
|
|
835
|
-
}
|
|
836
|
-
}
|
|
837
|
-
else if (!this.hasMenu()) {
|
|
838
|
-
if (this._menuStack.hasInlineMenu()) {
|
|
839
|
-
event.preventDefault();
|
|
840
|
-
this._menuStack.closeAll(0 /* nextItem */);
|
|
841
|
-
}
|
|
842
|
-
}
|
|
843
|
-
}
|
|
844
|
-
break;
|
|
845
|
-
case LEFT_ARROW:
|
|
846
|
-
if (this._parentMenu && this._isParentVertical()) {
|
|
847
|
-
if (((_b = this._dir) === null || _b === void 0 ? void 0 : _b.value) !== 'rtl') {
|
|
848
|
-
if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
|
|
849
|
-
event.preventDefault();
|
|
850
|
-
this._menuStack.close(this._parentMenu, 1 /* previousItem */);
|
|
851
|
-
}
|
|
852
|
-
}
|
|
853
|
-
else if (!this.hasMenu()) {
|
|
854
|
-
if (this._menuStack.hasInlineMenu()) {
|
|
855
|
-
event.preventDefault();
|
|
856
|
-
this._menuStack.closeAll(0 /* nextItem */);
|
|
857
|
-
}
|
|
858
|
-
}
|
|
859
|
-
}
|
|
860
|
-
break;
|
|
861
|
-
}
|
|
862
|
-
}
|
|
863
|
-
/**
|
|
864
|
-
* Subscribe to the mouseenter events and close any sibling menu items if this element is moused
|
|
865
|
-
* into.
|
|
866
|
-
*/
|
|
867
|
-
_setupMouseEnter() {
|
|
868
|
-
if (!this._isStandaloneItem()) {
|
|
869
|
-
const closeOpenSiblings = () => this._ngZone.run(() => this._menuStack.closeSubMenuOf(this._parentMenu));
|
|
870
|
-
this._ngZone.runOutsideAngular(() => fromEvent(this._elementRef.nativeElement, 'mouseenter')
|
|
871
|
-
.pipe(filter(() => !this._menuStack.isEmpty() && !this.hasMenu()), takeUntil(this._destroyed))
|
|
872
|
-
.subscribe(() => {
|
|
873
|
-
if (this._menuAim) {
|
|
874
|
-
this._menuAim.toggle(closeOpenSiblings);
|
|
875
|
-
}
|
|
876
|
-
else {
|
|
877
|
-
closeOpenSiblings();
|
|
878
|
-
}
|
|
879
|
-
}));
|
|
880
|
-
}
|
|
881
|
-
}
|
|
882
|
-
/**
|
|
883
|
-
* Return true if the enclosing parent menu is configured in a horizontal orientation, false
|
|
884
|
-
* otherwise or if no parent.
|
|
885
|
-
*/
|
|
886
|
-
_isParentVertical() {
|
|
887
|
-
var _a;
|
|
888
|
-
return ((_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a.orientation) === 'vertical';
|
|
889
|
-
}
|
|
890
|
-
ngOnDestroy() {
|
|
891
|
-
this._destroyed.next();
|
|
892
|
-
}
|
|
893
|
-
}
|
|
894
|
-
CdkMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItem, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK }, { 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 });
|
|
895
|
-
CdkMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: { disabled: "disabled", typeahead: "typeahead" }, 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 });
|
|
896
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItem, decorators: [{
|
|
897
|
-
type: Directive,
|
|
898
|
-
args: [{
|
|
899
|
-
selector: '[cdkMenuItem]',
|
|
900
|
-
exportAs: 'cdkMenuItem',
|
|
901
|
-
host: {
|
|
902
|
-
'[tabindex]': '_tabindex',
|
|
903
|
-
'type': 'button',
|
|
904
|
-
'role': 'menuitem',
|
|
905
|
-
'class': 'cdk-menu-item',
|
|
906
|
-
'[attr.aria-disabled]': 'disabled || null',
|
|
907
|
-
'(blur)': '_resetTabIndex()',
|
|
908
|
-
'(mouseout)': '_resetTabIndex()',
|
|
909
|
-
'(focus)': '_setTabIndex()',
|
|
910
|
-
'(mouseenter)': '_setTabIndex($event)',
|
|
911
|
-
'(click)': 'trigger()',
|
|
912
|
-
'(keydown)': '_onKeydown($event)',
|
|
913
|
-
},
|
|
914
|
-
}]
|
|
915
|
-
}], ctorParameters: function () {
|
|
916
|
-
return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
|
|
917
|
-
type: Inject,
|
|
918
|
-
args: [MENU_STACK]
|
|
919
|
-
}] }, { type: undefined, decorators: [{
|
|
920
|
-
type: Optional
|
|
921
|
-
}, {
|
|
922
|
-
type: Inject,
|
|
923
|
-
args: [CDK_MENU]
|
|
924
|
-
}] }, { type: undefined, decorators: [{
|
|
925
|
-
type: Optional
|
|
926
|
-
}, {
|
|
927
|
-
type: Inject,
|
|
928
|
-
args: [MENU_AIM]
|
|
929
|
-
}] }, { type: i1$1.Directionality, decorators: [{
|
|
930
|
-
type: Optional
|
|
931
|
-
}] }, { type: CdkMenuItemTrigger, decorators: [{
|
|
932
|
-
type: Self
|
|
933
|
-
}, {
|
|
934
|
-
type: Optional
|
|
935
|
-
}] }];
|
|
936
|
-
}, propDecorators: { disabled: [{
|
|
937
|
-
type: Input
|
|
938
|
-
}], typeahead: [{
|
|
939
|
-
type: Input
|
|
940
|
-
}], triggered: [{
|
|
941
|
-
type: Output,
|
|
942
|
-
args: ['cdkMenuItemTriggered']
|
|
943
|
-
}] } });
|
|
944
|
-
|
|
945
|
-
/**
|
|
946
|
-
* @license
|
|
947
|
-
* Copyright Google LLC All Rights Reserved.
|
|
948
|
-
*
|
|
949
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
950
|
-
* found in the LICENSE file at https://angular.io/license
|
|
951
|
-
*/
|
|
952
|
-
/** Counter used to set a unique id and name for a selectable item */
|
|
953
|
-
let nextId = 0;
|
|
954
|
-
/**
|
|
955
|
-
* Base class providing checked state for MenuItems along with outputting a clicked event when the
|
|
956
|
-
* element is triggered. It provides functionality for selectable elements.
|
|
957
|
-
*/
|
|
958
|
-
class CdkMenuItemSelectable extends CdkMenuItem {
|
|
959
|
-
constructor() {
|
|
960
|
-
super(...arguments);
|
|
961
|
-
/** Event emitted when the selectable item is clicked */
|
|
962
|
-
this.toggled = new EventEmitter();
|
|
963
|
-
this._checked = false;
|
|
964
|
-
/** The name of the selectable element with a default value */
|
|
965
|
-
this.name = `cdk-selectable-item-${nextId++}`;
|
|
966
|
-
/** The id of the selectable element with a default value */
|
|
967
|
-
this.id = `cdk-selectable-item-${nextId++}`;
|
|
968
|
-
}
|
|
969
|
-
/** Whether the element is checked */
|
|
970
|
-
get checked() {
|
|
971
|
-
return this._checked;
|
|
972
|
-
}
|
|
973
|
-
set checked(value) {
|
|
974
|
-
this._checked = coerceBooleanProperty(value);
|
|
975
|
-
}
|
|
976
|
-
/** If the element is not disabled emit the click event */
|
|
977
|
-
trigger() {
|
|
978
|
-
if (!this.disabled) {
|
|
979
|
-
this.toggled.next(this);
|
|
980
|
-
}
|
|
981
|
-
}
|
|
982
|
-
}
|
|
983
|
-
CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
984
|
-
CdkMenuItemSelectable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItemSelectable, inputs: { checked: "checked", name: "name", id: "id" }, outputs: { toggled: "cdkMenuItemToggled" }, usesInheritance: true, ngImport: i0 });
|
|
985
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
|
|
986
|
-
type: Directive
|
|
987
|
-
}], propDecorators: { toggled: [{
|
|
988
|
-
type: Output,
|
|
989
|
-
args: ['cdkMenuItemToggled']
|
|
990
|
-
}], checked: [{
|
|
991
|
-
type: Input
|
|
992
|
-
}], name: [{
|
|
993
|
-
type: Input
|
|
994
|
-
}], id: [{
|
|
995
|
-
type: Input
|
|
996
|
-
}] } });
|
|
997
|
-
|
|
998
|
-
/**
|
|
999
|
-
* @license
|
|
1000
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1001
|
-
*
|
|
1002
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1003
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1004
|
-
*/
|
|
1005
|
-
/**
|
|
1006
|
-
* Directive which acts as a grouping container for `CdkMenuItem` instances with
|
|
1007
|
-
* `role="menuitemradio"`, similar to a `role="radiogroup"` element.
|
|
1008
|
-
*/
|
|
1009
|
-
class CdkMenuGroup {
|
|
1010
|
-
constructor() {
|
|
1011
|
-
/** Emits the element when checkbox or radiobutton state changed */
|
|
1012
|
-
this.change = new EventEmitter();
|
|
1013
|
-
/** Emits when the _selectableItems QueryList triggers a change */
|
|
1014
|
-
this._selectableChanges = new EventEmitter();
|
|
1015
|
-
}
|
|
1016
|
-
ngAfterContentInit() {
|
|
1017
|
-
this._registerMenuSelectionListeners();
|
|
1018
|
-
}
|
|
1019
|
-
ngOnDestroy() {
|
|
1020
|
-
this._selectableChanges.next();
|
|
1021
|
-
this._selectableChanges.complete();
|
|
1022
|
-
}
|
|
1023
|
-
/**
|
|
1024
|
-
* Register the child selectable elements with the change emitter and ensure any new child
|
|
1025
|
-
* elements do so as well.
|
|
1026
|
-
*/
|
|
1027
|
-
_registerMenuSelectionListeners() {
|
|
1028
|
-
this._selectableItems.forEach(selectable => this._registerClickListener(selectable));
|
|
1029
|
-
this._selectableItems.changes.subscribe((selectableItems) => {
|
|
1030
|
-
this._selectableChanges.next();
|
|
1031
|
-
selectableItems.forEach(selectable => this._registerClickListener(selectable));
|
|
1032
|
-
});
|
|
1033
|
-
}
|
|
1034
|
-
/** Register each selectable to emit on the change Emitter when clicked */
|
|
1035
|
-
_registerClickListener(selectable) {
|
|
1036
|
-
selectable.toggled
|
|
1037
|
-
.pipe(takeUntil(this._selectableChanges))
|
|
1038
|
-
.subscribe(() => this.change.next(selectable));
|
|
1039
|
-
}
|
|
1040
|
-
}
|
|
1041
|
-
CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1042
|
-
CdkMenuGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", 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 });
|
|
1043
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuGroup, decorators: [{
|
|
1044
|
-
type: Directive,
|
|
1045
|
-
args: [{
|
|
1046
|
-
selector: '[cdkMenuGroup]',
|
|
1047
|
-
exportAs: 'cdkMenuGroup',
|
|
1048
|
-
host: {
|
|
1049
|
-
'role': 'group',
|
|
1050
|
-
'class': 'cdk-menu-group',
|
|
1051
|
-
},
|
|
1052
|
-
providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }],
|
|
1053
|
-
}]
|
|
1054
|
-
}], propDecorators: { change: [{
|
|
1055
|
-
type: Output
|
|
1056
|
-
}], _selectableItems: [{
|
|
1057
|
-
type: ContentChildren,
|
|
1058
|
-
args: [CdkMenuItemSelectable, { descendants: true }]
|
|
1059
|
-
}] } });
|
|
1060
|
-
|
|
1061
|
-
/**
|
|
1062
|
-
* @license
|
|
1063
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1064
|
-
*
|
|
1065
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1066
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1067
|
-
*/
|
|
1068
|
-
/**
|
|
1069
|
-
* PointerFocusTracker keeps track of the currently active item under mouse focus. It also has
|
|
1070
|
-
* observables which emit when the users mouse enters and leaves a tracked element.
|
|
1071
|
-
*/
|
|
1072
|
-
class PointerFocusTracker {
|
|
1073
|
-
constructor(_items) {
|
|
1074
|
-
this._items = _items;
|
|
1075
|
-
/** Emits when an element is moused into. */
|
|
1076
|
-
this.entered = this._getItemPointerEntries();
|
|
1077
|
-
/** Emits when an element is moused out. */
|
|
1078
|
-
this.exited = this._getItemPointerExits();
|
|
1079
|
-
/** Emits when this is destroyed. */
|
|
1080
|
-
this._destroyed = new Subject();
|
|
1081
|
-
this.entered.subscribe(element => (this.activeElement = element));
|
|
1082
|
-
this.exited.subscribe(() => {
|
|
1083
|
-
this.previousElement = this.activeElement;
|
|
1084
|
-
this.activeElement = undefined;
|
|
1085
|
-
});
|
|
1086
|
-
}
|
|
1087
|
-
/**
|
|
1088
|
-
* Gets a stream of pointer (mouse) entries into the given items.
|
|
1089
|
-
* This should typically run outside the Angular zone.
|
|
1090
|
-
*/
|
|
1091
|
-
_getItemPointerEntries() {
|
|
1092
|
-
return defer(() => this._items.changes.pipe(startWith(this._items), mergeMap((list) => list.map(element => fromEvent(element._elementRef.nativeElement, 'mouseenter').pipe(mapTo(element), takeUntil(this._items.changes)))), mergeAll()));
|
|
1093
|
-
}
|
|
1094
|
-
/**
|
|
1095
|
-
* Gets a stream of pointer (mouse) exits out of the given items.
|
|
1096
|
-
* This should typically run outside the Angular zone.
|
|
1097
|
-
*/
|
|
1098
|
-
_getItemPointerExits() {
|
|
1099
|
-
return defer(() => this._items.changes.pipe(startWith(this._items), mergeMap((list) => list.map(element => fromEvent(element._elementRef.nativeElement, 'mouseout').pipe(mapTo(element), takeUntil(this._items.changes)))), mergeAll()));
|
|
1100
|
-
}
|
|
1101
|
-
/** Stop the managers listeners. */
|
|
1102
|
-
destroy() {
|
|
1103
|
-
this._destroyed.next();
|
|
1104
|
-
this._destroyed.complete();
|
|
1105
|
-
}
|
|
1106
|
-
}
|
|
1107
|
-
|
|
1108
|
-
/**
|
|
1109
|
-
* @license
|
|
1110
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1111
|
-
*
|
|
1112
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1113
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1114
|
-
*/
|
|
1115
|
-
class CdkMenuBase extends CdkMenuGroup {
|
|
1116
|
-
constructor(_elementRef, menuStack, dir) {
|
|
1117
|
-
super();
|
|
1118
|
-
this._elementRef = _elementRef;
|
|
1119
|
-
this.menuStack = menuStack;
|
|
1120
|
-
this.dir = dir;
|
|
1121
|
-
/**
|
|
1122
|
-
* Sets the aria-orientation attribute and determines where menus will be opened.
|
|
1123
|
-
* Does not affect styling/layout.
|
|
1124
|
-
*/
|
|
1125
|
-
this.orientation = 'vertical';
|
|
1126
|
-
/** Emits when the MenuBar is destroyed. */
|
|
1127
|
-
this.destroyed = new Subject();
|
|
1128
|
-
}
|
|
1129
|
-
ngAfterContentInit() {
|
|
1130
|
-
super.ngAfterContentInit();
|
|
1131
|
-
this._setKeyManager();
|
|
1132
|
-
this._subscribeToMenuOpen();
|
|
1133
|
-
this._subscribeToMenuStackClosed();
|
|
1134
|
-
}
|
|
1135
|
-
ngOnDestroy() {
|
|
1136
|
-
super.ngOnDestroy();
|
|
1137
|
-
this.destroyed.next();
|
|
1138
|
-
this.destroyed.complete();
|
|
1139
|
-
}
|
|
1140
|
-
/** Place focus on the first MenuItem in the menu and set the focus origin. */
|
|
1141
|
-
focusFirstItem(focusOrigin = 'program') {
|
|
1142
|
-
this.keyManager.setFocusOrigin(focusOrigin);
|
|
1143
|
-
this.keyManager.setFirstItemActive();
|
|
1144
|
-
}
|
|
1145
|
-
/** Place focus on the last MenuItem in the menu and set the focus origin. */
|
|
1146
|
-
focusLastItem(focusOrigin = 'program') {
|
|
1147
|
-
this.keyManager.setFocusOrigin(focusOrigin);
|
|
1148
|
-
this.keyManager.setLastItemActive();
|
|
1149
|
-
}
|
|
1150
|
-
/** Return true if this menu has been configured in a horizontal orientation. */
|
|
1151
|
-
isHorizontal() {
|
|
1152
|
-
return this.orientation === 'horizontal';
|
|
1153
|
-
}
|
|
1154
|
-
/** Return true if the MenuBar has an open submenu. */
|
|
1155
|
-
hasOpenSubmenu() {
|
|
1156
|
-
return !!this.openItem;
|
|
1157
|
-
}
|
|
1158
|
-
/**
|
|
1159
|
-
* Close the open menu if the current active item opened the requested MenuStackItem.
|
|
1160
|
-
* @param item the MenuStackItem requested to be closed.
|
|
1161
|
-
*/
|
|
1162
|
-
closeOpenMenu(menu) {
|
|
1163
|
-
var _a, _b, _c;
|
|
1164
|
-
const keyManager = this.keyManager;
|
|
1165
|
-
const trigger = this.openItem;
|
|
1166
|
-
if (menu === ((_a = trigger === null || trigger === void 0 ? void 0 : trigger.getMenuTrigger()) === null || _a === void 0 ? void 0 : _a.getMenu())) {
|
|
1167
|
-
(_b = trigger === null || trigger === void 0 ? void 0 : trigger.getMenuTrigger()) === null || _b === void 0 ? void 0 : _b.close();
|
|
1168
|
-
// If the user has moused over a sibling item we want to focus the element under mouse focus
|
|
1169
|
-
// not the trigger which previously opened the now closed menu.
|
|
1170
|
-
if (trigger) {
|
|
1171
|
-
keyManager.setActiveItem(((_c = this.pointerTracker) === null || _c === void 0 ? void 0 : _c.activeElement) || trigger);
|
|
1172
|
-
}
|
|
1173
|
-
}
|
|
1174
|
-
}
|
|
1175
|
-
/** Setup the FocusKeyManager with the correct orientation for the menu. */
|
|
1176
|
-
_setKeyManager() {
|
|
1177
|
-
var _a;
|
|
1178
|
-
this.keyManager = new FocusKeyManager(this.items).withWrap().withTypeAhead().withHomeAndEnd();
|
|
1179
|
-
if (this.isHorizontal()) {
|
|
1180
|
-
this.keyManager.withHorizontalOrientation(((_a = this.dir) === null || _a === void 0 ? void 0 : _a.value) || 'ltr');
|
|
1181
|
-
}
|
|
1182
|
-
else {
|
|
1183
|
-
this.keyManager.withVerticalOrientation();
|
|
1184
|
-
}
|
|
1185
|
-
}
|
|
1186
|
-
/**
|
|
1187
|
-
* Subscribe to the menu trigger's open events in order to track the trigger which opened the menu
|
|
1188
|
-
* and stop tracking it when the menu is closed.
|
|
1189
|
-
*/
|
|
1190
|
-
_subscribeToMenuOpen() {
|
|
1191
|
-
const exitCondition = merge(this.items.changes, this.destroyed);
|
|
1192
|
-
this.items.changes
|
|
1193
|
-
.pipe(startWith(this.items), mergeMap((list) => list
|
|
1194
|
-
.filter(item => item.hasMenu())
|
|
1195
|
-
.map(item => item.getMenuTrigger().opened.pipe(mapTo(item), takeUntil(exitCondition)))), mergeAll(), switchMap((item) => {
|
|
1196
|
-
this.openItem = item;
|
|
1197
|
-
return item.getMenuTrigger().closed;
|
|
1198
|
-
}), takeUntil(this.destroyed))
|
|
1199
|
-
.subscribe(() => (this.openItem = undefined));
|
|
1200
|
-
}
|
|
1201
|
-
/** Subscribe to the MenuStack close and empty observables. */
|
|
1202
|
-
_subscribeToMenuStackClosed() {
|
|
1203
|
-
this.menuStack.closed
|
|
1204
|
-
.pipe(takeUntil(this.destroyed))
|
|
1205
|
-
.subscribe(item => this.closeOpenMenu(item));
|
|
1206
|
-
}
|
|
1207
|
-
}
|
|
1208
|
-
CdkMenuBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuBase, deps: [{ token: i0.ElementRef }, { token: MENU_STACK }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1209
|
-
CdkMenuBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuBase, host: { listeners: { "focus": "focusFirstItem()" }, properties: { "attr.aria-orientation": "orientation" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true }], usesInheritance: true, ngImport: i0 });
|
|
1210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuBase, decorators: [{
|
|
1211
|
-
type: Directive,
|
|
1212
|
-
args: [{
|
|
1213
|
-
host: {
|
|
1214
|
-
'[attr.aria-orientation]': 'orientation',
|
|
1215
|
-
'(focus)': 'focusFirstItem()',
|
|
1216
|
-
},
|
|
1217
|
-
}]
|
|
1218
|
-
}], ctorParameters: function () {
|
|
1219
|
-
return [{ type: i0.ElementRef }, { type: MenuStack, decorators: [{
|
|
1220
|
-
type: Inject,
|
|
1221
|
-
args: [MENU_STACK]
|
|
1222
|
-
}] }, { type: i1$1.Directionality, decorators: [{
|
|
1223
|
-
type: Optional
|
|
1224
|
-
}] }];
|
|
1225
|
-
}, propDecorators: { items: [{
|
|
1226
|
-
type: ContentChildren,
|
|
1227
|
-
args: [CdkMenuItem, { descendants: true }]
|
|
1228
|
-
}] } });
|
|
1229
|
-
|
|
1230
|
-
/**
|
|
1231
|
-
* @license
|
|
1232
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1233
|
-
*
|
|
1234
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1235
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1236
|
-
*/
|
|
1237
|
-
/**
|
|
1238
|
-
* Directive which configures the element as a Menu which should contain child elements marked as
|
|
1239
|
-
* CdkMenuItem or CdkMenuGroup. Sets the appropriate role and aria-attributes for a menu and
|
|
1240
|
-
* contains accessible keyboard and mouse handling logic.
|
|
1241
|
-
*
|
|
1242
|
-
* It also acts as a RadioGroup for elements marked with role `menuitemradio`.
|
|
1243
|
-
*/
|
|
1244
|
-
class CdkMenu extends CdkMenuBase {
|
|
1245
|
-
constructor(_ngZone, elementRef, menuStack, _parentTrigger, _menuAim, dir) {
|
|
1246
|
-
var _a;
|
|
1247
|
-
super(elementRef, menuStack, dir);
|
|
1248
|
-
this._ngZone = _ngZone;
|
|
1249
|
-
this._parentTrigger = _parentTrigger;
|
|
1250
|
-
this._menuAim = _menuAim;
|
|
1251
|
-
/** Event emitted when the menu is closed. */
|
|
1252
|
-
this.closed = new EventEmitter();
|
|
1253
|
-
this.destroyed.subscribe(this.closed);
|
|
1254
|
-
if (!this._isInline()) {
|
|
1255
|
-
this.menuStack.push(this);
|
|
1256
|
-
}
|
|
1257
|
-
(_a = this._parentTrigger) === null || _a === void 0 ? void 0 : _a.registerChildMenu(this);
|
|
1258
|
-
}
|
|
1259
|
-
ngAfterContentInit() {
|
|
1260
|
-
var _a;
|
|
1261
|
-
super.ngAfterContentInit();
|
|
1262
|
-
this._completeChangeEmitter();
|
|
1263
|
-
this._subscribeToMenuStackEmptied();
|
|
1264
|
-
this._subscribeToMouseManager();
|
|
1265
|
-
(_a = this._menuAim) === null || _a === void 0 ? void 0 : _a.initialize(this, this.pointerTracker);
|
|
1266
|
-
}
|
|
1267
|
-
ngOnDestroy() {
|
|
1268
|
-
var _a;
|
|
1269
|
-
super.ngOnDestroy();
|
|
1270
|
-
this.closed.complete();
|
|
1271
|
-
(_a = this.pointerTracker) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
1272
|
-
}
|
|
1273
|
-
/** Handle keyboard events for the Menu. */
|
|
1274
|
-
_handleKeyEvent(event) {
|
|
1275
|
-
const keyManager = this.keyManager;
|
|
1276
|
-
switch (event.keyCode) {
|
|
1277
|
-
case LEFT_ARROW:
|
|
1278
|
-
case RIGHT_ARROW:
|
|
1279
|
-
if (this.isHorizontal()) {
|
|
1280
|
-
event.preventDefault();
|
|
1281
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1282
|
-
keyManager.onKeydown(event);
|
|
1283
|
-
}
|
|
1284
|
-
break;
|
|
1285
|
-
case UP_ARROW:
|
|
1286
|
-
case DOWN_ARROW:
|
|
1287
|
-
if (!this.isHorizontal()) {
|
|
1288
|
-
event.preventDefault();
|
|
1289
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1290
|
-
keyManager.onKeydown(event);
|
|
1291
|
-
}
|
|
1292
|
-
break;
|
|
1293
|
-
case ESCAPE:
|
|
1294
|
-
if (!hasModifierKey(event)) {
|
|
1295
|
-
event.preventDefault();
|
|
1296
|
-
this.menuStack.close(this, 2 /* currentItem */);
|
|
1297
|
-
}
|
|
1298
|
-
break;
|
|
1299
|
-
case TAB:
|
|
1300
|
-
this.menuStack.closeAll();
|
|
1301
|
-
break;
|
|
1302
|
-
default:
|
|
1303
|
-
keyManager.onKeydown(event);
|
|
1304
|
-
}
|
|
1305
|
-
}
|
|
1306
|
-
/**
|
|
1307
|
-
* Complete the change emitter if there are any nested MenuGroups or register to complete the
|
|
1308
|
-
* change emitter if a MenuGroup is rendered at some point
|
|
1309
|
-
*/
|
|
1310
|
-
// TODO(mmalerba): This doesnt' quite work. It causes change events to stop
|
|
1311
|
-
// firing for radio items directly in the menu if a second group of options
|
|
1312
|
-
// is added in a menu-group.
|
|
1313
|
-
_completeChangeEmitter() {
|
|
1314
|
-
if (this._hasNestedGroups()) {
|
|
1315
|
-
this.change.complete();
|
|
1316
|
-
}
|
|
1317
|
-
else {
|
|
1318
|
-
this._nestedGroups.changes.pipe(take(1)).subscribe(() => this.change.complete());
|
|
1319
|
-
}
|
|
1320
|
-
}
|
|
1321
|
-
/** Return true if there are nested CdkMenuGroup elements within the Menu */
|
|
1322
|
-
_hasNestedGroups() {
|
|
1323
|
-
// view engine has a bug where @ContentChildren will return the current element
|
|
1324
|
-
// along with children if the selectors match - not just the children.
|
|
1325
|
-
// Here, if there is at least one element, we check to see if the first element is a CdkMenu in
|
|
1326
|
-
// order to ensure that we return true iff there are child CdkMenuGroup elements.
|
|
1327
|
-
return this._nestedGroups.length > 0 && !(this._nestedGroups.first instanceof CdkMenu);
|
|
1328
|
-
}
|
|
1329
|
-
/**
|
|
1330
|
-
* Set the PointerFocusTracker and ensure that when mouse focus changes the key manager is updated
|
|
1331
|
-
* with the latest menu item under mouse focus.
|
|
1332
|
-
*/
|
|
1333
|
-
_subscribeToMouseManager() {
|
|
1334
|
-
this._ngZone.runOutsideAngular(() => {
|
|
1335
|
-
this.pointerTracker = new PointerFocusTracker(this.items);
|
|
1336
|
-
this.pointerTracker.entered
|
|
1337
|
-
.pipe(takeUntil(this.closed))
|
|
1338
|
-
.subscribe(item => this.keyManager.setActiveItem(item));
|
|
1339
|
-
});
|
|
1340
|
-
}
|
|
1341
|
-
/** Set focus the either the current, previous or next item based on the FocusNext event. */
|
|
1342
|
-
_toggleMenuFocus(event) {
|
|
1343
|
-
const keyManager = this.keyManager;
|
|
1344
|
-
switch (event) {
|
|
1345
|
-
case 0 /* nextItem */:
|
|
1346
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1347
|
-
keyManager.setNextItemActive();
|
|
1348
|
-
break;
|
|
1349
|
-
case 1 /* previousItem */:
|
|
1350
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1351
|
-
keyManager.setPreviousItemActive();
|
|
1352
|
-
break;
|
|
1353
|
-
case 2 /* currentItem */:
|
|
1354
|
-
if (keyManager.activeItem) {
|
|
1355
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1356
|
-
keyManager.setActiveItem(keyManager.activeItem);
|
|
1357
|
-
}
|
|
1358
|
-
break;
|
|
1359
|
-
}
|
|
1360
|
-
}
|
|
1361
|
-
/**
|
|
1362
|
-
* Return true if this menu is an inline menu. That is, it does not exist in a pop-up and is
|
|
1363
|
-
* always visible in the dom.
|
|
1364
|
-
*/
|
|
1365
|
-
_isInline() {
|
|
1366
|
-
return !this._parentTrigger;
|
|
1367
|
-
}
|
|
1368
|
-
_subscribeToMenuStackEmptied() {
|
|
1369
|
-
this.menuStack.emptied
|
|
1370
|
-
.pipe(takeUntil(this.destroyed))
|
|
1371
|
-
.subscribe(event => this._toggleMenuFocus(event));
|
|
1372
|
-
}
|
|
1373
|
-
}
|
|
1374
|
-
CdkMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenu, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_STACK }, { token: MENU_TRIGGER, optional: true }, { token: MENU_AIM, optional: true, self: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1375
|
-
CdkMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenu, selector: "[cdkMenu]", outputs: { closed: "closed" }, host: { attributes: { "role": "menu" }, listeners: { "keydown": "_handleKeyEvent($event)" }, properties: { "tabindex": "_isInline() ? 0 : null", "class.cdk-menu-inline": "_isInline()" }, classAttribute: "cdk-menu" }, providers: [
|
|
1376
|
-
{ provide: CdkMenuGroup, useExisting: CdkMenu },
|
|
1377
|
-
{ provide: CDK_MENU, useExisting: CdkMenu },
|
|
1378
|
-
PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER,
|
|
1379
|
-
], queries: [{ propertyName: "_nestedGroups", predicate: CdkMenuGroup, descendants: true }], exportAs: ["cdkMenu"], usesInheritance: true, ngImport: i0 });
|
|
1380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenu, decorators: [{
|
|
1381
|
-
type: Directive,
|
|
1382
|
-
args: [{
|
|
1383
|
-
selector: '[cdkMenu]',
|
|
1384
|
-
exportAs: 'cdkMenu',
|
|
1385
|
-
host: {
|
|
1386
|
-
'role': 'menu',
|
|
1387
|
-
'class': 'cdk-menu',
|
|
1388
|
-
'[tabindex]': '_isInline() ? 0 : null',
|
|
1389
|
-
'[class.cdk-menu-inline]': '_isInline()',
|
|
1390
|
-
'(keydown)': '_handleKeyEvent($event)',
|
|
1391
|
-
},
|
|
1392
|
-
providers: [
|
|
1393
|
-
{ provide: CdkMenuGroup, useExisting: CdkMenu },
|
|
1394
|
-
{ provide: CDK_MENU, useExisting: CdkMenu },
|
|
1395
|
-
PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER,
|
|
1396
|
-
],
|
|
1397
|
-
}]
|
|
1398
|
-
}], ctorParameters: function () {
|
|
1399
|
-
return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: MenuStack, decorators: [{
|
|
1400
|
-
type: Inject,
|
|
1401
|
-
args: [MENU_STACK]
|
|
1402
|
-
}] }, { type: MenuTrigger, decorators: [{
|
|
1403
|
-
type: Optional
|
|
1404
|
-
}, {
|
|
1405
|
-
type: Inject,
|
|
1406
|
-
args: [MENU_TRIGGER]
|
|
1407
|
-
}] }, { type: undefined, decorators: [{
|
|
1408
|
-
type: Self
|
|
1409
|
-
}, {
|
|
1410
|
-
type: Optional
|
|
1411
|
-
}, {
|
|
1412
|
-
type: Inject,
|
|
1413
|
-
args: [MENU_AIM]
|
|
1414
|
-
}] }, { type: i1$1.Directionality, decorators: [{
|
|
1415
|
-
type: Optional
|
|
1416
|
-
}] }];
|
|
1417
|
-
}, propDecorators: { closed: [{
|
|
1418
|
-
type: Output
|
|
1419
|
-
}], _nestedGroups: [{
|
|
1420
|
-
type: ContentChildren,
|
|
1421
|
-
args: [CdkMenuGroup, { descendants: true }]
|
|
1422
|
-
}] } });
|
|
1423
|
-
|
|
1424
|
-
/**
|
|
1425
|
-
* @license
|
|
1426
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1427
|
-
*
|
|
1428
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1429
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1430
|
-
*/
|
|
1431
|
-
/**
|
|
1432
|
-
* Directive applied to an element which configures it as a MenuBar by setting the appropriate
|
|
1433
|
-
* role, aria attributes, and accessible keyboard and mouse handling logic. The component that
|
|
1434
|
-
* this directive is applied to should contain components marked with CdkMenuItem.
|
|
1435
|
-
*
|
|
1436
|
-
*/
|
|
1437
|
-
class CdkMenuBar extends CdkMenuBase {
|
|
1438
|
-
constructor(_ngZone, elementRef, menuStack, _menuAim, dir) {
|
|
1439
|
-
super(elementRef, menuStack, dir);
|
|
1440
|
-
this._ngZone = _ngZone;
|
|
1441
|
-
this._menuAim = _menuAim;
|
|
1442
|
-
this.orientation = 'horizontal';
|
|
1443
|
-
}
|
|
1444
|
-
ngAfterContentInit() {
|
|
1445
|
-
var _a;
|
|
1446
|
-
super.ngAfterContentInit();
|
|
1447
|
-
this._subscribeToMenuStackEmptied();
|
|
1448
|
-
this._subscribeToMouseManager();
|
|
1449
|
-
(_a = this._menuAim) === null || _a === void 0 ? void 0 : _a.initialize(this, this.pointerTracker);
|
|
1450
|
-
}
|
|
1451
|
-
ngOnDestroy() {
|
|
1452
|
-
var _a;
|
|
1453
|
-
super.ngOnDestroy();
|
|
1454
|
-
(_a = this.pointerTracker) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
1455
|
-
}
|
|
1456
|
-
/**
|
|
1457
|
-
* Handle keyboard events, specifically changing the focused element and/or toggling the active
|
|
1458
|
-
* items menu.
|
|
1459
|
-
* @param event the KeyboardEvent to handle.
|
|
1460
|
-
*/
|
|
1461
|
-
_handleKeyEvent(event) {
|
|
1462
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
1463
|
-
const keyManager = this.keyManager;
|
|
1464
|
-
switch (event.keyCode) {
|
|
1465
|
-
case UP_ARROW:
|
|
1466
|
-
case DOWN_ARROW:
|
|
1467
|
-
case LEFT_ARROW:
|
|
1468
|
-
case RIGHT_ARROW:
|
|
1469
|
-
const horizontalArrows = event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW;
|
|
1470
|
-
// For a horizontal menu if the left/right keys were clicked, or a vertical menu if the
|
|
1471
|
-
// up/down keys were clicked: if the current menu is open, close it then focus and open the
|
|
1472
|
-
// next menu.
|
|
1473
|
-
if ((this.isHorizontal() && horizontalArrows) ||
|
|
1474
|
-
(!this.isHorizontal() && !horizontalArrows)) {
|
|
1475
|
-
event.preventDefault();
|
|
1476
|
-
const prevIsOpen = (_a = keyManager.activeItem) === null || _a === void 0 ? void 0 : _a.isMenuOpen();
|
|
1477
|
-
(_c = (_b = keyManager.activeItem) === null || _b === void 0 ? void 0 : _b.getMenuTrigger()) === null || _c === void 0 ? void 0 : _c.close();
|
|
1478
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1479
|
-
keyManager.onKeydown(event);
|
|
1480
|
-
if (prevIsOpen) {
|
|
1481
|
-
(_e = (_d = keyManager.activeItem) === null || _d === void 0 ? void 0 : _d.getMenuTrigger()) === null || _e === void 0 ? void 0 : _e.open();
|
|
1482
|
-
}
|
|
1483
|
-
}
|
|
1484
|
-
break;
|
|
1485
|
-
case ESCAPE:
|
|
1486
|
-
event.preventDefault();
|
|
1487
|
-
(_g = (_f = keyManager.activeItem) === null || _f === void 0 ? void 0 : _f.getMenuTrigger()) === null || _g === void 0 ? void 0 : _g.close();
|
|
1488
|
-
break;
|
|
1489
|
-
case TAB:
|
|
1490
|
-
(_j = (_h = keyManager.activeItem) === null || _h === void 0 ? void 0 : _h.getMenuTrigger()) === null || _j === void 0 ? void 0 : _j.close();
|
|
1491
|
-
break;
|
|
1492
|
-
default:
|
|
1493
|
-
keyManager.onKeydown(event);
|
|
1494
|
-
}
|
|
1495
|
-
}
|
|
1496
|
-
/**
|
|
1497
|
-
* Set the PointerFocusTracker and ensure that when mouse focus changes the key manager is updated
|
|
1498
|
-
* with the latest menu item under mouse focus.
|
|
1499
|
-
*/
|
|
1500
|
-
_subscribeToMouseManager() {
|
|
1501
|
-
this._ngZone.runOutsideAngular(() => {
|
|
1502
|
-
this.pointerTracker = new PointerFocusTracker(this.items);
|
|
1503
|
-
this.pointerTracker.entered.pipe(takeUntil(this.destroyed)).subscribe(item => {
|
|
1504
|
-
if (this.hasOpenSubmenu()) {
|
|
1505
|
-
this.keyManager.setActiveItem(item);
|
|
1506
|
-
}
|
|
1507
|
-
});
|
|
1508
|
-
});
|
|
1509
|
-
}
|
|
1510
|
-
/**
|
|
1511
|
-
* Set focus to either the current, previous or next item based on the FocusNext event, then
|
|
1512
|
-
* open the previous or next item.
|
|
1513
|
-
*/
|
|
1514
|
-
_toggleOpenMenu(event) {
|
|
1515
|
-
var _a, _b, _c, _d;
|
|
1516
|
-
const keyManager = this.keyManager;
|
|
1517
|
-
switch (event) {
|
|
1518
|
-
case 0 /* nextItem */:
|
|
1519
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1520
|
-
keyManager.setNextItemActive();
|
|
1521
|
-
(_b = (_a = keyManager.activeItem) === null || _a === void 0 ? void 0 : _a.getMenuTrigger()) === null || _b === void 0 ? void 0 : _b.open();
|
|
1522
|
-
break;
|
|
1523
|
-
case 1 /* previousItem */:
|
|
1524
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1525
|
-
keyManager.setPreviousItemActive();
|
|
1526
|
-
(_d = (_c = keyManager.activeItem) === null || _c === void 0 ? void 0 : _c.getMenuTrigger()) === null || _d === void 0 ? void 0 : _d.open();
|
|
1527
|
-
break;
|
|
1528
|
-
case 2 /* currentItem */:
|
|
1529
|
-
if (keyManager.activeItem) {
|
|
1530
|
-
keyManager.setFocusOrigin('keyboard');
|
|
1531
|
-
keyManager.setActiveItem(keyManager.activeItem);
|
|
1532
|
-
}
|
|
1533
|
-
break;
|
|
1534
|
-
}
|
|
1535
|
-
}
|
|
1536
|
-
_subscribeToMenuStackEmptied() {
|
|
1537
|
-
var _a;
|
|
1538
|
-
(_a = this.menuStack) === null || _a === void 0 ? void 0 : _a.emptied.pipe(takeUntil(this.destroyed)).subscribe(event => this._toggleOpenMenu(event));
|
|
1539
|
-
}
|
|
1540
|
-
}
|
|
1541
|
-
CdkMenuBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", 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 });
|
|
1542
|
-
CdkMenuBar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuBar, selector: "[cdkMenuBar]", host: { attributes: { "role": "menubar", "tabindex": "0" }, listeners: { "keydown": "_handleKeyEvent($event)" }, classAttribute: "cdk-menu-bar" }, providers: [
|
|
1543
|
-
{ provide: CdkMenuGroup, useExisting: CdkMenuBar },
|
|
1544
|
-
{ provide: CDK_MENU, useExisting: CdkMenuBar },
|
|
1545
|
-
{ provide: MENU_STACK, useFactory: () => MenuStack.inline() },
|
|
1546
|
-
], exportAs: ["cdkMenuBar"], usesInheritance: true, ngImport: i0 });
|
|
1547
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuBar, decorators: [{
|
|
1548
|
-
type: Directive,
|
|
1549
|
-
args: [{
|
|
1550
|
-
selector: '[cdkMenuBar]',
|
|
1551
|
-
exportAs: 'cdkMenuBar',
|
|
1552
|
-
host: {
|
|
1553
|
-
'role': 'menubar',
|
|
1554
|
-
'class': 'cdk-menu-bar',
|
|
1555
|
-
'tabindex': '0',
|
|
1556
|
-
'(keydown)': '_handleKeyEvent($event)',
|
|
1557
|
-
},
|
|
1558
|
-
providers: [
|
|
1559
|
-
{ provide: CdkMenuGroup, useExisting: CdkMenuBar },
|
|
1560
|
-
{ provide: CDK_MENU, useExisting: CdkMenuBar },
|
|
1561
|
-
{ provide: MENU_STACK, useFactory: () => MenuStack.inline() },
|
|
1562
|
-
],
|
|
1563
|
-
}]
|
|
1564
|
-
}], ctorParameters: function () {
|
|
1565
|
-
return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: MenuStack, decorators: [{
|
|
1566
|
-
type: Inject,
|
|
1567
|
-
args: [MENU_STACK]
|
|
1568
|
-
}] }, { type: undefined, decorators: [{
|
|
1569
|
-
type: Self
|
|
1570
|
-
}, {
|
|
1571
|
-
type: Optional
|
|
1572
|
-
}, {
|
|
1573
|
-
type: Inject,
|
|
1574
|
-
args: [MENU_AIM]
|
|
1575
|
-
}] }, { type: i1$1.Directionality, decorators: [{
|
|
1576
|
-
type: Optional
|
|
1577
|
-
}] }];
|
|
1578
|
-
} });
|
|
1579
|
-
|
|
1580
|
-
/**
|
|
1581
|
-
* A directive providing behavior for the "menuitemradio" ARIA role, which behaves similarly to
|
|
1582
|
-
* a conventional radio-button. Any sibling `CdkMenuItemRadio` instances within the same `CdkMenu`
|
|
1583
|
-
* or `CdkMenuGroup` comprise a radio group with unique selection enforced.
|
|
1584
|
-
*/
|
|
1585
|
-
class CdkMenuItemRadio extends CdkMenuItemSelectable {
|
|
1586
|
-
constructor(_selectionDispatcher, element, ngZone, menuStack, parentMenu, menuAim, dir,
|
|
1587
|
-
/** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
|
|
1588
|
-
// `CdkMenuItemRadio` is commonly used in combination with a `CdkMenuItemTrigger`.
|
|
1589
|
-
// tslint:disable-next-line: lightweight-tokens
|
|
1590
|
-
menuTrigger) {
|
|
1591
|
-
super(element, ngZone, menuStack, parentMenu, menuAim, dir, menuTrigger);
|
|
1592
|
-
this._selectionDispatcher = _selectionDispatcher;
|
|
1593
|
-
this._registerDispatcherListener();
|
|
1594
|
-
}
|
|
1595
|
-
/** Configure the unique selection dispatcher listener in order to toggle the checked state */
|
|
1596
|
-
_registerDispatcherListener() {
|
|
1597
|
-
this._removeDispatcherListener = this._selectionDispatcher.listen((id, name) => (this.checked = this.id === id && this.name === name));
|
|
1598
|
-
}
|
|
1599
|
-
/** Toggles the checked state of the radio-button. */
|
|
1600
|
-
trigger() {
|
|
1601
|
-
super.trigger();
|
|
1602
|
-
if (!this.disabled) {
|
|
1603
|
-
this._selectionDispatcher.notify(this.id, this.name);
|
|
1604
|
-
}
|
|
1605
|
-
}
|
|
1606
|
-
ngOnDestroy() {
|
|
1607
|
-
super.ngOnDestroy();
|
|
1608
|
-
this._removeDispatcherListener();
|
|
1609
|
-
}
|
|
1610
|
-
}
|
|
1611
|
-
CdkMenuItemRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemRadio, deps: [{ token: i1$2.UniqueSelectionDispatcher }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK }, { 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 });
|
|
1612
|
-
CdkMenuItemRadio.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItemRadio, selector: "[cdkMenuItemRadio]", host: { attributes: { "type": "button", "role": "menuitemradio" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
|
|
1613
|
-
{ provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
|
|
1614
|
-
{ provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
|
|
1615
|
-
], exportAs: ["cdkMenuItemRadio"], usesInheritance: true, ngImport: i0 });
|
|
1616
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
|
|
1617
|
-
type: Directive,
|
|
1618
|
-
args: [{
|
|
1619
|
-
selector: '[cdkMenuItemRadio]',
|
|
1620
|
-
exportAs: 'cdkMenuItemRadio',
|
|
1621
|
-
host: {
|
|
1622
|
-
'[tabindex]': '_tabindex',
|
|
1623
|
-
'type': 'button',
|
|
1624
|
-
'role': 'menuitemradio',
|
|
1625
|
-
'[attr.aria-checked]': 'checked || null',
|
|
1626
|
-
'[attr.aria-disabled]': 'disabled || null',
|
|
1627
|
-
},
|
|
1628
|
-
providers: [
|
|
1629
|
-
{ provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
|
|
1630
|
-
{ provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
|
|
1631
|
-
],
|
|
1632
|
-
}]
|
|
1633
|
-
}], ctorParameters: function () {
|
|
1634
|
-
return [{ type: i1$2.UniqueSelectionDispatcher }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
|
|
1635
|
-
type: Inject,
|
|
1636
|
-
args: [MENU_STACK]
|
|
1637
|
-
}] }, { type: undefined, decorators: [{
|
|
1638
|
-
type: Optional
|
|
1639
|
-
}, {
|
|
1640
|
-
type: Inject,
|
|
1641
|
-
args: [CDK_MENU]
|
|
1642
|
-
}] }, { type: undefined, decorators: [{
|
|
1643
|
-
type: Optional
|
|
1644
|
-
}, {
|
|
1645
|
-
type: Inject,
|
|
1646
|
-
args: [MENU_AIM]
|
|
1647
|
-
}] }, { type: i1$1.Directionality, decorators: [{
|
|
1648
|
-
type: Optional
|
|
1649
|
-
}] }, { type: CdkMenuItemTrigger, decorators: [{
|
|
1650
|
-
type: Self
|
|
1651
|
-
}, {
|
|
1652
|
-
type: Optional
|
|
1653
|
-
}] }];
|
|
1654
|
-
} });
|
|
1655
|
-
|
|
1656
|
-
/**
|
|
1657
|
-
* @license
|
|
1658
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1659
|
-
*
|
|
1660
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1661
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1662
|
-
*/
|
|
1663
|
-
/**
|
|
1664
|
-
* A directive providing behavior for the "menuitemcheckbox" ARIA role, which behaves similarly to a
|
|
1665
|
-
* conventional checkbox.
|
|
1666
|
-
*/
|
|
1667
|
-
class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
|
|
1668
|
-
/** Toggle the checked state of the checkbox. */
|
|
1669
|
-
trigger() {
|
|
1670
|
-
super.trigger();
|
|
1671
|
-
if (!this.disabled) {
|
|
1672
|
-
this.checked = !this.checked;
|
|
1673
|
-
}
|
|
1674
|
-
}
|
|
1675
|
-
}
|
|
1676
|
-
CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1677
|
-
CdkMenuItemCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItemCheckbox, selector: "[cdkMenuItemCheckbox]", host: { attributes: { "type": "button", "role": "menuitemcheckbox" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
|
|
1678
|
-
{ provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
|
|
1679
|
-
{ provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
|
|
1680
|
-
], exportAs: ["cdkMenuItemCheckbox"], usesInheritance: true, ngImport: i0 });
|
|
1681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
|
|
1682
|
-
type: Directive,
|
|
1683
|
-
args: [{
|
|
1684
|
-
selector: '[cdkMenuItemCheckbox]',
|
|
1685
|
-
exportAs: 'cdkMenuItemCheckbox',
|
|
1686
|
-
host: {
|
|
1687
|
-
'[tabindex]': '_tabindex',
|
|
1688
|
-
'type': 'button',
|
|
1689
|
-
'role': 'menuitemcheckbox',
|
|
1690
|
-
'[attr.aria-checked]': 'checked || null',
|
|
1691
|
-
'[attr.aria-disabled]': 'disabled || null',
|
|
1692
|
-
},
|
|
1693
|
-
providers: [
|
|
1694
|
-
{ provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
|
|
1695
|
-
{ provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
|
|
1696
|
-
],
|
|
1697
|
-
}]
|
|
1698
|
-
}] });
|
|
1699
|
-
|
|
1700
|
-
/**
|
|
1701
|
-
* @license
|
|
1702
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1703
|
-
*
|
|
1704
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1705
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1706
|
-
*/
|
|
1707
|
-
// In cases where the first menu item in the context menu is a trigger the submenu opens on a
|
|
1708
|
-
// hover event. We offset the context menu 2px by default to prevent this from occurring.
|
|
1709
|
-
const CONTEXT_MENU_POSITIONS = STANDARD_DROPDOWN_BELOW_POSITIONS.map(position => {
|
|
1710
|
-
const offsetX = position.overlayX === 'start' ? 2 : -2;
|
|
1711
|
-
const offsetY = position.overlayY === 'top' ? 2 : -2;
|
|
1712
|
-
return Object.assign(Object.assign({}, position), { offsetX, offsetY });
|
|
1713
|
-
});
|
|
1714
|
-
/** Tracks the last open context menu trigger across the entire application. */
|
|
1715
|
-
class ContextMenuTracker {
|
|
1716
|
-
/**
|
|
1717
|
-
* Close the previous open context menu and set the given one as being open.
|
|
1718
|
-
* @param trigger the trigger for the currently open Context Menu.
|
|
1719
|
-
*/
|
|
1720
|
-
update(trigger) {
|
|
1721
|
-
var _a;
|
|
1722
|
-
if (ContextMenuTracker._openContextMenuTrigger !== trigger) {
|
|
1723
|
-
(_a = ContextMenuTracker._openContextMenuTrigger) === null || _a === void 0 ? void 0 : _a.close();
|
|
1724
|
-
ContextMenuTracker._openContextMenuTrigger = trigger;
|
|
1725
|
-
}
|
|
1726
|
-
}
|
|
1727
|
-
}
|
|
1728
|
-
ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1729
|
-
ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
|
|
1730
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: ContextMenuTracker, decorators: [{
|
|
1731
|
-
type: Injectable,
|
|
1732
|
-
args: [{ providedIn: 'root' }]
|
|
1733
|
-
}] });
|
|
1734
|
-
/**
|
|
1735
|
-
* A directive which when placed on some element opens a the Menu it is bound to when a user
|
|
1736
|
-
* right-clicks within that element. It is aware of nested Context Menus and the lowest level
|
|
1737
|
-
* non-disabled context menu will trigger.
|
|
1738
|
-
*/
|
|
1739
|
-
class CdkContextMenuTrigger extends MenuTrigger {
|
|
1740
|
-
constructor(injector, _viewContainerRef, _overlay, _contextMenuTracker, menuStack, _directionality) {
|
|
1741
|
-
super(injector, menuStack);
|
|
1742
|
-
this._viewContainerRef = _viewContainerRef;
|
|
1743
|
-
this._overlay = _overlay;
|
|
1744
|
-
this._contextMenuTracker = _contextMenuTracker;
|
|
1745
|
-
this._directionality = _directionality;
|
|
1746
|
-
this._disabled = false;
|
|
1747
|
-
this._setMenuStackListener();
|
|
1748
|
-
}
|
|
1749
|
-
/** Whether the context menu should be disabled. */
|
|
1750
|
-
get disabled() {
|
|
1751
|
-
return this._disabled;
|
|
1752
|
-
}
|
|
1753
|
-
set disabled(value) {
|
|
1754
|
-
this._disabled = coerceBooleanProperty(value);
|
|
1755
|
-
}
|
|
1756
|
-
/**
|
|
1757
|
-
* Open the attached menu at the specified location.
|
|
1758
|
-
* @param coordinates where to open the context menu
|
|
1759
|
-
*/
|
|
1760
|
-
open(coordinates) {
|
|
1761
|
-
this._open(coordinates, false);
|
|
1762
|
-
}
|
|
1763
|
-
_open(coordinates, ignoreFirstOutsideAuxClick) {
|
|
1764
|
-
if (this.disabled) {
|
|
1765
|
-
return;
|
|
1766
|
-
}
|
|
1767
|
-
else if (this.isOpen()) {
|
|
1768
|
-
// since we're moving this menu we need to close any submenus first otherwise they end up
|
|
1769
|
-
// disconnected from this one.
|
|
1770
|
-
this.menuStack.closeSubMenuOf(this.childMenu);
|
|
1771
|
-
this._overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
|
|
1772
|
-
this._overlayRef.updatePosition();
|
|
1773
|
-
}
|
|
1774
|
-
else {
|
|
1775
|
-
this.opened.next();
|
|
1776
|
-
if (this._overlayRef) {
|
|
1777
|
-
this._overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
|
|
1778
|
-
this._overlayRef.updatePosition();
|
|
1779
|
-
}
|
|
1780
|
-
else {
|
|
1781
|
-
this._overlayRef = this._overlay.create(this._getOverlayConfig(coordinates));
|
|
1782
|
-
}
|
|
1783
|
-
this._overlayRef.attach(this._getMenuContent());
|
|
1784
|
-
this._subscribeToOutsideClicks(ignoreFirstOutsideAuxClick);
|
|
1785
|
-
}
|
|
1786
|
-
}
|
|
1787
|
-
/** Close the opened menu. */
|
|
1788
|
-
close() {
|
|
1789
|
-
this.menuStack.closeAll();
|
|
1790
|
-
}
|
|
1791
|
-
/**
|
|
1792
|
-
* Open the context menu and close any previously open menus.
|
|
1793
|
-
* @param event the mouse event which opens the context menu.
|
|
1794
|
-
*/
|
|
1795
|
-
_openOnContextMenu(event) {
|
|
1796
|
-
var _a, _b, _c;
|
|
1797
|
-
if (!this.disabled) {
|
|
1798
|
-
// Prevent the native context menu from opening because we're opening a custom one.
|
|
1799
|
-
event.preventDefault();
|
|
1800
|
-
// Stop event propagation to ensure that only the closest enabled context menu opens.
|
|
1801
|
-
// Otherwise, any context menus attached to containing elements would *also* open,
|
|
1802
|
-
// resulting in multiple stacked context menus being displayed.
|
|
1803
|
-
event.stopPropagation();
|
|
1804
|
-
this._contextMenuTracker.update(this);
|
|
1805
|
-
this._open({ x: event.clientX, y: event.clientY }, true);
|
|
1806
|
-
// A context menu can be triggered via a mouse right click or a keyboard shortcut.
|
|
1807
|
-
if (event.button === 2) {
|
|
1808
|
-
(_a = this.childMenu) === null || _a === void 0 ? void 0 : _a.focusFirstItem('mouse');
|
|
1809
|
-
}
|
|
1810
|
-
else if (event.button === 0) {
|
|
1811
|
-
(_b = this.childMenu) === null || _b === void 0 ? void 0 : _b.focusFirstItem('keyboard');
|
|
1812
|
-
}
|
|
1813
|
-
else {
|
|
1814
|
-
(_c = this.childMenu) === null || _c === void 0 ? void 0 : _c.focusFirstItem('program');
|
|
1815
|
-
}
|
|
1816
|
-
}
|
|
1817
|
-
}
|
|
1818
|
-
/**
|
|
1819
|
-
* Get the configuration object used to create the overlay.
|
|
1820
|
-
* @param coordinates the location to place the opened menu
|
|
1821
|
-
*/
|
|
1822
|
-
_getOverlayConfig(coordinates) {
|
|
1823
|
-
return new OverlayConfig({
|
|
1824
|
-
positionStrategy: this._getOverlayPositionStrategy(coordinates),
|
|
1825
|
-
scrollStrategy: this._overlay.scrollStrategies.block(),
|
|
1826
|
-
direction: this._directionality,
|
|
1827
|
-
});
|
|
1828
|
-
}
|
|
1829
|
-
/**
|
|
1830
|
-
* Build the position strategy for the overlay which specifies where to place the menu.
|
|
1831
|
-
* @param coordinates the location to place the opened menu
|
|
1832
|
-
*/
|
|
1833
|
-
_getOverlayPositionStrategy(coordinates) {
|
|
1834
|
-
var _a;
|
|
1835
|
-
return this._overlay
|
|
1836
|
-
.position()
|
|
1837
|
-
.flexibleConnectedTo(coordinates)
|
|
1838
|
-
.withPositions((_a = this.menuPosition) !== null && _a !== void 0 ? _a : CONTEXT_MENU_POSITIONS);
|
|
1839
|
-
}
|
|
1840
|
-
/**
|
|
1841
|
-
* Get the portal to be attached to the overlay which contains the menu. Allows for the menu
|
|
1842
|
-
* content to change dynamically and be reflected in the application.
|
|
1843
|
-
*/
|
|
1844
|
-
_getMenuContent() {
|
|
1845
|
-
var _a;
|
|
1846
|
-
const hasMenuContentChanged = this._menuTemplateRef !== ((_a = this._menuPortal) === null || _a === void 0 ? void 0 : _a.templateRef);
|
|
1847
|
-
if (this._menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {
|
|
1848
|
-
this._menuPortal = new TemplatePortal(this._menuTemplateRef, this._viewContainerRef, undefined, this.getChildMenuInjector());
|
|
1849
|
-
}
|
|
1850
|
-
return this._menuPortal;
|
|
1851
|
-
}
|
|
1852
|
-
/** Subscribe to the menu stack close events and close this menu when requested. */
|
|
1853
|
-
_setMenuStackListener() {
|
|
1854
|
-
this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
|
|
1855
|
-
if (item === this.childMenu && this.isOpen()) {
|
|
1856
|
-
this.closed.next();
|
|
1857
|
-
this._overlayRef.detach();
|
|
1858
|
-
}
|
|
1859
|
-
});
|
|
1860
|
-
}
|
|
1861
|
-
/**
|
|
1862
|
-
* Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
|
|
1863
|
-
* click occurs outside the menus.
|
|
1864
|
-
*/
|
|
1865
|
-
_subscribeToOutsideClicks(ignoreFirstAuxClick) {
|
|
1866
|
-
if (this._overlayRef) {
|
|
1867
|
-
let outsideClicks = this._overlayRef.outsidePointerEvents();
|
|
1868
|
-
// If the menu was triggered by the `contextmenu` event, skip the first `auxclick` event
|
|
1869
|
-
// because it fires when the mouse is released on the same click that opened the menu.
|
|
1870
|
-
if (ignoreFirstAuxClick) {
|
|
1871
|
-
const [auxClicks, nonAuxClicks] = partition(outsideClicks, ({ type }) => type === 'auxclick');
|
|
1872
|
-
outsideClicks = merge(nonAuxClicks, auxClicks.pipe(skip(1)));
|
|
1873
|
-
}
|
|
1874
|
-
outsideClicks.pipe(takeUntil(this._stopOutsideClicksListener)).subscribe(event => {
|
|
1875
|
-
if (!isClickInsideMenuOverlay(event.target)) {
|
|
1876
|
-
this.menuStack.closeAll();
|
|
1877
|
-
}
|
|
1878
|
-
});
|
|
1879
|
-
}
|
|
1880
|
-
}
|
|
1881
|
-
}
|
|
1882
|
-
CdkContextMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkContextMenuTrigger, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: ContextMenuTracker }, { token: MENU_STACK }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1883
|
-
CdkContextMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: { _menuTemplateRef: ["cdkContextMenuTriggerFor", "_menuTemplateRef"], menuPosition: ["cdkContextMenuPosition", "menuPosition"], disabled: ["cdkContextMenuDisabled", "disabled"] }, outputs: { opened: "cdkContextMenuOpened", closed: "cdkContextMenuClosed" }, host: { listeners: { "contextmenu": "_openOnContextMenu($event)" } }, providers: [
|
|
1884
|
-
{ provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
|
|
1885
|
-
{ provide: MENU_STACK, useClass: MenuStack },
|
|
1886
|
-
], exportAs: ["cdkContextMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
|
|
1887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
|
|
1888
|
-
type: Directive,
|
|
1889
|
-
args: [{
|
|
1890
|
-
selector: '[cdkContextMenuTriggerFor]',
|
|
1891
|
-
exportAs: 'cdkContextMenuTriggerFor',
|
|
1892
|
-
host: {
|
|
1893
|
-
'(contextmenu)': '_openOnContextMenu($event)',
|
|
1894
|
-
},
|
|
1895
|
-
inputs: ['_menuTemplateRef: cdkContextMenuTriggerFor', 'menuPosition: cdkContextMenuPosition'],
|
|
1896
|
-
outputs: ['opened: cdkContextMenuOpened', 'closed: cdkContextMenuClosed'],
|
|
1897
|
-
providers: [
|
|
1898
|
-
{ provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
|
|
1899
|
-
{ provide: MENU_STACK, useClass: MenuStack },
|
|
1900
|
-
],
|
|
1901
|
-
}]
|
|
1902
|
-
}], ctorParameters: function () {
|
|
1903
|
-
return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: ContextMenuTracker }, { type: MenuStack, decorators: [{
|
|
1904
|
-
type: Inject,
|
|
1905
|
-
args: [MENU_STACK]
|
|
1906
|
-
}] }, { type: i1$1.Directionality, decorators: [{
|
|
1907
|
-
type: Optional
|
|
1908
|
-
}] }];
|
|
1909
|
-
}, propDecorators: { disabled: [{
|
|
1910
|
-
type: Input,
|
|
1911
|
-
args: ['cdkContextMenuDisabled']
|
|
1912
|
-
}] } });
|
|
1913
|
-
|
|
1914
|
-
/**
|
|
1915
|
-
* @license
|
|
1916
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1917
|
-
*
|
|
1918
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1919
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1920
|
-
*/
|
|
1921
|
-
const EXPORTED_DECLARATIONS = [
|
|
1922
|
-
CdkMenuBar,
|
|
1923
|
-
CdkMenu,
|
|
1924
|
-
CdkMenuItem,
|
|
1925
|
-
CdkMenuItemRadio,
|
|
1926
|
-
CdkMenuItemCheckbox,
|
|
1927
|
-
CdkMenuItemTrigger,
|
|
1928
|
-
CdkMenuGroup,
|
|
1929
|
-
CdkContextMenuTrigger,
|
|
1930
|
-
CdkTargetMenuAim,
|
|
1931
|
-
];
|
|
1932
|
-
class CdkMenuModule {
|
|
1933
|
-
}
|
|
1934
|
-
CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1935
|
-
CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuModule, declarations: [CdkMenuBar,
|
|
1936
|
-
CdkMenu,
|
|
1937
|
-
CdkMenuItem,
|
|
1938
|
-
CdkMenuItemRadio,
|
|
1939
|
-
CdkMenuItemCheckbox,
|
|
1940
|
-
CdkMenuItemTrigger,
|
|
1941
|
-
CdkMenuGroup,
|
|
1942
|
-
CdkContextMenuTrigger,
|
|
1943
|
-
CdkTargetMenuAim], imports: [OverlayModule], exports: [CdkMenuBar,
|
|
1944
|
-
CdkMenu,
|
|
1945
|
-
CdkMenuItem,
|
|
1946
|
-
CdkMenuItemRadio,
|
|
1947
|
-
CdkMenuItemCheckbox,
|
|
1948
|
-
CdkMenuItemTrigger,
|
|
1949
|
-
CdkMenuGroup,
|
|
1950
|
-
CdkContextMenuTrigger,
|
|
1951
|
-
CdkTargetMenuAim] });
|
|
1952
|
-
CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
|
|
1953
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuModule, decorators: [{
|
|
1954
|
-
type: NgModule,
|
|
1955
|
-
args: [{
|
|
1956
|
-
imports: [OverlayModule],
|
|
1957
|
-
exports: EXPORTED_DECLARATIONS,
|
|
1958
|
-
declarations: EXPORTED_DECLARATIONS,
|
|
1959
|
-
}]
|
|
1960
|
-
}] });
|
|
1961
|
-
|
|
1962
|
-
/**
|
|
1963
|
-
* @license
|
|
1964
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1965
|
-
*
|
|
1966
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1967
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1968
|
-
*/
|
|
1969
|
-
|
|
1970
|
-
/**
|
|
1971
|
-
* @license
|
|
1972
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1973
|
-
*
|
|
1974
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1975
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1976
|
-
*/
|
|
1977
|
-
|
|
1978
|
-
/**
|
|
1979
|
-
* Generated bundle index. Do not edit.
|
|
1980
|
-
*/
|
|
1981
|
-
|
|
1982
|
-
export { CDK_MENU, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemTrigger, CdkMenuModule, CdkTargetMenuAim, ContextMenuTracker, MENU_AIM, MENU_STACK, MENU_TRIGGER, MenuStack, MenuTrigger, TargetMenuAim, isClickInsideMenuOverlay };
|
|
1983
|
-
//# sourceMappingURL=menu.mjs.map
|