@covalent/core 4.0.0 → 4.1.0-develop.5

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

@@ -0,0 +1,762 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Directive, Optional, Inject, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, 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 _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);
+    }
+}
+_CovalentSideSheetContainerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: _CovalentSideSheetContainerBase, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurableFocusTrapFactory }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: CovalentSideSheetConfig }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive });
+_CovalentSideSheetContainerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: _CovalentSideSheetContainerBase, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: _CovalentSideSheetContainerBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i1.ConfigurableFocusTrapFactory }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: CovalentSideSheetConfig }, { type: i1.FocusMonitor }];
+    }, propDecorators: { _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 CovalentSideSheetContainerComponent extends _CovalentSideSheetContainerBase {
+    constructor() {
+        super(...arguments);
+        /** State of the side-sheet animation. */
+        this._state = 'enter';
+        this.tdSideSheetContainerClass = true;
+        this.tabIndex = -1;
+        this.arialModal = true;
+        this.idAttr = this._id;
+        this.roleAttr = this._config.role;
+        this.arialLabelByAttr = this._config.ariaLabel
+            ? null
+            : this._ariaLabelledBy;
+        this.arialDescribeByAttr = this._config.ariaDescribedBy || null;
+        this.arialLabelAttr = this._config.ariaLabel;
+    }
+    get sideSheetAnimationState() {
+        return this._state;
+    }
+    onAnimateStart($event) {
+        this._onAnimationStart($event);
+    }
+    onAnimateDone($event) {
+        this._onAnimationDone($event);
+    }
+    /** 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();
+    }
+}
+CovalentSideSheetContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CovalentSideSheetContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CovalentSideSheetContainerComponent, selector: "td-side-sheet-container", host: { listeners: { "@sideSheetContainer.start": "onAnimateStart($event)", "@sideSheetContainer.done": "onAnimateDone($event)" }, properties: { "class.td-side-sheet-container": "this.tdSideSheetContainerClass", "tabindex": "this.tabIndex", "aria-modal": "this.arialModal", "id": "this.idAttr", "attr.role": "this.roleAttr", "attr.aria-labelledby": "this.arialLabelByAttr", "attr.aria-describedby": "this.arialDescribeByAttr", "attr.aria-label": "this.arialLabelAttr", "@sideSheetContainer": "this.sideSheetAnimationState" } }, usesInheritance: true, ngImport: i0, template: ` <ng-template cdkPortalOutlet></ng-template> `, isInline: true, styles: [".td-side-sheet-container{background-color:#fff;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;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:flex;flex-direction:column;height:100%}.td-side-sheet-content{margin:0 -24px;padding:0 24px;overflow:auto;flex:1;-webkit-overflow-scrolling:touch}.td-side-sheet-title{margin:-16px 0 20px;display:flex;align-items:center}.td-side-sheet-actions{padding:8px 0;margin:0 -16px -24px;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;box-sizing:content-box}.td-side-sheet-actions[align=end]{justify-content:flex-end}.td-side-sheet-actions[align=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"], directives: [{ type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [tdSideSheetAnimations.sideSheetContainer], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-side-sheet-container', template: ` <ng-template cdkPortalOutlet></ng-template> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [tdSideSheetAnimations.sideSheetContainer], styles: [".td-side-sheet-container{background-color:#fff;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;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:flex;flex-direction:column;height:100%}.td-side-sheet-content{margin:0 -24px;padding:0 24px;overflow:auto;flex:1;-webkit-overflow-scrolling:touch}.td-side-sheet-title{margin:-16px 0 20px;display:flex;align-items:center}.td-side-sheet-actions{padding:8px 0;margin:0 -16px -24px;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;box-sizing:content-box}.td-side-sheet-actions[align=end]{justify-content:flex-end}.td-side-sheet-actions[align=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"] }]
+        }], propDecorators: { tdSideSheetContainerClass: [{
+                type: HostBinding,
+                args: ['class.td-side-sheet-container']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['tabindex']
+            }], arialModal: [{
+                type: HostBinding,
+                args: ['aria-modal']
+            }], idAttr: [{
+                type: HostBinding,
+                args: ['id']
+            }], roleAttr: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], arialLabelByAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], arialDescribeByAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], arialLabelAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], sideSheetAnimationState: [{
+                type: HostBinding,
+                args: ['@sideSheetContainer']
+            }], onAnimateStart: [{
+                type: HostListener,
+                args: ['@sideSheetContainer.start', ['$event']]
+            }], onAnimateDone: [{
+                type: HostListener,
+                args: ['@sideSheetContainer.done', ['$event']]
+            }] } });
+
+// 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(
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            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();
+        }
+    }
+}
+_CovalentSideSheetBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: _CovalentSideSheetBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+_CovalentSideSheetBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: _CovalentSideSheetBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: _CovalentSideSheetBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }]; } });
+/**
+ * Service to open Covalent Design side-sheet.
+ */
+class CovalentSideSheet extends _CovalentSideSheetBase {
+    constructor(overlay, injector, defaultOptions, parentSideSheet) {
+        super(overlay, injector, defaultOptions, parentSideSheet, CovalentSideSheetRef, CovalentSideSheetContainerComponent, MAT_DIALOG_DATA);
+    }
+}
+CovalentSideSheet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheet, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: MAT_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: CovalentSideSheet, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
+CovalentSideSheet.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheet });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheet, decorators: [{
+            type: Injectable
+        }], ctorParameters: 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
+                    }] }];
+    } });
+
+/* tslint:disable */
+/** Counter used to generate unique IDs for dialog elements. */
+let dialogElementUid = 0;
+/**
+ * Button that will close the current dialog.
+ */
+class CovalentSideSheetCloseDirective {
+    constructor(dialogRef, _elementRef, _dialog) {
+        this.dialogRef = dialogRef;
+        this._elementRef = _elementRef;
+        this._dialog = _dialog;
+        /** Default to "button" to prevents accidental form submits. */
+        this.type = 'button';
+    }
+    onClick($event) {
+        this._onButtonClick($event);
+    }
+    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);
+    }
+}
+CovalentSideSheetCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetCloseDirective, deps: [{ token: CovalentSideSheetRef, optional: true }, { token: i0.ElementRef }, { token: CovalentSideSheet }], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: CovalentSideSheetCloseDirective, selector: "[td-side-sheet-close], [CovalentSideSheetClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["td-side-sheet-close", "dialogResult"], _CovalentSideSheetClose: ["CovalentSideSheetClose", "_CovalentSideSheetClose"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.arial-label": "this.ariaLabel", "attr.type": "this.type" } }, exportAs: ["CovalentSideSheetClose"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[td-side-sheet-close], [CovalentSideSheetClose]',
+                    exportAs: 'CovalentSideSheetClose',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: CovalentSideSheetRef, decorators: [{
+                        type: Optional
+                    }] }, { type: i0.ElementRef }, { type: CovalentSideSheet }];
+    }, propDecorators: { ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.arial-label']
+            }, {
+                type: Input,
+                args: ['aria-label']
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }, {
+                type: Input
+            }], dialogResult: [{
+                type: Input,
+                args: ['td-side-sheet-close']
+            }], _CovalentSideSheetClose: [{
+                type: Input,
+                args: ['CovalentSideSheetClose']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+/**
+ * Title of a side sheet element. Stays fixed to the top of the side sheet when scrolling.
+ */
+class CovalentSideSheetTitleDirective {
+    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++}`;
+        this.tdSideSheetTitle = true;
+        this.idAttr = this.id;
+    }
+    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);
+        }
+    }
+}
+CovalentSideSheetTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetTitleDirective, deps: [{ token: CovalentSideSheetRef, optional: true }, { token: i0.ElementRef }, { token: CovalentSideSheet }], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: CovalentSideSheetTitleDirective, selector: "[td-side-sheet-title], [CovalentSideSheetTitle]", inputs: { id: "id" }, host: { properties: { "class.td-side-sheet-title": "this.tdSideSheetTitle", "attr.id": "this.idAttr" } }, exportAs: ["CovalentSideSheetTitle"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[td-side-sheet-title], [CovalentSideSheetTitle]',
+                    exportAs: 'CovalentSideSheetTitle',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: CovalentSideSheetRef, decorators: [{
+                        type: Optional
+                    }] }, { type: i0.ElementRef }, { type: CovalentSideSheet }];
+    }, propDecorators: { id: [{
+                type: Input
+            }], tdSideSheetTitle: [{
+                type: HostBinding,
+                args: ['class.td-side-sheet-title']
+            }], idAttr: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+/**
+ * Scrollable content container of a dialog.
+ */
+class CovalentSideSheetContentDirective {
+    constructor() {
+        this.tdSideSheetContent = true;
+    }
+}
+CovalentSideSheetContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: CovalentSideSheetContentDirective, selector: "[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]", host: { properties: { "class.td-side-sheet-content": "this.tdSideSheetContent" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]`,
+                }]
+        }], propDecorators: { tdSideSheetContent: [{
+                type: HostBinding,
+                args: ['class.td-side-sheet-content']
+            }] } });
+/**
+ * Container for the bottom action buttons in a dialog.
+ * Stays fixed to the bottom when scrolling.
+ */
+class CovalentSideSheetActionsDirective {
+    constructor() {
+        this.tdSideSheetActions = true;
+    }
+}
+CovalentSideSheetActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: CovalentSideSheetActionsDirective, selector: "[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]", host: { properties: { "class.td-side-sheet-actions": "this.tdSideSheetActions" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]`,
+                }]
+        }], propDecorators: { tdSideSheetActions: [{
+                type: HostBinding,
+                args: ['class.td-side-sheet-actions']
+            }] } });
+/**
+ * Container for the wrapper part of the dialog
+ */
+class CovalentSideSheetWrapperDirective {
+    constructor() {
+        this.tdSideSheetWrapper = true;
+    }
+}
+CovalentSideSheetWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: CovalentSideSheetWrapperDirective, selector: "[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]", host: { properties: { "class.td-side-sheet-wrapper": "this.tdSideSheetWrapper" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]`,
+                }]
+        }], propDecorators: { tdSideSheetWrapper: [{
+                type: HostBinding,
+                args: ['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.
+ */
+function getClosestDialog(element, openDialogs) {
+    var _a;
+    let parent = element.nativeElement.parentElement;
+    while (parent && !parent.classList.contains('td-side-sheet-container')) {
+        parent = parent.parentElement;
+    }
+    return parent
+        ? (_a = openDialogs.find((dialog) => dialog.id === (parent === null || parent === void 0 ? void 0 : parent.id))) !== null && _a !== void 0 ? _a : openDialogs[0]
+        : openDialogs[0];
+}
+
+class CovalentSideSheetModule {
+}
+CovalentSideSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentSideSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetModule, declarations: [CovalentSideSheetContainerComponent,
+        CovalentSideSheetActionsDirective,
+        CovalentSideSheetCloseDirective,
+        CovalentSideSheetContentDirective,
+        CovalentSideSheetTitleDirective,
+        CovalentSideSheetWrapperDirective], imports: [PortalModule, MatDialogModule, MatCommonModule], exports: [CovalentSideSheetActionsDirective,
+        CovalentSideSheetCloseDirective,
+        CovalentSideSheetContentDirective,
+        CovalentSideSheetTitleDirective,
+        CovalentSideSheetWrapperDirective] });
+CovalentSideSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetModule, providers: [CovalentSideSheet], imports: [[PortalModule, MatDialogModule, MatCommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSideSheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CovalentSideSheetContainerComponent,
+                        CovalentSideSheetActionsDirective,
+                        CovalentSideSheetCloseDirective,
+                        CovalentSideSheetContentDirective,
+                        CovalentSideSheetTitleDirective,
+                        CovalentSideSheetWrapperDirective,
+                    ],
+                    exports: [
+                        CovalentSideSheetActionsDirective,
+                        CovalentSideSheetCloseDirective,
+                        CovalentSideSheetContentDirective,
+                        CovalentSideSheetTitleDirective,
+                        CovalentSideSheetWrapperDirective,
+                    ],
+                    imports: [PortalModule, MatDialogModule, MatCommonModule],
+                    providers: [CovalentSideSheet],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CovalentSideSheet, CovalentSideSheetActionsDirective, CovalentSideSheetCloseDirective, CovalentSideSheetConfig, CovalentSideSheetContentDirective, CovalentSideSheetModule, CovalentSideSheetRef, CovalentSideSheetTitleDirective, CovalentSideSheetWrapperDirective, _CovalentSideSheetBase, _closeSideSheetVia };
+//# sourceMappingURL=covalent-core-side-sheet.mjs.map