@covalent/core 6.4.0 → 6.4.1

package/{fesm2022 → fesm2020}/covalent-core-side-sheet.mjs

@@ -31,7 +31,10 @@ var SubPageMode;
     SubPageMode["none"] = "none";
 })(SubPageMode || (SubPageMode = {}));
 class CovalentSideSheetConfig extends MatDialogConfig {
-    subPageMode = SubPageMode.pushed;
+    constructor() {
+        super(...arguments);
+        this.subPageMode = SubPageMode.pushed;
+    }
 }
 
 function _getFocusedElementPierceShadowDom() {
@@ -55,30 +58,6 @@ function _getFocusedElementPierceShadowDom() {
  * animations as these are left to implementers of the side-sheet container.
  */
 class _CovalentSideSheetContainerBase extends BasePortalOutlet {
-    _elementRef;
-    _focusTrapFactory;
-    _changeDetectorRef;
-    _config;
-    _focusMonitor;
-    _document;
-    /** The portal outlet inside of this container into which the side-sheet content will be loaded. */
-    _portalOutlet;
-    /** The class that traps and manages focus within the side-sheet. */
-    _focusTrap;
-    /** Emits when an animation state changes. */
-    _animationStateChanged = new EventEmitter();
-    /** Element that was focused before the side-sheet was opened. Save this to restore upon close. */
-    _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.
-     */
-    _closeInteractionType = null;
-    /** ID of the element that should be considered as the side-sheet's label. */
-    _ariaLabelledBy;
-    /** ID for the container DOM element. */
-    _id;
     constructor(_elementRef, _focusTrapFactory, _changeDetectorRef, _document, 
     /** The side-sheet configuration. */
     _config, _focusMonitor) {
@@ -88,6 +67,24 @@ class _CovalentSideSheetContainerBase extends BasePortalOutlet {
         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;
     }
@@ -112,14 +109,6 @@ class _CovalentSideSheetContainerBase extends BasePortalOutlet {
     attachTemplatePortal(portal) {
         return this._portalOutlet.attachTemplatePortal(portal);
     }
-    /**
-     * Attaches a DOM portal to the side-sheet container.
-     * @param portal Portal to be attached.
-     * @deprecated To be turned into a method.
-     */
-    attachDomPortal = (portal) => {
-        return this._portalOutlet.attachDomPortal(portal);
-    };
     /** Moves focus back into the side-sheet if it was moved out. */
     _recaptureFocus() {
         if (!this._containsFocus()) {
@@ -203,10 +192,10 @@ class _CovalentSideSheetContainerBase extends BasePortalOutlet {
         const activeElement = _getFocusedElementPierceShadowDom();
         return element === activeElement || element.contains(activeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: _CovalentSideSheetContainerBase, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: _CovalentSideSheetContainerBase, decorators: [{
+_CovalentSideSheetContainerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: _CovalentSideSheetContainerBase, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: _CovalentSideSheetContainerBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurableFocusTrapFactory }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
@@ -222,18 +211,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * This animation below is the only reason for duplicating most of the Material dialog code
  */
 class CovalentSideSheetContainerComponent extends _CovalentSideSheetContainerBase {
-    /** State of the side-sheet animation. */
-    _state = 'enter';
-    tdSideSheetContainerClass = true;
-    tabIndex = -1;
-    arialModal = true;
-    idAttr = this._id;
-    roleAttr = this._config.role;
-    arialLabelByAttr = this._config.ariaLabel
-        ? null
-        : this._ariaLabelledBy;
-    arialDescribeByAttr = this._config.ariaDescribedBy || null;
-    arialLabelAttr = this._config.ariaLabel;
+    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;
     }
@@ -268,10 +260,10 @@ class CovalentSideSheetContainerComponent extends _CovalentSideSheetContainerBas
         this._state = 'exit';
         this._changeDetectorRef.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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{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-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "directive", 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: "16.1.7", ngImport: i0, type: CovalentSideSheetContainerComponent, decorators: [{
+CovalentSideSheetContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheetContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CovalentSideSheetContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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{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-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "directive", 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: "15.2.10", 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{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-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
         }], propDecorators: { tdSideSheetContainerClass: [{
@@ -313,10 +305,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 let uniqueId = 0;
 // Create a new side sheet ref to change the id of the ref
 class CovalentSideSheetRef extends MatDialogRef {
-    overlayRef;
-    config;
-    _containerInstance;
-    id;
     constructor(overlayRef, config, _containerInstance, id = `td-side-sheet-${uniqueId++}`) {
         const ref = new DialogRef(overlayRef, config);
         super(ref, config, _containerInstance);
@@ -339,21 +327,6 @@ function _closeSideSheetVia(ref, interactionType, result) {
 
 /* tslint:disable */
 class _CovalentSideSheetBase {
-    _overlay;
-    _injector;
-    _defaultOptions;
-    _parentSideSheet;
-    _sideSheetRefConstructor;
-    _sideSheetContainerType;
-    _sideSheetDataToken;
-    _openSideSheetsAtThisLevel = [];
-    _afterAllClosedAtThisLevel = new Subject();
-    _afterOpenedAtThisLevel = new Subject();
-    _animationStateSubscriptions;
-    defaultSidebarConfig = {
-        minWidth: '400px',
-        maxWidth: '100vw',
-    };
     constructor(_overlay, _injector, _defaultOptions, _parentSideSheet, _sideSheetRefConstructor, _sideSheetContainerType, _sideSheetDataToken) {
         this._overlay = _overlay;
         this._injector = _injector;
@@ -362,6 +335,13 @@ class _CovalentSideSheetBase {
         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() {
@@ -530,10 +510,10 @@ class _CovalentSideSheetBase {
             sideSheets[i].close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: _CovalentSideSheetBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: _CovalentSideSheetBase, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: _CovalentSideSheetBase, decorators: [{
+_CovalentSideSheetBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: _CovalentSideSheetBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+_CovalentSideSheetBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: _CovalentSideSheetBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 }]; } });
 /**
@@ -543,10 +523,10 @@ class CovalentSideSheet extends _CovalentSideSheetBase {
     constructor(overlay, injector, defaultOptions, parentSideSheet) {
         super(overlay, injector, defaultOptions, parentSideSheet, CovalentSideSheetRef, CovalentSideSheetContainerComponent, MAT_DIALOG_DATA);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", 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 });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheet });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheet, decorators: [{
+CovalentSideSheet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CovalentSideSheet });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheet, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: CovalentSideSheetConfig, decorators: [{
                     type: Optional
@@ -566,16 +546,6 @@ let dialogElementUid = 0;
  * Button that will close the current dialog.
  */
 class CovalentSideSheetCloseDirective {
-    dialogRef;
-    _elementRef;
-    _dialog;
-    /** Screenreader label for the button. */
-    ariaLabel;
-    /** Default to "button" to prevents accidental form submits. */
-    type = 'button';
-    /** Dialog close input. */
-    dialogResult;
-    _CovalentSideSheetClose;
     onClick($event) {
         this._onButtonClick($event);
     }
@@ -583,6 +553,8 @@ class CovalentSideSheetCloseDirective {
         this.dialogRef = dialogRef;
         this._elementRef = _elementRef;
         this._dialog = _dialog;
+        /** Default to "button" to prevents accidental form submits. */
+        this.type = 'button';
     }
     ngOnInit() {
         if (!this.dialogRef) {
@@ -608,10 +580,10 @@ class CovalentSideSheetCloseDirective {
         // 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);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetCloseDirective, deps: [{ token: CovalentSideSheetRef, optional: true }, { token: i0.ElementRef }, { token: CovalentSideSheet }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", ngImport: i0, type: CovalentSideSheetCloseDirective, decorators: [{
+CovalentSideSheetCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheetCloseDirective, deps: [{ token: CovalentSideSheetRef, optional: true }, { token: i0.ElementRef }, { token: CovalentSideSheet }], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CovalentSideSheetCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[td-side-sheet-close], [CovalentSideSheetClose]',
@@ -644,13 +616,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Title of a side sheet element. Stays fixed to the top of the side sheet when scrolling.
  */
 class CovalentSideSheetTitleDirective {
-    _dialogRef;
-    _elementRef;
-    _dialog;
-    /** Unique id for the dialog title. If none is supplied, it will be auto-generated. */
-    id = `td-side-sheet-title-${dialogElementUid++}`;
-    tdSideSheetTitle = true;
-    idAttr = this.id;
     constructor(
     // The dialog title directive is always used in combination with a `CovalentSideSheetRef`.
     // tslint:disable-next-line: lightweight-tokens
@@ -658,6 +623,10 @@ class CovalentSideSheetTitleDirective {
         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) {
@@ -672,10 +641,10 @@ class CovalentSideSheetTitleDirective {
             this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openSideSheets);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetTitleDirective, deps: [{ token: CovalentSideSheetRef, optional: true }, { token: i0.ElementRef }, { token: CovalentSideSheet }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", ngImport: i0, type: CovalentSideSheetTitleDirective, decorators: [{
+CovalentSideSheetTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheetTitleDirective, deps: [{ token: CovalentSideSheetRef, optional: true }, { token: i0.ElementRef }, { token: CovalentSideSheet }], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CovalentSideSheetTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[td-side-sheet-title], [CovalentSideSheetTitle]',
@@ -696,11 +665,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Scrollable content container of a dialog.
  */
 class CovalentSideSheetContentDirective {
-    tdSideSheetContent = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: CovalentSideSheetContentDirective, selector: "[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]", host: { properties: { "class.td-side-sheet-content": "this.tdSideSheetContent" } }, ngImport: i0 });
+    constructor() {
+        this.tdSideSheetContent = true;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetContentDirective, decorators: [{
+CovalentSideSheetContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CovalentSideSheetContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]`,
@@ -714,11 +685,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Stays fixed to the bottom when scrolling.
  */
 class CovalentSideSheetActionsDirective {
-    tdSideSheetActions = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: CovalentSideSheetActionsDirective, selector: "[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]", host: { properties: { "class.td-side-sheet-actions": "this.tdSideSheetActions" } }, ngImport: i0 });
+    constructor() {
+        this.tdSideSheetActions = true;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetActionsDirective, decorators: [{
+CovalentSideSheetActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheetActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CovalentSideSheetActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]`,
@@ -731,11 +704,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Container for the wrapper part of the dialog
  */
 class CovalentSideSheetWrapperDirective {
-    tdSideSheetWrapper = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: CovalentSideSheetWrapperDirective, selector: "[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]", host: { properties: { "class.td-side-sheet-wrapper": "this.tdSideSheetWrapper" } }, ngImport: i0 });
+    constructor() {
+        this.tdSideSheetWrapper = true;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetWrapperDirective, decorators: [{
+CovalentSideSheetWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheetWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CovalentSideSheetWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CovalentSideSheetWrapperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]`,
@@ -760,20 +735,20 @@ function getClosestDialog(element, openDialogs) {
 }
 
 class CovalentSideSheetModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetModule, declarations: [CovalentSideSheetContainerComponent,
-            CovalentSideSheetActionsDirective,
-            CovalentSideSheetCloseDirective,
-            CovalentSideSheetContentDirective,
-            CovalentSideSheetTitleDirective,
-            CovalentSideSheetWrapperDirective], imports: [PortalModule, MatDialogModule, MatCommonModule], exports: [CovalentSideSheetActionsDirective,
-            CovalentSideSheetCloseDirective,
-            CovalentSideSheetContentDirective,
-            CovalentSideSheetTitleDirective,
-            CovalentSideSheetWrapperDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetModule, providers: [CovalentSideSheet], imports: [PortalModule, MatDialogModule, MatCommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetModule, decorators: [{
+CovalentSideSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentSideSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CovalentSideSheetModule, providers: [CovalentSideSheet], imports: [PortalModule, MatDialogModule, MatCommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentSideSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [