@covalent/core 6.3.0 → 6.4.1

package/fesm2015/covalent-core-json-formatter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"covalent-core-json-formatter.mjs","sources":["../../../../libs/angular/json-formatter/src/collapse.animation.ts","../../../../libs/angular/json-formatter/src/json-formatter.component.ts","../../../../libs/angular/json-formatter/src/json-formatter.component.html","../../../../libs/angular/json-formatter/src/json-formatter.module.ts","../../../../libs/angular/json-formatter/src/covalent-core-json-formatter.ts"],"sourcesContent":["import {\n  trigger,\n  state,\n  style,\n  transition,\n  animate,\n  AnimationTriggerMetadata,\n  AUTO_STYLE,\n  query,\n  animateChild,\n  group,\n} from '@angular/animations';\n\nexport interface IAnimationOptions {\n  anchor?: string;\n  duration?: number;\n  delay?: number;\n}\n\nexport interface ICollapseAnimation extends IAnimationOptions {\n  easeOnClose?: string;\n  easeOnOpen?: string;\n}\n\n/**\n * const tdCollapseAnimation\n *\n * Parameter Options:\n * * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.\n * * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.\n * * easeOnClose: Animation accelerates and decelerates when closing. Defaults to ease-in.\n * * easeOnOpen: Animation accelerates and decelerates when opening. Defaults to ease-out.\n *\n * Returns an [AnimationTriggerMetadata] object with boolean states for a collapse/expand animation.\n *\n * usage: [@tdCollapse]=\"{ value: true | false, params: { duration: 500 }}\"\n */\nexport const tdCollapseAnimation: AnimationTriggerMetadata = trigger(\n  'tdCollapse',\n  [\n    state(\n      '1',\n      style({\n        height: '0',\n        overflow: 'hidden',\n      })\n    ),\n    state(\n      '0',\n      style({\n        height: AUTO_STYLE,\n        overflow: AUTO_STYLE,\n      })\n    ),\n    transition(\n      '0 => 1',\n      [\n        style({\n          overflow: 'hidden',\n          height: AUTO_STYLE,\n        }),\n        group([\n          query('@*', animateChild(), { optional: true }),\n          animate(\n            '{{ duration }}ms {{ delay }}ms {{ ease }}',\n            style({\n              height: '0',\n              overflow: 'hidden',\n            })\n          ),\n        ]),\n      ],\n      { params: { duration: 150, delay: '0', ease: 'ease-in' } }\n    ),\n    transition(\n      '1 => 0',\n      [\n        style({\n          height: '0',\n          overflow: 'hidden',\n        }),\n        group([\n          query('@*', animateChild(), { optional: true }),\n          animate(\n            '{{ duration }}ms {{ delay }}ms {{ ease }}',\n            style({\n              overflow: 'hidden',\n              height: AUTO_STYLE,\n            })\n          ),\n        ]),\n      ],\n      { params: { duration: 150, delay: '0', ease: 'ease-out' } }\n    ),\n  ]\n);\n","import {\n  Component,\n  Input,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Optional,\n} from '@angular/core';\nimport { Dir } from '@angular/cdk/bidi';\nimport { tdCollapseAnimation } from './collapse.animation';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'td-json-formatter',\n  styleUrls: ['./json-formatter.component.scss'],\n  templateUrl: './json-formatter.component.html',\n  animations: [tdCollapseAnimation],\n})\nexport class TdJsonFormatterComponent {\n  /**\n   * Max length for property names. Any names bigger than this get trunctated.\n   */\n  private static KEY_MAX_LENGTH = 30;\n\n  /**\n   * Max length for preview string. Any names bigger than this get trunctated.\n   */\n  private static PREVIEW_STRING_MAX_LENGTH = 80;\n\n  /**\n   * Max tooltip preview elements.\n   */\n  private static PREVIEW_LIMIT = 5;\n\n  private _key?: string;\n  private _data!: Record<string, any>;\n  private _children?: string[];\n  private _open = false;\n  private _levelsOpen = 0;\n\n  /**\n   * levelsOpen?: number\n   * Levels opened by default when JS object is formatted and rendered.\n   */\n  @Input()\n  set levelsOpen(levelsOpen: number) {\n    if (!Number.isInteger(levelsOpen)) {\n      throw new Error('[levelsOpen] needs to be an integer.');\n    }\n    this._levelsOpen = levelsOpen;\n    this._open = levelsOpen > 0;\n  }\n  get levelsOpen(): number {\n    return this._levelsOpen;\n  }\n\n  get open(): boolean {\n    return this._open;\n  }\n\n  /**\n   * key?: string\n   * Tag to be displayed next to formatted object.\n   */\n  @Input()\n  set key(key: string) {\n    this._key = key;\n  }\n  get key(): string {\n    const elipsis: string =\n      this._key && this._key.length > TdJsonFormatterComponent.KEY_MAX_LENGTH\n        ? '…'\n        : '';\n    return this._key\n      ? this._key.substring(0, TdJsonFormatterComponent.KEY_MAX_LENGTH) +\n          elipsis\n      : this._key ?? '';\n  }\n\n  /**\n   * data: any\n   * JS object to be formatted.\n   */\n  @Input()\n  set data(data: Record<string, any>) {\n    this._data = data;\n    this.parseChildren();\n  }\n  get data(): Record<string, any> {\n    return this._data;\n  }\n\n  get children(): string[] {\n    return this._children ?? [];\n  }\n\n  get isRTL(): boolean {\n    if (this._dir) {\n      return this._dir.dir === 'rtl';\n    }\n    return false;\n  }\n\n  constructor(\n    private _changeDetectorRef: ChangeDetectorRef,\n    @Optional() private _dir: Dir\n  ) {}\n\n  /**\n   * Refreshes json-formatter and rerenders [data]\n   */\n  refresh(): void {\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Toggles collapse/expanded state of component.\n   */\n  toggle(): void {\n    this._open = !this._open;\n  }\n\n  isObject(): boolean {\n    return this.getType(this._data) === 'object';\n  }\n\n  isArray(): boolean {\n    return Array.isArray(this._data);\n  }\n\n  hasChildren(): boolean {\n    return (this._children && this._children.length > 0) ?? false;\n  }\n\n  /**\n   * Gets parsed value depending on value type.\n   */\n  getValue(value: any): string {\n    const type: string = this.getType(value);\n    if (type === 'undefined' || type === 'null') {\n      return type;\n    } else if (type === 'date') {\n      value = new Date(value).toString();\n    } else if (type === 'string') {\n      value = '\"' + value + '\"';\n    } else if (type === 'function') {\n      // Remove content of the function\n      return (\n        value\n          .toString()\n          .replace(/[\\r\\n]/g, '')\n          .replace(/\\{.*\\}/, '') + '{…}'\n      );\n    } else if (Array.isArray(value)) {\n      return this.getObjectName() + ' [' + value.length + ']';\n    }\n    return value;\n  }\n\n  /**\n   * Gets type of object.\n   * returns 'null' if object is null and 'date' if value is object and can be parsed to a date.\n   */\n  getType(object: any): string {\n    if (typeof object === 'object') {\n      if (!object) {\n        return 'null';\n      }\n      if (Array.isArray(object)) {\n        return 'object';\n      }\n      const date: Date = new Date(object);\n      if (\n        Object.prototype.toString.call(date) === '[object Date]' &&\n        !Number.isNaN(date.getTime())\n      ) {\n        return 'date';\n      }\n    }\n    return typeof object;\n  }\n\n  /**\n   * Generates string representation depending if its an object or function.\n   * see: http://stackoverflow.com/a/332429\n   */\n  getObjectName(): string {\n    const object: any = this._data;\n    if (this.isObject() && !object.constructor) {\n      return 'Object';\n    }\n    const funcNameRegex = /function (.{1,})\\(/;\n    const results = funcNameRegex.exec(object.constructor.toString());\n    if (results && results.length > 1) {\n      return results[1];\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Creates preview of nodes children to render in tooltip depending if its an array or an object.\n   */\n  getPreview(): string {\n    let previewData: string[];\n    let startChar = '{ ';\n    let endChar = ' }';\n    if (this.isArray()) {\n      const previewArray: any[] =\n        Object.entries(this._data).slice(\n          0,\n          TdJsonFormatterComponent.PREVIEW_LIMIT\n        ) ?? [];\n      previewData = previewArray.map((obj: any) => {\n        return this.getValue(obj);\n      });\n      startChar = '[';\n      endChar = ']';\n    } else {\n      const previewKeys: string[] =\n        this._children?.slice(0, TdJsonFormatterComponent.PREVIEW_LIMIT) ?? [];\n      previewData = previewKeys.map((key: string) => {\n        return key + ': ' + this.getValue(this._data[key] ?? undefined);\n      });\n    }\n    const previewString: string = previewData.join(', ');\n    const ellipsis: string =\n      previewData.length >= TdJsonFormatterComponent.PREVIEW_LIMIT ||\n      previewString.length > TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH\n        ? '…'\n        : '';\n    return (\n      startChar +\n      previewString.substring(\n        0,\n        TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH\n      ) +\n      ellipsis +\n      endChar\n    );\n  }\n\n  private parseChildren(): void {\n    if (this.isObject()) {\n      this._children = Object.keys(this._data ?? {});\n    }\n  }\n}\n","<div class=\"td-json-formatter-wrapper\">\n  <a\n    class=\"td-key\"\n    [class.td-key-node]=\"hasChildren()\"\n    [class.td-key-leaf]=\"!hasChildren()\"\n    [tabIndex]=\"isObject() ? 0 : -1\"\n    (keydown.enter)=\"toggle()\"\n    (click)=\"toggle()\"\n  >\n    <mat-icon class=\"td-node-icon\" *ngIf=\"hasChildren()\">\n      {{\n        open\n          ? 'keyboard_arrow_down'\n          : isRTL\n          ? 'keyboard_arrow_left'\n          : 'keyboard_arrow_right'\n      }}\n    </mat-icon>\n    <span *ngIf=\"key\" class=\"key\">{{ key }}:</span>\n    <span class=\"value\">\n      <span\n        [class.td-empty]=\"!hasChildren()\"\n        *ngIf=\"isObject()\"\n        [matTooltip]=\"getPreview()\"\n        matTooltipPosition=\"after\"\n      >\n        <span class=\"td-object-name\">{{ getObjectName() }}</span>\n        <span class=\"td-array-length\" *ngIf=\"isArray()\"\n          >[{{ data['length'] }}]</span\n        >\n      </span>\n      <span *ngIf=\"!isObject()\" [class]=\"getType(data)\">{{\n        getValue(data)\n      }}</span>\n    </span>\n  </a>\n  <div class=\"td-object-children\" [@tdCollapse]=\"!(hasChildren() && open)\">\n    <ng-template let-key ngFor [ngForOf]=\"children\">\n      <td-json-formatter\n        [key]=\"key\"\n        [data]=\"data[key]\"\n        [levelsOpen]=\"levelsOpen - 1\"\n      ></td-json-formatter>\n    </ng-template>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { TdJsonFormatterComponent } from './json-formatter.component';\n\n@NgModule({\n  imports: [CommonModule, MatTooltipModule, MatIconModule],\n  declarations: [TdJsonFormatterComponent],\n  exports: [TdJsonFormatterComponent],\n})\nexport class CovalentJsonFormatterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"covalent-core-json-formatter.mjs","sources":["../../../../libs/angular/json-formatter/src/collapse.animation.ts","../../../../libs/angular/json-formatter/src/json-formatter.component.ts","../../../../libs/angular/json-formatter/src/json-formatter.component.html","../../../../libs/angular/json-formatter/src/json-formatter.module.ts","../../../../libs/angular/json-formatter/src/covalent-core-json-formatter.ts"],"sourcesContent":["import {\n  trigger,\n  state,\n  style,\n  transition,\n  animate,\n  AnimationTriggerMetadata,\n  AUTO_STYLE,\n  query,\n  animateChild,\n  group,\n} from '@angular/animations';\n\nexport interface IAnimationOptions {\n  anchor?: string;\n  duration?: number;\n  delay?: number;\n}\n\nexport interface ICollapseAnimation extends IAnimationOptions {\n  easeOnClose?: string;\n  easeOnOpen?: string;\n}\n\n/**\n * const tdCollapseAnimation\n *\n * Parameter Options:\n * * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.\n * * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.\n * * easeOnClose: Animation accelerates and decelerates when closing. Defaults to ease-in.\n * * easeOnOpen: Animation accelerates and decelerates when opening. Defaults to ease-out.\n *\n * Returns an [AnimationTriggerMetadata] object with boolean states for a collapse/expand animation.\n *\n * usage: [@tdCollapse]=\"{ value: true | false, params: { duration: 500 }}\"\n */\nexport const tdCollapseAnimation: AnimationTriggerMetadata = trigger(\n  'tdCollapse',\n  [\n    state(\n      '1',\n      style({\n        height: '0',\n        overflow: 'hidden',\n      })\n    ),\n    state(\n      '0',\n      style({\n        height: AUTO_STYLE,\n        overflow: AUTO_STYLE,\n      })\n    ),\n    transition(\n      '0 => 1',\n      [\n        style({\n          overflow: 'hidden',\n          height: AUTO_STYLE,\n        }),\n        group([\n          query('@*', animateChild(), { optional: true }),\n          animate(\n            '{{ duration }}ms {{ delay }}ms {{ ease }}',\n            style({\n              height: '0',\n              overflow: 'hidden',\n            })\n          ),\n        ]),\n      ],\n      { params: { duration: 150, delay: '0', ease: 'ease-in' } }\n    ),\n    transition(\n      '1 => 0',\n      [\n        style({\n          height: '0',\n          overflow: 'hidden',\n        }),\n        group([\n          query('@*', animateChild(), { optional: true }),\n          animate(\n            '{{ duration }}ms {{ delay }}ms {{ ease }}',\n            style({\n              overflow: 'hidden',\n              height: AUTO_STYLE,\n            })\n          ),\n        ]),\n      ],\n      { params: { duration: 150, delay: '0', ease: 'ease-out' } }\n    ),\n  ]\n);\n","import {\n  Component,\n  Input,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Optional,\n} from '@angular/core';\nimport { Dir } from '@angular/cdk/bidi';\nimport { tdCollapseAnimation } from './collapse.animation';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'td-json-formatter',\n  styleUrls: ['./json-formatter.component.scss'],\n  templateUrl: './json-formatter.component.html',\n  animations: [tdCollapseAnimation],\n})\nexport class TdJsonFormatterComponent {\n  /**\n   * Max length for property names. Any names bigger than this get trunctated.\n   */\n  private static KEY_MAX_LENGTH = 30;\n\n  /**\n   * Max length for preview string. Any names bigger than this get trunctated.\n   */\n  private static PREVIEW_STRING_MAX_LENGTH = 80;\n\n  /**\n   * Max tooltip preview elements.\n   */\n  private static PREVIEW_LIMIT = 5;\n\n  private _key?: string;\n  private _data!: Record<string, any>;\n  private _children?: string[];\n  private _open = false;\n  private _levelsOpen = 0;\n\n  /**\n   * levelsOpen?: number\n   * Levels opened by default when JS object is formatted and rendered.\n   */\n  @Input()\n  set levelsOpen(levelsOpen: number) {\n    if (!Number.isInteger(levelsOpen)) {\n      throw new Error('[levelsOpen] needs to be an integer.');\n    }\n    this._levelsOpen = levelsOpen;\n    this._open = levelsOpen > 0;\n  }\n  get levelsOpen(): number {\n    return this._levelsOpen;\n  }\n\n  get open(): boolean {\n    return this._open;\n  }\n\n  /**\n   * key?: string\n   * Tag to be displayed next to formatted object.\n   */\n  @Input()\n  set key(key: string) {\n    this._key = key;\n  }\n  get key(): string {\n    const elipsis: string =\n      this._key && this._key.length > TdJsonFormatterComponent.KEY_MAX_LENGTH\n        ? '…'\n        : '';\n    return this._key\n      ? this._key.substring(0, TdJsonFormatterComponent.KEY_MAX_LENGTH) +\n          elipsis\n      : this._key ?? '';\n  }\n\n  /**\n   * data: any\n   * JS object to be formatted.\n   */\n  @Input()\n  set data(data: Record<string, any>) {\n    this._data = data;\n    this.parseChildren();\n  }\n  get data(): Record<string, any> {\n    return this._data;\n  }\n\n  get children(): string[] {\n    return this._children ?? [];\n  }\n\n  get isRTL(): boolean {\n    if (this._dir) {\n      return this._dir.dir === 'rtl';\n    }\n    return false;\n  }\n\n  constructor(\n    private _changeDetectorRef: ChangeDetectorRef,\n    @Optional() private _dir: Dir\n  ) {}\n\n  /**\n   * Refreshes json-formatter and rerenders [data]\n   */\n  refresh(): void {\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Toggles collapse/expanded state of component.\n   */\n  toggle(): void {\n    this._open = !this._open;\n  }\n\n  isObject(): boolean {\n    return this.getType(this._data) === 'object';\n  }\n\n  isArray(): boolean {\n    return Array.isArray(this._data);\n  }\n\n  hasChildren(): boolean {\n    return (this._children && this._children.length > 0) ?? false;\n  }\n\n  /**\n   * Gets parsed value depending on value type.\n   */\n  getValue(value: any): string {\n    const type: string = this.getType(value);\n    if (type === 'undefined' || type === 'null') {\n      return type;\n    } else if (type === 'date') {\n      value = new Date(value).toString();\n    } else if (type === 'string') {\n      value = '\"' + value + '\"';\n    } else if (type === 'function') {\n      // Remove content of the function\n      return (\n        value\n          .toString()\n          .replace(/[\\r\\n]/g, '')\n          .replace(/\\{.*\\}/, '') + '{…}'\n      );\n    } else if (Array.isArray(value)) {\n      return this.getObjectName() + ' [' + value.length + ']';\n    }\n    return value;\n  }\n\n  /**\n   * Gets type of object.\n   * returns 'null' if object is null and 'date' if value is object and can be parsed to a date.\n   */\n  getType(object: any): string {\n    if (typeof object === 'object') {\n      if (!object) {\n        return 'null';\n      }\n      if (Array.isArray(object)) {\n        return 'object';\n      }\n      const date: Date = new Date(object);\n      if (\n        Object.prototype.toString.call(date) === '[object Date]' &&\n        !Number.isNaN(date.getTime())\n      ) {\n        return 'date';\n      }\n    }\n    return typeof object;\n  }\n\n  /**\n   * Generates string representation depending if its an object or function.\n   * see: http://stackoverflow.com/a/332429\n   */\n  getObjectName(): string {\n    const object: any = this._data;\n    if (this.isObject() && !object.constructor) {\n      return 'Object';\n    }\n    const funcNameRegex = /function (.{1,})\\(/;\n    const results = funcNameRegex.exec(object.constructor.toString());\n    if (results && results.length > 1) {\n      return results[1];\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Creates preview of nodes children to render in tooltip depending if its an array or an object.\n   */\n  getPreview(): string {\n    let previewData: string[];\n    let startChar = '{ ';\n    let endChar = ' }';\n    if (this.isArray()) {\n      const previewArray: any[] =\n        Object.entries(this._data).slice(\n          0,\n          TdJsonFormatterComponent.PREVIEW_LIMIT\n        ) ?? [];\n      previewData = previewArray.map((obj: any) => {\n        return this.getValue(obj);\n      });\n      startChar = '[';\n      endChar = ']';\n    } else {\n      const previewKeys: string[] =\n        this._children?.slice(0, TdJsonFormatterComponent.PREVIEW_LIMIT) ?? [];\n      previewData = previewKeys.map((key: string) => {\n        return key + ': ' + this.getValue(this._data[key] ?? undefined);\n      });\n    }\n    const previewString: string = previewData.join(', ');\n    const ellipsis: string =\n      previewData.length >= TdJsonFormatterComponent.PREVIEW_LIMIT ||\n      previewString.length > TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH\n        ? '…'\n        : '';\n    return (\n      startChar +\n      previewString.substring(\n        0,\n        TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH\n      ) +\n      ellipsis +\n      endChar\n    );\n  }\n\n  private parseChildren(): void {\n    if (this.isObject()) {\n      this._children = Object.keys(this._data ?? {});\n    }\n  }\n}\n","<div class=\"td-json-formatter-wrapper\">\n  <a\n    class=\"td-key\"\n    [class.td-key-node]=\"hasChildren()\"\n    [class.td-key-leaf]=\"!hasChildren()\"\n    [tabIndex]=\"isObject() ? 0 : -1\"\n    (keydown.enter)=\"toggle()\"\n    (click)=\"toggle()\"\n  >\n    <mat-icon class=\"td-node-icon\" *ngIf=\"hasChildren()\">\n      {{\n        open\n          ? 'keyboard_arrow_down'\n          : isRTL\n          ? 'keyboard_arrow_left'\n          : 'keyboard_arrow_right'\n      }}\n    </mat-icon>\n    <span *ngIf=\"key\" class=\"key\">{{ key }}:</span>\n    <span class=\"value\">\n      <span\n        [class.td-empty]=\"!hasChildren()\"\n        *ngIf=\"isObject()\"\n        [matTooltip]=\"getPreview()\"\n        matTooltipPosition=\"after\"\n      >\n        <span class=\"td-object-name\">{{ getObjectName() }}</span>\n        <span class=\"td-array-length\" *ngIf=\"isArray()\"\n          >[{{ data['length'] }}]</span\n        >\n      </span>\n      <span *ngIf=\"!isObject()\" [class]=\"getType(data)\">{{\n        getValue(data)\n      }}</span>\n    </span>\n  </a>\n  <div class=\"td-object-children\" [@tdCollapse]=\"!(hasChildren() && open)\">\n    <ng-template let-key ngFor [ngForOf]=\"children\">\n      <td-json-formatter\n        [key]=\"key\"\n        [data]=\"data[key]\"\n        [levelsOpen]=\"levelsOpen - 1\"\n      ></td-json-formatter>\n    </ng-template>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { TdJsonFormatterComponent } from './json-formatter.component';\n\n@NgModule({\n  imports: [CommonModule, MatTooltipModule, MatIconModule],\n  declarations: [TdJsonFormatterComponent],\n  exports: [TdJsonFormatterComponent],\n})\nexport class CovalentJsonFormatterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/covalent-core-layout.mjs

@@ -93,9 +93,9 @@ class TdLayoutComponent {
         return this.sidenav.close();
     }
 }
-TdLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TdLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutComponent, selector: "td-layout", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n  <mat-sidenav\n    #sidenav\n    class=\"td-layout-sidenav\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n    [disableClose]=\"disableClose\"\n  >\n    <ng-content select=\"td-navigation-drawer\"></ng-content>\n    <ng-content select=\"[td-sidenav-content]\"></ng-content>\n  </mat-sidenav>\n  <ng-content></ng-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutComponent, decorators: [{
+TdLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutComponent, selector: "td-layout", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n  <mat-sidenav\n    #sidenav\n    class=\"td-layout-sidenav\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n    [disableClose]=\"disableClose\"\n  >\n    <ng-content select=\"td-navigation-drawer\"></ng-content>\n    <ng-content select=\"[td-sidenav-content]\"></ng-content>\n  </mat-sidenav>\n  <ng-content></ng-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-layout', template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n  <mat-sidenav\n    #sidenav\n    class=\"td-layout-sidenav\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n    [disableClose]=\"disableClose\"\n  >\n    <ng-content select=\"td-navigation-drawer\"></ng-content>\n    <ng-content select=\"[td-sidenav-content]\"></ng-content>\n  </mat-sidenav>\n  <ng-content></ng-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:flex;flex-direction:column}\n"] }]
         }], propDecorators: { sidenav: [{
@@ -189,9 +189,9 @@ class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
         console.warn('Covalent: Parent layout not found for layout toggle directive');
     }
 }
-BaseLayoutToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: BaseLayoutToggleDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-BaseLayoutToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: BaseLayoutToggleDirective, inputs: { hideWhenOpened: "hideWhenOpened" }, host: { listeners: { "click": "clickListener($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: BaseLayoutToggleDirective, decorators: [{
+BaseLayoutToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutToggleDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+BaseLayoutToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseLayoutToggleDirective, inputs: { hideWhenOpened: "hideWhenOpened" }, host: { listeners: { "click": "clickListener($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseLayoutToggleDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hideWhenOpened: [{
                 type: Input
@@ -211,9 +211,9 @@ class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
         this._layout.toggle();
     }
 }
-TdLayoutToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutToggleDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutToggleDirective, selector: "[tdLayoutToggle]", inputs: { tdLayoutToggle: "tdLayoutToggle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutToggleDirective, decorators: [{
+TdLayoutToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutToggleDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutToggleDirective, selector: "[tdLayoutToggle]", inputs: { tdLayoutToggle: "tdLayoutToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutToggle]',
@@ -239,9 +239,9 @@ class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
         this._layout.close();
     }
 }
-TdLayoutCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutCloseDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutCloseDirective, selector: "[tdLayoutClose]", inputs: { tdLayoutClose: "tdLayoutClose" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutCloseDirective, decorators: [{
+TdLayoutCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutCloseDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutCloseDirective, selector: "[tdLayoutClose]", inputs: { tdLayoutClose: "tdLayoutClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutClose]',
@@ -267,9 +267,9 @@ class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
         this._layout.open();
     }
 }
-TdLayoutOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutOpenDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutOpenDirective, selector: "[tdLayoutOpen]", inputs: { tdLayoutClose: ["tdLayoutOpen", "tdLayoutClose"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutOpenDirective, decorators: [{
+TdLayoutOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutOpenDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutOpenDirective, selector: "[tdLayoutOpen]", inputs: { tdLayoutClose: ["tdLayoutOpen", "tdLayoutClose"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutOpenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutOpen]',
@@ -309,9 +309,9 @@ class TdLayoutNavComponent {
         }
     }
 }
-TdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavComponent, deps: [{ token: i1$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutNavComponent, selector: "td-layout-nav", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute" }, ngImport: i0, template: "<div class=\"td-layout-nav-wrapper\">\n  <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n    <ng-content select=\"[td-menu-button]\"></ng-content>\n    <span\n      *ngIf=\"icon || logo || toolbarTitle\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n      class=\"td-layout-nav-toolbar-content\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n    </span>\n    <ng-content select=\"[td-toolbar-content]\"></ng-content>\n  </mat-toolbar>\n  <div class=\"td-layout-nav-content\" cdkScrollable>\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n", styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavComponent, decorators: [{
+TdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavComponent, deps: [{ token: i1$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutNavComponent, selector: "td-layout-nav", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute" }, ngImport: i0, template: "<div class=\"td-layout-nav-wrapper\">\n  <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n    <ng-content select=\"[td-menu-button]\"></ng-content>\n    <span\n      *ngIf=\"icon || logo || toolbarTitle\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n      class=\"td-layout-nav-toolbar-content\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n    </span>\n    <ng-content select=\"[td-toolbar-content]\"></ng-content>\n  </mat-toolbar>\n  <div class=\"td-layout-nav-content\" cdkScrollable>\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n", styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-layout-nav', template: "<div class=\"td-layout-nav-wrapper\">\n  <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n    <ng-content select=\"[td-menu-button]\"></ng-content>\n    <span\n      *ngIf=\"icon || logo || toolbarTitle\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n      class=\"td-layout-nav-toolbar-content\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n    </span>\n    <ng-content select=\"[td-toolbar-content]\"></ng-content>\n  </mat-toolbar>\n  <div class=\"td-layout-nav-content\" cdkScrollable>\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n", styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"] }]
         }], ctorParameters: function () {
@@ -418,9 +418,9 @@ class TdLayoutNavListComponent {
         return this.sidenav.close();
     }
 }
-TdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavListComponent, deps: [{ token: i1$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutNavListComponent, selector: "td-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"td-layout-nav-list-wrapper\">\n  <mat-sidenav-container\n    fullscreen\n    [autosize]=\"containerAutosize\"\n    class=\"td-layout-nav-list\"\n  >\n    <mat-sidenav\n      #sidenav\n      position=\"start\"\n      [mode]=\"mode\"\n      [opened]=\"opened\"\n      [disableClose]=\"disableClose\"\n      [style.max-width]=\"sidenavWidth\"\n      [style.min-width]=\"sidenavWidth\"\n    >\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-menu-button]\"></ng-content>\n        <span\n          *ngIf=\"icon || logo || toolbarTitle\"\n          class=\"td-layout-nav-list-toolbar-content\"\n          [class.cursor-pointer]=\"routerEnabled\"\n          (click)=\"handleNavigationClick()\"\n        >\n          <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n          <mat-icon\n            *ngIf=\"logo && !icon\"\n            class=\"mat-icon-logo\"\n            [svgIcon]=\"logo\"\n          ></mat-icon>\n          <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n        </span>\n        <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content select=\"[td-sidenav-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    <div class=\"td-layout-nav-list-main\">\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"td-layout-footer-inner\"></ng-content>\n    </div>\n  </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavListComponent, decorators: [{
+TdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavListComponent, deps: [{ token: i1$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutNavListComponent, selector: "td-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"td-layout-nav-list-wrapper\">\n  <mat-sidenav-container\n    fullscreen\n    [autosize]=\"containerAutosize\"\n    class=\"td-layout-nav-list\"\n  >\n    <mat-sidenav\n      #sidenav\n      position=\"start\"\n      [mode]=\"mode\"\n      [opened]=\"opened\"\n      [disableClose]=\"disableClose\"\n      [style.max-width]=\"sidenavWidth\"\n      [style.min-width]=\"sidenavWidth\"\n    >\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-menu-button]\"></ng-content>\n        <span\n          *ngIf=\"icon || logo || toolbarTitle\"\n          class=\"td-layout-nav-list-toolbar-content\"\n          [class.cursor-pointer]=\"routerEnabled\"\n          (click)=\"handleNavigationClick()\"\n        >\n          <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n          <mat-icon\n            *ngIf=\"logo && !icon\"\n            class=\"mat-icon-logo\"\n            [svgIcon]=\"logo\"\n          ></mat-icon>\n          <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n        </span>\n        <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content select=\"[td-sidenav-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    <div class=\"td-layout-nav-list-main\">\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"td-layout-footer-inner\"></ng-content>\n    </div>\n  </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-layout-nav-list', template: "<div class=\"td-layout-nav-list-wrapper\">\n  <mat-sidenav-container\n    fullscreen\n    [autosize]=\"containerAutosize\"\n    class=\"td-layout-nav-list\"\n  >\n    <mat-sidenav\n      #sidenav\n      position=\"start\"\n      [mode]=\"mode\"\n      [opened]=\"opened\"\n      [disableClose]=\"disableClose\"\n      [style.max-width]=\"sidenavWidth\"\n      [style.min-width]=\"sidenavWidth\"\n    >\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-menu-button]\"></ng-content>\n        <span\n          *ngIf=\"icon || logo || toolbarTitle\"\n          class=\"td-layout-nav-list-toolbar-content\"\n          [class.cursor-pointer]=\"routerEnabled\"\n          (click)=\"handleNavigationClick()\"\n        >\n          <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n          <mat-icon\n            *ngIf=\"logo && !icon\"\n            class=\"mat-icon-logo\"\n            [svgIcon]=\"logo\"\n          ></mat-icon>\n          <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n        </span>\n        <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content select=\"[td-sidenav-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    <div class=\"td-layout-nav-list-main\">\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"td-layout-footer-inner\"></ng-content>\n    </div>\n  </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () {
@@ -461,9 +461,9 @@ class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
         this._layout.toggle();
     }
 }
-TdLayoutNavListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavListToggleDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutNavListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutNavListToggleDirective, selector: "[tdLayoutNavListToggle]", inputs: { tdLayoutNavListToggle: "tdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavListToggleDirective, decorators: [{
+TdLayoutNavListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavListToggleDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutNavListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutNavListToggleDirective, selector: "[tdLayoutNavListToggle]", inputs: { tdLayoutNavListToggle: "tdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavListToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutNavListToggle]',
@@ -489,9 +489,9 @@ class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
         this._layout.close();
     }
 }
-TdLayoutNavListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavListCloseDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutNavListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutNavListCloseDirective, selector: "[tdLayoutNavListClose]", inputs: { tdLayoutNavListClose: "tdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavListCloseDirective, decorators: [{
+TdLayoutNavListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavListCloseDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutNavListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutNavListCloseDirective, selector: "[tdLayoutNavListClose]", inputs: { tdLayoutNavListClose: "tdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavListCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutNavListClose]',
@@ -517,9 +517,9 @@ class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
         this._layout.open();
     }
 }
-TdLayoutNavListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavListOpenDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutNavListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutNavListOpenDirective, selector: "[tdLayoutNavListOpen]", inputs: { tdLayoutNavListOpen: "tdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutNavListOpenDirective, decorators: [{
+TdLayoutNavListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavListOpenDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutNavListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutNavListOpenDirective, selector: "[tdLayoutNavListOpen]", inputs: { tdLayoutNavListOpen: "tdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutNavListOpenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutNavListOpen]',
@@ -553,9 +553,9 @@ class TdLayoutCardOverComponent {
         this.color = 'primary';
     }
 }
-TdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutCardOverComponent, selector: "td-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n  <div\n    class=\"td-layout-card-over\"\n    [style.max-width.%]=\"cardWidth\"\n    [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-webkit-box-flex]=\"1\"\n  >\n    <mat-card>\n      <mat-card-header>\n        <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n        <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n          cardSubtitle\n        }}</mat-card-subtitle>\n      </mat-card-header>\n      <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n      <mat-card-content>\n        <ng-content></ng-content>\n      </mat-card-content>\n    </mat-card>\n    <ng-content select=\"[td-after-card]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutCardOverComponent, decorators: [{
+TdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutCardOverComponent, selector: "td-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n  <div\n    class=\"td-layout-card-over\"\n    [style.max-width.%]=\"cardWidth\"\n    [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-webkit-box-flex]=\"1\"\n  >\n    <mat-card>\n      <mat-card-header>\n        <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n        <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n          cardSubtitle\n        }}</mat-card-subtitle>\n      </mat-card-header>\n      <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n      <mat-card-content>\n        <ng-content></ng-content>\n      </mat-card-content>\n    </mat-card>\n    <ng-content select=\"[td-after-card]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutCardOverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-layout-card-over', template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n  <div\n    class=\"td-layout-card-over\"\n    [style.max-width.%]=\"cardWidth\"\n    [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-webkit-box-flex]=\"1\"\n  >\n    <mat-card>\n      <mat-card-header>\n        <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n        <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n          cardSubtitle\n        }}</mat-card-subtitle>\n      </mat-card-header>\n      <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n      <mat-card-content>\n        <ng-content></ng-content>\n      </mat-card-content>\n    </mat-card>\n    <ng-content select=\"[td-after-card]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"] }]
         }], propDecorators: { cardTitle: [{
@@ -638,9 +638,9 @@ class TdLayoutManageListComponent {
         return this.sidenav.close();
     }
 }
-TdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutManageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutManageListComponent, selector: "td-layout-manage-list", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n  fullscreen\n  [autosize]=\"containerAutosize\"\n  class=\"td-layout-manage-list\"\n>\n  <mat-sidenav\n    #sidenav\n    position=\"start\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [disableClose]=\"disableClose\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n  >\n    <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n    <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n      <ng-content select=\"[td-sidenav-content]\"></ng-content>\n    </div>\n  </mat-sidenav>\n  <div class=\"td-layout-manage-list-main\">\n    <ng-content select=\"mat-toolbar\"></ng-content>\n    <div class=\"td-layout-manage-list-content\" cdkScrollable>\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"td-layout-footer-inner\"></ng-content>\n  </div>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .td-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutManageListComponent, decorators: [{
+TdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutManageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutManageListComponent, selector: "td-layout-manage-list", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n  fullscreen\n  [autosize]=\"containerAutosize\"\n  class=\"td-layout-manage-list\"\n>\n  <mat-sidenav\n    #sidenav\n    position=\"start\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [disableClose]=\"disableClose\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n  >\n    <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n    <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n      <ng-content select=\"[td-sidenav-content]\"></ng-content>\n    </div>\n  </mat-sidenav>\n  <div class=\"td-layout-manage-list-main\">\n    <ng-content select=\"mat-toolbar\"></ng-content>\n    <div class=\"td-layout-manage-list-content\" cdkScrollable>\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"td-layout-footer-inner\"></ng-content>\n  </div>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .td-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutManageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-layout-manage-list', template: "<mat-sidenav-container\n  fullscreen\n  [autosize]=\"containerAutosize\"\n  class=\"td-layout-manage-list\"\n>\n  <mat-sidenav\n    #sidenav\n    position=\"start\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [disableClose]=\"disableClose\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n  >\n    <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n    <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n      <ng-content select=\"[td-sidenav-content]\"></ng-content>\n    </div>\n  </mat-sidenav>\n  <div class=\"td-layout-manage-list-main\">\n    <ng-content select=\"mat-toolbar\"></ng-content>\n    <div class=\"td-layout-manage-list-content\" cdkScrollable>\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"td-layout-footer-inner\"></ng-content>\n  </div>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .td-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
         }], propDecorators: { sidenav: [{
@@ -667,9 +667,9 @@ class TdLayoutManageListToggleDirective extends BaseLayoutToggleDirective {
         this._layout.toggle();
     }
 }
-TdLayoutManageListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutManageListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutManageListToggleDirective, selector: "[tdLayoutManageListToggle]", inputs: { tdLayoutManageListToggle: "tdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutManageListToggleDirective, decorators: [{
+TdLayoutManageListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutManageListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutManageListToggleDirective, selector: "[tdLayoutManageListToggle]", inputs: { tdLayoutManageListToggle: "tdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutManageListToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutManageListToggle]',
@@ -695,9 +695,9 @@ class TdLayoutManageListCloseDirective extends BaseLayoutToggleDirective {
         this._layout.close();
     }
 }
-TdLayoutManageListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutManageListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutManageListCloseDirective, selector: "[tdLayoutManageListClose]", inputs: { tdLayoutManageListClose: "tdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutManageListCloseDirective, decorators: [{
+TdLayoutManageListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutManageListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutManageListCloseDirective, selector: "[tdLayoutManageListClose]", inputs: { tdLayoutManageListClose: "tdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutManageListCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutManageListClose]',
@@ -723,9 +723,9 @@ class TdLayoutManageListOpenDirective extends BaseLayoutToggleDirective {
         this._layout.open();
     }
 }
-TdLayoutManageListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TdLayoutManageListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutManageListOpenDirective, selector: "[tdLayoutManageListOpen]", inputs: { tdLayoutManageListOpen: "tdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutManageListOpenDirective, decorators: [{
+TdLayoutManageListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => TdLayoutManageListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdLayoutManageListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutManageListOpenDirective, selector: "[tdLayoutManageListOpen]", inputs: { tdLayoutManageListOpen: "tdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutManageListOpenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdLayoutManageListOpen]',
@@ -763,9 +763,9 @@ class TdLayoutFooterComponent {
         this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-footer');
     }
 }
-TdLayoutFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TdLayoutFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TdLayoutFooterComponent, selector: "td-layout-footer,td-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:10px 16px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdLayoutFooterComponent, decorators: [{
+TdLayoutFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TdLayoutFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdLayoutFooterComponent, selector: "td-layout-footer,td-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:10px 16px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdLayoutFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-layout-footer,td-layout-footer-inner', template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:10px 16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { color: [{
@@ -774,9 +774,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
 
 class TdNavigationDrawerMenuDirective {
 }
-TdNavigationDrawerMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdNavigationDrawerMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TdNavigationDrawerMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdNavigationDrawerMenuDirective, selector: "[tdNavigationDrawerMenu]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdNavigationDrawerMenuDirective, decorators: [{
+TdNavigationDrawerMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdNavigationDrawerMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TdNavigationDrawerMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdNavigationDrawerMenuDirective, selector: "[tdNavigationDrawerMenu]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdNavigationDrawerMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdNavigationDrawerMenu]',
@@ -784,9 +784,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
         }] });
 class TdNavigationDrawerToolbarDirective {
 }
-TdNavigationDrawerToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdNavigationDrawerToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TdNavigationDrawerToolbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdNavigationDrawerToolbarDirective, selector: "[tdNavigationDrawerToolbar]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdNavigationDrawerToolbarDirective, decorators: [{
+TdNavigationDrawerToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdNavigationDrawerToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TdNavigationDrawerToolbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdNavigationDrawerToolbarDirective, selector: "[tdNavigationDrawerToolbar]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdNavigationDrawerToolbarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdNavigationDrawerToolbar]',
@@ -884,9 +884,9 @@ class TdNavigationDrawerComponent {
         return this._layout.close();
     }
 }
-TdNavigationDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdNavigationDrawerComponent, deps: [{ token: forwardRef(() => TdLayoutComponent) }, { token: i1$1.Router, optional: true }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TdNavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TdNavigationDrawerComponent, selector: "td-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: TdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: TdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar\n  [color]=\"color\"\n  [style.background-image]=\"backgroundImage\"\n  [class.td-toolbar-background]=\"!!isBackgroundAvailable\"\n  class=\"td-nagivation-drawer-toolbar\"\n>\n  <ng-content select=\"[td-navigation-drawer-toolbar]\"></ng-content>\n  <ng-container *ngIf=\"!isCustomToolbar\">\n    <div\n      *ngIf=\"icon || logo || sidenavTitle || avatar\"\n      class=\"td-navigation-drawer-toolbar-content\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <img\n        *ngIf=\"avatar && !logo && !icon\"\n        class=\"td-nagivation-drawer-toolbar-avatar\"\n        [attr.src]=\"avatar\"\n      />\n      <span *ngIf=\"sidenavTitle\" class=\"td-navigation-drawer-title\">{{\n        sidenavTitle\n      }}</span>\n    </div>\n    <div class=\"td-navigation-drawer-name\" *ngIf=\"email && name\">\n      {{ name }}\n    </div>\n    <div\n      class=\"td-navigation-drawer-menu-toggle\"\n      href\n      *ngIf=\"email || name\"\n      (click)=\"toggleMenu()\"\n    >\n      <span class=\"td-navigation-drawer-label\">{{ email || name }}</span>\n      <button\n        mat-icon-button\n        class=\"td-navigation-drawer-menu-button\"\n        *ngIf=\"isMenuAvailable\"\n      >\n        <mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\n        <mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\n      </button>\n    </div>\n  </ng-container>\n</mat-toolbar>\n<div class=\"td-navigation-drawer-content\" [@tdCollapse]=\"menuToggled\">\n  <ng-content></ng-content>\n</div>\n<div class=\"td-navigation-drawer-menu-content\" [@tdCollapse]=\"!menuToggled\">\n  <ng-content select=\"[td-navigation-drawer-menu]\"></ng-content>\n</div>\n", styles: [":host{width:100%}:host .td-navigation-drawer-content.ng-animating,:host .td-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.td-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.td-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .td-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-menu-button{width:24px;height:24px;padding:0}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [tdCollapseAnimation] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdNavigationDrawerComponent, decorators: [{
+TdNavigationDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdNavigationDrawerComponent, deps: [{ token: forwardRef(() => TdLayoutComponent) }, { token: i1$1.Router, optional: true }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+TdNavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdNavigationDrawerComponent, selector: "td-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: TdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: TdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar\n  [color]=\"color\"\n  [style.background-image]=\"backgroundImage\"\n  [class.td-toolbar-background]=\"!!isBackgroundAvailable\"\n  class=\"td-nagivation-drawer-toolbar\"\n>\n  <ng-content select=\"[td-navigation-drawer-toolbar]\"></ng-content>\n  <ng-container *ngIf=\"!isCustomToolbar\">\n    <div\n      *ngIf=\"icon || logo || sidenavTitle || avatar\"\n      class=\"td-navigation-drawer-toolbar-content\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <img\n        *ngIf=\"avatar && !logo && !icon\"\n        class=\"td-nagivation-drawer-toolbar-avatar\"\n        [attr.src]=\"avatar\"\n      />\n      <span *ngIf=\"sidenavTitle\" class=\"td-navigation-drawer-title\">{{\n        sidenavTitle\n      }}</span>\n    </div>\n    <div class=\"td-navigation-drawer-name\" *ngIf=\"email && name\">\n      {{ name }}\n    </div>\n    <div\n      class=\"td-navigation-drawer-menu-toggle\"\n      href\n      *ngIf=\"email || name\"\n      (click)=\"toggleMenu()\"\n    >\n      <span class=\"td-navigation-drawer-label\">{{ email || name }}</span>\n      <button\n        mat-icon-button\n        class=\"td-navigation-drawer-menu-button\"\n        *ngIf=\"isMenuAvailable\"\n      >\n        <mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\n        <mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\n      </button>\n    </div>\n  </ng-container>\n</mat-toolbar>\n<div class=\"td-navigation-drawer-content\" [@tdCollapse]=\"menuToggled\">\n  <ng-content></ng-content>\n</div>\n<div class=\"td-navigation-drawer-menu-content\" [@tdCollapse]=\"!menuToggled\">\n  <ng-content select=\"[td-navigation-drawer-menu]\"></ng-content>\n</div>\n", styles: [":host{width:100%}:host .td-navigation-drawer-content.ng-animating,:host .td-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.td-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.td-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .td-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-menu-button{width:24px;height:24px;padding:0}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [tdCollapseAnimation] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdNavigationDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-navigation-drawer', animations: [tdCollapseAnimation], template: "<mat-toolbar\n  [color]=\"color\"\n  [style.background-image]=\"backgroundImage\"\n  [class.td-toolbar-background]=\"!!isBackgroundAvailable\"\n  class=\"td-nagivation-drawer-toolbar\"\n>\n  <ng-content select=\"[td-navigation-drawer-toolbar]\"></ng-content>\n  <ng-container *ngIf=\"!isCustomToolbar\">\n    <div\n      *ngIf=\"icon || logo || sidenavTitle || avatar\"\n      class=\"td-navigation-drawer-toolbar-content\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon\n        *ngIf=\"logo && !icon\"\n        class=\"mat-icon-logo\"\n        [svgIcon]=\"logo\"\n      ></mat-icon>\n      <img\n        *ngIf=\"avatar && !logo && !icon\"\n        class=\"td-nagivation-drawer-toolbar-avatar\"\n        [attr.src]=\"avatar\"\n      />\n      <span *ngIf=\"sidenavTitle\" class=\"td-navigation-drawer-title\">{{\n        sidenavTitle\n      }}</span>\n    </div>\n    <div class=\"td-navigation-drawer-name\" *ngIf=\"email && name\">\n      {{ name }}\n    </div>\n    <div\n      class=\"td-navigation-drawer-menu-toggle\"\n      href\n      *ngIf=\"email || name\"\n      (click)=\"toggleMenu()\"\n    >\n      <span class=\"td-navigation-drawer-label\">{{ email || name }}</span>\n      <button\n        mat-icon-button\n        class=\"td-navigation-drawer-menu-button\"\n        *ngIf=\"isMenuAvailable\"\n      >\n        <mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\n        <mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\n      </button>\n    </div>\n  </ng-container>\n</mat-toolbar>\n<div class=\"td-navigation-drawer-content\" [@tdCollapse]=\"menuToggled\">\n  <ng-content></ng-content>\n</div>\n<div class=\"td-navigation-drawer-menu-content\" [@tdCollapse]=\"!menuToggled\">\n  <ng-content select=\"[td-navigation-drawer-menu]\"></ng-content>\n</div>\n", styles: [":host{width:100%}:host .td-navigation-drawer-content.ng-animating,:host .td-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.td-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.td-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .td-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-menu-button{width:24px;height:24px;padding:0}:host>div{overflow:hidden}\n"] }]
         }], ctorParameters: function () {
@@ -944,8 +944,8 @@ const TD_LAYOUTS = [
 ];
 class CovalentLayoutModule {
 }
-CovalentLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CovalentLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: CovalentLayoutModule, declarations: [TdLayoutComponent,
+CovalentLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CovalentLayoutModule, declarations: [TdLayoutComponent,
         TdLayoutToggleDirective,
         TdLayoutCloseDirective,
         TdLayoutOpenDirective,
@@ -988,7 +988,7 @@ CovalentLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         TdNavigationDrawerComponent,
         TdNavigationDrawerMenuDirective,
         TdNavigationDrawerToolbarDirective] });
-CovalentLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentLayoutModule, imports: [CommonModule,
+CovalentLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentLayoutModule, imports: [CommonModule,
         ScrollingModule,
         MatSidenavModule,
         MatToolbarModule,
@@ -997,7 +997,7 @@ CovalentLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
         MatCardModule,
         MatDividerModule,
         CovalentMenuModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [