bottom-sheet.js 27 KB

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