material-bottom-sheet.umd.js 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915
  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. (function (global, factory) {
  9. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('@angular/material/core'), require('@angular/cdk/portal'), require('@angular/cdk/layout'), require('@angular/common'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/keycodes'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/bidi')) :
  10. typeof define === 'function' && define.amd ? define('@angular/material/bottom-sheet', ['exports', '@angular/core', '@angular/animations', '@angular/material/core', '@angular/cdk/portal', '@angular/cdk/layout', '@angular/common', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/keycodes', 'rxjs', 'rxjs/operators', '@angular/cdk/bidi'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.bottomSheet = {}),global.ng.core,global.ng.animations,global.ng.material.core,global.ng.cdk.portal,global.ng.cdk.layout,global.ng.common,global.ng.cdk.a11y,global.ng.cdk.overlay,global.ng.cdk.keycodes,global.rxjs,global.rxjs.operators,global.ng.cdk.bidi));
  12. }(this, (function (exports,core,animations,core$1,portal,layout,common,a11y,overlay,keycodes,rxjs,operators,bidi) { 'use strict';
  13. /*! *****************************************************************************
  14. Copyright (c) Microsoft Corporation. All rights reserved.
  15. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  16. this file except in compliance with the License. You may obtain a copy of the
  17. License at http://www.apache.org/licenses/LICENSE-2.0
  18. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  19. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  20. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  21. MERCHANTABLITY OR NON-INFRINGEMENT.
  22. See the Apache Version 2.0 License for specific language governing permissions
  23. and limitations under the License.
  24. ***************************************************************************** */
  25. /* global Reflect, Promise */
  26. var extendStatics = function(d, b) {
  27. extendStatics = Object.setPrototypeOf ||
  28. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  29. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  30. return extendStatics(d, b);
  31. };
  32. function __extends(d, b) {
  33. extendStatics(d, b);
  34. function __() { this.constructor = d; }
  35. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  36. }
  37. var __assign = function() {
  38. __assign = Object.assign || function __assign(t) {
  39. for (var s, i = 1, n = arguments.length; i < n; i++) {
  40. s = arguments[i];
  41. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  42. }
  43. return t;
  44. };
  45. return __assign.apply(this, arguments);
  46. };
  47. /**
  48. * @fileoverview added by tsickle
  49. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  50. */
  51. /**
  52. * Injection token that can be used to access the data that was passed in to a bottom sheet.
  53. * @type {?}
  54. */
  55. var MAT_BOTTOM_SHEET_DATA = new core.InjectionToken('MatBottomSheetData');
  56. /**
  57. * Configuration used when opening a bottom sheet.
  58. * @template D
  59. */
  60. var /**
  61. * Configuration used when opening a bottom sheet.
  62. * @template D
  63. */
  64. MatBottomSheetConfig = /** @class */ (function () {
  65. function MatBottomSheetConfig() {
  66. /**
  67. * Data being injected into the child component.
  68. */
  69. this.data = null;
  70. /**
  71. * Whether the bottom sheet has a backdrop.
  72. */
  73. this.hasBackdrop = true;
  74. /**
  75. * Whether the user can use escape or clicking outside to close the bottom sheet.
  76. */
  77. this.disableClose = false;
  78. /**
  79. * Aria label to assign to the bottom sheet element.
  80. */
  81. this.ariaLabel = null;
  82. /**
  83. * Whether the bottom sheet should close when the user goes backwards/forwards in history.
  84. * Note that this usually doesn't include clicking on links (unless the user is using
  85. * the `HashLocationStrategy`).
  86. */
  87. this.closeOnNavigation = true;
  88. // Note that this is disabled by default, because while the a11y recommendations are to focus
  89. // the first focusable element, doing so prevents screen readers from reading out the
  90. // rest of the bottom sheet content.
  91. /**
  92. * Whether the bottom sheet should focus the first focusable element on open.
  93. */
  94. this.autoFocus = false;
  95. /**
  96. * Whether the bottom sheet should restore focus to the
  97. * previously-focused element, after it's closed.
  98. */
  99. this.restoreFocus = true;
  100. }
  101. return MatBottomSheetConfig;
  102. }());
  103. /**
  104. * @fileoverview added by tsickle
  105. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  106. */
  107. /**
  108. * Animations used by the Material bottom sheet.
  109. * @type {?}
  110. */
  111. var matBottomSheetAnimations = {
  112. /**
  113. * Animation that shows and hides a bottom sheet.
  114. */
  115. bottomSheetState: animations.trigger('state', [
  116. animations.state('void, hidden', animations.style({ transform: 'translateY(100%)' })),
  117. animations.state('visible', animations.style({ transform: 'translateY(0%)' })),
  118. animations.transition('visible => void, visible => hidden', animations.animate(core$1.AnimationDurations.COMPLEX + " " + core$1.AnimationCurves.ACCELERATION_CURVE)),
  119. animations.transition('void => visible', animations.animate(core$1.AnimationDurations.EXITING + " " + core$1.AnimationCurves.DECELERATION_CURVE)),
  120. ])
  121. };
  122. /**
  123. * @fileoverview added by tsickle
  124. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  125. */
  126. // TODO(crisbeto): consolidate some logic between this, MatDialog and MatSnackBar
  127. /**
  128. * Internal component that wraps user-provided bottom sheet content.
  129. * \@docs-private
  130. */
  131. var MatBottomSheetContainer = /** @class */ (function (_super) {
  132. __extends(MatBottomSheetContainer, _super);
  133. function MatBottomSheetContainer(_elementRef, _changeDetectorRef, _focusTrapFactory, breakpointObserver, document, bottomSheetConfig) {
  134. var _this = _super.call(this) || this;
  135. _this._elementRef = _elementRef;
  136. _this._changeDetectorRef = _changeDetectorRef;
  137. _this._focusTrapFactory = _focusTrapFactory;
  138. _this.bottomSheetConfig = bottomSheetConfig;
  139. /**
  140. * The state of the bottom sheet animations.
  141. */
  142. _this._animationState = 'void';
  143. /**
  144. * Emits whenever the state of the animation changes.
  145. */
  146. _this._animationStateChanged = new core.EventEmitter();
  147. /**
  148. * Element that was focused before the bottom sheet was opened.
  149. */
  150. _this._elementFocusedBeforeOpened = null;
  151. _this._document = document;
  152. _this._breakpointSubscription = breakpointObserver
  153. .observe([layout.Breakpoints.Medium, layout.Breakpoints.Large, layout.Breakpoints.XLarge])
  154. .subscribe((/**
  155. * @return {?}
  156. */
  157. function () {
  158. _this._toggleClass('mat-bottom-sheet-container-medium', breakpointObserver.isMatched(layout.Breakpoints.Medium));
  159. _this._toggleClass('mat-bottom-sheet-container-large', breakpointObserver.isMatched(layout.Breakpoints.Large));
  160. _this._toggleClass('mat-bottom-sheet-container-xlarge', breakpointObserver.isMatched(layout.Breakpoints.XLarge));
  161. }));
  162. return _this;
  163. }
  164. /** Attach a component portal as content to this bottom sheet container. */
  165. /**
  166. * Attach a component portal as content to this bottom sheet container.
  167. * @template T
  168. * @param {?} portal
  169. * @return {?}
  170. */
  171. MatBottomSheetContainer.prototype.attachComponentPortal = /**
  172. * Attach a component portal as content to this bottom sheet container.
  173. * @template T
  174. * @param {?} portal
  175. * @return {?}
  176. */
  177. function (portal$$1) {
  178. this._validatePortalAttached();
  179. this._setPanelClass();
  180. this._savePreviouslyFocusedElement();
  181. return this._portalOutlet.attachComponentPortal(portal$$1);
  182. };
  183. /** Attach a template portal as content to this bottom sheet container. */
  184. /**
  185. * Attach a template portal as content to this bottom sheet container.
  186. * @template C
  187. * @param {?} portal
  188. * @return {?}
  189. */
  190. MatBottomSheetContainer.prototype.attachTemplatePortal = /**
  191. * Attach a template portal as content to this bottom sheet container.
  192. * @template C
  193. * @param {?} portal
  194. * @return {?}
  195. */
  196. function (portal$$1) {
  197. this._validatePortalAttached();
  198. this._setPanelClass();
  199. this._savePreviouslyFocusedElement();
  200. return this._portalOutlet.attachTemplatePortal(portal$$1);
  201. };
  202. /** Begin animation of bottom sheet entrance into view. */
  203. /**
  204. * Begin animation of bottom sheet entrance into view.
  205. * @return {?}
  206. */
  207. MatBottomSheetContainer.prototype.enter = /**
  208. * Begin animation of bottom sheet entrance into view.
  209. * @return {?}
  210. */
  211. function () {
  212. if (!this._destroyed) {
  213. this._animationState = 'visible';
  214. this._changeDetectorRef.detectChanges();
  215. }
  216. };
  217. /** Begin animation of the bottom sheet exiting from view. */
  218. /**
  219. * Begin animation of the bottom sheet exiting from view.
  220. * @return {?}
  221. */
  222. MatBottomSheetContainer.prototype.exit = /**
  223. * Begin animation of the bottom sheet exiting from view.
  224. * @return {?}
  225. */
  226. function () {
  227. if (!this._destroyed) {
  228. this._animationState = 'hidden';
  229. this._changeDetectorRef.markForCheck();
  230. }
  231. };
  232. /**
  233. * @return {?}
  234. */
  235. MatBottomSheetContainer.prototype.ngOnDestroy = /**
  236. * @return {?}
  237. */
  238. function () {
  239. this._breakpointSubscription.unsubscribe();
  240. this._destroyed = true;
  241. };
  242. /**
  243. * @param {?} event
  244. * @return {?}
  245. */
  246. MatBottomSheetContainer.prototype._onAnimationDone = /**
  247. * @param {?} event
  248. * @return {?}
  249. */
  250. function (event) {
  251. if (event.toState === 'hidden') {
  252. this._restoreFocus();
  253. }
  254. else if (event.toState === 'visible') {
  255. this._trapFocus();
  256. }
  257. this._animationStateChanged.emit(event);
  258. };
  259. /**
  260. * @param {?} event
  261. * @return {?}
  262. */
  263. MatBottomSheetContainer.prototype._onAnimationStart = /**
  264. * @param {?} event
  265. * @return {?}
  266. */
  267. function (event) {
  268. this._animationStateChanged.emit(event);
  269. };
  270. /**
  271. * @private
  272. * @param {?} cssClass
  273. * @param {?} add
  274. * @return {?}
  275. */
  276. MatBottomSheetContainer.prototype._toggleClass = /**
  277. * @private
  278. * @param {?} cssClass
  279. * @param {?} add
  280. * @return {?}
  281. */
  282. function (cssClass, add) {
  283. /** @type {?} */
  284. var classList = this._elementRef.nativeElement.classList;
  285. add ? classList.add(cssClass) : classList.remove(cssClass);
  286. };
  287. /**
  288. * @private
  289. * @return {?}
  290. */
  291. MatBottomSheetContainer.prototype._validatePortalAttached = /**
  292. * @private
  293. * @return {?}
  294. */
  295. function () {
  296. if (this._portalOutlet.hasAttached()) {
  297. throw Error('Attempting to attach bottom sheet content after content is already attached');
  298. }
  299. };
  300. /**
  301. * @private
  302. * @return {?}
  303. */
  304. MatBottomSheetContainer.prototype._setPanelClass = /**
  305. * @private
  306. * @return {?}
  307. */
  308. function () {
  309. /** @type {?} */
  310. var element = this._elementRef.nativeElement;
  311. /** @type {?} */
  312. var panelClass = this.bottomSheetConfig.panelClass;
  313. if (Array.isArray(panelClass)) {
  314. // Note that we can't use a spread here, because IE doesn't support multiple arguments.
  315. panelClass.forEach((/**
  316. * @param {?} cssClass
  317. * @return {?}
  318. */
  319. function (cssClass) { return element.classList.add(cssClass); }));
  320. }
  321. else if (panelClass) {
  322. element.classList.add(panelClass);
  323. }
  324. };
  325. /** Moves the focus inside the focus trap. */
  326. /**
  327. * Moves the focus inside the focus trap.
  328. * @private
  329. * @return {?}
  330. */
  331. MatBottomSheetContainer.prototype._trapFocus = /**
  332. * Moves the focus inside the focus trap.
  333. * @private
  334. * @return {?}
  335. */
  336. function () {
  337. /** @type {?} */
  338. var element = this._elementRef.nativeElement;
  339. if (!this._focusTrap) {
  340. this._focusTrap = this._focusTrapFactory.create(element);
  341. }
  342. if (this.bottomSheetConfig.autoFocus) {
  343. this._focusTrap.focusInitialElementWhenReady();
  344. }
  345. else {
  346. /** @type {?} */
  347. var activeElement = this._document.activeElement;
  348. // Otherwise ensure that focus is on the container. It's possible that a different
  349. // component tried to move focus while the open animation was running. See:
  350. // https://github.com/angular/components/issues/16215. Note that we only want to do this
  351. // if the focus isn't inside the bottom sheet already, because it's possible that the
  352. // consumer turned off `autoFocus` in order to move focus themselves.
  353. if (activeElement !== element && !element.contains(activeElement)) {
  354. element.focus();
  355. }
  356. }
  357. };
  358. /** Restores focus to the element that was focused before the bottom sheet was opened. */
  359. /**
  360. * Restores focus to the element that was focused before the bottom sheet was opened.
  361. * @private
  362. * @return {?}
  363. */
  364. MatBottomSheetContainer.prototype._restoreFocus = /**
  365. * Restores focus to the element that was focused before the bottom sheet was opened.
  366. * @private
  367. * @return {?}
  368. */
  369. function () {
  370. /** @type {?} */
  371. var toFocus = this._elementFocusedBeforeOpened;
  372. // We need the extra check, because IE can set the `activeElement` to null in some cases.
  373. if (this.bottomSheetConfig.restoreFocus && toFocus && typeof toFocus.focus === 'function') {
  374. toFocus.focus();
  375. }
  376. if (this._focusTrap) {
  377. this._focusTrap.destroy();
  378. }
  379. };
  380. /** Saves a reference to the element that was focused before the bottom sheet was opened. */
  381. /**
  382. * Saves a reference to the element that was focused before the bottom sheet was opened.
  383. * @private
  384. * @return {?}
  385. */
  386. MatBottomSheetContainer.prototype._savePreviouslyFocusedElement = /**
  387. * Saves a reference to the element that was focused before the bottom sheet was opened.
  388. * @private
  389. * @return {?}
  390. */
  391. function () {
  392. var _this = this;
  393. this._elementFocusedBeforeOpened = (/** @type {?} */ (this._document.activeElement));
  394. // The `focus` method isn't available during server-side rendering.
  395. if (this._elementRef.nativeElement.focus) {
  396. Promise.resolve().then((/**
  397. * @return {?}
  398. */
  399. function () { return _this._elementRef.nativeElement.focus(); }));
  400. }
  401. };
  402. MatBottomSheetContainer.decorators = [
  403. { type: core.Component, args: [{selector: 'mat-bottom-sheet-container',
  404. template: "<ng-template cdkPortalOutlet></ng-template>",
  405. styles: [".mat-bottom-sheet-container{padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto}@media (-ms-high-contrast:active){.mat-bottom-sheet-container{outline:1px solid}}.mat-bottom-sheet-container-large,.mat-bottom-sheet-container-medium,.mat-bottom-sheet-container-xlarge{border-top-left-radius:4px;border-top-right-radius:4px}.mat-bottom-sheet-container-medium{min-width:384px;max-width:calc(100vw - 128px)}.mat-bottom-sheet-container-large{min-width:512px;max-width:calc(100vw - 256px)}.mat-bottom-sheet-container-xlarge{min-width:576px;max-width:calc(100vw - 384px)}"],
  406. changeDetection: core.ChangeDetectionStrategy.OnPush,
  407. encapsulation: core.ViewEncapsulation.None,
  408. animations: [matBottomSheetAnimations.bottomSheetState],
  409. host: {
  410. 'class': 'mat-bottom-sheet-container',
  411. 'tabindex': '-1',
  412. 'role': 'dialog',
  413. 'aria-modal': 'true',
  414. '[attr.aria-label]': 'bottomSheetConfig?.ariaLabel',
  415. '[@state]': '_animationState',
  416. '(@state.start)': '_onAnimationStart($event)',
  417. '(@state.done)': '_onAnimationDone($event)'
  418. },
  419. },] },
  420. ];
  421. /** @nocollapse */
  422. MatBottomSheetContainer.ctorParameters = function () { return [
  423. { type: core.ElementRef },
  424. { type: core.ChangeDetectorRef },
  425. { type: a11y.FocusTrapFactory },
  426. { type: layout.BreakpointObserver },
  427. { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] },
  428. { type: MatBottomSheetConfig }
  429. ]; };
  430. MatBottomSheetContainer.propDecorators = {
  431. _portalOutlet: [{ type: core.ViewChild, args: [portal.CdkPortalOutlet, { static: true },] }]
  432. };
  433. return MatBottomSheetContainer;
  434. }(portal.BasePortalOutlet));
  435. /**
  436. * @fileoverview added by tsickle
  437. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  438. */
  439. var MatBottomSheetModule = /** @class */ (function () {
  440. function MatBottomSheetModule() {
  441. }
  442. MatBottomSheetModule.decorators = [
  443. { type: core.NgModule, args: [{
  444. imports: [
  445. common.CommonModule,
  446. overlay.OverlayModule,
  447. core$1.MatCommonModule,
  448. portal.PortalModule,
  449. ],
  450. exports: [MatBottomSheetContainer, core$1.MatCommonModule],
  451. declarations: [MatBottomSheetContainer],
  452. entryComponents: [MatBottomSheetContainer],
  453. },] },
  454. ];
  455. return MatBottomSheetModule;
  456. }());
  457. /**
  458. * @fileoverview added by tsickle
  459. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  460. */
  461. /**
  462. * Reference to a bottom sheet dispatched from the bottom sheet service.
  463. * @template T, R
  464. */
  465. var /**
  466. * Reference to a bottom sheet dispatched from the bottom sheet service.
  467. * @template T, R
  468. */
  469. MatBottomSheetRef = /** @class */ (function () {
  470. function MatBottomSheetRef(containerInstance, _overlayRef,
  471. // @breaking-change 8.0.0 `_location` parameter to be removed.
  472. _location) {
  473. var _this = this;
  474. this._overlayRef = _overlayRef;
  475. /**
  476. * Subject for notifying the user that the bottom sheet has been dismissed.
  477. */
  478. this._afterDismissed = new rxjs.Subject();
  479. /**
  480. * Subject for notifying the user that the bottom sheet has opened and appeared.
  481. */
  482. this._afterOpened = new rxjs.Subject();
  483. this.containerInstance = containerInstance;
  484. this.disableClose = containerInstance.bottomSheetConfig.disableClose;
  485. // Emit when opening animation completes
  486. containerInstance._animationStateChanged.pipe(operators.filter((/**
  487. * @param {?} event
  488. * @return {?}
  489. */
  490. function (event) { return event.phaseName === 'done' && event.toState === 'visible'; })), operators.take(1))
  491. .subscribe((/**
  492. * @return {?}
  493. */
  494. function () {
  495. _this._afterOpened.next();
  496. _this._afterOpened.complete();
  497. }));
  498. // Dispose overlay when closing animation is complete
  499. containerInstance._animationStateChanged
  500. .pipe(operators.filter((/**
  501. * @param {?} event
  502. * @return {?}
  503. */
  504. function (event) { return event.phaseName === 'done' && event.toState === 'hidden'; })), operators.take(1))
  505. .subscribe((/**
  506. * @return {?}
  507. */
  508. function () {
  509. clearTimeout(_this._closeFallbackTimeout);
  510. _overlayRef.dispose();
  511. }));
  512. _overlayRef.detachments().pipe(operators.take(1)).subscribe((/**
  513. * @return {?}
  514. */
  515. function () {
  516. _this._afterDismissed.next(_this._result);
  517. _this._afterDismissed.complete();
  518. }));
  519. rxjs.merge(_overlayRef.backdropClick(), _overlayRef.keydownEvents().pipe(operators.filter((/**
  520. * @param {?} event
  521. * @return {?}
  522. */
  523. function (event) { return event.keyCode === keycodes.ESCAPE; })))).subscribe((/**
  524. * @param {?} event
  525. * @return {?}
  526. */
  527. function (event) {
  528. if (!_this.disableClose &&
  529. (event.type !== 'keydown' || !keycodes.hasModifierKey((/** @type {?} */ (event))))) {
  530. event.preventDefault();
  531. _this.dismiss();
  532. }
  533. }));
  534. }
  535. /**
  536. * Dismisses the bottom sheet.
  537. * @param result Data to be passed back to the bottom sheet opener.
  538. */
  539. /**
  540. * Dismisses the bottom sheet.
  541. * @param {?=} result Data to be passed back to the bottom sheet opener.
  542. * @return {?}
  543. */
  544. MatBottomSheetRef.prototype.dismiss = /**
  545. * Dismisses the bottom sheet.
  546. * @param {?=} result Data to be passed back to the bottom sheet opener.
  547. * @return {?}
  548. */
  549. function (result) {
  550. var _this = this;
  551. if (!this._afterDismissed.closed) {
  552. // Transition the backdrop in parallel to the bottom sheet.
  553. this.containerInstance._animationStateChanged.pipe(operators.filter((/**
  554. * @param {?} event
  555. * @return {?}
  556. */
  557. function (event) { return event.phaseName === 'start'; })), operators.take(1)).subscribe((/**
  558. * @param {?} event
  559. * @return {?}
  560. */
  561. function (event) {
  562. // The logic that disposes of the overlay depends on the exit animation completing, however
  563. // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
  564. // timeout which will clean everything up if the animation hasn't fired within the specified
  565. // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
  566. // vast majority of cases the timeout will have been cleared before it has fired.
  567. _this._closeFallbackTimeout = setTimeout((/**
  568. * @return {?}
  569. */
  570. function () {
  571. _this._overlayRef.dispose();
  572. }), event.totalTime + 100);
  573. _this._overlayRef.detachBackdrop();
  574. }));
  575. this._result = result;
  576. this.containerInstance.exit();
  577. }
  578. };
  579. /** Gets an observable that is notified when the bottom sheet is finished closing. */
  580. /**
  581. * Gets an observable that is notified when the bottom sheet is finished closing.
  582. * @return {?}
  583. */
  584. MatBottomSheetRef.prototype.afterDismissed = /**
  585. * Gets an observable that is notified when the bottom sheet is finished closing.
  586. * @return {?}
  587. */
  588. function () {
  589. return this._afterDismissed.asObservable();
  590. };
  591. /** Gets an observable that is notified when the bottom sheet has opened and appeared. */
  592. /**
  593. * Gets an observable that is notified when the bottom sheet has opened and appeared.
  594. * @return {?}
  595. */
  596. MatBottomSheetRef.prototype.afterOpened = /**
  597. * Gets an observable that is notified when the bottom sheet has opened and appeared.
  598. * @return {?}
  599. */
  600. function () {
  601. return this._afterOpened.asObservable();
  602. };
  603. /**
  604. * Gets an observable that emits when the overlay's backdrop has been clicked.
  605. */
  606. /**
  607. * Gets an observable that emits when the overlay's backdrop has been clicked.
  608. * @return {?}
  609. */
  610. MatBottomSheetRef.prototype.backdropClick = /**
  611. * Gets an observable that emits when the overlay's backdrop has been clicked.
  612. * @return {?}
  613. */
  614. function () {
  615. return this._overlayRef.backdropClick();
  616. };
  617. /**
  618. * Gets an observable that emits when keydown events are targeted on the overlay.
  619. */
  620. /**
  621. * Gets an observable that emits when keydown events are targeted on the overlay.
  622. * @return {?}
  623. */
  624. MatBottomSheetRef.prototype.keydownEvents = /**
  625. * Gets an observable that emits when keydown events are targeted on the overlay.
  626. * @return {?}
  627. */
  628. function () {
  629. return this._overlayRef.keydownEvents();
  630. };
  631. return MatBottomSheetRef;
  632. }());
  633. /**
  634. * @fileoverview added by tsickle
  635. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  636. */
  637. /**
  638. * Injection token that can be used to specify default bottom sheet options.
  639. * @type {?}
  640. */
  641. var MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new core.InjectionToken('mat-bottom-sheet-default-options');
  642. /**
  643. * Service to trigger Material Design bottom sheets.
  644. */
  645. var MatBottomSheet = /** @class */ (function () {
  646. function MatBottomSheet(_overlay, _injector, _parentBottomSheet, _location, _defaultOptions) {
  647. this._overlay = _overlay;
  648. this._injector = _injector;
  649. this._parentBottomSheet = _parentBottomSheet;
  650. this._location = _location;
  651. this._defaultOptions = _defaultOptions;
  652. this._bottomSheetRefAtThisLevel = null;
  653. }
  654. Object.defineProperty(MatBottomSheet.prototype, "_openedBottomSheetRef", {
  655. /** Reference to the currently opened bottom sheet. */
  656. get: /**
  657. * Reference to the currently opened bottom sheet.
  658. * @return {?}
  659. */
  660. function () {
  661. /** @type {?} */
  662. var parent = this._parentBottomSheet;
  663. return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel;
  664. },
  665. set: /**
  666. * @param {?} value
  667. * @return {?}
  668. */
  669. function (value) {
  670. if (this._parentBottomSheet) {
  671. this._parentBottomSheet._openedBottomSheetRef = value;
  672. }
  673. else {
  674. this._bottomSheetRefAtThisLevel = value;
  675. }
  676. },
  677. enumerable: true,
  678. configurable: true
  679. });
  680. /**
  681. * @template T, D, R
  682. * @param {?} componentOrTemplateRef
  683. * @param {?=} config
  684. * @return {?}
  685. */
  686. MatBottomSheet.prototype.open = /**
  687. * @template T, D, R
  688. * @param {?} componentOrTemplateRef
  689. * @param {?=} config
  690. * @return {?}
  691. */
  692. function (componentOrTemplateRef, config) {
  693. var _this = this;
  694. /** @type {?} */
  695. var _config = _applyConfigDefaults(this._defaultOptions || new MatBottomSheetConfig(), config);
  696. /** @type {?} */
  697. var overlayRef = this._createOverlay(_config);
  698. /** @type {?} */
  699. var container = this._attachContainer(overlayRef, _config);
  700. /** @type {?} */
  701. var ref = new MatBottomSheetRef(container, overlayRef, this._location);
  702. if (componentOrTemplateRef instanceof core.TemplateRef) {
  703. container.attachTemplatePortal(new portal.TemplatePortal(componentOrTemplateRef, (/** @type {?} */ (null)), (/** @type {?} */ ({
  704. $implicit: _config.data,
  705. bottomSheetRef: ref
  706. }))));
  707. }
  708. else {
  709. /** @type {?} */
  710. var portal$$1 = new portal.ComponentPortal(componentOrTemplateRef, undefined, this._createInjector(_config, ref));
  711. /** @type {?} */
  712. var contentRef = container.attachComponentPortal(portal$$1);
  713. ref.instance = contentRef.instance;
  714. }
  715. // When the bottom sheet is dismissed, clear the reference to it.
  716. ref.afterDismissed().subscribe((/**
  717. * @return {?}
  718. */
  719. function () {
  720. // Clear the bottom sheet ref if it hasn't already been replaced by a newer one.
  721. if (_this._openedBottomSheetRef == ref) {
  722. _this._openedBottomSheetRef = null;
  723. }
  724. }));
  725. if (this._openedBottomSheetRef) {
  726. // If a bottom sheet is already in view, dismiss it and enter the
  727. // new bottom sheet after exit animation is complete.
  728. this._openedBottomSheetRef.afterDismissed().subscribe((/**
  729. * @return {?}
  730. */
  731. function () { return ref.containerInstance.enter(); }));
  732. this._openedBottomSheetRef.dismiss();
  733. }
  734. else {
  735. // If no bottom sheet is in view, enter the new bottom sheet.
  736. ref.containerInstance.enter();
  737. }
  738. this._openedBottomSheetRef = ref;
  739. return ref;
  740. };
  741. /**
  742. * Dismisses the currently-visible bottom sheet.
  743. */
  744. /**
  745. * Dismisses the currently-visible bottom sheet.
  746. * @return {?}
  747. */
  748. MatBottomSheet.prototype.dismiss = /**
  749. * Dismisses the currently-visible bottom sheet.
  750. * @return {?}
  751. */
  752. function () {
  753. if (this._openedBottomSheetRef) {
  754. this._openedBottomSheetRef.dismiss();
  755. }
  756. };
  757. /**
  758. * @return {?}
  759. */
  760. MatBottomSheet.prototype.ngOnDestroy = /**
  761. * @return {?}
  762. */
  763. function () {
  764. if (this._bottomSheetRefAtThisLevel) {
  765. this._bottomSheetRefAtThisLevel.dismiss();
  766. }
  767. };
  768. /**
  769. * Attaches the bottom sheet container component to the overlay.
  770. */
  771. /**
  772. * Attaches the bottom sheet container component to the overlay.
  773. * @private
  774. * @param {?} overlayRef
  775. * @param {?} config
  776. * @return {?}
  777. */
  778. MatBottomSheet.prototype._attachContainer = /**
  779. * Attaches the bottom sheet container component to the overlay.
  780. * @private
  781. * @param {?} overlayRef
  782. * @param {?} config
  783. * @return {?}
  784. */
  785. function (overlayRef, config) {
  786. /** @type {?} */
  787. var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
  788. /** @type {?} */
  789. var injector = new portal.PortalInjector(userInjector || this._injector, new WeakMap([
  790. [MatBottomSheetConfig, config]
  791. ]));
  792. /** @type {?} */
  793. var containerPortal = new portal.ComponentPortal(MatBottomSheetContainer, config.viewContainerRef, injector);
  794. /** @type {?} */
  795. var containerRef = overlayRef.attach(containerPortal);
  796. return containerRef.instance;
  797. };
  798. /**
  799. * Creates a new overlay and places it in the correct location.
  800. * @param config The user-specified bottom sheet config.
  801. */
  802. /**
  803. * Creates a new overlay and places it in the correct location.
  804. * @private
  805. * @param {?} config The user-specified bottom sheet config.
  806. * @return {?}
  807. */
  808. MatBottomSheet.prototype._createOverlay = /**
  809. * Creates a new overlay and places it in the correct location.
  810. * @private
  811. * @param {?} config The user-specified bottom sheet config.
  812. * @return {?}
  813. */
  814. function (config) {
  815. /** @type {?} */
  816. var overlayConfig = new overlay.OverlayConfig({
  817. direction: config.direction,
  818. hasBackdrop: config.hasBackdrop,
  819. disposeOnNavigation: config.closeOnNavigation,
  820. maxWidth: '100%',
  821. scrollStrategy: config.scrollStrategy || this._overlay.scrollStrategies.block(),
  822. positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0')
  823. });
  824. if (config.backdropClass) {
  825. overlayConfig.backdropClass = config.backdropClass;
  826. }
  827. return this._overlay.create(overlayConfig);
  828. };
  829. /**
  830. * Creates an injector to be used inside of a bottom sheet component.
  831. * @param config Config that was used to create the bottom sheet.
  832. * @param bottomSheetRef Reference to the bottom sheet.
  833. */
  834. /**
  835. * Creates an injector to be used inside of a bottom sheet component.
  836. * @private
  837. * @template T
  838. * @param {?} config Config that was used to create the bottom sheet.
  839. * @param {?} bottomSheetRef Reference to the bottom sheet.
  840. * @return {?}
  841. */
  842. MatBottomSheet.prototype._createInjector = /**
  843. * Creates an injector to be used inside of a bottom sheet component.
  844. * @private
  845. * @template T
  846. * @param {?} config Config that was used to create the bottom sheet.
  847. * @param {?} bottomSheetRef Reference to the bottom sheet.
  848. * @return {?}
  849. */
  850. function (config, bottomSheetRef) {
  851. /** @type {?} */
  852. var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
  853. /** @type {?} */
  854. var injectionTokens = new WeakMap([
  855. [MatBottomSheetRef, bottomSheetRef],
  856. [MAT_BOTTOM_SHEET_DATA, config.data]
  857. ]);
  858. if (config.direction &&
  859. (!userInjector || !userInjector.get(bidi.Directionality, null))) {
  860. injectionTokens.set(bidi.Directionality, {
  861. value: config.direction,
  862. change: rxjs.of()
  863. });
  864. }
  865. return new portal.PortalInjector(userInjector || this._injector, injectionTokens);
  866. };
  867. MatBottomSheet.decorators = [
  868. { type: core.Injectable, args: [{ providedIn: MatBottomSheetModule },] },
  869. ];
  870. /** @nocollapse */
  871. MatBottomSheet.ctorParameters = function () { return [
  872. { type: overlay.Overlay },
  873. { type: core.Injector },
  874. { type: MatBottomSheet, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] },
  875. { type: common.Location, decorators: [{ type: core.Optional }] },
  876. { type: MatBottomSheetConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_BOTTOM_SHEET_DEFAULT_OPTIONS,] }] }
  877. ]; };
  878. /** @nocollapse */ MatBottomSheet.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatBottomSheet_Factory() { return new MatBottomSheet(core.ɵɵinject(overlay.Overlay), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(MatBottomSheet, 12), core.ɵɵinject(common.Location, 8), core.ɵɵinject(MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, 8)); }, token: MatBottomSheet, providedIn: MatBottomSheetModule });
  879. return MatBottomSheet;
  880. }());
  881. /**
  882. * Applies default options to the bottom sheet config.
  883. * @param {?} defaults Object containing the default values to which to fall back.
  884. * @param {?=} config The configuration to which the defaults will be applied.
  885. * @return {?} The new configuration object with defaults applied.
  886. */
  887. function _applyConfigDefaults(defaults, config) {
  888. return __assign({}, defaults, config);
  889. }
  890. exports.MatBottomSheetModule = MatBottomSheetModule;
  891. exports.MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = MAT_BOTTOM_SHEET_DEFAULT_OPTIONS;
  892. exports.MatBottomSheet = MatBottomSheet;
  893. exports.MAT_BOTTOM_SHEET_DATA = MAT_BOTTOM_SHEET_DATA;
  894. exports.MatBottomSheetConfig = MatBottomSheetConfig;
  895. exports.MatBottomSheetContainer = MatBottomSheetContainer;
  896. exports.matBottomSheetAnimations = matBottomSheetAnimations;
  897. exports.MatBottomSheetRef = MatBottomSheetRef;
  898. Object.defineProperty(exports, '__esModule', { value: true });
  899. })));
  900. //# sourceMappingURL=material-bottom-sheet.umd.js.map