@covalent/core 4.0.0-beta.4 → 4.1.0-develop.11

package/fesm2015/covalent-core-dialogs.mjs

@@ -1,79 +1,49 @@
 import * as i0 from '@angular/core';
 import { Directive, Component, ContentChildren, ViewChild, Injectable, Inject, EventEmitter, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i4$1 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
-import * as i6 from '@angular/material/input';
+import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/form-field';
 import { Subject, fromEvent, merge } from 'rxjs';
 import * as i2 from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i3$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i4$2 from '@angular/material/icon';
+import * as i3$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import * as i4$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
-function TdDialogComponent_h3_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "h3", 4);
-        i0.ɵɵprojection(1);
-        i0.ɵɵelementEnd();
-    }
-}
-function TdDialogComponent_div_2_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 5);
-        i0.ɵɵprojection(1, 1);
-        i0.ɵɵelementEnd();
-    }
-}
-function TdDialogComponent_div_3_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 6);
-        i0.ɵɵelement(1, "span", 7);
-        i0.ɵɵprojection(2, 2);
-        i0.ɵɵelementEnd();
-    }
-}
-const _c0$2 = [[["td-dialog-title"]], [["td-dialog-content"]], [["td-dialog-actions"]]];
-const _c1 = ["td-dialog-title", "td-dialog-content", "td-dialog-actions"];
 class TdDialogTitleDirective {
 }
-/** @nocollapse */ /** @nocollapse */ TdDialogTitleDirective.ɵfac = function TdDialogTitleDirective_Factory(t) { return new (t || TdDialogTitleDirective)(); };
-/** @nocollapse */ /** @nocollapse */ TdDialogTitleDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdDialogTitleDirective, selectors: [["td-dialog-title"]] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogTitleDirective, [{
+TdDialogTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TdDialogTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdDialogTitleDirective, selector: "[tdDialogTitle]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogTitleDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'td-dialog-title' }]
-        }], null, null);
-})();
+            args: [{ selector: '[tdDialogTitle]' }]
+        }] });
 class TdDialogContentDirective {
 }
-/** @nocollapse */ /** @nocollapse */ TdDialogContentDirective.ɵfac = function TdDialogContentDirective_Factory(t) { return new (t || TdDialogContentDirective)(); };
-/** @nocollapse */ /** @nocollapse */ TdDialogContentDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdDialogContentDirective, selectors: [["td-dialog-content"]] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogContentDirective, [{
+TdDialogContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TdDialogContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdDialogContentDirective, selector: "[tdDialogContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogContentDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'td-dialog-content' }]
-        }], null, null);
-})();
+            args: [{ selector: '[tdDialogContent]' }]
+        }] });
 class TdDialogActionsDirective {
 }
