cnp-layout
Version:
A simple layout use angular material
40 lines • 5.8 kB
JavaScript
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
export class TopbarComponent {
constructor() {
this.leftMenu = [];
this.username = '';
this.doToggleMenu = new EventEmitter();
}
onMenuButtonClick(evt) {
this.doToggleMenu.emit(evt);
}
rightMenuClick(event, item) {
if (item.command) {
item.command({ originalEvent: event, item });
}
}
leftMenuClick(event, item) {
if (item.command) {
item.command({ originalEvent: event, item });
}
if (!item.routerLink) {
event.preventDefault();
}
}
}
TopbarComponent.decorators = [
{ type: Component, args: [{
selector: 'cnp-topbar',
template: "<div class=\"layout-topbar\">\n <button *ngIf=\"isShowMenuButton\" mat-button class=\"menu-btn\" (click)=\"onMenuButtonClick($event)\">\n <mat-icon>menu</mat-icon>\n </button>\n\n <div class=\"topbar-left-memu\">\n <button *ngFor=\"let item of leftMenu\" mat-button class=\"left-menu-item\" [routerLink]=\"item.routerLink\" (click)=\"leftMenuClick($event,item)\">\n <img *ngIf=\"item.img\" src=\"{{item.img}}\" alt=\"IMG\" height=\"38\">\n {{item.label | uppercase}}\n </button>\n </div>\n\n <div class=\"layout-topbar-menu-wrapper\">\n\n <button *ngIf=\"langMenu\" mat-button [matMenuTriggerFor]=\"actionLang\" class=\"right-menu-item\">\n <img src=\"{{langMenu.currentImg}}\" alt=\"LG\" width=\"30\" height=\"20\" class=\"img-flag\">\n {{langMenu.currentLang}}\n <mat-icon>arrow_drop_down</mat-icon>\n <mat-menu #actionLang=\"matMenu\">\n <button mat-menu-item *ngFor=\"let item of langMenu.langItems\" [routerLink]=\"item.routerLink\"\n (click)=\"rightMenuClick($event,item)\">\n <img src=\"{{item.img}}\" alt=\"IMG\" width=\"35\" height=\"25\">\n {{item.label}}\n </button>\n </mat-menu>\n </button>\n\n <button *ngIf=\"userMenu\" mat-button [matMenuTriggerFor]=\"actions\" class=\"right-menu-item\">\n {{userMenu.welcome + ' ' + username}}\n <mat-icon>{{userMenu.icon}}</mat-icon>\n <mat-menu #actions=\"matMenu\">\n <button mat-menu-item *ngFor=\"let item of userMenu.menuItems\" [routerLink]=\"item.routerLink\"\n (click)=\"rightMenuClick($event,item)\">{{item.label}}</button>\n </mat-menu>\n </button>\n </div>\n</div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] }
];
TopbarComponent.propDecorators = {
leftMenu: [{ type: Input }],
langMenu: [{ type: Input }],
userMenu: [{ type: Input }],
username: [{ type: Input }],
isShowMenuButton: [{ type: Input }],
doToggleMenu: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9wYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jbnAtbGF5b3V0L3NyYy8iLCJzb3VyY2VzIjpbImxpYi90b3BiYXIvdG9wYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLHVCQUF1QixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBUWhHLE1BQU0sT0FBTyxlQUFlO0lBTDVCO1FBT1csYUFBUSxHQUFxQixFQUFFLENBQUM7UUFHaEMsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUViLGlCQUFZLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7SUFxQmpFLENBQUM7SUFuQkMsaUJBQWlCLENBQUMsR0FBRztRQUNuQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQVksRUFBRSxJQUFvQjtRQUMvQyxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDaEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxFQUFFLGFBQWEsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztTQUM5QztJQUNILENBQUM7SUFFRCxhQUFhLENBQUMsS0FBWSxFQUFFLElBQW9CO1FBQzlDLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDO1NBQzlDO1FBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDcEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQzs7O1lBL0JGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsd3pEQUFzQztnQkFDdEMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07YUFDaEQ7Ozt1QkFHRSxLQUFLO3VCQUNMLEtBQUs7dUJBQ0wsS0FBSzt1QkFDTCxLQUFLOytCQUNMLEtBQUs7MkJBQ0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVG9wQmFyTWVudUl0ZW0sIFRvcEJhckxhbmdNZW51LCBUb3BCYXJVc2VyTWVudSB9IGZyb20gJy4uL21vZGVsL21lbnUtaXRlbSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NucC10b3BiYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vdG9wYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgVG9wYmFyQ29tcG9uZW50IHtcblxuICBASW5wdXQoKSBsZWZ0TWVudTogVG9wQmFyTWVudUl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBsYW5nTWVudTogVG9wQmFyTGFuZ01lbnU7XG4gIEBJbnB1dCgpIHVzZXJNZW51OiBUb3BCYXJVc2VyTWVudTtcbiAgQElucHV0KCkgdXNlcm5hbWUgPSAnJztcbiAgQElucHV0KCkgaXNTaG93TWVudUJ1dHRvbjogYm9vbGVhbjtcbiAgQE91dHB1dCgpIGRvVG9nZ2xlTWVudTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgb25NZW51QnV0dG9uQ2xpY2soZXZ0KTogdm9pZCB7XG4gICAgdGhpcy5kb1RvZ2dsZU1lbnUuZW1pdChldnQpO1xuICB9XG5cbiAgcmlnaHRNZW51Q2xpY2soZXZlbnQ6IEV2ZW50LCBpdGVtOiBUb3BCYXJNZW51SXRlbSk6IHZvaWQge1xuICAgIGlmIChpdGVtLmNvbW1hbmQpIHtcbiAgICAgIGl0ZW0uY29tbWFuZCh7IG9yaWdpbmFsRXZlbnQ6IGV2ZW50LCBpdGVtIH0pO1xuICAgIH1cbiAgfVxuXG4gIGxlZnRNZW51Q2xpY2soZXZlbnQ6IEV2ZW50LCBpdGVtOiBUb3BCYXJNZW51SXRlbSk6IHZvaWQge1xuICAgIGlmIChpdGVtLmNvbW1hbmQpIHtcbiAgICAgIGl0ZW0uY29tbWFuZCh7IG9yaWdpbmFsRXZlbnQ6IGV2ZW50LCBpdGVtIH0pO1xuICAgIH1cbiAgICBpZiAoIWl0ZW0ucm91dGVyTGluaykge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICB9XG4gIH1cblxufVxuIl19