@covalent/core 6.4.0 → 6.4.1

package/file/src/file-upload/README.md

@@ -0,0 +1,136 @@
+## TdFileUploadComponent: td-file-upload
+
+## Usage
+
+Perfect component for file selection and upload in simple flows. Uses `TdFileInputComponent` internally.
+
+Example for usage:
+
+```html
+<td-file-upload
+  #fileUpload
+  [(ngModel)]="files"
+  defaultColor="accent"
+  activeColor="warn"
+  cancelColor="primary"
+  (selectFile)="selectEvent($event)"
+  (upload)="uploadEvent($event)"
+  (cancel)="cancelEvent()"
+  accept=".ext,.anotherExt"
+  [disabled]="disabled"
+  multiple
+>
+  <mat-icon>file_upload</mat-icon><span>{{ files?.name }}</span>
+  <ng-template td-file-input-label>
+    <mat-icon>attach_file</mat-icon>
+    <span> Choose a file... </span>
+  </ng-template>
+</td-file-upload>
+```
+
+```typescript
+export class Demo {
+
+  files: File | FileList;
+  disabled: boolean = false;
+
+  selectEvent(files: FileList | File): void {
+    if (files instanceof FileList) {
+      ...
+    } else {
+      ...
+    }
+  }
+
+  uploadEvent(files: FileList | File): void {
+    if (files instanceof FileList) {
+      ...
+    } else {
+      ...
+    }
+  }
+
+  cancelEvent(): void {
+    ...
+  }
+}
+```
+
+## API Summary
+
+#### Inputs
+
+- defaultColor: string
+  - Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'.
+- activeColor: string
+  - Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'.
+- cancelColor: string
+  - Sets cancel button color. Uses same color palette accepted as [MatButton] and defaults to 'warn'.
+- multiple: boolean
+  - Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent].
+- accept: string
+  - Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `<input/>` element.
+- disabled: boolean
+  - Disables [TdFileUploadComponent] and clears selected/dropped files.
+
+#### Events
+
+- upload: function($event)
+  - Event emitted when upload button is clicked. Emits a [File or FileList] object.
+- selectFile: function($event)
+  - Event emitted when a file is selected. Emits a [File or FileList] object.
+- cancel: function
+  - Event emitted when cancel button is clicked.
+
+#### Methods
+
+- cancel: function
+  - Method used to clear the files selected.
+
+## Setup
+
+Import the [CovalentFileModule] in your NgModule:
+
+```typescript
+import { CovalentFileModule } from '@covalent/core/file';
+@NgModule({
+  imports: [
+    CovalentFileModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## tdFileService
+
+Service provided with methods that wrap complexity for as easier file upload experience.
+
+## API Summary
+
+#### Methods
+
+- send: function(url: string, method: string, body: File | FormData, uploadExtras: IUploadExtras)
+  - Uploads a file to a URL.
+
+## Usage
+
+```typescript
+import { TdFileService } from '@covalent/core/file';
+
+export class Demo {
+
+  file: File;
+
+  constructor(private fileUploadService: TdFileService) {
+  };
+
+  uploadEvent1(file: File) {
+    this.fileService.send('https://url.to/API', 'post', file).subscribe((response) => {
+      ...
+    });
+  };
+
+}
+```

package/json-formatter/json-formatter.component.d.ts

@@ -74,5 +74,5 @@ export declare class TdJsonFormatterComponent {
     getPreview(): string;
     private parseChildren;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdJsonFormatterComponent, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdJsonFormatterComponent, "td-json-formatter", never, { "levelsOpen": { "alias": "levelsOpen"; "required": false; }; "key": { "alias": "key"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdJsonFormatterComponent, "td-json-formatter", never, { "levelsOpen": "levelsOpen"; "key": "key"; "data": "data"; }, {}, never, never, false, never>;
 }

package/layout/layout-card-over/layout-card-over.component.d.ts

@@ -27,5 +27,5 @@ export declare class TdLayoutCardOverComponent {
      */
     color: 'accent' | 'primary' | 'warn';
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutCardOverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutCardOverComponent, "td-layout-card-over", never, { "cardTitle": { "alias": "cardTitle"; "required": false; }; "cardSubtitle": { "alias": "cardSubtitle"; "required": false; }; "cardWidth": { "alias": "cardWidth"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*", "[td-after-card]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutCardOverComponent, "td-layout-card-over", never, { "cardTitle": "cardTitle"; "cardSubtitle": "cardSubtitle"; "cardWidth": "cardWidth"; "color": "color"; }, {}, never, ["*", "[td-after-card]"], false, never>;
 }

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

@@ -13,5 +13,5 @@ export declare class TdLayoutFooterComponent {
     get color(): 'primary' | 'accent' | 'warn' | undefined;
     constructor(_renderer: Renderer2, _elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutFooterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutFooterComponent, "td-layout-footer,td-layout-footer-inner", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutFooterComponent, "td-layout-footer,td-layout-footer-inner", never, { "color": "color"; }, {}, never, ["*"], false, never>;
 }

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

@@ -62,5 +62,5 @@ export declare class TdLayoutManageListComponent implements ILayoutTogglable {
      */
     close(): Promise<MatDrawerToggleResult>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutManageListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutManageListComponent, "td-layout-manage-list", never, { "mode": { "alias": "mode"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "sidenavWidth": { "alias": "sidenavWidth"; "required": false; }; "containerAutosize": { "alias": "containerAutosize"; "required": false; }; }, {}, never, ["mat-toolbar[td-sidenav-content]", "[td-sidenav-content]", "mat-toolbar", "*", "td-layout-footer-inner"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutManageListComponent, "td-layout-manage-list", never, { "mode": "mode"; "opened": "opened"; "sidenavWidth": "sidenavWidth"; "containerAutosize": "containerAutosize"; }, {}, never, ["mat-toolbar[td-sidenav-content]", "[td-sidenav-content]", "mat-toolbar", "*", "td-layout-footer-inner"], false, never>;
 }

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

@@ -7,19 +7,19 @@ export declare class TdLayoutManageListToggleDirective extends BaseLayoutToggleD
     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, { "tdLayoutManageListToggle": { "alias": "tdLayoutManageListToggle"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListToggleDirective, "[tdLayoutManageListToggle]", never, { "tdLayoutManageListToggle": "tdLayoutManageListToggle"; }, {}, never, never, false, 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, { "tdLayoutManageListClose": { "alias": "tdLayoutManageListClose"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListCloseDirective, "[tdLayoutManageListClose]", never, { "tdLayoutManageListClose": "tdLayoutManageListClose"; }, {}, never, never, false, never>;
 }
 export declare class TdLayoutManageListOpenDirective extends BaseLayoutToggleDirective {
     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, { "tdLayoutManageListOpen": { "alias": "tdLayoutManageListOpen"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutManageListOpenDirective, "[tdLayoutManageListOpen]", never, { "tdLayoutManageListOpen": "tdLayoutManageListOpen"; }, {}, never, never, false, never>;
 }

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

@@ -41,5 +41,5 @@ export declare class TdLayoutNavComponent {
     constructor(_router: Router);
     handleNavigationClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutNavComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutNavComponent, "td-layout-nav", never, { "toolbarTitle": { "alias": "toolbarTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "color": { "alias": "color"; "required": false; }; "navigationRoute": { "alias": "navigationRoute"; "required": false; }; }, {}, never, ["[td-menu-button]", "[td-toolbar-content]", "*", "td-layout-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutNavComponent, "td-layout-nav", never, { "toolbarTitle": "toolbarTitle"; "icon": "icon"; "logo": "logo"; "color": "color"; "navigationRoute": "navigationRoute"; }, {}, never, ["[td-menu-button]", "[td-toolbar-content]", "*", "td-layout-footer"], false, never>;
 }

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

@@ -100,5 +100,5 @@ export declare class TdLayoutNavListComponent implements ILayoutTogglable {
      */
     close(): Promise<MatDrawerToggleResult>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutNavListComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutNavListComponent, "td-layout-nav-list", never, { "toolbarTitle": { "alias": "toolbarTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "color": { "alias": "color"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "sidenavWidth": { "alias": "sidenavWidth"; "required": false; }; "containerAutosize": { "alias": "containerAutosize"; "required": false; }; "navigationRoute": { "alias": "navigationRoute"; "required": false; }; }, {}, never, ["[td-menu-button]", "[td-sidenav-toolbar-content]", "[td-sidenav-content]", "[td-toolbar-content]", "*", "td-layout-footer-inner", "td-layout-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutNavListComponent, "td-layout-nav-list", never, { "toolbarTitle": "toolbarTitle"; "icon": "icon"; "logo": "logo"; "color": "color"; "mode": "mode"; "opened": "opened"; "sidenavWidth": "sidenavWidth"; "containerAutosize": "containerAutosize"; "navigationRoute": "navigationRoute"; }, {}, never, ["[td-menu-button]", "[td-sidenav-toolbar-content]", "[td-sidenav-content]", "[td-toolbar-content]", "*", "td-layout-footer-inner", "td-layout-footer"], false, never>;
 }

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

@@ -7,19 +7,19 @@ export declare class TdLayoutNavListToggleDirective extends BaseLayoutToggleDire
     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, { "tdLayoutNavListToggle": { "alias": "tdLayoutNavListToggle"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListToggleDirective, "[tdLayoutNavListToggle]", never, { "tdLayoutNavListToggle": "tdLayoutNavListToggle"; }, {}, never, never, false, 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, { "tdLayoutNavListClose": { "alias": "tdLayoutNavListClose"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListCloseDirective, "[tdLayoutNavListClose]", never, { "tdLayoutNavListClose": "tdLayoutNavListClose"; }, {}, never, never, false, never>;
 }
 export declare class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
     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, { "tdLayoutNavListOpen": { "alias": "tdLayoutNavListOpen"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutNavListOpenDirective, "[tdLayoutNavListOpen]", never, { "tdLayoutNavListOpen": "tdLayoutNavListOpen"; }, {}, never, never, false, never>;
 }

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

@@ -36,5 +36,5 @@ export declare abstract class BaseLayoutToggleDirective extends _TdLayoutToggleM
     private _toggleVisibility;
     private _noLayoutMessage;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseLayoutToggleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseLayoutToggleDirective, never, never, { "hideWhenOpened": { "alias": "hideWhenOpened"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseLayoutToggleDirective, never, never, { "hideWhenOpened": "hideWhenOpened"; }, {}, never, never, false, never>;
 }

package/layout/layout.component.d.ts

@@ -62,5 +62,5 @@ export declare class TdLayoutComponent implements ILayoutTogglable {
      */
     close(): Promise<MatDrawerToggleResult>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutComponent, "td-layout", never, { "mode": { "alias": "mode"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "sidenavWidth": { "alias": "sidenavWidth"; "required": false; }; "containerAutosize": { "alias": "containerAutosize"; "required": false; }; }, {}, never, ["td-navigation-drawer", "[td-sidenav-content]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdLayoutComponent, "td-layout", never, { "mode": "mode"; "opened": "opened"; "sidenavWidth": "sidenavWidth"; "containerAutosize": "containerAutosize"; }, {}, never, ["td-navigation-drawer", "[td-sidenav-content]", "*"], false, never>;
 }

package/layout/layout.directives.d.ts

@@ -7,19 +7,19 @@ export declare class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
     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": { "alias": "tdLayoutToggle"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutToggleDirective, "[tdLayoutToggle]", never, { "tdLayoutToggle": "tdLayoutToggle"; }, {}, never, never, false, never>;
 }
 export declare class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
     set tdLayoutClose(tdLayoutClose: boolean | string | undefined);
     constructor(layout: TdLayoutComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutCloseDirective, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutCloseDirective, "[tdLayoutClose]", never, { "tdLayoutClose": { "alias": "tdLayoutClose"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutCloseDirective, "[tdLayoutClose]", never, { "tdLayoutClose": "tdLayoutClose"; }, {}, never, never, false, never>;
 }
 export declare class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
     set tdLayoutClose(tdLayoutOpen: boolean);
     constructor(layout: TdLayoutComponent, renderer: Renderer2, elementRef: ElementRef);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLayoutOpenDirective, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutOpenDirective, "[tdLayoutOpen]", never, { "tdLayoutClose": { "alias": "tdLayoutOpen"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLayoutOpenDirective, "[tdLayoutOpen]", never, { "tdLayoutClose": "tdLayoutOpen"; }, {}, never, never, false, never>;
 }

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

@@ -116,5 +116,5 @@ export declare class TdNavigationDrawerComponent implements OnInit, OnDestroy {
      */
     close(): Promise<MatDrawerToggleResult>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdNavigationDrawerComponent, [null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdNavigationDrawerComponent, "td-navigation-drawer", never, { "sidenavTitle": { "alias": "sidenavTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "color": { "alias": "color"; "required": false; }; "navigationRoute": { "alias": "navigationRoute"; "required": false; }; "backgroundUrl": { "alias": "backgroundUrl"; "required": false; }; "name": { "alias": "name"; "required": false; }; "email": { "alias": "email"; "required": false; }; }, {}, ["_drawerMenu", "_toolbar"], ["[td-navigation-drawer-toolbar]", "*", "[td-navigation-drawer-menu]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdNavigationDrawerComponent, "td-navigation-drawer", never, { "sidenavTitle": "sidenavTitle"; "icon": "icon"; "logo": "logo"; "avatar": "avatar"; "color": "color"; "navigationRoute": "navigationRoute"; "backgroundUrl": "backgroundUrl"; "name": "name"; "email": "email"; }, {}, ["_drawerMenu", "_toolbar"], ["[td-navigation-drawer-toolbar]", "*", "[td-navigation-drawer-menu]"], false, never>;
 }

package/layout/src/layout-card-over/README.md

@@ -0,0 +1,43 @@
+## TdLayoutCardOverComponent: td-layout-card-over
+
+`<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.
+
+## Usage
+
+`[td-after-card]` is used to include content after the main card over content.
+
+`td-layout-footer` is used to include items in the footer.
+
+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"
+  >
+    .. main content
+    <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>
+</td-layout-nav>
+```

package/layout/src/layout-manage-list/README.md

@@ -0,0 +1,80 @@
+## TdLayoutManageListComponent: td-layout-manage-list
+
+`<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'.
+
+## Usage
+
+To toggle/close/open the manage list sidenav from child layouts/components, you can use the `[tdLayoutManageListToggle]`, `[tdLayoutManageListClose]` or `[tdLayoutManageListOpen]` directives on any element and its click event will trigger the sidenav action.
+
+Example:
+
+```html
+<button
+  mat-icon-button
+  [tdLayoutManageListToggle]="true"
+  [hideWhenOpened]="true"
+>
+  // or tdLayoutManageListOpen / tdLayoutManageListClose
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+To disable the sidenav action, just set the input to false.
+
+```html
+<button mat-icon-button [tdLayoutManageListToggle]="false">
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+`[td-sidenav-content]` is used to include items in the left side list.
+
+`[td-toolbar-content]` is used to include items in the toolbar.
+
+`td-layout-footer-inner` is used to include items in the inner footer.
+
+`[tdLayoutManageListToggle]` is used to add the sidenav toggle behavior to any clickable element.
+
+`[tdLayoutManageListClose]` is used to add the sidenav close behavior to any clickable element.
+
+`[tdLayoutManageListOpen]` is used to add the sidenav open behavior to any clickable element.
+
+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>
+  <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>
+      <button mat-icon-button tdLayoutManageListOpen [hideWhenOpened]="true">
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      ... sub toolbar content
+    </mat-toolbar>
+    ... main content
+    <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>
+</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>
+```

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

@@ -0,0 +1,105 @@
+## TdLayoutNavListComponent: td-layout-nav-list
+
+`<td-layout-nav-list>` is a layout component which lets you customize a `navigation` list view with toolbar items, item selections 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.
+- 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
+
+To toggle/close/open the nav list sidenav from child layouts/components, you can use the `[tdLayoutNavListToggle]`, `[tdLayoutNavListClose]` or `[tdLayoutNavListOpen]` directives on any element and its click event will trigger the sidenav action.
+
+Example:
+
+```html
+<button mat-icon-button [tdLayoutNavListToggle]="true" [hideWhenOpened]="true">
+  // or tdLayoutNavListOpen / tdLayoutNavListClose
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+To disable the sidenav action, just set the input to false.
+
+```html
+<button mat-icon-button [tdLayoutNavListToggle]="false">
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+`[td-menu-button]` is used to include a menu button before the logo and title.
+
+`[td-sidenav-content]` is used to include items in the left side list.
+
+`[td-sidenav-toolbar-content]` is used to include items in the left toolbar.
+
+`[td-toolbar-content]` is used to include items in the right toolbar.
+
+`td-layout-footer-inner` is used to include items in the inner footer.
+
+`td-layout-footer` is used to include items in the main footer.
+
+`[tdLayoutNavListToggle]` is used to add the sidenav toggle behavior to any clickable element.
+
+`[tdLayoutNavListClose]` is used to add the sidenav close behavior to any clickable element.
+
+`[tdLayoutNavListOpen]` is used to add the sidenav open behavior to any clickable element.
+
+Example for Nav List Layout:
+
+```html
+<td-layout-nav-list
+  sidenavTitle="title"
+  logo="logo"
+  icon="icon"
+  opened="true"
+  mode="side"
+  sidenavWidth="350px"
+  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-sidenav-toolbar-content>... left toolbar content</div>
+  <mat-nav-list td-sidenav-content>
+    <button mat-icon-button tdLayoutNavListOpen [hideWhenOpened]="true">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    ... sidenav content
+  </mat-nav-list>
+  <div td-toolbar-content>... right toolbar content</div>
+  ... main content
+  <td-layout-footer-inner> ... sub footer content </td-layout-footer-inner>
+  <td-layout-footer color="primary">
+    // color is optional ... main footer content
+  </td-layout-footer>
+</td-layout-nav-list>
+```

package/loading/directives/loading.directive.d.ts

@@ -66,5 +66,5 @@ export declare class TdLoadingDirective implements OnInit, OnDestroy {
      */
     private _registerComponent;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdLoadingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLoadingDirective, "[tdLoading]", never, { "name": { "alias": "tdLoading"; "required": false; }; "until": { "alias": "tdLoadingUntil"; "required": false; }; "type": { "alias": "tdLoadingType"; "required": false; }; "mode": { "alias": "tdLoadingMode"; "required": false; }; "strategy": { "alias": "tdLoadingStrategy"; "required": false; }; "color": { "alias": "tdLoadingColor"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLoadingDirective, "[tdLoading]", never, { "name": "tdLoading"; "until": "tdLoadingUntil"; "type": "tdLoadingType"; "mode": "tdLoadingMode"; "strategy": "tdLoadingStrategy"; "color": "tdLoadingColor"; }, {}, never, never, false, never>;
 }

package/message/message.component.d.ts

@@ -97,5 +97,5 @@ export declare class TdMessageComponent implements AfterViewInit {
      */
     private _detach;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdMessageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdMessageComponent, "td-message", never, { "label": { "alias": "label"; "required": false; }; "sublabel": { "alias": "sublabel"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "color": { "alias": "color"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, {}, never, ["[td-message-actions]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdMessageComponent, "td-message", never, { "label": "label"; "sublabel": "sublabel"; "icon": "icon"; "color": "color"; "opened": "opened"; }, {}, never, ["[td-message-actions]"], false, never>;
 }