cnp-layout
Version:
A simple layout use angular material
186 lines (176 loc) • 10.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common'), require('/router'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/menu'), require('@angular/material/core'), require('@angular/animations')) :
typeof define === 'function' && define.amd ? define('cnp-layout', ['exports', '/core', '@angular/common', '/router', '@angular/material/icon', '@angular/material/button', '@angular/material/menu', '@angular/material/core', '@angular/animations'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['cnp-layout'] = {}, global.ng.core, global.ng.common, global.ng.router, global.ng.material.icon, global.ng.material.button, global.ng.material.menu, global.ng.material.core, global.ng.animations));
}(this, (function (exports, core, common, router, icon, button, menu, core$1, animations) { 'use strict';
var MenuComponent = /** @class */ (function () {
function MenuComponent() {
this.hideMenu = new core.EventEmitter();
}
MenuComponent.prototype.itemClick = function (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: item });
}
// prevent hash change
if (item.items || (!item.url && !item.routerLink)) {
event.preventDefault();
}
// hide menu
if (!item.items) {
this.hideMenu.emit();
}
};
MenuComponent.prototype.isActive = function (index) {
return this.activeIndex === index;
};
Object.defineProperty(MenuComponent.prototype, "parentActive", {
get: function () {
return this.isParentActive;
},
set: function (val) {
this.isParentActive = val;
if (!this.isParentActive) {
this.activeIndex = null;
}
},
enumerable: false,
configurable: true
});
return MenuComponent;
}());
MenuComponent.decorators = [
{ type: core.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: [
animations.trigger('children', [
animations.state('hiddenAnimated', animations.style({
height: '0px'
})),
animations.state('visibleAnimated', animations.style({
height: '*'
})),
animations.state('visible', animations.style({
height: '*',
'z-index': 100
})),
animations.state('hidden', animations.style({
height: '0px',
'z-index': '*'
})),
animations.transition('visibleAnimated => hiddenAnimated', animations.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
animations.transition('hiddenAnimated => visibleAnimated', animations.animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
])
],
changeDetection: core.ChangeDetectionStrategy.OnPush
},] }
];
MenuComponent.ctorParameters = function () { return []; };
MenuComponent.propDecorators = {
item: [{ type: core.Input }],
root: [{ type: core.Input }],
visible: [{ type: core.Input }],
hideMenu: [{ type: core.Output }],
parentActive: [{ type: core.Input }]
};
var TopbarComponent = /** @class */ (function () {
function TopbarComponent() {
this.leftMenu = [];
this.username = '';
this.doToggleMenu = new core.EventEmitter();
}
TopbarComponent.prototype.onMenuButtonClick = function (evt) {
this.doToggleMenu.emit(evt);
};
TopbarComponent.prototype.rightMenuClick = function (event, item) {
if (item.command) {
item.command({ originalEvent: event, item: item });
}
};
TopbarComponent.prototype.leftMenuClick = function (event, item) {
if (item.command) {
item.command({ originalEvent: event, item: item });
}
if (!item.routerLink) {
event.preventDefault();
}
};
return TopbarComponent;
}());
TopbarComponent.decorators = [
{ type: core.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: core.ChangeDetectionStrategy.OnPush
},] }
];
TopbarComponent.propDecorators = {
leftMenu: [{ type: core.Input }],
langMenu: [{ type: core.Input }],
userMenu: [{ type: core.Input }],
username: [{ type: core.Input }],
isShowMenuButton: [{ type: core.Input }],
doToggleMenu: [{ type: core.Output }]
};
var CnpLayoutModule = /** @class */ (function () {
function CnpLayoutModule() {
}
return CnpLayoutModule;
}());
CnpLayoutModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [MenuComponent, TopbarComponent],
imports: [
common.CommonModule,
router.RouterModule,
icon.MatIconModule,
button.MatButtonModule,
menu.MatMenuModule,
core$1.MatRippleModule
],
exports: [MenuComponent, TopbarComponent]
},] }
];
var MenuItem = /** @class */ (function () {
function MenuItem() {
}
return MenuItem;
}());
var TopBarMenuItem = /** @class */ (function () {
function TopBarMenuItem() {
}
return TopBarMenuItem;
}());
var TopBarLangMenu = /** @class */ (function () {
function TopBarLangMenu() {
}
return TopBarLangMenu;
}());
var TopBarUserMenu = /** @class */ (function () {
function TopBarUserMenu() {
}
return TopBarUserMenu;
}());
/*
* Public API Surface of cnp-layout
*/
/**
* Generated bundle index. Do not edit.
*/
exports.CnpLayoutModule = CnpLayoutModule;
exports.MenuComponent = MenuComponent;
exports.MenuItem = MenuItem;
exports.TopBarLangMenu = TopBarLangMenu;
exports.TopBarMenuItem = TopBarMenuItem;
exports.TopBarUserMenu = TopBarUserMenu;
exports.TopbarComponent = TopbarComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=cnp-layout.umd.js.map