[6a3a178] | 1 | import * as i1 from '@angular/cdk/overlay';
|
---|
| 2 | import { OverlayModule, OverlayConfig, Overlay } from '@angular/cdk/overlay';
|
---|
| 3 | import { BasePortalOutlet, CdkPortalOutlet, PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
---|
| 4 | import * as i0 from '@angular/core';
|
---|
| 5 | import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Optional, Inject, ViewChild, NgModule, TemplateRef, Injector, InjectFlags, Injectable, SkipSelf } from '@angular/core';
|
---|
| 6 | import { AnimationDurations, AnimationCurves, MatCommonModule } from '@angular/material/core';
|
---|
| 7 | import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
|
---|
| 8 | import { trigger, state, style, transition, animate } from '@angular/animations';
|
---|
| 9 | import { DOCUMENT } from '@angular/common';
|
---|
| 10 | import { FocusTrapFactory } from '@angular/cdk/a11y';
|
---|
| 11 | import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
|
---|
| 12 | import { Directionality } from '@angular/cdk/bidi';
|
---|
| 13 | import { Subject, merge, of } from 'rxjs';
|
---|
| 14 | import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
---|
| 15 | import { filter, take } from 'rxjs/operators';
|
---|
| 16 |
|
---|
| 17 | /**
|
---|
| 18 | * @license
|
---|
| 19 | * Copyright Google LLC All Rights Reserved.
|
---|
| 20 | *
|
---|
| 21 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 22 | * found in the LICENSE file at https://angular.io/license
|
---|
| 23 | */
|
---|
| 24 | /** Injection token that can be used to access the data that was passed in to a bottom sheet. */
|
---|
| 25 | const MAT_BOTTOM_SHEET_DATA = new InjectionToken('MatBottomSheetData');
|
---|
| 26 | /**
|
---|
| 27 | * Configuration used when opening a bottom sheet.
|
---|
| 28 | */
|
---|
| 29 | class MatBottomSheetConfig {
|
---|
| 30 | constructor() {
|
---|
| 31 | /** Data being injected into the child component. */
|
---|
| 32 | this.data = null;
|
---|
| 33 | /** Whether the bottom sheet has a backdrop. */
|
---|
| 34 | this.hasBackdrop = true;
|
---|
| 35 | /** Whether the user can use escape or clicking outside to close the bottom sheet. */
|
---|
| 36 | this.disableClose = false;
|
---|
| 37 | /** Aria label to assign to the bottom sheet element. */
|
---|
| 38 | this.ariaLabel = null;
|
---|
| 39 | /**
|
---|
| 40 | * Whether the bottom sheet should close when the user goes backwards/forwards in history.
|
---|
| 41 | * Note that this usually doesn't include clicking on links (unless the user is using
|
---|
| 42 | * the `HashLocationStrategy`).
|
---|
| 43 | */
|
---|
| 44 | this.closeOnNavigation = true;
|
---|
| 45 | // Note that this is disabled by default, because while the a11y recommendations are to focus
|
---|
| 46 | // the first focusable element, doing so prevents screen readers from reading out the
|
---|
| 47 | // rest of the bottom sheet content.
|
---|
| 48 | /** Whether the bottom sheet should focus the first focusable element on open. */
|
---|
| 49 | this.autoFocus = false;
|
---|
| 50 | /**
|
---|
| 51 | * Whether the bottom sheet should restore focus to the
|
---|
| 52 | * previously-focused element, after it's closed.
|
---|
| 53 | */
|
---|
| 54 | this.restoreFocus = true;
|
---|
| 55 | }
|
---|
| 56 | }
|
---|
| 57 |
|
---|
| 58 | /**
|
---|
| 59 | * @license
|
---|
| 60 | * Copyright Google LLC All Rights Reserved.
|
---|
| 61 | *
|
---|
| 62 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 63 | * found in the LICENSE file at https://angular.io/license
|
---|
| 64 | */
|
---|
| 65 | /** Animations used by the Material bottom sheet. */
|
---|
| 66 | const matBottomSheetAnimations = {
|
---|
| 67 | /** Animation that shows and hides a bottom sheet. */
|
---|
| 68 | bottomSheetState: trigger('state', [
|
---|
| 69 | state('void, hidden', style({ transform: 'translateY(100%)' })),
|
---|
| 70 | state('visible', style({ transform: 'translateY(0%)' })),
|
---|
| 71 | transition('visible => void, visible => hidden', animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`)),
|
---|
| 72 | transition('void => visible', animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`)),
|
---|
| 73 | ])
|
---|
| 74 | };
|
---|
| 75 |
|
---|
| 76 | /**
|
---|
| 77 | * @license
|
---|
| 78 | * Copyright Google LLC All Rights Reserved.
|
---|
| 79 | *
|
---|
| 80 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 81 | * found in the LICENSE file at https://angular.io/license
|
---|
| 82 | */
|
---|
| 83 | // TODO(crisbeto): consolidate some logic between this, MatDialog and MatSnackBar
|
---|
| 84 | /**
|
---|
| 85 | * Internal component that wraps user-provided bottom sheet content.
|
---|
| 86 | * @docs-private
|
---|
| 87 | */
|
---|
| 88 | class MatBottomSheetContainer extends BasePortalOutlet {
|
---|
| 89 | constructor(_elementRef, _changeDetectorRef, _focusTrapFactory, breakpointObserver, document,
|
---|
| 90 | /** The bottom sheet configuration. */
|
---|
| 91 | bottomSheetConfig) {
|
---|
| 92 | super();
|
---|
| 93 | this._elementRef = _elementRef;
|
---|
| 94 | this._changeDetectorRef = _changeDetectorRef;
|
---|
| 95 | this._focusTrapFactory = _focusTrapFactory;
|
---|
| 96 | this.bottomSheetConfig = bottomSheetConfig;
|
---|
| 97 | /** The state of the bottom sheet animations. */
|
---|
| 98 | this._animationState = 'void';
|
---|
| 99 | /** Emits whenever the state of the animation changes. */
|
---|
| 100 | this._animationStateChanged = new EventEmitter();
|
---|
| 101 | /** Element that was focused before the bottom sheet was opened. */
|
---|
| 102 | this._elementFocusedBeforeOpened = null;
|
---|
| 103 | /**
|
---|
| 104 | * Attaches a DOM portal to the bottom sheet container.
|
---|
| 105 | * @deprecated To be turned into a method.
|
---|
| 106 | * @breaking-change 10.0.0
|
---|
| 107 | */
|
---|
| 108 | this.attachDomPortal = (portal) => {
|
---|
| 109 | this._validatePortalAttached();
|
---|
| 110 | this._setPanelClass();
|
---|
| 111 | this._savePreviouslyFocusedElement();
|
---|
| 112 | return this._portalOutlet.attachDomPortal(portal);
|
---|
| 113 | };
|
---|
| 114 | this._document = document;
|
---|
| 115 | this._breakpointSubscription = breakpointObserver
|
---|
| 116 | .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
|
---|
| 117 | .subscribe(() => {
|
---|
| 118 | this._toggleClass('mat-bottom-sheet-container-medium', breakpointObserver.isMatched(Breakpoints.Medium));
|
---|
| 119 | this._toggleClass('mat-bottom-sheet-container-large', breakpointObserver.isMatched(Breakpoints.Large));
|
---|
| 120 | this._toggleClass('mat-bottom-sheet-container-xlarge', breakpointObserver.isMatched(Breakpoints.XLarge));
|
---|
| 121 | });
|
---|
| 122 | }
|
---|
| 123 | /** Attach a component portal as content to this bottom sheet container. */
|
---|
| 124 | attachComponentPortal(portal) {
|
---|
| 125 | this._validatePortalAttached();
|
---|
| 126 | this._setPanelClass();
|
---|
| 127 | this._savePreviouslyFocusedElement();
|
---|
| 128 | return this._portalOutlet.attachComponentPortal(portal);
|
---|
| 129 | }
|
---|
| 130 | /** Attach a template portal as content to this bottom sheet container. */
|
---|
| 131 | attachTemplatePortal(portal) {
|
---|
| 132 | this._validatePortalAttached();
|
---|
| 133 | this._setPanelClass();
|
---|
| 134 | this._savePreviouslyFocusedElement();
|
---|
| 135 | return this._portalOutlet.attachTemplatePortal(portal);
|
---|
| 136 | }
|
---|
| 137 | /** Begin animation of bottom sheet entrance into view. */
|
---|
| 138 | enter() {
|
---|
| 139 | if (!this._destroyed) {
|
---|
| 140 | this._animationState = 'visible';
|
---|
| 141 | this._changeDetectorRef.detectChanges();
|
---|
| 142 | }
|
---|
| 143 | }
|
---|
| 144 | /** Begin animation of the bottom sheet exiting from view. */
|
---|
| 145 | exit() {
|
---|
| 146 | if (!this._destroyed) {
|
---|
| 147 | this._animationState = 'hidden';
|
---|
| 148 | this._changeDetectorRef.markForCheck();
|
---|
| 149 | }
|
---|
| 150 | }
|
---|
| 151 | ngOnDestroy() {
|
---|
| 152 | this._breakpointSubscription.unsubscribe();
|
---|
| 153 | this._destroyed = true;
|
---|
| 154 | }
|
---|
| 155 | _onAnimationDone(event) {
|
---|
| 156 | if (event.toState === 'hidden') {
|
---|
| 157 | this._restoreFocus();
|
---|
| 158 | }
|
---|
| 159 | else if (event.toState === 'visible') {
|
---|
| 160 | this._trapFocus();
|
---|
| 161 | }
|
---|
| 162 | this._animationStateChanged.emit(event);
|
---|
| 163 | }
|
---|
| 164 | _onAnimationStart(event) {
|
---|
| 165 | this._animationStateChanged.emit(event);
|
---|
| 166 | }
|
---|
| 167 | _toggleClass(cssClass, add) {
|
---|
| 168 | const classList = this._elementRef.nativeElement.classList;
|
---|
| 169 | add ? classList.add(cssClass) : classList.remove(cssClass);
|
---|
| 170 | }
|
---|
| 171 | _validatePortalAttached() {
|
---|
| 172 | if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
| 173 | throw Error('Attempting to attach bottom sheet content after content is already attached');
|
---|
| 174 | }
|
---|
| 175 | }
|
---|
| 176 | _setPanelClass() {
|
---|
| 177 | const element = this._elementRef.nativeElement;
|
---|
| 178 | const panelClass = this.bottomSheetConfig.panelClass;
|
---|
| 179 | if (Array.isArray(panelClass)) {
|
---|
| 180 | // Note that we can't use a spread here, because IE doesn't support multiple arguments.
|
---|
| 181 | panelClass.forEach(cssClass => element.classList.add(cssClass));
|
---|
| 182 | }
|
---|
| 183 | else if (panelClass) {
|
---|
| 184 | element.classList.add(panelClass);
|
---|
| 185 | }
|
---|
| 186 | }
|
---|
| 187 | /** Moves the focus inside the focus trap. */
|
---|
| 188 | _trapFocus() {
|
---|
| 189 | const element = this._elementRef.nativeElement;
|
---|
| 190 | if (!this._focusTrap) {
|
---|
| 191 | this._focusTrap = this._focusTrapFactory.create(element);
|
---|
| 192 | }
|
---|
| 193 | if (this.bottomSheetConfig.autoFocus) {
|
---|
| 194 | this._focusTrap.focusInitialElementWhenReady();
|
---|
| 195 | }
|
---|
| 196 | else {
|
---|
| 197 | const activeElement = _getFocusedElementPierceShadowDom();
|
---|
| 198 | // Otherwise ensure that focus is on the container. It's possible that a different
|
---|
| 199 | // component tried to move focus while the open animation was running. See:
|
---|
| 200 | // https://github.com/angular/components/issues/16215. Note that we only want to do this
|
---|
| 201 | // if the focus isn't inside the bottom sheet already, because it's possible that the
|
---|
| 202 | // consumer turned off `autoFocus` in order to move focus themselves.
|
---|
| 203 | if (activeElement !== element && !element.contains(activeElement)) {
|
---|
| 204 | element.focus();
|
---|
| 205 | }
|
---|
| 206 | }
|
---|
| 207 | }
|
---|
| 208 | /** Restores focus to the element that was focused before the bottom sheet was opened. */
|
---|
| 209 | _restoreFocus() {
|
---|
| 210 | const toFocus = this._elementFocusedBeforeOpened;
|
---|
| 211 | // We need the extra check, because IE can set the `activeElement` to null in some cases.
|
---|
| 212 | if (this.bottomSheetConfig.restoreFocus && toFocus && typeof toFocus.focus === 'function') {
|
---|
| 213 | const activeElement = _getFocusedElementPierceShadowDom();
|
---|
| 214 | const element = this._elementRef.nativeElement;
|
---|
| 215 | // Make sure that focus is still inside the bottom sheet or is on the body (usually because a
|
---|
| 216 | // non-focusable element like the backdrop was clicked) before moving it. It's possible that
|
---|
| 217 | // the consumer moved it themselves before the animation was done, in which case we shouldn't
|
---|
| 218 | // do anything.
|
---|
| 219 | if (!activeElement || activeElement === this._document.body || activeElement === element ||
|
---|
| 220 | element.contains(activeElement)) {
|
---|
| 221 | toFocus.focus();
|
---|
| 222 | }
|
---|
| 223 | }
|
---|
| 224 | if (this._focusTrap) {
|
---|
| 225 | this._focusTrap.destroy();
|
---|
| 226 | }
|
---|
| 227 | }
|
---|
| 228 | /** Saves a reference to the element that was focused before the bottom sheet was opened. */
|
---|
| 229 | _savePreviouslyFocusedElement() {
|
---|
| 230 | this._elementFocusedBeforeOpened = _getFocusedElementPierceShadowDom();
|
---|
| 231 | // The `focus` method isn't available during server-side rendering.
|
---|
| 232 | if (this._elementRef.nativeElement.focus) {
|
---|
| 233 | Promise.resolve().then(() => this._elementRef.nativeElement.focus());
|
---|
| 234 | }
|
---|
| 235 | }
|
---|
| 236 | }
|
---|
| 237 | MatBottomSheetContainer.decorators = [
|
---|
| 238 | { type: Component, args: [{
|
---|
| 239 | selector: 'mat-bottom-sheet-container',
|
---|
| 240 | template: "<ng-template cdkPortalOutlet></ng-template>\r\n",
|
---|
| 241 | // In Ivy embedded views will be change detected from their declaration place, rather than where
|
---|
| 242 | // they were stamped out. This means that we can't have the bottom sheet container be OnPush,
|
---|
| 243 | // because it might cause the sheets that were opened from a template not to be out of date.
|
---|
| 244 | // tslint:disable-next-line:validate-decorators
|
---|
| 245 | changeDetection: ChangeDetectionStrategy.Default,
|
---|
| 246 | encapsulation: ViewEncapsulation.None,
|
---|
| 247 | animations: [matBottomSheetAnimations.bottomSheetState],
|
---|
| 248 | host: {
|
---|
| 249 | 'class': 'mat-bottom-sheet-container',
|
---|
| 250 | 'tabindex': '-1',
|
---|
| 251 | 'role': 'dialog',
|
---|
| 252 | 'aria-modal': 'true',
|
---|
| 253 | '[attr.aria-label]': 'bottomSheetConfig?.ariaLabel',
|
---|
| 254 | '[@state]': '_animationState',
|
---|
| 255 | '(@state.start)': '_onAnimationStart($event)',
|
---|
| 256 | '(@state.done)': '_onAnimationDone($event)'
|
---|
| 257 | },
|
---|
| 258 | 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)}\n"]
|
---|
| 259 | },] }
|
---|
| 260 | ];
|
---|
| 261 | MatBottomSheetContainer.ctorParameters = () => [
|
---|
| 262 | { type: ElementRef },
|
---|
| 263 | { type: ChangeDetectorRef },
|
---|
| 264 | { type: FocusTrapFactory },
|
---|
| 265 | { type: BreakpointObserver },
|
---|
| 266 | { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
|
---|
| 267 | { type: MatBottomSheetConfig }
|
---|
| 268 | ];
|
---|
| 269 | MatBottomSheetContainer.propDecorators = {
|
---|
| 270 | _portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }]
|
---|
| 271 | };
|
---|
| 272 |
|
---|
| 273 | /**
|
---|
| 274 | * @license
|
---|
| 275 | * Copyright Google LLC All Rights Reserved.
|
---|
| 276 | *
|
---|
| 277 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 278 | * found in the LICENSE file at https://angular.io/license
|
---|
| 279 | */
|
---|
| 280 | class MatBottomSheetModule {
|
---|
| 281 | }
|
---|
| 282 | MatBottomSheetModule.decorators = [
|
---|
| 283 | { type: NgModule, args: [{
|
---|
| 284 | imports: [
|
---|
| 285 | OverlayModule,
|
---|
| 286 | MatCommonModule,
|
---|
| 287 | PortalModule,
|
---|
| 288 | ],
|
---|
| 289 | exports: [MatBottomSheetContainer, MatCommonModule],
|
---|
| 290 | declarations: [MatBottomSheetContainer],
|
---|
| 291 | entryComponents: [MatBottomSheetContainer],
|
---|
| 292 | },] }
|
---|
| 293 | ];
|
---|
| 294 |
|
---|
| 295 | /**
|
---|
| 296 | * @license
|
---|
| 297 | * Copyright Google LLC All Rights Reserved.
|
---|
| 298 | *
|
---|
| 299 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 300 | * found in the LICENSE file at https://angular.io/license
|
---|
| 301 | */
|
---|
| 302 | /**
|
---|
| 303 | * Reference to a bottom sheet dispatched from the bottom sheet service.
|
---|
| 304 | */
|
---|
| 305 | class MatBottomSheetRef {
|
---|
| 306 | constructor(containerInstance, _overlayRef) {
|
---|
| 307 | this._overlayRef = _overlayRef;
|
---|
| 308 | /** Subject for notifying the user that the bottom sheet has been dismissed. */
|
---|
| 309 | this._afterDismissed = new Subject();
|
---|
| 310 | /** Subject for notifying the user that the bottom sheet has opened and appeared. */
|
---|
| 311 | this._afterOpened = new Subject();
|
---|
| 312 | this.containerInstance = containerInstance;
|
---|
| 313 | this.disableClose = containerInstance.bottomSheetConfig.disableClose;
|
---|
| 314 | // Emit when opening animation completes
|
---|
| 315 | containerInstance._animationStateChanged.pipe(filter(event => event.phaseName === 'done' && event.toState === 'visible'), take(1))
|
---|
| 316 | .subscribe(() => {
|
---|
| 317 | this._afterOpened.next();
|
---|
| 318 | this._afterOpened.complete();
|
---|
| 319 | });
|
---|
| 320 | // Dispose overlay when closing animation is complete
|
---|
| 321 | containerInstance._animationStateChanged
|
---|
| 322 | .pipe(filter(event => event.phaseName === 'done' && event.toState === 'hidden'), take(1))
|
---|
| 323 | .subscribe(() => {
|
---|
| 324 | clearTimeout(this._closeFallbackTimeout);
|
---|
| 325 | _overlayRef.dispose();
|
---|
| 326 | });
|
---|
| 327 | _overlayRef.detachments().pipe(take(1)).subscribe(() => {
|
---|
| 328 | this._afterDismissed.next(this._result);
|
---|
| 329 | this._afterDismissed.complete();
|
---|
| 330 | });
|
---|
| 331 | merge(_overlayRef.backdropClick(), _overlayRef.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE))).subscribe(event => {
|
---|
| 332 | if (!this.disableClose &&
|
---|
| 333 | (event.type !== 'keydown' || !hasModifierKey(event))) {
|
---|
| 334 | event.preventDefault();
|
---|
| 335 | this.dismiss();
|
---|
| 336 | }
|
---|
| 337 | });
|
---|
| 338 | }
|
---|
| 339 | /**
|
---|
| 340 | * Dismisses the bottom sheet.
|
---|
| 341 | * @param result Data to be passed back to the bottom sheet opener.
|
---|
| 342 | */
|
---|
| 343 | dismiss(result) {
|
---|
| 344 | if (!this._afterDismissed.closed) {
|
---|
| 345 | // Transition the backdrop in parallel to the bottom sheet.
|
---|
| 346 | this.containerInstance._animationStateChanged.pipe(filter(event => event.phaseName === 'start'), take(1)).subscribe(event => {
|
---|
| 347 | // The logic that disposes of the overlay depends on the exit animation completing, however
|
---|
| 348 | // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
|
---|
| 349 | // timeout which will clean everything up if the animation hasn't fired within the specified
|
---|
| 350 | // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
|
---|
| 351 | // vast majority of cases the timeout will have been cleared before it has fired.
|
---|
| 352 | this._closeFallbackTimeout = setTimeout(() => {
|
---|
| 353 | this._overlayRef.dispose();
|
---|
| 354 | }, event.totalTime + 100);
|
---|
| 355 | this._overlayRef.detachBackdrop();
|
---|
| 356 | });
|
---|
| 357 | this._result = result;
|
---|
| 358 | this.containerInstance.exit();
|
---|
| 359 | }
|
---|
| 360 | }
|
---|
| 361 | /** Gets an observable that is notified when the bottom sheet is finished closing. */
|
---|
| 362 | afterDismissed() {
|
---|
| 363 | return this._afterDismissed;
|
---|
| 364 | }
|
---|
| 365 | /** Gets an observable that is notified when the bottom sheet has opened and appeared. */
|
---|
| 366 | afterOpened() {
|
---|
| 367 | return this._afterOpened;
|
---|
| 368 | }
|
---|
| 369 | /**
|
---|
| 370 | * Gets an observable that emits when the overlay's backdrop has been clicked.
|
---|
| 371 | */
|
---|
| 372 | backdropClick() {
|
---|
| 373 | return this._overlayRef.backdropClick();
|
---|
| 374 | }
|
---|
| 375 | /**
|
---|
| 376 | * Gets an observable that emits when keydown events are targeted on the overlay.
|
---|
| 377 | */
|
---|
| 378 | keydownEvents() {
|
---|
| 379 | return this._overlayRef.keydownEvents();
|
---|
| 380 | }
|
---|
| 381 | }
|
---|
| 382 |
|
---|
| 383 | /**
|
---|
| 384 | * @license
|
---|
| 385 | * Copyright Google LLC All Rights Reserved.
|
---|
| 386 | *
|
---|
| 387 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 388 | * found in the LICENSE file at https://angular.io/license
|
---|
| 389 | */
|
---|
| 390 | /** Injection token that can be used to specify default bottom sheet options. */
|
---|
| 391 | const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken('mat-bottom-sheet-default-options');
|
---|
| 392 | /**
|
---|
| 393 | * Service to trigger Material Design bottom sheets.
|
---|
| 394 | */
|
---|
| 395 | class MatBottomSheet {
|
---|
| 396 | constructor(_overlay, _injector, _parentBottomSheet, _defaultOptions) {
|
---|
| 397 | this._overlay = _overlay;
|
---|
| 398 | this._injector = _injector;
|
---|
| 399 | this._parentBottomSheet = _parentBottomSheet;
|
---|
| 400 | this._defaultOptions = _defaultOptions;
|
---|
| 401 | this._bottomSheetRefAtThisLevel = null;
|
---|
| 402 | }
|
---|
| 403 | /** Reference to the currently opened bottom sheet. */
|
---|
| 404 | get _openedBottomSheetRef() {
|
---|
| 405 | const parent = this._parentBottomSheet;
|
---|
| 406 | return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel;
|
---|
| 407 | }
|
---|
| 408 | set _openedBottomSheetRef(value) {
|
---|
| 409 | if (this._parentBottomSheet) {
|
---|
| 410 | this._parentBottomSheet._openedBottomSheetRef = value;
|
---|
| 411 | }
|
---|
| 412 | else {
|
---|
| 413 | this._bottomSheetRefAtThisLevel = value;
|
---|
| 414 | }
|
---|
| 415 | }
|
---|
| 416 | open(componentOrTemplateRef, config) {
|
---|
| 417 | const _config = _applyConfigDefaults(this._defaultOptions || new MatBottomSheetConfig(), config);
|
---|
| 418 | const overlayRef = this._createOverlay(_config);
|
---|
| 419 | const container = this._attachContainer(overlayRef, _config);
|
---|
| 420 | const ref = new MatBottomSheetRef(container, overlayRef);
|
---|
| 421 | if (componentOrTemplateRef instanceof TemplateRef) {
|
---|
| 422 | container.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, {
|
---|
| 423 | $implicit: _config.data,
|
---|
| 424 | bottomSheetRef: ref
|
---|
| 425 | }));
|
---|
| 426 | }
|
---|
| 427 | else {
|
---|
| 428 | const portal = new ComponentPortal(componentOrTemplateRef, undefined, this._createInjector(_config, ref));
|
---|
| 429 | const contentRef = container.attachComponentPortal(portal);
|
---|
| 430 | ref.instance = contentRef.instance;
|
---|
| 431 | }
|
---|
| 432 | // When the bottom sheet is dismissed, clear the reference to it.
|
---|
| 433 | ref.afterDismissed().subscribe(() => {
|
---|
| 434 | // Clear the bottom sheet ref if it hasn't already been replaced by a newer one.
|
---|
| 435 | if (this._openedBottomSheetRef == ref) {
|
---|
| 436 | this._openedBottomSheetRef = null;
|
---|
| 437 | }
|
---|
| 438 | });
|
---|
| 439 | if (this._openedBottomSheetRef) {
|
---|
| 440 | // If a bottom sheet is already in view, dismiss it and enter the
|
---|
| 441 | // new bottom sheet after exit animation is complete.
|
---|
| 442 | this._openedBottomSheetRef.afterDismissed().subscribe(() => ref.containerInstance.enter());
|
---|
| 443 | this._openedBottomSheetRef.dismiss();
|
---|
| 444 | }
|
---|
| 445 | else {
|
---|
| 446 | // If no bottom sheet is in view, enter the new bottom sheet.
|
---|
| 447 | ref.containerInstance.enter();
|
---|
| 448 | }
|
---|
| 449 | this._openedBottomSheetRef = ref;
|
---|
| 450 | return ref;
|
---|
| 451 | }
|
---|
| 452 | /**
|
---|
| 453 | * Dismisses the currently-visible bottom sheet.
|
---|
| 454 | * @param result Data to pass to the bottom sheet instance.
|
---|
| 455 | */
|
---|
| 456 | dismiss(result) {
|
---|
| 457 | if (this._openedBottomSheetRef) {
|
---|
| 458 | this._openedBottomSheetRef.dismiss(result);
|
---|
| 459 | }
|
---|
| 460 | }
|
---|
| 461 | ngOnDestroy() {
|
---|
| 462 | if (this._bottomSheetRefAtThisLevel) {
|
---|
| 463 | this._bottomSheetRefAtThisLevel.dismiss();
|
---|
| 464 | }
|
---|
| 465 | }
|
---|
| 466 | /**
|
---|
| 467 | * Attaches the bottom sheet container component to the overlay.
|
---|
| 468 | */
|
---|
| 469 | _attachContainer(overlayRef, config) {
|
---|
| 470 | const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
|
---|
| 471 | const injector = Injector.create({
|
---|
| 472 | parent: userInjector || this._injector,
|
---|
| 473 | providers: [{ provide: MatBottomSheetConfig, useValue: config }]
|
---|
| 474 | });
|
---|
| 475 | const containerPortal = new ComponentPortal(MatBottomSheetContainer, config.viewContainerRef, injector);
|
---|
| 476 | const containerRef = overlayRef.attach(containerPortal);
|
---|
| 477 | return containerRef.instance;
|
---|
| 478 | }
|
---|
| 479 | /**
|
---|
| 480 | * Creates a new overlay and places it in the correct location.
|
---|
| 481 | * @param config The user-specified bottom sheet config.
|
---|
| 482 | */
|
---|
| 483 | _createOverlay(config) {
|
---|
| 484 | const overlayConfig = new OverlayConfig({
|
---|
| 485 | direction: config.direction,
|
---|
| 486 | hasBackdrop: config.hasBackdrop,
|
---|
| 487 | disposeOnNavigation: config.closeOnNavigation,
|
---|
| 488 | maxWidth: '100%',
|
---|
| 489 | scrollStrategy: config.scrollStrategy || this._overlay.scrollStrategies.block(),
|
---|
| 490 | positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0')
|
---|
| 491 | });
|
---|
| 492 | if (config.backdropClass) {
|
---|
| 493 | overlayConfig.backdropClass = config.backdropClass;
|
---|
| 494 | }
|
---|
| 495 | return this._overlay.create(overlayConfig);
|
---|
| 496 | }
|
---|
| 497 | /**
|
---|
| 498 | * Creates an injector to be used inside of a bottom sheet component.
|
---|
| 499 | * @param config Config that was used to create the bottom sheet.
|
---|
| 500 | * @param bottomSheetRef Reference to the bottom sheet.
|
---|
| 501 | */
|
---|
| 502 | _createInjector(config, bottomSheetRef) {
|
---|
| 503 | const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
|
---|
| 504 | const providers = [
|
---|
| 505 | { provide: MatBottomSheetRef, useValue: bottomSheetRef },
|
---|
| 506 | { provide: MAT_BOTTOM_SHEET_DATA, useValue: config.data }
|
---|
| 507 | ];
|
---|
| 508 | if (config.direction && (!userInjector ||
|
---|
| 509 | !userInjector.get(Directionality, null, InjectFlags.Optional))) {
|
---|
| 510 | providers.push({
|
---|
| 511 | provide: Directionality,
|
---|
| 512 | useValue: { value: config.direction, change: of() }
|
---|
| 513 | });
|
---|
| 514 | }
|
---|
| 515 | return Injector.create({ parent: userInjector || this._injector, providers });
|
---|
| 516 | }
|
---|
| 517 | }
|
---|
| 518 | MatBottomSheet.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatBottomSheet_Factory() { return new MatBottomSheet(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(MatBottomSheet, 12), i0.ɵɵinject(MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, 8)); }, token: MatBottomSheet, providedIn: MatBottomSheetModule });
|
---|
| 519 | MatBottomSheet.decorators = [
|
---|
| 520 | { type: Injectable, args: [{ providedIn: MatBottomSheetModule },] }
|
---|
| 521 | ];
|
---|
| 522 | MatBottomSheet.ctorParameters = () => [
|
---|
| 523 | { type: Overlay },
|
---|
| 524 | { type: Injector },
|
---|
| 525 | { type: MatBottomSheet, decorators: [{ type: Optional }, { type: SkipSelf }] },
|
---|
| 526 | { type: MatBottomSheetConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_BOTTOM_SHEET_DEFAULT_OPTIONS,] }] }
|
---|
| 527 | ];
|
---|
| 528 | /**
|
---|
| 529 | * Applies default options to the bottom sheet config.
|
---|
| 530 | * @param defaults Object containing the default values to which to fall back.
|
---|
| 531 | * @param config The configuration to which the defaults will be applied.
|
---|
| 532 | * @returns The new configuration object with defaults applied.
|
---|
| 533 | */
|
---|
| 534 | function _applyConfigDefaults(defaults, config) {
|
---|
| 535 | return Object.assign(Object.assign({}, defaults), config);
|
---|
| 536 | }
|
---|
| 537 |
|
---|
| 538 | /**
|
---|
| 539 | * @license
|
---|
| 540 | * Copyright Google LLC All Rights Reserved.
|
---|
| 541 | *
|
---|
| 542 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 543 | * found in the LICENSE file at https://angular.io/license
|
---|
| 544 | */
|
---|
| 545 |
|
---|
| 546 | /**
|
---|
| 547 | * Generated bundle index. Do not edit.
|
---|
| 548 | */
|
---|
| 549 |
|
---|
| 550 | export { MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet, MatBottomSheetConfig, MatBottomSheetContainer, MatBottomSheetModule, MatBottomSheetRef, matBottomSheetAnimations };
|
---|
| 551 | //# sourceMappingURL=bottom-sheet.js.map
|
---|