@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
693 lines (685 loc) • 78.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewChild, Input, Directive, HostListener, forwardRef, Optional, Inject, SecurityContext, ContentChildren, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/cdk/scrolling';
import { ScrollingModule } from '@angular/cdk/scrolling';
import * as i1 from '@angular/material/sidenav';
import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
import * as i4 from '@angular/material/toolbar';
import { MatToolbarModule } from '@angular/material/toolbar';
import * as i5 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i6 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i3$1 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import * as i4$1 from '@angular/material/divider';
import { MatDividerModule } from '@angular/material/divider';
import { CovalentMenuModule } from '@covalent/core/menu';
import { mixinDisabled, tdCollapseAnimation } from '@covalent/core/common';
import * as i1$1 from '@angular/router';
import * as i2$1 from '@angular/platform-browser';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
class TdLayoutComponent {
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/main/src/lib/sidenav
*/
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/main/src/lib/sidenav
*/
opened = false;
/**
* sidenavWidth?: string
*
* Sets the "width" of the sidenav in either "px" or "%"
* Defaults to "320px".
*
* https://github.com/angular/material2/tree/main/src/lib/sidenav
*/
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/main/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
*/
containerAutosize = false;
/**
* Checks if `ESC` should close the sidenav
* Should only close it for `push` and `over` modes
*/
get disableClose() {
return this.mode === 'side';
}
/**
* Proxy toggle method to access sidenav from outside (from td-layout template).
*/
toggle() {
return this.sidenav.toggle(!this.sidenav.opened);
}
/**
* Proxy open method to access sidenav from outside (from td-layout template).
*/
open() {
return this.sidenav.open();
}
/**
* Proxy close method to access sidenav from outside (from td-layout template).
*/
close() {
return this.sidenav.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutComponent, selector: "td-layout", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n <mat-sidenav\n #sidenav\n class=\"td-layout-sidenav\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n [disableClose]=\"disableClose\"\n >\n <ng-content select=\"td-navigation-drawer\"></ng-content>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </mat-sidenav>\n <ng-content></ng-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutComponent, decorators: [{
type: Component,
args: [{ selector: 'td-layout', template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n <mat-sidenav\n #sidenav\n class=\"td-layout-sidenav\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n [disableClose]=\"disableClose\"\n >\n <ng-content select=\"td-navigation-drawer\"></ng-content>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </mat-sidenav>\n <ng-content></ng-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:flex;flex-direction:column}\n"] }]
}], propDecorators: { sidenav: [{
type: ViewChild,
args: [MatSidenav, { static: true }]
}], mode: [{
type: Input
}], opened: [{
type: Input
}], sidenavWidth: [{
type: Input
}], containerAutosize: [{
type: Input
}] } });
class LayoutToggleBase {
}
/* tslint:disable-next-line */
const _TdLayoutToggleMixinBase = mixinDisabled(LayoutToggleBase);
class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
_layout;
_renderer;
_elementRef;
_toggleSubs;
_initialized = false;
_hideWhenOpened = false;
/**
* hideWhenOpened?: boolean
* When this is set to true, the host will be hidden when
* the sidenav is opened.
*/
set hideWhenOpened(hideWhenOpened) {
this._hideWhenOpened = hideWhenOpened;
if (this._initialized) {
this._toggleVisibility();
}
}
constructor(_layout, _renderer, _elementRef) {
super();
this._layout = _layout;
this._renderer = _renderer;
this._elementRef = _elementRef;
// if layout has not been provided
// show warn message
if (!this._layout) {
this._noLayoutMessage();
}
this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-menu-button');
}
ngAfterViewInit() {
this._initialized = true;
if (this._layout && this._layout.sidenav) {
this._toggleSubs = this._layout.sidenav._animationStarted.subscribe(() => {
this._toggleVisibility();
});
}
// execute toggleVisibility since the onOpenStart and onCloseStart
// methods might not be executed always when the element is rendered
this._toggleVisibility();
}
ngOnDestroy() {
if (this._toggleSubs) {
this._toggleSubs.unsubscribe();
this._toggleSubs = undefined;
}
}
/**
* Listens to host click event to trigger the layout toggle
*/
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.onClick();
}
else {
this._noLayoutMessage();
}
}
}
_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', '');
}
}
}
_noLayoutMessage() {
/* tslint:disable-next-line */
console.warn('Covalent: Parent layout not found for layout toggle directive');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: BaseLayoutToggleDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: BaseLayoutToggleDirective, inputs: { hideWhenOpened: "hideWhenOpened" }, host: { listeners: { "click": "clickListener($event)" } }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: BaseLayoutToggleDirective, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hideWhenOpened: [{
type: Input
}], clickListener: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
set tdLayoutToggle(tdLayoutToggle) {
this.disabled = !(tdLayoutToggle === '' || tdLayoutToggle);
}
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
onClick() {
this._layout.toggle();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutToggleDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutToggleDirective, selector: "[tdLayoutToggle]", inputs: { tdLayoutToggle: "tdLayoutToggle" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutToggleDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdLayoutToggle]',
}]
}], ctorParameters: () => [{ type: TdLayoutComponent, decorators: [{
type: Optional
}, {
type: Inject,
args: [forwardRef(() => TdLayoutComponent)]
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tdLayoutToggle: [{
type: Input
}] } });
class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
set tdLayoutClose(tdLayoutClose) {
this.disabled = !(tdLayoutClose === '' || tdLayoutClose);
}
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
onClick() {
this._layout.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutCloseDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutCloseDirective, selector: "[tdLayoutClose]", inputs: { tdLayoutClose: "tdLayoutClose" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutCloseDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdLayoutClose]',
}]
}], ctorParameters: () => [{ type: TdLayoutComponent, decorators: [{
type: Optional
}, {
type: Inject,
args: [forwardRef(() => TdLayoutComponent)]
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tdLayoutClose: [{
type: Input
}] } });
class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
set tdLayoutClose(tdLayoutOpen) {
this.disabled = !(tdLayoutOpen === '' || tdLayoutOpen);
}
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
onClick() {
this._layout.open();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutOpenDirective, deps: [{ token: forwardRef(() => TdLayoutComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutOpenDirective, selector: "[tdLayoutOpen]", inputs: { tdLayoutClose: ["tdLayoutOpen", "tdLayoutClose"] }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutOpenDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdLayoutOpen]',
}]
}], ctorParameters: () => [{ type: TdLayoutComponent, decorators: [{
type: Optional
}, {
type: Inject,
args: [forwardRef(() => TdLayoutComponent)]
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tdLayoutClose: [{
type: Input,
args: ['tdLayoutOpen']
}] } });
class TdLayoutNavComponent {
_router;
/**
* toolbarTitle?: string
*
* Title set in toolbar.
*/
toolbarTitle;
/**
* icon?: string
*
* icon name to be displayed before the title
*/
icon;
/**
* logo?: string
*
* logo icon name to be displayed before the title.
* If [icon] is set, then this will not be shown.
*/
logo;
/**
* color?: 'accent' | 'primary' | 'warn'
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
color;
/**
* navigationRoute?: string
*
* option to set the combined route for the icon, logo, and toolbarTitle.
*/
navigationRoute;
/**
* Checks if router was injected.
*/
get routerEnabled() {
return !!this._router && !!this.navigationRoute;
}
constructor(_router) {
this._router = _router;
}
handleNavigationClick() {
if (this.routerEnabled && this.navigationRoute) {
this._router.navigateByUrl(this.navigationRoute);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavComponent, deps: [{ token: i1$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutNavComponent, selector: "td-layout-nav", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute" }, ngImport: i0, template: "<div class=\"td-layout-nav-wrapper\">\n <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n <ng-content select=\"[td-menu-button]\"></ng-content>\n <span\n *ngIf=\"icon || logo || toolbarTitle\"\n [class.cursor-pointer]=\"routerEnabled\"\n (click)=\"handleNavigationClick()\"\n class=\"td-layout-nav-toolbar-content\"\n >\n <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n <mat-icon\n *ngIf=\"logo && !icon\"\n class=\"mat-icon-logo\"\n [svgIcon]=\"logo\"\n ></mat-icon>\n <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n </span>\n <ng-content select=\"[td-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n", styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host mat-toolbar{z-index:2;box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavComponent, decorators: [{
type: Component,
args: [{ selector: 'td-layout-nav', template: "<div class=\"td-layout-nav-wrapper\">\n <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n <ng-content select=\"[td-menu-button]\"></ng-content>\n <span\n *ngIf=\"icon || logo || toolbarTitle\"\n [class.cursor-pointer]=\"routerEnabled\"\n (click)=\"handleNavigationClick()\"\n class=\"td-layout-nav-toolbar-content\"\n >\n <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n <mat-icon\n *ngIf=\"logo && !icon\"\n class=\"mat-icon-logo\"\n [svgIcon]=\"logo\"\n ></mat-icon>\n <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n </span>\n <ng-content select=\"[td-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n", styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host mat-toolbar{z-index:2;box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}\n"] }]
}], ctorParameters: () => [{ type: i1$1.Router, decorators: [{
type: Optional
}] }], propDecorators: { toolbarTitle: [{
type: Input
}], icon: [{
type: Input
}], logo: [{
type: Input
}], color: [{
type: Input
}], navigationRoute: [{
type: Input
}] } });
class TdLayoutNavListComponent {
_router;
sidenav;
/**
* toolbarTitle?: string
*
* Title set in toolbar.
*/
toolbarTitle;
/**
* icon?: string
* icon name to be displayed before the title
*/
icon;
/**
* logo?: string
*
* logo icon name to be displayed before the title.
* If [icon] is set, then this will not be shown.
*/
logo;
/**
* color?: 'accent' | 'primary' | 'warn'
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
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/main/src/lib/sidenav
*/
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/main/src/lib/sidenav
*/
opened = true;
/**
* sidenavWidth?: string
*
* Sets the "width" of the sidenav in either "px" or "%"
* Defaults to "350px".
*
* https://github.com/angular/material2/tree/main/src/lib/sidenav
*/
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/main/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
*/
containerAutosize = false;
/**
* navigationRoute?: string
*
* option to set the combined route for the icon, logo, and toolbarTitle.
*/
navigationRoute;
/**
* Checks if `ESC` should close the sidenav
* Should only close it for `push` and `over` modes
*/
get disableClose() {
return this.mode === 'side';
}
/**
* Checks if router was injected.
*/
get routerEnabled() {
return !!this._router && !!this.navigationRoute;
}
constructor(_router) {
this._router = _router;
}
handleNavigationClick() {
if (this.routerEnabled && this.navigationRoute) {
this._router.navigateByUrl(this.navigationRoute);
}
}
/**
* Proxy toggle method to access sidenav from outside (from td-layout template).
*/
toggle() {
return this.sidenav.toggle(!this.sidenav.opened);
}
/**
* Proxy open method to access sidenav from outside (from td-layout template).
*/
open() {
return this.sidenav.open();
}
/**
* Proxy close method to access sidenav from outside (from td-layout template).
*/
close() {
return this.sidenav.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavListComponent, deps: [{ token: i1$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutNavListComponent, selector: "td-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"td-layout-nav-list-wrapper\">\n <mat-sidenav-container\n fullscreen\n [autosize]=\"containerAutosize\"\n class=\"td-layout-nav-list\"\n >\n <mat-sidenav\n #sidenav\n position=\"start\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [disableClose]=\"disableClose\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n >\n <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n <ng-content select=\"[td-menu-button]\"></ng-content>\n <span\n *ngIf=\"icon || logo || toolbarTitle\"\n class=\"td-layout-nav-list-toolbar-content\"\n [class.cursor-pointer]=\"routerEnabled\"\n (click)=\"handleNavigationClick()\"\n >\n <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n <mat-icon\n *ngIf=\"logo && !icon\"\n class=\"mat-icon-logo\"\n [svgIcon]=\"logo\"\n ></mat-icon>\n <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n </span>\n <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-list-content\" cdkScrollable>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </div>\n </mat-sidenav>\n <div class=\"td-layout-nav-list-main\">\n <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n <ng-content select=\"[td-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-list-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer-inner\"></ng-content>\n </div>\n </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavListComponent, decorators: [{
type: Component,
args: [{ selector: 'td-layout-nav-list', template: "<div class=\"td-layout-nav-list-wrapper\">\n <mat-sidenav-container\n fullscreen\n [autosize]=\"containerAutosize\"\n class=\"td-layout-nav-list\"\n >\n <mat-sidenav\n #sidenav\n position=\"start\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [disableClose]=\"disableClose\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n >\n <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n <ng-content select=\"[td-menu-button]\"></ng-content>\n <span\n *ngIf=\"icon || logo || toolbarTitle\"\n class=\"td-layout-nav-list-toolbar-content\"\n [class.cursor-pointer]=\"routerEnabled\"\n (click)=\"handleNavigationClick()\"\n >\n <mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\n <mat-icon\n *ngIf=\"logo && !icon\"\n class=\"mat-icon-logo\"\n [svgIcon]=\"logo\"\n ></mat-icon>\n <span *ngIf=\"toolbarTitle\">{{ toolbarTitle }}</span>\n </span>\n <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-list-content\" cdkScrollable>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </div>\n </mat-sidenav>\n <div class=\"td-layout-nav-list-main\">\n <mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\">\n <ng-content select=\"[td-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-list-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer-inner\"></ng-content>\n </div>\n </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>\n", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"] }]
}], ctorParameters: () => [{ type: i1$1.Router, decorators: [{
type: Optional
}] }], 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
}] } });
class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
set tdLayoutNavListToggle(tdLayoutNavListToggle) {
this.disabled = !(tdLayoutNavListToggle === '' || tdLayoutNavListToggle);
}
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
onClick() {
this._layout.toggle();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavListToggleDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutNavListToggleDirective, selector: "[tdLayoutNavListToggle]", inputs: { tdLayoutNavListToggle: "tdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavListToggleDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdLayoutNavListToggle]',
}]
}], ctorParameters: () => [{ type: TdLayoutNavListComponent, decorators: [{
type: Optional
}, {
type: Inject,
args: [forwardRef(() => TdLayoutNavListComponent)]
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tdLayoutNavListToggle: [{
type: Input
}] } });
class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
set tdLayoutNavListClose(tdLayoutNavListClose) {
this.disabled = !(tdLayoutNavListClose === '' || tdLayoutNavListClose);
}
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
onClick() {
this._layout.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavListCloseDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutNavListCloseDirective, selector: "[tdLayoutNavListClose]", inputs: { tdLayoutNavListClose: "tdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavListCloseDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdLayoutNavListClose]',
}]
}], ctorParameters: () => [{ type: TdLayoutNavListComponent, decorators: [{
type: Optional
}, {
type: Inject,
args: [forwardRef(() => TdLayoutNavListComponent)]
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tdLayoutNavListClose: [{
type: Input
}] } });
class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
set tdLayoutNavListOpen(tdLayoutNavListOpen) {
this.disabled = !(tdLayoutNavListOpen === '' || tdLayoutNavListOpen);
}
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
onClick() {
this._layout.open();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavListOpenDirective, deps: [{ token: forwardRef(() => TdLayoutNavListComponent), optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutNavListOpenDirective, selector: "[tdLayoutNavListOpen]", inputs: { tdLayoutNavListOpen: "tdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutNavListOpenDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdLayoutNavListOpen]',
}]
}], ctorParameters: () => [{ type: TdLayoutNavListComponent, decorators: [{
type: Optional
}, {
type: Inject,
args: [forwardRef(() => TdLayoutNavListComponent)]
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tdLayoutNavListOpen: [{
type: Input
}] } });
class TdLayoutCardOverComponent {
/**
* cardTitle?: string
*
* Title set in card.
*/
cardTitle;
/**
* cardSubtitle?: string
*
* Subtitle set in card.
*/
cardSubtitle;
/**
* cardWidth?: string
*
* Card flex width in %.
* Defaults to 70%.
*/
cardWidth = 70;
/**
* color?: 'accent' | 'primary' | 'warn'
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
color;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutCardOverComponent, selector: "td-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n <div\n class=\"td-layout-card-over\"\n [style.max-width.%]=\"cardWidth\"\n [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-webkit-box-flex]=\"1\"\n >\n <mat-card>\n <mat-card-header>\n <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n cardSubtitle\n }}</mat-card-subtitle>\n </mat-card-header>\n <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n <mat-card-content>\n <ng-content></ng-content>\n </mat-card-content>\n </mat-card>\n <ng-content select=\"[td-after-card]\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutCardOverComponent, decorators: [{
type: Component,
args: [{ selector: 'td-layout-card-over', template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n <div\n class=\"td-layout-card-over\"\n [style.max-width.%]=\"cardWidth\"\n [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-webkit-box-flex]=\"1\"\n >\n <mat-card>\n <mat-card-header>\n <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n cardSubtitle\n }}</mat-card-subtitle>\n </mat-card-header>\n <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n <mat-card-content>\n <ng-content></ng-content>\n </mat-card-content>\n </mat-card>\n <ng-content select=\"[td-after-card]\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"] }]
}], propDecorators: { cardTitle: [{
type: Input
}], cardSubtitle: [{
type: Input
}], cardWidth: [{
type: Input
}], color: [{
type: Input
}] } });
class TdLayoutManageListComponent {
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/main/src/lib/sidenav
*/
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/main/src/lib/sidenav
*/
opened = true;
/**
* sidenavWidth?: string
*
* Sets the "width" of the sidenav in either "px" or "%"
* Defaults to "257px".
*
* https://github.com/angular/material2/tree/main/src/lib/sidenav
*/
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/main/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
*/
containerAutosize = false;
/**
* Checks if `ESC` should close the sidenav
* Should only close it for `push` and `over` modes
*/
get disableClose() {
return this.mode === 'side';
}
/**
* Proxy toggle method to access sidenav from outside (from td-layout template).
*/
toggle() {
return this.sidenav.toggle(!this.sidenav.opened);
}
/**
* Proxy open method to access sidenav from outside (from td-layout template).
*/
open() {
return this.sidenav.open();
}
/**
* Proxy close method to access sidenav from outside (from td-layout template).
*/
close() {
return this.sidenav.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutManageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutManageListComponent, selector: "td-layout-manage-list", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n fullscreen\n [autosize]=\"containerAutosize\"\n class=\"td-layout-manage-list\"\n>\n <mat-sidenav\n #sidenav\n position=\"start\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [disableClose]=\"disableClose\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n >\n <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </div>\n </mat-sidenav>\n <div class=\"td-layout-manage-list-main\">\n <ng-content select=\"mat-toolbar\"></ng-content>\n <div class=\"td-layout-manage-list-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer-inner\"></ng-content>\n </div>\n</mat-sidenav-container>\n", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .td-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutManageListComponent, decorators: [{
type: Component,
args: [{ selector: 'td-layout-manage-list', template: "<mat-sidenav-container\n fullscreen\n [autosize]=\"containerAutosize\"\n class=\"td-layout-manage-list\"\n>\n <mat-sidenav\n #sidenav\n position=\"start\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [disableClose]=\"disableClose\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n >\n <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </div>\n </mat-sidenav>\n <div class=\"td-layout-manage-list-main\">\n <ng-content select=\"mat-toolbar\"></ng-content>\n <div class=\"td-layout-manage-list-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-