@covalent/core 4.0.0-beta.1 → 4.1.1-beta.3

package/fesm2020/covalent-core-layout.mjs

@@ -1,28 +1,26 @@
 import * as i0 from '@angular/core';
 import { Component, ViewChild, Input, Directive, HostListener, forwardRef, Optional, Inject, SecurityContext, ContentChildren, NgModule } from '@angular/core';
-import * as i3$1 from '@angular/common';
+import * as i4$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5$1 from '@angular/cdk/scrolling';
+import * as i5 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i1 from '@angular/material/sidenav';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import * as i3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i6 from '@angular/material/button';
+import * as i5$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/icon';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i4 from '@angular/material/divider';
+import * as i3$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { CovalentMenuModule } from '@covalent/core/menu';
 import { mixinDisabled, tdCollapseAnimation } from '@covalent/core/common';
 import * as i1$1 from '@angular/router';
 import * as i2$1 from '@angular/platform-browser';
 
-const _c0$6 = [[["td-navigation-drawer"]], [["", "td-sidenav-content", ""]], "*"];
-const _c1$5 = ["td-navigation-drawer", "[td-sidenav-content]", "*"];
 class TdLayoutComponent {
     constructor() {
         /**
@@ -93,42 +91,23 @@ class TdLayoutComponent {
         return this.sidenav.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutComponent.ɵfac = function TdLayoutComponent_Factory(t) { return new (t || TdLayoutComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdLayoutComponent, selectors: [["td-layout"]], viewQuery: function TdLayoutComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(MatSidenav, 7);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenav = _t.first);
-    } }, inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, ngContentSelectors: _c1$5, decls: 6, vars: 8, consts: [["fullscreen", "", 3, "autosize"], [1, "td-layout-sidenav", 3, "mode", "opened", "disableClose"], ["sidenav", ""]], template: function TdLayoutComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c0$6);
-        i0.ɵɵelementStart(0, "mat-sidenav-container", 0);
-        i0.ɵɵelementStart(1, "mat-sidenav", 1, 2);
-        i0.ɵɵprojection(3);
-        i0.ɵɵprojection(4, 1);
-        i0.ɵɵelementEnd();
-        i0.ɵɵprojection(5, 2);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("autosize", ctx.containerAutosize);
-        i0.ɵɵadvance(1);
-        i0.ɵɵstyleProp("max-width", ctx.sidenavWidth)("min-width", ctx.sidenavWidth);
-        i0.ɵɵproperty("mode", ctx.mode)("opened", ctx.opened)("disableClose", ctx.disableClose);
-    } }, directives: [i1.MatSidenavContainer, i1.MatSidenav], styles: ["[_nghost-%COMP%]{display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}[_nghost-%COMP%]    >mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutComponent, [{
-        type: Component,
-        args: [{ selector: 'td-layout', template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n  <mat-sidenav\n    #sidenav\n    class=\"td-layout-sidenav\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n    [disableClose]=\"disableClose\"\n  >\n    <ng-content select=\"td-navigation-drawer\"></ng-content>\n    <ng-content select=\"[td-sidenav-content]\"></ng-content>\n  </mat-sidenav>\n  <ng-content></ng-content>\n</mat-sidenav-container>\n", styles: [":host{display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}\n"] }]
-    }], null, { sidenav: [{
-            type: ViewChild,
-            args: [MatSidenav, { static: true }]
-        }], mode: [{
-            type: Input
-        }], opened: [{
-            type: Input
-        }], sidenavWidth: [{
-            type: Input
-        }], containerAutosize: [{
-            type: Input
-        }] }); })();
+TdLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutComponent, selector: "td-layout", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n  <mat-sidenav\n    #sidenav\n    class=\"td-layout-sidenav\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n    [disableClose]=\"disableClose\"\n  >\n    <ng-content select=\"td-navigation-drawer\"></ng-content>\n    <ng-content select=\"[td-sidenav-content]\"></ng-content>\n  </mat-sidenav>\n  <ng-content></ng-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:flex;flex-direction:column}\n"], components: [{ type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-layout', template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n  <mat-sidenav\n    #sidenav\n    class=\"td-layout-sidenav\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n    [disableClose]=\"disableClose\"\n  >\n    <ng-content select=\"td-navigation-drawer\"></ng-content>\n    <ng-content select=\"[td-sidenav-content]\"></ng-content>\n  </mat-sidenav>\n  <ng-content></ng-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { sidenav: [{
+                type: ViewChild,
+                args: [MatSidenav, { static: true }]
+            }], mode: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], sidenavWidth: [{
+                type: Input
+            }], containerAutosize: [{
+                type: Input
+            }] } });
 
 class LayoutToggleBase {
 }
@@ -185,7 +164,8 @@ class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
         if (!this.disabled) {
             // if layout has been provided, try triggering the click on it
             // else show warn message
-            if (this._layout && this._layout.open) {
+            console.log(this._layout.opened);
+            if (this._layout && !this._layout.opened) {
                 this.onClick();
             }
             else {
@@ -208,19 +188,16 @@ class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
         console.warn('Covalent: Parent layout not found for layout toggle directive');
     }
 }
-/** @nocollapse */ /** @nocollapse */ BaseLayoutToggleDirective.ɵfac = function BaseLayoutToggleDirective_Factory(t) { i0.ɵɵinvalidFactory(); };
-/** @nocollapse */ /** @nocollapse */ BaseLayoutToggleDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: BaseLayoutToggleDirective, hostBindings: function BaseLayoutToggleDirective_HostBindings(rf, ctx) { if (rf & 1) {
-        i0.ɵɵlistener("click", function BaseLayoutToggleDirective_click_HostBindingHandler($event) { return ctx.clickListener($event); });
-    } }, inputs: { hideWhenOpened: "hideWhenOpened" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseLayoutToggleDirective, [{
-        type: Directive
-    }], function () { return [{ type: undefined }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { hideWhenOpened: [{
-            type: Input,
-            args: ['hideWhenOpened']
-        }], clickListener: [{
-            type: HostListener,
-            args: ['click', ['$event']]
-        }] }); })();
+BaseLayoutToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BaseLayoutToggleDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: BaseLayoutToggleDirective, inputs: { hideWhenOpened: "hideWhenOpened" }, host: { listeners: { "click": "clickListener($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BaseLayoutToggleDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hideWhenOpened: [{
+                type: Input
+            }], clickListener: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
@@ -233,22 +210,21 @@ class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
         this._layout.toggle();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutToggleDirective.ɵfac = function TdLayoutToggleDirective_Factory(t) { return new (t || TdLayoutToggleDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutToggleDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutToggleDirective, selectors: [["", "tdLayoutToggle", ""]], inputs: { tdLayoutToggle: "tdLayoutToggle" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutToggleDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutToggle]',
-            }]
-    }], function () { return [{ type: TdLayoutComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutToggle: [{
-            type: Input,
-            args: ['tdLayoutToggle']
-        }] }); })();
+TdLayoutToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutToggleDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutToggleDirective, selector: "[tdLayoutToggle]", inputs: { tdLayoutToggle: "tdLayoutToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutToggle]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutToggle: [{
+                type: Input
+            }] } });
 class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
@@ -260,22 +236,21 @@ class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
         this._layout.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutCloseDirective.ɵfac = function TdLayoutCloseDirective_Factory(t) { return new (t || TdLayoutCloseDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutCloseDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutCloseDirective, selectors: [["", "tdLayoutClose", ""]], inputs: { tdLayoutClose: "tdLayoutClose" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutCloseDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutClose]',
-            }]
-    }], function () { return [{ type: TdLayoutComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutClose: [{
-            type: Input,
-            args: ['tdLayoutClose']
-        }] }); })();
+TdLayoutCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutCloseDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutCloseDirective, selector: "[tdLayoutClose]", inputs: { tdLayoutClose: "tdLayoutClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutClose]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutClose: [{
+                type: Input
+            }] } });
 class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
@@ -287,67 +262,23 @@ class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
         this._layout.open();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutOpenDirective.ɵfac = function TdLayoutOpenDirective_Factory(t) { return new (t || TdLayoutOpenDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutOpenDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutOpenDirective, selectors: [["", "tdLayoutOpen", ""]], inputs: { tdLayoutClose: ["tdLayoutOpen", "tdLayoutClose"] }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutOpenDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutOpen]',
-            }]
-    }], function () { return [{ type: TdLayoutComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutClose: [{
-            type: Input,
-            args: ['tdLayoutOpen']
-        }] }); })();
+TdLayoutOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutOpenDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutOpenDirective, selector: "[tdLayoutOpen]", inputs: { tdLayoutClose: ["tdLayoutOpen", "tdLayoutClose"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutOpenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutOpen]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutClose: [{
+                type: Input,
+                args: ['tdLayoutOpen']
+            }] } });
 
