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