1 | import { FocusMonitor, FocusKeyManager, isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
---|
2 | import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
---|
3 | import { UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
|
---|
4 | import { InjectionToken, Directive, TemplateRef, ComponentFactoryResolver, ApplicationRef, Injector, ViewContainerRef, Inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Optional, Input, HostListener, QueryList, EventEmitter, NgZone, ContentChildren, ViewChild, ContentChild, Output, Self, HostBinding, NgModule } from '@angular/core';
|
---|
5 | import { Subject, Subscription, merge, of, asapScheduler } from 'rxjs';
|
---|
6 | import { startWith, switchMap, take, filter, takeUntil, delay } from 'rxjs/operators';
|
---|
7 | import { trigger, state, style, transition, animate } from '@angular/animations';
|
---|
8 | import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
---|
9 | import { DOCUMENT, CommonModule } from '@angular/common';
|
---|
10 | import { mixinDisableRipple, mixinDisabled, MatCommonModule, MatRippleModule } from '@angular/material/core';
|
---|
11 | import { Directionality } from '@angular/cdk/bidi';
|
---|
12 | import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
---|
13 | import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
|
---|
14 | import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
---|
15 |
|
---|
16 | /**
|
---|
17 | * @license
|
---|
18 | * Copyright Google LLC All Rights Reserved.
|
---|
19 | *
|
---|
20 | * Use of this source code is governed by an MIT-style license that can be
|
---|
21 | * found in the LICENSE file at https://angular.io/license
|
---|
22 | */
|
---|
23 | /**
|
---|
24 | * Animations used by the mat-menu component.
|
---|
25 | * Animation duration and timing values are based on:
|
---|
26 | * https://material.io/guidelines/components/menus.html#menus-usage
|
---|
27 | * @docs-private
|
---|
28 | */
|
---|
29 | const matMenuAnimations = {
|
---|
30 | /**
|
---|
31 | * This animation controls the menu panel's entry and exit from the page.
|
---|
32 | *
|
---|
33 | * When the menu panel is added to the DOM, it scales in and fades in its border.
|
---|
34 | *
|
---|
35 | * When the menu panel is removed from the DOM, it simply fades out after a brief
|
---|
36 | * delay to display the ripple.
|
---|
37 | */
|
---|
38 | transformMenu: trigger('transformMenu', [
|
---|
39 | state('void', style({
|
---|
40 | opacity: 0,
|
---|
41 | transform: 'scale(0.8)'
|
---|
42 | })),
|
---|
43 | transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
|
---|
44 | opacity: 1,
|
---|
45 | transform: 'scale(1)'
|
---|
46 | }))),
|
---|
47 | transition('* => void', animate('100ms 25ms linear', style({ opacity: 0 })))
|
---|
48 | ]),
|
---|
49 | /**
|
---|
50 | * This animation fades in the background color and content of the menu panel
|
---|
51 | * after its containing element is scaled in.
|
---|
52 | */
|
---|
53 | fadeInItems: trigger('fadeInItems', [
|
---|
54 | // TODO(crisbeto): this is inside the `transformMenu`
|
---|
55 | // now. Remove next time we do breaking changes.
|
---|
56 | state('showing', style({ opacity: 1 })),
|
---|
57 | transition('void => *', [
|
---|
58 | style({ opacity: 0 }),
|
---|
59 | animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')
|
---|
60 | ])
|
---|
61 | ])
|
---|
62 | };
|
---|
63 | /**
|
---|
64 | * @deprecated
|
---|
65 | * @breaking-change 8.0.0
|
---|
66 | * @docs-private
|
---|
67 | */
|
---|
68 | const fadeInItems = matMenuAnimations.fadeInItems;
|
---|
69 | /**
|
---|
70 | * @deprecated
|
---|
71 | * @breaking-change 8.0.0
|
---|
72 | * @docs-private
|
---|
73 | */
|
---|
74 | const transformMenu = matMenuAnimations.transformMenu;
|
---|
75 |
|
---|
76 | /**
|
---|
77 | * @license
|
---|
78 | * Copyright Google LLC All Rights Reserved.
|
---|
79 | *
|
---|
80 | * Use of this source code is governed by an MIT-style license that can be
|
---|
81 | * found in the LICENSE file at https://angular.io/license
|
---|
82 | */
|
---|
83 | /**
|
---|
84 | * Injection token that can be used to reference instances of `MatMenuContent`. It serves
|
---|
85 | * as alternative token to the actual `MatMenuContent` class which could cause unnecessary
|
---|
86 | * retention of the class and its directive metadata.
|
---|
87 | */
|
---|
88 | const MAT_MENU_CONTENT = new InjectionToken('MatMenuContent');
|
---|
89 | class _MatMenuContentBase {
|
---|
90 | constructor(_template, _componentFactoryResolver, _appRef, _injector, _viewContainerRef, _document, _changeDetectorRef) {
|
---|
91 | this._template = _template;
|
---|
92 | this._componentFactoryResolver = _componentFactoryResolver;
|
---|
93 | this._appRef = _appRef;
|
---|
94 | this._injector = _injector;
|
---|
95 | this._viewContainerRef = _viewContainerRef;
|
---|
96 | this._document = _document;
|
---|
97 | this._changeDetectorRef = _changeDetectorRef;
|
---|
98 | /** Emits when the menu content has been attached. */
|
---|
99 | this._attached = new Subject();
|
---|
100 | }
|
---|
101 | /**
|
---|
102 | * Attaches the content with a particular context.
|
---|
103 | * @docs-private
|
---|
104 | */
|
---|
105 | attach(context = {}) {
|
---|
106 | if (!this._portal) {
|
---|
107 | this._portal = new TemplatePortal(this._template, this._viewContainerRef);
|
---|
108 | }
|
---|
109 | this.detach();
|
---|
110 | if (!this._outlet) {
|
---|
111 | this._outlet = new DomPortalOutlet(this._document.createElement('div'), this._componentFactoryResolver, this._appRef, this._injector);
|
---|
112 | }
|
---|
113 | const element = this._template.elementRef.nativeElement;
|
---|
114 | // Because we support opening the same menu from different triggers (which in turn have their
|
---|
115 | // own `OverlayRef` panel), we have to re-insert the host element every time, otherwise we
|
---|
116 | // risk it staying attached to a pane that's no longer in the DOM.
|
---|
117 | element.parentNode.insertBefore(this._outlet.outletElement, element);
|
---|
118 | // When `MatMenuContent` is used in an `OnPush` component, the insertion of the menu
|
---|
119 | // content via `createEmbeddedView` does not cause the content to be seen as "dirty"
|
---|
120 | // by Angular. This causes the `@ContentChildren` for menu items within the menu to
|
---|
121 | // not be updated by Angular. By explicitly marking for check here, we tell Angular that
|
---|
122 | // it needs to check for new menu items and update the `@ContentChild` in `MatMenu`.
|
---|
123 | // @breaking-change 9.0.0 Make change detector ref required
|
---|
124 | if (this._changeDetectorRef) {
|
---|
125 | this._changeDetectorRef.markForCheck();
|
---|
126 | }
|
---|
127 | this._portal.attach(this._outlet, context);
|
---|
128 | this._attached.next();
|
---|
129 | }
|
---|
130 | /**
|
---|
131 | * Detaches the content.
|
---|
132 | * @docs-private
|
---|
133 | */
|
---|
134 | detach() {
|
---|
135 | if (this._portal.isAttached) {
|
---|
136 | this._portal.detach();
|
---|
137 | }
|
---|
138 | }
|
---|
139 | ngOnDestroy() {
|
---|
140 | if (this._outlet) {
|
---|
141 | this._outlet.dispose();
|
---|
142 | }
|
---|
143 | }
|
---|
144 | }
|
---|
145 | _MatMenuContentBase.decorators = [
|
---|
146 | { type: Directive }
|
---|
147 | ];
|
---|
148 | _MatMenuContentBase.ctorParameters = () => [
|
---|
149 | { type: TemplateRef },
|
---|
150 | { type: ComponentFactoryResolver },
|
---|
151 | { type: ApplicationRef },
|
---|
152 | { type: Injector },
|
---|
153 | { type: ViewContainerRef },
|
---|
154 | { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
|
---|
155 | { type: ChangeDetectorRef }
|
---|
156 | ];
|
---|
157 | /**
|
---|
158 | * Menu content that will be rendered lazily once the menu is opened.
|
---|
159 | */
|
---|
160 | class MatMenuContent extends _MatMenuContentBase {
|
---|
161 | }
|
---|
162 | MatMenuContent.decorators = [
|
---|
163 | { type: Directive, args: [{
|
---|
164 | selector: 'ng-template[matMenuContent]',
|
---|
165 | providers: [{ provide: MAT_MENU_CONTENT, useExisting: MatMenuContent }],
|
---|
166 | },] }
|
---|
167 | ];
|
---|
168 |
|
---|
169 | /**
|
---|
170 | * @license
|
---|
171 | * Copyright Google LLC All Rights Reserved.
|
---|
172 | *
|
---|
173 | * Use of this source code is governed by an MIT-style license that can be
|
---|
174 | * found in the LICENSE file at https://angular.io/license
|
---|
175 | */
|
---|
176 | /**
|
---|
177 | * Throws an exception for the case when menu trigger doesn't have a valid mat-menu instance
|
---|
178 | * @docs-private
|
---|
179 | */
|
---|
180 | function throwMatMenuMissingError() {
|
---|
181 | throw Error(`matMenuTriggerFor: must pass in an mat-menu instance.
|
---|
182 |
|
---|
183 | Example:
|
---|
184 | <mat-menu #menu="matMenu"></mat-menu>
|
---|
185 | <button [matMenuTriggerFor]="menu"></button>`);
|
---|
186 | }
|
---|
187 | /**
|
---|
188 | * Throws an exception for the case when menu's x-position value isn't valid.
|
---|
189 | * In other words, it doesn't match 'before' or 'after'.
|
---|
190 | * @docs-private
|
---|
191 | */
|
---|
192 | function throwMatMenuInvalidPositionX() {
|
---|
193 | throw Error(`xPosition value must be either 'before' or after'.
|
---|
194 | Example: <mat-menu xPosition="before" #menu="matMenu"></mat-menu>`);
|
---|
195 | }
|
---|
196 | /**
|
---|
197 | * Throws an exception for the case when menu's y-position value isn't valid.
|
---|
198 | * In other words, it doesn't match 'above' or 'below'.
|
---|
199 | * @docs-private
|
---|
200 | */
|
---|
201 | function throwMatMenuInvalidPositionY() {
|
---|
202 | throw Error(`yPosition value must be either 'above' or below'.
|
---|
203 | Example: <mat-menu yPosition="above" #menu="matMenu"></mat-menu>`);
|
---|
204 | }
|
---|
205 | /**
|
---|
206 | * Throws an exception for the case when a menu is assigned
|
---|
207 | * to a trigger that is placed inside the same menu.
|
---|
208 | * @docs-private
|
---|
209 | */
|
---|
210 | function throwMatMenuRecursiveError() {
|
---|
211 | throw Error(`matMenuTriggerFor: menu cannot contain its own trigger. Assign a menu that is ` +
|
---|
212 | `not a parent of the trigger or move the trigger outside of the menu.`);
|
---|
213 | }
|
---|
214 |
|
---|
215 | /**
|
---|
216 | * @license
|
---|
217 | * Copyright Google LLC All Rights Reserved.
|
---|
218 | *
|
---|
219 | * Use of this source code is governed by an MIT-style license that can be
|
---|
220 | * found in the LICENSE file at https://angular.io/license
|
---|
221 | */
|
---|
222 | /**
|
---|
223 | * Injection token used to provide the parent menu to menu-specific components.
|
---|
224 | * @docs-private
|
---|
225 | */
|
---|
226 | const MAT_MENU_PANEL = new InjectionToken('MAT_MENU_PANEL');
|
---|
227 |
|
---|
228 | /**
|
---|
229 | * @license
|
---|
230 | * Copyright Google LLC All Rights Reserved.
|
---|
231 | *
|
---|
232 | * Use of this source code is governed by an MIT-style license that can be
|
---|
233 | * found in the LICENSE file at https://angular.io/license
|
---|
234 | */
|
---|
235 | // Boilerplate for applying mixins to MatMenuItem.
|
---|
236 | /** @docs-private */
|
---|
237 | const _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {
|
---|
238 | }));
|
---|
239 | /**
|
---|
240 | * Single item inside of a `mat-menu`. Provides the menu item styling and accessibility treatment.
|
---|
241 | */
|
---|
242 | class MatMenuItem extends _MatMenuItemBase {
|
---|
243 | constructor(_elementRef,
|
---|
244 | /**
|
---|
245 | * @deprecated `_document` parameter is no longer being used and will be removed.
|
---|
246 | * @breaking-change 12.0.0
|
---|
247 | */
|
---|
248 | _document, _focusMonitor, _parentMenu,
|
---|
249 | /**
|
---|
250 | * @deprecated `_changeDetectorRef` to become a required parameter.
|
---|
251 | * @breaking-change 14.0.0
|
---|
252 | */
|
---|
253 | _changeDetectorRef) {
|
---|
254 | // @breaking-change 8.0.0 make `_focusMonitor` and `document` required params.
|
---|
255 | super();
|
---|
256 | this._elementRef = _elementRef;
|
---|
257 | this._focusMonitor = _focusMonitor;
|
---|
258 | this._parentMenu = _parentMenu;
|
---|
259 | this._changeDetectorRef = _changeDetectorRef;
|
---|
260 | /** ARIA role for the menu item. */
|
---|
261 | this.role = 'menuitem';
|
---|
262 | /** Stream that emits when the menu item is hovered. */
|
---|
263 | this._hovered = new Subject();
|
---|
264 | /** Stream that emits when the menu item is focused. */
|
---|
265 | this._focused = new Subject();
|
---|
266 | /** Whether the menu item is highlighted. */
|
---|
267 | this._highlighted = false;
|
---|
268 | /** Whether the menu item acts as a trigger for a sub-menu. */
|
---|
269 | this._triggersSubmenu = false;
|
---|
270 | if (_parentMenu && _parentMenu.addItem) {
|
---|
271 | _parentMenu.addItem(this);
|
---|
272 | }
|
---|
273 | }
|
---|
274 | /** Focuses the menu item. */
|
---|
275 | focus(origin, options) {
|
---|
276 | if (this._focusMonitor && origin) {
|
---|
277 | this._focusMonitor.focusVia(this._getHostElement(), origin, options);
|
---|
278 | }
|
---|
279 | else {
|
---|
280 | this._getHostElement().focus(options);
|
---|
281 | }
|
---|
282 | this._focused.next(this);
|
---|
283 | }
|
---|
284 | ngAfterViewInit() {
|
---|
285 | if (this._focusMonitor) {
|
---|
286 | // Start monitoring the element so it gets the appropriate focused classes. We want
|
---|
287 | // to show the focus style for menu items only when the focus was not caused by a
|
---|
288 | // mouse or touch interaction.
|
---|
289 | this._focusMonitor.monitor(this._elementRef, false);
|
---|
290 | }
|
---|
291 | }
|
---|
292 | ngOnDestroy() {
|
---|
293 | if (this._focusMonitor) {
|
---|
294 | this._focusMonitor.stopMonitoring(this._elementRef);
|
---|
295 | }
|
---|
296 | if (this._parentMenu && this._parentMenu.removeItem) {
|
---|
297 | this._parentMenu.removeItem(this);
|
---|
298 | }
|
---|
299 | this._hovered.complete();
|
---|
300 | this._focused.complete();
|
---|
301 | }
|
---|
302 | /** Used to set the `tabindex`. */
|
---|
303 | _getTabIndex() {
|
---|
304 | return this.disabled ? '-1' : '0';
|
---|
305 | }
|
---|
306 | /** Returns the host DOM element. */
|
---|
307 | _getHostElement() {
|
---|
308 | return this._elementRef.nativeElement;
|
---|
309 | }
|
---|
310 | /** Prevents the default element actions if it is disabled. */
|
---|
311 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
312 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
313 | // ViewEngine they're overwritten.
|
---|
314 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
315 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
316 | _checkDisabled(event) {
|
---|
317 | if (this.disabled) {
|
---|
318 | event.preventDefault();
|
---|
319 | event.stopPropagation();
|
---|
320 | }
|
---|
321 | }
|
---|
322 | /** Emits to the hover stream. */
|
---|
323 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
324 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
325 | // ViewEngine they're overwritten.
|
---|
326 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
327 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
328 | _handleMouseEnter() {
|
---|
329 | this._hovered.next(this);
|
---|
330 | }
|
---|
331 | /** Gets the label to be used when determining whether the option should be focused. */
|
---|
332 | getLabel() {
|
---|
333 | var _a, _b;
|
---|
334 | const clone = this._elementRef.nativeElement.cloneNode(true);
|
---|
335 | const icons = clone.querySelectorAll('mat-icon, .material-icons');
|
---|
336 | // Strip away icons so they don't show up in the text.
|
---|
337 | for (let i = 0; i < icons.length; i++) {
|
---|
338 | const icon = icons[i];
|
---|
339 | (_a = icon.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(icon);
|
---|
340 | }
|
---|
341 | return ((_b = clone.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
|
---|
342 | }
|
---|
343 | _setHighlighted(isHighlighted) {
|
---|
344 | var _a;
|
---|
345 | // We need to mark this for check for the case where the content is coming from a
|
---|
346 | // `matMenuContent` whose change detection tree is at the declaration position,
|
---|
347 | // not the insertion position. See #23175.
|
---|
348 | // @breaking-change 14.0.0 Remove null check for `_changeDetectorRef`.
|
---|
349 | this._highlighted = isHighlighted;
|
---|
350 | (_a = this._changeDetectorRef) === null || _a === void 0 ? void 0 : _a.markForCheck();
|
---|
351 | }
|
---|
352 | }
|
---|
353 | MatMenuItem.decorators = [
|
---|
354 | { type: Component, args: [{
|
---|
355 | selector: '[mat-menu-item]',
|
---|
356 | exportAs: 'matMenuItem',
|
---|
357 | inputs: ['disabled', 'disableRipple'],
|
---|
358 | host: {
|
---|
359 | '[attr.role]': 'role',
|
---|
360 | '[class.mat-menu-item]': 'true',
|
---|
361 | '[class.mat-menu-item-highlighted]': '_highlighted',
|
---|
362 | '[class.mat-menu-item-submenu-trigger]': '_triggersSubmenu',
|
---|
363 | '[attr.tabindex]': '_getTabIndex()',
|
---|
364 | '[attr.aria-disabled]': 'disabled.toString()',
|
---|
365 | '[attr.disabled]': 'disabled || null',
|
---|
366 | 'class': 'mat-focus-indicator',
|
---|
367 | },
|
---|
368 | changeDetection: ChangeDetectionStrategy.OnPush,
|
---|
369 | encapsulation: ViewEncapsulation.None,
|
---|
370 | template: "<ng-content></ng-content>\n<div class=\"mat-menu-ripple\" matRipple\n [matRippleDisabled]=\"disableRipple || disabled\"\n [matRippleTrigger]=\"_getHostElement()\">\n</div>\n\n<svg\n *ngIf=\"_triggersSubmenu\"\n class=\"mat-menu-submenu-icon\"\n viewBox=\"0 0 5 10\"\n focusable=\"false\"><polygon points=\"0,0 5,5 0,10\"/></svg>\n"
|
---|
371 | },] }
|
---|
372 | ];
|
---|
373 | MatMenuItem.ctorParameters = () => [
|
---|
374 | { type: ElementRef },
|
---|
375 | { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
|
---|
376 | { type: FocusMonitor },
|
---|
377 | { type: undefined, decorators: [{ type: Inject, args: [MAT_MENU_PANEL,] }, { type: Optional }] },
|
---|
378 | { type: ChangeDetectorRef }
|
---|
379 | ];
|
---|
380 | MatMenuItem.propDecorators = {
|
---|
381 | role: [{ type: Input }],
|
---|
382 | _checkDisabled: [{ type: HostListener, args: ['click', ['$event'],] }],
|
---|
383 | _handleMouseEnter: [{ type: HostListener, args: ['mouseenter',] }]
|
---|
384 | };
|
---|
385 |
|
---|
386 | /**
|
---|
387 | * @license
|
---|
388 | * Copyright Google LLC All Rights Reserved.
|
---|
389 | *
|
---|
390 | * Use of this source code is governed by an MIT-style license that can be
|
---|
391 | * found in the LICENSE file at https://angular.io/license
|
---|
392 | */
|
---|
393 | /** Injection token to be used to override the default options for `mat-menu`. */
|
---|
394 | const MAT_MENU_DEFAULT_OPTIONS = new InjectionToken('mat-menu-default-options', {
|
---|
395 | providedIn: 'root',
|
---|
396 | factory: MAT_MENU_DEFAULT_OPTIONS_FACTORY
|
---|
397 | });
|
---|
398 | /** @docs-private */
|
---|
399 | function MAT_MENU_DEFAULT_OPTIONS_FACTORY() {
|
---|
400 | return {
|
---|
401 | overlapTrigger: false,
|
---|
402 | xPosition: 'after',
|
---|
403 | yPosition: 'below',
|
---|
404 | backdropClass: 'cdk-overlay-transparent-backdrop',
|
---|
405 | };
|
---|
406 | }
|
---|
407 | let menuPanelUid = 0;
|
---|
408 | /** Base class with all of the `MatMenu` functionality. */
|
---|
409 | class _MatMenuBase {
|
---|
410 | constructor(_elementRef, _ngZone, _defaultOptions) {
|
---|
411 | this._elementRef = _elementRef;
|
---|
412 | this._ngZone = _ngZone;
|
---|
413 | this._defaultOptions = _defaultOptions;
|
---|
414 | this._xPosition = this._defaultOptions.xPosition;
|
---|
415 | this._yPosition = this._defaultOptions.yPosition;
|
---|
416 | /** Only the direct descendant menu items. */
|
---|
417 | this._directDescendantItems = new QueryList();
|
---|
418 | /** Subscription to tab events on the menu panel */
|
---|
419 | this._tabSubscription = Subscription.EMPTY;
|
---|
420 | /** Config object to be passed into the menu's ngClass */
|
---|
421 | this._classList = {};
|
---|
422 | /** Current state of the panel animation. */
|
---|
423 | this._panelAnimationState = 'void';
|
---|
424 | /** Emits whenever an animation on the menu completes. */
|
---|
425 | this._animationDone = new Subject();
|
---|
426 | /** Class or list of classes to be added to the overlay panel. */
|
---|
427 | this.overlayPanelClass = this._defaultOptions.overlayPanelClass || '';
|
---|
428 | /** Class to be added to the backdrop element. */
|
---|
429 | this.backdropClass = this._defaultOptions.backdropClass;
|
---|
430 | this._overlapTrigger = this._defaultOptions.overlapTrigger;
|
---|
431 | this._hasBackdrop = this._defaultOptions.hasBackdrop;
|
---|
432 | /** Event emitted when the menu is closed. */
|
---|
433 | this.closed = new EventEmitter();
|
---|
434 | /**
|
---|
435 | * Event emitted when the menu is closed.
|
---|
436 | * @deprecated Switch to `closed` instead
|
---|
437 | * @breaking-change 8.0.0
|
---|
438 | */
|
---|
439 | this.close = this.closed;
|
---|
440 | this.panelId = `mat-menu-panel-${menuPanelUid++}`;
|
---|
441 | }
|
---|
442 | /** Position of the menu in the X axis. */
|
---|
443 | get xPosition() { return this._xPosition; }
|
---|
444 | set xPosition(value) {
|
---|
445 | if (value !== 'before' && value !== 'after' &&
|
---|
446 | (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
447 | throwMatMenuInvalidPositionX();
|
---|
448 | }
|
---|
449 | this._xPosition = value;
|
---|
450 | this.setPositionClasses();
|
---|
451 | }
|
---|
452 | /** Position of the menu in the Y axis. */
|
---|
453 | get yPosition() { return this._yPosition; }
|
---|
454 | set yPosition(value) {
|
---|
455 | if (value !== 'above' && value !== 'below' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
456 | throwMatMenuInvalidPositionY();
|
---|
457 | }
|
---|
458 | this._yPosition = value;
|
---|
459 | this.setPositionClasses();
|
---|
460 | }
|
---|
461 | /** Whether the menu should overlap its trigger. */
|
---|
462 | get overlapTrigger() { return this._overlapTrigger; }
|
---|
463 | set overlapTrigger(value) {
|
---|
464 | this._overlapTrigger = coerceBooleanProperty(value);
|
---|
465 | }
|
---|
466 | /** Whether the menu has a backdrop. */
|
---|
467 | get hasBackdrop() { return this._hasBackdrop; }
|
---|
468 | set hasBackdrop(value) {
|
---|
469 | this._hasBackdrop = coerceBooleanProperty(value);
|
---|
470 | }
|
---|
471 | /**
|
---|
472 | * This method takes classes set on the host mat-menu element and applies them on the
|
---|
473 | * menu template that displays in the overlay container. Otherwise, it's difficult
|
---|
474 | * to style the containing menu from outside the component.
|
---|
475 | * @param classes list of class names
|
---|
476 | */
|
---|
477 | set panelClass(classes) {
|
---|
478 | const previousPanelClass = this._previousPanelClass;
|
---|
479 | if (previousPanelClass && previousPanelClass.length) {
|
---|
480 | previousPanelClass.split(' ').forEach((className) => {
|
---|
481 | this._classList[className] = false;
|
---|
482 | });
|
---|
483 | }
|
---|
484 | this._previousPanelClass = classes;
|
---|
485 | if (classes && classes.length) {
|
---|
486 | classes.split(' ').forEach((className) => {
|
---|
487 | this._classList[className] = true;
|
---|
488 | });
|
---|
489 | this._elementRef.nativeElement.className = '';
|
---|
490 | }
|
---|
491 | }
|
---|
492 | /**
|
---|
493 | * This method takes classes set on the host mat-menu element and applies them on the
|
---|
494 | * menu template that displays in the overlay container. Otherwise, it's difficult
|
---|
495 | * to style the containing menu from outside the component.
|
---|
496 | * @deprecated Use `panelClass` instead.
|
---|
497 | * @breaking-change 8.0.0
|
---|
498 | */
|
---|
499 | get classList() { return this.panelClass; }
|
---|
500 | set classList(classes) { this.panelClass = classes; }
|
---|
501 | ngOnInit() {
|
---|
502 | this.setPositionClasses();
|
---|
503 | }
|
---|
504 | ngAfterContentInit() {
|
---|
505 | this._updateDirectDescendants();
|
---|
506 | this._keyManager = new FocusKeyManager(this._directDescendantItems)
|
---|
507 | .withWrap()
|
---|
508 | .withTypeAhead()
|
---|
509 | .withHomeAndEnd();
|
---|
510 | this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.closed.emit('tab'));
|
---|
511 | // If a user manually (programmatically) focuses a menu item, we need to reflect that focus
|
---|
512 | // change back to the key manager. Note that we don't need to unsubscribe here because _focused
|
---|
513 | // is internal and we know that it gets completed on destroy.
|
---|
514 | this._directDescendantItems.changes.pipe(startWith(this._directDescendantItems), switchMap(items => merge(...items.map((item) => item._focused)))).subscribe(focusedItem => this._keyManager.updateActiveItem(focusedItem));
|
---|
515 | }
|
---|
516 | ngOnDestroy() {
|
---|
517 | this._directDescendantItems.destroy();
|
---|
518 | this._tabSubscription.unsubscribe();
|
---|
519 | this.closed.complete();
|
---|
520 | }
|
---|
521 | /** Stream that emits whenever the hovered menu item changes. */
|
---|
522 | _hovered() {
|
---|
523 | // Coerce the `changes` property because Angular types it as `Observable<any>`
|
---|
524 | const itemChanges = this._directDescendantItems.changes;
|
---|
525 | return itemChanges.pipe(startWith(this._directDescendantItems), switchMap(items => merge(...items.map((item) => item._hovered))));
|
---|
526 | }
|
---|
527 | /*
|
---|
528 | * Registers a menu item with the menu.
|
---|
529 | * @docs-private
|
---|
530 | * @deprecated No longer being used. To be removed.
|
---|
531 | * @breaking-change 9.0.0
|
---|
532 | */
|
---|
533 | addItem(_item) { }
|
---|
534 | /**
|
---|
535 | * Removes an item from the menu.
|
---|
536 | * @docs-private
|
---|
537 | * @deprecated No longer being used. To be removed.
|
---|
538 | * @breaking-change 9.0.0
|
---|
539 | */
|
---|
540 | removeItem(_item) { }
|
---|
541 | /** Handle a keyboard event from the menu, delegating to the appropriate action. */
|
---|
542 | _handleKeydown(event) {
|
---|
543 | const keyCode = event.keyCode;
|
---|
544 | const manager = this._keyManager;
|
---|
545 | switch (keyCode) {
|
---|
546 | case ESCAPE:
|
---|
547 | if (!hasModifierKey(event)) {
|
---|
548 | event.preventDefault();
|
---|
549 | this.closed.emit('keydown');
|
---|
550 | }
|
---|
551 | break;
|
---|
552 | case LEFT_ARROW:
|
---|
553 | if (this.parentMenu && this.direction === 'ltr') {
|
---|
554 | this.closed.emit('keydown');
|
---|
555 | }
|
---|
556 | break;
|
---|
557 | case RIGHT_ARROW:
|
---|
558 | if (this.parentMenu && this.direction === 'rtl') {
|
---|
559 | this.closed.emit('keydown');
|
---|
560 | }
|
---|
561 | break;
|
---|
562 | default:
|
---|
563 | if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
|
---|
564 | manager.setFocusOrigin('keyboard');
|
---|
565 | }
|
---|
566 | manager.onKeydown(event);
|
---|
567 | }
|
---|
568 | }
|
---|
569 | /**
|
---|
570 | * Focus the first item in the menu.
|
---|
571 | * @param origin Action from which the focus originated. Used to set the correct styling.
|
---|
572 | */
|
---|
573 | focusFirstItem(origin = 'program') {
|
---|
574 | // When the content is rendered lazily, it takes a bit before the items are inside the DOM.
|
---|
575 | if (this.lazyContent) {
|
---|
576 | this._ngZone.onStable
|
---|
577 | .pipe(take(1))
|
---|
578 | .subscribe(() => this._focusFirstItem(origin));
|
---|
579 | }
|
---|
580 | else {
|
---|
581 | this._focusFirstItem(origin);
|
---|
582 | }
|
---|
583 | }
|
---|
584 | /**
|
---|
585 | * Actual implementation that focuses the first item. Needs to be separated
|
---|
586 | * out so we don't repeat the same logic in the public `focusFirstItem` method.
|
---|
587 | */
|
---|
588 | _focusFirstItem(origin) {
|
---|
589 | const manager = this._keyManager;
|
---|
590 | manager.setFocusOrigin(origin).setFirstItemActive();
|
---|
591 | // If there's no active item at this point, it means that all the items are disabled.
|
---|
592 | // Move focus to the menu panel so keyboard events like Escape still work. Also this will
|
---|
593 | // give _some_ feedback to screen readers.
|
---|
594 | if (!manager.activeItem && this._directDescendantItems.length) {
|
---|
595 | let element = this._directDescendantItems.first._getHostElement().parentElement;
|
---|
596 | // Because the `mat-menu` is at the DOM insertion point, not inside the overlay, we don't
|
---|
597 | // have a nice way of getting a hold of the menu panel. We can't use a `ViewChild` either
|
---|
598 | // because the panel is inside an `ng-template`. We work around it by starting from one of
|
---|
599 | // the items and walking up the DOM.
|
---|
600 | while (element) {
|
---|
601 | if (element.getAttribute('role') === 'menu') {
|
---|
602 | element.focus();
|
---|
603 | break;
|
---|
604 | }
|
---|
605 | else {
|
---|
606 | element = element.parentElement;
|
---|
607 | }
|
---|
608 | }
|
---|
609 | }
|
---|
610 | }
|
---|
611 | /**
|
---|
612 | * Resets the active item in the menu. This is used when the menu is opened, allowing
|
---|
613 | * the user to start from the first option when pressing the down arrow.
|
---|
614 | */
|
---|
615 | resetActiveItem() {
|
---|
616 | this._keyManager.setActiveItem(-1);
|
---|
617 | }
|
---|
618 | /**
|
---|
619 | * Sets the menu panel elevation.
|
---|
620 | * @param depth Number of parent menus that come before the menu.
|
---|
621 | */
|
---|
622 | setElevation(depth) {
|
---|
623 | // The elevation starts at the base and increases by one for each level.
|
---|
624 | // Capped at 24 because that's the maximum elevation defined in the Material design spec.
|
---|
625 | const elevation = Math.min(this._baseElevation + depth, 24);
|
---|
626 | const newElevation = `${this._elevationPrefix}${elevation}`;
|
---|
627 | const customElevation = Object.keys(this._classList).find(className => {
|
---|
628 | return className.startsWith(this._elevationPrefix);
|
---|
629 | });
|
---|
630 | if (!customElevation || customElevation === this._previousElevation) {
|
---|
631 | if (this._previousElevation) {
|
---|
632 | this._classList[this._previousElevation] = false;
|
---|
633 | }
|
---|
634 | this._classList[newElevation] = true;
|
---|
635 | this._previousElevation = newElevation;
|
---|
636 | }
|
---|
637 | }
|
---|
638 | /**
|
---|
639 | * Adds classes to the menu panel based on its position. Can be used by
|
---|
640 | * consumers to add specific styling based on the position.
|
---|
641 | * @param posX Position of the menu along the x axis.
|
---|
642 | * @param posY Position of the menu along the y axis.
|
---|
643 | * @docs-private
|
---|
644 | */
|
---|
645 | setPositionClasses(posX = this.xPosition, posY = this.yPosition) {
|
---|
646 | const classes = this._classList;
|
---|
647 | classes['mat-menu-before'] = posX === 'before';
|
---|
648 | classes['mat-menu-after'] = posX === 'after';
|
---|
649 | classes['mat-menu-above'] = posY === 'above';
|
---|
650 | classes['mat-menu-below'] = posY === 'below';
|
---|
651 | }
|
---|
652 | /** Starts the enter animation. */
|
---|
653 | _startAnimation() {
|
---|
654 | // @breaking-change 8.0.0 Combine with _resetAnimation.
|
---|
655 | this._panelAnimationState = 'enter';
|
---|
656 | }
|
---|
657 | /** Resets the panel animation to its initial state. */
|
---|
658 | _resetAnimation() {
|
---|
659 | // @breaking-change 8.0.0 Combine with _startAnimation.
|
---|
660 | this._panelAnimationState = 'void';
|
---|
661 | }
|
---|
662 | /** Callback that is invoked when the panel animation completes. */
|
---|
663 | _onAnimationDone(event) {
|
---|
664 | this._animationDone.next(event);
|
---|
665 | this._isAnimating = false;
|
---|
666 | }
|
---|
667 | _onAnimationStart(event) {
|
---|
668 | this._isAnimating = true;
|
---|
669 | // Scroll the content element to the top as soon as the animation starts. This is necessary,
|
---|
670 | // because we move focus to the first item while it's still being animated, which can throw
|
---|
671 | // the browser off when it determines the scroll position. Alternatively we can move focus
|
---|
672 | // when the animation is done, however moving focus asynchronously will interrupt screen
|
---|
673 | // readers which are in the process of reading out the menu already. We take the `element`
|
---|
674 | // from the `event` since we can't use a `ViewChild` to access the pane.
|
---|
675 | if (event.toState === 'enter' && this._keyManager.activeItemIndex === 0) {
|
---|
676 | event.element.scrollTop = 0;
|
---|
677 | }
|
---|
678 | }
|
---|
679 | /**
|
---|
680 | * Sets up a stream that will keep track of any newly-added menu items and will update the list
|
---|
681 | * of direct descendants. We collect the descendants this way, because `_allItems` can include
|
---|
682 | * items that are part of child menus, and using a custom way of registering items is unreliable
|
---|
683 | * when it comes to maintaining the item order.
|
---|
684 | */
|
---|
685 | _updateDirectDescendants() {
|
---|
686 | this._allItems.changes
|
---|
687 | .pipe(startWith(this._allItems))
|
---|
688 | .subscribe((items) => {
|
---|
689 | this._directDescendantItems.reset(items.filter(item => item._parentMenu === this));
|
---|
690 | this._directDescendantItems.notifyOnChanges();
|
---|
691 | });
|
---|
692 | }
|
---|
693 | }
|
---|
694 | _MatMenuBase.decorators = [
|
---|
695 | { type: Directive }
|
---|
696 | ];
|
---|
697 | _MatMenuBase.ctorParameters = () => [
|
---|
698 | { type: ElementRef },
|
---|
699 | { type: NgZone },
|
---|
700 | { type: undefined, decorators: [{ type: Inject, args: [MAT_MENU_DEFAULT_OPTIONS,] }] }
|
---|
701 | ];
|
---|
702 | _MatMenuBase.propDecorators = {
|
---|
703 | _allItems: [{ type: ContentChildren, args: [MatMenuItem, { descendants: true },] }],
|
---|
704 | backdropClass: [{ type: Input }],
|
---|
705 | ariaLabel: [{ type: Input, args: ['aria-label',] }],
|
---|
706 | ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
|
---|
707 | ariaDescribedby: [{ type: Input, args: ['aria-describedby',] }],
|
---|
708 | xPosition: [{ type: Input }],
|
---|
709 | yPosition: [{ type: Input }],
|
---|
710 | templateRef: [{ type: ViewChild, args: [TemplateRef,] }],
|
---|
711 | items: [{ type: ContentChildren, args: [MatMenuItem, { descendants: false },] }],
|
---|
712 | lazyContent: [{ type: ContentChild, args: [MAT_MENU_CONTENT,] }],
|
---|
713 | overlapTrigger: [{ type: Input }],
|
---|
714 | hasBackdrop: [{ type: Input }],
|
---|
715 | panelClass: [{ type: Input, args: ['class',] }],
|
---|
716 | classList: [{ type: Input }],
|
---|
717 | closed: [{ type: Output }],
|
---|
718 | close: [{ type: Output }]
|
---|
719 | };
|
---|
720 | /** @docs-public MatMenu */
|
---|
721 | class MatMenu extends _MatMenuBase {
|
---|
722 | constructor(elementRef, ngZone, defaultOptions) {
|
---|
723 | super(elementRef, ngZone, defaultOptions);
|
---|
724 | this._elevationPrefix = 'mat-elevation-z';
|
---|
725 | this._baseElevation = 4;
|
---|
726 | }
|
---|
727 | }
|
---|
728 | MatMenu.decorators = [
|
---|
729 | { type: Component, args: [{
|
---|
730 | selector: 'mat-menu',
|
---|
731 | template: "<ng-template>\n <div\n class=\"mat-menu-panel\"\n [id]=\"panelId\"\n [ngClass]=\"_classList\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"closed.emit('click')\"\n [@transformMenu]=\"_panelAnimationState\"\n (@transformMenu.start)=\"_onAnimationStart($event)\"\n (@transformMenu.done)=\"_onAnimationDone($event)\"\n tabindex=\"-1\"\n role=\"menu\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\">\n <div class=\"mat-menu-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\n",
|
---|
732 | changeDetection: ChangeDetectionStrategy.OnPush,
|
---|
733 | encapsulation: ViewEncapsulation.None,
|
---|
734 | exportAs: 'matMenu',
|
---|
735 | host: {
|
---|
736 | '[attr.aria-label]': 'null',
|
---|
737 | '[attr.aria-labelledby]': 'null',
|
---|
738 | '[attr.aria-describedby]': 'null',
|
---|
739 | },
|
---|
740 | animations: [
|
---|
741 | matMenuAnimations.transformMenu,
|
---|
742 | matMenuAnimations.fadeInItems
|
---|
743 | ],
|
---|
744 | providers: [
|
---|
745 | { provide: MAT_MENU_PANEL, useExisting: MatMenu },
|
---|
746 | ],
|
---|
747 | styles: ["mat-menu{display:none}.mat-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 48px);border-radius:4px;outline:0;min-height:64px}.mat-menu-panel.ng-animating{pointer-events:none}.cdk-high-contrast-active .mat-menu-panel{outline:solid 1px}.mat-menu-content:not(:empty){padding-top:8px;padding-bottom:8px}.mat-menu-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;max-width:100%;position:relative}.mat-menu-item::-moz-focus-inner{border:0}.mat-menu-item[disabled]{cursor:default}[dir=rtl] .mat-menu-item{text-align:right}.mat-menu-item .mat-icon{margin-right:16px;vertical-align:middle}.mat-menu-item .mat-icon svg{vertical-align:top}[dir=rtl] .mat-menu-item .mat-icon{margin-left:16px;margin-right:0}.mat-menu-item[disabled]{pointer-events:none}.cdk-high-contrast-active .mat-menu-item{margin-top:1px}.cdk-high-contrast-active .mat-menu-item.cdk-program-focused,.cdk-high-contrast-active .mat-menu-item.cdk-keyboard-focused,.cdk-high-contrast-active .mat-menu-item-highlighted{outline:dotted 1px}.mat-menu-item-submenu-trigger{padding-right:32px}[dir=rtl] .mat-menu-item-submenu-trigger{padding-right:16px;padding-left:32px}.mat-menu-submenu-icon{position:absolute;top:50%;right:16px;transform:translateY(-50%);width:5px;height:10px;fill:currentColor}[dir=rtl] .mat-menu-submenu-icon{right:auto;left:16px;transform:translateY(-50%) scaleX(-1)}.cdk-high-contrast-active .mat-menu-submenu-icon{fill:CanvasText}button.mat-menu-item{width:100%}.mat-menu-item .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}\n"]
|
---|
748 | },] }
|
---|
749 | ];
|
---|
750 | MatMenu.ctorParameters = () => [
|
---|
751 | { type: ElementRef },
|
---|
752 | { type: NgZone },
|
---|
753 | { type: undefined, decorators: [{ type: Inject, args: [MAT_MENU_DEFAULT_OPTIONS,] }] }
|
---|
754 | ];
|
---|
755 |
|
---|
756 | /**
|
---|
757 | * @license
|
---|
758 | * Copyright Google LLC All Rights Reserved.
|
---|
759 | *
|
---|
760 | * Use of this source code is governed by an MIT-style license that can be
|
---|
761 | * found in the LICENSE file at https://angular.io/license
|
---|
762 | */
|
---|
763 | /** Injection token that determines the scroll handling while the menu is open. */
|
---|
764 | const MAT_MENU_SCROLL_STRATEGY = new InjectionToken('mat-menu-scroll-strategy');
|
---|
765 | /** @docs-private */
|
---|
766 | function MAT_MENU_SCROLL_STRATEGY_FACTORY(overlay) {
|
---|
767 | return () => overlay.scrollStrategies.reposition();
|
---|
768 | }
|
---|
769 | /** @docs-private */
|
---|
770 | const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER = {
|
---|
771 | provide: MAT_MENU_SCROLL_STRATEGY,
|
---|
772 | deps: [Overlay],
|
---|
773 | useFactory: MAT_MENU_SCROLL_STRATEGY_FACTORY,
|
---|
774 | };
|
---|
775 | /** Default top padding of the menu panel. */
|
---|
776 | const MENU_PANEL_TOP_PADDING = 8;
|
---|
777 | /** Options for binding a passive event listener. */
|
---|
778 | const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
|
---|
779 | // TODO(andrewseguin): Remove the kebab versions in favor of camelCased attribute selectors
|
---|
780 | class _MatMenuTriggerBase {
|
---|
781 | constructor(_overlay, _element, _viewContainerRef, scrollStrategy, parentMenu,
|
---|
782 | // `MatMenuTrigger` is commonly used in combination with a `MatMenuItem`.
|
---|
783 | // tslint:disable-next-line: lightweight-tokens
|
---|
784 | _menuItemInstance, _dir,
|
---|
785 | // TODO(crisbeto): make the _focusMonitor required when doing breaking changes.
|
---|
786 | // @breaking-change 8.0.0
|
---|
787 | _focusMonitor) {
|
---|
788 | this._overlay = _overlay;
|
---|
789 | this._element = _element;
|
---|
790 | this._viewContainerRef = _viewContainerRef;
|
---|
791 | this._menuItemInstance = _menuItemInstance;
|
---|
792 | this._dir = _dir;
|
---|
793 | this._focusMonitor = _focusMonitor;
|
---|
794 | this._overlayRef = null;
|
---|
795 | this._menuOpen = false;
|
---|
796 | this._closingActionsSubscription = Subscription.EMPTY;
|
---|
797 | this._hoverSubscription = Subscription.EMPTY;
|
---|
798 | this._menuCloseSubscription = Subscription.EMPTY;
|
---|
799 | /**
|
---|
800 | * Handles touch start events on the trigger.
|
---|
801 | * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
|
---|
802 | */
|
---|
803 | this._handleTouchStart = (event) => {
|
---|
804 | if (!isFakeTouchstartFromScreenReader(event)) {
|
---|
805 | this._openedBy = 'touch';
|
---|
806 | }
|
---|
807 | };
|
---|
808 | // Tracking input type is necessary so it's possible to only auto-focus
|
---|
809 | // the first item of the list when the menu is opened via the keyboard
|
---|
810 | this._openedBy = undefined;
|
---|
811 | this._ariaHaspopup = true;
|
---|
812 | /**
|
---|
813 | * Whether focus should be restored when the menu is closed.
|
---|
814 | * Note that disabling this option can have accessibility implications
|
---|
815 | * and it's up to you to manage focus, if you decide to turn it off.
|
---|
816 | */
|
---|
817 | this.restoreFocus = true;
|
---|
818 | /** Event emitted when the associated menu is opened. */
|
---|
819 | this.menuOpened = new EventEmitter();
|
---|
820 | /**
|
---|
821 | * Event emitted when the associated menu is opened.
|
---|
822 | * @deprecated Switch to `menuOpened` instead
|
---|
823 | * @breaking-change 8.0.0
|
---|
824 | */
|
---|
825 | // tslint:disable-next-line:no-output-on-prefix
|
---|
826 | this.onMenuOpen = this.menuOpened;
|
---|
827 | /** Event emitted when the associated menu is closed. */
|
---|
828 | this.menuClosed = new EventEmitter();
|
---|
829 | /**
|
---|
830 | * Event emitted when the associated menu is closed.
|
---|
831 | * @deprecated Switch to `menuClosed` instead
|
---|
832 | * @breaking-change 8.0.0
|
---|
833 | */
|
---|
834 | // tslint:disable-next-line:no-output-on-prefix
|
---|
835 | this.onMenuClose = this.menuClosed;
|
---|
836 | this._scrollStrategy = scrollStrategy;
|
---|
837 | this._parentMaterialMenu = parentMenu instanceof _MatMenuBase ? parentMenu : undefined;
|
---|
838 | _element.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
|
---|
839 | if (_menuItemInstance) {
|
---|
840 | _menuItemInstance._triggersSubmenu = this.triggersSubmenu();
|
---|
841 | }
|
---|
842 | }
|
---|
843 | get _ariaExpanded() {
|
---|
844 | return this.menuOpen || null;
|
---|
845 | }
|
---|
846 | get _ariaControl() {
|
---|
847 | return this.menuOpen ? this.menu.panelId : null;
|
---|
848 | }
|
---|
849 | /**
|
---|
850 | * @deprecated
|
---|
851 | * @breaking-change 8.0.0
|
---|
852 | */
|
---|
853 | get _deprecatedMatMenuTriggerFor() { return this.menu; }
|
---|
854 | set _deprecatedMatMenuTriggerFor(v) {
|
---|
855 | this.menu = v;
|
---|
856 | }
|
---|
857 | /** References the menu instance that the trigger is associated with. */
|
---|
858 | get menu() { return this._menu; }
|
---|
859 | set menu(menu) {
|
---|
860 | if (menu === this._menu) {
|
---|
861 | return;
|
---|
862 | }
|
---|
863 | this._menu = menu;
|
---|
864 | this._menuCloseSubscription.unsubscribe();
|
---|
865 | if (menu) {
|
---|
866 | if (menu === this._parentMaterialMenu && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
867 | throwMatMenuRecursiveError();
|
---|
868 | }
|
---|
869 | this._menuCloseSubscription = menu.close.subscribe((reason) => {
|
---|
870 | this._destroyMenu(reason);
|
---|
871 | // If a click closed the menu, we should close the entire chain of nested menus.
|
---|
872 | if ((reason === 'click' || reason === 'tab') && this._parentMaterialMenu) {
|
---|
873 | this._parentMaterialMenu.closed.emit(reason);
|
---|
874 | }
|
---|
875 | });
|
---|
876 | }
|
---|
877 | }
|
---|
878 | ngAfterContentInit() {
|
---|
879 | this._checkMenu();
|
---|
880 | this._handleHover();
|
---|
881 | }
|
---|
882 | ngOnDestroy() {
|
---|
883 | if (this._overlayRef) {
|
---|
884 | this._overlayRef.dispose();
|
---|
885 | this._overlayRef = null;
|
---|
886 | }
|
---|
887 | this._element.nativeElement.removeEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
|
---|
888 | this._menuCloseSubscription.unsubscribe();
|
---|
889 | this._closingActionsSubscription.unsubscribe();
|
---|
890 | this._hoverSubscription.unsubscribe();
|
---|
891 | }
|
---|
892 | /** Whether the menu is open. */
|
---|
893 | get menuOpen() {
|
---|
894 | return this._menuOpen;
|
---|
895 | }
|
---|
896 | /** The text direction of the containing app. */
|
---|
897 | get dir() {
|
---|
898 | return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
|
---|
899 | }
|
---|
900 | /** Whether the menu triggers a sub-menu or a top-level one. */
|
---|
901 | triggersSubmenu() {
|
---|
902 | return !!(this._menuItemInstance && this._parentMaterialMenu);
|
---|
903 | }
|
---|
904 | /** Toggles the menu between the open and closed states. */
|
---|
905 | toggleMenu() {
|
---|
906 | return this._menuOpen ? this.closeMenu() : this.openMenu();
|
---|
907 | }
|
---|
908 | /** Opens the menu. */
|
---|
909 | openMenu() {
|
---|
910 | if (this._menuOpen) {
|
---|
911 | return;
|
---|
912 | }
|
---|
913 | this._checkMenu();
|
---|
914 | const overlayRef = this._createOverlay();
|
---|
915 | const overlayConfig = overlayRef.getConfig();
|
---|
916 | this._setPosition(overlayConfig.positionStrategy);
|
---|
917 | overlayConfig.hasBackdrop = this.menu.hasBackdrop == null ? !this.triggersSubmenu() :
|
---|
918 | this.menu.hasBackdrop;
|
---|
919 | overlayRef.attach(this._getPortal());
|
---|
920 | if (this.menu.lazyContent) {
|
---|
921 | this.menu.lazyContent.attach(this.menuData);
|
---|
922 | }
|
---|
923 | this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
|
---|
924 | this._initMenu();
|
---|
925 | if (this.menu instanceof _MatMenuBase) {
|
---|
926 | this.menu._startAnimation();
|
---|
927 | }
|
---|
928 | }
|
---|
929 | /** Closes the menu. */
|
---|
930 | closeMenu() {
|
---|
931 | this.menu.close.emit();
|
---|
932 | }
|
---|
933 | /**
|
---|
934 | * Focuses the menu trigger.
|
---|
935 | * @param origin Source of the menu trigger's focus.
|
---|
936 | */
|
---|
937 | focus(origin, options) {
|
---|
938 | if (this._focusMonitor && origin) {
|
---|
939 | this._focusMonitor.focusVia(this._element, origin, options);
|
---|
940 | }
|
---|
941 | else {
|
---|
942 | this._element.nativeElement.focus(options);
|
---|
943 | }
|
---|
944 | }
|
---|
945 | /**
|
---|
946 | * Updates the position of the menu to ensure that it fits all options within the viewport.
|
---|
947 | */
|
---|
948 | updatePosition() {
|
---|
949 | var _a;
|
---|
950 | (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.updatePosition();
|
---|
951 | }
|
---|
952 | /** Closes the menu and does the necessary cleanup. */
|
---|
953 | _destroyMenu(reason) {
|
---|
954 | if (!this._overlayRef || !this.menuOpen) {
|
---|
955 | return;
|
---|
956 | }
|
---|
957 | const menu = this.menu;
|
---|
958 | this._closingActionsSubscription.unsubscribe();
|
---|
959 | this._overlayRef.detach();
|
---|
960 | // Always restore focus if the user is navigating using the keyboard or the menu was opened
|
---|
961 | // programmatically. We don't restore for non-root triggers, because it can prevent focus
|
---|
962 | // from making it back to the root trigger when closing a long chain of menus by clicking
|
---|
963 | // on the backdrop.
|
---|
964 | if (this.restoreFocus && (reason === 'keydown' || !this._openedBy || !this.triggersSubmenu())) {
|
---|
965 | this.focus(this._openedBy);
|
---|
966 | }
|
---|
967 | this._openedBy = undefined;
|
---|
968 | if (menu instanceof _MatMenuBase) {
|
---|
969 | menu._resetAnimation();
|
---|
970 | if (menu.lazyContent) {
|
---|
971 | // Wait for the exit animation to finish before detaching the content.
|
---|
972 | menu._animationDone
|
---|
973 | .pipe(filter(event => event.toState === 'void'), take(1),
|
---|
974 | // Interrupt if the content got re-attached.
|
---|
975 | takeUntil(menu.lazyContent._attached))
|
---|
976 | .subscribe({
|
---|
977 | next: () => menu.lazyContent.detach(),
|
---|
978 | // No matter whether the content got re-attached, reset the menu.
|
---|
979 | complete: () => this._setIsMenuOpen(false)
|
---|
980 | });
|
---|
981 | }
|
---|
982 | else {
|
---|
983 | this._setIsMenuOpen(false);
|
---|
984 | }
|
---|
985 | }
|
---|
986 | else {
|
---|
987 | this._setIsMenuOpen(false);
|
---|
988 | if (menu.lazyContent) {
|
---|
989 | menu.lazyContent.detach();
|
---|
990 | }
|
---|
991 | }
|
---|
992 | }
|
---|
993 | /**
|
---|
994 | * This method sets the menu state to open and focuses the first item if
|
---|
995 | * the menu was opened via the keyboard.
|
---|
996 | */
|
---|
997 | _initMenu() {
|
---|
998 | this.menu.parentMenu = this.triggersSubmenu() ? this._parentMaterialMenu : undefined;
|
---|
999 | this.menu.direction = this.dir;
|
---|
1000 | this._setMenuElevation();
|
---|
1001 | this.menu.focusFirstItem(this._openedBy || 'program');
|
---|
1002 | this._setIsMenuOpen(true);
|
---|
1003 | }
|
---|
1004 | /** Updates the menu elevation based on the amount of parent menus that it has. */
|
---|
1005 | _setMenuElevation() {
|
---|
1006 | if (this.menu.setElevation) {
|
---|
1007 | let depth = 0;
|
---|
1008 | let parentMenu = this.menu.parentMenu;
|
---|
1009 | while (parentMenu) {
|
---|
1010 | depth++;
|
---|
1011 | parentMenu = parentMenu.parentMenu;
|
---|
1012 | }
|
---|
1013 | this.menu.setElevation(depth);
|
---|
1014 | }
|
---|
1015 | }
|
---|
1016 | // set state rather than toggle to support triggers sharing a menu
|
---|
1017 | _setIsMenuOpen(isOpen) {
|
---|
1018 | this._menuOpen = isOpen;
|
---|
1019 | this._menuOpen ? this.menuOpened.emit() : this.menuClosed.emit();
|
---|
1020 | if (this.triggersSubmenu()) {
|
---|
1021 | this._menuItemInstance._setHighlighted(isOpen);
|
---|
1022 | }
|
---|
1023 | }
|
---|
1024 | /**
|
---|
1025 | * This method checks that a valid instance of MatMenu has been passed into
|
---|
1026 | * matMenuTriggerFor. If not, an exception is thrown.
|
---|
1027 | */
|
---|
1028 | _checkMenu() {
|
---|
1029 | if (!this.menu && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
1030 | throwMatMenuMissingError();
|
---|
1031 | }
|
---|
1032 | }
|
---|
1033 | /**
|
---|
1034 | * This method creates the overlay from the provided menu's template and saves its
|
---|
1035 | * OverlayRef so that it can be attached to the DOM when openMenu is called.
|
---|
1036 | */
|
---|
1037 | _createOverlay() {
|
---|
1038 | if (!this._overlayRef) {
|
---|
1039 | const config = this._getOverlayConfig();
|
---|
1040 | this._subscribeToPositions(config.positionStrategy);
|
---|
1041 | this._overlayRef = this._overlay.create(config);
|
---|
1042 | // Consume the `keydownEvents` in order to prevent them from going to another overlay.
|
---|
1043 | // Ideally we'd also have our keyboard event logic in here, however doing so will
|
---|
1044 | // break anybody that may have implemented the `MatMenuPanel` themselves.
|
---|
1045 | this._overlayRef.keydownEvents().subscribe();
|
---|
1046 | }
|
---|
1047 | return this._overlayRef;
|
---|
1048 | }
|
---|
1049 | /**
|
---|
1050 | * This method builds the configuration object needed to create the overlay, the OverlayState.
|
---|
1051 | * @returns OverlayConfig
|
---|
1052 | */
|
---|
1053 | _getOverlayConfig() {
|
---|
1054 | return new OverlayConfig({
|
---|
1055 | positionStrategy: this._overlay.position()
|
---|
1056 | .flexibleConnectedTo(this._element)
|
---|
1057 | .withLockedPosition()
|
---|
1058 | .withGrowAfterOpen()
|
---|
1059 | .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel'),
|
---|
1060 | backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
|
---|
1061 | panelClass: this.menu.overlayPanelClass,
|
---|
1062 | scrollStrategy: this._scrollStrategy(),
|
---|
1063 | direction: this._dir
|
---|
1064 | });
|
---|
1065 | }
|
---|
1066 | /**
|
---|
1067 | * Listens to changes in the position of the overlay and sets the correct classes
|
---|
1068 | * on the menu based on the new position. This ensures the animation origin is always
|
---|
1069 | * correct, even if a fallback position is used for the overlay.
|
---|
1070 | */
|
---|
1071 | _subscribeToPositions(position) {
|
---|
1072 | if (this.menu.setPositionClasses) {
|
---|
1073 | position.positionChanges.subscribe(change => {
|
---|
1074 | const posX = change.connectionPair.overlayX === 'start' ? 'after' : 'before';
|
---|
1075 | const posY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
|
---|
1076 | this.menu.setPositionClasses(posX, posY);
|
---|
1077 | });
|
---|
1078 | }
|
---|
1079 | }
|
---|
1080 | /**
|
---|
1081 | * Sets the appropriate positions on a position strategy
|
---|
1082 | * so the overlay connects with the trigger correctly.
|
---|
1083 | * @param positionStrategy Strategy whose position to update.
|
---|
1084 | */
|
---|
1085 | _setPosition(positionStrategy) {
|
---|
1086 | let [originX, originFallbackX] = this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
|
---|
1087 | let [overlayY, overlayFallbackY] = this.menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
|
---|
1088 | let [originY, originFallbackY] = [overlayY, overlayFallbackY];
|
---|
1089 | let [overlayX, overlayFallbackX] = [originX, originFallbackX];
|
---|
1090 | let offsetY = 0;
|
---|
1091 | if (this.triggersSubmenu()) {
|
---|
1092 | // When the menu is a sub-menu, it should always align itself
|
---|
1093 | // to the edges of the trigger, instead of overlapping it.
|
---|
1094 | overlayFallbackX = originX = this.menu.xPosition === 'before' ? 'start' : 'end';
|
---|
1095 | originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
|
---|
1096 | offsetY = overlayY === 'bottom' ? MENU_PANEL_TOP_PADDING : -MENU_PANEL_TOP_PADDING;
|
---|
1097 | }
|
---|
1098 | else if (!this.menu.overlapTrigger) {
|
---|
1099 | originY = overlayY === 'top' ? 'bottom' : 'top';
|
---|
1100 | originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
|
---|
1101 | }
|
---|
1102 | positionStrategy.withPositions([
|
---|
1103 | { originX, originY, overlayX, overlayY, offsetY },
|
---|
1104 | { originX: originFallbackX, originY, overlayX: overlayFallbackX, overlayY, offsetY },
|
---|
1105 | {
|
---|
1106 | originX,
|
---|
1107 | originY: originFallbackY,
|
---|
1108 | overlayX,
|
---|
1109 | overlayY: overlayFallbackY,
|
---|
1110 | offsetY: -offsetY
|
---|
1111 | },
|
---|
1112 | {
|
---|
1113 | originX: originFallbackX,
|
---|
1114 | originY: originFallbackY,
|
---|
1115 | overlayX: overlayFallbackX,
|
---|
1116 | overlayY: overlayFallbackY,
|
---|
1117 | offsetY: -offsetY
|
---|
1118 | }
|
---|
1119 | ]);
|
---|
1120 | }
|
---|
1121 | /** Returns a stream that emits whenever an action that should close the menu occurs. */
|
---|
1122 | _menuClosingActions() {
|
---|
1123 | const backdrop = this._overlayRef.backdropClick();
|
---|
1124 | const detachments = this._overlayRef.detachments();
|
---|
1125 | const parentClose = this._parentMaterialMenu ? this._parentMaterialMenu.closed : of();
|
---|
1126 | const hover = this._parentMaterialMenu ? this._parentMaterialMenu._hovered().pipe(filter(active => active !== this._menuItemInstance), filter(() => this._menuOpen)) : of();
|
---|
1127 | return merge(backdrop, parentClose, hover, detachments);
|
---|
1128 | }
|
---|
1129 | /** Handles mouse presses on the trigger. */
|
---|
1130 | _handleMousedown(event) {
|
---|
1131 | if (!isFakeMousedownFromScreenReader(event)) {
|
---|
1132 | // Since right or middle button clicks won't trigger the `click` event,
|
---|
1133 | // we shouldn't consider the menu as opened by mouse in those cases.
|
---|
1134 | this._openedBy = event.button === 0 ? 'mouse' : undefined;
|
---|
1135 | // Since clicking on the trigger won't close the menu if it opens a sub-menu,
|
---|
1136 | // we should prevent focus from moving onto it via click to avoid the
|
---|
1137 | // highlight from lingering on the menu item.
|
---|
1138 | if (this.triggersSubmenu()) {
|
---|
1139 | event.preventDefault();
|
---|
1140 | }
|
---|
1141 | }
|
---|
1142 | }
|
---|
1143 | /** Handles key presses on the trigger. */
|
---|
1144 | _handleKeydown(event) {
|
---|
1145 | const keyCode = event.keyCode;
|
---|
1146 | // Pressing enter on the trigger will trigger the click handler later.
|
---|
1147 | if (keyCode === ENTER || keyCode === SPACE) {
|
---|
1148 | this._openedBy = 'keyboard';
|
---|
1149 | }
|
---|
1150 | if (this.triggersSubmenu() && ((keyCode === RIGHT_ARROW && this.dir === 'ltr') ||
|
---|
1151 | (keyCode === LEFT_ARROW && this.dir === 'rtl'))) {
|
---|
1152 | this._openedBy = 'keyboard';
|
---|
1153 | this.openMenu();
|
---|
1154 | }
|
---|
1155 | }
|
---|
1156 | /** Handles click events on the trigger. */
|
---|
1157 | _handleClick(event) {
|
---|
1158 | if (this.triggersSubmenu()) {
|
---|
1159 | // Stop event propagation to avoid closing the parent menu.
|
---|
1160 | event.stopPropagation();
|
---|
1161 | this.openMenu();
|
---|
1162 | }
|
---|
1163 | else {
|
---|
1164 | this.toggleMenu();
|
---|
1165 | }
|
---|
1166 | }
|
---|
1167 | /** Handles the cases where the user hovers over the trigger. */
|
---|
1168 | _handleHover() {
|
---|
1169 | // Subscribe to changes in the hovered item in order to toggle the panel.
|
---|
1170 | if (!this.triggersSubmenu() || !this._parentMaterialMenu) {
|
---|
1171 | return;
|
---|
1172 | }
|
---|
1173 | this._hoverSubscription = this._parentMaterialMenu._hovered()
|
---|
1174 | // Since we might have multiple competing triggers for the same menu (e.g. a sub-menu
|
---|
1175 | // with different data and triggers), we have to delay it by a tick to ensure that
|
---|
1176 | // it won't be closed immediately after it is opened.
|
---|
1177 | .pipe(filter(active => active === this._menuItemInstance && !active.disabled), delay(0, asapScheduler))
|
---|
1178 | .subscribe(() => {
|
---|
1179 | this._openedBy = 'mouse';
|
---|
1180 | // If the same menu is used between multiple triggers, it might still be animating
|
---|
1181 | // while the new trigger tries to re-open it. Wait for the animation to finish
|
---|
1182 | // before doing so. Also interrupt if the user moves to another item.
|
---|
1183 | if (this.menu instanceof _MatMenuBase && this.menu._isAnimating) {
|
---|
1184 | // We need the `delay(0)` here in order to avoid
|
---|
1185 | // 'changed after checked' errors in some cases. See #12194.
|
---|
1186 | this.menu._animationDone
|
---|
1187 | .pipe(take(1), delay(0, asapScheduler), takeUntil(this._parentMaterialMenu._hovered()))
|
---|
1188 | .subscribe(() => this.openMenu());
|
---|
1189 | }
|
---|
1190 | else {
|
---|
1191 | this.openMenu();
|
---|
1192 | }
|
---|
1193 | });
|
---|
1194 | }
|
---|
1195 | /** Gets the portal that should be attached to the overlay. */
|
---|
1196 | _getPortal() {
|
---|
1197 | // Note that we can avoid this check by keeping the portal on the menu panel.
|
---|
1198 | // While it would be cleaner, we'd have to introduce another required method on
|
---|
1199 | // `MatMenuPanel`, making it harder to consume.
|
---|
1200 | if (!this._portal || this._portal.templateRef !== this.menu.templateRef) {
|
---|
1201 | this._portal = new TemplatePortal(this.menu.templateRef, this._viewContainerRef);
|
---|
1202 | }
|
---|
1203 | return this._portal;
|
---|
1204 | }
|
---|
1205 | }
|
---|
1206 | _MatMenuTriggerBase.decorators = [
|
---|
1207 | { type: Directive }
|
---|
1208 | ];
|
---|
1209 | _MatMenuTriggerBase.ctorParameters = () => [
|
---|
1210 | { type: Overlay },
|
---|
1211 | { type: ElementRef },
|
---|
1212 | { type: ViewContainerRef },
|
---|
1213 | { type: undefined, decorators: [{ type: Inject, args: [MAT_MENU_SCROLL_STRATEGY,] }] },
|
---|
1214 | { type: undefined, decorators: [{ type: Inject, args: [MAT_MENU_PANEL,] }, { type: Optional }] },
|
---|
1215 | { type: MatMenuItem, decorators: [{ type: Optional }, { type: Self }] },
|
---|
1216 | { type: Directionality, decorators: [{ type: Optional }] },
|
---|
1217 | { type: FocusMonitor }
|
---|
1218 | ];
|
---|
1219 | _MatMenuTriggerBase.propDecorators = {
|
---|
1220 | _ariaExpanded: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
|
---|
1221 | _ariaControl: [{ type: HostBinding, args: ['attr.aria-controls',] }],
|
---|
1222 | _ariaHaspopup: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
|
---|
1223 | _deprecatedMatMenuTriggerFor: [{ type: Input, args: ['mat-menu-trigger-for',] }],
|
---|
1224 | menu: [{ type: Input, args: ['matMenuTriggerFor',] }],
|
---|
1225 | menuData: [{ type: Input, args: ['matMenuTriggerData',] }],
|
---|
1226 | restoreFocus: [{ type: Input, args: ['matMenuTriggerRestoreFocus',] }],
|
---|
1227 | menuOpened: [{ type: Output }],
|
---|
1228 | onMenuOpen: [{ type: Output }],
|
---|
1229 | menuClosed: [{ type: Output }],
|
---|
1230 | onMenuClose: [{ type: Output }],
|
---|
1231 | _handleMousedown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
|
---|
1232 | _handleKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
|
---|
1233 | _handleClick: [{ type: HostListener, args: ['click', ['$event'],] }]
|
---|
1234 | };
|
---|
1235 | /** Directive applied to an element that should trigger a `mat-menu`. */
|
---|
1236 | class MatMenuTrigger extends _MatMenuTriggerBase {
|
---|
1237 | }
|
---|
1238 | MatMenuTrigger.decorators = [
|
---|
1239 | { type: Directive, args: [{
|
---|
1240 | selector: `[mat-menu-trigger-for], [matMenuTriggerFor]`,
|
---|
1241 | host: {
|
---|
1242 | 'class': 'mat-menu-trigger',
|
---|
1243 | },
|
---|
1244 | exportAs: 'matMenuTrigger'
|
---|
1245 | },] }
|
---|
1246 | ];
|
---|
1247 |
|
---|
1248 | /**
|
---|
1249 | * @license
|
---|
1250 | * Copyright Google LLC All Rights Reserved.
|
---|
1251 | *
|
---|
1252 | * Use of this source code is governed by an MIT-style license that can be
|
---|
1253 | * found in the LICENSE file at https://angular.io/license
|
---|
1254 | */
|
---|
1255 | class MatMenuModule {
|
---|
1256 | }
|
---|
1257 | MatMenuModule.decorators = [
|
---|
1258 | { type: NgModule, args: [{
|
---|
1259 | imports: [
|
---|
1260 | CommonModule,
|
---|
1261 | MatCommonModule,
|
---|
1262 | MatRippleModule,
|
---|
1263 | OverlayModule,
|
---|
1264 | ],
|
---|
1265 | exports: [
|
---|
1266 | CdkScrollableModule,
|
---|
1267 | MatCommonModule,
|
---|
1268 | MatMenu,
|
---|
1269 | MatMenuItem,
|
---|
1270 | MatMenuTrigger,
|
---|
1271 | MatMenuContent
|
---|
1272 | ],
|
---|
1273 | declarations: [MatMenu, MatMenuItem, MatMenuTrigger, MatMenuContent],
|
---|
1274 | providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER]
|
---|
1275 | },] }
|
---|
1276 | ];
|
---|
1277 |
|
---|
1278 | /**
|
---|
1279 | * @license
|
---|
1280 | * Copyright Google LLC All Rights Reserved.
|
---|
1281 | *
|
---|
1282 | * Use of this source code is governed by an MIT-style license that can be
|
---|
1283 | * found in the LICENSE file at https://angular.io/license
|
---|
1284 | */
|
---|
1285 |
|
---|
1286 | /**
|
---|
1287 | * @license
|
---|
1288 | * Copyright Google LLC All Rights Reserved.
|
---|
1289 | *
|
---|
1290 | * Use of this source code is governed by an MIT-style license that can be
|
---|
1291 | * found in the LICENSE file at https://angular.io/license
|
---|
1292 | */
|
---|
1293 |
|
---|
1294 | /**
|
---|
1295 | * Generated bundle index. Do not edit.
|
---|
1296 | */
|
---|
1297 |
|
---|
1298 | export { MAT_MENU_CONTENT, MAT_MENU_DEFAULT_OPTIONS, MAT_MENU_PANEL, MAT_MENU_SCROLL_STRATEGY, MatMenu, MatMenuContent, MatMenuItem, MatMenuModule, MatMenuTrigger, _MatMenuBase, _MatMenuContentBase, _MatMenuTriggerBase, fadeInItems, matMenuAnimations, transformMenu, MAT_MENU_DEFAULT_OPTIONS_FACTORY as ɵangular_material_src_material_menu_menu_a, MAT_MENU_SCROLL_STRATEGY_FACTORY as ɵangular_material_src_material_menu_menu_b, MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER as ɵangular_material_src_material_menu_menu_c };
|
---|
1299 | //# sourceMappingURL=menu.js.map
|
---|