-function TdLayoutNavComponent_span_3_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r1.icon);
-} }
-function TdLayoutNavComponent_span_3_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 7);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("svgIcon", ctx_r2.logo);
-} }
-function TdLayoutNavComponent_span_3_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r3.toolbarTitle);
-} }
-function TdLayoutNavComponent_span_3_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 4);
-    i0.ɵɵlistener("click", function TdLayoutNavComponent_span_3_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.handleNavigationClick(); });
-    i0.ɵɵtemplate(1, TdLayoutNavComponent_span_3_mat_icon_1_Template, 2, 1, "mat-icon", 5);
-    i0.ɵɵtemplate(2, TdLayoutNavComponent_span_3_mat_icon_2_Template, 1, 1, "mat-icon", 6);
-    i0.ɵɵtemplate(3, TdLayoutNavComponent_span_3_span_3_Template, 2, 1, "span", 5);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("cursor-pointer", ctx_r0.routerEnabled);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.icon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.logo && !ctx_r0.icon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.toolbarTitle);
-} }
-const _c0$5 = [[["", "td-menu-button", ""]], [["", "td-toolbar-content", ""]], "*", [["td-layout-footer"]]];
-const _c1$4 = ["[td-menu-button]", "[td-toolbar-content]", "*", "td-layout-footer"];
 class TdLayoutNavComponent {
     constructor(_router) {
         this._router = _router;
@@ -366,92 +297,30 @@ class TdLayoutNavComponent {
         return !!this._router && !!this.navigationRoute;
     }
     handleNavigationClick() {
-        if (this.routerEnabled) {
+        if (this.routerEnabled && this.navigationRoute) {
             this._router.navigateByUrl(this.navigationRoute);
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavComponent.ɵfac = function TdLayoutNavComponent_Factory(t) { return new (t || TdLayoutNavComponent)(i0.ɵɵdirectiveInject(i1$1.Router, 8)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdLayoutNavComponent, selectors: [["td-layout-nav"]], inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute" }, ngContentSelectors: _c1$4, decls: 8, vars: 2, consts: [[1, "td-layout-nav-wrapper"], [1, "td-layout-toolbar", 3, "color"], ["class", "td-layout-nav-toolbar-content", 3, "cursor-pointer", "click", 4, "ngIf"], ["cdkScrollable", "", 1, "td-layout-nav-content"], [1, "td-layout-nav-toolbar-content", 3, "click"], [4, "ngIf"], ["class", "mat-icon-logo", 3, "svgIcon", 4, "ngIf"], [1, "mat-icon-logo", 3, "svgIcon"]], template: function TdLayoutNavComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c0$5);
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelementStart(1, "mat-toolbar", 1);
-        i0.ɵɵprojection(2);
-        i0.ɵɵtemplate(3, TdLayoutNavComponent_span_3_Template, 4, 5, "span", 2);
-        i0.ɵɵprojection(4, 1);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(5, "div", 3);
-        i0.ɵɵprojection(6, 2);
-        i0.ɵɵelementEnd();
-        i0.ɵɵprojection(7, 3);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("color", ctx.color);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.icon || ctx.logo || ctx.toolbarTitle);
-    } }, directives: [i3.MatToolbar, i3$1.NgIf, i5.MatIcon, i5$1.CdkScrollable], styles: [".td-menu-button[_ngcontent-%COMP%]{margin-left:0}  [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}[_nghost-%COMP%]{display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}[_nghost-%COMP%]   .td-layout-nav-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%}[_nghost-%COMP%]   .td-layout-nav-wrapper[_ngcontent-%COMP%]   .td-layout-nav-toolbar-content[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:flex-start}[_nghost-%COMP%]   .td-layout-nav-wrapper[_ngcontent-%COMP%]   .td-layout-nav-content[_ngcontent-%COMP%]{-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavComponent, [{
-        type: Component,
-        args: [{ selector: 'td-layout-nav', template: "<div class=\"td-layout-nav-wrapper\">\n  <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n    <ng-content select=\"[td-menu-button]\"></ng-content>\n    <span\n      *ngIf=\"icon || logo || toolbarTitle\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n      class=\"td-layout-nav-toolbar-content\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n      <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n    </span>\n    <ng-content select=\"[td-toolbar-content]\"></ng-content>\n  </mat-toolbar>\n  <div class=\"td-layout-nav-content\" cdkScrollable>\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n", styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"] }]
-    }], function () { return [{ type: i1$1.Router, decorators: [{
-                type: Optional
-            }] }]; }, { toolbarTitle: [{
-            type: Input
-        }], icon: [{
-            type: Input
-        }], logo: [{
-            type: Input
-        }], color: [{
-            type: Input
-        }], navigationRoute: [{
-            type: Input
-        }] }); })();
+TdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavComponent, deps: [{ token: i1$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutNavComponent, selector: "td-layout-nav", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute" }, ngImport: i0, template: "<div class=\"td-layout-nav-wrapper\">\n  <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n    <ng-content select=\"[td-menu-button]\"></ng-content>\n    <span\n      *ngIf=\"icon || logo || toolbarTitle\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n      class=\"td-layout-nav-toolbar-content\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n    </span>\n    <ng-content select=\"[td-toolbar-content]\"></ng-content>\n  </mat-toolbar>\n  <div class=\"td-layout-nav-content\" cdkScrollable>\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n", styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-layout-nav', template: "<div class=\"td-layout-nav-wrapper\">\n  <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n    <ng-content select=\"[td-menu-button]\"></ng-content>\n    <span\n      *ngIf=\"icon || logo || toolbarTitle\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n      class=\"td-layout-nav-toolbar-content\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n    </span>\n    <ng-content select=\"[td-toolbar-content]\"></ng-content>\n  </mat-toolbar>\n  <div class=\"td-layout-nav-content\" cdkScrollable>\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n", styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { toolbarTitle: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], logo: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], navigationRoute: [{
+                type: Input
+            }] } });
 
