@covalent/core 3.1.2-beta.6 → 3.1.2-beta.7

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

@@ -0,0 +1,1070 @@
+import { EventEmitter, Directive, ElementRef, ChangeDetectorRef, Optional, Inject, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Injector, TemplateRef, InjectFlags, Type, InjectionToken, Injectable, SkipSelf, Input, NgModule } from '@angular/core';
+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 { OverlayConfig, Overlay } from '@angular/cdk/overlay';
+import { FocusTrapFactory, FocusMonitor } from '@angular/cdk/a11y';
+import { DOCUMENT } from '@angular/common';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { Subject, of } from 'rxjs';
+import { Directionality } from '@angular/cdk/bidi';
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: side-sheet.animation.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+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%)' }))),
+    ]),
+};
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: side-sheet.config.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @template D
+ */
+class CovalentSideSheetConfig extends MatDialogConfig {
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: side-sheet-container.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @return {?}
+ */
+function _getFocusedElementPierceShadowDom() {
+    /** @type {?} */
+    let activeElement = typeof document !== 'undefined' && document ? ((/** @type {?} */ (document.activeElement))) : null;
+    while (activeElement && activeElement.shadowRoot) {
+        /** @type {?} */
+        const newActiveElement = (/** @type {?} */ (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.
+ * @abstract
+ */
+class _CovalentSideSheetContainerBase extends BasePortalOutlet {
+    /**
+     * @param {?} _elementRef
+     * @param {?} _focusTrapFactory
+     * @param {?} _changeDetectorRef
+     * @param {?} _document
+     * @param {?} _config
+     * @param {?=} _focusMonitor
+     */
+    constructor(_elementRef, _focusTrapFactory, _changeDetectorRef, _document, _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 = (/**
+         * @param {?} portal
+         * @return {?}
+         */
+        (portal) => {
+            return this._portalOutlet.attachDomPortal(portal);
+        });
+        this._ariaLabelledBy = _config.ariaLabelledBy || null;
+        this._document = _document;
+    }
+    /**
+     * Initializes the side-sheet container with the attached content.
+     * @return {?}
+     */
+    _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.
+     * @template T
+     * @param {?} portal Portal to be attached as the side-sheet content.
+     * @return {?}
+     */
+    attachComponentPortal(portal) {
+        return this._portalOutlet.attachComponentPortal(portal);
+    }
+    /**
+     * Attach a TemplatePortal as content to this side-sheet container.
+     * @template C
+     * @param {?} portal Portal to be attached as the side-sheet content.
+     * @return {?}
+     */
+    attachTemplatePortal(portal) {
+        return this._portalOutlet.attachTemplatePortal(portal);
+    }
+    /**
+     * Moves focus back into the side-sheet if it was moved out.
+     * @return {?}
+     */
+    _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.
+     * @protected
+     * @return {?}
+     */
+    _trapFocus() {
+        /** @type {?} */
+        const element = this._elementRef.nativeElement;
+        if (!this._config.autoFocus) {
+            if (!this._containsFocus()) {
+                element.focus();
+            }
+        }
+        else {
+            this._focusTrap.focusInitialElementWhenReady().then((/**
+             * @param {?} focusedSuccessfully
+             * @return {?}
+             */
+            (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.
+     * @protected
+     * @return {?}
+     */
+    _restoreFocus() {
+        /** @type {?} */
+        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') {
+            /** @type {?} */
+            const activeElement = _getFocusedElementPierceShadowDom();
+            /** @type {?} */
+            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.
+     * @private
+     * @return {?}
+     */
+    _setupFocusTrap() {
+        this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+    }
+    /**
+     * Captures the element that was focused before the side-sheet was opened.
+     * @private
+     * @return {?}
+     */
+    _capturePreviouslyFocusedElement() {
+        if (this._document) {
+            this._elementFocusedBeforeSideSheetWasOpened = _getFocusedElementPierceShadowDom();
+        }
+    }
+    /**
+     * Focuses the side-sheet container.
+     * @private
+     * @return {?}
+     */
+    _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.
+     * @private
+     * @return {?}
+     */
+    _containsFocus() {
+        /** @type {?} */
+        const element = this._elementRef.nativeElement;
+        /** @type {?} */
+        const activeElement = _getFocusedElementPierceShadowDom();
+        return element === activeElement || element.contains(activeElement);
+    }
+}
+_CovalentSideSheetContainerBase.decorators = [
+    { type: Directive }
+];
+/** @nocollapse */
+_CovalentSideSheetContainerBase.ctorParameters = () => [
+    { type: ElementRef },
+    { type: FocusTrapFactory },
+    { type: ChangeDetectorRef },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
+    { type: CovalentSideSheetConfig },
+    { type: FocusMonitor }
+];
+_CovalentSideSheetContainerBase.propDecorators = {
+    _portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }]
+};
+if (false) {
+    /**
+     * @type {?}
+     * @protected
+     */
+    _CovalentSideSheetContainerBase.prototype._document;
+    /**
+     * The portal outlet inside of this container into which the side-sheet content will be loaded.
+     * @type {?}
+     */
+    _CovalentSideSheetContainerBase.prototype._portalOutlet;
+    /**
+     * The class that traps and manages focus within the side-sheet.
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetContainerBase.prototype._focusTrap;
+    /**
+     * Emits when an animation state changes.
+     * @type {?}
+     */
+    _CovalentSideSheetContainerBase.prototype._animationStateChanged;
+    /**
+     * Element that was focused before the side-sheet was opened. Save this to restore upon close.
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetContainerBase.prototype._elementFocusedBeforeSideSheetWasOpened;
+    /**
+     * 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.
+     * @type {?}
+     */
+    _CovalentSideSheetContainerBase.prototype._closeInteractionType;
+    /**
+     * ID of the element that should be considered as the side-sheet's label.
+     * @type {?}
+     */
+    _CovalentSideSheetContainerBase.prototype._ariaLabelledBy;
+    /**
+     * ID for the container DOM element.
+     * @type {?}
+     */
+    _CovalentSideSheetContainerBase.prototype._id;
+    /**
+     * Attaches a DOM portal to the side-sheet container.
+     * \@param portal Portal to be attached.
+     * @deprecated To be turned into a method.
+     * @type {?}
+     */
+    _CovalentSideSheetContainerBase.prototype.attachDomPortal;
+    /**
+     * @type {?}
+     * @protected
+     */
+    _CovalentSideSheetContainerBase.prototype._elementRef;
+    /**
+     * @type {?}
+     * @protected
+     */
+    _CovalentSideSheetContainerBase.prototype._focusTrapFactory;
+    /**
+     * @type {?}
+     * @protected
+     */
+    _CovalentSideSheetContainerBase.prototype._changeDetectorRef;
+    /**
+     * The side-sheet configuration.
+     * @type {?}
+     */
+    _CovalentSideSheetContainerBase.prototype._config;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetContainerBase.prototype._focusMonitor;
+    /**
+     * Starts the side-sheet exit animation.
+     * @abstract
+     * @return {?}
+     */
+    _CovalentSideSheetContainerBase.prototype._startExitAnimation = function () { };
+}
+/**
+ * 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.
+     * @param {?} __0
+     * @return {?}
+     */
+    _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 });
+        }
+    }
+    /**
+     * Starts the side-sheet exit animation.
+     * @return {?}
+     */
+    _startExitAnimation() {
+        this._state = 'exit';
+        this._changeDetectorRef.markForCheck();
+    }
+}
+CovalentSideSheetContainer.decorators = [
+    { 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.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);box-sizing:border-box;display:block;height:100%;max-height:inherit;min-height:inherit;outline:0;overflow:auto;padding:24px;width:100%}.td-side-sheet-wrapper{-ms-flex-direction:column;display:-ms-flexbox;display:flex;flex-direction:column;height:100%}.td-side-sheet-content{-ms-flex:1;-webkit-overflow-scrolling:touch;flex:1;margin:0 -24px;overflow:auto;padding:0 24px}.td-side-sheet-title{margin:-16px 0 20px}.td-side-sheet-actions,.td-side-sheet-title{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.td-side-sheet-actions{-ms-flex-pack:justify;-ms-flex-wrap:wrap;box-sizing:content-box;flex-wrap:wrap;justify-content:space-between;margin:0 -16px -24px;padding:8px 0}.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}"]
+            }] }
+];
+if (false) {
+    /**
+     * State of the side-sheet animation.
+     * @type {?}
+     */
+    CovalentSideSheetContainer.prototype._state;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: side-sheet-ref.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+// Counter for unique dialog ids.
+/** @type {?} */
+let uniqueId = 0;
+// Create a new side sheet ref to change the id of the ref
+/**
+ * @template T, R
+ */
+class CovalentSideSheetRef extends MatDialogRef {
+    /**
+     * @param {?} overlayRef
+     * @param {?} _containerInstance
+     * @param {?=} id
+     */
+    constructor(overlayRef, _containerInstance, id = `td-side-sheet-${uniqueId++}`) {
+        super(overlayRef, _containerInstance, id);
+        this._containerInstance = _containerInstance;
+        this.id = id;
+    }
+}
+if (false) {
+    /** @type {?} */
+    CovalentSideSheetRef.prototype._containerInstance;
+    /** @type {?} */
+    CovalentSideSheetRef.prototype.id;
+}
+/**
+ * @template R
+ * @param {?} ref
+ * @param {?} interactionType
+ * @param {?=} result
+ * @return {?}
+ */
+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);
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: side-sheet.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @template C
+ */
+class _CovalentSideSheetBase {
+    /**
+     * @param {?} _overlay
+     * @param {?} _injector
+     * @param {?} _defaultOptions
+     * @param {?} _parentSideSheet
+     * @param {?} _sideSheetRefConstructor
+     * @param {?} _sideSheetContainerType
+     * @param {?} _sideSheetDataToken
+     */
+    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',
+        };
+    }
+    /**
+     * Keeps track of the currently-open side-sheets.
+     * @return {?}
+     */
+    get openSideSheets() {
+        return this._parentSideSheet ? this._parentSideSheet.openSideSheets : this._openSideSheetsAtThisLevel;
+    }
+    /**
+     * @template T, D, R
+     * @param {?} componentOrTemplateRef
+     * @param {?=} config
+     * @return {?}
+     */
+    open(componentOrTemplateRef, config) {
+        config = Object.assign(Object.assign(Object.assign({}, this.defaultSidebarConfig), config), (this._defaultOptions || new CovalentSideSheetConfig()));
+        /** @type {?} */
+        const overlayRef = this._createOverlay(config);
+        /** @type {?} */
+        const sideSheetContainer = this._attachSideSheetContainer(overlayRef, config);
+        /** @type {?} */
+        const sideSheetRef = this._attachSideSheetContent(componentOrTemplateRef, sideSheetContainer, overlayRef, config);
+        this.openSideSheets.push(sideSheetRef);
+        // Notify the side-sheet container that the content has been attached.
+        sideSheetContainer._initializeWithAttachedContent();
+        return sideSheetRef;
+    }
+    /**
+     * @return {?}
+     */
+    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.
+     * @return {?}
+     */
+    closeAll() {
+        this._closeSideSheets(this.openSideSheets);
+    }
+    /**
+     * @private
+     * @template T
+     * @param {?} config
+     * @return {?}
+     */
+    _createOverlay(config) {
+        /** @type {?} */
+        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,
+        });
+        /** @type {?} */
+        const overlayRef = this._overlay.create(overlayConfig);
+        /** @type {?} */
+        const positionStrategy = (/** @type {?} */ (overlayRef.getConfig().positionStrategy));
+        positionStrategy.right('0px');
+        return overlayRef;
+    }
+    /**
+     * Attaches a container to a side-sheets's already-created overlay.
+     * @private
+     * @param {?} overlay Reference to the side-sheet's underlying overlay.
+     * @param {?} config The side-sheet configuration.
+     * @return {?} A promise resolving to a ComponentRef for the attached container.
+     */
+    _attachSideSheetContainer(overlay, config) {
+        /** @type {?} */
+        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+        /** @type {?} */
+        const injector = Injector.create({
+            parent: userInjector || this._injector,
+            providers: [{ provide: CovalentSideSheetConfig, useValue: config }],
+        });
+        /** @type {?} */
+        const containerPortal = new ComponentPortal(this._sideSheetContainerType, config.viewContainerRef, injector, config.componentFactoryResolver);
+        /** @type {?} */
+        const containerRef = overlay.attach(containerPortal);
+        return containerRef.instance;
+    }
+    /**
+     * Attaches the user-provided component to the already-created side sheet container.
+     * @private
+     * @template T, R
+     * @param {?} componentOrTemplateRef The type of component being loaded into the side-sheet,
+     *     or a TemplateRef to instantiate as the content.
+     * @param {?} sideSheetContainer
+     * @param {?} overlayRef Reference to the overlay in which the side-sheet resides.
+     * @param {?} config The side-sheet configuration.
+     * @return {?} 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.
+        /** @type {?} */
+        const sideSheetRef = new this._sideSheetRefConstructor(overlayRef, sideSheetContainer, config.id);
+        if (componentOrTemplateRef instanceof TemplateRef) {
+            sideSheetContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, (/** @type {?} */ (null)), (/** @type {?} */ ({
+                $implicit: config.data,
+                sideSheetRef,
+            }))));
+        }
+        else {
+            /** @type {?} */
+            const injector = this._createInjector(config, sideSheetRef, sideSheetContainer);
+            /** @type {?} */
+            const contentRef = sideSheetContainer.attach(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector));
+            sideSheetRef.componentInstance = contentRef.instance;
+        }
+        sideSheetRef.updateSize(config.width, config.height);
+        return sideSheetRef;
+    }
+    /**
+     * @private
+     * @template T
+     * @param {?} config
+     * @param {?} sideSheetRef
+     * @param {?} sideSheetContainer
+     * @return {?}
+     */
+    _createInjector(config, sideSheetRef, sideSheetContainer) {
+        /** @type {?} */
+        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.
+        /** @type {?} */
+        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 });
+    }
+    /**
+     * Closes all of the side-sheet in an array.
+     * @private
+     * @param {?} sideSheets
+     * @return {?}
+     */
+    _closeSideSheets(sideSheets) {
+        /** @type {?} */
+        let i = sideSheets.length;
+        while (i--) {
+            sideSheets[i].close();
+        }
+    }
+}
+_CovalentSideSheetBase.decorators = [
+    { type: Directive }
+];
+/** @nocollapse */
+_CovalentSideSheetBase.ctorParameters = () => [
+    { type: Overlay },
+    { type: Injector },
+    { type: undefined },
+    { type: undefined },
+    { type: Type },
+    { type: Type },
+    { type: InjectionToken }
+];
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._openSideSheetsAtThisLevel;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._afterAllClosedAtThisLevel;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._afterOpenedAtThisLevel;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._animationStateSubscriptions;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype.defaultSidebarConfig;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._overlay;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._injector;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._defaultOptions;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._parentSideSheet;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._sideSheetRefConstructor;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._sideSheetContainerType;
+    /**
+     * @type {?}
+     * @private
+     */
+    _CovalentSideSheetBase.prototype._sideSheetDataToken;
+}
+/**
+ * Service to open Covalent Design side-sheet.
+ */
+class CovalentSideSheet extends _CovalentSideSheetBase {
+    /**
+     * @param {?} overlay
+     * @param {?} injector
+     * @param {?} defaultOptions
+     * @param {?} parentSideSheet
+     */
+    constructor(overlay, injector, defaultOptions, parentSideSheet) {
+        super(overlay, injector, defaultOptions, parentSideSheet, CovalentSideSheetRef, CovalentSideSheetContainer, MAT_DIALOG_DATA);
+    }
+}
+CovalentSideSheet.decorators = [
+    { type: Injectable }
+];
+/** @nocollapse */
+CovalentSideSheet.ctorParameters = () => [
+    { type: Overlay },
+    { type: Injector },
+    { type: CovalentSideSheetConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] },
+    { type: CovalentSideSheet, decorators: [{ type: Optional }, { type: SkipSelf }] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: side-sheet.content-directives.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * Counter used to generate unique IDs for dialog elements.
+ * @type {?}
+ */
+let dialogElementUid = 0;
+/**
+ * Button that will close the current dialog.
+ */
+class CovalentSideSheetClose {
+    /**
+     * @param {?} dialogRef
+     * @param {?} _elementRef
+     * @param {?} _dialog
+     */
+    constructor(dialogRef, _elementRef, _dialog) {
+        this.dialogRef = dialogRef;
+        this._elementRef = _elementRef;
+        this._dialog = _dialog;
+        /**
+         * Default to "button" to prevents accidental form submits.
+         */
+        this.type = 'button';
+    }
+    /**
+     * @return {?}
+     */
+    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 = (/** @type {?} */ (getClosestDialog(this._elementRef, this._dialog.openSideSheets)));
+        }
+    }
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    ngOnChanges(changes) {
+        /** @type {?} */
+        const proxiedChange = changes['_CovalentSideSheetClose'] || changes['_CovalentSideSheetCloseResult'];
+        if (proxiedChange) {
+            this.dialogResult = proxiedChange.currentValue;
+        }
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    _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);
+    }
+}
+CovalentSideSheetClose.decorators = [
+    { type: Directive, args: [{
+                selector: '[td-side-sheet-close], [CovalentSideSheetClose]',
+                exportAs: 'CovalentSideSheetClose',
+                host: {
+                    '(click)': '_onButtonClick($event)',
+                    '[attr.aria-label]': 'ariaLabel || null',
+                    '[attr.type]': 'type',
+                },
+            },] }
+];
+/** @nocollapse */
+CovalentSideSheetClose.ctorParameters = () => [
+    { type: CovalentSideSheetRef, decorators: [{ type: Optional }] },
+    { type: ElementRef },
+    { type: CovalentSideSheet }
+];
+CovalentSideSheetClose.propDecorators = {
+    ariaLabel: [{ type: Input, args: ['aria-label',] }],
+    type: [{ type: Input }],
+    dialogResult: [{ type: Input, args: ['td-side-sheet-close',] }],
+    _CovalentSideSheetClose: [{ type: Input, args: ['CovalentSideSheetClose',] }]
+};
+if (false) {
+    /**
+     * Screenreader label for the button.
+     * @type {?}
+     */
+    CovalentSideSheetClose.prototype.ariaLabel;
+    /**
+     * Default to "button" to prevents accidental form submits.
+     * @type {?}
+     */
+    CovalentSideSheetClose.prototype.type;
+    /**
+     * Dialog close input.
+     * @type {?}
+     */
+    CovalentSideSheetClose.prototype.dialogResult;
+    /** @type {?} */
+    CovalentSideSheetClose.prototype._CovalentSideSheetClose;
+    /** @type {?} */
+    CovalentSideSheetClose.prototype.dialogRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    CovalentSideSheetClose.prototype._elementRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    CovalentSideSheetClose.prototype._dialog;
+}
+/**
+ * Title of a side sheet element. Stays fixed to the top of the side sheet when scrolling.
+ */
+class CovalentSideSheetTitle {
+    /**
+     * @param {?} _dialogRef
+     * @param {?} _elementRef
+     * @param {?} _dialog
+     */
+    constructor(_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++}`;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        if (this._dialogRef) {
+            Promise.resolve().then((/**
+             * @return {?}
+             */
+            () => {
+                /** @type {?} */
+                const container = this._dialogRef._containerInstance;
+                if (container && !container._ariaLabelledBy) {
+                    container._ariaLabelledBy = this.id;
+                }
+            }));
+        }
+        else {
+            this._dialogRef = (/** @type {?} */ (getClosestDialog(this._elementRef, this._dialog.openSideSheets)));
+        }
+    }
+}
+CovalentSideSheetTitle.decorators = [
+    { type: Directive, args: [{
+                selector: '[td-side-sheet-title], [CovalentSideSheetTitle]',
+                exportAs: 'CovalentSideSheetTitle',
+                host: {
+                    'class': 'td-side-sheet-title',
+                    '[id]': 'id',
+                },
+            },] }
+];
+/** @nocollapse */
+CovalentSideSheetTitle.ctorParameters = () => [
+    { type: CovalentSideSheetRef, decorators: [{ type: Optional }] },
+    { type: ElementRef },
+    { type: CovalentSideSheet }
+];
+CovalentSideSheetTitle.propDecorators = {
+    id: [{ type: Input }]
+};
+if (false) {
+    /**
+     * Unique id for the dialog title. If none is supplied, it will be auto-generated.
+     * @type {?}
+     */
+    CovalentSideSheetTitle.prototype.id;
+    /**
+     * @type {?}
+     * @private
+     */
+    CovalentSideSheetTitle.prototype._dialogRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    CovalentSideSheetTitle.prototype._elementRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    CovalentSideSheetTitle.prototype._dialog;
+}
+/**
+ * Scrollable content container of a dialog.
+ */
+class CovalentSideSheetContent {
+}
+CovalentSideSheetContent.decorators = [
+    { type: Directive, args: [{
+                selector: `[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]`,
+                host: { class: 'td-side-sheet-content' },
+            },] }
+];
+/**
+ * Container for the bottom action buttons in a dialog.
+ * Stays fixed to the bottom when scrolling.
+ */
+class CovalentSideSheetActions {
+}
+CovalentSideSheetActions.decorators = [
+    { type: Directive, args: [{
+                selector: `[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]`,
+                host: { class: 'td-side-sheet-actions' },
+            },] }
+];
+/**
+ * Container for the wrapper part of the dialog
+ */
+class CovalentSideSheetWrapper {
+}
+CovalentSideSheetWrapper.decorators = [
+    { type: Directive, args: [{
+                selector: `[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]`,
+                host: { class: 'td-side-sheet-wrapper' },
+            },] }
+];
+/**
+ * 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.
+ * @return {?}
+ */
+function getClosestDialog(element, openDialogs) {
+    /** @type {?} */
+    let parent = element.nativeElement.parentElement;
+    while (parent && !parent.classList.contains('td-side-sheet-container')) {
+        parent = parent.parentElement;
+    }
+    return parent ? openDialogs.find((/**
+     * @param {?} dialog
+     * @return {?}
+     */
+    (dialog) => dialog.id === (/** @type {?} */ (parent)).id)) : null;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: side-sheet.module.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CovalentSideSheetModule {
+}
+CovalentSideSheetModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    CovalentSideSheetContainer,
+                    CovalentSideSheetActions,
+                    CovalentSideSheetClose,
+                    CovalentSideSheetContent,
+                    CovalentSideSheetTitle,
+                    CovalentSideSheetWrapper,
+                ],
+                exports: [
+                    CovalentSideSheetActions,
+                    CovalentSideSheetClose,
+                    CovalentSideSheetContent,
+                    CovalentSideSheetTitle,
+                    CovalentSideSheetWrapper,
+                ],
+                imports: [PortalModule, MatDialogModule, MatCommonModule],
+                providers: [CovalentSideSheet],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: public-api.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: index.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: covalent-core-side-sheet.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+export { CovalentSideSheet, CovalentSideSheetActions, CovalentSideSheetClose, CovalentSideSheetConfig, CovalentSideSheetContent, CovalentSideSheetModule, CovalentSideSheetRef, CovalentSideSheetTitle, CovalentSideSheetWrapper, _CovalentSideSheetBase, _closeSideSheetVia, _CovalentSideSheetContainerBase as ɵa, CovalentSideSheetContainer as ɵb, tdSideSheetAnimations as ɵc };
+//# sourceMappingURL=covalent-core-side-sheet.js.map