sidenav-menu-arrows
Version:
Material Multi-Level Menu for Angular Projects.
3 lines (2 loc) • 12.7 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/material"),require("@angular/core"),require("@angular/router"),require("@angular/animations")):"function"==typeof define&&define.amd?define("ng-material-multilevel-menu",["exports","@angular/common","@angular/material","@angular/core","@angular/router","@angular/animations"],t):t(e["ng-material-multilevel-menu"]={},e.ng.common,e.ng.material,e.ng.core,e.ng.router,e.ng.animations)}(this,function(e,t,n,i,o,r){"use strict";var l=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[n.MatIconModule,n.MatListModule,n.MatRippleModule],declarations:[],exports:[n.MatIconModule,n.MatListModule,n.MatRippleModule]}]}],e}(),a=function(){function e(){}return e.prototype.generateId=function(){for(var e="",t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",n=0;n<20;n++)e+=t.charAt(Math.floor(Math.random()*t.length));return e},e.prototype.addRandomId=function(e){var t=this;e.forEach(function(e){e.id=t.generateId(),e.items!==undefined&&t.addRandomId(e.items)})},e.prototype.recursiveCheckId=function(e,t){var n=this;return e.id===t||(e.items!==undefined?e.items.some(function(e){return n.recursiveCheckId(e,t)}):void 0)},e.prototype.recursiveCheckLink=function(e,t){for(var n=0;n<e.length;n++){var i=e[n];for(var o in i)i.hasOwnProperty(o)&&(encodeURI(i.link)===t?this.foundLinkObject=i:i.items!==undefined&&this.recursiveCheckLink(i.items,t))}},e.prototype.getMatchedObjectByUrl=function(e,t){return this.recursiveCheckLink(e,t),this.foundLinkObject},e.decorators=[{type:i.Injectable,args:[{providedIn:"root"}]}],e.ngInjectableDef=i.defineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),s="amml-container",d="amml-item",c="selected-amml-item",u="active-amml-item",g="#1976d2",f="transparent",h="rgba(0,0,0,.87)",m="Invalid data for material Multilevel List Component",p=function(){function e(e,t){this.router=e,this.multilevelMenuService=t,this.configuration=null,this.selectedItem=new i.EventEmitter,this.selectedLabel=new i.EventEmitter,this.nodeConfig={paddingAtStart:!0,listBackgroundColor:null,fontColor:null,selectedListFontColor:null,interfaceWithRoute:null,collapseOnSelect:null,highlightOnSelect:!1,rtlLayout:!1},this.isInvalidConfig=!0}return e.prototype.ngOnChanges=function(){this.checkValidData(),this.detectInvalidConfig()},e.prototype.ngOnInit=function(){var t=this;null!==this.configuration&&this.configuration!==undefined&&""!==this.configuration&&null!==this.configuration.interfaceWithRoute&&this.configuration.interfaceWithRoute&&(this.router.events.subscribe(function(e){e instanceof o.NavigationEnd&&t.updateNodeByURL(e.url)}),this.updateNodeByURL(this.router.url))},e.prototype.updateNodeByURL=function(e){var t=this.multilevelMenuService.getMatchedObjectByUrl(this.items,e);t!==undefined&&t.link!==undefined&&null!==t.link&&""!==t.link&&(this.currentNode=t,this.selectedListItem(t))},e.prototype.checkValidData=function(){0===this.items.length?console.warn(m):(this.items=this.items.filter(function(e){return!e.hidden}),this.multilevelMenuService.addRandomId(this.items))},e.prototype.detectInvalidConfig=function(){if(null===this.configuration||this.configuration===undefined||""===this.configuration)this.isInvalidConfig=!0;else{this.isInvalidConfig=!1;var e=this.configuration;e.paddingAtStart!==undefined&&null!==e.paddingAtStart&&"boolean"==typeof e.paddingAtStart&&(this.nodeConfig.paddingAtStart=e.paddingAtStart),""!==e.listBackgroundColor&&null!==e.listBackgroundColor&&e.listBackgroundColor!==undefined&&(this.nodeConfig.listBackgroundColor=e.listBackgroundColor),""!==e.fontColor&&null!==e.fontColor&&e.fontColor!==undefined&&(this.nodeConfig.fontColor=e.fontColor),""!==e.selectedListFontColor&&null!==e.selectedListFontColor&&e.selectedListFontColor!==undefined&&(this.nodeConfig.selectedListFontColor=e.selectedListFontColor),null!==e.interfaceWithRoute&&e.interfaceWithRoute!==undefined&&"boolean"==typeof e.interfaceWithRoute&&(this.nodeConfig.interfaceWithRoute=e.interfaceWithRoute),null!==e.collapseOnSelect&&e.collapseOnSelect!==undefined&&"boolean"==typeof e.collapseOnSelect&&(this.nodeConfig.collapseOnSelect=e.collapseOnSelect),null!==e.highlightOnSelect&&e.highlightOnSelect!==undefined&&"boolean"==typeof e.highlightOnSelect&&(this.nodeConfig.highlightOnSelect=e.highlightOnSelect),null!==e.rtlLayout&&e.rtlLayout!==undefined&&"boolean"==typeof e.rtlLayout&&(this.nodeConfig.rtlLayout=e.rtlLayout)}},e.prototype.getClassName=function(){return this.isInvalidConfig?s:""!==this.configuration.classname&&null!==this.configuration.classname&&this.configuration.classname!==undefined?s+" "+this.configuration.classname:s},e.prototype.getGlobalStyle=function(){if(!this.isInvalidConfig){var e={background:null};return""!==this.configuration.backgroundColor&&null!==this.configuration.backgroundColor&&this.configuration.backgroundColor!==undefined&&(e.background=this.configuration.backgroundColor),e}},e.prototype.isRtlLayout=function(){return this.nodeConfig.rtlLayout},e.prototype.selectedListItem=function(e){(this.currentNode=e).items!==undefined||e.onSelected&&"function"==typeof e.onSelected?this.selectedLabel.emit(e):this.selectedItem.emit(e)},e.decorators=[{type:i.Component,args:[{selector:"ng-material-multilevel-menu",template:"<div [ngClass]=\"getClassName()\" [ngStyle]=\"getGlobalStyle()\" *ngIf='items.length !== 0' [dir]=\"isRtlLayout() ? 'rtl' : 'ltr'\">\r\n <mat-list>\r\n <ng-list-item\r\n *ngFor=\"let node of items\"\r\n [nodeConfiguration]='nodeConfig'\r\n [node]='node'\r\n [selectedNode]='currentNode'\r\n (selectedItem)=\"selectedListItem($event)\r\n \">\r\n </ng-list-item>\r\n </mat-list>\r\n</div>",styles:[".amml-item{line-height:48px;display:flex;justify-content:space-between;position:relative}.anml-data{width:100%;text-transform:capitalize;display:flex;justify-content:flex-start}.amml-icon-fa{font-size:20px}.amml-icon{line-height:48px}.active{color:#1976d2}div[dir=ltr] .amml-icon{margin-right:15px}div[dir=ltr] .amml-submenu{margin-left:16px}div[dir=rtl] .amml-icon{margin-left:15px}div[dir=rtl] .amml-submenu{margin-right:16px}"]}]}],e.ctorParameters=function(){return[{type:o.Router},{type:a}]},e.propDecorators={items:[{type:i.Input}],configuration:[{type:i.Input}],selectedItem:[{type:i.Output}],selectedLabel:[{type:i.Output}]},e}(),y=function(){function e(e,t){var n;this.router=e,this.multilevelMenuService=t,this.level=1,this.nodeConfiguration=null,this.selectedItem=new i.EventEmitter,this.isSelected=!1,this.expanded=!1,this.firstInitializer=!1,this.selectedListClasses=((n={})[d]=!0,n[c]=!1,n[u]=!1,n)}return e.prototype.ngOnChanges=function(){this.nodeChildren=this.node&&this.node.items?this.node.items.filter(function(e){return!e.hidden}):[],this.selectedNode!==undefined&&null!==this.selectedNode&&this.setSelectedClass(this.multilevelMenuService.recursiveCheckId(this.node,this.selectedNode.id))},e.prototype.setSelectedClass=function(e){var t;e?(this.firstInitializer||(this.expanded=!0),this.isSelected=!(!this.nodeConfiguration.highlightOnSelect&&this.selectedNode.items!==undefined)):(this.isSelected=!1,this.nodeConfiguration.collapseOnSelect&&(this.expanded=!1)),this.selectedListClasses=((t={})[d]=!0,t[c]=this.isSelected,t[u]=this.selectedNode.id===this.node.id,t),this.setClasses()},e.prototype.getPaddingAtStart=function(){return!!this.nodeConfiguration.paddingAtStart},e.prototype.getListStyle=function(){var e={background:f,color:h};return null!==this.nodeConfiguration.listBackgroundColor&&(e.background=this.nodeConfiguration.listBackgroundColor),this.isSelected?null!==this.nodeConfiguration.selectedListFontColor?e.color=this.nodeConfiguration.selectedListFontColor:e.color=g:null!==this.nodeConfiguration.fontColor&&(e.color=this.nodeConfiguration.fontColor),e},e.prototype.getListIcon=function(e){return null!==e.icon&&e.icon!==undefined&&""!==e.icon?"icon":null!==e.faIcon&&e.faIcon!==undefined&&""!==e.faIcon?"faicon":null!==e.imageIcon&&e.imageIcon!==undefined&&""!==e.imageIcon?"imageicon":null!==e.svgIcon&&e.svgIcon!==undefined&&""!==e.svgIcon?"svgicon":""},e.prototype.hasItems=function(){return 0<this.nodeChildren.length},e.prototype.isRtlLayout=function(){return this.nodeConfiguration.rtlLayout},e.prototype.setClasses=function(){var e;this.classes=((e={})["level-"+this.level]=!0,e["amml-submenu"]=this.hasItems()&&this.getPaddingAtStart(),e)},e.prototype.expand=function(e){this.expanded=!this.expanded,this.firstInitializer=!0,this.setClasses(),null!==this.nodeConfiguration.interfaceWithRoute&&this.nodeConfiguration.interfaceWithRoute&&e.link!==undefined&&e.link?e.externalRedirect!==undefined&&e.externalRedirect?window.location.href=e.link:this.router.navigate([e.link]):e.onSelected&&"function"==typeof e.onSelected?(e.onSelected(e),this.selectedListItem(e)):(e.items===undefined||this.nodeConfiguration.collapseOnSelect)&&this.selectedListItem(e)},e.prototype.selectedListItem=function(e){this.selectedItem.emit(e)},e.decorators=[{type:i.Component,args:[{selector:"ng-list-item",template:'<mat-list-item matRipple [ngClass]="selectedListClasses" *ngIf="!node.hidden" (click)="expand(node)" title="{{node.label}}"\r\n [ngStyle]="getListStyle()">\r\n <div class="anml-data" [dir]="isRtlLayout() ? \'rtl\' : \'ltr\'">\r\n <div class="icon-container" [ngSwitch]="getListIcon(node)">\r\n <span *ngSwitchCase="\'faicon\'" class="amml-icon amml-icon-fa">\r\n <i [ngClass]="node.faIcon"></i>\r\n </span>\r\n <mat-icon *ngSwitchCase="\'icon\'" class="amml-icon">\r\n {{node.icon}}\r\n </mat-icon>\r\n <mat-icon *ngSwitchCase="\'svgicon\'" svgIcon="{{node.svgIcon}}" class="amml-icon amml-svg-icon">\r\n </mat-icon>\r\n <img matListAvatar *ngSwitchCase="\'imageicon\'" class="amml-icon" src="{{node.imageIcon}}" alt="{{node.label}}"/>\r\n </div>\r\n <span class="label">{{node.label}}</span>\r\n </div>\r\n <div class="amml-icon-arrow-container" *ngIf=\'hasItems()\'>\r\n <mat-icon *ngIf=\'!isRtlLayout()\' [@isExpandedLTR]="expanded ? \'yes\' : \'no\'">\r\n keyboard_arrow_down\r\n </mat-icon>\r\n <mat-icon *ngIf=\'isRtlLayout()\' [@isExpandedRTL]="expanded ? \'yes\' : \'no\'">\r\n keyboard_arrow_down\r\n </mat-icon>\r\n </div>\r\n</mat-list-item>\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<div *ngIf="hasItems() && expanded" [@slideInOut] [dir]="isRtlLayout() ? \'rtl\' : \'ltr\'" [ngClass]="classes">\r\n <ng-list-item *ngFor="let singleNode of nodeChildren"\r\n [nodeConfiguration]=\'nodeConfiguration\'\r\n [node]=\'singleNode\'\r\n [level]="level + 1"\r\n [selectedNode]=\'selectedNode\'\r\n (selectedItem)="selectedListItem($event)">\r\n </ng-list-item>\r\n</div>\r\n',animations:[r.trigger("slideInOut",[r.state("in",r.style({height:"*",opacity:0})),r.transition(":leave",[r.style({height:"*",opacity:.2}),r.group([r.animate(200,r.style({height:0})),r.animate("200ms ease-out",r.style({opacity:0}))])]),r.transition(":enter",[r.style({height:"0",opacity:0}),r.group([r.animate(200,r.style({height:"*"})),r.animate("400ms ease-out",r.style({opacity:1}))])])]),r.trigger("isExpandedLTR",[r.state("no",r.style({transform:"rotate(0deg)"})),r.state("yes",r.style({transform:"rotate(-180deg)"})),r.transition("no => yes",r.animate(200)),r.transition("yes => no",r.animate(200))]),r.trigger("isExpandedRTL",[r.state("no",r.style({transform:"rotate(0deg)"})),r.state("yes",r.style({transform:"rotate(180deg)"})),r.transition("no => yes",r.animate(200)),r.transition("yes => no",r.animate(200))])],styles:[".amml-item{line-height:48px;position:relative;cursor:pointer}.anml-data{width:100%;text-transform:capitalize;display:flex;justify-content:flex-start;height:48px}.amml-icon-fa{font-size:20px}.amml-icon,.label{line-height:48px}.amml-svg-icon{line-height:57px;width:22px;height:22px}.amml-icon-arrow-container{direction:ltr;display:flex;align-items:center}div[dir=ltr] .amml-icon{margin-right:16px}div[dir=ltr].amml-submenu,div[dir=rtl] .amml-icon{margin-left:16px}div[dir=rtl].amml-submenu{margin-right:16px}"]}]}],e.ctorParameters=function(){return[{type:o.Router},{type:a}]},e.propDecorators={node:[{type:i.Input}],level:[{type:i.Input}],selectedNode:[{type:i.Input}],nodeConfiguration:[{type:i.Input}],selectedItem:[{type:i.Output}]},e}(),v=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule,l],declarations:[p,y],exports:[p]}]}],e}();e.NgMaterialMultilevelMenuModule=v,e.ɵd=y,e.ɵa=l,e.ɵc=a,e.ɵb=p,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng-material-multilevel-menu.umd.min.js.map