@angular/cdk-experimental 14.0.0-next.7 → 14.0.0-rc.0

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