@covalent/core 11.0.0-beta.2 → 11.0.0-beta.4

package/fesm2022/covalent-core-layout.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, Directive, HostListener, forwardRef, Optional, Inject, SecurityContext, ContentChildren, NgModule } from '@angular/core';
+import { Component, Input, ViewChild, inject, Renderer2, ElementRef, InjectionToken, Directive, HostListener, SecurityContext, ContentChildren, NgModule } from '@angular/core';
 import { MatSidenav, MatSidenavContainer } from '@angular/material/sidenav';
 import { mixinDisabled, tdCollapseAnimation } from '@covalent/core/common';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { MatToolbar } from '@angular/material/toolbar';
-import * as i1 from '@angular/router';
-import * as i2$1 from '@angular/material/card';
+import { Router } from '@angular/router';
+import * as i2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { MatDivider } from '@angular/material/divider';
-import * as i2$2 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { MatIconButton } from '@angular/material/button';
@@ -128,9 +128,9 @@ class LayoutToggleBase {
 /* tslint:disable-next-line */
 const _TdLayoutToggleMixinBase = mixinDisabled(LayoutToggleBase);
 class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
-    _layout;
-    _renderer;
-    _elementRef;
+    _renderer = inject(Renderer2);
+    _elementRef = inject(ElementRef);
+    _layout = inject(new InjectionToken('ILayoutTogglable'), { optional: true });
     _toggleSubs;
     _initialized = false;
     _hideWhenOpened = false;
@@ -145,11 +145,8 @@ class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
             this._toggleVisibility();
         }
     }
-    constructor(_layout, _renderer, _elementRef) {
+    constructor() {
         super();
-        this._layout = _layout;
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
         // if layout has not been provided
         // show warn message
         if (!this._layout) {
@@ -204,14 +201,14 @@ class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
         /* tslint:disable-next-line */
         console.warn('Covalent: Parent layout not found for layout toggle directive');
     }
-    static ɵfac = function BaseLayoutToggleDirective_Factory(__ngFactoryType__) { i0.ɵɵinvalidFactory(); };
+    static ɵfac = function BaseLayoutToggleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseLayoutToggleDirective)(); };
     static ɵdir = /*@__PURE__*/ 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] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseLayoutToggleDirective, [{
         type: Directive
-    }], () => [{ type: undefined }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { hideWhenOpened: [{
+    }], () => [], { hideWhenOpened: [{
             type: Input
         }], clickListener: [{
             type: HostListener,
@@ -222,13 +219,10 @@ class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
     set tdLayoutToggle(tdLayoutToggle) {
         this.disabled = !(tdLayoutToggle === '' || tdLayoutToggle);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.toggle();
+        this._layout?.toggle();
     }
-    static ɵfac = function TdLayoutToggleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutToggleDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutToggleDirective_BaseFactory; return function TdLayoutToggleDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutToggleDirective_BaseFactory || (ɵTdLayoutToggleDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutToggleDirective)))(__ngFactoryType__ || TdLayoutToggleDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutToggleDirective, selectors: [["", "tdLayoutToggle", ""]], inputs: { tdLayoutToggle: "tdLayoutToggle" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutToggleDirective, [{
@@ -236,25 +230,17 @@ class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutToggle]',
             }]
-    }], () => [{ type: TdLayoutComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutToggle: [{
+    }], null, { tdLayoutToggle: [{
             type: Input
         }] }); })();
 class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
     set tdLayoutClose(tdLayoutClose) {
         this.disabled = !(tdLayoutClose === '' || tdLayoutClose);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.close();
+        this._layout?.close();
     }
-    static ɵfac = function TdLayoutCloseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutCloseDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutCloseDirective_BaseFactory; return function TdLayoutCloseDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutCloseDirective_BaseFactory || (ɵTdLayoutCloseDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutCloseDirective)))(__ngFactoryType__ || TdLayoutCloseDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutCloseDirective, selectors: [["", "tdLayoutClose", ""]], inputs: { tdLayoutClose: "tdLayoutClose" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutCloseDirective, [{
@@ -262,25 +248,17 @@ class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutClose]',
             }]
-    }], () => [{ type: TdLayoutComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutClose: [{
+    }], null, { tdLayoutClose: [{
             type: Input
         }] }); })();
 class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
     set tdLayoutClose(tdLayoutOpen) {
         this.disabled = !(tdLayoutOpen === '' || tdLayoutOpen);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.open();
+        this._layout?.open();
     }
-    static ɵfac = function TdLayoutOpenDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutOpenDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutOpenDirective_BaseFactory; return function TdLayoutOpenDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutOpenDirective_BaseFactory || (ɵTdLayoutOpenDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutOpenDirective)))(__ngFactoryType__ || TdLayoutOpenDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutOpenDirective, selectors: [["", "tdLayoutOpen", ""]], inputs: { tdLayoutClose: [0, "tdLayoutOpen", "tdLayoutClose"] }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutOpenDirective, [{
@@ -288,12 +266,7 @@ class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutOpen]',
             }]
-    }], () => [{ type: TdLayoutComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutClose: [{
+    }], null, { tdLayoutClose: [{
             type: Input,
             args: ['tdLayoutOpen']
         }] }); })();
@@ -341,7 +314,7 @@ function TdLayoutNavComponent_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.toolbarTitle);
 } }
 class TdLayoutNavComponent {
-    _router;
+    _router = inject(Router, { optional: true });
     /**
      * toolbarTitle?: string
      *
@@ -380,15 +353,12 @@ class TdLayoutNavComponent {
     get routerEnabled() {
         return !!this._router && !!this.navigationRoute;
     }
-    constructor(_router) {
-        this._router = _router;
-    }
     handleNavigationClick() {
         if (this.routerEnabled && this.navigationRoute) {
-            this._router.navigateByUrl(this.navigationRoute);
+            this._router?.navigateByUrl(this.navigationRoute);
         }
     }
-    static ɵfac = function TdLayoutNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavComponent)(i0.ɵɵdirectiveInject(i1.Router, 8)); };
+    static ɵfac = function TdLayoutNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavComponent)(); };
     static ɵcmp = /*@__PURE__*/ 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)(1, "mat-toolbar", 1);
@@ -406,14 +376,12 @@ class TdLayoutNavComponent {
             i0.ɵɵproperty("color", ctx.color);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.icon || ctx.logo || ctx.toolbarTitle);
