@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.
875 lines (867 loc) • 85.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, ViewChild, inject, Renderer2, ElementRef, Directive, HostListener, SecurityContext, ContentChildren, NgModule } from '@angular/core';
import { MatSidenav, MatSidenavContainer } from '@angular/material/sidenav';
import { mixinDisabled, tdCollapseAnimation } from '@covalent/core/common';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
import { MatToolbar } from '@angular/material/toolbar';
import { Router } from '@angular/router';
import * as i2 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import { MatDivider } from '@angular/material/divider';
import { DomSanitizer } from '@angular/platform-browser';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MatIconButton } from '@angular/material/button';
const _c0$6 = [[["td-navigation-drawer"]], [["", "td-sidenav-content", ""]], "*"];
const _c1$5 = ["td-navigation-drawer", "[td-sidenav-content]", "*"];
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 = function TdLayoutComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdLayoutComponent, selectors: [["td-layout"]], viewQuery: function TdLayoutComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(MatSidenav, 7);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenav = _t.first);
} }, inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, ngContentSelectors: _c1$5, decls: 6, vars: 8, consts: [["sidenav", ""], ["fullscreen", "", 3, "autosize"], [1, "td-layout-sidenav", 3, "mode", "opened", "disableClose"]], template: function TdLayoutComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0$6);
i0.ɵɵelementStart(0, "mat-sidenav-container", 1)(1, "mat-sidenav", 2, 0);
i0.ɵɵprojection(3);
i0.ɵɵprojection(4, 1);
i0.ɵɵelementEnd();
i0.ɵɵprojection(5, 2);
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵproperty("autosize", ctx.containerAutosize);
i0.ɵɵadvance();
i0.ɵɵstyleProp("max-width", ctx.sidenavWidth)("min-width", ctx.sidenavWidth);
i0.ɵɵproperty("mode", ctx.mode)("opened", ctx.opened)("disableClose", ctx.disableClose);
} }, dependencies: [MatSidenav, MatSidenavContainer], styles: ["[_nghost-%COMP%]{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}[_nghost-%COMP%] >mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:flex;flex-direction:column}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutComponent, [{
type: Component,
args: [{ selector: 'td-layout', imports: [MatSidenav, MatSidenavContainer], 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"] }]
}], null, { sidenav: [{
type: ViewChild,
args: [MatSidenav, { static: true }]
}], mode: [{
type: Input
}], opened: [{
type: Input
}], sidenavWidth: [{
type: Input
}], containerAutosize: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLayoutComponent, { className: "TdLayoutComponent", filePath: "layout.component.ts", lineNumber: 13 }); })();
class LayoutToggleBase {
}
/* tslint:disable-next-line */
const _TdLayoutToggleMixinBase = mixinDisabled(LayoutToggleBase);
class BaseLayoutToggleDirective extends _TdLayoutToggleMixinBase {
_toggleSubs;
_renderer = inject(Renderer2);
_elementRef = inject(ElementRef);
_initialized = false;
_hideWhenOpened = false;
_layout;
/**
* 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() {
super();
this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-menu-button');
}
ngAfterViewInit() {
this._initialized = true;
// if layout has not been provided
// show warn message
if (!this._layout) {
this._noLayoutMessage();
}
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 = function BaseLayoutToggleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseLayoutToggleDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseLayoutToggleDirective, hostBindings: function BaseLayoutToggleDirective_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("click", function BaseLayoutToggleDirective_click_HostBindingHandler($event) { return ctx.clickListener($event); });
} }, inputs: { hideWhenOpened: "hideWhenOpened" }, features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseLayoutToggleDirective, [{
type: Directive
}], () => [], { hideWhenOpened: [{
type: Input
}], clickListener: [{
type: HostListener,
args: ['click', ['$event']]
}] }); })();
class TdLayoutToggleDirective extends BaseLayoutToggleDirective {
set tdLayoutToggle(tdLayoutToggle) {
this.disabled = !(tdLayoutToggle === '' || tdLayoutToggle);
}
constructor() {
super();
this._layout = inject(TdLayoutComponent);
}
onClick() {
this._layout?.toggle();
}
static ɵfac = function TdLayoutToggleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutToggleDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutToggleDirective, selectors: [["", "tdLayoutToggle", ""]], inputs: { tdLayoutToggle: "tdLayoutToggle" }, features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutToggleDirective, [{
type: Directive,
args: [{
selector: '[tdLayoutToggle]',
}]
}], () => [], { tdLayoutToggle: [{
type: Input
}] }); })();
class TdLayoutCloseDirective extends BaseLayoutToggleDirective {
set tdLayoutClose(tdLayoutClose) {
this.disabled = !(tdLayoutClose === '' || tdLayoutClose);
}
constructor() {
super();
this._layout = inject(TdLayoutComponent);
}
onClick() {
this._layout?.close();
}
static ɵfac = function TdLayoutCloseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutCloseDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutCloseDirective, selectors: [["", "tdLayoutClose", ""]], inputs: { tdLayoutClose: "tdLayoutClose" }, features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutCloseDirective, [{
type: Directive,
args: [{
selector: '[tdLayoutClose]',
}]
}], () => [], { tdLayoutClose: [{
type: Input
}] }); })();
class TdLayoutOpenDirective extends BaseLayoutToggleDirective {
set tdLayoutClose(tdLayoutOpen) {
this.disabled = !(tdLayoutOpen === '' || tdLayoutOpen);
}
constructor() {
super();
this._layout = inject(TdLayoutComponent);
}
onClick() {
this._layout?.open();
}
static ɵfac = function TdLayoutOpenDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutOpenDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutOpenDirective, selectors: [["", "tdLayoutOpen", ""]], inputs: { tdLayoutClose: [0, "tdLayoutOpen", "tdLayoutClose"] }, features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutOpenDirective, [{
type: Directive,
args: [{
selector: '[tdLayoutOpen]',
}]
}], () => [], { tdLayoutClose: [{
type: Input,
args: ['tdLayoutOpen']
}] }); })();
const _c0$5 = [[["", "td-menu-button", ""]], [["", "td-toolbar-content", ""]], "*", [["td-layout-footer"]]];
const _c1$4 = ["[td-menu-button]", "[td-toolbar-content]", "*", "td-layout-footer"];
function TdLayoutNavComponent_span_3_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-icon");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.icon);
} }
function TdLayoutNavComponent_span_3_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "mat-icon", 7);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("svgIcon", ctx_r1.logo);
} }
function TdLayoutNavComponent_span_3_span_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.toolbarTitle);
} }
function TdLayoutNavComponent_span_3_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "span", 4);
i0.ɵɵlistener("click", function TdLayoutNavComponent_span_3_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleNavigationClick()); });
i0.ɵɵtemplate(1, TdLayoutNavComponent_span_3_mat_icon_1_Template, 2, 1, "mat-icon", 5)(2, TdLayoutNavComponent_span_3_mat_icon_2_Template, 1, 1, "mat-icon", 6)(3, TdLayoutNavComponent_span_3_span_3_Template, 2, 1, "span", 5);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassProp("cursor-pointer", ctx_r1.routerEnabled);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.icon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.logo && !ctx_r1.icon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.toolbarTitle);
} }
class TdLayoutNavComponent {
_router = inject(Router, { optional: true });
/**
* 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;
}
handleNavigationClick() {
if (this.routerEnabled && this.navigationRoute) {
this._router?.navigateByUrl(this.navigationRoute);
}
}
static ɵfac = function TdLayoutNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdLayoutNavComponent, selectors: [["td-layout-nav"]], inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute" }, ngContentSelectors: _c1$4, decls: 8, vars: 2, consts: [[1, "td-layout-nav-wrapper"], [1, "td-layout-toolbar", 3, "color"], ["class", "td-layout-nav-toolbar-content", 3, "cursor-pointer", "click", 4, "ngIf"], ["cdkScrollable", "", 1, "td-layout-nav-content"], [1, "td-layout-nav-toolbar-content", 3, "click"], [4, "ngIf"], ["class", "mat-icon-logo", 3, "svgIcon", 4, "ngIf"], [1, "mat-icon-logo", 3, "svgIcon"]], template: function TdLayoutNavComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0$5);
i0.ɵɵelementStart(0, "div", 0)(1, "mat-toolbar", 1);
i0.ɵɵprojection(2);
i0.ɵɵtemplate(3, TdLayoutNavComponent_span_3_Template, 4, 5, "span", 2);
i0.ɵɵprojection(4, 1);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(5, "div", 3);
i0.ɵɵprojection(6, 2);
i0.ɵɵelementEnd();
i0.ɵɵprojection(7, 3);
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("color", ctx.color);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.icon || ctx.logo || ctx.toolbarTitle);
} }, dependencies: [CommonModule, i1.NgIf, MatToolbar, MatIcon], styles: [".td-menu-button[_ngcontent-%COMP%]{margin-left:0} [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}[_nghost-%COMP%]{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}[_nghost-%COMP%] .td-layout-nav-wrapper[_ngcontent-%COMP%]{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}[_nghost-%COMP%] .td-layout-nav-wrapper[_ngcontent-%COMP%] .td-layout-nav-toolbar-content[_ngcontent-%COMP%]{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}[_nghost-%COMP%] .td-layout-nav-wrapper[_ngcontent-%COMP%] .td-layout-nav-content[_ngcontent-%COMP%]{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}[_nghost-%COMP%] mat-toolbar[_ngcontent-%COMP%]{z-index:2;box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavComponent, [{
type: Component,
args: [{ selector: 'td-layout-nav', imports: [CommonModule, MatToolbar, MatIcon], 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"] }]
}], null, { toolbarTitle: [{
type: Input
}], icon: [{
type: Input
}], logo: [{
type: Input
}], color: [{
type: Input
}], navigationRoute: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLayoutNavComponent, { className: "TdLayoutNavComponent", filePath: "layout-nav/layout-nav.component.ts", lineNumber: 13 }); })();
const _c0$4 = [[["", "td-menu-button", ""]], [["", "td-sidenav-toolbar-content", ""]], [["", "td-sidenav-content", ""]], [["", "td-toolbar-content", ""]], "*", [["td-layout-footer-inner"]], [["td-layout-footer"]]];
const _c1$3 = ["[td-menu-button]", "[td-sidenav-toolbar-content]", "[td-sidenav-content]", "[td-toolbar-content]", "*", "td-layout-footer-inner", "td-layout-footer"];
function TdLayoutNavListComponent_span_6_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-icon");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.icon);
} }
function TdLayoutNavListComponent_span_6_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "mat-icon", 11);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("svgIcon", ctx_r1.logo);
} }
function TdLayoutNavListComponent_span_6_span_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.toolbarTitle);
} }
function TdLayoutNavListComponent_span_6_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "span", 8);
i0.ɵɵlistener("click", function TdLayoutNavListComponent_span_6_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleNavigationClick()); });
i0.ɵɵtemplate(1, TdLayoutNavListComponent_span_6_mat_icon_1_Template, 2, 1, "mat-icon", 9)(2, TdLayoutNavListComponent_span_6_mat_icon_2_Template, 1, 1, "mat-icon", 10)(3, TdLayoutNavListComponent_span_6_span_3_Template, 2, 1, "span", 9);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassProp("cursor-pointer", ctx_r1.routerEnabled);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.icon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.logo && !ctx_r1.icon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.toolbarTitle);
} }
class TdLayoutNavListComponent {
_router = inject(Router, { optional: true });
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;
}
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 = function TdLayoutNavListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdLayoutNavListComponent, selectors: [["td-layout-nav-list"]], viewQuery: function TdLayoutNavListComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(MatSidenav, 7);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenav = _t.first);
} }, inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize", navigationRoute: "navigationRoute" }, ngContentSelectors: _c1$3, decls: 17, vars: 11, consts: [["sidenav", ""], [1, "td-layout-nav-list-wrapper"], ["fullscreen", "", 1, "td-layout-nav-list", 3, "autosize"], ["position", "start", 3, "mode", "opened", "disableClose"], [1, "td-layout-toolbar", 3, "color"], ["class", "td-layout-nav-list-toolbar-content", 3, "cursor-pointer", "click", 4, "ngIf"], ["cdkScrollable", "", 1, "td-layout-nav-list-content"], [1, "td-layout-nav-list-main"], [1, "td-layout-nav-list-toolbar-content", 3, "click"], [4, "ngIf"], ["class", "mat-icon-logo", 3, "svgIcon", 4, "ngIf"], [1, "mat-icon-logo", 3, "svgIcon"]], template: function TdLayoutNavListComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0$4);
i0.ɵɵelementStart(0, "div", 1)(1, "mat-sidenav-container", 2)(2, "mat-sidenav", 3, 0)(4, "mat-toolbar", 4);
i0.ɵɵprojection(5);
i0.ɵɵtemplate(6, TdLayoutNavListComponent_span_6_Template, 4, 5, "span", 5);
i0.ɵɵprojection(7, 1);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(8, "div", 6);
i0.ɵɵprojection(9, 2);
i0.ɵɵelementEnd()();
i0.ɵɵelementStart(10, "div", 7)(11, "mat-toolbar", 4);
i0.ɵɵprojection(12, 3);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(13, "div", 6);
i0.ɵɵprojection(14, 4);
i0.ɵɵelementEnd();
i0.ɵɵprojection(15, 5);
i0.ɵɵelementEnd()()();
i0.ɵɵprojection(16, 6);
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("autosize", ctx.containerAutosize);
i0.ɵɵadvance();
i0.ɵɵstyleProp("max-width", ctx.sidenavWidth)("min-width", ctx.sidenavWidth);
i0.ɵɵproperty("mode", ctx.mode)("opened", ctx.opened)("disableClose", ctx.disableClose);
i0.ɵɵadvance(2);
i0.ɵɵproperty("color", ctx.color);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.icon || ctx.logo || ctx.toolbarTitle);
i0.ɵɵadvance(5);
i0.ɵɵproperty("color", ctx.color);
} }, dependencies: [CommonModule, i1.NgIf, MatSidenav, MatSidenavContainer, MatToolbar, MatIcon], styles: ["[_nghost-%COMP%]{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}[_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] > .mat-sidenav-container[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-side[_ngcontent-%COMP%]{border-right:0}[dir=rtl] [_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] > .mat-sidenav-container[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-side[_ngcontent-%COMP%]{border-left:0}[_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%]{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}[_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] .td-layout-nav-list-toolbar-content[_ngcontent-%COMP%]{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}[_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] .td-layout-nav-list-content[_ngcontent-%COMP%]{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}[_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] .td-layout-nav-list-main[_ngcontent-%COMP%]{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}[_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] .td-layout-nav-list-main[_ngcontent-%COMP%] .td-layout-nav-list-content[_ngcontent-%COMP%]{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}[_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%]{flex:1}[_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-opened[_ngcontent-%COMP%], [_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-opening[_ngcontent-%COMP%], [_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-closed[_ngcontent-%COMP%], [_nghost-%COMP%] .td-layout-nav-list-wrapper[_ngcontent-%COMP%] mat-sidenav-container.td-layout-nav-list[_ngcontent-%COMP%] > mat-sidenav.mat-drawer-closing[_ngcontent-%COMP%]{box-shadow:none}[_nghost-%COMP%] mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{flex-grow:1}[_nghost-%COMP%] 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}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListComponent, [{
type: Component,
args: [{ selector: 'td-layout-nav-list', imports: [CommonModule, MatSidenav, MatSidenavContainer, MatToolbar, MatIcon], 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"] }]
}], null, { 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
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLayoutNavListComponent, { className: "TdLayoutNavListComponent", filePath: "layout-nav-list/layout-nav-list.component.ts", lineNumber: 21 }); })();
class TdLayoutNavListToggleDirective extends BaseLayoutToggleDirective {
set tdLayoutNavListToggle(tdLayoutNavListToggle) {
this.disabled = !(tdLayoutNavListToggle === '' || tdLayoutNavListToggle);
}
constructor() {
super();
this._layout = inject(TdLayoutNavListComponent);
}
onClick() {
this._layout?.toggle();
}
static ɵfac = function TdLayoutNavListToggleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListToggleDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutNavListToggleDirective, selectors: [["", "tdLayoutNavListToggle", ""]], inputs: { tdLayoutNavListToggle: "tdLayoutNavListToggle" }, features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListToggleDirective, [{
type: Directive,
args: [{
selector: '[tdLayoutNavListToggle]',
}]
}], () => [], { tdLayoutNavListToggle: [{
type: Input
}] }); })();
class TdLayoutNavListCloseDirective extends BaseLayoutToggleDirective {
set tdLayoutNavListClose(tdLayoutNavListClose) {
this.disabled = !(tdLayoutNavListClose === '' || tdLayoutNavListClose);
}
constructor() {
super();
this._layout = inject(TdLayoutNavListComponent);
}
onClick() {
this._layout?.close();
}
static ɵfac = function TdLayoutNavListCloseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListCloseDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutNavListCloseDirective, selectors: [["", "tdLayoutNavListClose", ""]], inputs: { tdLayoutNavListClose: "tdLayoutNavListClose" }, features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListCloseDirective, [{
type: Directive,
args: [{
selector: '[tdLayoutNavListClose]',
}]
}], () => [], { tdLayoutNavListClose: [{
type: Input
}] }); })();
class TdLayoutNavListOpenDirective extends BaseLayoutToggleDirective {
set tdLayoutNavListOpen(tdLayoutNavListOpen) {
this.disabled = !(tdLayoutNavListOpen === '' || tdLayoutNavListOpen);
}
constructor() {
super();
this._layout = inject(TdLayoutNavListComponent);
}
onClick() {
this._layout?.open();
}
static ɵfac = function TdLayoutNavListOpenDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutNavListOpenDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLayoutNavListOpenDirective, selectors: [["", "tdLayoutNavListOpen", ""]], inputs: { tdLayoutNavListOpen: "tdLayoutNavListOpen" }, features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutNavListOpenDirective, [{
type: Directive,
args: [{
selector: '[tdLayoutNavListOpen]',
}]
}], () => [], { tdLayoutNavListOpen: [{
type: Input
}] }); })();
const _c0$3 = ["*", [["", "td-after-card", ""]]];
const _c1$2 = ["*", "[td-after-card]"];
function TdLayoutCardOverComponent_mat_card_title_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-card-title");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r0.cardTitle);
} }
function TdLayoutCardOverComponent_mat_card_subtitle_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-card-subtitle");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r0.cardSubtitle);
} }
function TdLayoutCardOverComponent_mat_divider_7_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "mat-divider");
} }
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 = function TdLayoutCardOverComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutCardOverComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdLayoutCardOverComponent, selectors: [["td-layout-card-over"]], inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngContentSelectors: _c1$2, decls: 11, vars: 12, consts: [[1, "td-layout-toolbar", 3, "color"], [1, "td-layout-card-over-wrapper"], [1, "td-layout-card-over"], [4, "ngIf"]], template: function TdLayoutCardOverComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0$3);
i0.ɵɵelement(0, "mat-toolbar", 0);
i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "mat-card")(4, "mat-card-header");
i0.ɵɵtemplate(5, TdLayoutCardOverComponent_mat_card_title_5_Template, 2, 1, "mat-card-title", 3)(6, TdLayoutCardOverComponent_mat_card_subtitle_6_Template, 2, 1, "mat-card-subtitle", 3);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(7, TdLayoutCardOverComponent_mat_divider_7_Template, 1, 0, "mat-divider", 3);
i0.ɵɵelementStart(8, "mat-card-content");
i0.ɵɵprojection(9);
i0.ɵɵelementEnd()();
i0.ɵɵprojection(10, 1);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵproperty("color", ctx.color);
i0.ɵɵadvance(2);
i0.ɵɵstyleProp("max-width", ctx.cardWidth, "%")("flex", "1 1 " + ctx.cardWidth + "%")("-ms-flex", "1 1 " + ctx.cardWidth + "%")("-webkit-box-flex", 1);
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngIf", ctx.cardTitle);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.cardSubtitle);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.cardTitle || ctx.cardSubtitle);
} }, dependencies: [CommonModule, i1.NgIf, MatToolbar, MatCardModule, i2.MatCard, i2.MatCardContent, i2.MatCardHeader, i2.MatCardSubtitle, i2.MatCardTitle, MatDivider], styles: ["[_nghost-%COMP%]{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}[_nghost-%COMP%] [td-after-card][_ngcontent-%COMP%]{display:block}.td-layout-card-over-wrapper[_ngcontent-%COMP%]{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper[_ngcontent-%COMP%]{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[_ngcontent-%COMP%] .td-layout-card-over[_ngcontent-%COMP%]{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper[_ngcontent-%COMP%] .td-layout-card-over[_ngcontent-%COMP%]{max-width:100%!important}}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLayoutCardOverComponent, [{
type: Component,
args: [{ selector: 'td-layout-card-over', imports: [CommonModule, MatToolbar, MatCardModule, MatDivider], 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"] }]
}], null, { cardTitle: [{
type: Input
}], cardSubtitle: [{
type: Input
}], cardWidth: [{
type: Input
}], color: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLayoutCardOverComponent, { className: "TdLayoutCardOverComponent", filePath: "layout-card-over/layout-card-over.component.ts", lineNumber: 13 }); })();
const _c0$2 = [[["mat-toolbar", "td-sidenav-content", ""]], [["", "td-sidenav-content", ""]], [["mat-toolbar"]], "*", [["td-layout-footer-inner"]]];
const _c1$1 = ["mat-toolbar[td-sidenav-content]", "[td-sidenav-content]", "mat-toolbar", "*", "td-layout-footer-inner"];
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 = function TdLayoutManageListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLayoutManageListComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdLayoutManageListComponent, selectors: [["td-layout-manage-list"]], viewQuery: function TdLayoutManageListComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(MatSidenav, 7);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenav = _t.first);
} }, inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", containerAutosize: "containerAutosize" }, ngContentSelectors: _c1$1, decls: 11, vars: 8, consts: [["sidenav", ""], ["fullscreen", "", 1, "td-layout-manage-list", 3, "autosize"], ["position", "start", 3, "mode", "opened", "disableClose"], ["cdkScrollable", "", 1, "td-layout-manage-list-sidenav"], [1, "td-layout-manage-list-main"], ["cdkScrollable", "", 1, "td-layout-manage-list-content"]], template: function TdLayoutManageListComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0$2);
i0.ɵɵelementStart(0, "mat-sidenav-container", 1)(1, "mat-sidenav", 2, 0);
i0.ɵɵprojection(3);
i0.ɵɵelementStart(4, "div", 3);
i0.ɵɵprojection(5, 1);
i0.ɵɵelementEnd()();
i0.ɵɵelementStart(6, "div", 4);
i0.ɵɵprojection(7, 2);
i0.ɵɵelementStart(8, "div", 5);
i0.ɵɵprojection(9, 3);
i0.ɵɵelementEnd();
i0.ɵɵprojection(10, 4);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵproperty("autosize", ctx.containerAutosize);
i0.ɵ