@covalent/core 3.1.2-beta.6 → 4.0.0-beta.1

package/fesm2015/covalent-core-layout.js

@@ -1,1663 +0,0 @@
-import { Component, ViewChild, Input, Directive, Renderer2, ElementRef, HostListener, Optional, Inject, forwardRef, SecurityContext, ContentChildren, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatCardModule } from '@angular/material/card';
-import { MatDividerModule } from '@angular/material/divider';
-import { mixinDisabled, tdCollapseAnimation } from '@covalent/core/common';
-import { Router } from '@angular/router';
-import { DomSanitizer } from '@angular/platform-browser';
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutComponent {
-    constructor() {
-        /**
-         * mode?: 'side', 'push' or 'over'
-         *
-         * The mode or styling of the sidenav.
-         * Defaults to "over".
-         * See "MatSidenav" documentation for more info.
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.mode = 'over';
-        /**
-         * opened?: boolean
-         *
-         * Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
-         * Defaults to "false".
-         *
-         * See "MatSidenav" documentation for more info.
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.opened = false;
-        /**
-         * sidenavWidth?: string
-         *
-         * Sets the "width" of the sidenav in either "px" or "%"
-         * Defaults to "320px".
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.sidenavWidth = '320px';
-        /**
-         * containerAutosize?: boolean
-         *
-         * Sets "autosize" of the sidenav-container.
-         * Defaults to "false".
-         *
-         * See documentation for more info and potential performance risks.
-         *
-         * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
-         */
-        this.containerAutosize = false;
-    }
-    /**
-     * Checks if `ESC` should close the sidenav
-     * Should only close it for `push` and `over` modes
-     * @return {?}
-     */
-    get disableClose() {
-        return this.mode === 'side';
-    }
-    /**
-     * Proxy toggle method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    toggle() {
-        return this.sidenav.toggle(!this.sidenav.opened);
-    }
-    /**
-     * Proxy open method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    open() {
-        return this.sidenav.open();
-    }
-    /**
-     * Proxy close method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    close() {
-        return this.sidenav.close();
-    }
-}
-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:-ms-flexbox;display:flex;height:100%;margin:0;min-height:100%;overflow:hidden;width:100%}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{-ms-flex-direction:column;display:-ms-flexbox;display:flex;flex-direction:column}"]
-            }] }
-];
-TdLayoutComponent.propDecorators = {
-    sidenav: [{ type: ViewChild, args: [MatSidenav, { static: true },] }],
-    mode: [{ type: Input }],
-    opened: [{ type: Input }],
-    sidenavWidth: [{ type: Input }],
-    containerAutosize: [{ type: Input }]
-};
-if (false) {
-    /** @type {?} */
-    TdLayoutComponent.prototype.sidenav;
-    /**
-     * mode?: 'side', 'push' or 'over'
-     *
-     * The mode or styling of the sidenav.
-     * Defaults to "over".
-     * See "MatSidenav" documentation for more info.
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutComponent.prototype.mode;
-    /**
-     * opened?: boolean
-     *
-     * Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
-     * Defaults to "false".
-     *
-     * See "MatSidenav" documentation for more info.
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutComponent.prototype.opened;
-    /**
-     * sidenavWidth?: string
-     *
-     * Sets the "width" of the sidenav in either "px" or "%"
-     * Defaults to "320px".
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutComponent.prototype.sidenavWidth;
-    /**
-     * containerAutosize?: boolean
-     *
-     * Sets "autosize" of the sidenav-container.
-     * Defaults to "false".
-     *
-     * See documentation for more info and potential performance risks.
-     *
-     * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
-     * @type {?}
-     */
-    TdLayoutComponent.prototype.containerAutosize;
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout-toggle.class.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-function ILayoutTogglable() { }
-if (false) {
-    /** @type {?} */
-    ILayoutTogglable.prototype.opened;
-    /** @type {?} */
-    ILayoutTogglable.prototype.sidenav;
-    /**
-     * @return {?}
-     */
-    ILayoutTogglable.prototype.toggle = function () { };
-    /**
-     * @return {?}
-     */
-    ILayoutTogglable.prototype.open = function () { };
-    /**
-     * @return {?}
-     */
-    ILayoutTogglable.prototype.close = function () { };
-}
-class LayoutToggleBase {
-}
-/* tslint:disable-next-line */
-/** @type {?} */
-const _TdLayoutToggleMixinBase = mixinDisabled(LayoutToggleBase);
-/**
- * @abstract
- */
-class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
-    /**
-     * @param {?} _layout
-     * @param {?} _renderer
-     * @param {?} _elementRef
-     */
-    constructor(_layout, _renderer, _elementRef) {
-        super();
-        this._layout = _layout;
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        this._initialized = false;
-        this._hideWhenOpened = false;
-        // if layout has not been provided
-        // show warn message
-        if (!this._layout) {
-            this._noLayoutMessage();
-        }
-        this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-menu-button');
-    }
-    /**
-     * hideWhenOpened?: boolean
-     * When this is set to true, the host will be hidden when
-     * the sidenav is opened.
-     * @param {?} hideWhenOpened
-     * @return {?}
-     */
-    set hideWhenOpened(hideWhenOpened) {
-        this._hideWhenOpened = hideWhenOpened;
-        if (this._initialized) {
-            this._toggleVisibility();
-        }
-    }
-    /**
-     * @return {?}
-     */
-    ngAfterViewInit() {
-        this._initialized = true;
-        if (this._layout && this._layout.sidenav) {
-            this._toggleSubs = this._layout.sidenav._animationStarted.subscribe((/**
-             * @return {?}
-             */
-            () => {
-                this._toggleVisibility();
-            }));
-        }
-        // execute toggleVisibility since the onOpenStart and onCloseStart
-        // methods might not be executed always when the element is rendered
-        this._toggleVisibility();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnDestroy() {
-        if (this._toggleSubs) {
-            this._toggleSubs.unsubscribe();
-            this._toggleSubs = undefined;
-        }
-    }
-    /**
-     * Listens to host click event to trigger the layout toggle
-     * @param {?} event
-     * @return {?}
-     */
-    clickListener(event) {
-        event.preventDefault();
-        if (!this.disabled) {
-            // if layout has been provided, try triggering the click on it
-            // else show warn message
-            if (this._layout && this._layout.open) {
-                this.onClick();
-            }
-            else {
-                this._noLayoutMessage();
-            }
-        }
-    }
-    /**
-     * @private
-     * @return {?}
-     */
-    _toggleVisibility() {
-        if (this._layout) {
-            if (this._layout.sidenav.opened && this._hideWhenOpened) {
-                this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'none');
-            }
-            else {
-                this._renderer.setStyle(this._elementRef.nativeElement, 'display', '');
-            }
-        }
-    }
-    /**
-     * @private
-     * @return {?}
-     */
-    _noLayoutMessage() {
-        /* tslint:disable-next-line */
-        console.warn('Covalent: Parent layout not found for layout toggle directive');
-    }
-}
-BaseLayoutToggleDirective.decorators = [
-    { type: Directive }
-];
-/** @nocollapse */
-BaseLayoutToggleDirective.ctorParameters = () => [
-    { type: undefined },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-BaseLayoutToggleDirective.propDecorators = {
-    hideWhenOpened: [{ type: Input, args: ['hideWhenOpened',] }],
-    clickListener: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    BaseLayoutToggleDirective.prototype._toggleSubs;
-    /**
-     * @type {?}
-     * @private
-     */
-    BaseLayoutToggleDirective.prototype._initialized;
-    /**
-     * @type {?}
-     * @private
-     */
-    BaseLayoutToggleDirective.prototype._hideWhenOpened;
-    /**
-     * @type {?}
-     * @protected
-     */
-    BaseLayoutToggleDirective.prototype._layout;
-    /**
-     * @type {?}
-     * @private
-     */
-    BaseLayoutToggleDirective.prototype._renderer;
-    /**
-     * @type {?}
-     * @private
-     */
-    BaseLayoutToggleDirective.prototype._elementRef;
-    /**
-     * @abstract
-     * @return {?}
-     */
-    BaseLayoutToggleDirective.prototype.onClick = function () { };
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout.directives.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutToggle
-     * @return {?}
-     */
-    set tdLayoutToggle(tdLayoutToggle) {
-        this.disabled = !((/** @type {?} */ (tdLayoutToggle)) === '' || tdLayoutToggle);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.toggle();
-    }
-}
-TdLayoutToggleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutToggle]',
-            },] }
-];
-/** @nocollapse */
-TdLayoutToggleDirective.ctorParameters = () => [
-    { type: TdLayoutComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutToggleDirective.propDecorators = {
-    tdLayoutToggle: [{ type: Input, args: ['tdLayoutToggle',] }]
-};
-class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutClose
-     * @return {?}
-     */
-    set tdLayoutClose(tdLayoutClose) {
-        this.disabled = !((/** @type {?} */ (tdLayoutClose)) === '' || tdLayoutClose);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.close();
-    }
-}
-TdLayoutCloseDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutClose]',
-            },] }
-];
-/** @nocollapse */
-TdLayoutCloseDirective.ctorParameters = () => [
-    { type: TdLayoutComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutCloseDirective.propDecorators = {
-    tdLayoutClose: [{ type: Input, args: ['tdLayoutClose',] }]
-};
-class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutOpen
-     * @return {?}
-     */
-    set tdLayoutClose(tdLayoutOpen) {
-        this.disabled = !((/** @type {?} */ (tdLayoutOpen)) === '' || tdLayoutOpen);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.open();
-    }
-}
-TdLayoutOpenDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutOpen]',
-            },] }
-];
-/** @nocollapse */
-TdLayoutOpenDirective.ctorParameters = () => [
-    { type: TdLayoutComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutOpenDirective.propDecorators = {
-    tdLayoutClose: [{ type: Input, args: ['tdLayoutOpen',] }]
-};
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout-nav/layout-nav.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutNavComponent {
-    /**
-     * @param {?} _router
-     */
-    constructor(_router) {
-        this._router = _router;
-        /**
-         * color?: 'accent' | 'primary' | 'warn'
-         *
-         * toolbar color option: primary | accent | warn.
-         * If [color] is not set, primary is used.
-         */
-        this.color = 'primary';
-    }
-    /**
-     * Checks if router was injected.
-     * @return {?}
-     */
-    get routerEnabled() {
-        return !!this._router && !!this.navigationRoute;
-    }
-    /**
-     * @return {?}
-     */
-    handleNavigationClick() {
-        if (this.routerEnabled) {
-            this._router.navigateByUrl(this.navigationRoute);
-        }
-    }
-}
-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 *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n      <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n    </span>\n    <ng-content select=\"[td-toolbar-content]\"></ng-content>\n  </mat-toolbar>\n  <div class=\"td-layout-nav-content\" cdkScrollable>\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n",
-                styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-left:6px;margin-right:0}:host{overflow:hidden}:host,:host .td-layout-nav-wrapper{display:-ms-flexbox;display:flex;height:100%;margin:0;min-height:100%;width:100%}:host .td-layout-nav-wrapper{-ms-flex-direction:column;box-sizing:border-box;flex-direction:column}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{-ms-flex-align:center;-ms-flex-direction:row;-ms-flex-line-pack:center;-ms-flex-pack:start;align-content:center;align-items:center;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:row;justify-content:flex-start;max-width:100%}:host .td-layout-nav-wrapper .td-layout-nav-content{-ms-flex:1;-ms-flex-direction:column;-webkit-overflow-scrolling:touch;box-sizing:border-box;display:-ms-flexbox;display:flex;flex:1;flex-direction:column;overflow:auto;position:relative}"]
-            }] }
-];
-/** @nocollapse */
-TdLayoutNavComponent.ctorParameters = () => [
-    { type: Router, decorators: [{ type: Optional }] }
-];
-TdLayoutNavComponent.propDecorators = {
-    toolbarTitle: [{ type: Input }],
-    icon: [{ type: Input }],
-    logo: [{ type: Input }],
-    color: [{ type: Input }],
-    navigationRoute: [{ type: Input }]
-};
-if (false) {
-    /**
-     * toolbarTitle?: string
-     *
-     * Title set in toolbar.
-     * @type {?}
-     */
-    TdLayoutNavComponent.prototype.toolbarTitle;
-    /**
-     * icon?: string
-     *
-     * icon name to be displayed before the title
-     * @type {?}
-     */
-    TdLayoutNavComponent.prototype.icon;
-    /**
-     * logo?: string
-     *
-     * logo icon name to be displayed before the title.
-     * If [icon] is set, then this will not be shown.
-     * @type {?}
-     */
-    TdLayoutNavComponent.prototype.logo;
-    /**
-     * color?: 'accent' | 'primary' | 'warn'
-     *
-     * toolbar color option: primary | accent | warn.
-     * If [color] is not set, primary is used.
-     * @type {?}
-     */
-    TdLayoutNavComponent.prototype.color;
-    /**
-     * navigationRoute?: string
-     *
-     * option to set the combined route for the icon, logo, and toolbarTitle.
-     * @type {?}
-     */
-    TdLayoutNavComponent.prototype.navigationRoute;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdLayoutNavComponent.prototype._router;
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout-nav-list/layout-nav-list.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutNavListComponent {
-    /**
-     * @param {?} _router
-     */
-    constructor(_router) {
-        this._router = _router;
-        /**
-         * color?: 'accent' | 'primary' | 'warn'
-         *
-         * toolbar color option: primary | accent | warn.
-         * If [color] is not set, primary is used.
-         */
-        this.color = 'primary';
-        /**
-         * mode?: 'side', 'push' or 'over'
-         *
-         * The mode or styling of the sidenav.
-         * Defaults to "side".
-         * See "MatSidenav" documentation for more info.
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.mode = 'side';
-        /**
-         * opened?: boolean
-         * Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
-         * Defaults to "true".
-         *
-         * See "MatSidenav" documentation for more info.
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.opened = true;
-        /**
-         * sidenavWidth?: string
-         *
-         * Sets the "width" of the sidenav in either "px" or "%"
-         * Defaults to "350px".
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.sidenavWidth = '350px';
-        /**
-         * containerAutosize?: boolean
-         *
-         * Sets "autosize" of the sidenav-container.
-         * Defaults to "false".
-         *
-         * See documentation for more info and potential performance risks.
-         *
-         * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
-         */
-        this.containerAutosize = false;
-    }
-    /**
-     * Checks if `ESC` should close the sidenav
-     * Should only close it for `push` and `over` modes
-     * @return {?}
-     */
-    get disableClose() {
-        return this.mode === 'side';
-    }
-    /**
-     * Checks if router was injected.
-     * @return {?}
-     */
-    get routerEnabled() {
-        return !!this._router && !!this.navigationRoute;
-    }
-    /**
-     * @return {?}
-     */
-    handleNavigationClick() {
-        if (this.routerEnabled) {
-            this._router.navigateByUrl(this.navigationRoute);
-        }
-    }
-    /**
-     * Proxy toggle method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    toggle() {
-        return this.sidenav.toggle(!this.sidenav.opened);
-    }
-    /**
-     * Proxy open method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    open() {
-        return this.sidenav.open();
-    }
-    /**
-     * Proxy close method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    close() {
-        return this.sidenav.close();
-    }
-}
-TdLayoutNavListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'td-layout-nav-list',
-                template: "<div class=\"td-layout-nav-list-wrapper\">\n  <mat-sidenav-container fullscreen [autosize]=\"containerAutosize\" class=\"td-layout-nav-list\">\n    <mat-sidenav\n      #sidenav\n      position=\"start\"\n      [mode]=\"mode\"\n      [opened]=\"opened\"\n      [disableClose]=\"disableClose\"\n      [style.max-width]=\"sidenavWidth\"\n      [style.min-width]=\"sidenavWidth\"\n    >\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-menu-button]\"></ng-content>\n        <span\n          *ngIf=\"icon || logo || toolbarTitle\"\n          class=\"td-layout-nav-list-toolbar-content\"\n          [class.cursor-pointer]=\"routerEnabled\"\n          (click)=\"handleNavigationClick()\"\n        >\n          <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n          <mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n          <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n        </span>\n        <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content select=\"[td-sidenav-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    <div class=\"td-layout-nav-list-main\">\n      <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n        <ng-content select=\"[td-toolbar-content]\"></ng-content>\n      </mat-toolbar>\n      <div class=\"td-layout-nav-list-content\" cdkScrollable>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"td-layout-footer-inner\"></ng-content>\n    </div>\n  </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n",
-                styles: [":host{-ms-flex:1;-ms-flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;flex:1;flex-direction:column;height:100%;margin:0;min-height:100%;overflow:hidden;width:100%}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{-ms-flex:1;-ms-flex-direction:column;-webkit-overflow-scrolling:touch;box-sizing:border-box;display:-ms-flexbox;display:flex;flex:1;flex-direction:column;overflow:auto;position:relative}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{-ms-flex-align:center;-ms-flex-direction:row;-ms-flex-line-pack:center;-ms-flex-pack:start;align-content:center;align-items:center;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:row;justify-content:flex-start;max-width:100%}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{-ms-flex:1;-webkit-overflow-scrolling:touch;display:block;flex:1;overflow:auto;position:relative;text-align:start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{-ms-flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:column;height:100%;margin:0;min-height:100%;overflow:auto;position:relative;width:100%}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{-ms-flex:1;-webkit-overflow-scrolling:touch;display:block;flex:1;overflow:auto;position:relative}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{-ms-flex:1;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing,: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{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{-ms-flex-positive:1;flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{-ms-flex-direction:column;box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:column}"]
-            }] }
-];
-/** @nocollapse */
-TdLayoutNavListComponent.ctorParameters = () => [
-    { type: Router, decorators: [{ type: Optional }] }
-];
-TdLayoutNavListComponent.propDecorators = {
-    sidenav: [{ type: ViewChild, args: [MatSidenav, { static: true },] }],
-    toolbarTitle: [{ type: Input }],
-    icon: [{ type: Input }],
-    logo: [{ type: Input }],
-    color: [{ type: Input }],
-    mode: [{ type: Input }],
-    opened: [{ type: Input }],
-    sidenavWidth: [{ type: Input }],
-    containerAutosize: [{ type: Input }],
-    navigationRoute: [{ type: Input }]
-};
-if (false) {
-    /** @type {?} */
-    TdLayoutNavListComponent.prototype.sidenav;
-    /**
-     * toolbarTitle?: string
-     *
-     * Title set in toolbar.
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.toolbarTitle;
-    /**
-     * icon?: string
-     * icon name to be displayed before the title
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.icon;
-    /**
-     * logo?: string
-     *
-     * logo icon name to be displayed before the title.
-     * If [icon] is set, then this will not be shown.
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.logo;
-    /**
-     * color?: 'accent' | 'primary' | 'warn'
-     *
-     * toolbar color option: primary | accent | warn.
-     * If [color] is not set, primary is used.
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.color;
-    /**
-     * mode?: 'side', 'push' or 'over'
-     *
-     * The mode or styling of the sidenav.
-     * Defaults to "side".
-     * See "MatSidenav" documentation for more info.
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.mode;
-    /**
-     * opened?: boolean
-     * Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
-     * Defaults to "true".
-     *
-     * See "MatSidenav" documentation for more info.
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.opened;
-    /**
-     * sidenavWidth?: string
-     *
-     * Sets the "width" of the sidenav in either "px" or "%"
-     * Defaults to "350px".
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.sidenavWidth;
-    /**
-     * containerAutosize?: boolean
-     *
-     * Sets "autosize" of the sidenav-container.
-     * Defaults to "false".
-     *
-     * See documentation for more info and potential performance risks.
-     *
-     * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.containerAutosize;
-    /**
-     * navigationRoute?: string
-     *
-     * option to set the combined route for the icon, logo, and toolbarTitle.
-     * @type {?}
-     */
-    TdLayoutNavListComponent.prototype.navigationRoute;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdLayoutNavListComponent.prototype._router;
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout-nav-list/layout-nav-list.directives.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutNavListToggle
-     * @return {?}
-     */
-    set tdLayoutNavListToggle(tdLayoutNavListToggle) {
-        this.disabled = !((/** @type {?} */ (tdLayoutNavListToggle)) === '' || tdLayoutNavListToggle);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.toggle();
-    }
-}
-TdLayoutNavListToggleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutNavListToggle]',
-                inputs: ['hideWhenOpened'],
-            },] }
-];
-/** @nocollapse */
-TdLayoutNavListToggleDirective.ctorParameters = () => [
-    { type: TdLayoutNavListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutNavListComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutNavListToggleDirective.propDecorators = {
-    tdLayoutNavListToggle: [{ type: Input, args: ['tdLayoutNavListToggle',] }]
-};
-class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutNavListClose
-     * @return {?}
-     */
-    set tdLayoutNavListClose(tdLayoutNavListClose) {
-        this.disabled = !((/** @type {?} */ (tdLayoutNavListClose)) === '' || tdLayoutNavListClose);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.close();
-    }
-}
-TdLayoutNavListCloseDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutNavListClose]',
-                inputs: ['hideWhenOpened'],
-            },] }
-];
-/** @nocollapse */
-TdLayoutNavListCloseDirective.ctorParameters = () => [
-    { type: TdLayoutNavListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutNavListComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutNavListCloseDirective.propDecorators = {
-    tdLayoutNavListClose: [{ type: Input, args: ['tdLayoutNavListClose',] }]
-};
-class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutNavListOpen
-     * @return {?}
-     */
-    set tdLayoutNavListOpen(tdLayoutNavListOpen) {
-        this.disabled = !((/** @type {?} */ (tdLayoutNavListOpen)) === '' || tdLayoutNavListOpen);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.open();
-    }
-}
-TdLayoutNavListOpenDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutNavListOpen]',
-                inputs: ['hideWhenOpened'],
-            },] }
-];
-/** @nocollapse */
-TdLayoutNavListOpenDirective.ctorParameters = () => [
-    { type: TdLayoutNavListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutNavListComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutNavListOpenDirective.propDecorators = {
-    tdLayoutNavListOpen: [{ type: Input, args: ['tdLayoutNavListOpen',] }]
-};
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout-card-over/layout-card-over.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutCardOverComponent {
-    constructor() {
-        /**
-         * cardWidth?: string
-         *
-         * Card flex width in %.
-         * Defaults to 70%.
-         */
-        this.cardWidth = 70;
-        /**
-         * color?: 'accent' | 'primary' | 'warn'
-         *
-         * toolbar color option: primary | accent | warn.
-         * If [color] is not set, primary is used.
-         */
-        this.color = 'primary';
-    }
-}
-TdLayoutCardOverComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'td-layout-card-over',
-                template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n  <div\n    class=\"td-layout-card-over\"\n    [style.max-width.%]=\"cardWidth\"\n    [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n    [style.-webkit-box-flex]=\"1\"\n  >\n    <mat-card>\n      <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n      <mat-card-subtitle *ngIf=\"cardSubtitle\">{{ cardSubtitle }}</mat-card-subtitle>\n      <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n      <ng-content></ng-content>\n    </mat-card>\n    <ng-content select=\"[td-after-card]\"></ng-content>\n  </div>\n</div>\n",
-                styles: [":host{display:block;height:100%;min-height:100%;position:relative;width:100%;z-index:2}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{height:100%;margin:-64px 0;min-height:100%;width:100%}@media (min-width:600px){.td-layout-card-over-wrapper{-ms-flex-align:start;-ms-flex-direction:row;-ms-flex-line-pack:start;-ms-flex-pack:center;align-content:flex-start;align-items:flex-start;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:row;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{box-sizing:border-box;max-height:100%}}@media (max-width:599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}"]
-            }] }
-];
-TdLayoutCardOverComponent.propDecorators = {
-    cardTitle: [{ type: Input }],
-    cardSubtitle: [{ type: Input }],
-    cardWidth: [{ type: Input }],
-    color: [{ type: Input }]
-};
-if (false) {
-    /**
-     * cardTitle?: string
-     *
-     * Title set in card.
-     * @type {?}
-     */
-    TdLayoutCardOverComponent.prototype.cardTitle;
-    /**
-     * cardSubtitle?: string
-     *
-     * Subtitle set in card.
-     * @type {?}
-     */
-    TdLayoutCardOverComponent.prototype.cardSubtitle;
-    /**
-     * cardWidth?: string
-     *
-     * Card flex width in %.
-     * Defaults to 70%.
-     * @type {?}
-     */
-    TdLayoutCardOverComponent.prototype.cardWidth;
-    /**
-     * color?: 'accent' | 'primary' | 'warn'
-     *
-     * toolbar color option: primary | accent | warn.
-     * If [color] is not set, primary is used.
-     * @type {?}
-     */
-    TdLayoutCardOverComponent.prototype.color;
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout-manage-list/layout-manage-list.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutManageListComponent {
-    constructor() {
-        /**
-         * mode?: 'side', 'push' or 'over'
-         *
-         * The mode or styling of the sidenav.
-         * Defaults to "side".
-         * See "MatSidenav" documentation for more info.
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.mode = 'side';
-        /**
-         * opened?: boolean
-         *
-         * Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
-         * Defaults to "true".
-         *
-         * See "MatSidenav" documentation for more info.
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.opened = true;
-        /**
-         * sidenavWidth?: string
-         *
-         * Sets the "width" of the sidenav in either "px" or "%"
-         * Defaults to "257px".
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
-         */
-        this.sidenavWidth = '257px';
-        /**
-         * containerAutosize?: boolean
-         *
-         * Sets "autosize" of the sidenav-container.
-         * Defaults to "false".
-         *
-         * See documentation for more info and potential performance risks.
-         *
-         * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
-         */
-        this.containerAutosize = false;
-    }
-    /**
-     * Checks if `ESC` should close the sidenav
-     * Should only close it for `push` and `over` modes
-     * @return {?}
-     */
-    get disableClose() {
-        return this.mode === 'side';
-    }
-    /**
-     * Proxy toggle method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    toggle() {
-        return this.sidenav.toggle(!this.sidenav.opened);
-    }
-    /**
-     * Proxy open method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    open() {
-        return this.sidenav.open();
-    }
-    /**
-     * Proxy close method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    close() {
-        return this.sidenav.close();
-    }
-}
-TdLayoutManageListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'td-layout-manage-list',
-                template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\" class=\"td-layout-manage-list\">\n  <mat-sidenav\n    #sidenav\n    position=\"start\"\n    [mode]=\"mode\"\n    [opened]=\"opened\"\n    [disableClose]=\"disableClose\"\n    [style.max-width]=\"sidenavWidth\"\n    [style.min-width]=\"sidenavWidth\"\n  >\n    <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n    <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n      <ng-content select=\"[td-sidenav-content]\"></ng-content>\n    </div>\n  </mat-sidenav>\n  <div class=\"td-layout-manage-list-main\">\n    <ng-content select=\"mat-toolbar\"></ng-content>\n    <div class=\"td-layout-manage-list-content\" cdkScrollable>\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"td-layout-footer-inner\"></ng-content>\n  </div>\n</mat-sidenav-container>\n",
-                styles: [":host{display:-ms-flexbox;display:flex;height:100%;margin:0;min-height:100%;overflow:hidden;width:100%}:host mat-sidenav-container.td-layout-manage-list{-ms-flex:1;flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing,: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{box-shadow:0 1px 3px 0 rgba(0,0,0,.2)}:host .td-layout-manage-list-sidenav{-ms-flex:1;-webkit-overflow-scrolling:touch;display:block;flex:1;overflow:auto;position:relative;text-align:start}:host .td-layout-manage-list-main{-ms-flex-direction:column;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:column;height:100%;margin:0;min-height:100%;overflow:auto;position:relative;width:100%}:host .td-layout-manage-list-main .td-layout-manage-list-content{-ms-flex:1;-webkit-overflow-scrolling:touch;display:block;flex:1;overflow:auto;position:relative}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{-ms-flex-positive:1;flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{-ms-flex-direction:column;box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);box-sizing:border-box;display:-ms-flexbox;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}"]
-            }] }
-];
-TdLayoutManageListComponent.propDecorators = {
-    sidenav: [{ type: ViewChild, args: [MatSidenav, { static: true },] }],
-    mode: [{ type: Input }],
-    opened: [{ type: Input }],
-    sidenavWidth: [{ type: Input }],
-    containerAutosize: [{ type: Input }]
-};
-if (false) {
-    /** @type {?} */
-    TdLayoutManageListComponent.prototype.sidenav;
-    /**
-     * mode?: 'side', 'push' or 'over'
-     *
-     * The mode or styling of the sidenav.
-     * Defaults to "side".
-     * See "MatSidenav" documentation for more info.
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutManageListComponent.prototype.mode;
-    /**
-     * opened?: boolean
-     *
-     * Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
-     * Defaults to "true".
-     *
-     * See "MatSidenav" documentation for more info.
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutManageListComponent.prototype.opened;
-    /**
-     * sidenavWidth?: string
-     *
-     * Sets the "width" of the sidenav in either "px" or "%"
-     * Defaults to "257px".
-     *
-     * https://github.com/angular/material2/tree/master/src/lib/sidenav
-     * @type {?}
-     */
-    TdLayoutManageListComponent.prototype.sidenavWidth;
-    /**
-     * containerAutosize?: boolean
-     *
-     * Sets "autosize" of the sidenav-container.
-     * Defaults to "false".
-     *
-     * See documentation for more info and potential performance risks.
-     *
-     * https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
-     * @type {?}
-     */
-    TdLayoutManageListComponent.prototype.containerAutosize;
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout-manage-list/layout-manage-list.directives.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutManageListToggleDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutManageListToggle
-     * @return {?}
-     */
-    set tdLayoutManageListToggle(tdLayoutManageListToggle) {
-        this.disabled = !((/** @type {?} */ (tdLayoutManageListToggle)) === '' || tdLayoutManageListToggle);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.toggle();
-    }
-}
-TdLayoutManageListToggleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutManageListToggle]',
-                inputs: ['hideWhenOpened'],
-            },] }
-];
-/** @nocollapse */
-TdLayoutManageListToggleDirective.ctorParameters = () => [
-    { type: TdLayoutManageListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutManageListComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutManageListToggleDirective.propDecorators = {
-    tdLayoutManageListToggle: [{ type: Input, args: ['tdLayoutManageListToggle',] }]
-};
-class TdLayoutManageListCloseDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutManageListClose
-     * @return {?}
-     */
-    set tdLayoutManageListClose(tdLayoutManageListClose) {
-        this.disabled = !((/** @type {?} */ (tdLayoutManageListClose)) === '' || tdLayoutManageListClose);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.close();
-    }
-}
-TdLayoutManageListCloseDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutManageListClose]',
-                inputs: ['hideWhenOpened'],
-            },] }
-];
-/** @nocollapse */
-TdLayoutManageListCloseDirective.ctorParameters = () => [
-    { type: TdLayoutManageListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutManageListComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutManageListCloseDirective.propDecorators = {
-    tdLayoutManageListClose: [{ type: Input, args: ['tdLayoutManageListClose',] }]
-};
-class TdLayoutManageListOpenDirective extends BaseLayoutToggleDirective {
-    /**
-     * @param {?} layout
-     * @param {?} renderer
-     * @param {?} elementRef
-     */
-    constructor(layout, renderer, elementRef) {
-        super(layout, renderer, elementRef);
-    }
-    /**
-     * @param {?} tdLayoutManageListOpen
-     * @return {?}
-     */
-    set tdLayoutManageListOpen(tdLayoutManageListOpen) {
-        this.disabled = !((/** @type {?} */ (tdLayoutManageListOpen)) === '' || tdLayoutManageListOpen);
-    }
-    /**
-     * @return {?}
-     */
-    onClick() {
-        this._layout.open();
-    }
-}
-TdLayoutManageListOpenDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tdLayoutManageListOpen]',
-                inputs: ['hideWhenOpened'],
-            },] }
-];
-/** @nocollapse */
-TdLayoutManageListOpenDirective.ctorParameters = () => [
-    { type: TdLayoutManageListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutManageListComponent)),] }] },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutManageListOpenDirective.propDecorators = {
-    tdLayoutManageListOpen: [{ type: Input, args: ['tdLayoutManageListOpen',] }]
-};
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout-footer/layout-footer.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdLayoutFooterComponent {
-    /**
-     * @param {?} _renderer
-     * @param {?} _elementRef
-     */
-    constructor(_renderer, _elementRef) {
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-footer');
-    }
-    /**
-     * color?: 'accent' | 'primary' | 'warn'
-     *
-     * Optional color option: primary | accent | warn.
-     * @param {?} color
-     * @return {?}
-     */
-    set color(color) {
-        if (color) {
-            this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);
-            this._color = color;
-            this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + this._color);
-        }
-    }
-    /**
-     * @return {?}
-     */
-    get color() {
-        return this._color;
-    }
-}
-TdLayoutFooterComponent.decorators = [
-    { type: Component, args: [{
-                /* tslint:disable-next-line */
-                selector: 'td-layout-footer,td-layout-footer-inner',
-                template: "<ng-content></ng-content>\n",
-                styles: [":host{display:block;padding:10px 16px}"]
-            }] }
-];
-/** @nocollapse */
-TdLayoutFooterComponent.ctorParameters = () => [
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-TdLayoutFooterComponent.propDecorators = {
-    color: [{ type: Input, args: ['color',] }]
-};
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    TdLayoutFooterComponent.prototype._color;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdLayoutFooterComponent.prototype._renderer;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdLayoutFooterComponent.prototype._elementRef;
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: navigation-drawer/navigation-drawer.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class TdNavigationDrawerMenuDirective {
-}
-TdNavigationDrawerMenuDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[td-navigation-drawer-menu]',
-            },] }
-];
-class TdNavigationDrawerToolbarDirective {
-}
-TdNavigationDrawerToolbarDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[td-navigation-drawer-toolbar]',
-            },] }
-];
-class TdNavigationDrawerComponent {
-    /**
-     * @param {?} _layout
-     * @param {?} _router
-     * @param {?} _sanitize
-     */
-    constructor(_layout, _router, _sanitize) {
-        this._layout = _layout;
-        this._router = _router;
-        this._sanitize = _sanitize;
-        this._menuToggled = false;
-    }
-    /**
-     * @return {?}
-     */
-    get menuToggled() {
-        return this._menuToggled;
-    }
-    /**
-     * Checks if there is a [TdNavigationDrawerMenuDirective] has content.
-     * @return {?}
-     */
-    get isMenuAvailable() {
-        return this._drawerMenu ? this._drawerMenu.length > 0 : false;
-    }
-    /**
-     * Checks if there is a [TdNavigationDrawerToolbarDirective] has content.
-     * @return {?}
-     */
-    get isCustomToolbar() {
-        return this._toolbar ? this._toolbar.length > 0 : false;
-    }
-    /**
-     * Checks if there is a background image for the toolbar.
-     * @return {?}
-     */
-    get isBackgroundAvailable() {
-        return !!this._backgroundImage;
-    }
-    /**
-     * backgroundUrl?: SafeResourceUrl
-     *
-     * image to be displayed as the background of the toolbar.
-     * URL used will be sanitized, but it should be always from a trusted source to avoid XSS.
-     * @param {?} backgroundUrl
-     * @return {?}
-     */
-    set backgroundUrl(backgroundUrl) {
-        if (backgroundUrl) {
-            /** @type {?} */
-            const sanitizedUrl = this._sanitize.sanitize(SecurityContext.RESOURCE_URL, backgroundUrl);
-            this._backgroundImage = this._sanitize.sanitize(SecurityContext.STYLE, 'url(' + sanitizedUrl + ')');
-        }
-    }
-    /**
-     * @return {?}
-     */
-    get backgroundImage() {
-        return this._backgroundImage;
-    }
-    /**
-     * Checks if router was injected.
-     * @return {?}
-     */
-    get routerEnabled() {
-        return !!this._router && !!this.navigationRoute;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this._closeSubscription = this._layout.sidenav.openedChange.subscribe((/**
-         * @param {?} opened
-         * @return {?}
-         */
-        (opened) => {
-            if (!opened) {
-                this._menuToggled = false;
-            }
-        }));
-    }
-    /**
-     * @return {?}
-     */
-    ngOnDestroy() {
-        if (this._closeSubscription) {
-            this._closeSubscription.unsubscribe();
-            this._closeSubscription = undefined;
-        }
-    }
-    /**
-     * @return {?}
-     */
-    toggleMenu() {
-        if (this.isMenuAvailable) {
-            this._menuToggled = !this._menuToggled;
-        }
-    }
-    /**
-     * @return {?}
-     */
-    handleNavigationClick() {
-        if (this.routerEnabled) {
-            this._router.navigateByUrl(this.navigationRoute);
-            this.close();
-        }
-    }
-    /**
-     * Proxy toggle method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    toggle() {
-        return this._layout.toggle();
-    }
-    /**
-     * Proxy open method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    open() {
-        return this._layout.open();
-    }
-    /**
-     * Proxy close method to access sidenav from outside (from td-layout template).
-     * @return {?}
-     */
-    close() {
-        return this._layout.close();
-    }
-}
-TdNavigationDrawerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'td-navigation-drawer',
-                template: "<mat-toolbar\n  [color]=\"color\"\n  [style.background-image]=\"backgroundImage\"\n  [class.td-toolbar-background]=\"!!isBackgroundAvailable\"\n  class=\"td-nagivation-drawer-toolbar\"\n>\n  <ng-content select=\"[td-navigation-drawer-toolbar]\"></ng-content>\n  <ng-container *ngIf=\"!isCustomToolbar\">\n    <div\n      *ngIf=\"icon || logo || sidenavTitle || avatar\"\n      class=\"td-navigation-drawer-toolbar-content\"\n      [class.cursor-pointer]=\"routerEnabled\"\n      (click)=\"handleNavigationClick()\"\n    >\n      <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n      <mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n      <img *ngIf=\"avatar && !logo && !icon\" class=\"td-nagivation-drawer-toolbar-avatar\" [attr.src]=\"avatar\" />\n      <span *ngIf=\"sidenavTitle\" class=\"td-navigation-drawer-title\">{{ sidenavTitle }}</span>\n    </div>\n    <div class=\"td-navigation-drawer-name\" *ngIf=\"email && name\">{{ name }}</div>\n    <div class=\"td-navigation-drawer-menu-toggle\" href *ngIf=\"email || name\" (click)=\"toggleMenu()\">\n      <span class=\"td-navigation-drawer-label\">{{ email || name }}</span>\n      <button mat-icon-button class=\"td-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\n        <mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\n        <mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\n      </button>\n    </div>\n  </ng-container>\n</mat-toolbar>\n<div class=\"td-navigation-drawer-content\" [@tdCollapse]=\"menuToggled\">\n  <ng-content></ng-content>\n</div>\n<div class=\"td-navigation-drawer-menu-content\" [@tdCollapse]=\"!menuToggled\">\n  <ng-content select=\"[td-navigation-drawer-menu]\"></ng-content>\n</div>\n",
-                animations: [tdCollapseAnimation],
-                styles: [":host{width:100%}:host .td-navigation-drawer-content.ng-animating,:host .td-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.td-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.td-nagivation-drawer-toolbar{-ms-flex-direction:column;display:block!important;flex-direction:column;height:auto!important}:host mat-toolbar .td-navigation-drawer-toolbar-content{-ms-flex-align:center;-ms-flex-direction:row;-ms-flex-line-pack:center;-ms-flex-pack:start;align-content:center;align-items:center;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:row;justify-content:flex-start;max-width:100%}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;margin:0 12px 12px 0;width:60px}:host mat-toolbar .td-navigation-drawer-name,:host mat-toolbar .td-navigation-drawer-toolbar-content .td-navigation-drawer-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host mat-toolbar .td-navigation-drawer-menu-toggle{-ms-flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:row}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-label{-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}"]
-            }] }
-];
-/** @nocollapse */
-TdNavigationDrawerComponent.ctorParameters = () => [
-    { type: TdLayoutComponent, decorators: [{ type: Inject, args: [forwardRef((/**
-                     * @return {?}
-                     */
-                    () => TdLayoutComponent)),] }] },
-    { type: Router, decorators: [{ type: Optional }] },
-    { type: DomSanitizer }
-];
-TdNavigationDrawerComponent.propDecorators = {
-    _drawerMenu: [{ type: ContentChildren, args: [TdNavigationDrawerMenuDirective, { descendants: true },] }],
-    _toolbar: [{ type: ContentChildren, args: [TdNavigationDrawerToolbarDirective, { descendants: true },] }],
-    sidenavTitle: [{ type: Input }],
-    icon: [{ type: Input }],
-    logo: [{ type: Input }],
-    avatar: [{ type: Input }],
-    color: [{ type: Input }],
-    navigationRoute: [{ type: Input }],
-    backgroundUrl: [{ type: Input, args: ['backgroundUrl',] }],
-    name: [{ type: Input }],
-    email: [{ type: Input }]
-};
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    TdNavigationDrawerComponent.prototype._closeSubscription;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdNavigationDrawerComponent.prototype._menuToggled;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdNavigationDrawerComponent.prototype._backgroundImage;
-    /** @type {?} */
-    TdNavigationDrawerComponent.prototype._drawerMenu;
-    /** @type {?} */
-    TdNavigationDrawerComponent.prototype._toolbar;
-    /**
-     * sidenavTitle?: string
-     * Title set in sideNav.
-     * @type {?}
-     */
-    TdNavigationDrawerComponent.prototype.sidenavTitle;
-    /**
-     * icon?: string
-     *
-     * icon name to be displayed before the title
-     * @type {?}
-     */
-    TdNavigationDrawerComponent.prototype.icon;
-    /**
-     * logo?: string
-     *
-     * logo icon name to be displayed before the title.
-     * If [icon] is set, then this will not be shown.
-     * @type {?}
-     */
-    TdNavigationDrawerComponent.prototype.logo;
-    /**
-     * avatar?: string
-     *
-     * avatar url to be displayed before the title
-     * If [icon] or [logo] are set, then this will not be shown.
-     * @type {?}
-     */
-    TdNavigationDrawerComponent.prototype.avatar;
-    /**
-     * color?: 'accent' | 'primary' | 'warn'
-     *
-     * toolbar color option: primary | accent | warn.
-     * If [color] is not set, default is used.
-     * @type {?}
-     */
-    TdNavigationDrawerComponent.prototype.color;
-    /**
-     * navigationRoute?: string
-     *
-     * option to set the combined route for the icon, logo, and sidenavTitle.
-     * @type {?}
-     */
-    TdNavigationDrawerComponent.prototype.navigationRoute;
-    /**
-     * name?: string
-     *
-     * string to be displayed as part of the navigation drawer sublabel.
-     * if [email] is not set, then [name] will be the toggle menu text.
-     * @type {?}
-     */
-    TdNavigationDrawerComponent.prototype.name;
-    /**
-     * email?: string
-     *
-     * string to be displayed as part of the navigation drawer sublabel in the [toggle] menu text.
-     * if [email] and [name] are not set, then the toggle menu is not rendered.
-     * @type {?}
-     */
-    TdNavigationDrawerComponent.prototype.email;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdNavigationDrawerComponent.prototype._layout;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdNavigationDrawerComponent.prototype._router;
-    /**
-     * @type {?}
-     * @private
-     */
-    TdNavigationDrawerComponent.prototype._sanitize;
-}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: layout.module.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const TD_LAYOUTS = [
-    TdLayoutComponent,
-    TdLayoutToggleDirective,
-    TdLayoutCloseDirective,
-    TdLayoutOpenDirective,
-    TdLayoutNavComponent,
-    TdLayoutNavListComponent,
-    TdLayoutNavListToggleDirective,
-    TdLayoutNavListCloseDirective,
-    TdLayoutNavListOpenDirective,
-    TdLayoutCardOverComponent,
-    TdLayoutManageListComponent,
-    TdLayoutManageListToggleDirective,
-    TdLayoutManageListCloseDirective,
-    TdLayoutManageListOpenDirective,
-    TdLayoutFooterComponent,
-    TdNavigationDrawerComponent,
-    TdNavigationDrawerMenuDirective,
-    TdNavigationDrawerToolbarDirective,
-];
-class CovalentLayoutModule {
-}
-CovalentLayoutModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    ScrollingModule,
-                    MatSidenavModule,
-                    MatToolbarModule,
-                    MatButtonModule,
-                    MatIconModule,
-                    MatCardModule,
-                    MatDividerModule,
-                ],
-                declarations: [TD_LAYOUTS],
-                exports: [TD_LAYOUTS],
-            },] }
-];
-
-/**
- * @fileoverview added by tsickle
- * Generated from: public-api.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * Generated from: index.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * Generated from: covalent-core-layout.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-export { BaseLayoutToggleDirective, CovalentLayoutModule, LayoutToggleBase, TdLayoutCardOverComponent, TdLayoutCloseDirective, TdLayoutComponent, TdLayoutFooterComponent, TdLayoutManageListCloseDirective, TdLayoutManageListComponent, TdLayoutManageListOpenDirective, TdLayoutManageListToggleDirective, TdLayoutNavComponent, TdLayoutNavListCloseDirective, TdLayoutNavListComponent, TdLayoutNavListOpenDirective, TdLayoutNavListToggleDirective, TdLayoutOpenDirective, TdLayoutToggleDirective, TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective, TdNavigationDrawerToolbarDirective, _TdLayoutToggleMixinBase };
-//# sourceMappingURL=covalent-core-layout.js.map