-        } }, dependencies: [CommonModule, i2.NgIf, MatToolbar, MatIcon], styles: [".td-menu-button[_ngcontent-%COMP%]{margin-left:0}  [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}[_nghost-%COMP%]{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}[_nghost-%COMP%]   .td-layout-nav-wrapper[_ngcontent-%COMP%]{flex-direction:column;box-sizing:border-box;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%]{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}[_nghost-%COMP%]   .td-layout-nav-wrapper[_ngcontent-%COMP%]   .td-layout-nav-content[_ngcontent-%COMP%]{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{z-index:2;box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}"] });
+        } }, dependencies: [CommonModule, i1.NgIf, MatToolbar, MatIcon], styles: [".td-menu-button[_ngcontent-%COMP%]{margin-left:0}  [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}[_nghost-%COMP%]{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}[_nghost-%COMP%]   .td-layout-nav-wrapper[_ngcontent-%COMP%]{flex-direction:column;box-sizing:border-box;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%]{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}[_nghost-%COMP%]   .td-layout-nav-wrapper[_ngcontent-%COMP%]   .td-layout-nav-content[_ngcontent-%COMP%]{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{z-index:2;box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavComponent, [{
         type: Component,
         args: [{ selector: 'td-layout-nav', imports: [CommonModule, MatToolbar, MatIcon], 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}:host mat-toolbar{z-index:2;box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}\n"] }]
-    }], () => [{ type: i1.Router, decorators: [{
-                type: Optional
-            }] }], { toolbarTitle: [{
+    }], null, { toolbarTitle: [{
             type: Input
         }], icon: [{
             type: Input
@@ -469,7 +437,7 @@ function TdLayoutNavListComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.toolbarTitle);
 } }
 class TdLayoutNavListComponent {
-    _router;
+    _router = inject(Router, { optional: true });
     sidenav;
     /**
      * toolbarTitle?: string
@@ -555,12 +523,9 @@ class TdLayoutNavListComponent {
     get routerEnabled() {
         return !!this._router && !!this.navigationRoute;
     }
-    constructor(_router) {
-        this._router = _router;
-    }
     handleNavigationClick() {
         if (this.routerEnabled && this.navigationRoute) {
-            this._router.navigateByUrl(this.navigationRoute);
+            this._router?.navigateByUrl(this.navigationRoute);
         }
     }
     /**
@@ -581,7 +546,7 @@ class TdLayoutNavListComponent {
     close() {
         return this.sidenav.close();
     }
-    static ɵfac = function TdLayoutNavListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListComponent)(i0.ɵɵdirectiveInject(i1.Router, 8)); };
+    static ɵfac = function TdLayoutNavListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListComponent)(); };
     static ɵcmp = /*@__PURE__*/ 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) {
@@ -618,14 +583,12 @@ class TdLayoutNavListComponent {
             i0.ɵɵproperty("ngIf", ctx.icon || ctx.logo || ctx.toolbarTitle);
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("color", ctx.color);
-        } }, dependencies: [CommonModule, i2.NgIf, MatSidenav, MatSidenavContainer, MatToolbar, MatIcon], styles: ["[_nghost-%COMP%]{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;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%]{flex-direction:column;box-sizing:border-box;display:flex;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%]{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   .td-layout-nav-list-content[_ngcontent-%COMP%]{text-align:start;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%]{flex-direction:column;box-sizing:border-box;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;flex:1}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%]{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{flex-grow:1}[_nghost-%COMP%]     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}"] });
+        } }, dependencies: [CommonModule, i1.NgIf, MatSidenav, MatSidenavContainer, MatToolbar, MatIcon], styles: ["[_nghost-%COMP%]{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;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%]{flex-direction:column;box-sizing:border-box;display:flex;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%]{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   .td-layout-nav-list-content[_ngcontent-%COMP%]{text-align:start;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%]{flex-direction:column;box-sizing:border-box;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;flex:1}[_nghost-%COMP%]   .td-layout-nav-list-wrapper[_ngcontent-%COMP%]   mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%]{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{flex-grow:1}[_nghost-%COMP%]     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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListComponent, [{
         type: Component,
         args: [{ selector: 'td-layout-nav-list', imports: [CommonModule, MatSidenav, MatSidenavContainer, MatToolbar, MatIcon], 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"] }]
-    }], () => [{ type: i1.Router, decorators: [{
-                type: Optional
-            }] }], { sidenav: [{
+    }], null, { sidenav: [{
             type: ViewChild,
             args: [MatSidenav, { static: true }]
         }], toolbarTitle: [{
@@ -647,19 +610,16 @@ class TdLayoutNavListComponent {
         }], navigationRoute: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLayoutNavListComponent, { className: "TdLayoutNavListComponent", filePath: "layout-nav-list/layout-nav-list.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLayoutNavListComponent, { className: "TdLayoutNavListComponent", filePath: "layout-nav-list/layout-nav-list.component.ts", lineNumber: 21 }); })();
 
 class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
     set tdLayoutNavListToggle(tdLayoutNavListToggle) {
         this.disabled = !(tdLayoutNavListToggle === '' || tdLayoutNavListToggle);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.toggle();
+        this._layout?.toggle();
     }
-    static ɵfac = function TdLayoutNavListToggleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListToggleDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutNavListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutNavListToggleDirective_BaseFactory; return function TdLayoutNavListToggleDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutNavListToggleDirective_BaseFactory || (ɵTdLayoutNavListToggleDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutNavListToggleDirective)))(__ngFactoryType__ || TdLayoutNavListToggleDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutNavListToggleDirective, selectors: [["", "tdLayoutNavListToggle", ""]], inputs: { tdLayoutNavListToggle: "tdLayoutNavListToggle" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListToggleDirective, [{
@@ -667,25 +627,17 @@ class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutNavListToggle]',
             }]
-    }], () => [{ type: TdLayoutNavListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutNavListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutNavListToggle: [{
+    }], null, { tdLayoutNavListToggle: [{
             type: Input
         }] }); })();
 class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
     set tdLayoutNavListClose(tdLayoutNavListClose) {
         this.disabled = !(tdLayoutNavListClose === '' || tdLayoutNavListClose);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.close();
+        this._layout?.close();
     }
-    static ɵfac = function TdLayoutNavListCloseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListCloseDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutNavListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutNavListCloseDirective_BaseFactory; return function TdLayoutNavListCloseDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutNavListCloseDirective_BaseFactory || (ɵTdLayoutNavListCloseDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutNavListCloseDirective)))(__ngFactoryType__ || TdLayoutNavListCloseDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutNavListCloseDirective, selectors: [["", "tdLayoutNavListClose", ""]], inputs: { tdLayoutNavListClose: "tdLayoutNavListClose" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListCloseDirective, [{
@@ -693,25 +645,17 @@ class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutNavListClose]',
             }]
-    }], () => [{ type: TdLayoutNavListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutNavListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutNavListClose: [{
+    }], null, { tdLayoutNavListClose: [{
             type: Input
         }] }); })();
 class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
     set tdLayoutNavListOpen(tdLayoutNavListOpen) {
         this.disabled = !(tdLayoutNavListOpen === '' || tdLayoutNavListOpen);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.open();
+        this._layout?.open();
     }
