UNPKG

44.5 kBJavaScriptView Raw
1import { CdkDialogContainer, Dialog, DialogConfig, DialogModule } from '@angular/cdk/dialog';
2import * as i1$1 from '@angular/cdk/overlay';
3import { Overlay, OverlayModule } from '@angular/cdk/overlay';
4import * as i4 from '@angular/cdk/portal';
5import { PortalModule } from '@angular/cdk/portal';
6import * as i0 from '@angular/core';
7import { EventEmitter, Component, Optional, Inject, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Injectable, SkipSelf, Directive, Input, NgModule } from '@angular/core';
8import { MatCommonModule } from '@angular/material/core';
9import { Subject, merge, defer } from 'rxjs';
10import { filter, take, startWith } from 'rxjs/operators';
11import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
12import * as i2 from '@angular/common';
13import { DOCUMENT } from '@angular/common';
14import * as i1 from '@angular/cdk/a11y';
15import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
16import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
17
18/**
19 * @license
20 * Copyright Google LLC All Rights Reserved.
21 *
22 * Use of this source code is governed by an MIT-style license that can be
23 * found in the LICENSE file at https://angular.io/license
24 */
25/**
26 * Default parameters for the animation for backwards compatibility.
27 * @docs-private
28 */
29const defaultParams = {
30 params: { enterAnimationDuration: '150ms', exitAnimationDuration: '75ms' },
31};
32/**
33 * Animations used by MatDialog.
34 * @docs-private
35 */
36const matDialogAnimations = {
37 /** Animation that is applied on the dialog container by default. */
38 dialogContainer: trigger('dialogContainer', [
39 // Note: The `enter` animation transitions to `transform: none`, because for some reason
40 // specifying the transform explicitly, causes IE both to blur the dialog content and
41 // decimate the animation performance. Leaving it as `none` solves both issues.
42 state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),
43 state('enter', style({ transform: 'none' })),
44 transition('* => enter', group([
45 animate('{{enterAnimationDuration}} cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 })),
46 query('@*', animateChild(), { optional: true }),
47 ]), defaultParams),
48 transition('* => void, * => exit', group([
49 animate('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 })),
50 query('@*', animateChild(), { optional: true }),
51 ]), defaultParams),
52 ]),
53};
54
55/**
56 * @license
57 * Copyright Google LLC All Rights Reserved.
58 *
59 * Use of this source code is governed by an MIT-style license that can be
60 * found in the LICENSE file at https://angular.io/license
61 */
62/**
63 * Configuration for opening a modal dialog with the MatDialog service.
64 */
65class MatDialogConfig {
66 constructor() {
67 /** The ARIA role of the dialog element. */
68 this.role = 'dialog';
69 /** Custom class for the overlay pane. */
70 this.panelClass = '';
71 /** Whether the dialog has a backdrop. */
72 this.hasBackdrop = true;
73 /** Custom class for the backdrop. */
74 this.backdropClass = '';
75 /** Whether the user can use escape or clicking on the backdrop to close the modal. */
76 this.disableClose = false;
77 /** Width of the dialog. */
78 this.width = '';
79 /** Height of the dialog. */
80 this.height = '';
81 /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
82 this.maxWidth = '80vw';
83 /** Data being injected into the child component. */
84 this.data = null;
85 /** ID of the element that describes the dialog. */
86 this.ariaDescribedBy = null;
87 /** ID of the element that labels the dialog. */
88 this.ariaLabelledBy = null;
89 /** Aria label to assign to the dialog element. */
90 this.ariaLabel = null;
91 /**
92 * Where the dialog should focus on open.
93 * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
94 * AutoFocusTarget instead.
95 */
96 this.autoFocus = 'first-tabbable';
97 /**
98 * Whether the dialog should restore focus to the
99 * previously-focused element, after it's closed.
100 */
101 this.restoreFocus = true;
102 /** Whether to wait for the opening animation to finish before trapping focus. */
103 this.delayFocusTrap = true;
104 /**
105 * Whether the dialog should close when the user goes backwards/forwards in history.
106 * Note that this usually doesn't include clicking on links (unless the user is using
107 * the `HashLocationStrategy`).
108 */
109 this.closeOnNavigation = true;
110 /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
111 this.enterAnimationDuration = defaultParams.params.enterAnimationDuration;
112 /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
113 this.exitAnimationDuration = defaultParams.params.exitAnimationDuration;
114 // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
115 }
116}
117
118/**
119 * Base class for the `MatDialogContainer`. The base class does not implement
120 * animations as these are left to implementers of the dialog container.
121 */
122// tslint:disable-next-line:validate-decorators
123class _MatDialogContainerBase extends CdkDialogContainer {
124 constructor(elementRef, focusTrapFactory, _document, dialogConfig, interactivityChecker, ngZone, overlayRef, focusMonitor) {
125 super(elementRef, focusTrapFactory, _document, dialogConfig, interactivityChecker, ngZone, overlayRef, focusMonitor);
126 /** Emits when an animation state changes. */
127 this._animationStateChanged = new EventEmitter();
128 }
129 _captureInitialFocus() {
130 if (!this._config.delayFocusTrap) {
131 this._trapFocus();
132 }
133 }
134 /**
135 * Callback for when the open dialog animation has finished. Intended to
136 * be called by sub-classes that use different animation implementations.
137 */
138 _openAnimationDone(totalTime) {
139 if (this._config.delayFocusTrap) {
140 this._trapFocus();
141 }
142 this._animationStateChanged.next({ state: 'opened', totalTime });
143 }
144}
145_MatDialogContainerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: _MatDialogContainerBase, deps: [{ token: i0.ElementRef }, { token: i1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: MatDialogConfig }, { token: i1.InteractivityChecker }, { token: i0.NgZone }, { token: i1$1.OverlayRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
146_MatDialogContainerBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: _MatDialogContainerBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
147i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: _MatDialogContainerBase, decorators: [{
148 type: Component,
149 args: [{ template: '' }]
150 }], ctorParameters: function () {
151 return [{ type: i0.ElementRef }, { type: i1.FocusTrapFactory }, { type: undefined, decorators: [{
152 type: Optional
153 }, {
154 type: Inject,
155 args: [DOCUMENT]
156 }] }, { type: MatDialogConfig }, { type: i1.InteractivityChecker }, { type: i0.NgZone }, { type: i1$1.OverlayRef }, { type: i1.FocusMonitor }];
157 } });
158/**
159 * Internal component that wraps user-provided dialog content.
160 * Animation is based on https://material.io/guidelines/motion/choreography.html.
161 * @docs-private
162 */
163class MatDialogContainer extends _MatDialogContainerBase {
164 constructor(elementRef, focusTrapFactory, document, dialogConfig, checker, ngZone, overlayRef, _changeDetectorRef, focusMonitor) {
165 super(elementRef, focusTrapFactory, document, dialogConfig, checker, ngZone, overlayRef, focusMonitor);
166 this._changeDetectorRef = _changeDetectorRef;
167 /** State of the dialog animation. */
168 this._state = 'enter';
169 }
170 /** Callback, invoked whenever an animation on the host completes. */
171 _onAnimationDone({ toState, totalTime }) {
172 if (toState === 'enter') {
173 this._openAnimationDone(totalTime);
174 }
175 else if (toState === 'exit') {
176 this._animationStateChanged.next({ state: 'closed', totalTime });
177 }
178 }
179 /** Callback, invoked when an animation on the host starts. */
180 _onAnimationStart({ toState, totalTime }) {
181 if (toState === 'enter') {
182 this._animationStateChanged.next({ state: 'opening', totalTime });
183 }
184 else if (toState === 'exit' || toState === 'void') {
185 this._animationStateChanged.next({ state: 'closing', totalTime });
186 }
187 }
188 /** Starts the dialog exit animation. */
189 _startExitAnimation() {
190 this._state = 'exit';
191 // Mark the container for check so it can react if the
192 // view container is using OnPush change detection.
193 this._changeDetectorRef.markForCheck();
194 }
195 _getAnimationState() {
196 return {
197 value: this._state,
198 params: {
199 'enterAnimationDuration': this._config.enterAnimationDuration || defaultParams.params.enterAnimationDuration,
200 'exitAnimationDuration': this._config.exitAnimationDuration || defaultParams.params.exitAnimationDuration,
201 },
202 };
203 }
204}
205MatDialogContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogContainer, deps: [{ token: i0.ElementRef }, { token: i1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: MatDialogConfig }, { token: i1.InteractivityChecker }, { token: i0.NgZone }, { token: i1$1.OverlayRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
206MatDialogContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: MatDialogContainer, selector: "mat-dialog-container", host: { attributes: { "tabindex": "-1" }, listeners: { "@dialogContainer.start": "_onAnimationStart($event)", "@dialogContainer.done": "_onAnimationDone($event)" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "@dialogContainer": "_getAnimationState()" }, classAttribute: "mat-dialog-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [".mat-dialog-container{display:block;padding:24px;border-radius:4px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.cdk-high-contrast-active .mat-dialog-container{outline:solid 1px}.mat-dialog-content{display:block;margin:0 -24px;padding:0 24px;max-height:65vh;overflow:auto;-webkit-overflow-scrolling:touch}.mat-dialog-title{margin:0 0 20px;display:block}.mat-dialog-actions{padding:8px 0;display:flex;flex-wrap:wrap;min-height:52px;align-items:center;box-sizing:content-box;margin-bottom:-24px}.mat-dialog-actions.mat-dialog-actions-align-center,.mat-dialog-actions[align=center]{justify-content:center}.mat-dialog-actions.mat-dialog-actions-align-end,.mat-dialog-actions[align=end]{justify-content:flex-end}.mat-dialog-actions .mat-button-base+.mat-button-base,.mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-dialog-actions .mat-button-base+.mat-button-base,[dir=rtl] .mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}"], dependencies: [{ kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [matDialogAnimations.dialogContainer], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
207i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogContainer, decorators: [{
208 type: Component,
209 args: [{ selector: 'mat-dialog-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [matDialogAnimations.dialogContainer], host: {
210 'class': 'mat-dialog-container',
211 'tabindex': '-1',
212 '[attr.aria-modal]': '_config.ariaModal',
213 '[id]': '_config.id',
214 '[attr.role]': '_config.role',
215 '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
216 '[attr.aria-label]': '_config.ariaLabel',
217 '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
218 '[@dialogContainer]': `_getAnimationState()`,
219 '(@dialogContainer.start)': '_onAnimationStart($event)',
220 '(@dialogContainer.done)': '_onAnimationDone($event)',
221 }, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [".mat-dialog-container{display:block;padding:24px;border-radius:4px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.cdk-high-contrast-active .mat-dialog-container{outline:solid 1px}.mat-dialog-content{display:block;margin:0 -24px;padding:0 24px;max-height:65vh;overflow:auto;-webkit-overflow-scrolling:touch}.mat-dialog-title{margin:0 0 20px;display:block}.mat-dialog-actions{padding:8px 0;display:flex;flex-wrap:wrap;min-height:52px;align-items:center;box-sizing:content-box;margin-bottom:-24px}.mat-dialog-actions.mat-dialog-actions-align-center,.mat-dialog-actions[align=center]{justify-content:center}.mat-dialog-actions.mat-dialog-actions-align-end,.mat-dialog-actions[align=end]{justify-content:flex-end}.mat-dialog-actions .mat-button-base+.mat-button-base,.mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-dialog-actions .mat-button-base+.mat-button-base,[dir=rtl] .mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}"] }]
222 }], ctorParameters: function () {
223 return [{ type: i0.ElementRef }, { type: i1.FocusTrapFactory }, { type: undefined, decorators: [{
224 type: Optional
225 }, {
226 type: Inject,
227 args: [DOCUMENT]
228 }] }, { type: MatDialogConfig }, { type: i1.InteractivityChecker }, { type: i0.NgZone }, { type: i1$1.OverlayRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }];
229 } });
230
231/**
232 * @license
233 * Copyright Google LLC All Rights Reserved.
234 *
235 * Use of this source code is governed by an MIT-style license that can be
236 * found in the LICENSE file at https://angular.io/license
237 */
238/**
239 * Reference to a dialog opened via the MatDialog service.
240 */
241class MatDialogRef {
242 constructor(_ref, config, _containerInstance) {
243 this._ref = _ref;
244 this._containerInstance = _containerInstance;
245 /** Subject for notifying the user that the dialog has finished opening. */
246 this._afterOpened = new Subject();
247 /** Subject for notifying the user that the dialog has started closing. */
248 this._beforeClosed = new Subject();
249 /** Current state of the dialog. */
250 this._state = 0 /* MatDialogState.OPEN */;
251 this.disableClose = config.disableClose;
252 this.id = _ref.id;
253 // Emit when opening animation completes
254 _containerInstance._animationStateChanged
255 .pipe(filter(event => event.state === 'opened'), take(1))
256 .subscribe(() => {
257 this._afterOpened.next();
258 this._afterOpened.complete();
259 });
260 // Dispose overlay when closing animation is complete
261 _containerInstance._animationStateChanged
262 .pipe(filter(event => event.state === 'closed'), take(1))
263 .subscribe(() => {
264 clearTimeout(this._closeFallbackTimeout);
265 this._finishDialogClose();
266 });
267 _ref.overlayRef.detachments().subscribe(() => {
268 this._beforeClosed.next(this._result);
269 this._beforeClosed.complete();
270 this._finishDialogClose();
271 });
272 merge(this.backdropClick(), this.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)))).subscribe(event => {
273 if (!this.disableClose) {
274 event.preventDefault();
275 _closeDialogVia(this, event.type === 'keydown' ? 'keyboard' : 'mouse');
276 }
277 });
278 }
279 /**
280 * Close the dialog.
281 * @param dialogResult Optional result to return to the dialog opener.
282 */
283 close(dialogResult) {
284 this._result = dialogResult;
285 // Transition the backdrop in parallel to the dialog.
286 this._containerInstance._animationStateChanged
287 .pipe(filter(event => event.state === 'closing'), take(1))
288 .subscribe(event => {
289 this._beforeClosed.next(dialogResult);
290 this._beforeClosed.complete();
291 this._ref.overlayRef.detachBackdrop();
292 // The logic that disposes of the overlay depends on the exit animation completing, however
293 // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
294 // timeout which will clean everything up if the animation hasn't fired within the specified
295 // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
296 // vast majority of cases the timeout will have been cleared before it has the chance to fire.
297 this._closeFallbackTimeout = setTimeout(() => this._finishDialogClose(), event.totalTime + 100);
298 });
299 this._state = 1 /* MatDialogState.CLOSING */;
300 this._containerInstance._startExitAnimation();
301 }
302 /**
303 * Gets an observable that is notified when the dialog is finished opening.
304 */
305 afterOpened() {
306 return this._afterOpened;
307 }
308 /**
309 * Gets an observable that is notified when the dialog is finished closing.
310 */
311 afterClosed() {
312 return this._ref.closed;
313 }
314 /**
315 * Gets an observable that is notified when the dialog has started closing.
316 */
317 beforeClosed() {
318 return this._beforeClosed;
319 }
320 /**
321 * Gets an observable that emits when the overlay's backdrop has been clicked.
322 */
323 backdropClick() {
324 return this._ref.backdropClick;
325 }
326 /**
327 * Gets an observable that emits when keydown events are targeted on the overlay.
328 */
329 keydownEvents() {
330 return this._ref.keydownEvents;
331 }
332 /**
333 * Updates the dialog's position.
334 * @param position New dialog position.
335 */
336 updatePosition(position) {
337 let strategy = this._ref.config.positionStrategy;
338 if (position && (position.left || position.right)) {
339 position.left ? strategy.left(position.left) : strategy.right(position.right);
340 }
341 else {
342 strategy.centerHorizontally();
343 }
344 if (position && (position.top || position.bottom)) {
345 position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
346 }
347 else {
348 strategy.centerVertically();
349 }
350 this._ref.updatePosition();
351 return this;
352 }
353 /**
354 * Updates the dialog's width and height.
355 * @param width New width of the dialog.
356 * @param height New height of the dialog.
357 */
358 updateSize(width = '', height = '') {
359 this._ref.updateSize(width, height);
360 return this;
361 }
362 /** Add a CSS class or an array of classes to the overlay pane. */
363 addPanelClass(classes) {
364 this._ref.addPanelClass(classes);
365 return this;
366 }
367 /** Remove a CSS class or an array of classes from the overlay pane. */
368 removePanelClass(classes) {
369 this._ref.removePanelClass(classes);
370 return this;
371 }
372 /** Gets the current state of the dialog's lifecycle. */
373 getState() {
374 return this._state;
375 }
376 /**
377 * Finishes the dialog close by updating the state of the dialog
378 * and disposing the overlay.
379 */
380 _finishDialogClose() {
381 this._state = 2 /* MatDialogState.CLOSED */;
382 this._ref.close(this._result, { focusOrigin: this._closeInteractionType });
383 this.componentInstance = null;
384 }
385}
386/**
387 * Closes the dialog with the specified interaction type. This is currently not part of
388 * `MatDialogRef` as that would conflict with custom dialog ref mocks provided in tests.
389 * More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.
390 */
391// TODO: Move this back into `MatDialogRef` when we provide an official mock dialog ref.
392function _closeDialogVia(ref, interactionType, result) {
393 ref._closeInteractionType = interactionType;
394 return ref.close(result);
395}
396
397/**
398 * @license
399 * Copyright Google LLC All Rights Reserved.
400 *
401 * Use of this source code is governed by an MIT-style license that can be
402 * found in the LICENSE file at https://angular.io/license
403 */
404/** Injection token that can be used to access the data that was passed in to a dialog. */
405const MAT_DIALOG_DATA = new InjectionToken('MatDialogData');
406/** Injection token that can be used to specify default dialog options. */
407const MAT_DIALOG_DEFAULT_OPTIONS = new InjectionToken('mat-dialog-default-options');
408/** Injection token that determines the scroll handling while the dialog is open. */
409const MAT_DIALOG_SCROLL_STRATEGY = new InjectionToken('mat-dialog-scroll-strategy');
410/** @docs-private */
411function MAT_DIALOG_SCROLL_STRATEGY_FACTORY(overlay) {
412 return () => overlay.scrollStrategies.block();
413}
414/** @docs-private */
415function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
416 return () => overlay.scrollStrategies.block();
417}
418/** @docs-private */
419const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {
420 provide: MAT_DIALOG_SCROLL_STRATEGY,
421 deps: [Overlay],
422 useFactory: MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY,
423};
424// Counter for unique dialog ids.
425let uniqueId = 0;
426/**
427 * Base class for dialog services. The base dialog service allows
428 * for arbitrary dialog refs and dialog container components.
429 */
430class _MatDialogBase {
431 constructor(_overlay, injector, _defaultOptions, _parentDialog,
432 /**
433 * @deprecated No longer used. To be removed.
434 * @breaking-change 15.0.0
435 */
436 _overlayContainer, scrollStrategy, _dialogRefConstructor, _dialogContainerType, _dialogDataToken,
437 /**
438 * @deprecated No longer used. To be removed.
439 * @breaking-change 14.0.0
440 */
441 _animationMode) {
442 this._overlay = _overlay;
443 this._defaultOptions = _defaultOptions;
444 this._parentDialog = _parentDialog;
445 this._dialogRefConstructor = _dialogRefConstructor;
446 this._dialogContainerType = _dialogContainerType;
447 this._dialogDataToken = _dialogDataToken;
448 this._openDialogsAtThisLevel = [];
449 this._afterAllClosedAtThisLevel = new Subject();
450 this._afterOpenedAtThisLevel = new Subject();
451 this._idPrefix = 'mat-dialog-';
452 /**
453 * Stream that emits when all open dialog have finished closing.
454 * Will emit on subscribe if there are no open dialogs to begin with.
455 */
456 this.afterAllClosed = defer(() => this.openDialogs.length
457 ? this._getAfterAllClosed()
458 : this._getAfterAllClosed().pipe(startWith(undefined)));
459 this._scrollStrategy = scrollStrategy;
460 this._dialog = injector.get(Dialog);
461 }
462 /** Keeps track of the currently-open dialogs. */
463 get openDialogs() {
464 return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
465 }
466 /** Stream that emits when a dialog has been opened. */
467 get afterOpened() {
468 return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;
469 }
470 _getAfterAllClosed() {
471 const parent = this._parentDialog;
472 return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
473 }
474 open(componentOrTemplateRef, config) {
475 let dialogRef;
476 config = Object.assign(Object.assign({}, (this._defaultOptions || new MatDialogConfig())), config);
477 config.id = config.id || `${this._idPrefix}${uniqueId++}`;
478 config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();
479 const cdkRef = this._dialog.open(componentOrTemplateRef, Object.assign(Object.assign({}, config), { positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
480 // Disable closing since we need to sync it up to the animation ourselves.
481 disableClose: true,
482 // Disable closing on destroy, because this service cleans up its open dialogs as well.
483 // We want to do the cleanup here, rather than the CDK service, because the CDK destroys
484 // the dialogs immediately whereas we want it to wait for the animations to finish.
485 closeOnDestroy: false, container: {
486 type: this._dialogContainerType,
487 providers: () => [
488 // Provide our config as the CDK config as well since it has the same interface as the
489 // CDK one, but it contains the actual values passed in by the user for things like
490 // `disableClose` which we disable for the CDK dialog since we handle it ourselves.
491 { provide: MatDialogConfig, useValue: config },
492 { provide: DialogConfig, useValue: config },
493 ],
494 }, templateContext: () => ({ dialogRef }), providers: (ref, cdkConfig, dialogContainer) => {
495 dialogRef = new this._dialogRefConstructor(ref, config, dialogContainer);
496 dialogRef.updatePosition(config === null || config === void 0 ? void 0 : config.position);
497 return [
498 { provide: this._dialogContainerType, useValue: dialogContainer },
499 { provide: this._dialogDataToken, useValue: cdkConfig.data },
500 { provide: this._dialogRefConstructor, useValue: dialogRef },
501 ];
502 } }));
503 // This can't be assigned in the `providers` callback, because
504 // the instance hasn't been assigned to the CDK ref yet.
505 dialogRef.componentInstance = cdkRef.componentInstance;
506 this.openDialogs.push(dialogRef);
507 this.afterOpened.next(dialogRef);
508 dialogRef.afterClosed().subscribe(() => {
509 const index = this.openDialogs.indexOf(dialogRef);
510 if (index > -1) {
511 this.openDialogs.splice(index, 1);
512 if (!this.openDialogs.length) {
513 this._getAfterAllClosed().next();
514 }
515 }
516 });
517 return dialogRef;
518 }
519 /**
520 * Closes all of the currently-open dialogs.
521 */
522 closeAll() {
523 this._closeDialogs(this.openDialogs);
524 }
525 /**
526 * Finds an open dialog by its id.
527 * @param id ID to use when looking up the dialog.
528 */
529 getDialogById(id) {
530 return this.openDialogs.find(dialog => dialog.id === id);
531 }
532 ngOnDestroy() {
533 // Only close the dialogs at this level on destroy
534 // since the parent service may still be active.
535 this._closeDialogs(this._openDialogsAtThisLevel);
536 this._afterAllClosedAtThisLevel.complete();
537 this._afterOpenedAtThisLevel.complete();
538 }
539 _closeDialogs(dialogs) {
540 let i = dialogs.length;
541 while (i--) {
542 dialogs[i].close();
543 }
544 }
545}
546_MatDialogBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: _MatDialogBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
547_MatDialogBase.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: _MatDialogBase });
548i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: _MatDialogBase, decorators: [{
549 type: Injectable
550 }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: i1$1.OverlayContainer }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }, { type: undefined }]; } });
551/**
552 * Service to open Material Design modal dialogs.
553 */
554class MatDialog extends _MatDialogBase {
555 constructor(overlay, injector,
556 /**
557 * @deprecated `_location` parameter to be removed.
558 * @breaking-change 10.0.0
559 */
560 _location, defaultOptions, scrollStrategy, parentDialog,
561 /**
562 * @deprecated No longer used. To be removed.
563 * @breaking-change 15.0.0
564 */
565 overlayContainer,
566 /**
567 * @deprecated No longer used. To be removed.
568 * @breaking-change 14.0.0
569 */
570 animationMode) {
571 super(overlay, injector, defaultOptions, parentDialog, overlayContainer, scrollStrategy, MatDialogRef, MatDialogContainer, MAT_DIALOG_DATA, animationMode);
572 }
573}
574MatDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialog, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i2.Location, optional: true }, { token: MAT_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: MAT_DIALOG_SCROLL_STRATEGY }, { token: MatDialog, optional: true, skipSelf: true }, { token: i1$1.OverlayContainer }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
575MatDialog.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialog });
576i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialog, decorators: [{
577 type: Injectable
578 }], ctorParameters: function () {
579 return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: i2.Location, decorators: [{
580 type: Optional
581 }] }, { type: MatDialogConfig, decorators: [{
582 type: Optional
583 }, {
584 type: Inject,
585 args: [MAT_DIALOG_DEFAULT_OPTIONS]
586 }] }, { type: undefined, decorators: [{
587 type: Inject,
588 args: [MAT_DIALOG_SCROLL_STRATEGY]
589 }] }, { type: MatDialog, decorators: [{
590 type: Optional
591 }, {
592 type: SkipSelf
593 }] }, { type: i1$1.OverlayContainer }, { type: undefined, decorators: [{
594 type: Optional
595 }, {
596 type: Inject,
597 args: [ANIMATION_MODULE_TYPE]
598 }] }];
599 } });
600
601/**
602 * @license
603 * Copyright Google LLC All Rights Reserved.
604 *
605 * Use of this source code is governed by an MIT-style license that can be
606 * found in the LICENSE file at https://angular.io/license
607 */
608/** Counter used to generate unique IDs for dialog elements. */
609let dialogElementUid = 0;
610/**
611 * Button that will close the current dialog.
612 */
613class MatDialogClose {
614 constructor(
615 /**
616 * Reference to the containing dialog.
617 * @deprecated `dialogRef` property to become private.
618 * @breaking-change 13.0.0
619 */
620 // The dialog title directive is always used in combination with a `MatDialogRef`.
621 // tslint:disable-next-line: lightweight-tokens
622 dialogRef, _elementRef, _dialog) {
623 this.dialogRef = dialogRef;
624 this._elementRef = _elementRef;
625 this._dialog = _dialog;
626 /** Default to "button" to prevents accidental form submits. */
627 this.type = 'button';
628 }
629 ngOnInit() {
630 if (!this.dialogRef) {
631 // When this directive is included in a dialog via TemplateRef (rather than being
632 // in a Component), the DialogRef isn't available via injection because embedded
633 // views cannot be given a custom injector. Instead, we look up the DialogRef by
634 // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
635 // be resolved at constructor time.
636 this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);
637 }
638 }
639 ngOnChanges(changes) {
640 const proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];
641 if (proxiedChange) {
642 this.dialogResult = proxiedChange.currentValue;
643 }
644 }
645 _onButtonClick(event) {
646 // Determinate the focus origin using the click event, because using the FocusMonitor will
647 // result in incorrect origins. Most of the time, close buttons will be auto focused in the
648 // dialog, and therefore clicking the button won't result in a focus change. This means that
649 // the FocusMonitor won't detect any origin change, and will always output `program`.
650 _closeDialogVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
651 }
652}
653MatDialogClose.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogClose, deps: [{ token: MatDialogRef, optional: true }, { token: i0.ElementRef }, { token: MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
654MatDialogClose.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["mat-dialog-close", "dialogResult"], _matDialogClose: ["matDialogClose", "_matDialogClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["matDialogClose"], usesOnChanges: true, ngImport: i0 });
655i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogClose, decorators: [{
656 type: Directive,
657 args: [{
658 selector: '[mat-dialog-close], [matDialogClose]',
659 exportAs: 'matDialogClose',
660 host: {
661 '(click)': '_onButtonClick($event)',
662 '[attr.aria-label]': 'ariaLabel || null',
663 '[attr.type]': 'type',
664 },
665 }]
666 }], ctorParameters: function () {
667 return [{ type: MatDialogRef, decorators: [{
668 type: Optional
669 }] }, { type: i0.ElementRef }, { type: MatDialog }];
670 }, propDecorators: { ariaLabel: [{
671 type: Input,
672 args: ['aria-label']
673 }], type: [{
674 type: Input
675 }], dialogResult: [{
676 type: Input,
677 args: ['mat-dialog-close']
678 }], _matDialogClose: [{
679 type: Input,
680 args: ['matDialogClose']
681 }] } });
682/**
683 * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
684 */
685class MatDialogTitle {
686 constructor(
687 // The dialog title directive is always used in combination with a `MatDialogRef`.
688 // tslint:disable-next-line: lightweight-tokens
689 _dialogRef, _elementRef, _dialog) {
690 this._dialogRef = _dialogRef;
691 this._elementRef = _elementRef;
692 this._dialog = _dialog;
693 /** Unique id for the dialog title. If none is supplied, it will be auto-generated. */
694 this.id = `mat-dialog-title-${dialogElementUid++}`;
695 }
696 ngOnInit() {
697 if (!this._dialogRef) {
698 this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);
699 }
700 if (this._dialogRef) {
701 Promise.resolve().then(() => {
702 const container = this._dialogRef._containerInstance;
703 if (container && !container._ariaLabelledBy) {
704 container._ariaLabelledBy = this.id;
705 }
706 });
707 }
708 }
709}
710MatDialogTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogTitle, deps: [{ token: MatDialogRef, optional: true }, { token: i0.ElementRef }, { token: MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
711MatDialogTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: { id: "id" }, host: { properties: { "id": "id" }, classAttribute: "mat-dialog-title" }, exportAs: ["matDialogTitle"], ngImport: i0 });
712i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogTitle, decorators: [{
713 type: Directive,
714 args: [{
715 selector: '[mat-dialog-title], [matDialogTitle]',
716 exportAs: 'matDialogTitle',
717 host: {
718 'class': 'mat-dialog-title',
719 '[id]': 'id',
720 },
721 }]
722 }], ctorParameters: function () {
723 return [{ type: MatDialogRef, decorators: [{
724 type: Optional
725 }] }, { type: i0.ElementRef }, { type: MatDialog }];
726 }, propDecorators: { id: [{
727 type: Input
728 }] } });
729/**
730 * Scrollable content container of a dialog.
731 */
732class MatDialogContent {
733}
734MatDialogContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
735MatDialogContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]", host: { classAttribute: "mat-dialog-content" }, ngImport: i0 });
736i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogContent, decorators: [{
737 type: Directive,
738 args: [{
739 selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
740 host: { 'class': 'mat-dialog-content' },
741 }]
742 }] });
743/**
744 * Container for the bottom action buttons in a dialog.
745 * Stays fixed to the bottom when scrolling.
746 */
747class MatDialogActions {
748 constructor() {
749 /**
750 * Horizontal alignment of action buttons.
751 */
752 this.align = 'start';
753 }
754}
755MatDialogActions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
756MatDialogActions.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: { align: "align" }, host: { properties: { "class.mat-dialog-actions-align-center": "align === \"center\"", "class.mat-dialog-actions-align-end": "align === \"end\"" }, classAttribute: "mat-dialog-actions" }, ngImport: i0 });
757i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogActions, decorators: [{
758 type: Directive,
759 args: [{
760 selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
761 host: {
762 'class': 'mat-dialog-actions',
763 '[class.mat-dialog-actions-align-center]': 'align === "center"',
764 '[class.mat-dialog-actions-align-end]': 'align === "end"',
765 },
766 }]
767 }], propDecorators: { align: [{
768 type: Input
769 }] } });
770// TODO(crisbeto): this utility shouldn't be necessary anymore, because the dialog ref is provided
771// both to component and template dialogs through DI. We need to keep it around, because there are
772// some internal wrappers around `MatDialog` that happened to work by accident, because we had this
773// fallback logic in place.
774/**
775 * Finds the closest MatDialogRef to an element by looking at the DOM.
776 * @param element Element relative to which to look for a dialog.
777 * @param openDialogs References to the currently-open dialogs.
778 */
779function getClosestDialog(element, openDialogs) {
780 let parent = element.nativeElement.parentElement;
781 while (parent && !parent.classList.contains('mat-dialog-container')) {
782 parent = parent.parentElement;
783 }
784 return parent ? openDialogs.find(dialog => dialog.id === parent.id) : null;
785}
786
787/**
788 * @license
789 * Copyright Google LLC All Rights Reserved.
790 *
791 * Use of this source code is governed by an MIT-style license that can be
792 * found in the LICENSE file at https://angular.io/license
793 */
794class MatDialogModule {
795}
796MatDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
797MatDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: MatDialogModule, declarations: [MatDialogContainer,
798 MatDialogClose,
799 MatDialogTitle,
800 MatDialogActions,
801 MatDialogContent], imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule], exports: [MatDialogContainer,
802 MatDialogClose,
803 MatDialogTitle,
804 MatDialogContent,
805 MatDialogActions,
806 MatCommonModule] });
807MatDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogModule, providers: [MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER], imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, MatCommonModule] });
808i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDialogModule, decorators: [{
809 type: NgModule,
810 args: [{
811 imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule],
812 exports: [
813 MatDialogContainer,
814 MatDialogClose,
815 MatDialogTitle,
816 MatDialogContent,
817 MatDialogActions,
818 MatCommonModule,
819 ],
820 declarations: [
821 MatDialogContainer,
822 MatDialogClose,
823 MatDialogTitle,
824 MatDialogActions,
825 MatDialogContent,
826 ],
827 providers: [MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER],
828 }]
829 }] });
830
831/**
832 * @license
833 * Copyright Google LLC All Rights Reserved.
834 *
835 * Use of this source code is governed by an MIT-style license that can be
836 * found in the LICENSE file at https://angular.io/license
837 */
838
839/**
840 * @license
841 * Copyright Google LLC All Rights Reserved.
842 *
843 * Use of this source code is governed by an MIT-style license that can be
844 * found in the LICENSE file at https://angular.io/license
845 */
846
847/**
848 * Generated bundle index. Do not edit.
849 */
850
851export { MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS, MAT_DIALOG_SCROLL_STRATEGY, MAT_DIALOG_SCROLL_STRATEGY_FACTORY, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, MatDialog, MatDialogActions, MatDialogClose, MatDialogConfig, MatDialogContainer, MatDialogContent, MatDialogModule, MatDialogRef, MatDialogTitle, _MatDialogBase, _MatDialogContainerBase, _closeDialogVia, matDialogAnimations };
852//# sourceMappingURL=dialog.mjs.map