sidenav-menu-arrows
Version:
Material Multi-Level Menu for Angular Projects.
2 lines (1 loc) • 14.4 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgMaterialMultilevelMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","name":"ɵa"}],"declarations":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"}],"exports":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"MultilevelNodes":{"__symbolic":"interface"},"Configuration":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRippleModule","line":12,"character":4}],"declarations":[],"exports":[{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRippleModule","line":18,"character":4}]}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"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}"]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"configuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"selectedLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":31,"character":20},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"updateNodeByURL":[{"__symbolic":"method"}],"checkValidData":[{"__symbolic":"method"}],"detectInvalidConfig":[{"__symbolic":"method"}],"getClassName":[{"__symbolic":"method"}],"getGlobalStyle":[{"__symbolic":"method"}],"isRtlLayout":[{"__symbolic":"method"}],"selectedListItem":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"generateId":[{"__symbolic":"method"}],"addRandomId":[{"__symbolic":"method"}],"recursiveCheckId":[{"__symbolic":"method"}],"recursiveCheckLink":[{"__symbolic":"method"}],"getMatchedObjectByUrl":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"ng-list-item","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":14,"character":4},"arguments":["slideInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":15,"character":6},"arguments":["in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":15,"character":18},"arguments":[{"height":"*","opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":16,"character":6},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":17,"character":8},"arguments":[{"height":"*","opacity":0.2}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"group","line":18,"character":8},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":19,"character":10},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":19,"character":23},"arguments":[{"height":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":20,"character":10},"arguments":["200ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":20,"character":36},"arguments":[{"opacity":0}]}]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":23,"character":6},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":24,"character":8},"arguments":[{"height":"0","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"group","line":25,"character":8},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":26,"character":10},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":26,"character":23},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":27,"character":10},"arguments":["400ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":27,"character":36},"arguments":[{"opacity":1}]}]}]]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":31,"character":4},"arguments":["isExpandedLTR",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":32,"character":6},"arguments":["no",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":32,"character":18},"arguments":[{"transform":"rotate(0deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":33,"character":6},"arguments":["yes",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":33,"character":19},"arguments":[{"transform":"rotate(-180deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":35,"character":6},"arguments":["no => yes",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":36,"character":8},"arguments":[200]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":38,"character":6},"arguments":["yes => no",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":39,"character":8},"arguments":[200]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":42,"character":4},"arguments":["isExpandedRTL",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":43,"character":6},"arguments":["no",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":43,"character":18},"arguments":[{"transform":"rotate(0deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":44,"character":6},"arguments":["yes",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":44,"character":19},"arguments":[{"transform":"rotate(180deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":46,"character":6},"arguments":["no => yes",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":47,"character":8},"arguments":[200]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":49,"character":6},"arguments":["yes => no",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":50,"character":8},"arguments":[200]}]}]]}],"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","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}"]}]}],"members":{"node":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"level":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"selectedNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"nodeConfiguration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":68,"character":20},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnChanges":[{"__symbolic":"method"}],"setSelectedClass":[{"__symbolic":"method"}],"getPaddingAtStart":[{"__symbolic":"method"}],"getListStyle":[{"__symbolic":"method"}],"getListIcon":[{"__symbolic":"method"}],"hasItems":[{"__symbolic":"method"}],"isRtlLayout":[{"__symbolic":"method"}],"setClasses":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"selectedListItem":[{"__symbolic":"method"}]}}},"origins":{"NgMaterialMultilevelMenuModule":"./lib/ng-material-multilevel-menu.module","MultilevelNodes":"./lib/app.model","Configuration":"./lib/app.model","ɵa":"./lib/materials.module","ɵb":"./lib/ng-material-multilevel-menu.component","ɵc":"./lib/multilevel-menu.service","ɵd":"./lib/list-item/list-item.component"},"importAs":"ng-material-multilevel-menu"}