UNPKG

@angular/material

Version:
716 lines (700 loc) 28.5 kB
/** * @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 */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/keycodes'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/material/core'), require('@angular/cdk/portal'), require('@angular/cdk/layout'), require('@angular/common'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/bidi')) : typeof define === 'function' && define.amd ? define('@angular/material/bottomSheet', ['exports', '@angular/core', '@angular/cdk/keycodes', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/material/core', '@angular/cdk/portal', '@angular/cdk/layout', '@angular/common', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/bidi'], factory) : (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.bottomSheet = {}),global.ng.core,global.ng.cdk.keycodes,global.Rx,global.Rx.operators,global.ng.animations,global.ng.material.core,global.ng.cdk.portal,global.ng.cdk.layout,global.ng.common,global.ng.cdk.a11y,global.ng.cdk.overlay,global.ng.cdk.bidi)); }(this, (function (exports,core,keycodes,rxjs,operators,animations,core$1,portal,layout,common,a11y,overlay,bidi) { 'use strict'; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */ /* global Reflect, Promise */ var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; function __extends(d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } var __assign = Object.assign || function __assign(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * Injection token that can be used to access the data that was passed in to a bottom sheet. */ var /** @type {?} */ MAT_BOTTOM_SHEET_DATA = new core.InjectionToken('MatBottomSheetData'); /** * Configuration used when opening a bottom sheet. * @template D */ var /** * Configuration used when opening a bottom sheet. * @template D */ MatBottomSheetConfig = /** @class */ (function () { function MatBottomSheetConfig() { /** * 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; } return MatBottomSheetConfig; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * Reference to a bottom sheet dispatched from the bottom sheet service. * @template T, R */ var /** * Reference to a bottom sheet dispatched from the bottom sheet service. * @template T, R */ MatBottomSheetRef = /** @class */ (function () { function MatBottomSheetRef(containerInstance, _overlayRef) { var _this = this; this._overlayRef = _overlayRef; /** * Subject for notifying the user that the bottom sheet has been dismissed. */ this._afterDismissed = new rxjs.Subject(); /** * Subject for notifying the user that the bottom sheet has opened and appeared. */ this._afterOpened = new rxjs.Subject(); this.containerInstance = containerInstance; // Emit when opening animation completes containerInstance._animationStateChanged.pipe(operators.filter(function (event) { return event.phaseName === 'done' && event.toState === 'visible'; }), operators.take(1)) .subscribe(function () { _this._afterOpened.next(); _this._afterOpened.complete(); }); // Dispose overlay when closing animation is complete containerInstance._animationStateChanged.pipe(operators.filter(function (event) { return event.phaseName === 'done' && event.toState === 'hidden'; }), operators.take(1)) .subscribe(function () { _this._overlayRef.dispose(); _this._afterDismissed.next(_this._result); _this._afterDismissed.complete(); }); if (!containerInstance.bottomSheetConfig.disableClose) { rxjs.merge(_overlayRef.backdropClick(), _overlayRef._keydownEvents.pipe(operators.filter(function (event) { return event.keyCode === keycodes.ESCAPE; }))).subscribe(function () { return _this.dismiss(); }); } } /** * Dismisses the bottom sheet. * @param result Data to be passed back to the bottom sheet opener. */ /** * Dismisses the bottom sheet. * @param {?=} result Data to be passed back to the bottom sheet opener. * @return {?} */ MatBottomSheetRef.prototype.dismiss = /** * Dismisses the bottom sheet. * @param {?=} result Data to be passed back to the bottom sheet opener. * @return {?} */ function (result) { var _this = this; if (!this._afterDismissed.closed) { // Transition the backdrop in parallel to the bottom sheet. this.containerInstance._animationStateChanged.pipe(operators.filter(function (event) { return event.phaseName === 'start'; }), operators.take(1)).subscribe(function () { return _this._overlayRef.detachBackdrop(); }); this._result = result; this.containerInstance.exit(); } }; /** Gets an observable that is notified when the bottom sheet is finished closing. */ /** * Gets an observable that is notified when the bottom sheet is finished closing. * @return {?} */ MatBottomSheetRef.prototype.afterDismissed = /** * Gets an observable that is notified when the bottom sheet is finished closing. * @return {?} */ function () { return this._afterDismissed.asObservable(); }; /** Gets an observable that is notified when the bottom sheet has opened and appeared. */ /** * Gets an observable that is notified when the bottom sheet has opened and appeared. * @return {?} */ MatBottomSheetRef.prototype.afterOpened = /** * Gets an observable that is notified when the bottom sheet has opened and appeared. * @return {?} */ function () { return this._afterOpened.asObservable(); }; /** * Gets an observable that emits when the overlay's backdrop has been clicked. */ /** * Gets an observable that emits when the overlay's backdrop has been clicked. * @return {?} */ MatBottomSheetRef.prototype.backdropClick = /** * Gets an observable that emits when the overlay's backdrop has been clicked. * @return {?} */ function () { return this._overlayRef.backdropClick(); }; /** * Gets an observable that emits when keydown events are targeted on the overlay. */ /** * Gets an observable that emits when keydown events are targeted on the overlay. * @return {?} */ MatBottomSheetRef.prototype.keydownEvents = /** * Gets an observable that emits when keydown events are targeted on the overlay. * @return {?} */ function () { return this._overlayRef.keydownEvents(); }; return MatBottomSheetRef; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * Animations used by the Material bottom sheet. */ var /** @type {?} */ matBottomSheetAnimations = { /** Animation that shows and hides a bottom sheet. */ bottomSheetState: animations.trigger('state', [ animations.state('void, hidden', animations.style({ transform: 'translateY(100%)' })), animations.state('visible', animations.style({ transform: 'translateY(0%)' })), animations.transition('visible => void, visible => hidden', animations.animate(core$1.AnimationDurations.COMPLEX + " " + core$1.AnimationCurves.ACCELERATION_CURVE)), animations.transition('void => visible', animations.animate(core$1.AnimationDurations.EXITING + " " + core$1.AnimationCurves.DECELERATION_CURVE)), ]) }; /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * Internal component that wraps user-provided bottom sheet content. * \@docs-private */ var MatBottomSheetContainer = /** @class */ (function (_super) { __extends(MatBottomSheetContainer, _super); function MatBottomSheetContainer(_elementRef, _changeDetectorRef, _focusTrapFactory, breakpointObserver, _document) { var _this = _super.call(this) || this; _this._elementRef = _elementRef; _this._changeDetectorRef = _changeDetectorRef; _this._focusTrapFactory = _focusTrapFactory; _this._document = _document; /** * The state of the bottom sheet animations. */ _this._animationState = 'void'; /** * Emits whenever the state of the animation changes. */ _this._animationStateChanged = new core.EventEmitter(); /** * Element that was focused before the bottom sheet was opened. */ _this._elementFocusedBeforeOpened = null; _this._breakpointSubscription = breakpointObserver .observe([layout.Breakpoints.Medium, layout.Breakpoints.Large, layout.Breakpoints.XLarge]) .subscribe(function () { _this._toggleClass('mat-bottom-sheet-container-medium', breakpointObserver.isMatched(layout.Breakpoints.Medium)); _this._toggleClass('mat-bottom-sheet-container-large', breakpointObserver.isMatched(layout.Breakpoints.Large)); _this._toggleClass('mat-bottom-sheet-container-xlarge', breakpointObserver.isMatched(layout.Breakpoints.XLarge)); }); return _this; } /** Attach a component portal as content to this bottom sheet container. */ /** * Attach a component portal as content to this bottom sheet container. * @template T * @param {?} portal * @return {?} */ MatBottomSheetContainer.prototype.attachComponentPortal = /** * Attach a component portal as content to this bottom sheet container. * @template T * @param {?} portal * @return {?} */ function (portal$$1) { this._validatePortalAttached(); this._setPanelClass(); this._savePreviouslyFocusedElement(); return this._portalOutlet.attachComponentPortal(portal$$1); }; /** Attach a template portal as content to this bottom sheet container. */ /** * Attach a template portal as content to this bottom sheet container. * @template C * @param {?} portal * @return {?} */ MatBottomSheetContainer.prototype.attachTemplatePortal = /** * Attach a template portal as content to this bottom sheet container. * @template C * @param {?} portal * @return {?} */ function (portal$$1) { this._validatePortalAttached(); this._setPanelClass(); this._savePreviouslyFocusedElement(); return this._portalOutlet.attachTemplatePortal(portal$$1); }; /** Begin animation of bottom sheet entrance into view. */ /** * Begin animation of bottom sheet entrance into view. * @return {?} */ MatBottomSheetContainer.prototype.enter = /** * Begin animation of bottom sheet entrance into view. * @return {?} */ function () { if (!this._destroyed) { this._animationState = 'visible'; this._changeDetectorRef.detectChanges(); } }; /** Begin animation of the bottom sheet exiting from view. */ /** * Begin animation of the bottom sheet exiting from view. * @return {?} */ MatBottomSheetContainer.prototype.exit = /** * Begin animation of the bottom sheet exiting from view. * @return {?} */ function () { if (!this._destroyed) { this._animationState = 'hidden'; this._changeDetectorRef.markForCheck(); } }; /** * @return {?} */ MatBottomSheetContainer.prototype.ngOnDestroy = /** * @return {?} */ function () { this._breakpointSubscription.unsubscribe(); this._destroyed = true; }; /** * @param {?} event * @return {?} */ MatBottomSheetContainer.prototype._onAnimationDone = /** * @param {?} event * @return {?} */ function (event) { if (event.toState === 'visible') { this._trapFocus(); } else if (event.toState === 'hidden') { this._restoreFocus(); } this._animationStateChanged.emit(event); }; /** * @param {?} event * @return {?} */ MatBottomSheetContainer.prototype._onAnimationStart = /** * @param {?} event * @return {?} */ function (event) { this._animationStateChanged.emit(event); }; /** * @param {?} cssClass * @param {?} add * @return {?} */ MatBottomSheetContainer.prototype._toggleClass = /** * @param {?} cssClass * @param {?} add * @return {?} */ function (cssClass, add) { var /** @type {?} */ classList = this._elementRef.nativeElement.classList; add ? classList.add(cssClass) : classList.remove(cssClass); }; /** * @return {?} */ MatBottomSheetContainer.prototype._validatePortalAttached = /** * @return {?} */ function () { if (this._portalOutlet.hasAttached()) { throw Error('Attempting to attach bottom sheet content after content is already attached'); } }; /** * @return {?} */ MatBottomSheetContainer.prototype._setPanelClass = /** * @return {?} */ function () { var /** @type {?} */ element = this._elementRef.nativeElement; var /** @type {?} */ 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(function (cssClass) { return element.classList.add(cssClass); }); } else if (panelClass) { element.classList.add(panelClass); } }; /** * Moves the focus inside the focus trap. * @return {?} */ MatBottomSheetContainer.prototype._trapFocus = /** * Moves the focus inside the focus trap. * @return {?} */ function () { if (!this._focusTrap) { this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement); } this._focusTrap.focusInitialElementWhenReady(); }; /** * Restores focus to the element that was focused before the bottom sheet opened. * @return {?} */ MatBottomSheetContainer.prototype._restoreFocus = /** * Restores focus to the element that was focused before the bottom sheet opened. * @return {?} */ function () { var /** @type {?} */ toFocus = this._elementFocusedBeforeOpened; // We need the extra check, because IE can set the `activeElement` to null in some cases. if (toFocus && typeof toFocus.focus === 'function') { toFocus.focus(); } if (this._focusTrap) { this._focusTrap.destroy(); } }; /** * Saves a reference to the element that was focused before the bottom sheet was opened. * @return {?} */ MatBottomSheetContainer.prototype._savePreviouslyFocusedElement = /** * Saves a reference to the element that was focused before the bottom sheet was opened. * @return {?} */ function () { var _this = this; this._elementFocusedBeforeOpened = /** @type {?} */ (this._document.activeElement); Promise.resolve().then(function () { return _this._elementRef.nativeElement.focus(); }); }; MatBottomSheetContainer.decorators = [ { type: core.Component, args: [{selector: 'mat-bottom-sheet-container', template: "<ng-template cdkPortalOutlet></ng-template>", styles: [".mat-bottom-sheet-container{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto}@media screen and (-ms-high-contrast:active){.mat-bottom-sheet-container{outline:1px solid}}.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)}"], changeDetection: core.ChangeDetectionStrategy.OnPush, encapsulation: core.ViewEncapsulation.None, animations: [matBottomSheetAnimations.bottomSheetState], host: { 'class': 'mat-bottom-sheet-container', 'tabindex': '-1', 'role': 'dialog', '[attr.aria-label]': 'bottomSheetConfig?.ariaLabel', '[@state]': '_animationState', '(@state.start)': '_onAnimationStart($event)', '(@state.done)': '_onAnimationDone($event)' }, },] }, ]; /** @nocollapse */ MatBottomSheetContainer.ctorParameters = function () { return [ { type: core.ElementRef, }, { type: core.ChangeDetectorRef, }, { type: a11y.FocusTrapFactory, }, { type: layout.BreakpointObserver, }, { type: Document, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] },] }, ]; }; MatBottomSheetContainer.propDecorators = { "_portalOutlet": [{ type: core.ViewChild, args: [portal.CdkPortalOutlet,] },], }; return MatBottomSheetContainer; }(portal.BasePortalOutlet)); /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ /** * Service to trigger Material Design bottom sheets. */ var MatBottomSheet = /** @class */ (function () { function MatBottomSheet(_overlay, _injector, _parentBottomSheet) { this._overlay = _overlay; this._injector = _injector; this._parentBottomSheet = _parentBottomSheet; this._bottomSheetRefAtThisLevel = null; } Object.defineProperty(MatBottomSheet.prototype, "_openedBottomSheetRef", { /** Reference to the currently opened bottom sheet. */ get: /** * Reference to the currently opened bottom sheet. * @return {?} */ function () { var /** @type {?} */ parent = this._parentBottomSheet; return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel; }, set: /** * @param {?} value * @return {?} */ function (value) { if (this._parentBottomSheet) { this._parentBottomSheet._openedBottomSheetRef = value; } else { this._bottomSheetRefAtThisLevel = value; } }, enumerable: true, configurable: true }); /** * @template T, D, R * @param {?} componentOrTemplateRef * @param {?=} config * @return {?} */ MatBottomSheet.prototype.open = /** * @template T, D, R * @param {?} componentOrTemplateRef * @param {?=} config * @return {?} */ function (componentOrTemplateRef, config) { var _this = this; var /** @type {?} */ _config = _applyConfigDefaults(config); var /** @type {?} */ overlayRef = this._createOverlay(_config); var /** @type {?} */ container = this._attachContainer(overlayRef, _config); var /** @type {?} */ ref = new MatBottomSheetRef(container, overlayRef); if (componentOrTemplateRef instanceof core.TemplateRef) { container.attachTemplatePortal(new portal.TemplatePortal(componentOrTemplateRef, /** @type {?} */ ((null)), /** @type {?} */ ({ $implicit: _config.data, bottomSheetRef: ref }))); } else { var /** @type {?} */ portal$$1 = new portal.ComponentPortal(componentOrTemplateRef, undefined, this._createInjector(_config, ref)); var /** @type {?} */ contentRef = container.attachComponentPortal(portal$$1); ref.instance = contentRef.instance; } // When the bottom sheet is dismissed, clear the reference to it. ref.afterDismissed().subscribe(function () { // 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(function () { return 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. */ /** * Dismisses the currently-visible bottom sheet. * @return {?} */ MatBottomSheet.prototype.dismiss = /** * Dismisses the currently-visible bottom sheet. * @return {?} */ function () { if (this._openedBottomSheetRef) { this._openedBottomSheetRef.dismiss(); } }; /** * Attaches the bottom sheet container component to the overlay. * @param {?} overlayRef * @param {?} config * @return {?} */ MatBottomSheet.prototype._attachContainer = /** * Attaches the bottom sheet container component to the overlay. * @param {?} overlayRef * @param {?} config * @return {?} */ function (overlayRef, config) { var /** @type {?} */ containerPortal = new portal.ComponentPortal(MatBottomSheetContainer, config.viewContainerRef); var /** @type {?} */ containerRef = overlayRef.attach(containerPortal); containerRef.instance.bottomSheetConfig = config; return containerRef.instance; }; /** * Creates a new overlay and places it in the correct location. * @param {?} config The user-specified bottom sheet config. * @return {?} */ MatBottomSheet.prototype._createOverlay = /** * Creates a new overlay and places it in the correct location. * @param {?} config The user-specified bottom sheet config. * @return {?} */ function (config) { var /** @type {?} */ overlayConfig = new overlay.OverlayConfig({ direction: config.direction, hasBackdrop: config.hasBackdrop, maxWidth: '100%', 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. * @template T * @param {?} config Config that was used to create the bottom sheet. * @param {?} bottomSheetRef Reference to the bottom sheet. * @return {?} */ MatBottomSheet.prototype._createInjector = /** * Creates an injector to be used inside of a bottom sheet component. * @template T * @param {?} config Config that was used to create the bottom sheet. * @param {?} bottomSheetRef Reference to the bottom sheet. * @return {?} */ function (config, bottomSheetRef) { var /** @type {?} */ userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; var /** @type {?} */ injectionTokens = new WeakMap(); injectionTokens.set(MatBottomSheetRef, bottomSheetRef); injectionTokens.set(MAT_BOTTOM_SHEET_DATA, config.data); if (!userInjector || !userInjector.get(bidi.Directionality, null)) { injectionTokens.set(bidi.Directionality, { value: config.direction, change: rxjs.of() }); } return new portal.PortalInjector(userInjector || this._injector, injectionTokens); }; MatBottomSheet.decorators = [ { type: core.Injectable }, ]; /** @nocollapse */ MatBottomSheet.ctorParameters = function () { return [ { type: overlay.Overlay, }, { type: core.Injector, }, { type: MatBottomSheet, decorators: [{ type: core.Optional }, { type: core.SkipSelf },] }, ]; }; return MatBottomSheet; }()); /** * Applies default options to the bottom sheet config. * @param {?=} config The configuration to which the defaults will be applied. * @return {?} The new configuration object with defaults applied. */ function _applyConfigDefaults(config) { return __assign({}, new MatBottomSheetConfig(), config); } /** * @fileoverview added by tsickle * @suppress {checkTypes} checked by tsc */ var MatBottomSheetModule = /** @class */ (function () { function MatBottomSheetModule() { } MatBottomSheetModule.decorators = [ { type: core.NgModule, args: [{ imports: [ common.CommonModule, overlay.OverlayModule, core$1.MatCommonModule, portal.PortalModule, ], exports: [MatBottomSheetContainer, core$1.MatCommonModule], declarations: [MatBottomSheetContainer], entryComponents: [MatBottomSheetContainer], providers: [MatBottomSheet], },] }, ]; return MatBottomSheetModule; }()); exports.MatBottomSheetModule = MatBottomSheetModule; exports.MatBottomSheet = MatBottomSheet; exports.MAT_BOTTOM_SHEET_DATA = MAT_BOTTOM_SHEET_DATA; exports.MatBottomSheetConfig = MatBottomSheetConfig; exports.MatBottomSheetContainer = MatBottomSheetContainer; exports.matBottomSheetAnimations = matBottomSheetAnimations; exports.MatBottomSheetRef = MatBottomSheetRef; Object.defineProperty(exports, '__esModule', { value: true }); }))); //# sourceMappingURL=material-bottom-sheet.umd.js.map