import * as i1 from '@angular/cdk/overlay'; import { OverlayModule, OverlayConfig, Overlay } from '@angular/cdk/overlay'; import { BasePortalOutlet, CdkPortalOutlet, PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal'; import * as i0 from '@angular/core'; import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Optional, Inject, ViewChild, NgModule, TemplateRef, Injector, InjectFlags, Injectable, SkipSelf } from '@angular/core'; import { AnimationDurations, AnimationCurves, MatCommonModule } from '@angular/material/core'; import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { DOCUMENT } from '@angular/common'; import { FocusTrapFactory } from '@angular/cdk/a11y'; import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform'; import { Directionality } from '@angular/cdk/bidi'; import { Subject, merge, of } from 'rxjs'; import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes'; import { filter, take } from 'rxjs/operators'; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** Injection token that can be used to access the data that was passed in to a bottom sheet. */ const MAT_BOTTOM_SHEET_DATA = new InjectionToken('MatBottomSheetData'); /** * Configuration used when opening a bottom sheet. */ class MatBottomSheetConfig { constructor() { /** Data being injected into the child component. */ this.data = null; /** Whether the bottom sheet has a backdrop. */ this.hasBackdrop = true; /** Whether the user can use escape or clicking outside to close the bottom sheet. */ this.disableClose = false; /** Aria label to assign to the bottom sheet element. */ this.ariaLabel = null; /** * Whether the bottom sheet should close when the user goes backwards/forwards in history. * Note that this usually doesn't include clicking on links (unless the user is using * the `HashLocationStrategy`). */ this.closeOnNavigation = true; // Note that this is disabled by default, because while the a11y recommendations are to focus // the first focusable element, doing so prevents screen readers from reading out the // rest of the bottom sheet content. /** Whether the bottom sheet should focus the first focusable element on open. */ this.autoFocus = false; /** * Whether the bottom sheet should restore focus to the * previously-focused element, after it's closed. */ this.restoreFocus = true; } } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** Animations used by the Material bottom sheet. */ const matBottomSheetAnimations = { /** Animation that shows and hides a bottom sheet. */ bottomSheetState: trigger('state', [ state('void, hidden', style({ transform: 'translateY(100%)' })), state('visible', style({ transform: 'translateY(0%)' })), transition('visible => void, visible => hidden', animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`)), transition('void => visible', animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`)), ]) }; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ // TODO(crisbeto): consolidate some logic between this, MatDialog and MatSnackBar /** * Internal component that wraps user-provided bottom sheet content. * @docs-private */ class MatBottomSheetContainer extends BasePortalOutlet { constructor(_elementRef, _changeDetectorRef, _focusTrapFactory, breakpointObserver, document, /** The bottom sheet configuration. */ bottomSheetConfig) { super(); this._elementRef = _elementRef; this._changeDetectorRef = _changeDetectorRef; this._focusTrapFactory = _focusTrapFactory; this.bottomSheetConfig = bottomSheetConfig; /** The state of the bottom sheet animations. */ this._animationState = 'void'; /** Emits whenever the state of the animation changes. */ this._animationStateChanged = new EventEmitter(); /** Element that was focused before the bottom sheet was opened. */ this._elementFocusedBeforeOpened = null; /** * Attaches a DOM portal to the bottom sheet container. * @deprecated To be turned into a method. * @breaking-change 10.0.0 */ this.attachDomPortal = (portal) => { this._validatePortalAttached(); this._setPanelClass(); this._savePreviouslyFocusedElement(); return this._portalOutlet.attachDomPortal(portal); }; this._document = document; this._breakpointSubscription = breakpointObserver .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge]) .subscribe(() => { this._toggleClass('mat-bottom-sheet-container-medium', breakpointObserver.isMatched(Breakpoints.Medium)); this._toggleClass('mat-bottom-sheet-container-large', breakpointObserver.isMatched(Breakpoints.Large)); this._toggleClass('mat-bottom-sheet-container-xlarge', breakpointObserver.isMatched(Breakpoints.XLarge)); }); } /** Attach a component portal as content to this bottom sheet container. */ attachComponentPortal(portal) { this._validatePortalAttached(); this._setPanelClass(); this._savePreviouslyFocusedElement(); return this._portalOutlet.attachComponentPortal(portal); } /** Attach a template portal as content to this bottom sheet container. */ attachTemplatePortal(portal) { this._validatePortalAttached(); this._setPanelClass(); this._savePreviouslyFocusedElement(); return this._portalOutlet.attachTemplatePortal(portal); } /** Begin animation of bottom sheet entrance into view. */ enter() { if (!this._destroyed) { this._animationState = 'visible'; this._changeDetectorRef.detectChanges(); } } /** Begin animation of the bottom sheet exiting from view. */ exit() { if (!this._destroyed) { this._animationState = 'hidden'; this._changeDetectorRef.markForCheck(); } } ngOnDestroy() { this._breakpointSubscription.unsubscribe(); this._destroyed = true; } _onAnimationDone(event) { if (event.toState === 'hidden') { this._restoreFocus(); } else if (event.toState === 'visible') { this._trapFocus(); } this._animationStateChanged.emit(event); } _onAnimationStart(event) { this._animationStateChanged.emit(event); } _toggleClass(cssClass, add) { const classList = this._elementRef.nativeElement.classList; add ? classList.add(cssClass) : classList.remove(cssClass); } _validatePortalAttached() { if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Attempting to attach bottom sheet content after content is already attached'); } } _setPanelClass() { const element = this._elementRef.nativeElement; const panelClass = this.bottomSheetConfig.panelClass; if (Array.isArray(panelClass)) { // Note that we can't use a spread here, because IE doesn't support multiple arguments. panelClass.forEach(cssClass => element.classList.add(cssClass)); } else if (panelClass) { element.classList.add(panelClass); } } /** Moves the focus inside the focus trap. */ _trapFocus() { const element = this._elementRef.nativeElement; if (!this._focusTrap) { this._focusTrap = this._focusTrapFactory.create(element); } if (this.bottomSheetConfig.autoFocus) { this._focusTrap.focusInitialElementWhenReady(); } else { const activeElement = _getFocusedElementPierceShadowDom(); // Otherwise ensure that focus is on the container. It's possible that a different // component tried to move focus while the open animation was running. See: // https://github.com/angular/components/issues/16215. Note that we only want to do this // if the focus isn't inside the bottom sheet already, because it's possible that the // consumer turned off `autoFocus` in order to move focus themselves. if (activeElement !== element && !element.contains(activeElement)) { element.focus(); } } } /** Restores focus to the element that was focused before the bottom sheet was opened. */ _restoreFocus() { const toFocus = this._elementFocusedBeforeOpened; // We need the extra check, because IE can set the `activeElement` to null in some cases. if (this.bottomSheetConfig.restoreFocus && toFocus && typeof toFocus.focus === 'function') { const activeElement = _getFocusedElementPierceShadowDom(); const element = this._elementRef.nativeElement; // Make sure that focus is still inside the bottom sheet or is on the body (usually because a // non-focusable element like the backdrop was clicked) before moving it. It's possible that // the consumer moved it themselves before the animation was done, in which case we shouldn't // do anything. if (!activeElement || activeElement === this._document.body || activeElement === element || element.contains(activeElement)) { toFocus.focus(); } } if (this._focusTrap) { this._focusTrap.destroy(); } } /** Saves a reference to the element that was focused before the bottom sheet was opened. */ _savePreviouslyFocusedElement() { this._elementFocusedBeforeOpened = _getFocusedElementPierceShadowDom(); // The `focus` method isn't available during server-side rendering. if (this._elementRef.nativeElement.focus) { Promise.resolve().then(() => this._elementRef.nativeElement.focus()); } } } MatBottomSheetContainer.decorators = [ { type: Component, args: [{ selector: 'mat-bottom-sheet-container', template: "\r\n", // In Ivy embedded views will be change detected from their declaration place, rather than where // they were stamped out. This means that we can't have the bottom sheet container be OnPush, // because it might cause the sheets that were opened from a template not to be out of date. // tslint:disable-next-line:validate-decorators changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, animations: [matBottomSheetAnimations.bottomSheetState], host: { 'class': 'mat-bottom-sheet-container', 'tabindex': '-1', 'role': 'dialog', 'aria-modal': 'true', '[attr.aria-label]': 'bottomSheetConfig?.ariaLabel', '[@state]': '_animationState', '(@state.start)': '_onAnimationStart($event)', '(@state.done)': '_onAnimationDone($event)' }, 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"] },] } ]; MatBottomSheetContainer.ctorParameters = () => [ { type: ElementRef }, { type: ChangeDetectorRef }, { type: FocusTrapFactory }, { type: BreakpointObserver }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }, { type: MatBottomSheetConfig } ]; MatBottomSheetContainer.propDecorators = { _portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }] }; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ class MatBottomSheetModule { } MatBottomSheetModule.decorators = [ { type: NgModule, args: [{ imports: [ OverlayModule, MatCommonModule, PortalModule, ], exports: [MatBottomSheetContainer, MatCommonModule], declarations: [MatBottomSheetContainer], entryComponents: [MatBottomSheetContainer], },] } ]; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Reference to a bottom sheet dispatched from the bottom sheet service. */ class MatBottomSheetRef { constructor(containerInstance, _overlayRef) { this._overlayRef = _overlayRef; /** Subject for notifying the user that the bottom sheet has been dismissed. */ this._afterDismissed = new Subject(); /** Subject for notifying the user that the bottom sheet has opened and appeared. */ this._afterOpened = new Subject(); this.containerInstance = containerInstance; this.disableClose = containerInstance.bottomSheetConfig.disableClose; // Emit when opening animation completes containerInstance._animationStateChanged.pipe(filter(event => event.phaseName === 'done' && event.toState === 'visible'), take(1)) .subscribe(() => { this._afterOpened.next(); this._afterOpened.complete(); }); // Dispose overlay when closing animation is complete containerInstance._animationStateChanged .pipe(filter(event => event.phaseName === 'done' && event.toState === 'hidden'), take(1)) .subscribe(() => { clearTimeout(this._closeFallbackTimeout); _overlayRef.dispose(); }); _overlayRef.detachments().pipe(take(1)).subscribe(() => { this._afterDismissed.next(this._result); this._afterDismissed.complete(); }); merge(_overlayRef.backdropClick(), _overlayRef.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE))).subscribe(event => { if (!this.disableClose && (event.type !== 'keydown' || !hasModifierKey(event))) { event.preventDefault(); this.dismiss(); } }); } /** * Dismisses the bottom sheet. * @param result Data to be passed back to the bottom sheet opener. */ dismiss(result) { if (!this._afterDismissed.closed) { // Transition the backdrop in parallel to the bottom sheet. this.containerInstance._animationStateChanged.pipe(filter(event => event.phaseName === 'start'), take(1)).subscribe(event => { // The logic that disposes of the overlay depends on the exit animation completing, however // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback // timeout which will clean everything up if the animation hasn't fired within the specified // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the // vast majority of cases the timeout will have been cleared before it has fired. this._closeFallbackTimeout = setTimeout(() => { this._overlayRef.dispose(); }, event.totalTime + 100); this._overlayRef.detachBackdrop(); }); this._result = result; this.containerInstance.exit(); } } /** Gets an observable that is notified when the bottom sheet is finished closing. */ afterDismissed() { return this._afterDismissed; } /** Gets an observable that is notified when the bottom sheet has opened and appeared. */ afterOpened() { return this._afterOpened; } /** * Gets an observable that emits when the overlay's backdrop has been clicked. */ backdropClick() { return this._overlayRef.backdropClick(); } /** * Gets an observable that emits when keydown events are targeted on the overlay. */ keydownEvents() { return this._overlayRef.keydownEvents(); } } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** Injection token that can be used to specify default bottom sheet options. */ const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken('mat-bottom-sheet-default-options'); /** * Service to trigger Material Design bottom sheets. */ class MatBottomSheet { constructor(_overlay, _injector, _parentBottomSheet, _defaultOptions) { this._overlay = _overlay; this._injector = _injector; this._parentBottomSheet = _parentBottomSheet; this._defaultOptions = _defaultOptions; this._bottomSheetRefAtThisLevel = null; } /** Reference to the currently opened bottom sheet. */ get _openedBottomSheetRef() { const parent = this._parentBottomSheet; return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel; } set _openedBottomSheetRef(value) { if (this._parentBottomSheet) { this._parentBottomSheet._openedBottomSheetRef = value; } else { this._bottomSheetRefAtThisLevel = value; } } open(componentOrTemplateRef, config) { const _config = _applyConfigDefaults(this._defaultOptions || new MatBottomSheetConfig(), config); const overlayRef = this._createOverlay(_config); const container = this._attachContainer(overlayRef, _config); const ref = new MatBottomSheetRef(container, overlayRef); if (componentOrTemplateRef instanceof TemplateRef) { container.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, { $implicit: _config.data, bottomSheetRef: ref })); } else { const portal = new ComponentPortal(componentOrTemplateRef, undefined, this._createInjector(_config, ref)); const contentRef = container.attachComponentPortal(portal); ref.instance = contentRef.instance; } // When the bottom sheet is dismissed, clear the reference to it. ref.afterDismissed().subscribe(() => { // Clear the bottom sheet ref if it hasn't already been replaced by a newer one. if (this._openedBottomSheetRef == ref) { this._openedBottomSheetRef = null; } }); if (this._openedBottomSheetRef) { // If a bottom sheet is already in view, dismiss it and enter the // new bottom sheet after exit animation is complete. this._openedBottomSheetRef.afterDismissed().subscribe(() => ref.containerInstance.enter()); this._openedBottomSheetRef.dismiss(); } else { // If no bottom sheet is in view, enter the new bottom sheet. ref.containerInstance.enter(); } this._openedBottomSheetRef = ref; return ref; } /** * Dismisses the currently-visible bottom sheet. * @param result Data to pass to the bottom sheet instance. */ dismiss(result) { if (this._openedBottomSheetRef) { this._openedBottomSheetRef.dismiss(result); } } ngOnDestroy() { if (this._bottomSheetRefAtThisLevel) { this._bottomSheetRefAtThisLevel.dismiss(); } } /** * Attaches the bottom sheet container component to the overlay. */ _attachContainer(overlayRef, config) { const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; const injector = Injector.create({ parent: userInjector || this._injector, providers: [{ provide: MatBottomSheetConfig, useValue: config }] }); const containerPortal = new ComponentPortal(MatBottomSheetContainer, config.viewContainerRef, injector); const containerRef = overlayRef.attach(containerPortal); return containerRef.instance; } /** * Creates a new overlay and places it in the correct location. * @param config The user-specified bottom sheet config. */ _createOverlay(config) { const overlayConfig = new OverlayConfig({ direction: config.direction, hasBackdrop: config.hasBackdrop, disposeOnNavigation: config.closeOnNavigation, maxWidth: '100%', scrollStrategy: config.scrollStrategy || this._overlay.scrollStrategies.block(), positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0') }); if (config.backdropClass) { overlayConfig.backdropClass = config.backdropClass; } return this._overlay.create(overlayConfig); } /** * Creates an injector to be used inside of a bottom sheet component. * @param config Config that was used to create the bottom sheet. * @param bottomSheetRef Reference to the bottom sheet. */ _createInjector(config, bottomSheetRef) { const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; const providers = [ { provide: MatBottomSheetRef, useValue: bottomSheetRef }, { provide: MAT_BOTTOM_SHEET_DATA, useValue: config.data } ]; if (config.direction && (!userInjector || !userInjector.get(Directionality, null, InjectFlags.Optional))) { providers.push({ provide: Directionality, useValue: { value: config.direction, change: of() } }); } return Injector.create({ parent: userInjector || this._injector, providers }); } } 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 }); MatBottomSheet.decorators = [ { type: Injectable, args: [{ providedIn: MatBottomSheetModule },] } ]; MatBottomSheet.ctorParameters = () => [ { type: Overlay }, { type: Injector }, { type: MatBottomSheet, decorators: [{ type: Optional }, { type: SkipSelf }] }, { type: MatBottomSheetConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_BOTTOM_SHEET_DEFAULT_OPTIONS,] }] } ]; /** * Applies default options to the bottom sheet config. * @param defaults Object containing the default values to which to fall back. * @param config The configuration to which the defaults will be applied. * @returns The new configuration object with defaults applied. */ function _applyConfigDefaults(defaults, config) { return Object.assign(Object.assign({}, defaults), config); } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Generated bundle index. Do not edit. */ export { MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet, MatBottomSheetConfig, MatBottomSheetContainer, MatBottomSheetModule, MatBottomSheetRef, matBottomSheetAnimations }; //# sourceMappingURL=bottom-sheet.js.map