-function TdLayoutNavListComponent_span_6_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r2.icon);
-} }
-function TdLayoutNavListComponent_span_6_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 11);
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("svgIcon", ctx_r3.logo);
-} }
-function TdLayoutNavListComponent_span_6_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r4.toolbarTitle);
-} }
-function TdLayoutNavListComponent_span_6_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 8);
-    i0.ɵɵlistener("click", function TdLayoutNavListComponent_span_6_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return ctx_r5.handleNavigationClick(); });
-    i0.ɵɵtemplate(1, TdLayoutNavListComponent_span_6_mat_icon_1_Template, 2, 1, "mat-icon", 9);
-    i0.ɵɵtemplate(2, TdLayoutNavListComponent_span_6_mat_icon_2_Template, 1, 1, "mat-icon", 10);
-    i0.ɵɵtemplate(3, TdLayoutNavListComponent_span_6_span_3_Template, 2, 1, "span", 9);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("cursor-pointer", ctx_r1.routerEnabled);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.icon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.logo && !ctx_r1.icon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.toolbarTitle);
-} }
-const _c0$4 = [[["", "td-menu-button", ""]], [["", "td-sidenav-toolbar-content", ""]], [["", "td-sidenav-content", ""]], [["", "td-toolbar-content", ""]], "*", [["td-layout-footer-inner"]], [["td-layout-footer"]]];
-const _c1$3 = ["[td-menu-button]", "[td-sidenav-toolbar-content]", "[td-sidenav-content]", "[td-toolbar-content]", "*", "td-layout-footer-inner", "td-layout-footer"];
 class TdLayoutNavListComponent {
     constructor(_router) {
         this._router = _router;
@@ -517,7 +386,7 @@ class TdLayoutNavListComponent {
         return !!this._router && !!this.navigationRoute;
     }
     handleNavigationClick() {
-        if (this.routerEnabled) {
+        if (this.routerEnabled && this.navigationRoute) {
             this._router.navigateByUrl(this.navigationRoute);
         }
     }
@@ -540,78 +409,35 @@ class TdLayoutNavListComponent {
         return this.sidenav.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavListComponent.ɵfac = function TdLayoutNavListComponent_Factory(t) { return new (t || TdLayoutNavListComponent)(i0.ɵɵdirectiveInject(i1$1.Router, 8)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavListComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdLayoutNavListComponent, selectors: [["td-layout-nav-list"]], viewQuery: function TdLayoutNavListComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(MatSidenav, 7);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenav = _t.first);
-    } }, inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize", navigationRoute: "navigationRoute" }, ngContentSelectors: _c1$3, decls: 17, vars: 11, consts: [[1, "td-layout-nav-list-wrapper"], ["fullscreen", "", 1, "td-layout-nav-list", 3, "autosize"], ["position", "start", 3, "mode", "opened", "disableClose"], ["sidenav", ""], [1, "td-layout-toolbar", 3, "color"], ["class", "td-layout-nav-list-toolbar-content", 3, "cursor-pointer", "click", 4, "ngIf"], ["cdkScrollable", "", 1, "td-layout-nav-list-content"], [1, "td-layout-nav-list-main"], [1, "td-layout-nav-list-toolbar-content", 3, "click"], [4, "ngIf"], ["class", "mat-icon-logo", 3, "svgIcon", 4, "ngIf"], [1, "mat-icon-logo", 3, "svgIcon"]], template: function TdLayoutNavListComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c0$4);
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelementStart(1, "mat-sidenav-container", 1);
-        i0.ɵɵelementStart(2, "mat-sidenav", 2, 3);
-        i0.ɵɵelementStart(4, "mat-toolbar", 4);
-        i0.ɵɵprojection(5);
-        i0.ɵɵtemplate(6, TdLayoutNavListComponent_span_6_Template, 4, 5, "span", 5);
-        i0.ɵɵprojection(7, 1);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(8, "div", 6);
-        i0.ɵɵprojection(9, 2);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(10, "div", 7);
-        i0.ɵɵelementStart(11, "mat-toolbar", 4);
-        i0.ɵɵprojection(12, 3);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(13, "div", 6);
-        i0.ɵɵprojection(14, 4);
-        i0.ɵɵelementEnd();
-        i0.ɵɵprojection(15, 5);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵprojection(16, 6);
-    } if (rf & 2) {
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("autosize", ctx.containerAutosize);
-        i0.ɵɵadvance(1);
-        i0.ɵɵstyleProp("max-width", ctx.sidenavWidth)("min-width", ctx.sidenavWidth);
-        i0.ɵɵproperty("mode", ctx.mode)("opened", ctx.opened)("disableClose", ctx.disableClose);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("color", ctx.color);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.icon || ctx.logo || ctx.toolbarTitle);
-        i0.ɵɵadvance(5);
-        i0.ɵɵproperty("color", ctx.color);
-    } }, directives: [i1.MatSidenavContainer, i1.MatSidenav, i3.MatToolbar, i3$1.NgIf, i5.MatIcon, i5$1.CdkScrollable], styles: ["[_nghost-%COMP%]{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%] > .mat-sidenav-container[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-side[_ngcontent-%COMP%]{border-right:0}[dir=rtl]   [_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%] > .mat-sidenav-container[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-side[_ngcontent-%COMP%]{border-left:0}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   .td-layout-nav-list-toolbar-content[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:flex-start}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   .td-layout-nav-list-content[_ngcontent-%COMP%]{text-align:start;-ms-flex:1;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   .td-layout-nav-list-main[_ngcontent-%COMP%]{-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   .td-layout-nav-list-main[_ngcontent-%COMP%]   .td-layout-nav-list-content[_ngcontent-%COMP%]{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;-ms-flex:1;flex:1}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%]{-ms-flex:1;flex:1}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-opened[_ngcontent-%COMP%], [_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-opening[_ngcontent-%COMP%], [_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-closed[_ngcontent-%COMP%], [_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-closing[_ngcontent-%COMP%]{box-shadow:none}[_nghost-%COMP%]     mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{-ms-flex-positive:1;flex-grow:1}[_nghost-%COMP%]     mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px rgba(0,0,0,.2),0 1px 1px rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListComponent, [{
-        type: Component,
-        args: [{ selector: 'td-layout-nav-list', template: "<div class=\"td-layout-nav-list-wrapper\">\n  <mat-sidenav-container fullscreen [autosize]=\"containerAutosize\" class=\"td-layout-nav-list\">\n    <mat-sidenav\n      #sidenav\n      position=\"start\"\n      [mode]=\"mode\"\n      [opened]=\"opened\"\n      [disableClose]=\"disableClose\"\n      [style.max-width]=\"sidenavWidth\"\n      [style.min-width]=\"sidenavWidth\"\n    >\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-menu-button]\"></ng-content>\n        <span\n          *ngIf=\"icon || logo || toolbarTitle\"\n          class=\"td-layout-nav-list-toolbar-content\"\n          [class.cursor-pointer]=\"routerEnabled\"\n          (click)=\"handleNavigationClick()\"\n        >\n          <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n          <mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n          <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n        </span>\n        <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content select=\"[td-sidenav-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    <div class=\"td-layout-nav-list-main\">\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"td-layout-footer-inner\"></ng-content>\n    </div>\n  </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;-ms-flex:1;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;-ms-flex:1;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{-ms-flex:1;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{-ms-flex-positive:1;flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px rgba(0,0,0,.2),0 1px 1px rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}\n"] }]
-    }], function () { return [{ type: i1$1.Router, decorators: [{
-                type: Optional
-            }] }]; }, { sidenav: [{
-            type: ViewChild,
-            args: [MatSidenav, { static: true }]
-        }], toolbarTitle: [{
-            type: Input
-        }], icon: [{
-            type: Input
-        }], logo: [{
-            type: Input
-        }], color: [{
-            type: Input
-        }], mode: [{
-            type: Input
-        }], opened: [{
-            type: Input
-        }], sidenavWidth: [{
-            type: Input
-        }], containerAutosize: [{
-            type: Input
-        }], navigationRoute: [{
-            type: Input
-        }] }); })();
+TdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavListComponent, deps: [{ token: i1$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutNavListComponent, selector: "td-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"td-layout-nav-list-wrapper\">\n  <mat-sidenav-container\n    fullscreen\n    [autosize]=\"containerAutosize\"\n    class=\"td-layout-nav-list\"\n  >\n    <mat-sidenav\n      #sidenav\n      position=\"start\"\n      [mode]=\"mode\"\n      [opened]=\"opened\"\n      [disableClose]=\"disableClose\"\n      [style.max-width]=\"sidenavWidth\"\n      [style.min-width]=\"sidenavWidth\"\n    >\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-menu-button]\"></ng-content>\n        <span\n          *ngIf=\"icon || logo || toolbarTitle\"\n          class=\"td-layout-nav-list-toolbar-content\"\n          [class.cursor-pointer]=\"routerEnabled\"\n          (click)=\"handleNavigationClick()\"\n        >\n          <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n          <mat-icon\n            *ngIf=\"logo && !icon\"\n            class=\"mat-icon-logo\"\n            [svgIcon]=\"logo\"\n          ></mat-icon>\n          <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n        </span>\n        <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content select=\"[td-sidenav-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    <div class=\"td-layout-nav-list-main\">\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"td-layout-footer-inner\"></ng-content>\n    </div>\n  </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"], components: [{ type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-layout-nav-list', template: "<div class=\"td-layout-nav-list-wrapper\">\n  <mat-sidenav-container\n    fullscreen\n    [autosize]=\"containerAutosize\"\n    class=\"td-layout-nav-list\"\n  >\n    <mat-sidenav\n      #sidenav\n      position=\"start\"\n      [mode]=\"mode\"\n      [opened]=\"opened\"\n      [disableClose]=\"disableClose\"\n      [style.max-width]=\"sidenavWidth\"\n      [style.min-width]=\"sidenavWidth\"\n    >\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-menu-button]\"></ng-content>\n        <span\n          *ngIf=\"icon || logo || toolbarTitle\"\n          class=\"td-layout-nav-list-toolbar-content\"\n          [class.cursor-pointer]=\"routerEnabled\"\n          (click)=\"handleNavigationClick()\"\n        >\n          <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n          <mat-icon\n            *ngIf=\"logo && !icon\"\n            class=\"mat-icon-logo\"\n            [svgIcon]=\"logo\"\n          ></mat-icon>\n          <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n        </span>\n        <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content select=\"[td-sidenav-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    <div class=\"td-layout-nav-list-main\">\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"td-layout-footer-inner\"></ng-content>\n    </div>\n  </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { sidenav: [{
+                type: ViewChild,
+                args: [MatSidenav, { static: true }]
+            }], toolbarTitle: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], logo: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], sidenavWidth: [{
+                type: Input
+            }], containerAutosize: [{
+                type: Input
+            }], navigationRoute: [{
+                type: Input
+            }] } });
 
 class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
