bottom-sheet.mjs 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. import { CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
  2. import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
  3. import * as i0 from '@angular/core';
  4. import { inject, ANIMATION_MODULE_TYPE, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, Injectable, NgModule } from '@angular/core';
  5. import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
  6. import { Overlay } from '@angular/cdk/overlay';
  7. import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
  8. import { Subject, merge } from 'rxjs';
  9. import { filter, take } from 'rxjs/operators';
  10. import { M as MatCommonModule } from './common-module-WayjW0Pb.mjs';
  11. import '@angular/cdk/a11y';
  12. import '@angular/cdk/bidi';
  13. const ENTER_ANIMATION = '_mat-bottom-sheet-enter';
  14. const EXIT_ANIMATION = '_mat-bottom-sheet-exit';
  15. /**
  16. * Internal component that wraps user-provided bottom sheet content.
  17. * @docs-private
  18. */
  19. class MatBottomSheetContainer extends CdkDialogContainer {
  20. _breakpointSubscription;
  21. _animationsDisabled = inject(ANIMATION_MODULE_TYPE, { optional: true }) === 'NoopAnimations';
  22. /** The state of the bottom sheet animations. */
  23. _animationState = 'void';
  24. /** Emits whenever the state of the animation changes. */
  25. _animationStateChanged = new EventEmitter();
  26. /** Whether the component has been destroyed. */
  27. _destroyed;
  28. constructor() {
  29. super();
  30. const breakpointObserver = inject(BreakpointObserver);
  31. this._breakpointSubscription = breakpointObserver
  32. .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
  33. .subscribe(() => {
  34. const classList = this._elementRef.nativeElement.classList;
  35. classList.toggle('mat-bottom-sheet-container-medium', breakpointObserver.isMatched(Breakpoints.Medium));
  36. classList.toggle('mat-bottom-sheet-container-large', breakpointObserver.isMatched(Breakpoints.Large));
  37. classList.toggle('mat-bottom-sheet-container-xlarge', breakpointObserver.isMatched(Breakpoints.XLarge));
  38. });
  39. }
  40. /** Begin animation of bottom sheet entrance into view. */
  41. enter() {
  42. if (!this._destroyed) {
  43. this._animationState = 'visible';
  44. this._changeDetectorRef.markForCheck();
  45. this._changeDetectorRef.detectChanges();
  46. if (this._animationsDisabled) {
  47. this._simulateAnimation(ENTER_ANIMATION);
  48. }
  49. }
  50. }
  51. /** Begin animation of the bottom sheet exiting from view. */
  52. exit() {
  53. if (!this._destroyed) {
  54. this._elementRef.nativeElement.setAttribute('mat-exit', '');
  55. this._animationState = 'hidden';
  56. this._changeDetectorRef.markForCheck();
  57. if (this._animationsDisabled) {
  58. this._simulateAnimation(EXIT_ANIMATION);
  59. }
  60. }
  61. }
  62. ngOnDestroy() {
  63. super.ngOnDestroy();
  64. this._breakpointSubscription.unsubscribe();
  65. this._destroyed = true;
  66. }
  67. _simulateAnimation(name) {
  68. this._ngZone.run(() => {
  69. this._handleAnimationEvent(true, name);
  70. setTimeout(() => this._handleAnimationEvent(false, name));
  71. });
  72. }
  73. _trapFocus() {
  74. // The bottom sheet starts off-screen and animates in, and at the same time we trap focus
  75. // within it. With some styles this appears to cause the page to jump around. See:
  76. // https://github.com/angular/components/issues/30774. Preventing the browser from
  77. // scrolling resolves the issue and isn't really necessary since the bottom sheet
  78. // normally isn't scrollable.
  79. super._trapFocus({ preventScroll: true });
  80. }
  81. _handleAnimationEvent(isStart, animationName) {
  82. const isEnter = animationName === ENTER_ANIMATION;
  83. const isExit = animationName === EXIT_ANIMATION;
  84. if (isEnter || isExit) {
  85. this._animationStateChanged.emit({
  86. toState: isEnter ? 'visible' : 'hidden',
  87. phase: isStart ? 'start' : 'done',
  88. });
  89. }
  90. }
  91. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheetContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
  92. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatBottomSheetContainer, isStandalone: true, selector: "mat-bottom-sheet-container", host: { attributes: { "tabindex": "-1" }, listeners: { "animationstart": "_handleAnimationEvent(true, $event.animationName)", "animationend": "_handleAnimationEvent(false, $event.animationName)", "animationcancel": "_handleAnimationEvent(false, $event.animationName)" }, properties: { "class.mat-bottom-sheet-container-animations-enabled": "!_animationsDisabled", "class.mat-bottom-sheet-container-enter": "_animationState === \"visible\"", "class.mat-bottom-sheet-container-exit": "_animationState === \"hidden\"", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-label": "_config.ariaLabel" }, classAttribute: "mat-bottom-sheet-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: ["@keyframes _mat-bottom-sheet-enter{from{transform:translateY(100%)}to{transform:none}}@keyframes _mat-bottom-sheet-exit{from{transform:none}to{transform:translateY(100%)}}.mat-bottom-sheet-container{box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto;position:relative;background:var(--mat-bottom-sheet-container-background-color, var(--mat-sys-surface-container-low));color:var(--mat-bottom-sheet-container-text-color, var(--mat-sys-on-surface));font-family:var(--mat-bottom-sheet-container-text-font, var(--mat-sys-body-large-font));font-size:var(--mat-bottom-sheet-container-text-size, var(--mat-sys-body-large-size));line-height:var(--mat-bottom-sheet-container-text-line-height, var(--mat-sys-body-large-line-height));font-weight:var(--mat-bottom-sheet-container-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-bottom-sheet-container-text-tracking, var(--mat-sys-body-large-tracking))}@media(forced-colors: active){.mat-bottom-sheet-container{outline:1px solid}}.mat-bottom-sheet-container-animations-enabled{transform:translateY(100%)}.mat-bottom-sheet-container-animations-enabled.mat-bottom-sheet-container-enter{animation:_mat-bottom-sheet-enter 195ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-bottom-sheet-container-animations-enabled.mat-bottom-sheet-container-exit{animation:_mat-bottom-sheet-exit 375ms cubic-bezier(0.4, 0, 1, 1) backwards}.mat-bottom-sheet-container-xlarge,.mat-bottom-sheet-container-large,.mat-bottom-sheet-container-medium{border-top-left-radius:var(--mat-bottom-sheet-container-shape, 28px);border-top-right-radius:var(--mat-bottom-sheet-container-shape, 28px)}.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)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
  93. }
  94. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheetContainer, decorators: [{
  95. type: Component,
  96. args: [{ selector: 'mat-bottom-sheet-container', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
  97. 'class': 'mat-bottom-sheet-container',
  98. '[class.mat-bottom-sheet-container-animations-enabled]': '!_animationsDisabled',
  99. '[class.mat-bottom-sheet-container-enter]': '_animationState === "visible"',
  100. '[class.mat-bottom-sheet-container-exit]': '_animationState === "hidden"',
  101. 'tabindex': '-1',
  102. '[attr.role]': '_config.role',
  103. '[attr.aria-modal]': '_config.ariaModal',
  104. '[attr.aria-label]': '_config.ariaLabel',
  105. '(animationstart)': '_handleAnimationEvent(true, $event.animationName)',
  106. '(animationend)': '_handleAnimationEvent(false, $event.animationName)',
  107. '(animationcancel)': '_handleAnimationEvent(false, $event.animationName)',
  108. }, imports: [CdkPortalOutlet], template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: ["@keyframes _mat-bottom-sheet-enter{from{transform:translateY(100%)}to{transform:none}}@keyframes _mat-bottom-sheet-exit{from{transform:none}to{transform:translateY(100%)}}.mat-bottom-sheet-container{box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto;position:relative;background:var(--mat-bottom-sheet-container-background-color, var(--mat-sys-surface-container-low));color:var(--mat-bottom-sheet-container-text-color, var(--mat-sys-on-surface));font-family:var(--mat-bottom-sheet-container-text-font, var(--mat-sys-body-large-font));font-size:var(--mat-bottom-sheet-container-text-size, var(--mat-sys-body-large-size));line-height:var(--mat-bottom-sheet-container-text-line-height, var(--mat-sys-body-large-line-height));font-weight:var(--mat-bottom-sheet-container-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-bottom-sheet-container-text-tracking, var(--mat-sys-body-large-tracking))}@media(forced-colors: active){.mat-bottom-sheet-container{outline:1px solid}}.mat-bottom-sheet-container-animations-enabled{transform:translateY(100%)}.mat-bottom-sheet-container-animations-enabled.mat-bottom-sheet-container-enter{animation:_mat-bottom-sheet-enter 195ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-bottom-sheet-container-animations-enabled.mat-bottom-sheet-container-exit{animation:_mat-bottom-sheet-exit 375ms cubic-bezier(0.4, 0, 1, 1) backwards}.mat-bottom-sheet-container-xlarge,.mat-bottom-sheet-container-large,.mat-bottom-sheet-container-medium{border-top-left-radius:var(--mat-bottom-sheet-container-shape, 28px);border-top-right-radius:var(--mat-bottom-sheet-container-shape, 28px)}.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)}\n"] }]
  109. }], ctorParameters: () => [] });
  110. /** Injection token that can be used to access the data that was passed in to a bottom sheet. */
  111. const MAT_BOTTOM_SHEET_DATA = new InjectionToken('MatBottomSheetData');
  112. /**
  113. * Configuration used when opening a bottom sheet.
  114. */
  115. class MatBottomSheetConfig {
  116. /** The view container to place the overlay for the bottom sheet into. */
  117. viewContainerRef;
  118. /** Extra CSS classes to be added to the bottom sheet container. */
  119. panelClass;
  120. /** Text layout direction for the bottom sheet. */
  121. direction;
  122. /** Data being injected into the child component. */
  123. data = null;
  124. /** Whether the bottom sheet has a backdrop. */
  125. hasBackdrop = true;
  126. /** Custom class for the backdrop. */
  127. backdropClass;
  128. /** Whether the user can use escape or clicking outside to close the bottom sheet. */
  129. disableClose = false;
  130. /** Aria label to assign to the bottom sheet element. */
  131. ariaLabel = null;
  132. /**
  133. * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,
  134. * because it can interfere with other overlay-based components (e.g. `mat-select`) and because
  135. * it is redundant since the dialog marks all outside content as `aria-hidden` anyway.
  136. */
  137. ariaModal = false;
  138. /**
  139. * Whether the bottom sheet should close when the user goes backwards/forwards in history.
  140. * Note that this usually doesn't include clicking on links (unless the user is using
  141. * the `HashLocationStrategy`).
  142. */
  143. closeOnNavigation = true;
  144. /**
  145. * Where the bottom sheet should focus on open.
  146. * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
  147. * AutoFocusTarget instead.
  148. */
  149. autoFocus = 'first-tabbable';
  150. /**
  151. * Whether the bottom sheet should restore focus to the
  152. * previously-focused element, after it's closed.
  153. */
  154. restoreFocus = true;
  155. /** Scroll strategy to be used for the bottom sheet. */
  156. scrollStrategy;
  157. /** Height for the bottom sheet. */
  158. height = '';
  159. /** Minimum height for the bottom sheet. If a number is provided, assumes pixel units. */
  160. minHeight;
  161. /** Maximum height for the bottom sheet. If a number is provided, assumes pixel units. */
  162. maxHeight;
  163. }
  164. /**
  165. * Reference to a bottom sheet dispatched from the bottom sheet service.
  166. */
  167. class MatBottomSheetRef {
  168. _ref;
  169. /** Instance of the component making up the content of the bottom sheet. */
  170. get instance() {
  171. return this._ref.componentInstance;
  172. }
  173. /**
  174. * `ComponentRef` of the component opened into the bottom sheet. Will be
  175. * null when the bottom sheet is opened using a `TemplateRef`.
  176. */
  177. get componentRef() {
  178. return this._ref.componentRef;
  179. }
  180. /**
  181. * Instance of the component into which the bottom sheet content is projected.
  182. * @docs-private
  183. */
  184. containerInstance;
  185. /** Whether the user is allowed to close the bottom sheet. */
  186. disableClose;
  187. /** Subject for notifying the user that the bottom sheet has opened and appeared. */
  188. _afterOpened = new Subject();
  189. /** Result to be passed down to the `afterDismissed` stream. */
  190. _result;
  191. /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
  192. _closeFallbackTimeout;
  193. constructor(_ref, config, containerInstance) {
  194. this._ref = _ref;
  195. this.containerInstance = containerInstance;
  196. this.disableClose = config.disableClose;
  197. // Emit when opening animation completes
  198. containerInstance._animationStateChanged
  199. .pipe(filter(event => event.phase === 'done' && event.toState === 'visible'), take(1))
  200. .subscribe(() => {
  201. this._afterOpened.next();
  202. this._afterOpened.complete();
  203. });
  204. // Dispose overlay when closing animation is complete
  205. containerInstance._animationStateChanged
  206. .pipe(filter(event => event.phase === 'done' && event.toState === 'hidden'), take(1))
  207. .subscribe(() => {
  208. clearTimeout(this._closeFallbackTimeout);
  209. this._ref.close(this._result);
  210. });
  211. _ref.overlayRef.detachments().subscribe(() => {
  212. this._ref.close(this._result);
  213. });
  214. merge(this.backdropClick(), this.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE))).subscribe(event => {
  215. if (!this.disableClose &&
  216. (event.type !== 'keydown' || !hasModifierKey(event))) {
  217. event.preventDefault();
  218. this.dismiss();
  219. }
  220. });
  221. }
  222. /**
  223. * Dismisses the bottom sheet.
  224. * @param result Data to be passed back to the bottom sheet opener.
  225. */
  226. dismiss(result) {
  227. if (!this.containerInstance) {
  228. return;
  229. }
  230. // Transition the backdrop in parallel to the bottom sheet.
  231. this.containerInstance._animationStateChanged
  232. .pipe(filter(event => event.phase === 'start'), take(1))
  233. .subscribe(() => {
  234. // The logic that disposes of the overlay depends on the exit animation completing, however
  235. // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
  236. // timeout which will clean everything up if the animation hasn't fired within the specified
  237. // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
  238. // vast majority of cases the timeout will have been cleared before it has fired.
  239. this._closeFallbackTimeout = setTimeout(() => this._ref.close(this._result), 500);
  240. this._ref.overlayRef.detachBackdrop();
  241. });
  242. this._result = result;
  243. this.containerInstance.exit();
  244. this.containerInstance = null;
  245. }
  246. /** Gets an observable that is notified when the bottom sheet is finished closing. */
  247. afterDismissed() {
  248. return this._ref.closed;
  249. }
  250. /** Gets an observable that is notified when the bottom sheet has opened and appeared. */
  251. afterOpened() {
  252. return this._afterOpened;
  253. }
  254. /**
  255. * Gets an observable that emits when the overlay's backdrop has been clicked.
  256. */
  257. backdropClick() {
  258. return this._ref.backdropClick;
  259. }
  260. /**
  261. * Gets an observable that emits when keydown events are targeted on the overlay.
  262. */
  263. keydownEvents() {
  264. return this._ref.keydownEvents;
  265. }
  266. }
  267. /** Injection token that can be used to specify default bottom sheet options. */
  268. const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken('mat-bottom-sheet-default-options');
  269. /**
  270. * Service to trigger Material Design bottom sheets.
  271. */
  272. class MatBottomSheet {
  273. _overlay = inject(Overlay);
  274. _parentBottomSheet = inject(MatBottomSheet, { optional: true, skipSelf: true });
  275. _defaultOptions = inject(MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, {
  276. optional: true,
  277. });
  278. _bottomSheetRefAtThisLevel = null;
  279. _dialog = inject(Dialog);
  280. /** Reference to the currently opened bottom sheet. */
  281. get _openedBottomSheetRef() {
  282. const parent = this._parentBottomSheet;
  283. return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel;
  284. }
  285. set _openedBottomSheetRef(value) {
  286. if (this._parentBottomSheet) {
  287. this._parentBottomSheet._openedBottomSheetRef = value;
  288. }
  289. else {
  290. this._bottomSheetRefAtThisLevel = value;
  291. }
  292. }
  293. constructor() { }
  294. open(componentOrTemplateRef, config) {
  295. const _config = { ...(this._defaultOptions || new MatBottomSheetConfig()), ...config };
  296. let ref;
  297. this._dialog.open(componentOrTemplateRef, {
  298. ..._config,
  299. // Disable closing since we need to sync it up to the animation ourselves.
  300. disableClose: true,
  301. // Disable closing on detachments so that we can sync up the animation.
  302. closeOnOverlayDetachments: false,
  303. maxWidth: '100%',
  304. container: MatBottomSheetContainer,
  305. scrollStrategy: _config.scrollStrategy || this._overlay.scrollStrategies.block(),
  306. positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0'),
  307. templateContext: () => ({ bottomSheetRef: ref }),
  308. providers: (cdkRef, _cdkConfig, container) => {
  309. ref = new MatBottomSheetRef(cdkRef, _config, container);
  310. return [
  311. { provide: MatBottomSheetRef, useValue: ref },
  312. { provide: MAT_BOTTOM_SHEET_DATA, useValue: _config.data },
  313. ];
  314. },
  315. });
  316. // When the bottom sheet is dismissed, clear the reference to it.
  317. ref.afterDismissed().subscribe(() => {
  318. // Clear the bottom sheet ref if it hasn't already been replaced by a newer one.
  319. if (this._openedBottomSheetRef === ref) {
  320. this._openedBottomSheetRef = null;
  321. }
  322. });
  323. if (this._openedBottomSheetRef) {
  324. // If a bottom sheet is already in view, dismiss it and enter the
  325. // new bottom sheet after exit animation is complete.
  326. this._openedBottomSheetRef.afterDismissed().subscribe(() => ref.containerInstance?.enter());
  327. this._openedBottomSheetRef.dismiss();
  328. }
  329. else {
  330. // If no bottom sheet is in view, enter the new bottom sheet.
  331. ref.containerInstance.enter();
  332. }
  333. this._openedBottomSheetRef = ref;
  334. return ref;
  335. }
  336. /**
  337. * Dismisses the currently-visible bottom sheet.
  338. * @param result Data to pass to the bottom sheet instance.
  339. */
  340. dismiss(result) {
  341. if (this._openedBottomSheetRef) {
  342. this._openedBottomSheetRef.dismiss(result);
  343. }
  344. }
  345. ngOnDestroy() {
  346. if (this._bottomSheetRefAtThisLevel) {
  347. this._bottomSheetRefAtThisLevel.dismiss();
  348. }
  349. }
  350. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  351. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheet, providedIn: 'root' });
  352. }
  353. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheet, decorators: [{
  354. type: Injectable,
  355. args: [{ providedIn: 'root' }]
  356. }], ctorParameters: () => [] });
  357. class MatBottomSheetModule {
  358. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  359. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheetModule, imports: [DialogModule, MatCommonModule, PortalModule, MatBottomSheetContainer], exports: [MatBottomSheetContainer, MatCommonModule] });
  360. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheetModule, providers: [MatBottomSheet], imports: [DialogModule, MatCommonModule, PortalModule, MatCommonModule] });
  361. }
  362. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatBottomSheetModule, decorators: [{
  363. type: NgModule,
  364. args: [{
  365. imports: [DialogModule, MatCommonModule, PortalModule, MatBottomSheetContainer],
  366. exports: [MatBottomSheetContainer, MatCommonModule],
  367. providers: [MatBottomSheet],
  368. }]
  369. }] });
  370. /**
  371. * Animations used by the Material bottom sheet.
  372. * @deprecated No longer used. Will be removed.
  373. * @breaking-change 21.0.0
  374. */
  375. const matBottomSheetAnimations = {
  376. // Represents the output of:
  377. // trigger('state', [
  378. // state('void, hidden', style({transform: 'translateY(100%)'})),
  379. // state('visible', style({transform: 'translateY(0%)'})),
  380. // transition(
  381. // 'visible => void, visible => hidden',
  382. // group([
  383. // animate('375ms cubic-bezier(0.4, 0, 1, 1)'),
  384. // query('@*', animateChild(), {optional: true}),
  385. // ]),
  386. // ),
  387. // transition(
  388. // 'void => visible',
  389. // group([
  390. // animate('195ms cubic-bezier(0, 0, 0.2, 1)'),
  391. // query('@*', animateChild(), {optional: true}),
  392. // ]),
  393. // ),
  394. // ])
  395. /** Animation that shows and hides a bottom sheet. */
  396. bottomSheetState: {
  397. type: 7,
  398. name: 'state',
  399. definitions: [
  400. {
  401. type: 0,
  402. name: 'void, hidden',
  403. styles: { type: 6, styles: { transform: 'translateY(100%)' }, offset: null },
  404. },
  405. {
  406. type: 0,
  407. name: 'visible',
  408. styles: { type: 6, styles: { transform: 'translateY(0%)' }, offset: null },
  409. },
  410. {
  411. type: 1,
  412. expr: 'visible => void, visible => hidden',
  413. animation: {
  414. type: 3,
  415. steps: [
  416. { type: 4, styles: null, timings: '375ms cubic-bezier(0.4, 0, 1, 1)' },
  417. {
  418. type: 11,
  419. selector: '@*',
  420. animation: { type: 9, options: null },
  421. options: { optional: true },
  422. },
  423. ],
  424. options: null,
  425. },
  426. options: null,
  427. },
  428. {
  429. type: 1,
  430. expr: 'void => visible',
  431. animation: {
  432. type: 3,
  433. steps: [
  434. { type: 4, styles: null, timings: '195ms cubic-bezier(0, 0, 0.2, 1)' },
  435. {
  436. type: 11,
  437. selector: '@*',
  438. animation: { type: 9, options: null },
  439. options: { optional: true },
  440. },
  441. ],
  442. options: null,
  443. },
  444. options: null,
  445. },
  446. ],
  447. options: {},
  448. },
  449. };
  450. export { MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet, MatBottomSheetConfig, MatBottomSheetContainer, MatBottomSheetModule, MatBottomSheetRef, matBottomSheetAnimations };
  451. //# sourceMappingURL=bottom-sheet.mjs.map