bottom-sheet.es5.js 33 KB

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