@angular/cdk-experimental 14.0.0-next.8 → 14.0.0-rc.1

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