@angular/material 10.0.0-rc.3 → 10.1.0

package/fesm2015/bottom-sheet.js

@@ -82,189 +82,186 @@ const matBottomSheetAnimations = {
  * Internal component that wraps user-provided bottom sheet content.
  * @docs-private
  */
-let MatBottomSheetContainer = /** @class */ (() => {
-    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) {
+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.attachComponentPortal(portal);
+            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();
         }
-        /** 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 the bottom sheet exiting from view. */
+    exit() {
+        if (!this._destroyed) {
+            this._animationState = 'hidden';
+            this._changeDetectorRef.markForCheck();
         }
-        /** Begin animation of bottom sheet entrance into view. */
-        enter() {
-            if (!this._destroyed) {
-                this._animationState = 'visible';
-                this._changeDetectorRef.detectChanges();
-            }
+    }
+    ngOnDestroy() {
+        this._breakpointSubscription.unsubscribe();
+        this._destroyed = true;
+    }
+    _onAnimationDone(event) {
+        if (event.toState === 'hidden') {
+            this._restoreFocus();
         }
-        /** Begin animation of the bottom sheet exiting from view. */
-        exit() {
-            if (!this._destroyed) {
-                this._animationState = 'hidden';
-                this._changeDetectorRef.markForCheck();
-            }
+        else if (event.toState === 'visible') {
+            this._trapFocus();
         }
-        ngOnDestroy() {
-            this._breakpointSubscription.unsubscribe();
-            this._destroyed = true;
+        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()) {
+            throw Error('Attempting to attach bottom sheet content after content is already attached');
         }
-        _onAnimationDone(event) {
-            if (event.toState === 'hidden') {
-                this._restoreFocus();
-            }
-            else if (event.toState === 'visible') {
-                this._trapFocus();
-            }
-            this._animationStateChanged.emit(event);
+    }
+    _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));
         }
-        _onAnimationStart(event) {
-            this._animationStateChanged.emit(event);
+        else if (panelClass) {
+            element.classList.add(panelClass);
         }
-        _toggleClass(cssClass, add) {
-            const classList = this._elementRef.nativeElement.classList;
-            add ? classList.add(cssClass) : classList.remove(cssClass);
+    }
+    /** Moves the focus inside the focus trap. */
+    _trapFocus() {
+        const element = this._elementRef.nativeElement;
+        if (!this._focusTrap) {
+            this._focusTrap = this._focusTrapFactory.create(element);
         }
-        _validatePortalAttached() {
-            if (this._portalOutlet.hasAttached()) {
-                throw Error('Attempting to attach bottom sheet content after content is already attached');
-            }
+        if (this.bottomSheetConfig.autoFocus) {
+            this._focusTrap.focusInitialElementWhenReady();
         }
-        _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);
+        else {
+            const activeElement = this._document.activeElement;
+            // 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();
             }
         }
-        /** Moves the focus inside the focus trap. */
-        _trapFocus() {
+    }
+    /** 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 = this._document.activeElement;
             const element = this._elementRef.nativeElement;
-            if (!this._focusTrap) {
-                this._focusTrap = this._focusTrapFactory.create(element);
-            }
-            if (this.bottomSheetConfig.autoFocus) {
-                this._focusTrap.focusInitialElementWhenReady();
-            }
-            else {
-                const activeElement = this._document.activeElement;
-                // 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();
-                }
+            // 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();
             }
         }
-        /** 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 = this._document.activeElement;
-                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();
-            }
+        if (this._focusTrap) {
+            this._focusTrap.destroy();
         }
-        /** Saves a reference to the element that was focused before the bottom sheet was opened. */
-        _savePreviouslyFocusedElement() {
-            this._elementFocusedBeforeOpened = this._document.activeElement;
-            // The `focus` method isn't available during server-side rendering.
-            if (this._elementRef.nativeElement.focus) {
-                Promise.resolve().then(() => this._elementRef.nativeElement.focus());
-            }
+    }
+    /** Saves a reference to the element that was focused before the bottom sheet was opened. */
+    _savePreviouslyFocusedElement() {
+        this._elementFocusedBeforeOpened = this._document.activeElement;
+        // 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: "<ng-template cdkPortalOutlet></ng-template>\r\n",
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    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 },] }]
-    };
-    return MatBottomSheetContainer;
-})();
+}
+MatBottomSheetContainer.decorators = [
+    { type: Component, args: [{
+                selector: 'mat-bottom-sheet-container',
+                template: "<ng-template cdkPortalOutlet></ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                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
@@ -273,23 +270,20 @@ let MatBottomSheetContainer = /** @class */ (() => {
  * 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
  */
-let MatBottomSheetModule = /** @class */ (() => {
-    class MatBottomSheetModule {
-    }
-    MatBottomSheetModule.decorators = [
-        { type: NgModule, args: [{
-                    imports: [
-                        OverlayModule,
-                        MatCommonModule,
-                        PortalModule,
-                    ],
-                    exports: [MatBottomSheetContainer, MatCommonModule],
-                    declarations: [MatBottomSheetContainer],
-                    entryComponents: [MatBottomSheetContainer],
-                },] }
-    ];
-    return MatBottomSheetModule;
-})();
+class MatBottomSheetModule {
+}
+MatBottomSheetModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    OverlayModule,
+                    MatCommonModule,
+                    PortalModule,
+                ],
+                exports: [MatBottomSheetContainer, MatCommonModule],
+                declarations: [MatBottomSheetContainer],
+                entryComponents: [MatBottomSheetContainer],
+            },] }
+];
 
 /**
  * @license
@@ -393,143 +387,140 @@ const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken('mat-bottom-sheet-de
 /**
  * Service to trigger Material Design bottom sheets.
  */
-let MatBottomSheet = /** @class */ (() => {
-    class MatBottomSheet {
-        constructor(_overlay, _injector, _parentBottomSheet, _location, _defaultOptions) {
-            this._overlay = _overlay;
-            this._injector = _injector;
-            this._parentBottomSheet = _parentBottomSheet;
-            this._location = _location;
-            this._defaultOptions = _defaultOptions;
-            this._bottomSheetRefAtThisLevel = null;
+class MatBottomSheet {
+    constructor(_overlay, _injector, _parentBottomSheet, _location, _defaultOptions) {
+        this._overlay = _overlay;
+        this._injector = _injector;
+        this._parentBottomSheet = _parentBottomSheet;
+        this._location = _location;
+        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;
         }
-        /** Reference to the currently opened bottom sheet. */
-        get _openedBottomSheetRef() {
-            const parent = this._parentBottomSheet;
-            return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel;
+        else {
+            this._bottomSheetRefAtThisLevel = value;
         }
-        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, this._location);
+        if (componentOrTemplateRef instanceof TemplateRef) {
+            container.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, {
+                $implicit: _config.data,
+                bottomSheetRef: ref
+            }));
         }
-        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, this._location);
-            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;
+        else {
+            const portal = new ComponentPortal(componentOrTemplateRef, undefined, this._createInjector(_config, ref));
+            const contentRef = container.attachComponentPortal(portal);
+            ref.instance = contentRef.instance;
         }
-        /**
-         * 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);
+        // 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();
         }
-        ngOnDestroy() {
-            if (this._bottomSheetRefAtThisLevel) {
-                this._bottomSheetRefAtThisLevel.dismiss();
-            }
+        else {
+            // If no bottom sheet is in view, enter the new bottom sheet.
+            ref.containerInstance.enter();
         }
-        /**
-         * Attaches the bottom sheet container component to the overlay.
-         */
-        _attachContainer(overlayRef, config) {
-            const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
-            const injector = new PortalInjector(userInjector || this._injector, new WeakMap([
-                [MatBottomSheetConfig, config]
-            ]));
-            const containerPortal = new ComponentPortal(MatBottomSheetContainer, config.viewContainerRef, injector);
-            const containerRef = overlayRef.attach(containerPortal);
-            return containerRef.instance;
+        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);
         }
-        /**
-         * 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);
+    }
+    ngOnDestroy() {
+        if (this._bottomSheetRefAtThisLevel) {
+            this._bottomSheetRefAtThisLevel.dismiss();
         }
-        /**
-         * 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 injectionTokens = new WeakMap([
-                [MatBottomSheetRef, bottomSheetRef],
-                [MAT_BOTTOM_SHEET_DATA, config.data]
-            ]);
-            if (config.direction &&
-                (!userInjector || !userInjector.get(Directionality, null))) {
-                injectionTokens.set(Directionality, {
-                    value: config.direction,
-                    change: of()
-                });
-            }
-            return new PortalInjector(userInjector || this._injector, injectionTokens);
+    }
+    /**
+     * Attaches the bottom sheet container component to the overlay.
+     */
+    _attachContainer(overlayRef, config) {
+        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+        const injector = new PortalInjector(userInjector || this._injector, new WeakMap([
+            [MatBottomSheetConfig, 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);
     }
-    MatBottomSheet.ɵprov = ɵɵdefineInjectable({ factory: function MatBottomSheet_Factory() { return new MatBottomSheet(ɵɵinject(Overlay), ɵɵinject(INJECTOR), ɵɵinject(MatBottomSheet, 12), ɵɵinject(Location, 8), ɵɵ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: Location, decorators: [{ type: Optional }] },
-        { type: MatBottomSheetConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_BOTTOM_SHEET_DEFAULT_OPTIONS,] }] }
-    ];
-    return MatBottomSheet;
-})();
+    /**
+     * 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 injectionTokens = new WeakMap([
+            [MatBottomSheetRef, bottomSheetRef],
+            [MAT_BOTTOM_SHEET_DATA, config.data]
+        ]);
+        if (config.direction &&
+            (!userInjector || !userInjector.get(Directionality, null))) {
+            injectionTokens.set(Directionality, {
+                value: config.direction,
+                change: of()
+            });
+        }
+        return new PortalInjector(userInjector || this._injector, injectionTokens);
+    }
+}
+MatBottomSheet.ɵprov = ɵɵdefineInjectable({ factory: function MatBottomSheet_Factory() { return new MatBottomSheet(ɵɵinject(Overlay), ɵɵinject(INJECTOR), ɵɵinject(MatBottomSheet, 12), ɵɵinject(Location, 8), ɵɵ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: Location, decorators: [{ type: Optional }] },
+    { 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.