@@ -624,23 +450,21 @@ class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
         this._layout.toggle();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavListToggleDirective.ɵfac = function TdLayoutNavListToggleDirective_Factory(t) { return new (t || TdLayoutNavListToggleDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutNavListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavListToggleDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutNavListToggleDirective, selectors: [["", "tdLayoutNavListToggle", ""]], inputs: { hideWhenOpened: "hideWhenOpened", tdLayoutNavListToggle: "tdLayoutNavListToggle" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListToggleDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutNavListToggle]',
-                inputs: ['hideWhenOpened'],
-            }]
-    }], function () { return [{ type: TdLayoutNavListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutNavListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutNavListToggle: [{
-            type: Input,
-            args: ['tdLayoutNavListToggle']
-        }] }); })();
+TdLayoutNavListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavListToggleDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutNavListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutNavListToggleDirective, selector: "[tdLayoutNavListToggle]", inputs: { tdLayoutNavListToggle: "tdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavListToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutNavListToggle]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutNavListComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutNavListComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutNavListToggle: [{
+                type: Input
+            }] } });
 class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
@@ -652,23 +476,21 @@ class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
         this._layout.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavListCloseDirective.ɵfac = function TdLayoutNavListCloseDirective_Factory(t) { return new (t || TdLayoutNavListCloseDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutNavListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavListCloseDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutNavListCloseDirective, selectors: [["", "tdLayoutNavListClose", ""]], inputs: { hideWhenOpened: "hideWhenOpened", tdLayoutNavListClose: "tdLayoutNavListClose" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListCloseDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutNavListClose]',
-                inputs: ['hideWhenOpened'],
-            }]
-    }], function () { return [{ type: TdLayoutNavListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutNavListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutNavListClose: [{
-            type: Input,
-            args: ['tdLayoutNavListClose']
-        }] }); })();
+TdLayoutNavListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavListCloseDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutNavListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutNavListCloseDirective, selector: "[tdLayoutNavListClose]", inputs: { tdLayoutNavListClose: "tdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavListCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutNavListClose]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutNavListComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutNavListComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutNavListClose: [{
+                type: Input
+            }] } });
 class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
@@ -680,47 +502,22 @@ class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
         this._layout.open();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavListOpenDirective.ɵfac = function TdLayoutNavListOpenDirective_Factory(t) { return new (t || TdLayoutNavListOpenDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutNavListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutNavListOpenDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutNavListOpenDirective, selectors: [["", "tdLayoutNavListOpen", ""]], inputs: { hideWhenOpened: "hideWhenOpened", tdLayoutNavListOpen: "tdLayoutNavListOpen" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListOpenDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutNavListOpen]',
-                inputs: ['hideWhenOpened'],
-            }]
-    }], function () { return [{ type: TdLayoutNavListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutNavListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutNavListOpen: [{
-            type: Input,
-            args: ['tdLayoutNavListOpen']
-        }] }); })();
+TdLayoutNavListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavListOpenDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutNavListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutNavListOpenDirective, selector: "[tdLayoutNavListOpen]", inputs: { tdLayoutNavListOpen: "tdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavListOpenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutNavListOpen]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutNavListComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutNavListComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutNavListOpen: [{
+                type: Input
+            }] } });
 