-/** @nocollapse */ /** @nocollapse */ TdDialogActionsDirective.ɵfac = function TdDialogActionsDirective_Factory(t) { return new (t || TdDialogActionsDirective)(); };
-/** @nocollapse */ /** @nocollapse */ TdDialogActionsDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdDialogActionsDirective, selectors: [["td-dialog-actions"]] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogActionsDirective, [{
+TdDialogActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TdDialogActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdDialogActionsDirective, selector: "[tdDialogActions]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogActionsDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'td-dialog-actions' }]
-        }], null, null);
-})();
+            args: [{ selector: '[tdDialogActions]' }]
+        }] });
 class TdDialogComponent {
     ngAfterContentInit() {
         if (this.dialogTitle.length > 1) {
@@ -87,42 +57,12 @@ class TdDialogComponent {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDialogComponent.ɵfac = function TdDialogComponent_Factory(t) { return new (t || TdDialogComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdDialogComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDialogComponent, selectors: [["td-dialog"]], contentQueries: function TdDialogComponent_ContentQueries(rf, ctx, dirIndex) {
-        if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, TdDialogTitleDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, TdDialogContentDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, TdDialogActionsDirective, 5);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dialogTitle = _t);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dialogContent = _t);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dialogActions = _t);
-        }
-    }, ngContentSelectors: _c1, decls: 4, vars: 3, consts: [[1, "td-dialog-wrapper"], ["class", "td-dialog-title", 4, "ngIf"], ["class", "td-dialog-content", 4, "ngIf"], ["class", "td-dialog-actions", 4, "ngIf"], [1, "td-dialog-title"], [1, "td-dialog-content"], [1, "td-dialog-actions"], [1, "td-dialog-spacer"]], template: function TdDialogComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$2);
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, TdDialogComponent_h3_1_Template, 2, 0, "h3", 1);
-            i0.ɵɵtemplate(2, TdDialogComponent_div_2_Template, 2, 0, "div", 2);
-            i0.ɵɵtemplate(3, TdDialogComponent_div_3_Template, 3, 0, "div", 3);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.dialogTitle.length > 0);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.dialogContent.length > 0);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.dialogActions.length > 0);
-        }
-    }, directives: [i3.NgIf], styles: [".td-dialog-title[_ngcontent-%COMP%]{margin-top:0;margin-bottom:20px}.td-dialog-content[_ngcontent-%COMP%]{margin-bottom:16px}.td-dialog-actions[_ngcontent-%COMP%]{position:relative;top:16px;left:16px}  [dir=rtl] .td-dialog-actions{right:16px;left:auto}[_nghost-%COMP%]{display:block}[_nghost-%COMP%]   .td-dialog-actions[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex}[_nghost-%COMP%]   .td-dialog-actions[_ngcontent-%COMP%]   .td-dialog-spacer[_ngcontent-%COMP%]{-ms-flex:1;flex:1}[_nghost-%COMP%]   .td-dialog-actions[_ngcontent-%COMP%]     button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl]   [_nghost-%COMP%]   .td-dialog-actions[_ngcontent-%COMP%]     button{margin-right:8px;margin-left:inherit}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogComponent, [{
+TdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDialogComponent, selector: "td-dialog", queries: [{ propertyName: "dialogTitle", predicate: TdDialogTitleDirective, descendants: true }, { propertyName: "dialogContent", predicate: TdDialogContentDirective, descendants: true }, { propertyName: "dialogActions", predicate: TdDialogActionsDirective, descendants: true }], ngImport: i0, template: "<div class=\"td-dialog-wrapper\">\n  <h3 class=\"td-dialog-title\" *ngIf=\"dialogTitle.length > 0\">\n    <ng-content select=\"[tdDialogTitle]\"></ng-content>\n  </h3>\n  <div class=\"td-dialog-content\" *ngIf=\"dialogContent.length > 0\">\n    <ng-content select=\"[tdDialogContent]\"></ng-content>\n  </div>\n  <div class=\"td-dialog-actions\" *ngIf=\"dialogActions.length > 0\">\n    <span class=\"td-dialog-spacer\"></span>\n    <ng-content select=\"[tdDialogActions]\"></ng-content>\n  </div>\n</div>\n", styles: [".td-dialog-title{margin-top:0;margin-bottom:20px}.td-dialog-content{margin-bottom:16px}.td-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .td-dialog-actions{right:16px;left:auto}:host{display:block}:host .td-dialog-actions{flex-direction:row;box-sizing:border-box;display:flex}:host .td-dialog-actions .td-dialog-spacer{flex:1}:host .td-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] :host .td-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dialog', template: "<div class=\"td-dialog-wrapper\">\n  <h3 class=\"td-dialog-title\" *ngIf=\"dialogTitle.length > 0\">\n    <ng-content select=\"td-dialog-title\"></ng-content>\n  </h3>\n  <div class=\"td-dialog-content\" *ngIf=\"dialogContent.length > 0\">\n    <ng-content select=\"td-dialog-content\"></ng-content>\n  </div>\n  <div class=\"td-dialog-actions\" *ngIf=\"dialogActions.length > 0\">\n    <span class=\"td-dialog-spacer\"></span>\n    <ng-content select=\"td-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: [".td-dialog-title{margin-top:0;margin-bottom:20px}.td-dialog-content{margin-bottom:16px}.td-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .td-dialog-actions{right:16px;left:auto}:host{display:block}:host .td-dialog-actions{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex}:host .td-dialog-actions .td-dialog-spacer{-ms-flex:1;flex:1}:host .td-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] :host .td-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}\n"] }]
-        }], null, { dialogTitle: [{
+            args: [{ selector: 'td-dialog', template: "<div class=\"td-dialog-wrapper\">\n  <h3 class=\"td-dialog-title\" *ngIf=\"dialogTitle.length > 0\">\n    <ng-content select=\"[tdDialogTitle]\"></ng-content>\n  </h3>\n  <div class=\"td-dialog-content\" *ngIf=\"dialogContent.length > 0\">\n    <ng-content select=\"[tdDialogContent]\"></ng-content>\n  </div>\n  <div class=\"td-dialog-actions\" *ngIf=\"dialogActions.length > 0\">\n    <span class=\"td-dialog-spacer\"></span>\n    <ng-content select=\"[tdDialogActions]\"></ng-content>\n  </div>\n</div>\n", styles: [".td-dialog-title{margin-top:0;margin-bottom:20px}.td-dialog-content{margin-bottom:16px}.td-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .td-dialog-actions{right:16px;left:auto}:host{display:block}:host .td-dialog-actions{flex-direction:row;box-sizing:border-box;display:flex}:host .td-dialog-actions .td-dialog-spacer{flex:1}:host .td-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] :host .td-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}\n"] }]
+        }], propDecorators: { dialogTitle: [{
                 type: ContentChildren,
                 args: [TdDialogTitleDirective, { descendants: true }]
             }], dialogContent: [{
@@ -131,21 +71,8 @@ class TdDialogComponent {
             }], dialogActions: [{
                 type: ContentChildren,
                 args: [TdDialogActionsDirective, { descendants: true }]
-            }] });
-})();
+            }] } });
 
