urbisoft-app-structure
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.2.
41 lines • 6.18 kB
JavaScript
import { Component, Output, EventEmitter, Input } from '@angular/core';
export class HeaderComponent {
constructor() {
this.toggleSideBar = new EventEmitter();
this.logout = new EventEmitter();
this.sideBarOpened = false;
}
ngOnInit() {
}
openSideBar() {
this.sideBarOpened = !this.sideBarOpened;
this.toggleSideBar.next(this.sideBarOpened);
}
action(item) {
if (item.actionOnClick) {
item.actionOnClick();
}
}
logoutAction() {
this.logout.emit(true);
}
closeSidebar() {
// TODO CHANGE THIS
// this.sideBarOpened = false;
// this.toggleSideBar.next(false);
}
}
HeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'app-header',
template: "<mat-toolbar class=\"headerComponent\" [ngStyle]=\"{'background-color': toolbarConfig.styles.backgroundColor}\">\r\n <button mat-icon-button (click)=\"openSideBar()\">\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n <ng-content class=\"headerComponent-logo\"></ng-content>\r\n <span class=\"headerComponent-spacer\"></span>\r\n <button mat-icon-button [matMenuTriggerFor]=\"notificationsMenu\" (click)=\"closeSidebar()\">\r\n <mat-icon class=\"material-icons-outlined\">notifications</mat-icon>\r\n </button>\r\n <mat-menu #notificationsMenu=\"matMenu\" xPosition=\"after\">\r\n <span class=\"headerComponent-notifications-title\">{{toolbarConfig.notificationsMenu.title}}</span>\r\n <hr>\r\n <a mat-menu-item *ngFor=\"let userItemMenu of toolbarConfig.notificationsMenu.items\"\r\n (click)=\"action(userItemMenu)\"\r\n [routerLink]=\"userItemMenu.routerLink\">\r\n <mat-icon class=\"material-icons-outlined\">{{userItemMenu.icon}}</mat-icon>\r\n <span>{{userItemMenu.title}}</span>\r\n </a>\r\n </mat-menu>\r\n <button mat-icon-button [matMenuTriggerFor]=\"userMenu\" (click)=\"closeSidebar()\">\r\n <mat-icon class=\"material-icons-outlined\">account_circle</mat-icon>\r\n </button>\r\n <mat-menu #userMenu=\"matMenu\" xPosition=\"after\">\r\n <span class=\"headerComponent-userName\">{{toolbarConfig.userMenu.info.name}}</span>\r\n <a mat-menu-item *ngFor=\"let userItemMenu of toolbarConfig.userMenu.items\"\r\n (click)=\"action(userItemMenu)\"\r\n [routerLink]=\"userItemMenu.routerLink\">\r\n <mat-icon class=\"material-icons-outlined\">{{userItemMenu.icon}}</mat-icon>\r\n <span>{{userItemMenu.title}}</span>\r\n </a>\r\n <hr>\r\n <a mat-menu-item (click)=\"logoutAction()\">\r\n <mat-icon>logout</mat-icon>\r\n <span>{{toolbarConfig.userMenu.logoutTitle ? toolbarConfig.userMenu.logoutTitle : 'Logout'}}</span>\r\n </a>\r\n </mat-menu>\r\n</mat-toolbar>\r\n",
styles: [".headerComponent-spacer{flex:1 1 auto}.headerComponent-logo{height:40px;margin-left:16px}.headerComponent-userName{font-weight:500;margin:0 16px}.headerComponent-notifications-title{font-size:1.143rem;font-weight:500;margin:0 64px}"]
},] }
];
HeaderComponent.ctorParameters = () => [];
HeaderComponent.propDecorators = {
toggleSideBar: [{ type: Output }],
logout: [{ type: Output }],
toolbarConfig: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvdXJiaXNvZnQtbWFpbi1zdHJ1Y3R1cmUvY29tcG9uZW50cy9oZWFkZXIvaGVhZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFVLE1BQU0sRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBUTdFLE1BQU0sT0FBTyxlQUFlO0lBTzFCO1FBTEEsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQ2xDLFdBQU0sR0FBMEIsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUV0RSxrQkFBYSxHQUFHLEtBQUssQ0FBQztJQUd0QixDQUFDO0lBRUQsUUFBUTtJQUNSLENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ3pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRU0sTUFBTSxDQUFDLElBQXdCO1FBQ3BDLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN0QixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7U0FDdEI7SUFDSCxDQUFDO0lBRU0sWUFBWTtRQUNqQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBRU0sWUFBWTtRQUNqQixtQkFBbUI7UUFDbkIsOEJBQThCO1FBQzlCLGtDQUFrQztJQUNwQyxDQUFDOzs7WUFyQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0Qiw4N0RBQXNDOzthQUV2Qzs7Ozs0QkFFRSxNQUFNO3FCQUVOLE1BQU07NEJBQ04sS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBPbkluaXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7VXJiaXNvZnRBY3Rpb25JdGVtLCBVcmJpc29mdFRvb2xiYXJDb25maWd9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvdXJiaXNvZnQtbWFpbi1zdHJ1Y3R1cmUtY29uZmlnLmludGVyZmFjZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1oZWFkZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2hlYWRlci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIZWFkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBPdXRwdXQoKVxyXG4gIHRvZ2dsZVNpZGVCYXIgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcbiAgQE91dHB1dCgpIGxvZ291dDogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG4gIEBJbnB1dCgpIHRvb2xiYXJDb25maWc6IFVyYmlzb2Z0VG9vbGJhckNvbmZpZztcclxuICBzaWRlQmFyT3BlbmVkID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgb3BlblNpZGVCYXIoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNpZGVCYXJPcGVuZWQgPSAhdGhpcy5zaWRlQmFyT3BlbmVkO1xyXG4gICAgdGhpcy50b2dnbGVTaWRlQmFyLm5leHQodGhpcy5zaWRlQmFyT3BlbmVkKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBhY3Rpb24oaXRlbTogVXJiaXNvZnRBY3Rpb25JdGVtKTogdm9pZCB7XHJcbiAgICBpZiAoaXRlbS5hY3Rpb25PbkNsaWNrKSB7XHJcbiAgICAgIGl0ZW0uYWN0aW9uT25DbGljaygpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHVibGljIGxvZ291dEFjdGlvbigpOiB2b2lkIHtcclxuICAgIHRoaXMubG9nb3V0LmVtaXQodHJ1ZSk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgY2xvc2VTaWRlYmFyKCk6IHZvaWQge1xyXG4gICAgLy8gVE9ETyBDSEFOR0UgVEhJU1xyXG4gICAgLy8gdGhpcy5zaWRlQmFyT3BlbmVkID0gZmFsc2U7XHJcbiAgICAvLyB0aGlzLnRvZ2dsZVNpZGVCYXIubmV4dChmYWxzZSk7XHJcbiAgfVxyXG59XHJcbiJdfQ==