@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.
50 lines • 10.2 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/material/toolbar";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/common";
import * as i5 from "@angular/cdk/scrolling";
export class TdLayoutNavComponent {
constructor(_router) {
this._router = _router;
/**
* color?: 'accent' | 'primary' | 'warn'
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
this.color = 'primary';
}
/**
* Checks if router was injected.
*/
get routerEnabled() {
return !!this._router && !!this.navigationRoute;
}
handleNavigationClick() {
if (this.routerEnabled && this.navigationRoute) {
this._router.navigateByUrl(this.navigationRoute);
}
}
}
TdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutNavComponent, deps: [{ token: i1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
TdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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}\n"] }]
}], ctorParameters: function () { return [{ 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LW5hdi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvbGF5b3V0L3NyYy9sYXlvdXQtbmF2L2xheW91dC1uYXYuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL2xheW91dC9zcmMvbGF5b3V0LW5hdi9sYXlvdXQtbmF2LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7Ozs7QUFPekMsTUFBTSxPQUFPLG9CQUFvQjtJQTZDL0IsWUFBZ0MsT0FBZTtRQUFmLFlBQU8sR0FBUCxPQUFPLENBQVE7UUF0Qi9DOzs7OztXQUtHO1FBQ00sVUFBSyxHQUFtQyxTQUFTLENBQUM7SUFnQlQsQ0FBQztJQVBuRDs7T0FFRztJQUNILElBQUksYUFBYTtRQUNmLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUM7SUFDbEQsQ0FBQztJQUlELHFCQUFxQjtRQUNuQixJQUFJLElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUM5QyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUM7U0FDbEQ7SUFDSCxDQUFDOztpSEFuRFUsb0JBQW9CO3FHQUFwQixvQkFBb0IsK0tDUmpDLG0yQkF3QkE7MkZEaEJhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxlQUFlOzswQkFpRFosUUFBUTs0Q0F2Q1osWUFBWTtzQkFBcEIsS0FBSztnQkFPRyxJQUFJO3NCQUFaLEtBQUs7Z0JBUUcsSUFBSTtzQkFBWixLQUFLO2dCQVFHLEtBQUs7c0JBQWIsS0FBSztnQkFPRyxlQUFlO3NCQUF2QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3B0aW9uYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RkLWxheW91dC1uYXYnLFxuICBzdHlsZVVybHM6IFsnLi9sYXlvdXQtbmF2LmNvbXBvbmVudC5zY3NzJ10sXG4gIHRlbXBsYXRlVXJsOiAnLi9sYXlvdXQtbmF2LmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgVGRMYXlvdXROYXZDb21wb25lbnQge1xuICAvKipcbiAgICogdG9vbGJhclRpdGxlPzogc3RyaW5nXG4gICAqXG4gICAqIFRpdGxlIHNldCBpbiB0b29sYmFyLlxuICAgKi9cbiAgQElucHV0KCkgdG9vbGJhclRpdGxlPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBpY29uPzogc3RyaW5nXG4gICAqXG4gICAqIGljb24gbmFtZSB0byBiZSBkaXNwbGF5ZWQgYmVmb3JlIHRoZSB0aXRsZVxuICAgKi9cbiAgQElucHV0KCkgaWNvbj86IHN0cmluZztcblxuICAvKipcbiAgICogbG9nbz86IHN0cmluZ1xuICAgKlxuICAgKiBsb2dvIGljb24gbmFtZSB0byBiZSBkaXNwbGF5ZWQgYmVmb3JlIHRoZSB0aXRsZS5cbiAgICogSWYgW2ljb25dIGlzIHNldCwgdGhlbiB0aGlzIHdpbGwgbm90IGJlIHNob3duLlxuICAgKi9cbiAgQElucHV0KCkgbG9nbz86IHN0cmluZztcblxuICAvKipcbiAgICogY29sb3I/OiAnYWNjZW50JyB8ICdwcmltYXJ5JyB8ICd3YXJuJ1xuICAgKlxuICAgKiB0b29sYmFyIGNvbG9yIG9wdGlvbjogcHJpbWFyeSB8IGFjY2VudCB8IHdhcm4uXG4gICAqIElmIFtjb2xvcl0gaXMgbm90IHNldCwgcHJpbWFyeSBpcyB1c2VkLlxuICAgKi9cbiAgQElucHV0KCkgY29sb3I/OiAnYWNjZW50JyB8ICdwcmltYXJ5JyB8ICd3YXJuJyA9ICdwcmltYXJ5JztcblxuICAvKipcbiAgICogbmF2aWdhdGlvblJvdXRlPzogc3RyaW5nXG4gICAqXG4gICAqIG9wdGlvbiB0byBzZXQgdGhlIGNvbWJpbmVkIHJvdXRlIGZvciB0aGUgaWNvbiwgbG9nbywgYW5kIHRvb2xiYXJUaXRsZS5cbiAgICovXG4gIEBJbnB1dCgpIG5hdmlnYXRpb25Sb3V0ZT86IHN0cmluZztcblxuICAvKipcbiAgICogQ2hlY2tzIGlmIHJvdXRlciB3YXMgaW5qZWN0ZWQuXG4gICAqL1xuICBnZXQgcm91dGVyRW5hYmxlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISF0aGlzLl9yb3V0ZXIgJiYgISF0aGlzLm5hdmlnYXRpb25Sb3V0ZTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIHByaXZhdGUgX3JvdXRlcjogUm91dGVyKSB7fVxuXG4gIGhhbmRsZU5hdmlnYXRpb25DbGljaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5yb3V0ZXJFbmFibGVkICYmIHRoaXMubmF2aWdhdGlvblJvdXRlKSB7XG4gICAgICB0aGlzLl9yb3V0ZXIubmF2aWdhdGVCeVVybCh0aGlzLm5hdmlnYXRpb25Sb3V0ZSk7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidGQtbGF5b3V0LW5hdi13cmFwcGVyXCI+XG4gIDxtYXQtdG9vbGJhciBjbGFzcz1cInRkLWxheW91dC10b29sYmFyXCIgW2NvbG9yXT1cImNvbG9yXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3RkLW1lbnUtYnV0dG9uXVwiPjwvbmctY29udGVudD5cbiAgICA8c3BhblxuICAgICAgKm5nSWY9XCJpY29uIHx8IGxvZ28gfHwgdG9vbGJhclRpdGxlXCJcbiAgICAgIFtjbGFzcy5jdXJzb3ItcG9pbnRlcl09XCJyb3V0ZXJFbmFibGVkXCJcbiAgICAgIChjbGljayk9XCJoYW5kbGVOYXZpZ2F0aW9uQ2xpY2soKVwiXG4gICAgICBjbGFzcz1cInRkLWxheW91dC1uYXYtdG9vbGJhci1jb250ZW50XCJcbiAgICA+XG4gICAgICA8bWF0LWljb24gKm5nSWY9XCJpY29uXCI+e3sgaWNvbiB9fTwvbWF0LWljb24+XG4gICAgICA8bWF0LWljb25cbiAgICAgICAgKm5nSWY9XCJsb2dvICYmICFpY29uXCJcbiAgICAgICAgY2xhc3M9XCJtYXQtaWNvbi1sb2dvXCJcbiAgICAgICAgW3N2Z0ljb25dPVwibG9nb1wiXG4gICAgICA+PC9tYXQtaWNvbj5cbiAgICAgIDxzcGFuICpuZ0lmPVwidG9vbGJhclRpdGxlXCI+e3sgdG9vbGJhclRpdGxlIH19PC9zcGFuPlxuICAgIDwvc3Bhbj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdGQtdG9vbGJhci1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgPC9tYXQtdG9vbGJhcj5cbiAgPGRpdiBjbGFzcz1cInRkLWxheW91dC1uYXYtY29udGVudFwiIGNka1Njcm9sbGFibGU+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwidGQtbGF5b3V0LWZvb3RlclwiPjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19