@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.
76 lines • 11.1 kB
JavaScript
import { Component, Input, Optional } from '@angular/core';
import { Router } from '@angular/router';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "@angular/cdk/scrolling";
import * as i4 from "@angular/material/toolbar";
import * as i5 from "@angular/material/icon";
export 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.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: i5.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.Router, decorators: [{
type: Optional
}] }], propDecorators: { toolbarTitle: [{
type: Input
}], icon: [{
type: Input
}], logo: [{
type: Input
}], color: [{
type: Input
}], navigationRoute: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LW5hdi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvbGF5b3V0L3NyYy9sYXlvdXQtbmF2L2xheW91dC1uYXYuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL2xheW91dC9zcmMvbGF5b3V0LW5hdi9sYXlvdXQtbmF2LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7Ozs7QUFPekMsTUFBTSxPQUFPLG9CQUFvQjtJQTZDQztJQTVDaEM7Ozs7T0FJRztJQUNNLFlBQVksQ0FBVTtJQUUvQjs7OztPQUlHO0lBQ00sSUFBSSxDQUFVO0lBRXZCOzs7OztPQUtHO0lBQ00sSUFBSSxDQUFVO0lBRXZCOzs7OztPQUtHO0lBQ00sS0FBSyxDQUFpQztJQUUvQzs7OztPQUlHO0lBQ00sZUFBZSxDQUFVO0lBRWxDOztPQUVHO0lBQ0gsSUFBSSxhQUFhO1FBQ2YsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQztJQUNsRCxDQUFDO0lBRUQsWUFBZ0MsT0FBZTtRQUFmLFlBQU8sR0FBUCxPQUFPLENBQVE7SUFBRyxDQUFDO0lBRW5ELHFCQUFxQjtRQUNuQixJQUFJLElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQy9DLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQztRQUNuRCxDQUFDO0lBQ0gsQ0FBQzt1R0FuRFUsb0JBQW9COzJGQUFwQixvQkFBb0IsK0tDUmpDLG0yQkF3QkE7OzJGRGhCYSxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0UsZUFBZTs7MEJBaURaLFFBQVE7eUNBdkNaLFlBQVk7c0JBQXBCLEtBQUs7Z0JBT0csSUFBSTtzQkFBWixLQUFLO2dCQVFHLElBQUk7c0JBQVosS0FBSztnQkFRRyxLQUFLO3NCQUFiLEtBQUs7Z0JBT0csZUFBZTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9wdGlvbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSb3V0ZXIgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd0ZC1sYXlvdXQtbmF2JyxcbiAgc3R5bGVVcmxzOiBbJy4vbGF5b3V0LW5hdi5jb21wb25lbnQuc2NzcyddLFxuICB0ZW1wbGF0ZVVybDogJy4vbGF5b3V0LW5hdi5jb21wb25lbnQuaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIFRkTGF5b3V0TmF2Q29tcG9uZW50IHtcbiAgLyoqXG4gICAqIHRvb2xiYXJUaXRsZT86IHN0cmluZ1xuICAgKlxuICAgKiBUaXRsZSBzZXQgaW4gdG9vbGJhci5cbiAgICovXG4gIEBJbnB1dCgpIHRvb2xiYXJUaXRsZT86IHN0cmluZztcblxuICAvKipcbiAgICogaWNvbj86IHN0cmluZ1xuICAgKlxuICAgKiBpY29uIG5hbWUgdG8gYmUgZGlzcGxheWVkIGJlZm9yZSB0aGUgdGl0bGVcbiAgICovXG4gIEBJbnB1dCgpIGljb24/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIGxvZ28/OiBzdHJpbmdcbiAgICpcbiAgICogbG9nbyBpY29uIG5hbWUgdG8gYmUgZGlzcGxheWVkIGJlZm9yZSB0aGUgdGl0bGUuXG4gICAqIElmIFtpY29uXSBpcyBzZXQsIHRoZW4gdGhpcyB3aWxsIG5vdCBiZSBzaG93bi5cbiAgICovXG4gIEBJbnB1dCgpIGxvZ28/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIGNvbG9yPzogJ2FjY2VudCcgfCAncHJpbWFyeScgfCAnd2FybidcbiAgICpcbiAgICogdG9vbGJhciBjb2xvciBvcHRpb246IHByaW1hcnkgfCBhY2NlbnQgfCB3YXJuLlxuICAgKiBJZiBbY29sb3JdIGlzIG5vdCBzZXQsIHByaW1hcnkgaXMgdXNlZC5cbiAgICovXG4gIEBJbnB1dCgpIGNvbG9yPzogJ2FjY2VudCcgfCAncHJpbWFyeScgfCAnd2Fybic7XG5cbiAgLyoqXG4gICAqIG5hdmlnYXRpb25Sb3V0ZT86IHN0cmluZ1xuICAgKlxuICAgKiBvcHRpb24gdG8gc2V0IHRoZSBjb21iaW5lZCByb3V0ZSBmb3IgdGhlIGljb24sIGxvZ28sIGFuZCB0b29sYmFyVGl0bGUuXG4gICAqL1xuICBASW5wdXQoKSBuYXZpZ2F0aW9uUm91dGU/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIENoZWNrcyBpZiByb3V0ZXIgd2FzIGluamVjdGVkLlxuICAgKi9cbiAgZ2V0IHJvdXRlckVuYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICEhdGhpcy5fcm91dGVyICYmICEhdGhpcy5uYXZpZ2F0aW9uUm91dGU7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihAT3B0aW9uYWwoKSBwcml2YXRlIF9yb3V0ZXI6IFJvdXRlcikge31cblxuICBoYW5kbGVOYXZpZ2F0aW9uQ2xpY2soKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucm91dGVyRW5hYmxlZCAmJiB0aGlzLm5hdmlnYXRpb25Sb3V0ZSkge1xuICAgICAgdGhpcy5fcm91dGVyLm5hdmlnYXRlQnlVcmwodGhpcy5uYXZpZ2F0aW9uUm91dGUpO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInRkLWxheW91dC1uYXYtd3JhcHBlclwiPlxuICA8bWF0LXRvb2xiYXIgY2xhc3M9XCJ0ZC1sYXlvdXQtdG9vbGJhclwiIFtjb2xvcl09XCJjb2xvclwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlt0ZC1tZW51LWJ1dHRvbl1cIj48L25nLWNvbnRlbnQ+XG4gICAgPHNwYW5cbiAgICAgICpuZ0lmPVwiaWNvbiB8fCBsb2dvIHx8IHRvb2xiYXJUaXRsZVwiXG4gICAgICBbY2xhc3MuY3Vyc29yLXBvaW50ZXJdPVwicm91dGVyRW5hYmxlZFwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlTmF2aWdhdGlvbkNsaWNrKClcIlxuICAgICAgY2xhc3M9XCJ0ZC1sYXlvdXQtbmF2LXRvb2xiYXItY29udGVudFwiXG4gICAgPlxuICAgICAgPG1hdC1pY29uICpuZ0lmPVwiaWNvblwiPnt7IGljb24gfX08L21hdC1pY29uPlxuICAgICAgPG1hdC1pY29uXG4gICAgICAgICpuZ0lmPVwibG9nbyAmJiAhaWNvblwiXG4gICAgICAgIGNsYXNzPVwibWF0LWljb24tbG9nb1wiXG4gICAgICAgIFtzdmdJY29uXT1cImxvZ29cIlxuICAgICAgPjwvbWF0LWljb24+XG4gICAgICA8c3BhbiAqbmdJZj1cInRvb2xiYXJUaXRsZVwiPnt7IHRvb2xiYXJUaXRsZSB9fTwvc3Bhbj5cbiAgICA8L3NwYW4+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3RkLXRvb2xiYXItY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG4gIDwvbWF0LXRvb2xiYXI+XG4gIDxkaXYgY2xhc3M9XCJ0ZC1sYXlvdXQtbmF2LWNvbnRlbnRcIiBjZGtTY3JvbGxhYmxlPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cInRkLWxheW91dC1mb290ZXJcIj48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==