-function TdAlertDialogComponent_td_dialog_title_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "td-dialog-title");
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r0.title, " ");
-    }
-}
 class TdAlertDialogComponent {
     constructor(_dialogRef) {
         this._dialogRef = _dialogRef;
@@ -155,52 +82,13 @@ class TdAlertDialogComponent {
         this._dialogRef.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdAlertDialogComponent.ɵfac = function TdAlertDialogComponent_Factory(t) { return new (t || TdAlertDialogComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef)); };
-/** @nocollapse */ /** @nocollapse */ TdAlertDialogComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdAlertDialogComponent, selectors: [["td-alert-dialog"]], decls: 8, vars: 3, consts: [[4, "ngIf"], [1, "td-dialog-message"], ["mat-button", "", "color", "accent", 3, "click"]], template: function TdAlertDialogComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "td-dialog");
-            i0.ɵɵtemplate(1, TdAlertDialogComponent_td_dialog_title_1_Template, 2, 1, "td-dialog-title", 0);
-            i0.ɵɵelementStart(2, "td-dialog-content");
-            i0.ɵɵelementStart(3, "span", 1);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "td-dialog-actions");
-            i0.ɵɵelementStart(6, "button", 2);
-            i0.ɵɵlistener("click", function TdAlertDialogComponent_Template_button_click_6_listener() { return ctx.close(); });
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.title);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.message);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.closeButton);
-        }
-    }, directives: [TdDialogComponent, i3.NgIf, TdDialogTitleDirective, TdDialogContentDirective, TdDialogActionsDirective, i4.MatButton], styles: [".td-dialog-message[_ngcontent-%COMP%]{word-break:break-word}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdAlertDialogComponent, [{
+TdAlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdAlertDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+TdAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdAlertDialogComponent, selector: "td-alert-dialog", ngImport: i0, template: "<td-dialog>\n  <div tdDialogTitle *ngIf=\"title\">\n    {{ title }}\n  </div>\n  <div tdDialogContent>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n  </div>\n  <div tdDialogActions>\n    <button mat-button color=\"accent\" (click)=\"close()\">\n      {{ closeButton }}\n    </button>\n  </div>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"], components: [{ type: TdDialogComponent, selector: "td-dialog" }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TdDialogTitleDirective, selector: "[tdDialogTitle]" }, { type: TdDialogContentDirective, selector: "[tdDialogContent]" }, { type: TdDialogActionsDirective, selector: "[tdDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdAlertDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-alert-dialog', template: "<td-dialog>\n  <td-dialog-title *ngIf=\"title\">\n    {{ title }}\n  </td-dialog-title>\n  <td-dialog-content>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n  </td-dialog-content>\n  <td-dialog-actions>\n    <button mat-button color=\"accent\" (click)=\"close()\">{{ closeButton }}</button>\n  </td-dialog-actions>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"] }]
-        }], function () { return [{ type: i1.MatDialogRef }]; }, null);
-})();
+            args: [{ selector: 'td-alert-dialog', template: "<td-dialog>\n  <div tdDialogTitle *ngIf=\"title\">\n    {{ title }}\n  </div>\n  <div tdDialogContent>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n  </div>\n  <div tdDialogActions>\n    <button mat-button color=\"accent\" (click)=\"close()\">\n      {{ closeButton }}\n    </button>\n  </div>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialogRef }]; } });
 
-function TdConfirmDialogComponent_td_dialog_title_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "td-dialog-title");
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r0.title, " ");
-    }
-}
 class TdConfirmDialogComponent {
     constructor(_dialogRef) {
         this._dialogRef = _dialogRef;
@@ -215,73 +103,27 @@ class TdConfirmDialogComponent {
         this._dialogRef.close(true);
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdConfirmDialogComponent.ɵfac = function TdConfirmDialogComponent_Factory(t) { return new (t || TdConfirmDialogComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef)); };
-/** @nocollapse */ /** @nocollapse */ TdConfirmDialogComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdConfirmDialogComponent, selectors: [["td-confirm-dialog"]], decls: 12, vars: 5, consts: [[4, "ngIf"], [1, "td-dialog-message"], ["mat-button", "", 3, "keydown.arrowright", "click"], ["closeBtn", ""], ["mat-button", "", 3, "color", "keydown.arrowleft", "click"], ["acceptBtn", ""]], template: function TdConfirmDialogComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            const _r3 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "td-dialog");
-            i0.ɵɵtemplate(1, TdConfirmDialogComponent_td_dialog_title_1_Template, 2, 1, "td-dialog-title", 0);
-            i0.ɵɵelementStart(2, "td-dialog-content");
-            i0.ɵɵelementStart(3, "span", 1);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "td-dialog-actions");
-            i0.ɵɵelementStart(6, "button", 2, 3);
-            i0.ɵɵlistener("keydown.arrowright", function TdConfirmDialogComponent_Template_button_keydown_arrowright_6_listener() { i0.ɵɵrestoreView(_r3); const _r2 = i0.ɵɵreference(10); return _r2.focus(); })("click", function TdConfirmDialogComponent_Template_button_click_6_listener() { return ctx.cancel(); });
-            i0.ɵɵtext(8);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "button", 4, 5);
-            i0.ɵɵlistener("keydown.arrowleft", function TdConfirmDialogComponent_Template_button_keydown_arrowleft_9_listener() { i0.ɵɵrestoreView(_r3); const _r1 = i0.ɵɵreference(7); return _r1.focus(); })("click", function TdConfirmDialogComponent_Template_button_click_9_listener() { return ctx.accept(); });
-            i0.ɵɵtext(11);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.title);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.message);
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(ctx.cancelButton);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("color", ctx.isDestructive ? "warn" : "accent");
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.acceptButton, " ");
-        }
-    }, directives: [TdDialogComponent, i3.NgIf, TdDialogTitleDirective, TdDialogContentDirective, TdDialogActionsDirective, i4.MatButton], styles: [".td-dialog-message[_ngcontent-%COMP%]{word-break:break-word}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdConfirmDialogComponent, [{
+TdConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+TdConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdConfirmDialogComponent, selector: "td-confirm-dialog", ngImport: i0, template: "<td-dialog>\n  <div tdDialogTitle *ngIf=\"title\">\n    {{ title }}\n  </div>\n  <div tdDialogContent>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n  </div>\n  <div tdDialogActions>\n    <button\n      mat-button\n      #closeBtn\n      (keydown.arrowright)=\"acceptBtn.focus()\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelButton }}\n    </button>\n    <button\n      mat-button\n      [color]=\"isDestructive ? 'warn' : 'accent'\"\n      #acceptBtn\n      (keydown.arrowleft)=\"closeBtn.focus()\"\n      (click)=\"accept()\"\n    >\n      {{ acceptButton }}\n    </button>\n  </div>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"], components: [{ type: TdDialogComponent, selector: "td-dialog" }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TdDialogTitleDirective, selector: "[tdDialogTitle]" }, { type: TdDialogContentDirective, selector: "[tdDialogContent]" }, { type: TdDialogActionsDirective, selector: "[tdDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-confirm-dialog', template: "<td-dialog>\n  <td-dialog-title *ngIf=\"title\">\n    {{ title }}\n  </td-dialog-title>\n  <td-dialog-content>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n  </td-dialog-content>\n  <td-dialog-actions>\n    <button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{ cancelButton }}</button>\n    <button\n      mat-button\n      [color]=\"isDestructive ? 'warn' : 'accent'\"\n      #acceptBtn\n      (keydown.arrowleft)=\"closeBtn.focus()\"\n      (click)=\"accept()\"\n    >\n      {{ acceptButton }}\n    </button>\n  </td-dialog-actions>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"] }]
-        }], function () { return [{ type: i1.MatDialogRef }]; }, null);
-})();
+            args: [{ selector: 'td-confirm-dialog', template: "<td-dialog>\n  <div tdDialogTitle *ngIf=\"title\">\n    {{ title }}\n  </div>\n  <div tdDialogContent>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n  </div>\n  <div tdDialogActions>\n    <button\n      mat-button\n      #closeBtn\n      (keydown.arrowright)=\"acceptBtn.focus()\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelButton }}\n    </button>\n    <button\n      mat-button\n      [color]=\"isDestructive ? 'warn' : 'accent'\"\n      #acceptBtn\n      (keydown.arrowleft)=\"closeBtn.focus()\"\n      (click)=\"accept()\"\n    >\n      {{ acceptButton }}\n    </button>\n  </div>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialogRef }]; } });
 
-const _c0$1 = ["input"];
-function TdPromptDialogComponent_td_dialog_title_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "td-dialog-title");
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r0.title, " ");
-    }
-}
 class TdPromptDialogComponent {
-    constructor(_dialogRef) {
+    constructor(_ngZone, _dialogRef) {
+        this._ngZone = _ngZone;
         this._dialogRef = _dialogRef;
         this.cancelButton = 'CANCEL';
         this.acceptButton = 'ACCEPT';
     }
     ngAfterViewInit() {
-        // focus input once everything is rendered and good to go
-        Promise.resolve().then(() => {
-            this._input.nativeElement.focus();
-        });
+        this._ngZone.runOutsideAngular(() => 
+        // Note: `element.focus()` causes re-layout and this may lead to frame drop on slower devices.
+        // `Promise` is a microtask and microtask are executed within the current rendering frame.
+        // Animation tasks are executed within the next rendering frame.
+        // We focus input once everything is rendered and good to go.
+        requestAnimationFrame(() => this._input.nativeElement.focus()));
     }
     /**
      * Method executed when input is focused
@@ -297,71 +139,15 @@ class TdPromptDialogComponent {
         this._dialogRef.close(this.value);
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdPromptDialogComponent.ɵfac = function TdPromptDialogComponent_Factory(t) { return new (t || TdPromptDialogComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef)); };
-/** @nocollapse */ /** @nocollapse */ TdPromptDialogComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdPromptDialogComponent, selectors: [["td-prompt-dialog"]], viewQuery: function TdPromptDialogComponent_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1, 7);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._input = _t.first);
-        }
-    }, decls: 18, vars: 6, consts: [[4, "ngIf"], [1, "td-dialog-message"], ["novalidate", ""], ["form", "ngForm"], [1, "td-dialog-input-wrapper"], [1, "td-dialog-input"], ["matInput", "", "name", "value", "required", "", 3, "ngModel", "focus", "keydown.enter", "ngModelChange"], ["input", ""], ["mat-button", "", 3, "keydown.arrowright", "click"], ["closeBtn", ""], ["mat-button", "", "color", "accent", 3, "disabled", "keydown.arrowleft", "click"], ["acceptBtn", ""]], template: function TdPromptDialogComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            const _r5 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "td-dialog");
-            i0.ɵɵtemplate(1, TdPromptDialogComponent_td_dialog_title_1_Template, 2, 1, "td-dialog-title", 0);
-            i0.ɵɵelementStart(2, "td-dialog-content");
-            i0.ɵɵelementStart(3, "span", 1);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "form", 2, 3);
-            i0.ɵɵelementStart(7, "div", 4);
-            i0.ɵɵelementStart(8, "mat-form-field", 5);
-            i0.ɵɵelementStart(9, "input", 6, 7);
-            i0.ɵɵlistener("focus", function TdPromptDialogComponent_Template_input_focus_9_listener() { return ctx.handleInputFocus(); })("keydown.enter", function TdPromptDialogComponent_Template_input_keydown_enter_9_listener($event) { i0.ɵɵrestoreView(_r5); const _r1 = i0.ɵɵreference(6); $event.preventDefault(); return _r1.valid && ctx.accept(); })("ngModelChange", function TdPromptDialogComponent_Template_input_ngModelChange_9_listener($event) { return ctx.value = $event; });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "td-dialog-actions");
-            i0.ɵɵelementStart(12, "button", 8, 9);
-            i0.ɵɵlistener("keydown.arrowright", function TdPromptDialogComponent_Template_button_keydown_arrowright_12_listener() { i0.ɵɵrestoreView(_r5); const _r4 = i0.ɵɵreference(16); return _r4.focus(); })("click", function TdPromptDialogComponent_Template_button_click_12_listener() { return ctx.cancel(); });
-            i0.ɵɵtext(14);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "button", 10, 11);
-            i0.ɵɵlistener("keydown.arrowleft", function TdPromptDialogComponent_Template_button_keydown_arrowleft_15_listener() { i0.ɵɵrestoreView(_r5); const _r3 = i0.ɵɵreference(13); return _r3.focus(); })("click", function TdPromptDialogComponent_Template_button_click_15_listener() { return ctx.accept(); });
-            i0.ɵɵtext(17);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            const _r1 = i0.ɵɵreference(6);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.title);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.message);
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngModel", ctx.value);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.cancelButton);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("disabled", !_r1.valid);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.acceptButton, " ");
-        }
-    }, directives: [TdDialogComponent, i3.NgIf, TdDialogTitleDirective, TdDialogContentDirective, i4$1.ɵNgNoValidate, i4$1.NgControlStatusGroup, i4$1.NgForm, i5.MatFormField, i6.MatInput, i4$1.DefaultValueAccessor, i4$1.RequiredValidator, i4$1.NgControlStatus, i4$1.NgModel, TdDialogActionsDirective, i4.MatButton], styles: [".td-dialog-input-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex}.td-dialog-input-wrapper[_ngcontent-%COMP%]   .td-dialog-input[_ngcontent-%COMP%]{-ms-flex:1;flex:1;box-sizing:border-box}.td-dialog-message[_ngcontent-%COMP%]{word-break:break-word}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdPromptDialogComponent, [{
+TdPromptDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdPromptDialogComponent, deps: [{ token: i0.NgZone }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+TdPromptDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdPromptDialogComponent, selector: "td-prompt-dialog", viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<td-dialog>\n  <div tdDialogTitle *ngIf=\"title\">\n    {{ title }}\n  </div>\n  <div tdDialogContent>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n    <form #form=\"ngForm\" novalidate>\n      <div class=\"td-dialog-input-wrapper\">\n        <mat-form-field class=\"td-dialog-input\">\n          <input\n            matInput\n            #input\n            (focus)=\"handleInputFocus()\"\n            (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\"\n            [(ngModel)]=\"value\"\n            name=\"value\"\n            required\n          />\n        </mat-form-field>\n      </div>\n    </form>\n  </div>\n  <div tdDialogActions>\n    <button\n      mat-button\n      #closeBtn\n      (keydown.arrowright)=\"acceptBtn.focus()\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelButton }}\n    </button>\n    <button\n      mat-button\n      color=\"accent\"\n      #acceptBtn\n      (keydown.arrowleft)=\"closeBtn.focus()\"\n      [disabled]=\"!form.valid\"\n      (click)=\"accept()\"\n    >\n      {{ acceptButton }}\n    </button>\n  </div>\n</td-dialog>\n", styles: [".td-dialog-input-wrapper{flex-direction:row;box-sizing:border-box;display:flex}.td-dialog-input-wrapper .td-dialog-input{flex:1;box-sizing:border-box}.td-dialog-message{word-break:break-word}\n"], components: [{ type: TdDialogComponent, selector: "td-dialog" }, { type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TdDialogTitleDirective, selector: "[tdDialogTitle]" }, { type: TdDialogContentDirective, selector: "[tdDialogContent]" }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TdDialogActionsDirective, selector: "[tdDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdPromptDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-prompt-dialog', template: "<td-dialog>\n  <td-dialog-title *ngIf=\"title\">\n    {{ title }}\n  </td-dialog-title>\n  <td-dialog-content>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n    <form #form=\"ngForm\" novalidate>\n      <div class=\"td-dialog-input-wrapper\">\n        <mat-form-field class=\"td-dialog-input\">\n          <input\n            matInput\n            #input\n            (focus)=\"handleInputFocus()\"\n            (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\"\n            [(ngModel)]=\"value\"\n            name=\"value\"\n            required\n          />\n        </mat-form-field>\n      </div>\n    </form>\n  </td-dialog-content>\n  <td-dialog-actions>\n    <button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{ cancelButton }}</button>\n    <button\n      mat-button\n      color=\"accent\"\n      #acceptBtn\n      (keydown.arrowleft)=\"closeBtn.focus()\"\n      [disabled]=\"!form.valid\"\n      (click)=\"accept()\"\n    >\n      {{ acceptButton }}\n    </button>\n  </td-dialog-actions>\n</td-dialog>\n", styles: [".td-dialog-input-wrapper{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex}.td-dialog-input-wrapper .td-dialog-input{-ms-flex:1;flex:1;box-sizing:border-box}.td-dialog-message{word-break:break-word}\n"] }]
-        }], function () { return [{ type: i1.MatDialogRef }]; }, { _input: [{
+            args: [{ selector: 'td-prompt-dialog', template: "<td-dialog>\n  <div tdDialogTitle *ngIf=\"title\">\n    {{ title }}\n  </div>\n  <div tdDialogContent>\n    <span class=\"td-dialog-message\">{{ message }}</span>\n    <form #form=\"ngForm\" novalidate>\n      <div class=\"td-dialog-input-wrapper\">\n        <mat-form-field class=\"td-dialog-input\">\n          <input\n            matInput\n            #input\n            (focus)=\"handleInputFocus()\"\n            (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\"\n            [(ngModel)]=\"value\"\n            name=\"value\"\n            required\n          />\n        </mat-form-field>\n      </div>\n    </form>\n  </div>\n  <div tdDialogActions>\n    <button\n      mat-button\n      #closeBtn\n      (keydown.arrowright)=\"acceptBtn.focus()\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelButton }}\n    </button>\n    <button\n      mat-button\n      color=\"accent\"\n      #acceptBtn\n      (keydown.arrowleft)=\"closeBtn.focus()\"\n      [disabled]=\"!form.valid\"\n      (click)=\"accept()\"\n    >\n      {{ acceptButton }}\n    </button>\n  </div>\n</td-dialog>\n", styles: [".td-dialog-input-wrapper{flex-direction:row;box-sizing:border-box;display:flex}.td-dialog-input-wrapper .td-dialog-input{flex:1;box-sizing:border-box}.td-dialog-message{word-break:break-word}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.MatDialogRef }]; }, propDecorators: { _input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
-            }] });
-})();
+            }] } });
 
 class TdDialogService {
     constructor(_document, _dialogService, _dragDrop, rendererFactory) {
@@ -369,7 +155,7 @@ class TdDialogService {
         this._dialogService = _dialogService;
         this._dragDrop = _dragDrop;
         this.rendererFactory = rendererFactory;
-        this._renderer2 = rendererFactory.createRenderer(undefined, undefined);
+        this._renderer2 = rendererFactory.createRenderer(undefined, null);
     }
     /**
      * params:
@@ -480,14 +266,17 @@ class TdDialogService {
         const CDK_OVERLAY_PANE_SELECTOR = '.cdk-overlay-pane';
         const CDK_OVERLAY_CONTAINER_SELECTOR = '.cdk-overlay-container';
         matDialogRef.afterOpened().subscribe(() => {
-            const dialogElement = this._document.getElementById(matDialogRef.id);
+            const dialogElement = (this._document.getElementById(matDialogRef.id));
             const draggableElement = this._dragDrop.createDrag(dialogElement);
             if (draggableClass) {
                 const childComponent = dialogElement.firstElementChild;
                 this._renderer2.addClass(childComponent, draggableClass);
             }
             if (dragHandleSelectors && dragHandleSelectors.length) {
-                const dragHandles = dragHandleSelectors.reduce((acc, curr) => [...acc, ...Array.from(dialogElement.querySelectorAll(curr))], []);
+                const dragHandles = dragHandleSelectors.reduce((acc, curr) => [
+                    ...acc,
+                    ...Array.from(dialogElement.querySelectorAll(curr)),
+                ], []);
                 if (dragHandles.length > 0) {
                     draggableElement.withHandles(dragHandles);
                 }
@@ -511,20 +300,17 @@ class TdDialogService {
         return dialogConfig;
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDialogService.ɵfac = function TdDialogService_Factory(t) { return new (t || TdDialogService)(i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i1.MatDialog), i0.ɵɵinject(i2.DragDrop), i0.ɵɵinject(i0.RendererFactory2)); };
-/** @nocollapse */ /** @nocollapse */ TdDialogService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TdDialogService, factory: TdDialogService.ɵfac });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogService, [{
+TdDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogService, deps: [{ token: DOCUMENT }, { token: i1.MatDialog }, { token: i2.DragDrop }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+TdDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDialogService, decorators: [{
             type: Injectable
-        }], function () {
+        }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
                     }] }, { type: i1.MatDialog }, { type: i2.DragDrop }, { type: i0.RendererFactory2 }];
