@covalent/core 3.1.2 → 4.0.0-beta.2

package/fesm2015/covalent-core-side-sheet.mjs

@@ -0,0 +1,733 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Directive, Optional, Inject, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Injector, TemplateRef, InjectFlags, Injectable, SkipSelf, Input, NgModule } from '@angular/core';
+import * as i3 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import { AnimationDurations, AnimationCurves, MatCommonModule } from '@angular/material/core';
+import { MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { DOCUMENT } from '@angular/common';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1 from '@angular/cdk/a11y';
+import { Subject, of } from 'rxjs';
+import { filter, take } from 'rxjs/operators';
+import { Directionality } from '@angular/cdk/bidi';
+
+const tdSideSheetAnimations = {
+    /** Animation that is applied on the side-sheet container by default. */
+    sideSheetContainer: trigger('sideSheetContainer', [
+        state('void, exit', style({ transform: 'translateX(100%)' })),
+        state('enter', style({ transform: 'translateX(0%)', opacity: 1 })),
+        transition('* => enter', animate(`${AnimationDurations.ENTERING} ${AnimationCurves.ACCELERATION_CURVE}`, style({ transform: 'translateX(0)', opacity: 1 }))),
+        transition('* => void, * => exit', animate(`${AnimationDurations.EXITING} ${AnimationCurves.ACCELERATION_CURVE}`, style({ transform: 'translateX(100%)' }))),
+    ]),
+};
+
+class CovalentSideSheetConfig extends MatDialogConfig {
+}
+
+function CovalentSideSheetContainer_ng_template_0_Template(rf, ctx) { }
+function _getFocusedElementPierceShadowDom() {
+    let activeElement = typeof document !== 'undefined' && document ? document.activeElement : null;
+    while (activeElement && activeElement.shadowRoot) {
+        const newActiveElement = activeElement.shadowRoot.activeElement;
+        if (newActiveElement === activeElement) {
+            break;
+        }
+        else {
+            activeElement = newActiveElement;
+        }
+    }
+    return activeElement;
+}
+/**
+ * Base class for the `CovalentSideSheetContainer`. The base class does not implement
+ * animations as these are left to implementers of the side-sheet container.
+ */
+class _CovalentSideSheetContainerBase extends BasePortalOutlet {
+    constructor(_elementRef, _focusTrapFactory, _changeDetectorRef, _document, 
+    /** The side-sheet configuration. */
+    _config, _focusMonitor) {
+        super();
+        this._elementRef = _elementRef;
+        this._focusTrapFactory = _focusTrapFactory;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._config = _config;
+        this._focusMonitor = _focusMonitor;
+        /** Emits when an animation state changes. */
+        this._animationStateChanged = new EventEmitter();
+        /** Element that was focused before the side-sheet was opened. Save this to restore upon close. */
+        this._elementFocusedBeforeSideSheetWasOpened = null;
+        /**
+         * Type of interaction that led to the side-sheet being closed. This is used to determine
+         * whether the focus style will be applied when returning focus to its original location
+         * after the side-sheet is closed.
+         */
+        this._closeInteractionType = null;
+        /**
+         * Attaches a DOM portal to the side-sheet container.
+         * @param portal Portal to be attached.
+         * @deprecated To be turned into a method.
+         */
+        this.attachDomPortal = (portal) => {
+            return this._portalOutlet.attachDomPortal(portal);
+        };
+        this._ariaLabelledBy = _config.ariaLabelledBy || null;
+        this._document = _document;
+    }
+    /** Initializes the side-sheet container with the attached content. */
+    _initializeWithAttachedContent() {
+        this._setupFocusTrap();
+        // Save the previously focused element. This element will be re-focused
+        // when the side-sheet closes.
+        this._capturePreviouslyFocusedElement();
+    }
+    /**
+     * Attach a ComponentPortal as content to this side-sheet container.
+     * @param portal Portal to be attached as the side-sheet content.
+     */
+    attachComponentPortal(portal) {
+        return this._portalOutlet.attachComponentPortal(portal);
+    }
+    /**
+     * Attach a TemplatePortal as content to this side-sheet container.
+     * @param portal Portal to be attached as the side-sheet content.
+     */
+    attachTemplatePortal(portal) {
+        return this._portalOutlet.attachTemplatePortal(portal);
+    }
+    /** Moves focus back into the side-sheet if it was moved out. */
+    _recaptureFocus() {
+        if (!this._containsFocus()) {
+            this._trapFocus();
+        }
+    }
+    /**
+     * Moves the focus inside the focus trap. When autoFocus is not set to 'side-sheet', if focus
+     * cannot be moved then focus will go to the side-sheet container.
+     */
+    _trapFocus() {
+        const element = this._elementRef.nativeElement;
+        if (!this._config.autoFocus) {
+            if (!this._containsFocus()) {
+                element.focus();
+            }
+        }
+        else {
+            this._focusTrap.focusInitialElementWhenReady().then((focusedSuccessfully) => {
+                // If we weren't able to find a focusable element in the side-sheet, then focus the side-sheet
+                // container instead.
+                if (!focusedSuccessfully) {
+                    this._focusSideSheetContainer();
+                }
+            });
+        }
+    }
+    /** Restores focus to the element that was focused before the side-sheet opened. */
+    _restoreFocus() {
+        const previousElement = this._elementFocusedBeforeSideSheetWasOpened;
+        // We need the extra check, because IE can set the `activeElement` to null in some cases.
+        if (this._config.restoreFocus && previousElement && typeof previousElement.focus === 'function') {
+            const activeElement = _getFocusedElementPierceShadowDom();
+            const element = this._elementRef.nativeElement;
+            // Make sure that focus is still inside the side-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)) {
+                if (this._focusMonitor) {
+                    this._focusMonitor.focusVia(previousElement, this._closeInteractionType);
+                    this._closeInteractionType = null;
+                }
+                else {
+                    previousElement.focus();
+                }
+            }
+        }
+        if (this._focusTrap) {
+            this._focusTrap.destroy();
+        }
+    }
+    /** Sets up the focus trap. */
+    _setupFocusTrap() {
+        this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+    }
+    /** Captures the element that was focused before the side-sheet was opened. */
+    _capturePreviouslyFocusedElement() {
+        if (this._document) {
+            this._elementFocusedBeforeSideSheetWasOpened = _getFocusedElementPierceShadowDom();
+        }
+    }
+    /** Focuses the side-sheet container. */
+    _focusSideSheetContainer() {
+        // Note that there is no focus method when rendering on the server.
+        if (this._elementRef.nativeElement.focus) {
+            this._elementRef.nativeElement.focus();
+        }
+    }
+    /** Returns whether focus is inside the side-sheet. */
+    _containsFocus() {
+        const element = this._elementRef.nativeElement;
+        const activeElement = _getFocusedElementPierceShadowDom();
+        return element === activeElement || element.contains(activeElement);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ _CovalentSideSheetContainerBase.ɵfac = function _CovalentSideSheetContainerBase_Factory(t) { return new (t || _CovalentSideSheetContainerBase)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.FocusTrapFactory), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(CovalentSideSheetConfig), i0.ɵɵdirectiveInject(i1.FocusMonitor)); };
+/** @nocollapse */ /** @nocollapse */ _CovalentSideSheetContainerBase.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: _CovalentSideSheetContainerBase, viewQuery: function _CovalentSideSheetContainerBase_Query(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵviewQuery(CdkPortalOutlet, 7);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._portalOutlet = _t.first);
+        }
+    }, features: [i0.ɵɵInheritDefinitionFeature] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(_CovalentSideSheetContainerBase, [{
+            type: Directive
+        }], function () {
+        return [{ type: i0.ElementRef }, { type: i1.FocusTrapFactory }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: CovalentSideSheetConfig }, { type: i1.FocusMonitor }];
+    }, { _portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }] });
+})();
+/**
+ * Internal component that wraps the generated side-sheet content.
+ * This animation below is the only reason for duplicating most of the Material dialog code
+ */
+class CovalentSideSheetContainer extends _CovalentSideSheetContainerBase {
+    constructor() {
+        super(...arguments);
+        /** State of the side-sheet animation. */
+        this._state = 'enter';
+    }
+    /** Callback, invoked whenever an animation on the host completes. */
+    _onAnimationDone({ toState, totalTime }) {
+        if (toState === 'enter') {
+            this._trapFocus();
+            this._animationStateChanged.next({ state: 'opened', totalTime });
+        }
+        else if (toState === 'exit') {
+            this._restoreFocus();
+            this._animationStateChanged.next({ state: 'closed', totalTime });
+        }
+    }
+    /** Callback, invoked when an animation on the host starts. */
+    _onAnimationStart({ toState, totalTime }) {
+        if (toState === 'enter') {
+            this._animationStateChanged.next({ state: 'opening', totalTime });
+        }
+        else if (toState === 'exit' || toState === 'void') {
+            this._animationStateChanged.next({ state: 'closing', totalTime });
+        }
+    }
+    /** Starts the side-sheet exit animation. */
+    _startExitAnimation() {
+        this._state = 'exit';
+        this._changeDetectorRef.markForCheck();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetContainer.ɵfac = /** @pureOrBreakMyCode */ function () { let ɵCovalentSideSheetContainer_BaseFactory; return function CovalentSideSheetContainer_Factory(t) { return (ɵCovalentSideSheetContainer_BaseFactory || (ɵCovalentSideSheetContainer_BaseFactory = i0.ɵɵgetInheritedFactory(CovalentSideSheetContainer)))(t || CovalentSideSheetContainer); }; }();
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetContainer.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: CovalentSideSheetContainer, selectors: [["td-side-sheet-container"]], hostAttrs: ["tabindex", "-1", "aria-modal", "true", 1, "td-side-sheet-container"], hostVars: 6, hostBindings: function CovalentSideSheetContainer_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵsyntheticHostListener("@sideSheetContainer.start", function CovalentSideSheetContainer_animation_sideSheetContainer_start_HostBindingHandler($event) { return ctx._onAnimationStart($event); })("@sideSheetContainer.done", function CovalentSideSheetContainer_animation_sideSheetContainer_done_HostBindingHandler($event) { return ctx._onAnimationDone($event); });
+        }
+        if (rf & 2) {
+            i0.ɵɵhostProperty("id", ctx._id);
+            i0.ɵɵattribute("role", ctx._config.role)("aria-labelledby", ctx._config.ariaLabel ? null : ctx._ariaLabelledBy)("aria-label", ctx._config.ariaLabel)("aria-describedby", ctx._config.ariaDescribedBy || null);
+            i0.ɵɵsyntheticHostProperty("@sideSheetContainer", ctx._state);
+        }
+    }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 0, consts: [["cdkPortalOutlet", ""]], template: function CovalentSideSheetContainer_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵtemplate(0, CovalentSideSheetContainer_ng_template_0_Template, 0, 0, "ng-template", 0);
+        }
+    }, directives: [i3.CdkPortalOutlet], styles: [".td-side-sheet-container{background-color:#fff;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);display:block;padding:24px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.td-side-sheet-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}.td-side-sheet-content{margin:0 -24px;padding:0 24px;overflow:auto;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch}.td-side-sheet-title{margin:-16px 0 20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.td-side-sheet-actions{padding:8px 0;margin:0 -16px -24px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;box-sizing:content-box}.td-side-sheet-actions[align=end]{-ms-flex-pack:end;justify-content:flex-end}.td-side-sheet-actions[align=center]{-ms-flex-pack:center;justify-content:center}.td-side-sheet-actions .mat-button-base+.mat-button-base,.td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .td-side-sheet-actions .mat-button-base+.mat-button-base,[dir=rtl] .td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], encapsulation: 2, data: { animation: [tdSideSheetAnimations.sideSheetContainer] } });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheetContainer, [{
+            type: Component,
+            args: [{ selector: 'td-side-sheet-container', template: `
+    <ng-template cdkPortalOutlet></ng-template>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [tdSideSheetAnimations.sideSheetContainer], host: {
+                        'class': 'td-side-sheet-container',
+                        'tabindex': '-1',
+                        'aria-modal': 'true',
+                        '[id]': '_id',
+                        '[attr.role]': '_config.role',
+                        '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
+                        '[attr.aria-label]': '_config.ariaLabel',
+                        '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
+                        '[@sideSheetContainer]': '_state',
+                        '(@sideSheetContainer.start)': '_onAnimationStart($event)',
+                        '(@sideSheetContainer.done)': '_onAnimationDone($event)',
+                    }, styles: [".td-side-sheet-container{background-color:#fff;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);display:block;padding:24px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.td-side-sheet-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}.td-side-sheet-content{margin:0 -24px;padding:0 24px;overflow:auto;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch}.td-side-sheet-title{margin:-16px 0 20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.td-side-sheet-actions{padding:8px 0;margin:0 -16px -24px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;box-sizing:content-box}.td-side-sheet-actions[align=end]{-ms-flex-pack:end;justify-content:flex-end}.td-side-sheet-actions[align=center]{-ms-flex-pack:center;justify-content:center}.td-side-sheet-actions .mat-button-base+.mat-button-base,.td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .td-side-sheet-actions .mat-button-base+.mat-button-base,[dir=rtl] .td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
+        }], null, null);
+})();
+
+// Counter for unique dialog ids.
+let uniqueId = 0;
+// Create a new side sheet ref to change the id of the ref
+class CovalentSideSheetRef extends MatDialogRef {
+    constructor(overlayRef, _containerInstance, id = `td-side-sheet-${uniqueId++}`) {
+        super(overlayRef, _containerInstance, id);
+        this.overlayRef = overlayRef;
+        this._containerInstance = _containerInstance;
+        this.id = id;
+    }
+}
+function _closeSideSheetVia(ref, interactionType, result) {
+    // Some mock dialog ref instances in tests do not have the `_containerInstance` property.
+    // For those, we keep the behavior as is and do not deal with the interaction type.
+    if (ref._containerInstance !== undefined) {
+        ref._containerInstance._closeInteractionType = interactionType;
+    }
+    return ref.close(result);
+}
+
+/* tslint:disable */
+class _CovalentSideSheetBase {
+    constructor(_overlay, _injector, _defaultOptions, _parentSideSheet, _sideSheetRefConstructor, _sideSheetContainerType, _sideSheetDataToken) {
+        this._overlay = _overlay;
+        this._injector = _injector;
+        this._defaultOptions = _defaultOptions;
+        this._parentSideSheet = _parentSideSheet;
+        this._sideSheetRefConstructor = _sideSheetRefConstructor;
+        this._sideSheetContainerType = _sideSheetContainerType;
+        this._sideSheetDataToken = _sideSheetDataToken;
+        this._openSideSheetsAtThisLevel = [];
+        this._afterAllClosedAtThisLevel = new Subject();
+        this._afterOpenedAtThisLevel = new Subject();
+        this.defaultSidebarConfig = {
+            minWidth: '400px',
+            maxWidth: '100vw',
+        };
+    }
+    /** Keeps track of the currently-open side-sheets. */
+    get openSideSheets() {
+        return this._parentSideSheet ? this._parentSideSheet.openSideSheets : this._openSideSheetsAtThisLevel;
+    }
+    open(componentOrTemplateRef, config) {
+        config = Object.assign(Object.assign(Object.assign({}, (this._defaultOptions || new CovalentSideSheetConfig())), this.defaultSidebarConfig), config);
+        const overlayRef = this._createOverlay(config);
+        const sideSheetContainer = this._attachSideSheetContainer(overlayRef, config);
+        const sideSheetRef = this._attachSideSheetContent(componentOrTemplateRef, sideSheetContainer, overlayRef, config);
+        const prevSideSheetRef = this.openSideSheets.slice(-1)[0];
+        const prevOverlayRef = prevSideSheetRef === null || prevSideSheetRef === void 0 ? void 0 : prevSideSheetRef.overlayRef;
+        // Animate previous side sheet to full width
+        if (prevOverlayRef === null || prevOverlayRef === void 0 ? void 0 : prevOverlayRef.overlayElement) {
+            prevOverlayRef.overlayElement.style.transition = `${AnimationDurations.COMPLEX} ${AnimationCurves.DECELERATION_CURVE}`;
+            prevOverlayRef.overlayElement.style.minWidth = `${window.innerWidth}px`;
+        }
+        // Revert the previous side sheet config & size
+        sideSheetRef._containerInstance._animationStateChanged
+            .pipe(filter((event) => event.state === 'closing' && !!(prevSideSheetRef && prevOverlayRef)), take(1))
+            .subscribe(() => {
+            prevOverlayRef.overlayElement.style.transition = `${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`;
+            prevSideSheetRef.updateSize();
+        });
+        // Add new side sheet to open list
+        this.openSideSheets.push(sideSheetRef);
+        // Remove side sheet ref after closed
+        sideSheetRef
+            .afterClosed()
+            .pipe(take(1))
+            .subscribe(() => this._removeOpenSideSheet(sideSheetRef));
+        // Notify the side-sheet container that the content has been attached.
+        sideSheetContainer._initializeWithAttachedContent();
+        return sideSheetRef;
+    }
+    ngOnDestroy() {
+        // Only close the side-sheets at this level on destroy
+        // since the parent service may still be active.
+        this._closeSideSheets(this._openSideSheetsAtThisLevel);
+        this._afterAllClosedAtThisLevel.complete();
+        this._afterOpenedAtThisLevel.complete();
+        // Clean up any subscriptions to side-sheet that never finished opening.
+        if (this._animationStateSubscriptions) {
+            this._animationStateSubscriptions.unsubscribe();
+        }
+    }
+    /**
+     * Closes all of the currently-open side-sheets.
+     */
+    closeAll() {
+        this._closeSideSheets(this.openSideSheets);
+    }
+    _createOverlay(config) {
+        const overlayConfig = new OverlayConfig({
+            positionStrategy: this._overlay.position().global(),
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            panelClass: config.panelClass,
+            hasBackdrop: config.hasBackdrop,
+            direction: config.direction,
+            minWidth: config.minWidth,
+            minHeight: config.minHeight,
+            maxWidth: config.maxWidth,
+        });
+        const overlayRef = this._overlay.create(overlayConfig);
+        const positionStrategy = overlayRef.getConfig().positionStrategy;
+        positionStrategy.right('0px');
+        return overlayRef;
+    }
+    /**
+     * Attaches a container to a side-sheets's already-created overlay.
+     * @param overlay Reference to the side-sheet's underlying overlay.
+     * @param config The side-sheet configuration.
+     * @returns A promise resolving to a ComponentRef for the attached container.
+     */
+    _attachSideSheetContainer(overlay, config) {
+        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+        const injector = Injector.create({
+            parent: userInjector || this._injector,
+            providers: [{ provide: CovalentSideSheetConfig, useValue: config }],
+        });
+        const containerPortal = new ComponentPortal(this._sideSheetContainerType, config.viewContainerRef, injector, config.componentFactoryResolver);
+        const containerRef = overlay.attach(containerPortal);
+        return containerRef.instance;
+    }
+    /**
+     * Attaches the user-provided component to the already-created side sheet container.
+     * @param componentOrTemplateRef The type of component being loaded into the side-sheet,
+     *     or a TemplateRef to instantiate as the content.
+     * @param dialogContainer Reference to the wrapping side-sheet container.
+     * @param overlayRef Reference to the overlay in which the side-sheet resides.
+     * @param config The side-sheet configuration.
+     * @returns A promise resolving to the CovalentSideSheetRef that should be returned to the user.
+     */
+    _attachSideSheetContent(componentOrTemplateRef, sideSheetContainer, overlayRef, config) {
+        // Create a reference to the side-sheet we're creating in order to give the user a handle
+        // to modify and close it.
+        const sideSheetRef = new this._sideSheetRefConstructor(overlayRef, sideSheetContainer, config.id);
+        if (componentOrTemplateRef instanceof TemplateRef) {
+            sideSheetContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, {
+                $implicit: config.data,
+                sideSheetRef,
+            }));
+        }
+        else {
+            const injector = this._createInjector(config, sideSheetRef, sideSheetContainer);
+            const contentRef = sideSheetContainer.attach(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector));
+            sideSheetRef.componentInstance = contentRef.instance;
+        }
+        sideSheetRef.updateSize(config.width, config.height);
+        return sideSheetRef;
+    }
+    _createInjector(config, sideSheetRef, sideSheetContainer) {
+        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+        // The side-sheet container should be provided as the side-sheet container and the side-sheet's
+        // content are created out of the same `ViewContainerRef` and as such, are siblings
+        // for injector purposes. To allow the hierarchy that is expected, the side-sheet
+        // container is explicitly provided in the injector.
+        const providers = [
+            { provide: this._sideSheetContainerType, useValue: sideSheetContainer },
+            { provide: this._sideSheetDataToken, useValue: config.data },
+            { provide: this._sideSheetRefConstructor, useValue: sideSheetRef },
+        ];
+        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 });
+    }
+    /**
+     * Removes a side sheet from the array of open side sheets.
+     * @param sideSheetRef Side Sheet to be removed.
+     */
+    _removeOpenSideSheet(sideSheetRef) {
+        const index = this.openSideSheets.indexOf(sideSheetRef);
+        if (index > -1) {
+            this.openSideSheets.splice(index, 1);
+        }
+    }
+    /** Closes all of the side-sheet in an array. */
+    _closeSideSheets(sideSheets) {
+        let i = sideSheets.length;
+        while (i--) {
+            sideSheets[i].close();
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ _CovalentSideSheetBase.ɵfac = function _CovalentSideSheetBase_Factory(t) { i0.ɵɵinvalidFactory(); };
+/** @nocollapse */ /** @nocollapse */ _CovalentSideSheetBase.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: _CovalentSideSheetBase });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(_CovalentSideSheetBase, [{
+            type: Directive
+        }], function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }]; }, null);
+})();
+/**
+ * Service to open Covalent Design side-sheet.
+ */
+class CovalentSideSheet extends _CovalentSideSheetBase {
+    constructor(overlay, injector, defaultOptions, parentSideSheet) {
+        super(overlay, injector, defaultOptions, parentSideSheet, CovalentSideSheetRef, CovalentSideSheetContainer, MAT_DIALOG_DATA);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheet.ɵfac = function CovalentSideSheet_Factory(t) { return new (t || CovalentSideSheet)(i0.ɵɵinject(i1$1.Overlay), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8), i0.ɵɵinject(CovalentSideSheet, 12)); };
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheet.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: CovalentSideSheet, factory: CovalentSideSheet.ɵfac });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheet, [{
+            type: Injectable
+        }], function () {
+        return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: CovalentSideSheetConfig, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MAT_DIALOG_DEFAULT_OPTIONS]
+                    }] }, { type: CovalentSideSheet, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    }, null);
+})();
+
+/* tslint:disable */
+/** Counter used to generate unique IDs for dialog elements. */
+let dialogElementUid = 0;
+/**
+ * Button that will close the current dialog.
+ */
+class CovalentSideSheetClose {
+    constructor(dialogRef, _elementRef, _dialog) {
+        this.dialogRef = dialogRef;
+        this._elementRef = _elementRef;
+        this._dialog = _dialog;
+        /** Default to "button" to prevents accidental form submits. */
+        this.type = 'button';
+    }
+    ngOnInit() {
+        if (!this.dialogRef) {
+            // When this directive is included in a dialog via TemplateRef (rather than being
+            // in a Component), the DialogRef isn't available via injection because embedded
+            // views cannot be given a custom injector. Instead, we look up the DialogRef by
+            // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
+            // be resolved at constructor time.
+            this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openSideSheets);
+        }
+    }
+    ngOnChanges(changes) {
+        const proxiedChange = changes['_CovalentSideSheetClose'] || changes['_CovalentSideSheetCloseResult'];
+        if (proxiedChange) {
+            this.dialogResult = proxiedChange.currentValue;
+        }
+    }
+    _onButtonClick(event) {
+        // Determinate the focus origin using the click event, because using the FocusMonitor will
+        // result in incorrect origins. Most of the time, close buttons will be auto focused in the
+        // dialog, and therefore clicking the button won't result in a focus change. This means that
+        // the FocusMonitor won't detect any origin change, and will always output `program`.
+        _closeSideSheetVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetClose.ɵfac = function CovalentSideSheetClose_Factory(t) { return new (t || CovalentSideSheetClose)(i0.ɵɵdirectiveInject(CovalentSideSheetRef, 8), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(CovalentSideSheet)); };
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetClose.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: CovalentSideSheetClose, selectors: [["", "td-side-sheet-close", ""], ["", "CovalentSideSheetClose", ""]], hostVars: 2, hostBindings: function CovalentSideSheetClose_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵlistener("click", function CovalentSideSheetClose_click_HostBindingHandler($event) { return ctx._onButtonClick($event); });
+        }
+        if (rf & 2) {
+            i0.ɵɵattribute("aria-label", ctx.ariaLabel || null)("type", ctx.type);
+        }
+    }, inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["td-side-sheet-close", "dialogResult"], _CovalentSideSheetClose: ["CovalentSideSheetClose", "_CovalentSideSheetClose"] }, exportAs: ["CovalentSideSheetClose"], features: [i0.ɵɵNgOnChangesFeature] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheetClose, [{
+            type: Directive,
+            args: [{
+                    selector: '[td-side-sheet-close], [CovalentSideSheetClose]',
+                    exportAs: 'CovalentSideSheetClose',
+                    host: {
+                        '(click)': '_onButtonClick($event)',
+                        '[attr.aria-label]': 'ariaLabel || null',
+                        '[attr.type]': 'type',
+                    },
+                }]
+        }], function () {
+        return [{ type: CovalentSideSheetRef, decorators: [{
+                        type: Optional
+                    }] }, { type: i0.ElementRef }, { type: CovalentSideSheet }];
+    }, { ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], type: [{
+                type: Input
+            }], dialogResult: [{
+                type: Input,
+                args: ['td-side-sheet-close']
+            }], _CovalentSideSheetClose: [{
+                type: Input,
+                args: ['CovalentSideSheetClose']
+            }] });
+})();
+/**
+ * Title of a side sheet element. Stays fixed to the top of the side sheet when scrolling.
+ */
+class CovalentSideSheetTitle {
+    constructor(
+    // The dialog title directive is always used in combination with a `CovalentSideSheetRef`.
+    // tslint:disable-next-line: lightweight-tokens
+    _dialogRef, _elementRef, _dialog) {
+        this._dialogRef = _dialogRef;
+        this._elementRef = _elementRef;
+        this._dialog = _dialog;
+        /** Unique id for the dialog title. If none is supplied, it will be auto-generated. */
+        this.id = `td-side-sheet-title-${dialogElementUid++}`;
+    }
+    ngOnInit() {
+        if (this._dialogRef) {
+            Promise.resolve().then(() => {
+                const container = this._dialogRef._containerInstance;
+                if (container && !container._ariaLabelledBy) {
+                    container._ariaLabelledBy = this.id;
+                }
+            });
+        }
+        else {
+            this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openSideSheets);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetTitle.ɵfac = function CovalentSideSheetTitle_Factory(t) { return new (t || CovalentSideSheetTitle)(i0.ɵɵdirectiveInject(CovalentSideSheetRef, 8), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(CovalentSideSheet)); };
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetTitle.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: CovalentSideSheetTitle, selectors: [["", "td-side-sheet-title", ""], ["", "CovalentSideSheetTitle", ""]], hostAttrs: [1, "td-side-sheet-title"], hostVars: 1, hostBindings: function CovalentSideSheetTitle_HostBindings(rf, ctx) {
+        if (rf & 2) {
+            i0.ɵɵhostProperty("id", ctx.id);
+        }
+    }, inputs: { id: "id" }, exportAs: ["CovalentSideSheetTitle"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheetTitle, [{
+            type: Directive,
+            args: [{
+                    selector: '[td-side-sheet-title], [CovalentSideSheetTitle]',
+                    exportAs: 'CovalentSideSheetTitle',
+                    host: {
+                        'class': 'td-side-sheet-title',
+                        '[id]': 'id',
+                    },
+                }]
+        }], function () {
+        return [{ type: CovalentSideSheetRef, decorators: [{
+                        type: Optional
+                    }] }, { type: i0.ElementRef }, { type: CovalentSideSheet }];
+    }, { id: [{
+                type: Input
+            }] });
+})();
+/**
+ * Scrollable content container of a dialog.
+ */
+class CovalentSideSheetContent {
+}
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetContent.ɵfac = function CovalentSideSheetContent_Factory(t) { return new (t || CovalentSideSheetContent)(); };
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetContent.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: CovalentSideSheetContent, selectors: [["", "td-side-sheet-content", ""], ["td-side-sheet-content"], ["", "CovalentSideSheetContent", ""]], hostAttrs: [1, "td-side-sheet-content"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheetContent, [{
+            type: Directive,
+            args: [{
+                    selector: `[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]`,
+                    host: { class: 'td-side-sheet-content' },
+                }]
+        }], null, null);
+})();
+/**
+ * Container for the bottom action buttons in a dialog.
+ * Stays fixed to the bottom when scrolling.
+ */
+class CovalentSideSheetActions {
+}
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetActions.ɵfac = function CovalentSideSheetActions_Factory(t) { return new (t || CovalentSideSheetActions)(); };
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetActions.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: CovalentSideSheetActions, selectors: [["", "td-side-sheet-actions", ""], ["td-side-sheet-actions"], ["", "CovalentSideSheetActions", ""]], hostAttrs: [1, "td-side-sheet-actions"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheetActions, [{
+            type: Directive,
+            args: [{
+                    selector: `[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]`,
+                    host: { class: 'td-side-sheet-actions' },
+                }]
+        }], null, null);
+})();
+/**
+ * Container for the wrapper part of the dialog
+ */
+class CovalentSideSheetWrapper {
+}
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetWrapper.ɵfac = function CovalentSideSheetWrapper_Factory(t) { return new (t || CovalentSideSheetWrapper)(); };
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetWrapper.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: CovalentSideSheetWrapper, selectors: [["", "td-side-sheet-wrapper", ""], ["td-side-sheet-wrapper"], ["", "CovalentSideSheetWrapper", ""]], hostAttrs: [1, "td-side-sheet-wrapper"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheetWrapper, [{
+            type: Directive,
+            args: [{
+                    selector: `[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]`,
+                    host: { class: 'td-side-sheet-wrapper' },
+                }]
+        }], null, null);
+})();
+/**
+ * Finds the closest CovalentSideSheetRef to an element by looking at the DOM.
+ * @param element Element relative to which to look for a dialog.
+ * @param openDialogs References to the currently-open dialogs.
+ */
+function getClosestDialog(element, openDialogs) {
+    let parent = element.nativeElement.parentElement;
+    while (parent && !parent.classList.contains('td-side-sheet-container')) {
+        parent = parent.parentElement;
+    }
+    return parent ? openDialogs.find((dialog) => dialog.id === parent.id) : null;
+}
+
+class CovalentSideSheetModule {
+}
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetModule.ɵfac = function CovalentSideSheetModule_Factory(t) { return new (t || CovalentSideSheetModule)(); };
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentSideSheetModule });
+/** @nocollapse */ /** @nocollapse */ CovalentSideSheetModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [CovalentSideSheet], imports: [[PortalModule, MatDialogModule, MatCommonModule]] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheetModule, [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CovalentSideSheetContainer,
+                        CovalentSideSheetActions,
+                        CovalentSideSheetClose,
+                        CovalentSideSheetContent,
+                        CovalentSideSheetTitle,
+                        CovalentSideSheetWrapper,
+                    ],
+                    exports: [
+                        CovalentSideSheetActions,
+                        CovalentSideSheetClose,
+                        CovalentSideSheetContent,
+                        CovalentSideSheetTitle,
+                        CovalentSideSheetWrapper,
+                    ],
+                    imports: [PortalModule, MatDialogModule, MatCommonModule],
+                    providers: [CovalentSideSheet],
+                }]
+        }], null, null);
+})();
+(function () {
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentSideSheetModule, { declarations: [CovalentSideSheetContainer,
+            CovalentSideSheetActions,
+            CovalentSideSheetClose,
+            CovalentSideSheetContent,
+            CovalentSideSheetTitle,
+            CovalentSideSheetWrapper], imports: [PortalModule, MatDialogModule, MatCommonModule], exports: [CovalentSideSheetActions,
+            CovalentSideSheetClose,
+            CovalentSideSheetContent,
+            CovalentSideSheetTitle,
+            CovalentSideSheetWrapper] });
+})();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CovalentSideSheet, CovalentSideSheetActions, CovalentSideSheetClose, CovalentSideSheetConfig, CovalentSideSheetContent, CovalentSideSheetModule, CovalentSideSheetRef, CovalentSideSheetTitle, CovalentSideSheetWrapper, _CovalentSideSheetBase, _closeSideSheetVia };
+//# sourceMappingURL=covalent-core-side-sheet.mjs.map