dialog.es5.js 58 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { animate, state, style, transition, trigger } from '@angular/animations';
  9. import { __assign, __extends } from 'tslib';
  10. import { Component, ElementRef, EventEmitter, Inject, Optional, ChangeDetectorRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Injectable, InjectionToken, Injector, SkipSelf, TemplateRef, Directive, Input, NgModule } from '@angular/core';
  11. import { DOCUMENT, Location, CommonModule } from '@angular/common';
  12. import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalInjector, TemplatePortal, PortalModule } from '@angular/cdk/portal';
  13. import { FocusTrapFactory } from '@angular/cdk/a11y';
  14. import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
  15. import { Subject, defer, of } from 'rxjs';
  16. import { filter, take, startWith } from 'rxjs/operators';
  17. import { Directionality } from '@angular/cdk/bidi';
  18. import { Overlay, OverlayConfig, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
  19. import { MatCommonModule } from '@angular/material/core';
  20. /**
  21. * @fileoverview added by tsickle
  22. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  23. */
  24. /**
  25. * Configuration for opening a modal dialog with the MatDialog service.
  26. * @template D
  27. */
  28. var /**
  29. * Configuration for opening a modal dialog with the MatDialog service.
  30. * @template D
  31. */
  32. MatDialogConfig = /** @class */ (function () {
  33. function MatDialogConfig() {
  34. /**
  35. * The ARIA role of the dialog element.
  36. */
  37. this.role = 'dialog';
  38. /**
  39. * Custom class for the overlay pane.
  40. */
  41. this.panelClass = '';
  42. /**
  43. * Whether the dialog has a backdrop.
  44. */
  45. this.hasBackdrop = true;
  46. /**
  47. * Custom class for the backdrop,
  48. */
  49. this.backdropClass = '';
  50. /**
  51. * Whether the user can use escape or clicking on the backdrop to close the modal.
  52. */
  53. this.disableClose = false;
  54. /**
  55. * Width of the dialog.
  56. */
  57. this.width = '';
  58. /**
  59. * Height of the dialog.
  60. */
  61. this.height = '';
  62. /**
  63. * Max-width of the dialog. If a number is provided, pixel units are assumed. Defaults to 80vw
  64. */
  65. this.maxWidth = '80vw';
  66. /**
  67. * Data being injected into the child component.
  68. */
  69. this.data = null;
  70. /**
  71. * ID of the element that describes the dialog.
  72. */
  73. this.ariaDescribedBy = null;
  74. /**
  75. * ID of the element that labels the dialog.
  76. */
  77. this.ariaLabelledBy = null;
  78. /**
  79. * Aria label to assign to the dialog element
  80. */
  81. this.ariaLabel = null;
  82. /**
  83. * Whether the dialog should focus the first focusable element on open.
  84. */
  85. this.autoFocus = true;
  86. /**
  87. * Whether the dialog should restore focus to the
  88. * previously-focused element, after it's closed.
  89. */
  90. this.restoreFocus = true;
  91. /**
  92. * Whether the dialog should close when the user goes backwards/forwards in history.
  93. * Note that this usually doesn't include clicking on links (unless the user is using
  94. * the `HashLocationStrategy`).
  95. */
  96. this.closeOnNavigation = true;
  97. // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
  98. }
  99. return MatDialogConfig;
  100. }());
  101. /**
  102. * @fileoverview added by tsickle
  103. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  104. */
  105. /** @type {?} */
  106. var animationBody = [
  107. // Note: The `enter` animation transitions to `transform: none`, because for some reason
  108. // specifying the transform explicitly, causes IE both to blur the dialog content and
  109. // decimate the animation performance. Leaving it as `none` solves both issues.
  110. state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),
  111. state('enter', style({ transform: 'none' })),
  112. transition('* => enter', animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 }))),
  113. transition('* => void, * => exit', animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 }))),
  114. ];
  115. /**
  116. * Animations used by MatDialog.
  117. * \@docs-private
  118. * @type {?}
  119. */
  120. var matDialogAnimations = {
  121. /**
  122. * Animation that is applied on the dialog container by defalt.
  123. */
  124. dialogContainer: trigger('dialogContainer', animationBody),
  125. /**
  126. * @deprecated \@breaking-change 8.0.0 Use `matDialogAnimations.dialogContainer` instead.
  127. */
  128. slideDialog: trigger('slideDialog', animationBody)
  129. };
  130. /**
  131. * @fileoverview added by tsickle
  132. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  133. */
  134. /**
  135. * Throws an exception for the case when a ComponentPortal is
  136. * attached to a DomPortalOutlet without an origin.
  137. * \@docs-private
  138. * @return {?}
  139. */
  140. function throwMatDialogContentAlreadyAttachedError() {
  141. throw Error('Attempting to attach dialog content after content is already attached');
  142. }
  143. /**
  144. * Internal component that wraps user-provided dialog content.
  145. * Animation is based on https://material.io/guidelines/motion/choreography.html.
  146. * \@docs-private
  147. */
  148. var MatDialogContainer = /** @class */ (function (_super) {
  149. __extends(MatDialogContainer, _super);
  150. function MatDialogContainer(_elementRef, _focusTrapFactory, _changeDetectorRef, _document, _config) {
  151. var _this = _super.call(this) || this;
  152. _this._elementRef = _elementRef;
  153. _this._focusTrapFactory = _focusTrapFactory;
  154. _this._changeDetectorRef = _changeDetectorRef;
  155. _this._document = _document;
  156. _this._config = _config;
  157. /**
  158. * Element that was focused before the dialog was opened. Save this to restore upon close.
  159. */
  160. _this._elementFocusedBeforeDialogWasOpened = null;
  161. /**
  162. * State of the dialog animation.
  163. */
  164. _this._state = 'enter';
  165. /**
  166. * Emits when an animation state changes.
  167. */
  168. _this._animationStateChanged = new EventEmitter();
  169. _this._ariaLabelledBy = _config.ariaLabelledBy || null;
  170. return _this;
  171. }
  172. /**
  173. * Attach a ComponentPortal as content to this dialog container.
  174. * @param portal Portal to be attached as the dialog content.
  175. */
  176. /**
  177. * Attach a ComponentPortal as content to this dialog container.
  178. * @template T
  179. * @param {?} portal Portal to be attached as the dialog content.
  180. * @return {?}
  181. */
  182. MatDialogContainer.prototype.attachComponentPortal = /**
  183. * Attach a ComponentPortal as content to this dialog container.
  184. * @template T
  185. * @param {?} portal Portal to be attached as the dialog content.
  186. * @return {?}
  187. */
  188. function (portal) {
  189. if (this._portalOutlet.hasAttached()) {
  190. throwMatDialogContentAlreadyAttachedError();
  191. }
  192. this._savePreviouslyFocusedElement();
  193. return this._portalOutlet.attachComponentPortal(portal);
  194. };
  195. /**
  196. * Attach a TemplatePortal as content to this dialog container.
  197. * @param portal Portal to be attached as the dialog content.
  198. */
  199. /**
  200. * Attach a TemplatePortal as content to this dialog container.
  201. * @template C
  202. * @param {?} portal Portal to be attached as the dialog content.
  203. * @return {?}
  204. */
  205. MatDialogContainer.prototype.attachTemplatePortal = /**
  206. * Attach a TemplatePortal as content to this dialog container.
  207. * @template C
  208. * @param {?} portal Portal to be attached as the dialog content.
  209. * @return {?}
  210. */
  211. function (portal) {
  212. if (this._portalOutlet.hasAttached()) {
  213. throwMatDialogContentAlreadyAttachedError();
  214. }
  215. this._savePreviouslyFocusedElement();
  216. return this._portalOutlet.attachTemplatePortal(portal);
  217. };
  218. /** Moves the focus inside the focus trap. */
  219. /**
  220. * Moves the focus inside the focus trap.
  221. * @private
  222. * @return {?}
  223. */
  224. MatDialogContainer.prototype._trapFocus = /**
  225. * Moves the focus inside the focus trap.
  226. * @private
  227. * @return {?}
  228. */
  229. function () {
  230. /** @type {?} */
  231. var element = this._elementRef.nativeElement;
  232. if (!this._focusTrap) {
  233. this._focusTrap = this._focusTrapFactory.create(element);
  234. }
  235. // If we were to attempt to focus immediately, then the content of the dialog would not yet be
  236. // ready in instances where change detection has to run first. To deal with this, we simply
  237. // wait for the microtask queue to be empty.
  238. if (this._config.autoFocus) {
  239. this._focusTrap.focusInitialElementWhenReady();
  240. }
  241. else {
  242. /** @type {?} */
  243. var activeElement = this._document.activeElement;
  244. // Otherwise ensure that focus is on the dialog container. It's possible that a different
  245. // component tried to move focus while the open animation was running. See:
  246. // https://github.com/angular/components/issues/16215. Note that we only want to do this
  247. // if the focus isn't inside the dialog already, because it's possible that the consumer
  248. // turned off `autoFocus` in order to move focus themselves.
  249. if (activeElement !== element && !element.contains(activeElement)) {
  250. element.focus();
  251. }
  252. }
  253. };
  254. /** Restores focus to the element that was focused before the dialog opened. */
  255. /**
  256. * Restores focus to the element that was focused before the dialog opened.
  257. * @private
  258. * @return {?}
  259. */
  260. MatDialogContainer.prototype._restoreFocus = /**
  261. * Restores focus to the element that was focused before the dialog opened.
  262. * @private
  263. * @return {?}
  264. */
  265. function () {
  266. /** @type {?} */
  267. var toFocus = this._elementFocusedBeforeDialogWasOpened;
  268. // We need the extra check, because IE can set the `activeElement` to null in some cases.
  269. if (this._config.restoreFocus && toFocus && typeof toFocus.focus === 'function') {
  270. toFocus.focus();
  271. }
  272. if (this._focusTrap) {
  273. this._focusTrap.destroy();
  274. }
  275. };
  276. /** Saves a reference to the element that was focused before the dialog was opened. */
  277. /**
  278. * Saves a reference to the element that was focused before the dialog was opened.
  279. * @private
  280. * @return {?}
  281. */
  282. MatDialogContainer.prototype._savePreviouslyFocusedElement = /**
  283. * Saves a reference to the element that was focused before the dialog was opened.
  284. * @private
  285. * @return {?}
  286. */
  287. function () {
  288. var _this = this;
  289. if (this._document) {
  290. this._elementFocusedBeforeDialogWasOpened = (/** @type {?} */ (this._document.activeElement));
  291. // Note that there is no focus method when rendering on the server.
  292. if (this._elementRef.nativeElement.focus) {
  293. // Move focus onto the dialog immediately in order to prevent the user from accidentally
  294. // opening multiple dialogs at the same time. Needs to be async, because the element
  295. // may not be focusable immediately.
  296. Promise.resolve().then((/**
  297. * @return {?}
  298. */
  299. function () { return _this._elementRef.nativeElement.focus(); }));
  300. }
  301. }
  302. };
  303. /** Callback, invoked whenever an animation on the host completes. */
  304. /**
  305. * Callback, invoked whenever an animation on the host completes.
  306. * @param {?} event
  307. * @return {?}
  308. */
  309. MatDialogContainer.prototype._onAnimationDone = /**
  310. * Callback, invoked whenever an animation on the host completes.
  311. * @param {?} event
  312. * @return {?}
  313. */
  314. function (event) {
  315. if (event.toState === 'enter') {
  316. this._trapFocus();
  317. }
  318. else if (event.toState === 'exit') {
  319. this._restoreFocus();
  320. }
  321. this._animationStateChanged.emit(event);
  322. };
  323. /** Callback, invoked when an animation on the host starts. */
  324. /**
  325. * Callback, invoked when an animation on the host starts.
  326. * @param {?} event
  327. * @return {?}
  328. */
  329. MatDialogContainer.prototype._onAnimationStart = /**
  330. * Callback, invoked when an animation on the host starts.
  331. * @param {?} event
  332. * @return {?}
  333. */
  334. function (event) {
  335. this._animationStateChanged.emit(event);
  336. };
  337. /** Starts the dialog exit animation. */
  338. /**
  339. * Starts the dialog exit animation.
  340. * @return {?}
  341. */
  342. MatDialogContainer.prototype._startExitAnimation = /**
  343. * Starts the dialog exit animation.
  344. * @return {?}
  345. */
  346. function () {
  347. this._state = 'exit';
  348. // Mark the container for check so it can react if the
  349. // view container is using OnPush change detection.
  350. this._changeDetectorRef.markForCheck();
  351. };
  352. MatDialogContainer.decorators = [
  353. { type: Component, args: [{selector: 'mat-dialog-container',
  354. template: "<ng-template cdkPortalOutlet></ng-template>",
  355. 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}@media (-ms-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;margin-bottom:-24px}.mat-dialog-actions[align=end]{justify-content:flex-end}.mat-dialog-actions[align=center]{justify-content:center}.mat-dialog-actions .mat-button-base+.mat-button-base{margin-left:8px}[dir=rtl] .mat-dialog-actions .mat-button-base+.mat-button-base{margin-left:0;margin-right:8px}"],
  356. encapsulation: ViewEncapsulation.None,
  357. // Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
  358. // tslint:disable-next-line:validate-decorators
  359. changeDetection: ChangeDetectionStrategy.Default,
  360. animations: [matDialogAnimations.dialogContainer],
  361. host: {
  362. 'class': 'mat-dialog-container',
  363. 'tabindex': '-1',
  364. 'aria-modal': 'true',
  365. '[attr.id]': '_id',
  366. '[attr.role]': '_config.role',
  367. '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
  368. '[attr.aria-label]': '_config.ariaLabel',
  369. '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
  370. '[@dialogContainer]': '_state',
  371. '(@dialogContainer.start)': '_onAnimationStart($event)',
  372. '(@dialogContainer.done)': '_onAnimationDone($event)',
  373. },
  374. },] },
  375. ];
  376. /** @nocollapse */
  377. MatDialogContainer.ctorParameters = function () { return [
  378. { type: ElementRef },
  379. { type: FocusTrapFactory },
  380. { type: ChangeDetectorRef },
  381. { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
  382. { type: MatDialogConfig }
  383. ]; };
  384. MatDialogContainer.propDecorators = {
  385. _portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }]
  386. };
  387. return MatDialogContainer;
  388. }(BasePortalOutlet));
  389. /**
  390. * @fileoverview added by tsickle
  391. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  392. */
  393. // TODO(jelbourn): resizing
  394. // Counter for unique dialog ids.
  395. /** @type {?} */
  396. var uniqueId = 0;
  397. /**
  398. * Reference to a dialog opened via the MatDialog service.
  399. * @template T, R
  400. */
  401. var /**
  402. * Reference to a dialog opened via the MatDialog service.
  403. * @template T, R
  404. */
  405. MatDialogRef = /** @class */ (function () {
  406. function MatDialogRef(_overlayRef, _containerInstance,
  407. // @breaking-change 8.0.0 `_location` parameter to be removed.
  408. _location, id) {
  409. var _this = this;
  410. if (id === void 0) { id = "mat-dialog-" + uniqueId++; }
  411. this._overlayRef = _overlayRef;
  412. this._containerInstance = _containerInstance;
  413. this.id = id;
  414. /**
  415. * Whether the user is allowed to close the dialog.
  416. */
  417. this.disableClose = this._containerInstance._config.disableClose;
  418. /**
  419. * Subject for notifying the user that the dialog has finished opening.
  420. */
  421. this._afterOpened = new Subject();
  422. /**
  423. * Subject for notifying the user that the dialog has finished closing.
  424. */
  425. this._afterClosed = new Subject();
  426. /**
  427. * Subject for notifying the user that the dialog has started closing.
  428. */
  429. this._beforeClosed = new Subject();
  430. // Pass the id along to the container.
  431. _containerInstance._id = id;
  432. // Emit when opening animation completes
  433. _containerInstance._animationStateChanged.pipe(filter((/**
  434. * @param {?} event
  435. * @return {?}
  436. */
  437. function (event) { return event.phaseName === 'done' && event.toState === 'enter'; })), take(1))
  438. .subscribe((/**
  439. * @return {?}
  440. */
  441. function () {
  442. _this._afterOpened.next();
  443. _this._afterOpened.complete();
  444. }));
  445. // Dispose overlay when closing animation is complete
  446. _containerInstance._animationStateChanged.pipe(filter((/**
  447. * @param {?} event
  448. * @return {?}
  449. */
  450. function (event) { return event.phaseName === 'done' && event.toState === 'exit'; })), take(1)).subscribe((/**
  451. * @return {?}
  452. */
  453. function () {
  454. clearTimeout(_this._closeFallbackTimeout);
  455. _this._overlayRef.dispose();
  456. }));
  457. _overlayRef.detachments().subscribe((/**
  458. * @return {?}
  459. */
  460. function () {
  461. _this._beforeClosed.next(_this._result);
  462. _this._beforeClosed.complete();
  463. _this._afterClosed.next(_this._result);
  464. _this._afterClosed.complete();
  465. _this.componentInstance = (/** @type {?} */ (null));
  466. _this._overlayRef.dispose();
  467. }));
  468. _overlayRef.keydownEvents()
  469. .pipe(filter((/**
  470. * @param {?} event
  471. * @return {?}
  472. */
  473. function (event) {
  474. return event.keyCode === ESCAPE && !_this.disableClose && !hasModifierKey(event);
  475. })))
  476. .subscribe((/**
  477. * @param {?} event
  478. * @return {?}
  479. */
  480. function (event) {
  481. event.preventDefault();
  482. _this.close();
  483. }));
  484. }
  485. /**
  486. * Close the dialog.
  487. * @param dialogResult Optional result to return to the dialog opener.
  488. */
  489. /**
  490. * Close the dialog.
  491. * @param {?=} dialogResult Optional result to return to the dialog opener.
  492. * @return {?}
  493. */
  494. MatDialogRef.prototype.close = /**
  495. * Close the dialog.
  496. * @param {?=} dialogResult Optional result to return to the dialog opener.
  497. * @return {?}
  498. */
  499. function (dialogResult) {
  500. var _this = this;
  501. this._result = dialogResult;
  502. // Transition the backdrop in parallel to the dialog.
  503. this._containerInstance._animationStateChanged.pipe(filter((/**
  504. * @param {?} event
  505. * @return {?}
  506. */
  507. function (event) { return event.phaseName === 'start'; })), take(1))
  508. .subscribe((/**
  509. * @param {?} event
  510. * @return {?}
  511. */
  512. function (event) {
  513. _this._beforeClosed.next(dialogResult);
  514. _this._beforeClosed.complete();
  515. _this._overlayRef.detachBackdrop();
  516. // The logic that disposes of the overlay depends on the exit animation completing, however
  517. // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
  518. // timeout which will clean everything up if the animation hasn't fired within the specified
  519. // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
  520. // vast majority of cases the timeout will have been cleared before it has the chance to fire.
  521. _this._closeFallbackTimeout = setTimeout((/**
  522. * @return {?}
  523. */
  524. function () {
  525. _this._overlayRef.dispose();
  526. }), event.totalTime + 100);
  527. }));
  528. this._containerInstance._startExitAnimation();
  529. };
  530. /**
  531. * Gets an observable that is notified when the dialog is finished opening.
  532. */
  533. /**
  534. * Gets an observable that is notified when the dialog is finished opening.
  535. * @return {?}
  536. */
  537. MatDialogRef.prototype.afterOpened = /**
  538. * Gets an observable that is notified when the dialog is finished opening.
  539. * @return {?}
  540. */
  541. function () {
  542. return this._afterOpened.asObservable();
  543. };
  544. /**
  545. * Gets an observable that is notified when the dialog is finished closing.
  546. */
  547. /**
  548. * Gets an observable that is notified when the dialog is finished closing.
  549. * @return {?}
  550. */
  551. MatDialogRef.prototype.afterClosed = /**
  552. * Gets an observable that is notified when the dialog is finished closing.
  553. * @return {?}
  554. */
  555. function () {
  556. return this._afterClosed.asObservable();
  557. };
  558. /**
  559. * Gets an observable that is notified when the dialog has started closing.
  560. */
  561. /**
  562. * Gets an observable that is notified when the dialog has started closing.
  563. * @return {?}
  564. */
  565. MatDialogRef.prototype.beforeClosed = /**
  566. * Gets an observable that is notified when the dialog has started closing.
  567. * @return {?}
  568. */
  569. function () {
  570. return this._beforeClosed.asObservable();
  571. };
  572. /**
  573. * Gets an observable that emits when the overlay's backdrop has been clicked.
  574. */
  575. /**
  576. * Gets an observable that emits when the overlay's backdrop has been clicked.
  577. * @return {?}
  578. */
  579. MatDialogRef.prototype.backdropClick = /**
  580. * Gets an observable that emits when the overlay's backdrop has been clicked.
  581. * @return {?}
  582. */
  583. function () {
  584. return this._overlayRef.backdropClick();
  585. };
  586. /**
  587. * Gets an observable that emits when keydown events are targeted on the overlay.
  588. */
  589. /**
  590. * Gets an observable that emits when keydown events are targeted on the overlay.
  591. * @return {?}
  592. */
  593. MatDialogRef.prototype.keydownEvents = /**
  594. * Gets an observable that emits when keydown events are targeted on the overlay.
  595. * @return {?}
  596. */
  597. function () {
  598. return this._overlayRef.keydownEvents();
  599. };
  600. /**
  601. * Updates the dialog's position.
  602. * @param position New dialog position.
  603. */
  604. /**
  605. * Updates the dialog's position.
  606. * @template THIS
  607. * @this {THIS}
  608. * @param {?=} position New dialog position.
  609. * @return {THIS}
  610. */
  611. MatDialogRef.prototype.updatePosition = /**
  612. * Updates the dialog's position.
  613. * @template THIS
  614. * @this {THIS}
  615. * @param {?=} position New dialog position.
  616. * @return {THIS}
  617. */
  618. function (position) {
  619. /** @type {?} */
  620. var strategy = (/** @type {?} */ (this))._getPositionStrategy();
  621. if (position && (position.left || position.right)) {
  622. position.left ? strategy.left(position.left) : strategy.right(position.right);
  623. }
  624. else {
  625. strategy.centerHorizontally();
  626. }
  627. if (position && (position.top || position.bottom)) {
  628. position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
  629. }
  630. else {
  631. strategy.centerVertically();
  632. }
  633. (/** @type {?} */ (this))._overlayRef.updatePosition();
  634. return (/** @type {?} */ (this));
  635. };
  636. /**
  637. * Updates the dialog's width and height.
  638. * @param width New width of the dialog.
  639. * @param height New height of the dialog.
  640. */
  641. /**
  642. * Updates the dialog's width and height.
  643. * @template THIS
  644. * @this {THIS}
  645. * @param {?=} width New width of the dialog.
  646. * @param {?=} height New height of the dialog.
  647. * @return {THIS}
  648. */
  649. MatDialogRef.prototype.updateSize = /**
  650. * Updates the dialog's width and height.
  651. * @template THIS
  652. * @this {THIS}
  653. * @param {?=} width New width of the dialog.
  654. * @param {?=} height New height of the dialog.
  655. * @return {THIS}
  656. */
  657. function (width, height) {
  658. if (width === void 0) { width = ''; }
  659. if (height === void 0) { height = ''; }
  660. (/** @type {?} */ (this))._getPositionStrategy().width(width).height(height);
  661. (/** @type {?} */ (this))._overlayRef.updatePosition();
  662. return (/** @type {?} */ (this));
  663. };
  664. /** Add a CSS class or an array of classes to the overlay pane. */
  665. /**
  666. * Add a CSS class or an array of classes to the overlay pane.
  667. * @template THIS
  668. * @this {THIS}
  669. * @param {?} classes
  670. * @return {THIS}
  671. */
  672. MatDialogRef.prototype.addPanelClass = /**
  673. * Add a CSS class or an array of classes to the overlay pane.
  674. * @template THIS
  675. * @this {THIS}
  676. * @param {?} classes
  677. * @return {THIS}
  678. */
  679. function (classes) {
  680. (/** @type {?} */ (this))._overlayRef.addPanelClass(classes);
  681. return (/** @type {?} */ (this));
  682. };
  683. /** Remove a CSS class or an array of classes from the overlay pane. */
  684. /**
  685. * Remove a CSS class or an array of classes from the overlay pane.
  686. * @template THIS
  687. * @this {THIS}
  688. * @param {?} classes
  689. * @return {THIS}
  690. */
  691. MatDialogRef.prototype.removePanelClass = /**
  692. * Remove a CSS class or an array of classes from the overlay pane.
  693. * @template THIS
  694. * @this {THIS}
  695. * @param {?} classes
  696. * @return {THIS}
  697. */
  698. function (classes) {
  699. (/** @type {?} */ (this))._overlayRef.removePanelClass(classes);
  700. return (/** @type {?} */ (this));
  701. };
  702. /**
  703. * Gets an observable that is notified when the dialog is finished opening.
  704. * @deprecated Use `afterOpened` instead.
  705. * @breaking-change 8.0.0
  706. */
  707. /**
  708. * Gets an observable that is notified when the dialog is finished opening.
  709. * @deprecated Use `afterOpened` instead.
  710. * \@breaking-change 8.0.0
  711. * @return {?}
  712. */
  713. MatDialogRef.prototype.afterOpen = /**
  714. * Gets an observable that is notified when the dialog is finished opening.
  715. * @deprecated Use `afterOpened` instead.
  716. * \@breaking-change 8.0.0
  717. * @return {?}
  718. */
  719. function () {
  720. return this.afterOpened();
  721. };
  722. /**
  723. * Gets an observable that is notified when the dialog has started closing.
  724. * @deprecated Use `beforeClosed` instead.
  725. * @breaking-change 8.0.0
  726. */
  727. /**
  728. * Gets an observable that is notified when the dialog has started closing.
  729. * @deprecated Use `beforeClosed` instead.
  730. * \@breaking-change 8.0.0
  731. * @return {?}
  732. */
  733. MatDialogRef.prototype.beforeClose = /**
  734. * Gets an observable that is notified when the dialog has started closing.
  735. * @deprecated Use `beforeClosed` instead.
  736. * \@breaking-change 8.0.0
  737. * @return {?}
  738. */
  739. function () {
  740. return this.beforeClosed();
  741. };
  742. /** Fetches the position strategy object from the overlay ref. */
  743. /**
  744. * Fetches the position strategy object from the overlay ref.
  745. * @private
  746. * @return {?}
  747. */
  748. MatDialogRef.prototype._getPositionStrategy = /**
  749. * Fetches the position strategy object from the overlay ref.
  750. * @private
  751. * @return {?}
  752. */
  753. function () {
  754. return (/** @type {?} */ (this._overlayRef.getConfig().positionStrategy));
  755. };
  756. return MatDialogRef;
  757. }());
  758. /**
  759. * @fileoverview added by tsickle
  760. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  761. */
  762. /**
  763. * Injection token that can be used to access the data that was passed in to a dialog.
  764. * @type {?}
  765. */
  766. var MAT_DIALOG_DATA = new InjectionToken('MatDialogData');
  767. /**
  768. * Injection token that can be used to specify default dialog options.
  769. * @type {?}
  770. */
  771. var MAT_DIALOG_DEFAULT_OPTIONS = new InjectionToken('mat-dialog-default-options');
  772. /**
  773. * Injection token that determines the scroll handling while the dialog is open.
  774. * @type {?}
  775. */
  776. var MAT_DIALOG_SCROLL_STRATEGY = new InjectionToken('mat-dialog-scroll-strategy');
  777. /**
  778. * \@docs-private
  779. * @param {?} overlay
  780. * @return {?}
  781. */
  782. function MAT_DIALOG_SCROLL_STRATEGY_FACTORY(overlay) {
  783. return (/**
  784. * @return {?}
  785. */
  786. function () { return overlay.scrollStrategies.block(); });
  787. }
  788. /**
  789. * \@docs-private
  790. * @param {?} overlay
  791. * @return {?}
  792. */
  793. function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
  794. return (/**
  795. * @return {?}
  796. */
  797. function () { return overlay.scrollStrategies.block(); });
  798. }
  799. /**
  800. * \@docs-private
  801. * @type {?}
  802. */
  803. var MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {
  804. provide: MAT_DIALOG_SCROLL_STRATEGY,
  805. deps: [Overlay],
  806. useFactory: MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY,
  807. };
  808. /**
  809. * Service to open Material Design modal dialogs.
  810. */
  811. var MatDialog = /** @class */ (function () {
  812. function MatDialog(_overlay, _injector, _location, _defaultOptions, scrollStrategy, _parentDialog, _overlayContainer) {
  813. var _this = this;
  814. this._overlay = _overlay;
  815. this._injector = _injector;
  816. this._location = _location;
  817. this._defaultOptions = _defaultOptions;
  818. this._parentDialog = _parentDialog;
  819. this._overlayContainer = _overlayContainer;
  820. this._openDialogsAtThisLevel = [];
  821. this._afterAllClosedAtThisLevel = new Subject();
  822. this._afterOpenedAtThisLevel = new Subject();
  823. this._ariaHiddenElements = new Map();
  824. // TODO (jelbourn): tighten the typing right-hand side of this expression.
  825. /**
  826. * Stream that emits when all open dialog have finished closing.
  827. * Will emit on subscribe if there are no open dialogs to begin with.
  828. */
  829. this.afterAllClosed = (/** @type {?} */ (defer((/**
  830. * @return {?}
  831. */
  832. function () { return _this.openDialogs.length ?
  833. _this._afterAllClosed :
  834. _this._afterAllClosed.pipe(startWith(undefined)); }))));
  835. this._scrollStrategy = scrollStrategy;
  836. }
  837. Object.defineProperty(MatDialog.prototype, "openDialogs", {
  838. /** Keeps track of the currently-open dialogs. */
  839. get: /**
  840. * Keeps track of the currently-open dialogs.
  841. * @return {?}
  842. */
  843. function () {
  844. return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
  845. },
  846. enumerable: true,
  847. configurable: true
  848. });
  849. Object.defineProperty(MatDialog.prototype, "afterOpened", {
  850. /** Stream that emits when a dialog has been opened. */
  851. get: /**
  852. * Stream that emits when a dialog has been opened.
  853. * @return {?}
  854. */
  855. function () {
  856. return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;
  857. },
  858. enumerable: true,
  859. configurable: true
  860. });
  861. Object.defineProperty(MatDialog.prototype, "afterOpen", {
  862. /**
  863. * Stream that emits when a dialog has been opened.
  864. * @deprecated Use `afterOpened` instead.
  865. * @breaking-change 8.0.0
  866. */
  867. get: /**
  868. * Stream that emits when a dialog has been opened.
  869. * @deprecated Use `afterOpened` instead.
  870. * \@breaking-change 8.0.0
  871. * @return {?}
  872. */
  873. function () {
  874. return this.afterOpened;
  875. },
  876. enumerable: true,
  877. configurable: true
  878. });
  879. Object.defineProperty(MatDialog.prototype, "_afterAllClosed", {
  880. get: /**
  881. * @return {?}
  882. */
  883. function () {
  884. /** @type {?} */
  885. var parent = this._parentDialog;
  886. return parent ? parent._afterAllClosed : this._afterAllClosedAtThisLevel;
  887. },
  888. enumerable: true,
  889. configurable: true
  890. });
  891. /**
  892. * Opens a modal dialog containing the given component.
  893. * @param componentOrTemplateRef Type of the component to load into the dialog,
  894. * or a TemplateRef to instantiate as the dialog content.
  895. * @param config Extra configuration options.
  896. * @returns Reference to the newly-opened dialog.
  897. */
  898. /**
  899. * Opens a modal dialog containing the given component.
  900. * @template T, D, R
  901. * @param {?} componentOrTemplateRef Type of the component to load into the dialog,
  902. * or a TemplateRef to instantiate as the dialog content.
  903. * @param {?=} config Extra configuration options.
  904. * @return {?} Reference to the newly-opened dialog.
  905. */
  906. MatDialog.prototype.open = /**
  907. * Opens a modal dialog containing the given component.
  908. * @template T, D, R
  909. * @param {?} componentOrTemplateRef Type of the component to load into the dialog,
  910. * or a TemplateRef to instantiate as the dialog content.
  911. * @param {?=} config Extra configuration options.
  912. * @return {?} Reference to the newly-opened dialog.
  913. */
  914. function (componentOrTemplateRef, config) {
  915. var _this = this;
  916. config = _applyConfigDefaults(config, this._defaultOptions || new MatDialogConfig());
  917. if (config.id && this.getDialogById(config.id)) {
  918. throw Error("Dialog with id \"" + config.id + "\" exists already. The dialog id must be unique.");
  919. }
  920. /** @type {?} */
  921. var overlayRef = this._createOverlay(config);
  922. /** @type {?} */
  923. var dialogContainer = this._attachDialogContainer(overlayRef, config);
  924. /** @type {?} */
  925. var dialogRef = this._attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config);
  926. // If this is the first dialog that we're opening, hide all the non-overlay content.
  927. if (!this.openDialogs.length) {
  928. this._hideNonDialogContentFromAssistiveTechnology();
  929. }
  930. this.openDialogs.push(dialogRef);
  931. dialogRef.afterClosed().subscribe((/**
  932. * @return {?}
  933. */
  934. function () { return _this._removeOpenDialog(dialogRef); }));
  935. this.afterOpened.next(dialogRef);
  936. return dialogRef;
  937. };
  938. /**
  939. * Closes all of the currently-open dialogs.
  940. */
  941. /**
  942. * Closes all of the currently-open dialogs.
  943. * @return {?}
  944. */
  945. MatDialog.prototype.closeAll = /**
  946. * Closes all of the currently-open dialogs.
  947. * @return {?}
  948. */
  949. function () {
  950. this._closeDialogs(this.openDialogs);
  951. };
  952. /**
  953. * Finds an open dialog by its id.
  954. * @param id ID to use when looking up the dialog.
  955. */
  956. /**
  957. * Finds an open dialog by its id.
  958. * @param {?} id ID to use when looking up the dialog.
  959. * @return {?}
  960. */
  961. MatDialog.prototype.getDialogById = /**
  962. * Finds an open dialog by its id.
  963. * @param {?} id ID to use when looking up the dialog.
  964. * @return {?}
  965. */
  966. function (id) {
  967. return this.openDialogs.find((/**
  968. * @param {?} dialog
  969. * @return {?}
  970. */
  971. function (dialog) { return dialog.id === id; }));
  972. };
  973. /**
  974. * @return {?}
  975. */
  976. MatDialog.prototype.ngOnDestroy = /**
  977. * @return {?}
  978. */
  979. function () {
  980. // Only close the dialogs at this level on destroy
  981. // since the parent service may still be active.
  982. this._closeDialogs(this._openDialogsAtThisLevel);
  983. this._afterAllClosedAtThisLevel.complete();
  984. this._afterOpenedAtThisLevel.complete();
  985. };
  986. /**
  987. * Creates the overlay into which the dialog will be loaded.
  988. * @param config The dialog configuration.
  989. * @returns A promise resolving to the OverlayRef for the created overlay.
  990. */
  991. /**
  992. * Creates the overlay into which the dialog will be loaded.
  993. * @private
  994. * @param {?} config The dialog configuration.
  995. * @return {?} A promise resolving to the OverlayRef for the created overlay.
  996. */
  997. MatDialog.prototype._createOverlay = /**
  998. * Creates the overlay into which the dialog will be loaded.
  999. * @private
  1000. * @param {?} config The dialog configuration.
  1001. * @return {?} A promise resolving to the OverlayRef for the created overlay.
  1002. */
  1003. function (config) {
  1004. /** @type {?} */
  1005. var overlayConfig = this._getOverlayConfig(config);
  1006. return this._overlay.create(overlayConfig);
  1007. };
  1008. /**
  1009. * Creates an overlay config from a dialog config.
  1010. * @param dialogConfig The dialog configuration.
  1011. * @returns The overlay configuration.
  1012. */
  1013. /**
  1014. * Creates an overlay config from a dialog config.
  1015. * @private
  1016. * @param {?} dialogConfig The dialog configuration.
  1017. * @return {?} The overlay configuration.
  1018. */
  1019. MatDialog.prototype._getOverlayConfig = /**
  1020. * Creates an overlay config from a dialog config.
  1021. * @private
  1022. * @param {?} dialogConfig The dialog configuration.
  1023. * @return {?} The overlay configuration.
  1024. */
  1025. function (dialogConfig) {
  1026. /** @type {?} */
  1027. var state$$1 = new OverlayConfig({
  1028. positionStrategy: this._overlay.position().global(),
  1029. scrollStrategy: dialogConfig.scrollStrategy || this._scrollStrategy(),
  1030. panelClass: dialogConfig.panelClass,
  1031. hasBackdrop: dialogConfig.hasBackdrop,
  1032. direction: dialogConfig.direction,
  1033. minWidth: dialogConfig.minWidth,
  1034. minHeight: dialogConfig.minHeight,
  1035. maxWidth: dialogConfig.maxWidth,
  1036. maxHeight: dialogConfig.maxHeight,
  1037. disposeOnNavigation: dialogConfig.closeOnNavigation
  1038. });
  1039. if (dialogConfig.backdropClass) {
  1040. state$$1.backdropClass = dialogConfig.backdropClass;
  1041. }
  1042. return state$$1;
  1043. };
  1044. /**
  1045. * Attaches an MatDialogContainer to a dialog's already-created overlay.
  1046. * @param overlay Reference to the dialog's underlying overlay.
  1047. * @param config The dialog configuration.
  1048. * @returns A promise resolving to a ComponentRef for the attached container.
  1049. */
  1050. /**
  1051. * Attaches an MatDialogContainer to a dialog's already-created overlay.
  1052. * @private
  1053. * @param {?} overlay Reference to the dialog's underlying overlay.
  1054. * @param {?} config The dialog configuration.
  1055. * @return {?} A promise resolving to a ComponentRef for the attached container.
  1056. */
  1057. MatDialog.prototype._attachDialogContainer = /**
  1058. * Attaches an MatDialogContainer to a dialog's already-created overlay.
  1059. * @private
  1060. * @param {?} overlay Reference to the dialog's underlying overlay.
  1061. * @param {?} config The dialog configuration.
  1062. * @return {?} A promise resolving to a ComponentRef for the attached container.
  1063. */
  1064. function (overlay, config) {
  1065. /** @type {?} */
  1066. var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
  1067. /** @type {?} */
  1068. var injector = new PortalInjector(userInjector || this._injector, new WeakMap([
  1069. [MatDialogConfig, config]
  1070. ]));
  1071. /** @type {?} */
  1072. var containerPortal = new ComponentPortal(MatDialogContainer, config.viewContainerRef, injector);
  1073. /** @type {?} */
  1074. var containerRef = overlay.attach(containerPortal);
  1075. return containerRef.instance;
  1076. };
  1077. /**
  1078. * Attaches the user-provided component to the already-created MatDialogContainer.
  1079. * @param componentOrTemplateRef The type of component being loaded into the dialog,
  1080. * or a TemplateRef to instantiate as the content.
  1081. * @param dialogContainer Reference to the wrapping MatDialogContainer.
  1082. * @param overlayRef Reference to the overlay in which the dialog resides.
  1083. * @param config The dialog configuration.
  1084. * @returns A promise resolving to the MatDialogRef that should be returned to the user.
  1085. */
  1086. /**
  1087. * Attaches the user-provided component to the already-created MatDialogContainer.
  1088. * @private
  1089. * @template T, R
  1090. * @param {?} componentOrTemplateRef The type of component being loaded into the dialog,
  1091. * or a TemplateRef to instantiate as the content.
  1092. * @param {?} dialogContainer Reference to the wrapping MatDialogContainer.
  1093. * @param {?} overlayRef Reference to the overlay in which the dialog resides.
  1094. * @param {?} config The dialog configuration.
  1095. * @return {?} A promise resolving to the MatDialogRef that should be returned to the user.
  1096. */
  1097. MatDialog.prototype._attachDialogContent = /**
  1098. * Attaches the user-provided component to the already-created MatDialogContainer.
  1099. * @private
  1100. * @template T, R
  1101. * @param {?} componentOrTemplateRef The type of component being loaded into the dialog,
  1102. * or a TemplateRef to instantiate as the content.
  1103. * @param {?} dialogContainer Reference to the wrapping MatDialogContainer.
  1104. * @param {?} overlayRef Reference to the overlay in which the dialog resides.
  1105. * @param {?} config The dialog configuration.
  1106. * @return {?} A promise resolving to the MatDialogRef that should be returned to the user.
  1107. */
  1108. function (componentOrTemplateRef, dialogContainer, overlayRef, config) {
  1109. // Create a reference to the dialog we're creating in order to give the user a handle
  1110. // to modify and close it.
  1111. /** @type {?} */
  1112. var dialogRef = new MatDialogRef(overlayRef, dialogContainer, this._location, config.id);
  1113. // When the dialog backdrop is clicked, we want to close it.
  1114. if (config.hasBackdrop) {
  1115. overlayRef.backdropClick().subscribe((/**
  1116. * @return {?}
  1117. */
  1118. function () {
  1119. if (!dialogRef.disableClose) {
  1120. dialogRef.close();
  1121. }
  1122. }));
  1123. }
  1124. if (componentOrTemplateRef instanceof TemplateRef) {
  1125. dialogContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, (/** @type {?} */ (null)), (/** @type {?} */ ({ $implicit: config.data, dialogRef: dialogRef }))));
  1126. }
  1127. else {
  1128. /** @type {?} */
  1129. var injector = this._createInjector(config, dialogRef, dialogContainer);
  1130. /** @type {?} */
  1131. var contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, undefined, injector));
  1132. dialogRef.componentInstance = contentRef.instance;
  1133. }
  1134. dialogRef
  1135. .updateSize(config.width, config.height)
  1136. .updatePosition(config.position);
  1137. return dialogRef;
  1138. };
  1139. /**
  1140. * Creates a custom injector to be used inside the dialog. This allows a component loaded inside
  1141. * of a dialog to close itself and, optionally, to return a value.
  1142. * @param config Config object that is used to construct the dialog.
  1143. * @param dialogRef Reference to the dialog.
  1144. * @param container Dialog container element that wraps all of the contents.
  1145. * @returns The custom injector that can be used inside the dialog.
  1146. */
  1147. /**
  1148. * Creates a custom injector to be used inside the dialog. This allows a component loaded inside
  1149. * of a dialog to close itself and, optionally, to return a value.
  1150. * @private
  1151. * @template T
  1152. * @param {?} config Config object that is used to construct the dialog.
  1153. * @param {?} dialogRef Reference to the dialog.
  1154. * @param {?} dialogContainer
  1155. * @return {?} The custom injector that can be used inside the dialog.
  1156. */
  1157. MatDialog.prototype._createInjector = /**
  1158. * Creates a custom injector to be used inside the dialog. This allows a component loaded inside
  1159. * of a dialog to close itself and, optionally, to return a value.
  1160. * @private
  1161. * @template T
  1162. * @param {?} config Config object that is used to construct the dialog.
  1163. * @param {?} dialogRef Reference to the dialog.
  1164. * @param {?} dialogContainer
  1165. * @return {?} The custom injector that can be used inside the dialog.
  1166. */
  1167. function (config, dialogRef, dialogContainer) {
  1168. /** @type {?} */
  1169. var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
  1170. // The MatDialogContainer is injected in the portal as the MatDialogContainer and the dialog's
  1171. // content are created out of the same ViewContainerRef and as such, are siblings for injector
  1172. // purposes. To allow the hierarchy that is expected, the MatDialogContainer is explicitly
  1173. // added to the injection tokens.
  1174. /** @type {?} */
  1175. var injectionTokens = new WeakMap([
  1176. [MatDialogContainer, dialogContainer],
  1177. [MAT_DIALOG_DATA, config.data],
  1178. [MatDialogRef, dialogRef]
  1179. ]);
  1180. if (config.direction &&
  1181. (!userInjector || !userInjector.get(Directionality, null))) {
  1182. injectionTokens.set(Directionality, {
  1183. value: config.direction,
  1184. change: of()
  1185. });
  1186. }
  1187. return new PortalInjector(userInjector || this._injector, injectionTokens);
  1188. };
  1189. /**
  1190. * Removes a dialog from the array of open dialogs.
  1191. * @param dialogRef Dialog to be removed.
  1192. */
  1193. /**
  1194. * Removes a dialog from the array of open dialogs.
  1195. * @private
  1196. * @param {?} dialogRef Dialog to be removed.
  1197. * @return {?}
  1198. */
  1199. MatDialog.prototype._removeOpenDialog = /**
  1200. * Removes a dialog from the array of open dialogs.
  1201. * @private
  1202. * @param {?} dialogRef Dialog to be removed.
  1203. * @return {?}
  1204. */
  1205. function (dialogRef) {
  1206. /** @type {?} */
  1207. var index = this.openDialogs.indexOf(dialogRef);
  1208. if (index > -1) {
  1209. this.openDialogs.splice(index, 1);
  1210. // If all the dialogs were closed, remove/restore the `aria-hidden`
  1211. // to a the siblings and emit to the `afterAllClosed` stream.
  1212. if (!this.openDialogs.length) {
  1213. this._ariaHiddenElements.forEach((/**
  1214. * @param {?} previousValue
  1215. * @param {?} element
  1216. * @return {?}
  1217. */
  1218. function (previousValue, element) {
  1219. if (previousValue) {
  1220. element.setAttribute('aria-hidden', previousValue);
  1221. }
  1222. else {
  1223. element.removeAttribute('aria-hidden');
  1224. }
  1225. }));
  1226. this._ariaHiddenElements.clear();
  1227. this._afterAllClosed.next();
  1228. }
  1229. }
  1230. };
  1231. /**
  1232. * Hides all of the content that isn't an overlay from assistive technology.
  1233. */
  1234. /**
  1235. * Hides all of the content that isn't an overlay from assistive technology.
  1236. * @private
  1237. * @return {?}
  1238. */
  1239. MatDialog.prototype._hideNonDialogContentFromAssistiveTechnology = /**
  1240. * Hides all of the content that isn't an overlay from assistive technology.
  1241. * @private
  1242. * @return {?}
  1243. */
  1244. function () {
  1245. /** @type {?} */
  1246. var overlayContainer = this._overlayContainer.getContainerElement();
  1247. // Ensure that the overlay container is attached to the DOM.
  1248. if (overlayContainer.parentElement) {
  1249. /** @type {?} */
  1250. var siblings = overlayContainer.parentElement.children;
  1251. for (var i = siblings.length - 1; i > -1; i--) {
  1252. /** @type {?} */
  1253. var sibling = siblings[i];
  1254. if (sibling !== overlayContainer &&
  1255. sibling.nodeName !== 'SCRIPT' &&
  1256. sibling.nodeName !== 'STYLE' &&
  1257. !sibling.hasAttribute('aria-live')) {
  1258. this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
  1259. sibling.setAttribute('aria-hidden', 'true');
  1260. }
  1261. }
  1262. }
  1263. };
  1264. /** Closes all of the dialogs in an array. */
  1265. /**
  1266. * Closes all of the dialogs in an array.
  1267. * @private
  1268. * @param {?} dialogs
  1269. * @return {?}
  1270. */
  1271. MatDialog.prototype._closeDialogs = /**
  1272. * Closes all of the dialogs in an array.
  1273. * @private
  1274. * @param {?} dialogs
  1275. * @return {?}
  1276. */
  1277. function (dialogs) {
  1278. /** @type {?} */
  1279. var i = dialogs.length;
  1280. while (i--) {
  1281. // The `_openDialogs` property isn't updated after close until the rxjs subscription
  1282. // runs on the next microtask, in addition to modifying the array as we're going
  1283. // through it. We loop through all of them and call close without assuming that
  1284. // they'll be removed from the list instantaneously.
  1285. dialogs[i].close();
  1286. }
  1287. };
  1288. MatDialog.decorators = [
  1289. { type: Injectable },
  1290. ];
  1291. /** @nocollapse */
  1292. MatDialog.ctorParameters = function () { return [
  1293. { type: Overlay },
  1294. { type: Injector },
  1295. { type: Location, decorators: [{ type: Optional }] },
  1296. { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] },
  1297. { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_SCROLL_STRATEGY,] }] },
  1298. { type: MatDialog, decorators: [{ type: Optional }, { type: SkipSelf }] },
  1299. { type: OverlayContainer }
  1300. ]; };
  1301. return MatDialog;
  1302. }());
  1303. /**
  1304. * Applies default options to the dialog config.
  1305. * @param {?=} config Config to be modified.
  1306. * @param {?=} defaultOptions Default options provided.
  1307. * @return {?} The new configuration object.
  1308. */
  1309. function _applyConfigDefaults(config, defaultOptions) {
  1310. return __assign({}, defaultOptions, config);
  1311. }
  1312. /**
  1313. * @fileoverview added by tsickle
  1314. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1315. */
  1316. /**
  1317. * Counter used to generate unique IDs for dialog elements.
  1318. * @type {?}
  1319. */
  1320. var dialogElementUid = 0;
  1321. /**
  1322. * Button that will close the current dialog.
  1323. */
  1324. var MatDialogClose = /** @class */ (function () {
  1325. function MatDialogClose(dialogRef, _elementRef, _dialog) {
  1326. this.dialogRef = dialogRef;
  1327. this._elementRef = _elementRef;
  1328. this._dialog = _dialog;
  1329. }
  1330. /**
  1331. * @return {?}
  1332. */
  1333. MatDialogClose.prototype.ngOnInit = /**
  1334. * @return {?}
  1335. */
  1336. function () {
  1337. if (!this.dialogRef) {
  1338. // When this directive is included in a dialog via TemplateRef (rather than being
  1339. // in a Component), the DialogRef isn't available via injection because embedded
  1340. // views cannot be given a custom injector. Instead, we look up the DialogRef by
  1341. // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
  1342. // be resolved at constructor time.
  1343. this.dialogRef = (/** @type {?} */ (getClosestDialog(this._elementRef, this._dialog.openDialogs)));
  1344. }
  1345. };
  1346. /**
  1347. * @param {?} changes
  1348. * @return {?}
  1349. */
  1350. MatDialogClose.prototype.ngOnChanges = /**
  1351. * @param {?} changes
  1352. * @return {?}
  1353. */
  1354. function (changes) {
  1355. /** @type {?} */
  1356. var proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];
  1357. if (proxiedChange) {
  1358. this.dialogResult = proxiedChange.currentValue;
  1359. }
  1360. };
  1361. MatDialogClose.decorators = [
  1362. { type: Directive, args: [{
  1363. selector: '[mat-dialog-close], [matDialogClose]',
  1364. exportAs: 'matDialogClose',
  1365. host: {
  1366. '(click)': 'dialogRef.close(dialogResult)',
  1367. '[attr.aria-label]': 'ariaLabel || null',
  1368. 'type': 'button',
  1369. }
  1370. },] },
  1371. ];
  1372. /** @nocollapse */
  1373. MatDialogClose.ctorParameters = function () { return [
  1374. { type: MatDialogRef, decorators: [{ type: Optional }] },
  1375. { type: ElementRef },
  1376. { type: MatDialog }
  1377. ]; };
  1378. MatDialogClose.propDecorators = {
  1379. ariaLabel: [{ type: Input, args: ['aria-label',] }],
  1380. dialogResult: [{ type: Input, args: ['mat-dialog-close',] }],
  1381. _matDialogClose: [{ type: Input, args: ['matDialogClose',] }]
  1382. };
  1383. return MatDialogClose;
  1384. }());
  1385. /**
  1386. * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
  1387. */
  1388. var MatDialogTitle = /** @class */ (function () {
  1389. function MatDialogTitle(_dialogRef, _elementRef, _dialog) {
  1390. this._dialogRef = _dialogRef;
  1391. this._elementRef = _elementRef;
  1392. this._dialog = _dialog;
  1393. this.id = "mat-dialog-title-" + dialogElementUid++;
  1394. }
  1395. /**
  1396. * @return {?}
  1397. */
  1398. MatDialogTitle.prototype.ngOnInit = /**
  1399. * @return {?}
  1400. */
  1401. function () {
  1402. var _this = this;
  1403. if (!this._dialogRef) {
  1404. this._dialogRef = (/** @type {?} */ (getClosestDialog(this._elementRef, this._dialog.openDialogs)));
  1405. }
  1406. if (this._dialogRef) {
  1407. Promise.resolve().then((/**
  1408. * @return {?}
  1409. */
  1410. function () {
  1411. /** @type {?} */
  1412. var container = _this._dialogRef._containerInstance;
  1413. if (container && !container._ariaLabelledBy) {
  1414. container._ariaLabelledBy = _this.id;
  1415. }
  1416. }));
  1417. }
  1418. };
  1419. MatDialogTitle.decorators = [
  1420. { type: Directive, args: [{
  1421. selector: '[mat-dialog-title], [matDialogTitle]',
  1422. exportAs: 'matDialogTitle',
  1423. host: {
  1424. 'class': 'mat-dialog-title',
  1425. '[id]': 'id',
  1426. },
  1427. },] },
  1428. ];
  1429. /** @nocollapse */
  1430. MatDialogTitle.ctorParameters = function () { return [
  1431. { type: MatDialogRef, decorators: [{ type: Optional }] },
  1432. { type: ElementRef },
  1433. { type: MatDialog }
  1434. ]; };
  1435. MatDialogTitle.propDecorators = {
  1436. id: [{ type: Input }]
  1437. };
  1438. return MatDialogTitle;
  1439. }());
  1440. /**
  1441. * Scrollable content container of a dialog.
  1442. */
  1443. var MatDialogContent = /** @class */ (function () {
  1444. function MatDialogContent() {
  1445. }
  1446. MatDialogContent.decorators = [
  1447. { type: Directive, args: [{
  1448. selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]",
  1449. host: { 'class': 'mat-dialog-content' }
  1450. },] },
  1451. ];
  1452. return MatDialogContent;
  1453. }());
  1454. /**
  1455. * Container for the bottom action buttons in a dialog.
  1456. * Stays fixed to the bottom when scrolling.
  1457. */
  1458. var MatDialogActions = /** @class */ (function () {
  1459. function MatDialogActions() {
  1460. }
  1461. MatDialogActions.decorators = [
  1462. { type: Directive, args: [{
  1463. selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",
  1464. host: { 'class': 'mat-dialog-actions' }
  1465. },] },
  1466. ];
  1467. return MatDialogActions;
  1468. }());
  1469. /**
  1470. * Finds the closest MatDialogRef to an element by looking at the DOM.
  1471. * @param {?} element Element relative to which to look for a dialog.
  1472. * @param {?} openDialogs References to the currently-open dialogs.
  1473. * @return {?}
  1474. */
  1475. function getClosestDialog(element, openDialogs) {
  1476. /** @type {?} */
  1477. var parent = element.nativeElement.parentElement;
  1478. while (parent && !parent.classList.contains('mat-dialog-container')) {
  1479. parent = parent.parentElement;
  1480. }
  1481. return parent ? openDialogs.find((/**
  1482. * @param {?} dialog
  1483. * @return {?}
  1484. */
  1485. function (dialog) { return dialog.id === (/** @type {?} */ (parent)).id; })) : null;
  1486. }
  1487. /**
  1488. * @fileoverview added by tsickle
  1489. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1490. */
  1491. var MatDialogModule = /** @class */ (function () {
  1492. function MatDialogModule() {
  1493. }
  1494. MatDialogModule.decorators = [
  1495. { type: NgModule, args: [{
  1496. imports: [
  1497. CommonModule,
  1498. OverlayModule,
  1499. PortalModule,
  1500. MatCommonModule,
  1501. ],
  1502. exports: [
  1503. MatDialogContainer,
  1504. MatDialogClose,
  1505. MatDialogTitle,
  1506. MatDialogContent,
  1507. MatDialogActions,
  1508. MatCommonModule,
  1509. ],
  1510. declarations: [
  1511. MatDialogContainer,
  1512. MatDialogClose,
  1513. MatDialogTitle,
  1514. MatDialogActions,
  1515. MatDialogContent,
  1516. ],
  1517. providers: [
  1518. MatDialog,
  1519. MAT_DIALOG_SCROLL_STRATEGY_PROVIDER,
  1520. ],
  1521. entryComponents: [MatDialogContainer],
  1522. },] },
  1523. ];
  1524. return MatDialogModule;
  1525. }());
  1526. /**
  1527. * @fileoverview added by tsickle
  1528. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1529. */
  1530. /**
  1531. * @fileoverview added by tsickle
  1532. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1533. */
  1534. export { MatDialogModule, MAT_DIALOG_SCROLL_STRATEGY_FACTORY, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS, MAT_DIALOG_SCROLL_STRATEGY, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, MatDialog, throwMatDialogContentAlreadyAttachedError, MatDialogContainer, MatDialogClose, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogConfig, MatDialogRef, matDialogAnimations };
  1535. //# sourceMappingURL=dialog.es5.js.map