-    }, null);
-})();
+    } });
 
-const _c0 = ["*"];
 class TdWindowDialogComponent {
     constructor() {
         this.docked = false;
@@ -536,46 +322,12 @@ class TdWindowDialogComponent {
         this.dockToggled.emit(this.docked);
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdWindowDialogComponent.ɵfac = function TdWindowDialogComponent_Factory(t) { return new (t || TdWindowDialogComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdWindowDialogComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdWindowDialogComponent, selectors: [["td-window-dialog"]], inputs: { toolbarColor: "toolbarColor", docked: "docked", title: "title", toggleDockedStateLabel: "toggleDockedStateLabel", closeLabel: "closeLabel" }, outputs: { dockToggled: "dockToggled", closed: "closed" }, ngContentSelectors: _c0, decls: 9, vars: 11, consts: [[1, "td-window-dialog-toolbar", 3, "color"], ["layout", "row", "layout-align", "start center", "flex", ""], ["flex", "", 1, "mat-title", "td-window-dialog-title", "truncate"], ["mat-icon-button", "", 1, "td-window-dialog-close", 3, "matTooltip", "click"]], template: function TdWindowDialogComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "mat-toolbar", 0);
-            i0.ɵɵelementStart(1, "mat-toolbar-row");
-            i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵelementStart(3, "span", 2);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "button", 3);
-            i0.ɵɵlistener("click", function TdWindowDialogComponent_Template_button_click_5_listener() { return ctx.closed.emit(); });
-            i0.ɵɵelementStart(6, "mat-icon");
-            i0.ɵɵtext(7, "close");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵprojection(8);
-        }
-        if (rf & 2) {
-            i0.ɵɵstyleProp("min-height", ctx.toolbarHeight, "px")("cursor", ctx.docked ? "inherit" : "move");
-            i0.ɵɵproperty("color", ctx.toolbarColor);
-            i0.ɵɵadvance(1);
-            i0.ɵɵstyleProp("height", ctx.toolbarHeight, "px");
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", ctx.title, " ");
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("matTooltip", ctx.closeLabel);
-            i0.ɵɵattribute("data-test", "close-button");
-            i0.ɵɵadvance(1);
-            i0.ɵɵattribute("aria-label", ctx.closeLabel);
-        }
-    }, directives: [i1$1.MatToolbar, i1$1.MatToolbarRow, i4.MatButton, i3$1.MatTooltip, i4$2.MatIcon], styles: ["[_nghost-%COMP%]{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.truncate[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.td-window-dialog-toolbar[_ngcontent-%COMP%]{background:none}.td-window-dialog-title[_ngcontent-%COMP%]{margin-bottom:0}.td-window-dialog-close[_ngcontent-%COMP%]{margin-right:-8px}  .td-window-dialog .mat-dialog-container{padding:0}"], changeDetection: 0 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdWindowDialogComponent, [{
+TdWindowDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdWindowDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdWindowDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdWindowDialogComponent, selector: "td-window-dialog", inputs: { toolbarColor: "toolbarColor", docked: "docked", title: "title", toggleDockedStateLabel: "toggleDockedStateLabel", closeLabel: "closeLabel" }, outputs: { dockToggled: "dockToggled", closed: "closed" }, ngImport: i0, template: "<mat-toolbar\n  [color]=\"toolbarColor\"\n  class=\"td-window-dialog-toolbar\"\n  [style.min-height.px]=\"toolbarHeight\"\n  [style.cursor]=\"docked ? 'inherit' : 'move'\"\n>\n  <mat-toolbar-row [style.height.px]=\"toolbarHeight\">\n    <div layout=\"row\" layout-align=\"start center\" flex>\n      <span class=\"mat-title td-window-dialog-title truncate\" flex>\n        {{ title }}\n      </span>\n      <!-- TODO: Resizing a drag-and-drop element was not working so removed docking/undocking for now-->\n      <!-- <button mat-icon-button [matTooltip]=\"toggleDockedStateLabel\" (click)=\"toggleDockedState()\">\n        <mat-icon [attr.aria-label]=\"toggleDockedStateLabel\">\n          {{ docked ? 'unfold_more' : 'unfold_less' }}\n        </mat-icon>\n      </button> -->\n\n      <button\n        mat-icon-button\n        [matTooltip]=\"closeLabel ?? ''\"\n        (click)=\"closed.emit()\"\n        class=\"td-window-dialog-close\"\n        [attr.data-test]=\"'close-button'\"\n      >\n        <mat-icon [attr.aria-label]=\"closeLabel\">close</mat-icon>\n      </button>\n    </div>\n  </mat-toolbar-row>\n</mat-toolbar>\n<ng-content></ng-content>\n", styles: [":host{height:100%;display:flex;flex-direction:column}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.td-window-dialog-toolbar{background:none}.td-window-dialog-title{margin-bottom:0}.td-window-dialog-close{margin-right:-8px}::ng-deep .td-window-dialog .mat-dialog-container{padding:0}\n"], components: [{ type: i1$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdWindowDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-window-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar\n  [color]=\"toolbarColor\"\n  class=\"td-window-dialog-toolbar\"\n  [style.min-height.px]=\"toolbarHeight\"\n  [style.cursor]=\"docked ? 'inherit' : 'move'\"\n>\n  <mat-toolbar-row [style.height.px]=\"toolbarHeight\">\n    <div layout=\"row\" layout-align=\"start center\" flex>\n      <span class=\"mat-title td-window-dialog-title truncate\" flex>\n        {{ title }}\n      </span>\n      <!-- TODO: Resizing a drag-and-drop element was not working so removed docking/undocking for now-->\n      <!-- <button mat-icon-button [matTooltip]=\"toggleDockedStateLabel\" (click)=\"toggleDockedState()\">\n        <mat-icon [attr.aria-label]=\"toggleDockedStateLabel\">\n          {{ docked ? 'unfold_more' : 'unfold_less' }}\n        </mat-icon>\n      </button> -->\n\n      <button\n        mat-icon-button\n        [matTooltip]=\"closeLabel\"\n        (click)=\"closed.emit()\"\n        class=\"td-window-dialog-close\"\n        [attr.data-test]=\"'close-button'\"\n      >\n        <mat-icon [attr.aria-label]=\"closeLabel\">close</mat-icon>\n      </button>\n    </div>\n  </mat-toolbar-row>\n</mat-toolbar>\n<ng-content></ng-content>\n", styles: [":host{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.td-window-dialog-toolbar{background:none}.td-window-dialog-title{margin-bottom:0}.td-window-dialog-close{margin-right:-8px}::ng-deep .td-window-dialog .mat-dialog-container{padding:0}\n"] }]
-        }], null, { toolbarColor: [{
+            args: [{ selector: 'td-window-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar\n  [color]=\"toolbarColor\"\n  class=\"td-window-dialog-toolbar\"\n  [style.min-height.px]=\"toolbarHeight\"\n  [style.cursor]=\"docked ? 'inherit' : 'move'\"\n>\n  <mat-toolbar-row [style.height.px]=\"toolbarHeight\">\n    <div layout=\"row\" layout-align=\"start center\" flex>\n      <span class=\"mat-title td-window-dialog-title truncate\" flex>\n        {{ title }}\n      </span>\n      <!-- TODO: Resizing a drag-and-drop element was not working so removed docking/undocking for now-->\n      <!-- <button mat-icon-button [matTooltip]=\"toggleDockedStateLabel\" (click)=\"toggleDockedState()\">\n        <mat-icon [attr.aria-label]=\"toggleDockedStateLabel\">\n          {{ docked ? 'unfold_more' : 'unfold_less' }}\n        </mat-icon>\n      </button> -->\n\n      <button\n        mat-icon-button\n        [matTooltip]=\"closeLabel ?? ''\"\n        (click)=\"closed.emit()\"\n        class=\"td-window-dialog-close\"\n        [attr.data-test]=\"'close-button'\"\n      >\n        <mat-icon [attr.aria-label]=\"closeLabel\">close</mat-icon>\n      </button>\n    </div>\n  </mat-toolbar-row>\n</mat-toolbar>\n<ng-content></ng-content>\n", styles: [":host{height:100%;display:flex;flex-direction:column}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.td-window-dialog-toolbar{background:none}.td-window-dialog-title{margin-bottom:0}.td-window-dialog-close{margin-right:-8px}::ng-deep .td-window-dialog .mat-dialog-container{padding:0}\n"] }]
+        }], propDecorators: { toolbarColor: [{
                 type: Input
             }], docked: [{
                 type: Input
@@ -589,8 +341,7 @@ class TdWindowDialogComponent {
                 type: Output
             }], closed: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 const TD_DIALOGS = [
     TdAlertDialogComponent,
@@ -601,17 +352,42 @@ const TD_DIALOGS = [
     TdDialogActionsDirective,
     TdDialogContentDirective,
     TdWindowDialogComponent,
-];
-const TD_DIALOGS_ENTRY_COMPONENTS = [
     TdAlertDialogComponent,
     TdConfirmDialogComponent,
     TdPromptDialogComponent,
 ];
 class CovalentDialogsModule {
 }
-/** @nocollapse */ /** @nocollapse */ CovalentDialogsModule.ɵfac = function CovalentDialogsModule_Factory(t) { return new (t || CovalentDialogsModule)(); };
-/** @nocollapse */ /** @nocollapse */ CovalentDialogsModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentDialogsModule });
-/** @nocollapse */ /** @nocollapse */ CovalentDialogsModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [TdDialogService], imports: [[
+CovalentDialogsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDialogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentDialogsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDialogsModule, declarations: [TdAlertDialogComponent,
+        TdConfirmDialogComponent,
+        TdPromptDialogComponent,
+        TdDialogComponent,
+        TdDialogTitleDirective,
+        TdDialogActionsDirective,
+        TdDialogContentDirective,
+        TdWindowDialogComponent,
+        TdAlertDialogComponent,
+        TdConfirmDialogComponent,
+        TdPromptDialogComponent], imports: [FormsModule,
+        CommonModule,
+        MatDialogModule,
+        MatInputModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        MatIconModule], exports: [TdAlertDialogComponent,
+        TdConfirmDialogComponent,
+        TdPromptDialogComponent,
+        TdDialogComponent,
+        TdDialogTitleDirective,
+        TdDialogActionsDirective,
+        TdDialogContentDirective,
+        TdWindowDialogComponent,
+        TdAlertDialogComponent,
+        TdConfirmDialogComponent,
+        TdPromptDialogComponent] });
+CovalentDialogsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDialogsModule, providers: [TdDialogService], imports: [[
             FormsModule,
             CommonModule,
             MatDialogModule,
@@ -621,8 +397,7 @@ class CovalentDialogsModule {
             MatTooltipModule,
             MatIconModule,
         ]] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentDialogsModule, [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDialogsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -635,36 +410,11 @@ class CovalentDialogsModule {
                         MatTooltipModule,
                         MatIconModule,
                     ],
-                    declarations: [TD_DIALOGS],
-                    exports: [TD_DIALOGS],
+                    declarations: [...TD_DIALOGS],
+                    exports: [...TD_DIALOGS],
                     providers: [TdDialogService],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentDialogsModule, { declarations: [TdAlertDialogComponent,
-            TdConfirmDialogComponent,
-            TdPromptDialogComponent,
-            TdDialogComponent,
-            TdDialogTitleDirective,
-            TdDialogActionsDirective,
-            TdDialogContentDirective,
-            TdWindowDialogComponent], imports: [FormsModule,
-            CommonModule,
-            MatDialogModule,
-            MatInputModule,
-            MatButtonModule,
-            MatToolbarModule,
-            MatTooltipModule,
-            MatIconModule], exports: [TdAlertDialogComponent,
-            TdConfirmDialogComponent,
-            TdPromptDialogComponent,
-            TdDialogComponent,
-            TdDialogTitleDirective,
-            TdDialogActionsDirective,
-            TdDialogContentDirective,
-            TdWindowDialogComponent] });
-})();
+        }] });
 
 var corners;
 (function (corners) {
@@ -723,19 +473,30 @@ class ResizableDraggableDialog {
         return (this._document.getElementById(this._dialogRef.id) || {}).parentElement;
     }
     _getViewportDimensions() {
-        return this._getDialogWrapper().parentElement.getBoundingClientRect();
+        var _a, _b;
+        return (_b = (_a = this._getDialogWrapper()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
     }
     _getDialogWrapperDimensions() {
-        const dimensions = getComputedStyle(this._getDialogWrapper());
+        const wrapper = this._getDialogWrapper();
+        if (!wrapper) {
+            return { width: 0, height: 0 };
+        }
+        const dimensions = getComputedStyle(wrapper);
         return {
             width: getPixels(dimensions.width),
             height: getPixels(dimensions.height),
         };
     }
     _initialPositionReset() {
-        const { right: viewportWidth, bottom: viewportHeight } = this._getViewportDimensions();
+        var _a, _b, _c, _d, _e;
+        const viewportWidth = (_b = (_a = this._getViewportDimensions()) === null || _a === void 0 ? void 0 : _a.right) !== null && _b !== void 0 ? _b : 0;
+        const viewportHeight = (_d = (_c = this._getViewportDimensions()) === null || _c === void 0 ? void 0 : _c.bottom) !== null && _d !== void 0 ? _d : 0;
         const { width, height } = this._getDialogWrapperDimensions();
-        const { marginRight: originalDialogRight, marginLeft: originalDialogLeft, marginBottom: originalDialogBottom, marginTop: originalDialogTop, } = this._getDialogWrapper().style;
+        const wrapperStyle = (_e = this._getDialogWrapper()) === null || _e === void 0 ? void 0 : _e.style;
+        const originalDialogRight = wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.marginRight;
+        const originalDialogLeft = wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.marginLeft;
+        const originalDialogBottom = wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.marginBottom;
+        const originalDialogTop = wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.marginTop;
         let x;
         if (originalDialogLeft) {
             x = getPixels(originalDialogLeft);
@@ -757,7 +518,12 @@ class ResizableDraggableDialog {
             y = (viewportHeight - height) / 2;
         }
         // use drag ref's mechanisms for positioning instead of the dialog's
-        this._dialogRef.updatePosition({ top: '0px', right: '0px', bottom: '0px', left: '0px' });
+        this._dialogRef.updatePosition({
+            top: '0px',
+            right: '0px',
+            bottom: '0px',
+            left: '0px',
+        });
         this._dragRef.setFreeDragPosition({ x, y });
     }
     _attachCorners() {
@@ -792,7 +558,7 @@ class ResizableDraggableDialog {
                 topBottom = verticalAlignment.bottom;
                 rightLeft = horizontalAlignment.left;
             }
-            else if (corner === corners.topLeft) {
+            else {
                 cursor = cursors.nwse;
                 topBottom = verticalAlignment.top;
                 rightLeft = horizontalAlignment.left;
@@ -807,13 +573,17 @@ class ResizableDraggableDialog {
         });
     }
     _handleMouseDown(event, corner) {
+        var _a, _b, _c, _d, _e, _f, _g;
         this._renderer2.setStyle(this._document.body, 'user-select', 'none');
         const { width: originalWidth, height: originalHeight } = this._getDialogWrapperDimensions();
         const originalMouseX = event.pageX;
         const originalMouseY = event.pageY;
         const { x: currentTransformX, y: currentTransformY } = this._dragRef.getFreeDragPosition();
-        const { bottom: distanceFromBottom, right: distanceFromRight } = this._getDialogWrapper().getBoundingClientRect();
-        const { right: viewportWidth, bottom: viewportHeight } = this._getViewportDimensions();
+        const wrapper = (_a = this._getDialogWrapper()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const distanceFromBottom = (_b = wrapper === null || wrapper === void 0 ? void 0 : wrapper.bottom) !== null && _b !== void 0 ? _b : 0;
+        const distanceFromRight = (_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.right) !== null && _c !== void 0 ? _c : 0;
+        const viewportWidth = (_e = (_d = this._getViewportDimensions()) === null || _d === void 0 ? void 0 : _d.right) !== null && _e !== void 0 ? _e : 0;
+        const viewportHeight = (_g = (_f = this._getViewportDimensions()) === null || _f === void 0 ? void 0 : _f.bottom) !== null && _g !== void 0 ? _g : 0;
         const mouseMoveSub = fromEvent(window, 'pointermove').subscribe((e) => {
             e.preventDefault(); // prevent highlighting of text when dragging
             const yDelta = clamp(0, e.pageY, viewportHeight) - originalMouseY;
@@ -844,7 +614,7 @@ class ResizableDraggableDialog {
                 newTransformX = clamp(0, currentTransformX + xDelta, distanceFromRight - newWidth);
             }
             // top left
-            else if (corner === corners.topLeft) {
+            else {
                 newHeight = clamp(minHeight, originalHeight - yDelta, viewportHeight);
                 newWidth = clamp(minWidth, originalWidth - xDelta, viewportWidth);
                 newTransformX = clamp(0, currentTransformX + xDelta, distanceFromRight - newWidth);