cnp-layout
Version:
A simple layout use angular material
75 lines • 9.46 kB
JavaScript
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
export 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 }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vcHJvamVjdHMvY25wLWxheW91dC9zcmMvIiwic291cmNlcyI6WyJsaWIvbWVudS9tZW51LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLHVCQUF1QixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hHLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUE4QmpGLE1BQU0sT0FBTyxhQUFhO0lBU3hCO1FBSlUsYUFBUSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO0lBSTVDLENBQUM7SUFFaEIsU0FBUyxDQUFDLEtBQVksRUFBRSxJQUFjLEVBQUUsS0FBYTtRQUNuRCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLE9BQU87U0FDUjtRQUNELDZEQUE2RDtRQUM3RCxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7UUFDL0Qsa0JBQWtCO1FBQ2xCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDO1NBQzlDO1FBQ0Qsc0JBQXNCO1FBQ3RCLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNqRCxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7U0FDeEI7UUFDRCxZQUFZO1FBQ1osSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDZixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFhO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFdBQVcsS0FBSyxLQUFLLENBQUM7SUFDcEMsQ0FBQztJQUVELElBQWEsWUFBWTtRQUN2QixPQUFPLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDN0IsQ0FBQztJQUVELElBQUksWUFBWSxDQUFDLEdBQVk7UUFDM0IsSUFBSSxDQUFDLGNBQWMsR0FBRyxHQUFHLENBQUM7UUFFMUIsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDeEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7U0FDekI7SUFDSCxDQUFDOzs7WUF4RUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0Qix1eUNBQW9DO2dCQUVwQyxVQUFVLEVBQUU7b0JBQ1YsT0FBTyxDQUFDLFVBQVUsRUFBRTt3QkFDbEIsS0FBSyxDQUFDLGdCQUFnQixFQUFFLEtBQUssQ0FBQzs0QkFDNUIsTUFBTSxFQUFFLEtBQUs7eUJBQ2QsQ0FBQyxDQUFDO3dCQUNILEtBQUssQ0FBQyxpQkFBaUIsRUFBRSxLQUFLLENBQUM7NEJBQzdCLE1BQU0sRUFBRSxHQUFHO3lCQUNaLENBQUMsQ0FBQzt3QkFDSCxLQUFLLENBQUMsU0FBUyxFQUFFLEtBQUssQ0FBQzs0QkFDckIsTUFBTSxFQUFFLEdBQUc7NEJBQ1gsU0FBUyxFQUFFLEdBQUc7eUJBQ2YsQ0FBQyxDQUFDO3dCQUNILEtBQUssQ0FBQyxRQUFRLEVBQUUsS0FBSyxDQUFDOzRCQUNwQixNQUFNLEVBQUUsS0FBSzs0QkFDYixTQUFTLEVBQUUsR0FBRzt5QkFDZixDQUFDLENBQUM7d0JBQ0gsVUFBVSxDQUFDLG1DQUFtQyxFQUFFLE9BQU8sQ0FBQyxzQ0FBc0MsQ0FBQyxDQUFDO3dCQUNoRyxVQUFVLENBQUMsbUNBQW1DLEVBQUUsT0FBTyxDQUFDLHNDQUFzQyxDQUFDLENBQUM7cUJBQ2pHLENBQUM7aUJBQ0g7Z0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07YUFDaEQ7Ozs7bUJBR0UsS0FBSzttQkFDTCxLQUFLO3NCQUNMLEtBQUs7dUJBQ0wsTUFBTTsyQkErQk4sS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdHJpZ2dlciwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCBhbmltYXRlIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbmltcG9ydCB7IE1lbnVJdGVtIH0gZnJvbSAnLi4vbW9kZWwvbWVudS1pdGVtJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnW2NucC1tZW51XScsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVzOiBbXSxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2NoaWxkcmVuJywgW1xuICAgICAgc3RhdGUoJ2hpZGRlbkFuaW1hdGVkJywgc3R5bGUoe1xuICAgICAgICBoZWlnaHQ6ICcwcHgnXG4gICAgICB9KSksXG4gICAgICBzdGF0ZSgndmlzaWJsZUFuaW1hdGVkJywgc3R5bGUoe1xuICAgICAgICBoZWlnaHQ6ICcqJ1xuICAgICAgfSkpLFxuICAgICAgc3RhdGUoJ3Zpc2libGUnLCBzdHlsZSh7XG4gICAgICAgIGhlaWdodDogJyonLFxuICAgICAgICAnei1pbmRleCc6IDEwMFxuICAgICAgfSkpLFxuICAgICAgc3RhdGUoJ2hpZGRlbicsIHN0eWxlKHtcbiAgICAgICAgaGVpZ2h0OiAnMHB4JyxcbiAgICAgICAgJ3otaW5kZXgnOiAnKidcbiAgICAgIH0pKSxcbiAgICAgIHRyYW5zaXRpb24oJ3Zpc2libGVBbmltYXRlZCA9PiBoaWRkZW5BbmltYXRlZCcsIGFuaW1hdGUoJzQwMG1zIGN1YmljLWJlemllcigwLjg2LCAwLCAwLjA3LCAxKScpKSxcbiAgICAgIHRyYW5zaXRpb24oJ2hpZGRlbkFuaW1hdGVkID0+IHZpc2libGVBbmltYXRlZCcsIGFuaW1hdGUoJzQwMG1zIGN1YmljLWJlemllcigwLjg2LCAwLCAwLjA3LCAxKScpKVxuICAgIF0pXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIE1lbnVDb21wb25lbnQge1xuXG4gIEBJbnB1dCgpIGl0ZW06IGFueTsgLy8gdXNlIE1lbnVJdGVtW11cbiAgQElucHV0KCkgcm9vdDogYm9vbGVhbjtcbiAgQElucHV0KCkgdmlzaWJsZTogYm9vbGVhbjtcbiAgQE91dHB1dCgpIGhpZGVNZW51OiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgaXNQYXJlbnRBY3RpdmU6IGJvb2xlYW47XG4gIGFjdGl2ZUluZGV4OiBudW1iZXI7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIGl0ZW1DbGljayhldmVudDogRXZlbnQsIGl0ZW06IE1lbnVJdGVtLCBpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgaWYgKGl0ZW0uZGlzYWJsZWQpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIC8vIGFjdGl2YXRlIGN1cnJlbnQgaXRlbSBhbmQgZGVhY3RpdmF0ZSBhY3RpdmUgc2libGluZyBpZiBhbnlcbiAgICB0aGlzLmFjdGl2ZUluZGV4ID0gKHRoaXMuYWN0aXZlSW5kZXggPT09IGluZGV4KSA/IG51bGwgOiBpbmRleDtcbiAgICAvLyBleGVjdXRlIGNvbW1hbmRcbiAgICBpZiAoaXRlbS5jb21tYW5kKSB7XG4gICAgICBpdGVtLmNvbW1hbmQoeyBvcmlnaW5hbEV2ZW50OiBldmVudCwgaXRlbSB9KTtcbiAgICB9XG4gICAgLy8gcHJldmVudCBoYXNoIGNoYW5nZVxuICAgIGlmIChpdGVtLml0ZW1zIHx8ICghaXRlbS51cmwgJiYgIWl0ZW0ucm91dGVyTGluaykpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgfVxuICAgIC8vIGhpZGUgbWVudVxuICAgIGlmICghaXRlbS5pdGVtcykge1xuICAgICAgdGhpcy5oaWRlTWVudS5lbWl0KCk7XG4gICAgfVxuICB9XG5cbiAgaXNBY3RpdmUoaW5kZXg6IG51bWJlcik6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmFjdGl2ZUluZGV4ID09PSBpbmRleDtcbiAgfVxuXG4gIEBJbnB1dCgpIGdldCBwYXJlbnRBY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuaXNQYXJlbnRBY3RpdmU7XG4gIH1cblxuICBzZXQgcGFyZW50QWN0aXZlKHZhbDogYm9vbGVhbikge1xuICAgIHRoaXMuaXNQYXJlbnRBY3RpdmUgPSB2YWw7XG5cbiAgICBpZiAoIXRoaXMuaXNQYXJlbnRBY3RpdmUpIHtcbiAgICAgIHRoaXMuYWN0aXZlSW5kZXggPSBudWxsO1xuICAgIH1cbiAgfVxuXG59XG4iXX0=