-    static ɵfac = function TdLayoutNavListOpenDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListOpenDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutNavListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutNavListOpenDirective_BaseFactory; return function TdLayoutNavListOpenDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutNavListOpenDirective_BaseFactory || (ɵTdLayoutNavListOpenDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutNavListOpenDirective)))(__ngFactoryType__ || TdLayoutNavListOpenDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutNavListOpenDirective, selectors: [["", "tdLayoutNavListOpen", ""]], inputs: { tdLayoutNavListOpen: "tdLayoutNavListOpen" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListOpenDirective, [{
@@ -719,12 +663,7 @@ class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutNavListOpen]',
             }]
-    }], () => [{ type: TdLayoutNavListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutNavListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutNavListOpen: [{
+    }], null, { tdLayoutNavListOpen: [{
             type: Input
         }] }); })();
 
@@ -801,7 +740,7 @@ class TdLayoutCardOverComponent {
             i0.ɵɵproperty("ngIf", ctx.cardSubtitle);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.cardTitle || ctx.cardSubtitle);
-        } }, dependencies: [CommonModule, i2.NgIf, MatToolbar, MatCardModule, i2$1.MatCard, i2$1.MatCardContent, i2$1.MatCardHeader, i2$1.MatCardSubtitle, i2$1.MatCardTitle, 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%]{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[_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}}"] });
+        } }, dependencies: [CommonModule, i1.NgIf, MatToolbar, MatCardModule, i2.MatCard, i2.MatCardContent, i2.MatCardHeader, i2.MatCardSubtitle, i2.MatCardTitle, 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%]{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[_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}}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutCardOverComponent, [{
         type: Component,
@@ -935,13 +874,10 @@ class TdLayoutManageListToggleDirective extends BaseLayoutToggleDirective {
     set tdLayoutManageListToggle(tdLayoutManageListToggle) {
         this.disabled = !(tdLayoutManageListToggle === '' || tdLayoutManageListToggle);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.toggle();
+        this._layout?.toggle();
     }
-    static ɵfac = function TdLayoutManageListToggleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutManageListToggleDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutManageListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutManageListToggleDirective_BaseFactory; return function TdLayoutManageListToggleDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutManageListToggleDirective_BaseFactory || (ɵTdLayoutManageListToggleDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutManageListToggleDirective)))(__ngFactoryType__ || TdLayoutManageListToggleDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutManageListToggleDirective, selectors: [["", "tdLayoutManageListToggle", ""]], inputs: { tdLayoutManageListToggle: "tdLayoutManageListToggle" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutManageListToggleDirective, [{
@@ -949,25 +885,17 @@ class TdLayoutManageListToggleDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutManageListToggle]',
             }]
-    }], () => [{ type: TdLayoutManageListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutManageListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutManageListToggle: [{
+    }], null, { tdLayoutManageListToggle: [{
             type: Input
         }] }); })();
 class TdLayoutManageListCloseDirective extends BaseLayoutToggleDirective {
     set tdLayoutManageListClose(tdLayoutManageListClose) {
         this.disabled = !(tdLayoutManageListClose === '' || tdLayoutManageListClose);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.close();
+        this._layout?.close();
     }
-    static ɵfac = function TdLayoutManageListCloseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutManageListCloseDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutManageListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutManageListCloseDirective_BaseFactory; return function TdLayoutManageListCloseDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutManageListCloseDirective_BaseFactory || (ɵTdLayoutManageListCloseDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutManageListCloseDirective)))(__ngFactoryType__ || TdLayoutManageListCloseDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutManageListCloseDirective, selectors: [["", "tdLayoutManageListClose", ""]], inputs: { tdLayoutManageListClose: "tdLayoutManageListClose" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutManageListCloseDirective, [{
@@ -975,25 +903,17 @@ class TdLayoutManageListCloseDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutManageListClose]',
             }]
-    }], () => [{ type: TdLayoutManageListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutManageListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutManageListClose: [{
+    }], null, { tdLayoutManageListClose: [{
             type: Input
         }] }); })();
 class TdLayoutManageListOpenDirective extends BaseLayoutToggleDirective {
     set tdLayoutManageListOpen(tdLayoutManageListOpen) {
         this.disabled = !(tdLayoutManageListOpen === '' || tdLayoutManageListOpen);
     }
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
     onClick() {
-        this._layout.open();
+        this._layout?.open();
     }
-    static ɵfac = function TdLayoutManageListOpenDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutManageListOpenDirective)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutManageListComponent), 8), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTdLayoutManageListOpenDirective_BaseFactory; return function TdLayoutManageListOpenDirective_Factory(__ngFactoryType__) { return (ɵTdLayoutManageListOpenDirective_BaseFactory || (ɵTdLayoutManageListOpenDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TdLayoutManageListOpenDirective)))(__ngFactoryType__ || TdLayoutManageListOpenDirective); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutManageListOpenDirective, selectors: [["", "tdLayoutManageListOpen", ""]], inputs: { tdLayoutManageListOpen: "tdLayoutManageListOpen" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutManageListOpenDirective, [{
@@ -1001,19 +921,14 @@ class TdLayoutManageListOpenDirective extends BaseLayoutToggleDirective {
         args: [{
                 selector: '[tdLayoutManageListOpen]',
             }]
-    }], () => [{ type: TdLayoutManageListComponent, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [forwardRef(() => TdLayoutManageListComponent)]
-            }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { tdLayoutManageListOpen: [{
+    }], null, { tdLayoutManageListOpen: [{
             type: Input
         }] }); })();
 
 const _c0$1 = ["*"];
 class TdLayoutFooterComponent {
-    _renderer;
-    _elementRef;
+    _renderer = inject(Renderer2);
+    _elementRef = inject(ElementRef);
     _color;
     /**
      * color?: 'accent' | 'primary' | 'warn'
@@ -1030,12 +945,10 @@ class TdLayoutFooterComponent {
     get color() {
         return this._color;
     }
-    constructor(_renderer, _elementRef) {
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
+    constructor() {
         this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-footer');
     }
-    static ɵfac = function TdLayoutFooterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutFooterComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵfac = function TdLayoutFooterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutFooterComponent)(); };
     static ɵcmp = /*@__PURE__*/ 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);
@@ -1044,7 +957,7 @@ class TdLayoutFooterComponent {
 (() => { (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"] }]
-    }], () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], { color: [{
+    }], () => [], { color: [{
             type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLayoutFooterComponent, { className: "TdLayoutFooterComponent", filePath: "layout-footer/layout-footer.component.ts", lineNumber: 9 }); })();
@@ -1179,9 +1092,9 @@ class TdNavigationDrawerToolbarDirective {
             }]
     }], null, null); })();
 class TdNavigationDrawerComponent {
-    _layout;
-    _router;
-    _sanitize;
+    _layout = inject(TdLayoutComponent);
+    _router = inject(Router, { optional: true });
+    _sanitize = inject(DomSanitizer);
     _menuToggled = false;
     _backgroundImage;
     _destroy$ = new Subject();
@@ -1281,11 +1194,6 @@ class TdNavigationDrawerComponent {
     get routerEnabled() {
         return !!this._router && !!this.navigationRoute;
     }
-    constructor(_layout, _router, _sanitize) {
-        this._layout = _layout;
-        this._router = _router;
-        this._sanitize = _sanitize;
-    }
     ngOnInit() {
         this._layout.sidenav.openedChange
             .pipe(takeUntil(this._destroy$))
@@ -1305,7 +1213,7 @@ class TdNavigationDrawerComponent {
     }
     handleNavigationClick() {
         if (this.routerEnabled && this.navigationRoute) {
-            this._router.navigateByUrl(this.navigationRoute);
+            this._router?.navigateByUrl(this.navigationRoute);
             this.close();
         }
     }
@@ -1327,7 +1235,7 @@ class TdNavigationDrawerComponent {
     close() {
         return this._layout.close();
     }
-    static ɵfac = function TdNavigationDrawerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdNavigationDrawerComponent)(i0.ɵɵdirectiveInject(forwardRef(() => TdLayoutComponent)), i0.ɵɵdirectiveInject(i1.Router, 8), i0.ɵɵdirectiveInject(i2$2.DomSanitizer)); };
+    static ɵfac = function TdNavigationDrawerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdNavigationDrawerComponent)(); };
     static ɵcmp = /*@__PURE__*/ 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);
