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 i1 from '@angular/cdk/a11y';
|
9 | import * as i4 from '@angular/cdk/layout';
|
10 | import { Breakpoints } from '@angular/cdk/layout';
|
11 | import * as i3 from '@angular/cdk/overlay';
|
12 | import { DOCUMENT } from '@angular/common';
|
13 | import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
|
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 () { return [{ type: i0.ElementRef }, { type: i1.FocusTrapFactory }, { type: undefined, decorators: [{
|
110 | type: Optional
|
111 | }, {
|
112 | type: Inject,
|
113 | args: [DOCUMENT]
|
114 | }] }, { type: i2.DialogConfig }, { type: i1.InteractivityChecker }, { type: i0.NgZone }, { type: i3.OverlayRef }, { type: i4.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }]; } });
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 | class MatBottomSheetModule {
|
124 | }
|
125 | MatBottomSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
126 | 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] });
|
127 | MatBottomSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetModule, imports: [DialogModule, MatCommonModule, PortalModule, MatCommonModule] });
|
128 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheetModule, decorators: [{
|
129 | type: NgModule,
|
130 | args: [{
|
131 | imports: [DialogModule, MatCommonModule, PortalModule],
|
132 | exports: [MatBottomSheetContainer, MatCommonModule],
|
133 | declarations: [MatBottomSheetContainer],
|
134 | }]
|
135 | }] });
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 | const MAT_BOTTOM_SHEET_DATA = new InjectionToken('MatBottomSheetData');
|
146 |
|
147 |
|
148 |
|
149 | class MatBottomSheetConfig {
|
150 | constructor() {
|
151 |
|
152 | this.data = null;
|
153 |
|
154 | this.hasBackdrop = true;
|
155 |
|
156 | this.disableClose = false;
|
157 |
|
158 | this.ariaLabel = null;
|
159 | |
160 |
|
161 |
|
162 |
|
163 |
|
164 | this.closeOnNavigation = true;
|
165 |
|
166 |
|
167 |
|
168 | |
169 |
|
170 |
|
171 |
|
172 |
|
173 | this.autoFocus = 'dialog';
|
174 | |
175 |
|
176 |
|
177 |
|
178 | this.restoreFocus = true;
|
179 | }
|
180 | }
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 | class MatBottomSheetRef {
|
193 | constructor(_ref, config, containerInstance) {
|
194 | this._ref = _ref;
|
195 |
|
196 | this._afterOpened = new Subject();
|
197 | this.containerInstance = containerInstance;
|
198 | this.disableClose = config.disableClose;
|
199 |
|
200 | containerInstance._animationStateChanged
|
201 | .pipe(filter(event => event.phaseName === 'done' && event.toState === 'visible'), take(1))
|
202 | .subscribe(() => {
|
203 | this._afterOpened.next();
|
204 | this._afterOpened.complete();
|
205 | });
|
206 |
|
207 | containerInstance._animationStateChanged
|
208 | .pipe(filter(event => event.phaseName === 'done' && event.toState === 'hidden'), take(1))
|
209 | .subscribe(() => {
|
210 | clearTimeout(this._closeFallbackTimeout);
|
211 | this._ref.close(this._result);
|
212 | });
|
213 | _ref.overlayRef.detachments().subscribe(() => {
|
214 | this._ref.close(this._result);
|
215 | });
|
216 | merge(this.backdropClick(), this.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE))).subscribe(event => {
|
217 | if (!this.disableClose &&
|
218 | (event.type !== 'keydown' || !hasModifierKey(event))) {
|
219 | event.preventDefault();
|
220 | this.dismiss();
|
221 | }
|
222 | });
|
223 | }
|
224 |
|
225 | get instance() {
|
226 | return this._ref.componentInstance;
|
227 | }
|
228 | |
229 |
|
230 |
|
231 |
|
232 | dismiss(result) {
|
233 | if (!this.containerInstance) {
|
234 | return;
|
235 | }
|
236 |
|
237 | this.containerInstance._animationStateChanged
|
238 | .pipe(filter(event => event.phaseName === 'start'), take(1))
|
239 | .subscribe(event => {
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 | this._closeFallbackTimeout = setTimeout(() => {
|
246 | this._ref.close(this._result);
|
247 | }, event.totalTime + 100);
|
248 | this._ref.overlayRef.detachBackdrop();
|
249 | });
|
250 | this._result = result;
|
251 | this.containerInstance.exit();
|
252 | this.containerInstance = null;
|
253 | }
|
254 |
|
255 | afterDismissed() {
|
256 | return this._ref.closed;
|
257 | }
|
258 |
|
259 | afterOpened() {
|
260 | return this._afterOpened;
|
261 | }
|
262 | |
263 |
|
264 |
|
265 | backdropClick() {
|
266 | return this._ref.backdropClick;
|
267 | }
|
268 | |
269 |
|
270 |
|
271 | keydownEvents() {
|
272 | return this._ref.keydownEvents;
|
273 | }
|
274 | }
|
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 |
|
283 |
|
284 | const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken('mat-bottom-sheet-default-options');
|
285 |
|
286 |
|
287 |
|
288 | class MatBottomSheet {
|
289 | constructor(_overlay, injector, _parentBottomSheet, _defaultOptions) {
|
290 | this._overlay = _overlay;
|
291 | this._parentBottomSheet = _parentBottomSheet;
|
292 | this._defaultOptions = _defaultOptions;
|
293 | this._bottomSheetRefAtThisLevel = null;
|
294 | this._dialog = injector.get(Dialog);
|
295 | }
|
296 |
|
297 | get _openedBottomSheetRef() {
|
298 | const parent = this._parentBottomSheet;
|
299 | return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel;
|
300 | }
|
301 | set _openedBottomSheetRef(value) {
|
302 | if (this._parentBottomSheet) {
|
303 | this._parentBottomSheet._openedBottomSheetRef = value;
|
304 | }
|
305 | else {
|
306 | this._bottomSheetRefAtThisLevel = value;
|
307 | }
|
308 | }
|
309 | open(componentOrTemplateRef, config) {
|
310 | const _config = { ...(this._defaultOptions || new MatBottomSheetConfig()), ...config };
|
311 | let ref;
|
312 | this._dialog.open(componentOrTemplateRef, {
|
313 | ..._config,
|
314 |
|
315 | disableClose: true,
|
316 | maxWidth: '100%',
|
317 | container: MatBottomSheetContainer,
|
318 | scrollStrategy: _config.scrollStrategy || this._overlay.scrollStrategies.block(),
|
319 | positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0'),
|
320 | templateContext: () => ({ bottomSheetRef: ref }),
|
321 | providers: (cdkRef, _cdkConfig, container) => {
|
322 | ref = new MatBottomSheetRef(cdkRef, _config, container);
|
323 | return [
|
324 | { provide: MatBottomSheetRef, useValue: ref },
|
325 | { provide: MAT_BOTTOM_SHEET_DATA, useValue: _config.data },
|
326 | ];
|
327 | },
|
328 | });
|
329 |
|
330 | ref.afterDismissed().subscribe(() => {
|
331 |
|
332 | if (this._openedBottomSheetRef === ref) {
|
333 | this._openedBottomSheetRef = null;
|
334 | }
|
335 | });
|
336 | if (this._openedBottomSheetRef) {
|
337 |
|
338 |
|
339 | this._openedBottomSheetRef.afterDismissed().subscribe(() => ref.containerInstance?.enter());
|
340 | this._openedBottomSheetRef.dismiss();
|
341 | }
|
342 | else {
|
343 |
|
344 | ref.containerInstance.enter();
|
345 | }
|
346 | this._openedBottomSheetRef = ref;
|
347 | return ref;
|
348 | }
|
349 | |
350 |
|
351 |
|
352 |
|
353 | dismiss(result) {
|
354 | if (this._openedBottomSheetRef) {
|
355 | this._openedBottomSheetRef.dismiss(result);
|
356 | }
|
357 | }
|
358 | ngOnDestroy() {
|
359 | if (this._bottomSheetRefAtThisLevel) {
|
360 | this._bottomSheetRefAtThisLevel.dismiss();
|
361 | }
|
362 | }
|
363 | }
|
364 | 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 });
|
365 | MatBottomSheet.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheet, providedIn: MatBottomSheetModule });
|
366 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBottomSheet, decorators: [{
|
367 | type: Injectable,
|
368 | args: [{ providedIn: MatBottomSheetModule }]
|
369 | }], ctorParameters: function () { return [{ type: i3.Overlay }, { type: i0.Injector }, { type: MatBottomSheet, decorators: [{
|
370 | type: Optional
|
371 | }, {
|
372 | type: SkipSelf
|
373 | }] }, { type: MatBottomSheetConfig, decorators: [{
|
374 | type: Optional
|
375 | }, {
|
376 | type: Inject,
|
377 | args: [MAT_BOTTOM_SHEET_DEFAULT_OPTIONS]
|
378 | }] }]; } });
|
379 |
|
380 |
|
381 |
|
382 |
|
383 |
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 |
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 |
|
396 |
|
397 |
|
398 |
|
399 |
|
400 | export { MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet, MatBottomSheetConfig, MatBottomSheetContainer, MatBottomSheetModule, MatBottomSheetRef, matBottomSheetAnimations };
|
401 |
|