-function TdLayoutCardOverComponent_mat_card_title_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-card-title");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r0.cardTitle);
-} }
-function TdLayoutCardOverComponent_mat_card_subtitle_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-card-subtitle");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r1.cardSubtitle);
-} }
-function TdLayoutCardOverComponent_mat_divider_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-divider");
-} }
-const _c0$3 = ["*", [["", "td-after-card", ""]]];
-const _c1$2 = ["*", "[td-after-card]"];
 class TdLayoutCardOverComponent {
     constructor() {
         /**
@@ -739,47 +536,21 @@ class TdLayoutCardOverComponent {
         this.color = 'primary';
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutCardOverComponent.ɵfac = function TdLayoutCardOverComponent_Factory(t) { return new (t || TdLayoutCardOverComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutCardOverComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdLayoutCardOverComponent, selectors: [["td-layout-card-over"]], inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngContentSelectors: _c1$2, decls: 9, vars: 12, consts: [[1, "td-layout-toolbar", 3, "color"], [1, "td-layout-card-over-wrapper"], [1, "td-layout-card-over"], [4, "ngIf"]], template: function TdLayoutCardOverComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c0$3);
-        i0.ɵɵelement(0, "mat-toolbar", 0);
-        i0.ɵɵelementStart(1, "div", 1);
-        i0.ɵɵelementStart(2, "div", 2);
-        i0.ɵɵelementStart(3, "mat-card");
-        i0.ɵɵtemplate(4, TdLayoutCardOverComponent_mat_card_title_4_Template, 2, 1, "mat-card-title", 3);
-        i0.ɵɵtemplate(5, TdLayoutCardOverComponent_mat_card_subtitle_5_Template, 2, 1, "mat-card-subtitle", 3);
-        i0.ɵɵtemplate(6, TdLayoutCardOverComponent_mat_divider_6_Template, 1, 0, "mat-divider", 3);
-        i0.ɵɵprojection(7);
-        i0.ɵɵelementEnd();
-        i0.ɵɵprojection(8, 1);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("color", ctx.color);
-        i0.ɵɵadvance(2);
-        i0.ɵɵstyleProp("max-width", ctx.cardWidth, "%")("flex", "1 1 " + ctx.cardWidth + "%")("-ms-flex", "1 1 " + ctx.cardWidth + "%")("-webkit-box-flex", 1);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.cardTitle);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.cardSubtitle);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.cardTitle || ctx.cardSubtitle);
-    } }, directives: [i3.MatToolbar, i2.MatCard, i3$1.NgIf, i2.MatCardTitle, i2.MatCardSubtitle, i4.MatDivider], styles: ["[_nghost-%COMP%]{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}[_nghost-%COMP%]   [td-after-card][_ngcontent-%COMP%]{display:block}.td-layout-card-over-wrapper[_ngcontent-%COMP%]{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-ms-flex-pack:center;justify-content:center}.td-layout-card-over-wrapper[_ngcontent-%COMP%]   .td-layout-card-over[_ngcontent-%COMP%]{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper[_ngcontent-%COMP%]   .td-layout-card-over[_ngcontent-%COMP%]{max-width:100%!important}}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutCardOverComponent, [{
-        type: Component,
-        args: [{ selector: 'td-layout-card-over', template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n  <div\n    class=\"td-layout-card-over\"\n    [style.max-width.%]=\"cardWidth\"\n    [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-webkit-box-flex]=\"1\"\n  >\n    <mat-card>\n      <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n      <mat-card-subtitle *ngIf=\"cardSubtitle\">{{ cardSubtitle }}</mat-card-subtitle>\n      <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n      <ng-content></ng-content>\n    </mat-card>\n    <ng-content select=\"[td-after-card]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-ms-flex-pack:center;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"] }]
-    }], null, { cardTitle: [{
-            type: Input
-        }], cardSubtitle: [{
-            type: Input
-        }], cardWidth: [{
-            type: Input
-        }], color: [{
-            type: Input
-        }] }); })();
+TdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutCardOverComponent, selector: "td-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n  <div\n    class=\"td-layout-card-over\"\n    [style.max-width.%]=\"cardWidth\"\n    [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-webkit-box-flex]=\"1\"\n  >\n    <mat-card>\n      <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n      <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n        cardSubtitle\n      }}</mat-card-subtitle>\n      <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n      <ng-content></ng-content>\n    </mat-card>\n    <ng-content select=\"[td-after-card]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"], components: [{ type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutCardOverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-layout-card-over', template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n  <div\n    class=\"td-layout-card-over\"\n    [style.max-width.%]=\"cardWidth\"\n    [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-webkit-box-flex]=\"1\"\n  >\n    <mat-card>\n      <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n      <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n        cardSubtitle\n      }}</mat-card-subtitle>\n      <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n      <ng-content></ng-content>\n    </mat-card>\n    <ng-content select=\"[td-after-card]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"] }]
+        }], propDecorators: { cardTitle: [{
+                type: Input
+            }], cardSubtitle: [{
+                type: Input
+            }], cardWidth: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
 
-const _c0$2 = [[["mat-toolbar", "td-sidenav-content", ""]], [["", "td-sidenav-content", ""]], [["mat-toolbar"]], "*", [["td-layout-footer-inner"]]];
-const _c1$1 = ["mat-toolbar[td-sidenav-content]", "[td-sidenav-content]", "mat-toolbar", "*", "td-layout-footer-inner"];
 class TdLayoutManageListComponent {
     constructor() {
         /**
@@ -850,50 +621,23 @@ class TdLayoutManageListComponent {
         return this.sidenav.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutManageListComponent.ɵfac = function TdLayoutManageListComponent_Factory(t) { return new (t || TdLayoutManageListComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutManageListComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdLayoutManageListComponent, selectors: [["td-layout-manage-list"]], viewQuery: function TdLayoutManageListComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(MatSidenav, 7);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenav = _t.first);
-    } }, inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, ngContentSelectors: _c1$1, decls: 11, vars: 8, consts: [["fullscreen", "", 1, "td-layout-manage-list", 3, "autosize"], ["position", "start", 3, "mode", "opened", "disableClose"], ["sidenav", ""], ["cdkScrollable", "", 1, "td-layout-manage-list-sidenav"], [1, "td-layout-manage-list-main"], ["cdkScrollable", "", 1, "td-layout-manage-list-content"]], template: function TdLayoutManageListComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c0$2);
-        i0.ɵɵelementStart(0, "mat-sidenav-container", 0);
-        i0.ɵɵelementStart(1, "mat-sidenav", 1, 2);
-        i0.ɵɵprojection(3);
-        i0.ɵɵelementStart(4, "div", 3);
-        i0.ɵɵprojection(5, 1);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(6, "div", 4);
-        i0.ɵɵprojection(7, 2);
-        i0.ɵɵelementStart(8, "div", 5);
-        i0.ɵɵprojection(9, 3);
-        i0.ɵɵelementEnd();
-        i0.ɵɵprojection(10, 4);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("autosize", ctx.containerAutosize);
-        i0.ɵɵadvance(1);
-        i0.ɵɵstyleProp("max-width", ctx.sidenavWidth)("min-width", ctx.sidenavWidth);
-        i0.ɵɵproperty("mode", ctx.mode)("opened", ctx.opened)("disableClose", ctx.disableClose);
-    } }, directives: [i1.MatSidenavContainer, i1.MatSidenav, i5$1.CdkScrollable], styles: ["[_nghost-%COMP%]{display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}[_nghost-%COMP%]   mat-sidenav-container.td-layout-manage-list[_ngcontent-%COMP%]{-ms-flex:1;flex:1}[_nghost-%COMP%]   mat-sidenav-container.td-layout-manage-list[_ngcontent-%COMP%] > .mat-drawer[_ngcontent-%COMP%] > .mat-drawer-inner-container.mat-drawer-opened[_ngcontent-%COMP%], [_nghost-%COMP%]   mat-sidenav-container.td-layout-manage-list[_ngcontent-%COMP%] > .mat-drawer[_ngcontent-%COMP%] > .mat-drawer-inner-container.mat-drawer-opening[_ngcontent-%COMP%], [_nghost-%COMP%]   mat-sidenav-container.td-layout-manage-list[_ngcontent-%COMP%] > .mat-drawer[_ngcontent-%COMP%] > .mat-drawer-inner-container.mat-drawer-closed[_ngcontent-%COMP%], [_nghost-%COMP%]   mat-sidenav-container.td-layout-manage-list[_ngcontent-%COMP%] > .mat-drawer[_ngcontent-%COMP%] > .mat-drawer-inner-container.mat-drawer-closing[_ngcontent-%COMP%]{box-shadow:0 1px 3px rgba(0,0,0,.2)}[_nghost-%COMP%]   .td-layout-manage-list-sidenav[_ngcontent-%COMP%]{text-align:start;-ms-flex:1;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}[_nghost-%COMP%]   .td-layout-manage-list-main[_ngcontent-%COMP%]{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex}[_nghost-%COMP%]   .td-layout-manage-list-main[_ngcontent-%COMP%]   .td-layout-manage-list-content[_ngcontent-%COMP%]{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;-ms-flex:1;flex:1}[_nghost-%COMP%]     mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{-ms-flex-positive:1;flex-grow:1}[_nghost-%COMP%]     mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px rgba(0,0,0,.2),0 1px 1px rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}[_nghost-%COMP%]     mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}[_nghost-%COMP%]     .mat-toolbar{font-weight:400}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutManageListComponent, [{
-        type: Component,
-        args: [{ selector: 'td-layout-manage-list', template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\" class=\"td-layout-manage-list\">\n  <mat-sidenav\n    #sidenav\n    position=\"start\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [disableClose]=\"disableClose\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n  >\n    <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n    <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n      <ng-content select=\"[td-sidenav-content]\"></ng-content>\n    </div>\n  </mat-sidenav>\n  <div class=\"td-layout-manage-list-main\">\n    <ng-content select=\"mat-toolbar\"></ng-content>\n    <div class=\"td-layout-manage-list-content\" cdkScrollable>\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"td-layout-footer-inner\"></ng-content>\n  </div>\n</mat-sidenav-container>\n", styles: [":host{display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{-ms-flex:1;flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px rgba(0,0,0,.2)}:host .td-layout-manage-list-sidenav{text-align:start;-ms-flex:1;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex}:host .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;-ms-flex:1;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{-ms-flex-positive:1;flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px rgba(0,0,0,.2),0 1px 1px rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
-    }], null, { sidenav: [{
-            type: ViewChild,
-            args: [MatSidenav, { static: true }]
-        }], mode: [{
-            type: Input
-        }], opened: [{
-            type: Input
-        }], sidenavWidth: [{
-            type: Input
-        }], containerAutosize: [{
-            type: Input
-        }] }); })();
+TdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutManageListComponent, selector: "td-layout-manage-list", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n  fullscreen\n  [autosize]=\"containerAutosize\"\n  class=\"td-layout-manage-list\"\n>\n  <mat-sidenav\n    #sidenav\n    position=\"start\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [disableClose]=\"disableClose\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n  >\n    <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n    <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n      <ng-content select=\"[td-sidenav-content]\"></ng-content>\n    </div>\n  </mat-sidenav>\n  <div class=\"td-layout-manage-list-main\">\n    <ng-content select=\"mat-toolbar\"></ng-content>\n    <div class=\"td-layout-manage-list-content\" cdkScrollable>\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"td-layout-footer-inner\"></ng-content>\n  </div>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .td-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], components: [{ type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }], directives: [{ type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-layout-manage-list', template: "<mat-sidenav-container\n  fullscreen\n  [autosize]=\"containerAutosize\"\n  class=\"td-layout-manage-list\"\n>\n  <mat-sidenav\n    #sidenav\n    position=\"start\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [disableClose]=\"disableClose\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n  >\n    <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n    <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n      <ng-content select=\"[td-sidenav-content]\"></ng-content>\n    </div>\n  </mat-sidenav>\n  <div class=\"td-layout-manage-list-main\">\n    <ng-content select=\"mat-toolbar\"></ng-content>\n    <div class=\"td-layout-manage-list-content\" cdkScrollable>\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"td-layout-footer-inner\"></ng-content>\n  </div>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .td-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
+        }], propDecorators: { sidenav: [{
+                type: ViewChild,
+                args: [MatSidenav, { static: true }]
+            }], mode: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], sidenavWidth: [{
+                type: Input
+            }], containerAutosize: [{
+                type: Input
+            }] } });
 
 class TdLayoutManageListToggleDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
@@ -906,23 +650,21 @@ class TdLayoutManageListToggleDirective extends BaseLayoutToggleDirective {
         this._layout.toggle();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutManageListToggleDirective.ɵfac = function TdLayoutManageListToggleDirective_Factory(t) { return new (t || TdLayoutManageListToggleDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutManageListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutManageListToggleDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutManageListToggleDirective, selectors: [["", "tdLayoutManageListToggle", ""]], inputs: { hideWhenOpened: "hideWhenOpened", tdLayoutManageListToggle: "tdLayoutManageListToggle" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutManageListToggleDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutManageListToggle]',
-                inputs: ['hideWhenOpened'],
-            }]
-    }], function () { return [{ type: TdLayoutManageListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutManageListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutManageListToggle: [{
-            type: Input,
-            args: ['tdLayoutManageListToggle']
-        }] }); })();
+TdLayoutManageListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutManageListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutManageListToggleDirective, selector: "[tdLayoutManageListToggle]", inputs: { tdLayoutManageListToggle: "tdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutManageListToggle]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutManageListComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutManageListComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutManageListToggle: [{
+                type: Input
+            }] } });
 class TdLayoutManageListCloseDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
@@ -934,23 +676,21 @@ class TdLayoutManageListCloseDirective extends BaseLayoutToggleDirective {
         this._layout.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutManageListCloseDirective.ɵfac = function TdLayoutManageListCloseDirective_Factory(t) { return new (t || TdLayoutManageListCloseDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutManageListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutManageListCloseDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutManageListCloseDirective, selectors: [["", "tdLayoutManageListClose", ""]], inputs: { hideWhenOpened: "hideWhenOpened", tdLayoutManageListClose: "tdLayoutManageListClose" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutManageListCloseDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutManageListClose]',
-                inputs: ['hideWhenOpened'],
-            }]
-    }], function () { return [{ type: TdLayoutManageListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutManageListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutManageListClose: [{
-            type: Input,
-            args: ['tdLayoutManageListClose']
-        }] }); })();
+TdLayoutManageListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutManageListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutManageListCloseDirective, selector: "[tdLayoutManageListClose]", inputs: { tdLayoutManageListClose: "tdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutManageListClose]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutManageListComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutManageListComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutManageListClose: [{
+                type: Input
+            }] } });
 class TdLayoutManageListOpenDirective extends BaseLayoutToggleDirective {
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
@@ -962,25 +702,22 @@ class TdLayoutManageListOpenDirective extends BaseLayoutToggleDirective {
         this._layout.open();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutManageListOpenDirective.ɵfac = function TdLayoutManageListOpenDirective_Factory(t) { return new (t || TdLayoutManageListOpenDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutManageListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutManageListOpenDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdLayoutManageListOpenDirective, selectors: [["", "tdLayoutManageListOpen", ""]], inputs: { hideWhenOpened: "hideWhenOpened", tdLayoutManageListOpen: "tdLayoutManageListOpen" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutManageListOpenDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdLayoutManageListOpen]',
-                inputs: ['hideWhenOpened'],
-            }]
-    }], function () { return [{ type: TdLayoutManageListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutManageListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { tdLayoutManageListOpen: [{
-            type: Input,
-            args: ['tdLayoutManageListOpen']
-        }] }); })();
+TdLayoutManageListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutManageListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutManageListOpenDirective, selector: "[tdLayoutManageListOpen]", inputs: { tdLayoutManageListOpen: "tdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutManageListOpenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutManageListOpen]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdLayoutManageListComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutManageListComponent)]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tdLayoutManageListOpen: [{
+                type: Input
+            }] } });
 
-const _c0$1 = ["*"];
 class TdLayoutFooterComponent {
     constructor(_renderer, _elementRef) {
         this._renderer = _renderer;
@@ -1003,154 +740,35 @@ class TdLayoutFooterComponent {
         return this._color;
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdLayoutFooterComponent.ɵfac = function TdLayoutFooterComponent_Factory(t) { return new (t || TdLayoutFooterComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdLayoutFooterComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdLayoutFooterComponent, selectors: [["td-layout-footer"], ["td-layout-footer-inner"]], inputs: { color: "color" }, ngContentSelectors: _c0$1, decls: 1, vars: 0, template: function TdLayoutFooterComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef();
-        i0.ɵɵprojection(0);
-    } }, styles: ["[_nghost-%COMP%]{display:block;padding:10px 16px}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutFooterComponent, [{
-        type: Component,
-        args: [{ selector: 'td-layout-footer,td-layout-footer-inner', template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:10px 16px}\n"] }]
-    }], function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { color: [{
-            type: Input,
-            args: ['color']
-        }] }); })();
+TdLayoutFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdLayoutFooterComponent, selector: "td-layout-footer,td-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:10px 16px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-layout-footer,td-layout-footer-inner', template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:10px 16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { color: [{
+                type: Input
+            }] } });
 
-function TdNavigationDrawerComponent_ng_container_2_div_1_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r4.icon);
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_1_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 11);
-} if (rf & 2) {
-    const ctx_r5 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("svgIcon", ctx_r5.logo);
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_1_img_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 12);
-} if (rf & 2) {
-    const ctx_r6 = i0.ɵɵnextContext(3);
-    i0.ɵɵattribute("src", ctx_r6.avatar, i0.ɵɵsanitizeUrl);
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_1_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 13);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r7 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r7.sidenavTitle);
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵlistener("click", function TdNavigationDrawerComponent_ng_container_2_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(2); return ctx_r8.handleNavigationClick(); });
-    i0.ɵɵtemplate(1, TdNavigationDrawerComponent_ng_container_2_div_1_mat_icon_1_Template, 2, 1, "mat-icon", 1);
-    i0.ɵɵtemplate(2, TdNavigationDrawerComponent_ng_container_2_div_1_mat_icon_2_Template, 1, 1, "mat-icon", 8);
-    i0.ɵɵtemplate(3, TdNavigationDrawerComponent_ng_container_2_div_1_img_3_Template, 1, 1, "img", 9);
-    i0.ɵɵtemplate(4, TdNavigationDrawerComponent_ng_container_2_div_1_span_4_Template, 2, 1, "span", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("cursor-pointer", ctx_r1.routerEnabled);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.icon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.logo && !ctx_r1.icon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.avatar && !ctx_r1.logo && !ctx_r1.icon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.sidenavTitle);
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r2.name);
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_3_button_3_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "arrow_drop_down");
-    i0.ɵɵelementEnd();
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_3_button_3_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "arrow_drop_up");
-    i0.ɵɵelementEnd();
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_3_button_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 18);
-    i0.ɵɵtemplate(1, TdNavigationDrawerComponent_ng_container_2_div_3_button_3_mat_icon_1_Template, 2, 0, "mat-icon", 1);
-    i0.ɵɵtemplate(2, TdNavigationDrawerComponent_ng_container_2_div_3_button_3_mat_icon_2_Template, 2, 0, "mat-icon", 1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r10.menuToggled);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r10.menuToggled);
-} }
-function TdNavigationDrawerComponent_ng_container_2_div_3_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵlistener("click", function TdNavigationDrawerComponent_ng_container_2_div_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(2); return ctx_r13.toggleMenu(); });
-    i0.ɵɵelementStart(1, "span", 16);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, TdNavigationDrawerComponent_ng_container_2_div_3_button_3_Template, 3, 2, "button", 17);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r3.email || ctx_r3.name);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r3.isMenuAvailable);
-} }
-function TdNavigationDrawerComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, TdNavigationDrawerComponent_ng_container_2_div_1_Template, 5, 6, "div", 4);
-    i0.ɵɵtemplate(2, TdNavigationDrawerComponent_ng_container_2_div_2_Template, 2, 1, "div", 5);
-    i0.ɵɵtemplate(3, TdNavigationDrawerComponent_ng_container_2_div_3_Template, 4, 2, "div", 6);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.icon || ctx_r0.logo || ctx_r0.sidenavTitle || ctx_r0.avatar);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.email && ctx_r0.name);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.email || ctx_r0.name);
-} }
-const _c0 = [[["", "td-navigation-drawer-toolbar", ""]], "*", [["", "td-navigation-drawer-menu", ""]]];
-const _c1 = ["[td-navigation-drawer-toolbar]", "*", "[td-navigation-drawer-menu]"];
 class TdNavigationDrawerMenuDirective {
 }
-/** @nocollapse */ /** @nocollapse */ TdNavigationDrawerMenuDirective.ɵfac = function TdNavigationDrawerMenuDirective_Factory(t) { return new (t || TdNavigationDrawerMenuDirective)(); };
-/** @nocollapse */ /** @nocollapse */ TdNavigationDrawerMenuDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdNavigationDrawerMenuDirective, selectors: [["", "td-navigation-drawer-menu", ""]] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdNavigationDrawerMenuDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[td-navigation-drawer-menu]',
-            }]
-    }], null, null); })();
+TdNavigationDrawerMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdNavigationDrawerMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TdNavigationDrawerMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdNavigationDrawerMenuDirective, selector: "[tdNavigationDrawerMenu]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdNavigationDrawerMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdNavigationDrawerMenu]',
+                }]
+        }] });
 class TdNavigationDrawerToolbarDirective {
 }
-/** @nocollapse */ /** @nocollapse */ TdNavigationDrawerToolbarDirective.ɵfac = function TdNavigationDrawerToolbarDirective_Factory(t) { return new (t || TdNavigationDrawerToolbarDirective)(); };
-/** @nocollapse */ /** @nocollapse */ TdNavigationDrawerToolbarDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdNavigationDrawerToolbarDirective, selectors: [["", "td-navigation-drawer-toolbar", ""]] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdNavigationDrawerToolbarDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[td-navigation-drawer-toolbar]',
-            }]
-    }], null, null); })();
+TdNavigationDrawerToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdNavigationDrawerToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TdNavigationDrawerToolbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdNavigationDrawerToolbarDirective, selector: "[tdNavigationDrawerToolbar]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdNavigationDrawerToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdNavigationDrawerToolbar]',
+                }]
+        }] });
 class TdNavigationDrawerComponent {
     constructor(_layout, _router, _sanitize) {
         this._layout = _layout;
@@ -1219,7 +837,7 @@ class TdNavigationDrawerComponent {
         }
     }
     handleNavigationClick() {
-        if (this.routerEnabled) {
+        if (this.routerEnabled && this.navigationRoute) {
             this._router.navigateByUrl(this.navigationRoute);
             this.close();
         }
@@ -1243,71 +861,41 @@ class TdNavigationDrawerComponent {
         return this._layout.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdNavigationDrawerComponent.ɵfac = function TdNavigationDrawerComponent_Factory(t) { return new (t || TdNavigationDrawerComponent)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutComponent)), i0.ɵɵdirectiveInject(i1$1.Router, 8), i0.ɵɵdirectiveInject(i2$1.DomSanitizer)); };
-/** @nocollapse */ /** @nocollapse */ TdNavigationDrawerComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdNavigationDrawerComponent, selectors: [["td-navigation-drawer"]], contentQueries: function TdNavigationDrawerComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-        i0.ɵɵcontentQuery(dirIndex, TdNavigationDrawerMenuDirective, 5);
-        i0.ɵɵcontentQuery(dirIndex, TdNavigationDrawerToolbarDirective, 5);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._drawerMenu = _t);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._toolbar = _t);
-    } }, inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", name: "name", email: "email" }, ngContentSelectors: _c1, decls: 7, vars: 8, consts: [[1, "td-nagivation-drawer-toolbar", 3, "color"], [4, "ngIf"], [1, "td-navigation-drawer-content"], [1, "td-navigation-drawer-menu-content"], ["class", "td-navigation-drawer-toolbar-content", 3, "cursor-pointer", "click", 4, "ngIf"], ["class", "td-navigation-drawer-name", 4, "ngIf"], ["class", "td-navigation-drawer-menu-toggle", "href", "", 3, "click", 4, "ngIf"], [1, "td-navigation-drawer-toolbar-content", 3, "click"], ["class", "mat-icon-logo", 3, "svgIcon", 4, "ngIf"], ["class", "td-nagivation-drawer-toolbar-avatar", 4, "ngIf"], ["class", "td-navigation-drawer-title", 4, "ngIf"], [1, "mat-icon-logo", 3, "svgIcon"], [1, "td-nagivation-drawer-toolbar-avatar"], [1, "td-navigation-drawer-title"], [1, "td-navigation-drawer-name"], ["href", "", 1, "td-navigation-drawer-menu-toggle", 3, "click"], [1, "td-navigation-drawer-label"], ["mat-icon-button", "", "class", "td-navigation-drawer-menu-button", 4, "ngIf"], ["mat-icon-button", "", 1, "td-navigation-drawer-menu-button"]], template: function TdNavigationDrawerComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c0);
-        i0.ɵɵelementStart(0, "mat-toolbar", 0);
-        i0.ɵɵprojection(1);
-        i0.ɵɵtemplate(2, TdNavigationDrawerComponent_ng_container_2_Template, 4, 3, "ng-container", 1);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "div", 2);
-        i0.ɵɵprojection(4, 1);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(5, "div", 3);
-        i0.ɵɵprojection(6, 2);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵstyleProp("background-image", ctx.backgroundImage);
-        i0.ɵɵclassProp("td-toolbar-background", !!ctx.isBackgroundAvailable);
-        i0.ɵɵproperty("color", ctx.color);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", !ctx.isCustomToolbar);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("@tdCollapse", ctx.menuToggled);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("@tdCollapse", !ctx.menuToggled);
-    } }, directives: [i3.MatToolbar, i3$1.NgIf, i5.MatIcon, i6.MatButton], styles: ["[_nghost-%COMP%]{width:100%}[_nghost-%COMP%]   .td-navigation-drawer-content.ng-animating[_ngcontent-%COMP%], [_nghost-%COMP%]   .td-navigation-drawer-menu-content.ng-animating[_ngcontent-%COMP%]{overflow:hidden}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{padding:16px}[_nghost-%COMP%]   mat-toolbar.td-toolbar-background[_ngcontent-%COMP%]{background-repeat:no-repeat;background-size:cover}[_nghost-%COMP%]   mat-toolbar.td-nagivation-drawer-toolbar[_ngcontent-%COMP%]{-ms-flex-direction:column;flex-direction:column;height:auto!important;display:block!important}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-toolbar-content[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:flex-start}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-toolbar-content[_ngcontent-%COMP%]   .td-nagivation-drawer-toolbar-avatar[_ngcontent-%COMP%]{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-toolbar-content[_ngcontent-%COMP%]   .td-navigation-drawer-title[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-name[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-menu-toggle[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-menu-toggle[_ngcontent-%COMP%]   .td-navigation-drawer-label[_ngcontent-%COMP%]{-ms-flex:1;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-menu-toggle[_ngcontent-%COMP%]   .td-navigation-drawer-menu-button[_ngcontent-%COMP%]{height:24px;line-height:24px;width:24px}[_nghost-%COMP%] > div[_ngcontent-%COMP%]{overflow:hidden}"], data: { animation: [tdCollapseAnimation] } });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdNavigationDrawerComponent, [{
-        type: Component,
-        args: [{ selector: 'td-navigation-drawer', animations: [tdCollapseAnimation], template: "<mat-toolbar\n  [color]=\"color\"\n  [style.background-image]=\"backgroundImage\"\n  [class.td-toolbar-background]=\"!!isBackgroundAvailable\"\n  class=\"td-nagivation-drawer-toolbar\"\n>\n  <ng-content select=\"[td-navigation-drawer-toolbar]\"></ng-content>\n  <ng-container *ngIf=\"!isCustomToolbar\">\n    <div\n      *ngIf=\"icon || logo || sidenavTitle || avatar\"\n      class=\"td-navigation-drawer-toolbar-content\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n      <img *ngIf=\"avatar && !logo && !icon\" class=\"td-nagivation-drawer-toolbar-avatar\" [attr.src]=\"avatar\" />\n      <span *ngIf=\"sidenavTitle\" class=\"td-navigation-drawer-title\">{{ sidenavTitle }}</span>\n    </div>\n    <div class=\"td-navigation-drawer-name\" *ngIf=\"email && name\">{{ name }}</div>\n    <div class=\"td-navigation-drawer-menu-toggle\" href *ngIf=\"email || name\" (click)=\"toggleMenu()\">\n      <span class=\"td-navigation-drawer-label\">{{ email || name }}</span>\n      <button mat-icon-button class=\"td-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\n        <mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\n        <mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\n      </button>\n    </div>\n  </ng-container>\n</mat-toolbar>\n<div class=\"td-navigation-drawer-content\" [@tdCollapse]=\"menuToggled\">\n  <ng-content></ng-content>\n</div>\n<div class=\"td-navigation-drawer-menu-content\" [@tdCollapse]=\"!menuToggled\">\n  <ng-content select=\"[td-navigation-drawer-menu]\"></ng-content>\n</div>\n", styles: [":host{width:100%}:host .td-navigation-drawer-content.ng-animating,:host .td-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.td-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.td-nagivation-drawer-toolbar{-ms-flex-direction:column;flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .td-navigation-drawer-toolbar-content{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:flex-start}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle{-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-label{-ms-flex:1;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"] }]
-    }], function () { return [{ type: TdLayoutComponent, decorators: [{
-                type: Inject,
-                args: [forwardRef(() => TdLayoutComponent)]
-            }] }, { type: i1$1.Router, decorators: [{
-                type: Optional
-            }] }, { type: i2$1.DomSanitizer }]; }, { _drawerMenu: [{
-            type: ContentChildren,
-            args: [TdNavigationDrawerMenuDirective, { descendants: true }]
-        }], _toolbar: [{
-            type: ContentChildren,
-            args: [TdNavigationDrawerToolbarDirective, { descendants: true }]
-        }], sidenavTitle: [{
-            type: Input
-        }], icon: [{
-            type: Input
-        }], logo: [{
-            type: Input
-        }], avatar: [{
-            type: Input
-        }], color: [{
-            type: Input
-        }], navigationRoute: [{
-            type: Input
-        }], backgroundUrl: [{
-            type: Input,
-            args: ['backgroundUrl']
-        }], name: [{
-            type: Input
-        }], email: [{
-            type: Input
-        }] }); })();
+TdNavigationDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdNavigationDrawerComponent, deps: [{ token: forwardRef(() => TdLayoutComponent) }, { token: i1$1.Router, optional: true }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+TdNavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdNavigationDrawerComponent, selector: "td-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: TdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: TdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar\n  [color]=\"color\"\n  [style.background-image]=\"backgroundImage\"\n  [class.td-toolbar-background]=\"!!isBackgroundAvailable\"\n  class=\"td-nagivation-drawer-toolbar\"\n>\n  <ng-content select=\"[td-navigation-drawer-toolbar]\"></ng-content>\n  <ng-container *ngIf=\"!isCustomToolbar\">\n    <div\n      *ngIf=\"icon || logo || sidenavTitle || avatar\"\n      class=\"td-navigation-drawer-toolbar-content\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <img\n        *ngIf=\"avatar && !logo && !icon\"\n        class=\"td-nagivation-drawer-toolbar-avatar\"\n        [attr.src]=\"avatar\"\n      />\n      <span *ngIf=\"sidenavTitle\" class=\"td-navigation-drawer-title\">{{\n        sidenavTitle\n      }}</span>\n    </div>\n    <div class=\"td-navigation-drawer-name\" *ngIf=\"email && name\">\n      {{ name }}\n    </div>\n    <div\n      class=\"td-navigation-drawer-menu-toggle\"\n      href\n      *ngIf=\"email || name\"\n      (click)=\"toggleMenu()\"\n    >\n      <span class=\"td-navigation-drawer-label\">{{ email || name }}</span>\n      <button\n        mat-icon-button\n        class=\"td-navigation-drawer-menu-button\"\n        *ngIf=\"isMenuAvailable\"\n      >\n        <mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\n        <mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\n      </button>\n    </div>\n  </ng-container>\n</mat-toolbar>\n<div class=\"td-navigation-drawer-content\" [@tdCollapse]=\"menuToggled\">\n  <ng-content></ng-content>\n</div>\n<div class=\"td-navigation-drawer-menu-content\" [@tdCollapse]=\"!menuToggled\">\n  <ng-content select=\"[td-navigation-drawer-menu]\"></ng-content>\n</div>\n", styles: [":host{width:100%}:host .td-navigation-drawer-content.ng-animating,:host .td-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.td-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.td-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .td-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"], components: [{ type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$1.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [tdCollapseAnimation] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdNavigationDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-navigation-drawer', animations: [tdCollapseAnimation], template: "<mat-toolbar\n  [color]=\"color\"\n  [style.background-image]=\"backgroundImage\"\n  [class.td-toolbar-background]=\"!!isBackgroundAvailable\"\n  class=\"td-nagivation-drawer-toolbar\"\n>\n  <ng-content select=\"[td-navigation-drawer-toolbar]\"></ng-content>\n  <ng-container *ngIf=\"!isCustomToolbar\">\n    <div\n      *ngIf=\"icon || logo || sidenavTitle || avatar\"\n      class=\"td-navigation-drawer-toolbar-content\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <img\n        *ngIf=\"avatar && !logo && !icon\"\n        class=\"td-nagivation-drawer-toolbar-avatar\"\n        [attr.src]=\"avatar\"\n      />\n      <span *ngIf=\"sidenavTitle\" class=\"td-navigation-drawer-title\">{{\n        sidenavTitle\n      }}</span>\n    </div>\n    <div class=\"td-navigation-drawer-name\" *ngIf=\"email && name\">\n      {{ name }}\n    </div>\n    <div\n      class=\"td-navigation-drawer-menu-toggle\"\n      href\n      *ngIf=\"email || name\"\n      (click)=\"toggleMenu()\"\n    >\n      <span class=\"td-navigation-drawer-label\">{{ email || name }}</span>\n      <button\n        mat-icon-button\n        class=\"td-navigation-drawer-menu-button\"\n        *ngIf=\"isMenuAvailable\"\n      >\n        <mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\n        <mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\n      </button>\n    </div>\n  </ng-container>\n</mat-toolbar>\n<div class=\"td-navigation-drawer-content\" [@tdCollapse]=\"menuToggled\">\n  <ng-content></ng-content>\n</div>\n<div class=\"td-navigation-drawer-menu-content\" [@tdCollapse]=\"!menuToggled\">\n  <ng-content select=\"[td-navigation-drawer-menu]\"></ng-content>\n</div>\n", styles: [":host{width:100%}:host .td-navigation-drawer-content.ng-animating,:host .td-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.td-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.td-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .td-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: TdLayoutComponent, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => TdLayoutComponent)]
+                }] }, { type: i1$1.Router, decorators: [{
+                    type: Optional
+                }] }, { type: i2$1.DomSanitizer }]; }, propDecorators: { _drawerMenu: [{
+                type: ContentChildren,
+                args: [TdNavigationDrawerMenuDirective, { descendants: true }]
+            }], _toolbar: [{
+                type: ContentChildren,
+                args: [TdNavigationDrawerToolbarDirective, { descendants: true }]
+            }], sidenavTitle: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], logo: [{
+                type: Input
+            }], avatar: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], navigationRoute: [{
+                type: Input
+            }], backgroundUrl: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], email: [{
+                type: Input
+            }] } });
 
 const TD_LAYOUTS = [
     TdLayoutComponent,
@@ -1331,38 +919,8 @@ const TD_LAYOUTS = [
 ];
 class CovalentLayoutModule {
 }
-/** @nocollapse */ /** @nocollapse */ CovalentLayoutModule.ɵfac = function CovalentLayoutModule_Factory(t) { return new (t || CovalentLayoutModule)(); };
-/** @nocollapse */ /** @nocollapse */ CovalentLayoutModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentLayoutModule });
-/** @nocollapse */ /** @nocollapse */ CovalentLayoutModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [[
-            CommonModule,
-            ScrollingModule,
-            MatSidenavModule,
-            MatToolbarModule,
-            MatButtonModule,
-            MatIconModule,
-            MatCardModule,
-            MatDividerModule,
-            CovalentMenuModule,
-        ]] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentLayoutModule, [{
-        type: NgModule,
-        args: [{
-                imports: [
-                    CommonModule,
-                    ScrollingModule,
-                    MatSidenavModule,
-                    MatToolbarModule,
-                    MatButtonModule,
-                    MatIconModule,
-                    MatCardModule,
-                    MatDividerModule,
-                    CovalentMenuModule,
-                ],
-                declarations: [TD_LAYOUTS],
-                exports: [TD_LAYOUTS],
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentLayoutModule, { declarations: [TdLayoutComponent,
+CovalentLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentLayoutModule, declarations: [TdLayoutComponent,
         TdLayoutToggleDirective,
         TdLayoutCloseDirective,
         TdLayoutOpenDirective,
@@ -1404,7 +962,36 @@ class CovalentLayoutModule {
         TdLayoutFooterComponent,
         TdNavigationDrawerComponent,
         TdNavigationDrawerMenuDirective,
-        TdNavigationDrawerToolbarDirective] }); })();
+        TdNavigationDrawerToolbarDirective] });
+CovalentLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentLayoutModule, imports: [[
+            CommonModule,
+            ScrollingModule,
+            MatSidenavModule,
+            MatToolbarModule,
+            MatButtonModule,
+            MatIconModule,
+            MatCardModule,
+            MatDividerModule,
+            CovalentMenuModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ScrollingModule,
+                        MatSidenavModule,
+                        MatToolbarModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatCardModule,
+                        MatDividerModule,
+                        CovalentMenuModule,
+                    ],
+                    declarations: [...TD_LAYOUTS],
+                    exports: [...TD_LAYOUTS],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.