@covalent/core 6.3.0 → 7.0.0

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

@@ -31,10 +31,7 @@ var SubPageMode;
     SubPageMode["none"] = "none";
 })(SubPageMode || (SubPageMode = {}));
 class CovalentSideSheetConfig extends MatDialogConfig {
-    constructor() {
-        super(...arguments);
-        this.subPageMode = SubPageMode.pushed;
-    }
+    subPageMode = SubPageMode.pushed;
 }
 
 function _getFocusedElementPierceShadowDom() {
@@ -58,6 +55,30 @@ 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) {
@@ -67,24 +88,6 @@ 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;
     }
@@ -109,6 +112,14 @@ 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()) {
@@ -192,10 +203,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 });
 }
-_CovalentSideSheetContainerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", 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.5", 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.5", ngImport: i0, type: _CovalentSideSheetContainerBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: _CovalentSideSheetContainerBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurableFocusTrapFactory }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
@@ -211,21 +222,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * 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;
-    }
+    /** 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;
     get sideSheetAnimationState() {
         return this._state;
     }
@@ -260,10 +268,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 });
 }
-CovalentSideSheetContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentSideSheetContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CovalentSideSheetContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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.5", ngImport: i0, type: CovalentSideSheetContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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: [{
@@ -305,6 +313,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", 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);
@@ -327,6 +339,21 @@ 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;
@@ -335,13 +362,6 @@ 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() {
@@ -510,10 +530,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 });
 }
-_CovalentSideSheetBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: _CovalentSideSheetBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-_CovalentSideSheetBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: _CovalentSideSheetBase, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: _CovalentSideSheetBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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 }]; } });
 /**
@@ -523,10 +543,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 });
 }
-CovalentSideSheet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", 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.5", ngImport: i0, type: CovalentSideSheet });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentSideSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheet, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: CovalentSideSheetConfig, decorators: [{
                     type: Optional
@@ -546,6 +566,16 @@ 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);
     }
@@ -553,8 +583,6 @@ 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) {
@@ -580,10 +608,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 });
 }
-CovalentSideSheetCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", 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.5", 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.5", ngImport: i0, type: CovalentSideSheetCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[td-side-sheet-close], [CovalentSideSheetClose]',
@@ -616,6 +644,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", 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
@@ -623,10 +658,6 @@ 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) {
@@ -641,10 +672,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 });
 }
-CovalentSideSheetTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", 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.5", 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.5", ngImport: i0, type: CovalentSideSheetTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[td-side-sheet-title], [CovalentSideSheetTitle]',
@@ -665,13 +696,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Scrollable content container of a dialog.
  */
 class CovalentSideSheetContentDirective {
-    constructor() {
-        this.tdSideSheetContent = true;
-    }
+    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 });
 }
-CovalentSideSheetContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentSideSheetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CovalentSideSheetContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", 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.5", ngImport: i0, type: CovalentSideSheetContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]`,
@@ -685,13 +714,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Stays fixed to the bottom when scrolling.
  */
 class CovalentSideSheetActionsDirective {
-    constructor() {
-        this.tdSideSheetActions = true;
-    }
+    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 });
 }
-CovalentSideSheetActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentSideSheetActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CovalentSideSheetActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", 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.5", ngImport: i0, type: CovalentSideSheetActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]`,
@@ -704,13 +731,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Container for the wrapper part of the dialog
  */
 class CovalentSideSheetWrapperDirective {
-    constructor() {
-        this.tdSideSheetWrapper = true;
-    }
+    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 });
 }
-CovalentSideSheetWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentSideSheetWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CovalentSideSheetWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", 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.5", ngImport: i0, type: CovalentSideSheetWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetWrapperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]`,
@@ -735,20 +760,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] });
 }
-CovalentSideSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentSideSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CovalentSideSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", 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.5", ngImport: i0, type: CovalentSideSheetModule, providers: [CovalentSideSheet], imports: [PortalModule, MatDialogModule, MatCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentSideSheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentSideSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [