cnp-layout
Version:
A simple layout use angular material
158 lines (150 loc) • 7.94 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatRippleModule } from '@angular/material/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
class MenuComponent {
constructor() {
this.hideMenu = new EventEmitter();
}
itemClick(event, item, index) {
if (item.disabled) {
event.preventDefault();
return;
}
// activate current item and deactivate active sibling if any
this.activeIndex = (this.activeIndex === index) ? null : index;
// execute command
if (item.command) {
item.command({ originalEvent: event, item });
}
// prevent hash change
if (item.items || (!item.url && !item.routerLink)) {
event.preventDefault();
}
// hide menu
if (!item.items) {
this.hideMenu.emit();
}
}
isActive(index) {
return this.activeIndex === index;
}
get parentActive() {
return this.isParentActive;
}
set parentActive(val) {
this.isParentActive = val;
if (!this.isParentActive) {
this.activeIndex = null;
}
}
}
MenuComponent.decorators = [
{ type: Component, args: [{
selector: '[cnp-menu]',
template: "<ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"(root ? item : item.items)\">\n <li [ngClass]=\"{'active-menuitem': isActive(i)}\">\n <a matRipple href=\"#\" (click)=\"itemClick($event,child,i)\" *ngIf=\"!child.routerLink\"\n [attr.tabindex]=\"!visible ? '-1' : null\" [attr.target]=\"child.target\">\n <mat-icon>{{child.icon}}</mat-icon>\n <span>{{child.label}}</span>\n <mat-icon *ngIf=\"child.items\" class=\"layout-submenu-toggler\">keyboard_arrow_right</mat-icon>\n </a>\n\n <a matRipple (click)=\"itemClick($event,child,i)\" *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\"\n routerLinkActive=\"active-menuitem-routerlink\" [routerLinkActiveOptions]=\"{exact: true}\"\n [attr.tabindex]=\"!visible ? '-1' : null\" [attr.target]=\"child.target\">\n <mat-icon>{{child.icon}}</mat-icon>\n <span>{{child.label}}</span>\n <mat-icon *ngIf=\"child.items\" class=\"layout-submenu-toggler\">keyboard_arrow_right</mat-icon>\n </a>\n <ul cnp-menu [item]=\"child\" *ngIf=\"child.items\" [visible]=\"isActive(i)\" [parentActive]=\"isActive(i)\"\n [@children]=\"isActive(i) ? 'visibleAnimated' : 'hiddenAnimated'\"></ul>\n </li>\n</ng-template>",
animations: [
trigger('children', [
state('hiddenAnimated', style({
height: '0px'
})),
state('visibleAnimated', style({
height: '*'
})),
state('visible', style({
height: '*',
'z-index': 100
})),
state('hidden', style({
height: '0px',
'z-index': '*'
})),
transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
])
],
changeDetection: ChangeDetectionStrategy.OnPush
},] }
];
MenuComponent.ctorParameters = () => [];
MenuComponent.propDecorators = {
item: [{ type: Input }],
root: [{ type: Input }],
visible: [{ type: Input }],
hideMenu: [{ type: Output }],
parentActive: [{ type: Input }]
};
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 }]
};
class CnpLayoutModule {
}
CnpLayoutModule.decorators = [
{ type: NgModule, args: [{
declarations: [MenuComponent, TopbarComponent],
imports: [
CommonModule,
RouterModule,
MatIconModule,
MatButtonModule,
MatMenuModule,
MatRippleModule
],
exports: [MenuComponent, TopbarComponent]
},] }
];
class MenuItem {
}
class TopBarMenuItem {
}
class TopBarLangMenu {
}
class TopBarUserMenu {
}
/*
* Public API Surface of cnp-layout
*/
/**
* Generated bundle index. Do not edit.
*/
export { CnpLayoutModule, MenuComponent, MenuItem, TopBarLangMenu, TopBarMenuItem, TopBarUserMenu, TopbarComponent };
//# sourceMappingURL=cnp-layout.js.map