@@ -1357,17 +1265,12 @@ class TdNavigationDrawerComponent {
             i0.ɵɵproperty("@tdCollapse", ctx.menuToggled);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("@tdCollapse", !ctx.menuToggled);
-        } }, dependencies: [CommonModule, i2.NgIf, MatToolbar, MatIcon, MatIconButton], 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%]{flex-direction:column;height:auto!important;display:block!important}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-toolbar-content[_ngcontent-%COMP%]{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;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%]{flex-direction:row;box-sizing:border-box;display:flex}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-menu-toggle[_ngcontent-%COMP%]   .td-navigation-drawer-label[_ngcontent-%COMP%]{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%]{width:24px;height:24px;padding:0}[_nghost-%COMP%] > div[_ngcontent-%COMP%]{overflow:hidden}"], data: { animation: [tdCollapseAnimation] } });
+        } }, dependencies: [CommonModule, i1.NgIf, MatToolbar, MatIcon, MatIconButton], 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%]{flex-direction:column;height:auto!important;display:block!important}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-toolbar-content[_ngcontent-%COMP%]{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;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%]{flex-direction:row;box-sizing:border-box;display:flex}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .td-navigation-drawer-menu-toggle[_ngcontent-%COMP%]   .td-navigation-drawer-label[_ngcontent-%COMP%]{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%]{width:24px;height:24px;padding:0}[_nghost-%COMP%] > div[_ngcontent-%COMP%]{overflow:hidden}"], data: { animation: [tdCollapseAnimation] } });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdNavigationDrawerComponent, [{
         type: Component,
         args: [{ selector: 'td-navigation-drawer', animations: [tdCollapseAnimation], imports: [CommonModule, MatToolbar, MatIcon, MatIconButton], 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{width:24px;height:24px;padding:0}:host>div{overflow:hidden}\n"] }]
-    }], () => [{ type: TdLayoutComponent, decorators: [{
-                type: Inject,
-                args: [forwardRef(() => TdLayoutComponent)]
-            }] }, { type: i1.Router, decorators: [{
-                type: Optional
-            }] }, { type: i2$2.DomSanitizer }], { _drawerMenu: [{
+    }], null, { _drawerMenu: [{
             type: ContentChildren,
             args: [TdNavigationDrawerMenuDirective, { descendants: true }]
         }], _toolbar: [{
@@ -1392,7 +1295,7 @@ class TdNavigationDrawerComponent {
         }], email: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdNavigationDrawerComponent, { className: "TdNavigationDrawerComponent", filePath: "navigation-drawer/navigation-drawer.component.ts", lineNumber: 46 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdNavigationDrawerComponent, { className: "TdNavigationDrawerComponent", filePath: "navigation-drawer/navigation-drawer.component.ts", lineNumber: 44 }); })();
 
 const TD_LAYOUTS = [
     TdLayoutComponent,