@covalent/core 4.0.0-beta.2 → 4.1.0-develop.2

package/layout/layout-manage-list/layout-manage-list.component.d.ts

@@ -10,7 +10,7 @@ export declare class TdLayoutManageListComponent implements ILayoutTogglable {
      * Defaults to "side".
      * See "MatSidenav" documentation for more info.
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     mode: 'side' | 'push' | 'over';
     /**
@@ -21,7 +21,7 @@ export declare class TdLayoutManageListComponent implements ILayoutTogglable {
      *
      * See "MatSidenav" documentation for more info.
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     opened: boolean;
     /**
@@ -30,7 +30,7 @@ export declare class TdLayoutManageListComponent implements ILayoutTogglable {
      * Sets the "width" of the sidenav in either "px" or "%"
      * Defaults to "257px".
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     sidenavWidth: string;
     /**
@@ -41,7 +41,7 @@ export declare class TdLayoutManageListComponent implements ILayoutTogglable {
      *
      * See documentation for more info and potential performance risks.
      *
-     * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
+     * https://github.com/angular/material2/blob/main/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
      */
     containerAutosize: boolean;
     /**

package/layout/layout-manage-list/layout-manage-list.directives.d.ts

@@ -3,23 +3,23 @@ import { TdLayoutManageListComponent } from './layout-manage-list.component';
 import { BaseLayoutToggleDirective } from '../layout-toggle.class';
 import * as i0 from "@angular/core";
 export declare class TdLayoutManageListToggleDirective extends BaseLayoutToggleDirective {
-    set tdLayoutManageListToggle(tdLayoutManageListToggle: boolean);
+    set tdLayoutManageListToggle(tdLayoutManageListToggle: boolean | string);
     constructor(layout: TdLayoutManageListComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutManageListToggleDirective, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListToggleDirective, "[tdLayoutManageListToggle]", never, { "hideWhenOpened": "hideWhenOpened"; "tdLayoutManageListToggle": "tdLayoutManageListToggle"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListToggleDirective, "[tdLayoutManageListToggle]", never, { "tdLayoutManageListToggle": "tdLayoutManageListToggle"; }, {}, never>;
 }
 export declare class TdLayoutManageListCloseDirective extends BaseLayoutToggleDirective {
     set tdLayoutManageListClose(tdLayoutManageListClose: boolean);
     constructor(layout: TdLayoutManageListComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutManageListCloseDirective, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListCloseDirective, "[tdLayoutManageListClose]", never, { "hideWhenOpened": "hideWhenOpened"; "tdLayoutManageListClose": "tdLayoutManageListClose"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListCloseDirective, "[tdLayoutManageListClose]", never, { "tdLayoutManageListClose": "tdLayoutManageListClose"; }, {}, never>;
 }
 export declare class TdLayoutManageListOpenDirective extends BaseLayoutToggleDirective {
-    set tdLayoutManageListOpen(tdLayoutManageListOpen: boolean);
+    set tdLayoutManageListOpen(tdLayoutManageListOpen: boolean | string);
     constructor(layout: TdLayoutManageListComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutManageListOpenDirective, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListOpenDirective, "[tdLayoutManageListOpen]", never, { "hideWhenOpened": "hideWhenOpened"; "tdLayoutManageListOpen": "tdLayoutManageListOpen"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListOpenDirective, "[tdLayoutManageListOpen]", never, { "tdLayoutManageListOpen": "tdLayoutManageListOpen"; }, {}, never>;
 }

package/layout/layout-nav/layout-nav.component.d.ts

@@ -7,33 +7,33 @@ export declare class TdLayoutNavComponent {
      *
      * Title set in toolbar.
      */
-    toolbarTitle: string;
+    toolbarTitle?: string;
     /**
      * icon?: string
      *
      * icon name to be displayed before the title
      */
-    icon: string;
+    icon?: string;
     /**
      * logo?: string
      *
      * logo icon name to be displayed before the title.
      * If [icon] is set, then this will not be shown.
      */
-    logo: string;
+    logo?: string;
     /**
      * color?: 'accent' | 'primary' | 'warn'
      *
      * toolbar color option: primary | accent | warn.
      * If [color] is not set, primary is used.
      */
-    color: 'accent' | 'primary' | 'warn';
+    color?: 'accent' | 'primary' | 'warn';
     /**
      * navigationRoute?: string
      *
      * option to set the combined route for the icon, logo, and toolbarTitle.
      */
-    navigationRoute: string;
+    navigationRoute?: string;
     /**
      * Checks if router was injected.
      */

package/layout/layout-nav-list/layout-nav-list.component.d.ts

@@ -10,26 +10,26 @@ export declare class TdLayoutNavListComponent implements ILayoutTogglable {
      *
      * Title set in toolbar.
      */
-    toolbarTitle: string;
+    toolbarTitle?: string;
     /**
      * icon?: string
      * icon name to be displayed before the title
      */
-    icon: string;
+    icon?: string;
     /**
      * logo?: string
      *
      * logo icon name to be displayed before the title.
      * If [icon] is set, then this will not be shown.
      */
-    logo: string;
+    logo?: string;
     /**
      * color?: 'accent' | 'primary' | 'warn'
      *
      * toolbar color option: primary | accent | warn.
      * If [color] is not set, primary is used.
      */
-    color: 'accent' | 'primary' | 'warn';
+    color?: 'accent' | 'primary' | 'warn';
     /**
      * mode?: 'side', 'push' or 'over'
      *
@@ -37,7 +37,7 @@ export declare class TdLayoutNavListComponent implements ILayoutTogglable {
      * Defaults to "side".
      * See "MatSidenav" documentation for more info.
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     mode: 'side' | 'push' | 'over';
     /**
@@ -47,7 +47,7 @@ export declare class TdLayoutNavListComponent implements ILayoutTogglable {
      *
      * See "MatSidenav" documentation for more info.
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     opened: boolean;
     /**
@@ -56,7 +56,7 @@ export declare class TdLayoutNavListComponent implements ILayoutTogglable {
      * Sets the "width" of the sidenav in either "px" or "%"
      * Defaults to "350px".
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     sidenavWidth: string;
     /**
@@ -67,7 +67,7 @@ export declare class TdLayoutNavListComponent implements ILayoutTogglable {
      *
      * See documentation for more info and potential performance risks.
      *
-     * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
+     * https://github.com/angular/material2/blob/main/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
      */
     containerAutosize: boolean;
     /**
@@ -75,7 +75,7 @@ export declare class TdLayoutNavListComponent implements ILayoutTogglable {
      *
      * option to set the combined route for the icon, logo, and toolbarTitle.
      */
-    navigationRoute: string;
+    navigationRoute?: string;
     /**
      * Checks if `ESC` should close the sidenav
      * Should only close it for `push` and `over` modes

package/layout/layout-nav-list/layout-nav-list.directives.d.ts

@@ -3,23 +3,23 @@ import { TdLayoutNavListComponent } from './layout-nav-list.component';
 import { BaseLayoutToggleDirective } from '../layout-toggle.class';
 import * as i0 from "@angular/core";
 export declare class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
-    set tdLayoutNavListToggle(tdLayoutNavListToggle: boolean);
+    set tdLayoutNavListToggle(tdLayoutNavListToggle: boolean | string);
     constructor(layout: TdLayoutNavListComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutNavListToggleDirective, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListToggleDirective, "[tdLayoutNavListToggle]", never, { "hideWhenOpened": "hideWhenOpened"; "tdLayoutNavListToggle": "tdLayoutNavListToggle"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListToggleDirective, "[tdLayoutNavListToggle]", never, { "tdLayoutNavListToggle": "tdLayoutNavListToggle"; }, {}, never>;
 }
 export declare class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
     set tdLayoutNavListClose(tdLayoutNavListClose: boolean);
     constructor(layout: TdLayoutNavListComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutNavListCloseDirective, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListCloseDirective, "[tdLayoutNavListClose]", never, { "hideWhenOpened": "hideWhenOpened"; "tdLayoutNavListClose": "tdLayoutNavListClose"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListCloseDirective, "[tdLayoutNavListClose]", never, { "tdLayoutNavListClose": "tdLayoutNavListClose"; }, {}, never>;
 }
 export declare class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
-    set tdLayoutNavListOpen(tdLayoutNavListOpen: boolean);
+    set tdLayoutNavListOpen(tdLayoutNavListOpen: boolean | string);
     constructor(layout: TdLayoutNavListComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutNavListOpenDirective, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListOpenDirective, "[tdLayoutNavListOpen]", never, { "hideWhenOpened": "hideWhenOpened"; "tdLayoutNavListOpen": "tdLayoutNavListOpen"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListOpenDirective, "[tdLayoutNavListOpen]", never, { "tdLayoutNavListOpen": "tdLayoutNavListOpen"; }, {}, never>;
 }

package/layout/layout-toggle.class.d.ts

@@ -16,7 +16,7 @@ export declare abstract class BaseLayoutToggleDirective extends _TdLayoutToggleM
     protected _layout: ILayoutTogglable;
     private _renderer;
     private _elementRef;
-    private _toggleSubs;
+    private _toggleSubs?;
     private _initialized;
     private _hideWhenOpened;
     /**

package/layout/layout.component.d.ts

@@ -10,7 +10,7 @@ export declare class TdLayoutComponent implements ILayoutTogglable {
      * Defaults to "over".
      * See "MatSidenav" documentation for more info.
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     mode: 'side' | 'push' | 'over';
     /**
@@ -21,7 +21,7 @@ export declare class TdLayoutComponent implements ILayoutTogglable {
      *
      * See "MatSidenav" documentation for more info.
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     opened: boolean;
     /**
@@ -30,7 +30,7 @@ export declare class TdLayoutComponent implements ILayoutTogglable {
      * Sets the "width" of the sidenav in either "px" or "%"
      * Defaults to "320px".
      *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
+     * https://github.com/angular/material2/tree/main/src/lib/sidenav
      */
     sidenavWidth: string;
     /**
@@ -41,7 +41,7 @@ export declare class TdLayoutComponent implements ILayoutTogglable {
      *
      * See documentation for more info and potential performance risks.
      *
-     * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
+     * https://github.com/angular/material2/blob/main/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
      */
     containerAutosize: boolean;
     /**

package/layout/layout.directives.d.ts

@@ -3,14 +3,14 @@ import { TdLayoutComponent } from './layout.component';
 import { BaseLayoutToggleDirective } from './layout-toggle.class';
 import * as i0 from "@angular/core";
 export declare class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
-    set tdLayoutToggle(tdLayoutToggle: boolean);
+    set tdLayoutToggle(tdLayoutToggle: boolean | string);
     constructor(layout: TdLayoutComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutToggleDirective, [{ optional: true; }, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutToggleDirective, "[tdLayoutToggle]", never, { "tdLayoutToggle": "tdLayoutToggle"; }, {}, never>;
 }
 export declare class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
-    set tdLayoutClose(tdLayoutClose: boolean);
+    set tdLayoutClose(tdLayoutClose: boolean | string | undefined);
     constructor(layout: TdLayoutComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutCloseDirective, [{ optional: true; }, null, null]>;

package/layout/navigation-drawer/navigation-drawer.component.d.ts

@@ -6,17 +6,17 @@ import { TdLayoutComponent } from '../layout.component';
 import * as i0 from "@angular/core";
 export declare class TdNavigationDrawerMenuDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<TdNavigationDrawerMenuDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdNavigationDrawerMenuDirective, "[td-navigation-drawer-menu]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdNavigationDrawerMenuDirective, "[tdNavigationDrawerMenu]", never, {}, {}, never>;
 }
 export declare class TdNavigationDrawerToolbarDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<TdNavigationDrawerToolbarDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdNavigationDrawerToolbarDirective, "[td-navigation-drawer-toolbar]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdNavigationDrawerToolbarDirective, "[tdNavigationDrawerToolbar]", never, {}, {}, never>;
 }
 export declare class TdNavigationDrawerComponent implements OnInit, OnDestroy {
     private _layout;
     private _router;
     private _sanitize;
-    private _closeSubscription;
+    private _closeSubscription?;
     private _menuToggled;
     private _backgroundImage;
     get menuToggled(): boolean;
@@ -38,40 +38,40 @@ export declare class TdNavigationDrawerComponent implements OnInit, OnDestroy {
      * sidenavTitle?: string
      * Title set in sideNav.
      */
-    sidenavTitle: string;
+    sidenavTitle?: string;
     /**
      * icon?: string
      *
      * icon name to be displayed before the title
      */
-    icon: string;
+    icon?: string;
     /**
      * logo?: string
      *
      * logo icon name to be displayed before the title.
      * If [icon] is set, then this will not be shown.
      */
-    logo: string;
+    logo?: string;
     /**
      * avatar?: string
      *
      * avatar url to be displayed before the title
      * If [icon] or [logo] are set, then this will not be shown.
      */
-    avatar: string;
+    avatar?: string;
     /**
      * color?: 'accent' | 'primary' | 'warn'
      *
      * toolbar color option: primary | accent | warn.
      * If [color] is not set, default is used.
      */
-    color: 'accent' | 'primary' | 'warn';
+    color?: 'accent' | 'primary' | 'warn';
     /**
      * navigationRoute?: string
      *
      * option to set the combined route for the icon, logo, and sidenavTitle.
      */
-    navigationRoute: string;
+    navigationRoute?: string;
     /**
      * backgroundUrl?: SafeResourceUrl
      *
@@ -79,21 +79,21 @@ export declare class TdNavigationDrawerComponent implements OnInit, OnDestroy {
      * URL used will be sanitized, but it should be always from a trusted source to avoid XSS.
      */
     set backgroundUrl(backgroundUrl: any);
-    get backgroundImage(): SafeStyle;
+    get backgroundImage(): SafeStyle | null;
     /**
      * name?: string
      *
      * string to be displayed as part of the navigation drawer sublabel.
      * if [email] is not set, then [name] will be the toggle menu text.
      */
-    name: string;
+    name?: string;
     /**
      * email?: string
      *
      * string to be displayed as part of the navigation drawer sublabel in the [toggle] menu text.
      * if [email] and [name] are not set, then the toggle menu is not rendered.
      */
-    email: string;
+    email?: string;
     /**
      * Checks if router was injected.
      */

package/layout/{layout-card-over → src/layout-card-over}/README.md

@@ -2,21 +2,20 @@
 
 `<td-layout-card-over>` is a layout component which lets you customize a `card over` view.
 
-
 ## API Summary
 
 #### Inputs
 
-+ cardTitle: string 
-  + Title set in card.
-+ cardSubtitle: string 
-  + Subtitle set in card.
-+ cardWidth: string 
-  + Card flex width in %. 
-  + Defaults to 70.
-+ color: string 
-  + Optional toolbar color. 
-  + Defaults to primary.
+- cardTitle: string
+  - Title set in card.
+- cardSubtitle: string
+  - Subtitle set in card.
+- cardWidth: string
+  - Card flex width in %.
+  - Defaults to 70.
+- color: string
+  - Optional toolbar color.
+  - Defaults to primary.
 
 ## Usage
 
@@ -28,14 +27,17 @@ Example for Card Over Layout / Nav Layout combo:
 
 ```html
 <td-layout-nav toolbarTitle="title" logo="logo" icon="icon" color="primary">
-  <td-layout-card-over cardTitle="title" cardSubtitle="subtitle" cardWidth="widthIn%" color="primary">
+  <td-layout-card-over
+    cardTitle="title"
+    cardSubtitle="subtitle"
+    cardWidth="widthIn%"
+    color="primary"
+  >
     .. main content
-    <div td-after-card>
-      .. content after card
-    </div>
+    <div td-after-card>.. content after card</div>
   </td-layout-card-over>
-  <td-layout-footer color="primary"> // color is optional
-    ... main footer content
+  <td-layout-footer color="primary">
+    // color is optional ... main footer content
   </td-layout-footer>
 </td-layout-nav>
 ```

package/layout/{layout-manage-list → src/layout-manage-list}/README.md

@@ -2,23 +2,22 @@
 
 `<td-layout-manage-list>` is a layout component which lets you customize a `management` view with toolbar items, item selections and footers.
 
-
 ## API Summary
 
 #### Inputs
 
-+ mode: 'over' | 'side' | 'push'
-  + The mode or styling of the sidenav. Defaults to 'side'.
-+ opened: boolean 
-  + Whether or not the sidenav is opened. 
-  + Use this binding to open/close the sidenav. 
-  + Defaults to 'true'.
-+ sidenavWidth: string 
-  + Sets the 'width' of the sidenav in either 'px' or '%'. 
-  + Defaults to '257px'.
-+ containerAutosize: boolean
-  + Sets 'autosize' of the sidenav-container.
-  + Defaults to 'false'.
+- mode: 'over' | 'side' | 'push'
+  - The mode or styling of the sidenav. Defaults to 'side'.
+- opened: boolean
+  - Whether or not the sidenav is opened.
+  - Use this binding to open/close the sidenav.
+  - Defaults to 'true'.
+- sidenavWidth: string
+  - Sets the 'width' of the sidenav in either 'px' or '%'.
+  - Defaults to '257px'.
+- containerAutosize: boolean
+  - Sets 'autosize' of the sidenav-container.
+  - Defaults to 'false'.
 
 ## Usage
 
@@ -27,7 +26,12 @@ To toggle/close/open the manage list sidenav from child layouts/components, you
 Example:
 
 ```html
-<button mat-icon-button [tdLayoutManageListToggle]="true" [hideWhenOpened]="true"> // or tdLayoutManageListOpen / tdLayoutManageListClose
+<button
+  mat-icon-button
+  [tdLayoutManageListToggle]="true"
+  [hideWhenOpened]="true"
+>
+  // or tdLayoutManageListOpen / tdLayoutManageListClose
   <mat-icon>menu</mat-icon>
 </button>
 ```
@@ -56,16 +60,10 @@ Example for Manage List Layout / Nav Layout combo:
 
 ```html
 <td-layout-nav sidenavTitle="title" logo="logo" icon="icon" color="primary">
-  <div td-toolbar-content>
-    .. main toolbar content
-  </div>
+  <div td-toolbar-content>.. main toolbar content</div>
   <td-layout-manage-list opened="true" mode="side" sidenavWidth="257px">
-    <mat-toolbar td-sidenav-content>
-      ... toolbar in sidenav
-    </mat-toolbar>
-    <mat-nav-list td-sidenav-content>
-      ... sidenav content
-    </mat-nav-list>
+    <mat-toolbar td-sidenav-content> ... toolbar in sidenav </mat-toolbar>
+    <mat-nav-list td-sidenav-content> ... sidenav content </mat-nav-list>
     <mat-toolbar>
       <button mat-icon-button tdLayoutManageListOpen [hideWhenOpened]="true">
         <mat-icon>arrow_back</mat-icon>
@@ -73,12 +71,10 @@ Example for Manage List Layout / Nav Layout combo:
       ... sub toolbar content
     </mat-toolbar>
     ... main content
-    <td-layout-footer-inner>
-      ... sub footer content
-    </td-layout-footer-inner>
+    <td-layout-footer-inner> ... sub footer content </td-layout-footer-inner>
   </td-layout-manage-list>
-  <td-layout-footer color="primary"> // color is optional
-    ... main footer content
+  <td-layout-footer color="primary">
+    // color is optional ... main footer content
   </td-layout-footer>
 </td-layout-nav>
 ```

package/layout/src/layout-nav/README.md

@@ -0,0 +1,50 @@
+## TdLayoutNavComponent: td-layout-nav
+
+`<td-layout-nav>` is a layout component which lets you customize a `navigation` view with toolbar items and footers.
+
+## API Summary
+
+#### Inputs
+
+- toolbarTitle: string
+  - Title set in toolbar.
+- icon: string
+  - Icon name to be displayed before the title.
+- logo: string
+  - Logo icon name to be displayed before the title.
+  - If [icon] is set, then this will not be shown.
+- color: string
+  - Optional toolbar color.
+  - Defaults to primary.
+- navigationRoute: string
+  - Option to set the combined route for the icon, logo, and toolbarTitle.
+
+## Usage
+
+`[td-menu-button]` is used to include a menu button before the logo and title.
+
+`[td-toolbar-content]` is used to include items in the toolbar.
+
+`td-layout-footer` is used to include items in the footer.
+
+Example for Nav Layout:
+
+```html
+<td-layout-nav
+  toolbarTitle="title"
+  logo="logo"
+  icon="icon"
+  color="primary"
+  navigationRoute="/"
+>
+  <button mat-icon-button td-menu-button>
+    // can use `[tdLayoutToggle]` to toggle main sidenav
+    <mat-icon>menu</mat-icon>
+  </button>
+  <div td-toolbar-content>.. main toolbar content</div>
+  ... main content
+  <td-layout-footer color="primary">
+    // color is optional ... main footer content
+  </td-layout-footer>
+</td-layout-nav>
+```