cnp-layout
Version:
A simple layout use angular material
2 lines • 6.41 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/router"),require("@angular/material/icon"),require("@angular/material/button"),require("@angular/material/menu"),require("@angular/material/core"),require("@angular/animations")):"function"==typeof define&&define.amd?define("cnp-layout",["exports","@angular/core","@angular/common","@angular/router","@angular/material/icon","@angular/material/button","@angular/material/menu","@angular/material/core","@angular/animations"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["cnp-layout"]={},t.ng.core,t.ng.common,t.ng.router,t.ng.material.icon,t.ng.material.button,t.ng.material.menu,t.ng.material.core,t.ng.animations)}(this,(function(t,e,n,i,a,r,o,u,l){"use strict";var m=function(){function t(){this.hideMenu=new e.EventEmitter}return t.prototype.itemClick=function(t,e,n){e.disabled?t.preventDefault():(this.activeIndex=this.activeIndex===n?null:n,e.command&&e.command({originalEvent:t,item:e}),(e.items||!e.url&&!e.routerLink)&&t.preventDefault(),e.items||this.hideMenu.emit())},t.prototype.isActive=function(t){return this.activeIndex===t},Object.defineProperty(t.prototype,"parentActive",{get:function(){return this.isParentActive},set:function(t){this.isParentActive=t,this.isParentActive||(this.activeIndex=null)},enumerable:!1,configurable:!0}),t}();m.decorators=[{type:e.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 []="isActive(i) ? \'visibleAnimated\' : \'hiddenAnimated\'"></ul>\n </li>\n</ng-template>',animations:[l.trigger("children",[l.state("hiddenAnimated",l.style({height:"0px"})),l.state("visibleAnimated",l.style({height:"*"})),l.state("visible",l.style({height:"*","z-index":100})),l.state("hidden",l.style({height:"0px","z-index":"*"})),l.transition("visibleAnimated => hiddenAnimated",l.animate("400ms cubic-bezier(0.86, 0, 0.07, 1)")),l.transition("hiddenAnimated => visibleAnimated",l.animate("400ms cubic-bezier(0.86, 0, 0.07, 1)"))])],changeDetection:e.ChangeDetectionStrategy.OnPush}]}],m.ctorParameters=function(){return[]},m.propDecorators={item:[{type:e.Input}],root:[{type:e.Input}],visible:[{type:e.Input}],hideMenu:[{type:e.Output}],parentActive:[{type:e.Input}]};var c=function(){function t(){this.leftMenu=[],this.username="",this.doToggleMenu=new e.EventEmitter}return t.prototype.onMenuButtonClick=function(t){this.doToggleMenu.emit(t)},t.prototype.rightMenuClick=function(t,e){e.command&&e.command({originalEvent:t,item:e})},t.prototype.leftMenuClick=function(t,e){e.command&&e.command({originalEvent:t,item:e}),e.routerLink||t.preventDefault()},t}();c.decorators=[{type:e.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:e.ChangeDetectionStrategy.OnPush}]}],c.propDecorators={leftMenu:[{type:e.Input}],langMenu:[{type:e.Input}],userMenu:[{type:e.Input}],username:[{type:e.Input}],isShowMenuButton:[{type:e.Input}],doToggleMenu:[{type:e.Output}]};var s=function(){};s.decorators=[{type:e.NgModule,args:[{declarations:[m,c],imports:[n.CommonModule,i.RouterModule,a.MatIconModule,r.MatButtonModule,o.MatMenuModule,u.MatRippleModule],exports:[m,c]}]}];var g=function(){},p=function(){},d=function(){},h=function(){};t.CnpLayoutModule=s,t.MenuComponent=m,t.MenuItem=g,t.TopBarLangMenu=d,t.TopBarMenuItem=p,t.TopBarUserMenu=h,t.TopbarComponent=c,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=cnp-layout.umd.min.js.map