1 | import * as i2 from '@angular/cdk/dialog';
|
2 | import { CdkDialogContainer, DialogModule, Dialog } from '@angular/cdk/dialog';
|
3 | import * as i5 from '@angular/cdk/portal';
|
4 | import { PortalModule } from '@angular/cdk/portal';
|
5 | import * as i0 from '@angular/core';
|
6 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, NgModule, InjectionToken, Injectable, SkipSelf } from '@angular/core';
|
7 | import { AnimationDurations, AnimationCurves, MatCommonModule } from '@angular/material/core';
|
8 | import * as i4 from '@angular/cdk/layout';
|
9 | import { Breakpoints } from '@angular/cdk/layout';
|
10 | import { DOCUMENT } from '@angular/common';
|
11 | import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
|
12 | import * as i1 from '@angular/cdk/a11y';
|
13 | import * as i3 from '@angular/cdk/overlay';
|
14 | import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
15 | import { Subject, merge } from 'rxjs';
|
16 | import { filter, take } from 'rxjs/operators';
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 | const matBottomSheetAnimations = {
|
27 |
|
28 | bottomSheetState: trigger('state', [
|
29 | state('void, hidden', style({ transform: 'translateY(100%)' })),
|
30 | state('visible', style({ transform: 'translateY(0%)' })),
|
31 | transition('visible => void, visible => hidden', group([
|
32 | animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`),
|
33 | query('@*', animateChild(), { optional: true }),
|
34 | ])),
|
35 | transition('void => visible', group([
|
36 | animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`),
|
37 | query('@*', animateChild(), { optional: true }),
|
38 | ])),
|
39 | ]),
|
40 | };
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 | class MatBottomSheetContainer extends CdkDialogContainer {
|
47 | constructor(elementRef, focusTrapFactory, document, config, checker, ngZone, overlayRef, breakpointObserver, _changeDetectorRef, focusMonitor) {
|
48 | super(elementRef, focusTrapFactory, document, config, checker, ngZone, overlayRef, focusMonitor);
|
49 | this._changeDetectorRef = _changeDetectorRef;
|
50 |
|
51 | this._animationState = 'void';
|
52 |
|
53 | this._animationStateChanged = new EventEmitter();
|
54 | this._breakpointSubscription = breakpointObserver
|
55 | .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
|
56 | .subscribe(() => {
|
57 | this._toggleClass('mat-bottom-sheet-container-medium', breakpointObserver.isMatched(Breakpoints.Medium));
|
58 | this._toggleClass('mat-bottom-sheet-container-large', breakpointObserver.isMatched(Breakpoints.Large));
|
59 | this._toggleClass('mat-bottom-sheet-container-xlarge', breakpointObserver.isMatched(Breakpoints.XLarge));
|
60 | });
|
61 | }
|
62 |
|
63 | enter() {
|
64 | if (!this._destroyed) {
|
65 | this._animationState = 'visible';
|
66 | this._changeDetectorRef.detectChanges();
|
67 | }
|
68 | }
|
69 |
|
70 | exit() {
|
71 | if (!this._destroyed) {
|
72 | this._animationState = 'hidden';
|
73 | this._changeDetectorRef.markForCheck();
|
74 | }
|
75 | }
|
76 | ngOnDestroy() {
|
77 | super.ngOnDestroy();
|
78 | this._breakpointSubscription.unsubscribe();
|
79 | this._destroyed = true;
|
80 | }
|
81 | _onAnimationDone(event) {
|
82 | if (event.toState === 'visible') {
|
83 | this._trapFocus();
|
84 | }
|
85 | this._animationStateChanged.emit(event);
|
86 | }
|
87 | _onAnimationStart(event) {
|
88 | this._animationStateChanged.emit(event);
|
89 | }
|
90 | _captureInitialFocus() { }
|
91 | _toggleClass(cssClass, add) {
|
92 | this._elementRef.nativeElement.classList.toggle(cssClass, add);
|
93 | }
|
94 | }
|
95 | MatBottomSheetContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetContainer, deps: [{ token: i0.ElementRef }, { token: i1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: i2.DialogConfig }, { token: i1.InteractivityChecker }, { token: i0.NgZone }, { token: i3.OverlayRef }, { token: i4.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
|
96 | MatBottomSheetContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: MatBottomSheetContainer, selector: "mat-bottom-sheet-container", host: { attributes: { "tabindex": "-1" }, listeners: { "@state.start": "_onAnimationStart($event)", "@state.done": "_onAnimationDone($event)" }, properties: { "attr.role": "_config.role", "attr.aria-modal": "_config.isModal", "attr.aria-label": "_config.ariaLabel", "@state": "_animationState" }, classAttribute: "mat-bottom-sheet-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".mat-bottom-sheet-container{padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto}.cdk-high-contrast-active .mat-bottom-sheet-container{outline:1px solid}.mat-bottom-sheet-container-xlarge,.mat-bottom-sheet-container-large,.mat-bottom-sheet-container-medium{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)}"], dependencies: [{ kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [matBottomSheetAnimations.bottomSheetState], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
97 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetContainer, decorators: [{
|
98 | type: Component,
|
99 | args: [{ selector: 'mat-bottom-sheet-container', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, animations: [matBottomSheetAnimations.bottomSheetState], host: {
|
100 | 'class': 'mat-bottom-sheet-container',
|
101 | 'tabindex': '-1',
|
102 | '[attr.role]': '_config.role',
|
103 | '[attr.aria-modal]': '_config.isModal',
|
104 | '[attr.aria-label]': '_config.ariaLabel',
|
105 | '[@state]': '_animationState',
|
106 | '(@state.start)': '_onAnimationStart($event)',
|
107 | '(@state.done)': '_onAnimationDone($event)',
|
108 | }, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".mat-bottom-sheet-container{padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto}.cdk-high-contrast-active .mat-bottom-sheet-container{outline:1px solid}.mat-bottom-sheet-container-xlarge,.mat-bottom-sheet-container-large,.mat-bottom-sheet-container-medium{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)}"] }]
|
109 | }], ctorParameters: function () {
|
110 | return [{ type: i0.ElementRef }, { type: i1.FocusTrapFactory }, { type: undefined, decorators: [{
|
111 | type: Optional
|
112 | }, {
|
113 | type: Inject,
|
114 | args: [DOCUMENT]
|
115 | }] }, { type: i2.DialogConfig }, { type: i1.InteractivityChecker }, { type: i0.NgZone }, { type: i3.OverlayRef }, { type: i4.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }];
|
116 | } });
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | class MatBottomSheetModule {
|
126 | }
|
127 | MatBottomSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
128 | MatBottomSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetModule, declarations: [MatBottomSheetContainer], imports: [DialogModule, MatCommonModule, PortalModule], exports: [MatBottomSheetContainer, MatCommonModule] });
|
129 | MatBottomSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetModule, imports: [DialogModule, MatCommonModule, PortalModule, MatCommonModule] });
|
130 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetModule, decorators: [{
|
131 | type: NgModule,
|
132 | args: [{
|
133 | imports: [DialogModule, MatCommonModule, PortalModule],
|
134 | exports: [MatBottomSheetContainer, MatCommonModule],
|
135 | declarations: [MatBottomSheetContainer],
|
136 | }]
|
137 | }] });
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 | const MAT_BOTTOM_SHEET_DATA = new InjectionToken('MatBottomSheetData');
|
148 |
|
149 |
|
150 |
|
151 | class MatBottomSheetConfig {
|
152 | constructor() {
|
153 |
|
154 | this.data = null;
|
155 |
|
156 | this.hasBackdrop = true;
|
157 |
|
158 | this.disableClose = false;
|
159 |
|
160 | this.ariaLabel = null;
|
161 | |
162 |
|
163 |
|
164 |
|
165 |
|
166 | this.closeOnNavigation = true;
|
167 |
|
168 |
|
169 |
|
170 | |
171 |
|
172 |
|
173 |
|
174 |
|
175 | this.autoFocus = 'dialog';
|
176 | |
177 |
|
178 |
|
179 |
|
180 | this.restoreFocus = true;
|
181 | }
|
182 | }
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 | class MatBottomSheetRef {
|
195 | constructor(_ref, config, containerInstance) {
|
196 | this._ref = _ref;
|
197 |
|
198 | this._afterOpened = new Subject();
|
199 | this.containerInstance = containerInstance;
|
200 | this.disableClose = config.disableClose;
|
201 |
|
202 | containerInstance._animationStateChanged
|
203 | .pipe(filter(event => event.phaseName === 'done' && event.toState === 'visible'), take(1))
|
204 | .subscribe(() => {
|
205 | this._afterOpened.next();
|
206 | this._afterOpened.complete();
|
207 | });
|
208 |
|
209 | containerInstance._animationStateChanged
|
210 | .pipe(filter(event => event.phaseName === 'done' && event.toState === 'hidden'), take(1))
|
211 | .subscribe(() => {
|
212 | clearTimeout(this._closeFallbackTimeout);
|
213 | this._ref.close(this._result);
|
214 | });
|
215 | _ref.overlayRef.detachments().subscribe(() => {
|
216 | this._ref.close(this._result);
|
217 | });
|
218 | merge(this.backdropClick(), this.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE))).subscribe(event => {
|
219 | if (!this.disableClose &&
|
220 | (event.type !== 'keydown' || !hasModifierKey(event))) {
|
221 | event.preventDefault();
|
222 | this.dismiss();
|
223 | }
|
224 | });
|
225 | }
|
226 |
|
227 | get instance() {
|
228 | return this._ref.componentInstance;
|
229 | }
|
230 | |
231 |
|
232 |
|
233 |
|
234 | dismiss(result) {
|
235 | if (!this.containerInstance) {
|
236 | return;
|
237 | }
|
238 |
|
239 | this.containerInstance._animationStateChanged
|
240 | .pipe(filter(event => event.phaseName === 'start'), take(1))
|
241 | .subscribe(event => {
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 | this._closeFallbackTimeout = setTimeout(() => {
|
248 | this._ref.close(this._result);
|
249 | }, event.totalTime + 100);
|
250 | this._ref.overlayRef.detachBackdrop();
|
251 | });
|
252 | this._result = result;
|
253 | this.containerInstance.exit();
|
254 | this.containerInstance = null;
|
255 | }
|
256 |
|
257 | afterDismissed() {
|
258 | return this._ref.closed;
|
259 | }
|
260 |
|
261 | afterOpened() {
|
262 | return this._afterOpened;
|
263 | }
|
264 | |
265 |
|
266 |
|
267 | backdropClick() {
|
268 | return this._ref.backdropClick;
|
269 | }
|
270 | |
271 |
|
272 |
|
273 | keydownEvents() {
|
274 | return this._ref.keydownEvents;
|
275 | }
|
276 | }
|
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 | const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken('mat-bottom-sheet-default-options');
|
287 |
|
288 |
|
289 |
|
290 | class MatBottomSheet {
|
291 | constructor(_overlay, injector, _parentBottomSheet, _defaultOptions) {
|
292 | this._overlay = _overlay;
|
293 | this._parentBottomSheet = _parentBottomSheet;
|
294 | this._defaultOptions = _defaultOptions;
|
295 | this._bottomSheetRefAtThisLevel = null;
|
296 | this._dialog = injector.get(Dialog);
|
297 | }
|
298 |
|
299 | get _openedBottomSheetRef() {
|
300 | const parent = this._parentBottomSheet;
|
301 | return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel;
|
302 | }
|
303 | set _openedBottomSheetRef(value) {
|
304 | if (this._parentBottomSheet) {
|
305 | this._parentBottomSheet._openedBottomSheetRef = value;
|
306 | }
|
307 | else {
|
308 | this._bottomSheetRefAtThisLevel = value;
|
309 | }
|
310 | }
|
311 | open(componentOrTemplateRef, config) {
|
312 | const _config = Object.assign(Object.assign({}, (this._defaultOptions || new MatBottomSheetConfig())), config);
|
313 | let ref;
|
314 | this._dialog.open(componentOrTemplateRef, Object.assign(Object.assign({}, _config), {
|
315 |
|
316 | disableClose: true, maxWidth: '100%', container: MatBottomSheetContainer, scrollStrategy: _config.scrollStrategy || this._overlay.scrollStrategies.block(), positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0'), templateContext: () => ({ bottomSheetRef: ref }), providers: (cdkRef, _cdkConfig, container) => {
|
317 | ref = new MatBottomSheetRef(cdkRef, _config, container);
|
318 | return [
|
319 | { provide: MatBottomSheetRef, useValue: ref },
|
320 | { provide: MAT_BOTTOM_SHEET_DATA, useValue: _config.data },
|
321 | ];
|
322 | } }));
|
323 |
|
324 | ref.afterDismissed().subscribe(() => {
|
325 |
|
326 | if (this._openedBottomSheetRef === ref) {
|
327 | this._openedBottomSheetRef = null;
|
328 | }
|
329 | });
|
330 | if (this._openedBottomSheetRef) {
|
331 |
|
332 |
|
333 | this._openedBottomSheetRef.afterDismissed().subscribe(() => { var _a; return (_a = ref.containerInstance) === null || _a === void 0 ? void 0 : _a.enter(); });
|
334 | this._openedBottomSheetRef.dismiss();
|
335 | }
|
336 | else {
|
337 |
|
338 | ref.containerInstance.enter();
|
339 | }
|
340 | this._openedBottomSheetRef = ref;
|
341 | return ref;
|
342 | }
|
343 | |
344 |
|
345 |
|
346 |
|
347 | dismiss(result) {
|
348 | if (this._openedBottomSheetRef) {
|
349 | this._openedBottomSheetRef.dismiss(result);
|
350 | }
|
351 | }
|
352 | ngOnDestroy() {
|
353 | if (this._bottomSheetRefAtThisLevel) {
|
354 | this._bottomSheetRefAtThisLevel.dismiss();
|
355 | }
|
356 | }
|
357 | }
|
358 | MatBottomSheet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheet, deps: [{ token: i3.Overlay }, { token: i0.Injector }, { token: MatBottomSheet, optional: true, skipSelf: true }, { token: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
359 | MatBottomSheet.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheet, providedIn: MatBottomSheetModule });
|
360 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheet, decorators: [{
|
361 | type: Injectable,
|
362 | args: [{ providedIn: MatBottomSheetModule }]
|
363 | }], ctorParameters: function () {
|
364 | return [{ type: i3.Overlay }, { type: i0.Injector }, { type: MatBottomSheet, decorators: [{
|
365 | type: Optional
|
366 | }, {
|
367 | type: SkipSelf
|
368 | }] }, { type: MatBottomSheetConfig, decorators: [{
|
369 | type: Optional
|
370 | }, {
|
371 | type: Inject,
|
372 | args: [MAT_BOTTOM_SHEET_DEFAULT_OPTIONS]
|
373 | }] }];
|
374 | } });
|
375 |
|
376 |
|
377 |
|
378 |
|
379 |
|
380 |
|
381 |
|
382 |
|
383 |
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 |
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 |
|
396 | export { MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet, MatBottomSheetConfig, MatBottomSheetContainer, MatBottomSheetModule, MatBottomSheetRef, matBottomSheetAnimations };
|
397 |
|