| 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 |
