angular-sidebar-menu/bundles/angular-sidebar-menu.umd.min.js

The sources for this package are in the [Angular Sidebar Menu](https://github.com/mledour/angular-sidebar-menu) repo. Please file issues and pull requests against that repo.

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/common"),require("@angular/router"),require("@angular/animations")):"function"==typeof define&&define.amd?define("angular-sidebar-menu",["exports","@angular/core","rxjs","rxjs/operators","@angular/common","@angular/router","@angular/animations"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["angular-sidebar-menu"]={},e.ng.core,e.rxjs,e.rxjs.operators,e.ng.common,e.ng.router,e.ng.animations)}(this,(function(e,n,t,i,o,s,r){"use strict";var a;(a=e.Modes||(e.Modes={})).EXPANDED="expanded",a.EXPANDABLE="expandable",a.MINI="mini";var m=function(){};m.decorators=[{type:n.Injectable}];var u=function(){this.openedNode=new t.Subject};u.decorators=[{type:n.Injectable}];var c=function(){function e(){this.role$=new t.BehaviorSubject(void 0),this.unAuthorizedVisibility$=new t.BehaviorSubject("hidden")}return Object.defineProperty(e.prototype,"role",{set:function(e){this.role$.next(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"unAuthorizedVisibility",{set:function(e){this.unAuthorizedVisibility$.next(e)},enumerable:!1,configurable:!0}),e.prototype.showItem$=function(e){return this.itemVisibilityBase$(e).pipe(i.map((function(e){return e.isAuthorized||!e.isAuthorized&&"hidden"!==e.unAuthorizedVisibility})))},e.prototype.disableItem$=function(e){return this.itemVisibilityBase$(e).pipe(i.map((function(e){return!e.isAuthorized&&"disabled"===e.unAuthorizedVisibility})))},e.prototype.itemVisibilityBase$=function(e){var n=this;return t.combineLatest([this.role$.pipe(i.map((function(t){return n.isAuthorized(t,e)}))),this.unAuthorizedVisibility$]).pipe(i.map((function(e){return{isAuthorized:e[0],unAuthorizedVisibility:e[1]}})))},e.prototype.isRole=function(e){return"string"==typeof e||"number"==typeof e},e.prototype.isAuthorized=function(e,n){return!this.isRole(e)||!n||0===n.length||n.includes(e)},e}();c.decorators=[{type:n.Injectable}];var l=function(){function e(){this._search=new t.Subject,this.search$=this._search.asObservable()}return Object.defineProperty(e.prototype,"search",{set:function(e){this._search.next(e)},enumerable:!1,configurable:!0}),e.prototype.filter=function(e,n){return!(!e||!n)&&!n.toLowerCase().includes(e.toLowerCase())},e}();l.decorators=[{type:n.Injectable}];var p=function(e,n){return n.id||e},d=function(){function n(n,t,i,o){this.anchorService=n,this.nodeService=t,this.searchService=i,this.roleService=o,this.mode=e.Modes.EXPANDED,this.modes=e.Modes,this.disableAnimations=!0,this.trackByItem=p}return Object.defineProperty(n.prototype,"_menu",{set:function(e){var n=this;this.disableAnimations=!0,this.menu=e,setTimeout((function(){n.disableAnimations=!1}))},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"iconClasses",{set:function(e){this.anchorService.iconClasses=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"toggleIconClasses",{set:function(e){this.nodeService.toggleIconClasses=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"role",{set:function(e){this.roleService.role=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"unAuthorizedVisibility",{set:function(e){this.roleService.unAuthorizedVisibility=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"search",{set:function(e){this.searchService.search=e},enumerable:!1,configurable:!0}),n}();d.decorators=[{type:n.Component,args:[{selector:"asm-angular-sidebar-menu",providers:[u,m,c,l],changeDetection:n.ChangeDetectionStrategy.OnPush,template:' <div class="asm-menu" [ngClass]="\'asm-menu--mode-\' + mode" [@.disabled]="disableAnimations">\n    <ng-content></ng-content>\n    <ul class="asm-menu__node">\n      <ng-container *ngFor="let item of menu; trackBy: trackByItem">\n        <li\n          asm-menu-item\n          class="asm-menu-item asm-menu-item--root"\n          *ngIf="roleService.showItem$(item.roles) | async"\n          [menuItem]="item"\n          [level]="0"\n        ></li>\n      </ng-container>\n    </ul>\n  </div>',styles:[":host{display:block;overflow:hidden}:host:hover{overflow:visible}:host ::ng-deep .asm-menu-item,:host ::ng-deep ul{margin:0;padding:0}:host ::ng-deep li{line-height:0}:host ::ng-deep .asm-menu-anchor__label,:host ::ng-deep .asm-menu-item__header,:host ::ng-deep .asm-menu-node__label{white-space:nowrap}:host ::ng-deep .asm-menu-node__label{display:none}:host ::ng-deep .asm-menu-node:not(.asm-menu-node--open)>.ng-trigger-openClose,:host ::ng-deep .asm-menu-node>.ng-trigger-openClose.ng-animating{overflow:hidden}:host ::ng-deep .asm-menu-item--filtered{display:none}:host ::ng-deep .asm-menu,:host ::ng-deep .asm-menu-node ul{list-style:none}:host ::ng-deep .asm-menu-anchor a{-webkit-user-select:none;align-items:center;cursor:pointer;display:flex;position:relative;text-decoration:none;user-select:none}:host ::ng-deep .asm-menu-item__header{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .asm-menu-node .asm-menu-item__header{margin-left:-6px}:host ::ng-deep .asm-menu-anchor__icon{width:20px}:host ::ng-deep .asm-menu-anchor__pull.asm-badges,:host ::ng-deep .asm-menu-anchor__pull.asm-toggle{position:absolute;right:10px}:host ::ng-deep .asm-menu-anchor__pull.asm-badges .asm-badges__badge,:host ::ng-deep .asm-menu-anchor__pull.asm-badges .asm-toggle__icon,:host ::ng-deep .asm-menu-anchor__pull.asm-toggle .asm-badges__badge,:host ::ng-deep .asm-menu-anchor__pull.asm-toggle .asm-toggle__icon{float:right;margin-left:4px;text-align:center;white-space:nowrap}:host ::ng-deep .asm-menu-anchor__pull.asm-badges .asm-toggle__icon,:host ::ng-deep .asm-menu-anchor__pull.asm-toggle .asm-toggle__icon{margin:0 4px 0 8px}:host ::ng-deep .asm-menu--mode-expandable:not(:hover),:host ::ng-deep .asm-menu--mode-mini{width:50px}:host ::ng-deep .asm-menu--mode-expandable:not(:hover)>ul>.asm-menu-item>.asm-menu-anchor .asm-menu-anchor__label,:host ::ng-deep .asm-menu--mode-expandable:not(:hover)>ul>.asm-menu-item>.asm-menu-anchor .asm-menu-anchor__pull,:host ::ng-deep .asm-menu--mode-expandable:not(:hover)>ul>.asm-menu-item>.asm-menu-item__header,:host ::ng-deep .asm-menu--mode-expandable:not(:hover)>ul>.asm-menu-item>.asm-menu-node>.asm-menu-anchor .asm-menu-anchor__label,:host ::ng-deep .asm-menu--mode-expandable:not(:hover)>ul>.asm-menu-item>.asm-menu-node>.asm-menu-anchor .asm-menu-anchor__pull,:host ::ng-deep .asm-menu--mode-expandable:not(:hover)>ul>.asm-menu-item>.asm-menu-node>ul,:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item>.asm-menu-anchor .asm-menu-anchor__label,:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item>.asm-menu-anchor .asm-menu-anchor__pull,:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item>.asm-menu-item__header,:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item>.asm-menu-node>.asm-menu-anchor .asm-menu-anchor__label,:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item>.asm-menu-node>.asm-menu-anchor .asm-menu-anchor__pull,:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item>.asm-menu-node>ul{display:none}:host ::ng-deep .asm-menu--mode-mini .asm-menu-node__label{display:block}:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item{position:relative}:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item:hover>.asm-menu-anchor .asm-menu-anchor__label,:host ::ng-deep .asm-menu--mode-mini>ul>.asm-menu-item:hover>.asm-menu-node>ul{display:block!important;height:auto!important;left:100%;position:absolute;top:0;z-index:999}"]}]}],d.ctorParameters=function(){return[{type:m},{type:u},{type:l},{type:c}]},d.propDecorators={_menu:[{type:n.Input,args:["menu"]}],iconClasses:[{type:n.Input}],toggleIconClasses:[{type:n.Input}],role:[{type:n.Input}],unAuthorizedVisibility:[{type:n.Input}],search:[{type:n.Input}],mode:[{type:n.Input}]};var h=r.trigger("openClose",[r.state("true",r.style({height:r.AUTO_STYLE})),r.state("false",r.style({height:0})),r.transition("false <=> true",r.animate("300ms ease-in"))]),g=r.trigger("rotate",[r.state("true",r.style({transform:"rotate(-90deg)"})),r.transition("false <=> true",r.animate("300ms ease-out"))]),b=function(){function e(e,n,o,s){this.router=e,this.roleService=n,this.searchService=o,this.changeDetectorRef=s,this.isRootNode=!0,this.disable=!1,this.onDestroy$=new t.Subject,this.isActive=new t.BehaviorSubject(!1),this.isFiltered=new t.BehaviorSubject(!1),this.isActive$=this.isActive.asObservable().pipe(i.distinctUntilChanged(),i.takeUntil(this.onDestroy$)),this.isFiltered$=this.isFiltered.asObservable().pipe(i.distinctUntilChanged(),i.takeUntil(this.onDestroy$)),this.isItemFiltered=!1,this.isItemDisabled=!1}return Object.defineProperty(e.prototype,"filtered",{get:function(){return this.isItemFiltered},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{get:function(){return this.isItemDisabled||this.disable},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.routerItemActiveSubscription(),this.emitItemActive(),this.menuSearchSubscription(),this.disabledItemSubscription()},e.prototype.ngOnDestroy=function(){this.onDestroy$.next(),this.onDestroy$.complete()},e.prototype.onNodeActive=function(e){this.isActive.next(e)},e.prototype.onNodeFiltered=function(e){this.isItemFiltered=e,this.isFiltered.next(e)},e.prototype.routerItemActiveSubscription=function(){var e=this;this.router.events.pipe(i.filter((function(e){return e instanceof s.NavigationEnd})),i.takeUntil(this.onDestroy$)).subscribe((function(n){e.emitItemActive()}))},e.prototype.menuSearchSubscription=function(){var e=this;this.menuItem.children||this.searchService.search$.pipe(i.takeUntil(this.onDestroy$)).subscribe((function(n){e.isItemFiltered=e.searchService.filter(n,e.menuItem.label||e.menuItem.header),e.isFiltered.next(e.isItemFiltered),e.changeDetectorRef.markForCheck()}))},e.prototype.disabledItemSubscription=function(){var e=this;this.roleService.disableItem$(this.menuItem.roles).pipe(i.takeUntil(this.onDestroy$)).subscribe((function(n){return e.isItemDisabled=n}))},e.prototype.emitItemActive=function(){this.menuItem.route&&this.isActive.next(this.isActiveRoute(this.menuItem.route))},e.prototype.isActiveRoute=function(e){return this.router.isActive(e,this.isItemLinkExact())},e.prototype.isItemLinkExact=function(){return void 0===this.menuItem.linkActiveExact||this.menuItem.linkActiveExact},e}();b.decorators=[{type:n.Component,args:[{selector:"li[asm-menu-item][menuItem]",animations:[g],changeDetection:n.ChangeDetectionStrategy.OnPush,template:'\n    <ng-container [ngSwitch]="true">\n      <span *ngSwitchCase="!!menuItem.header" class="asm-menu-item__header">{{ menuItem.header }}</span>\n      <asm-menu-anchor\n        *ngSwitchCase="!menuItem.children && !menuItem.header"\n        class="asm-menu-anchor"\n        [menuItem]="menuItem"\n        [disable]="disable || isItemDisabled"\n      ></asm-menu-anchor>\n      <ng-container *ngSwitchCase="!!menuItem.children">\n        <asm-menu-anchor\n          class="asm-menu-anchor"\n          [ngClass]="{ \'asm-menu-anchor--open\': node.isOpen }"\n          [menuItem]="menuItem"\n          (clickAnchor)="node.onNodeToggleClick()"\n          [isActive]="node.isActiveChild"\n          ><i toggleIcon [@rotate]="node.isOpen" [class]="node.nodeService.toggleIconClasses"></i\n        ></asm-menu-anchor>\n        <asm-menu-node\n          #node\n          class="asm-menu-node"\n          [menuItem]="menuItem"\n          [level]="level"\n          [disable]="disable || isItemDisabled"\n          (isActive)="onNodeActive($event)"\n          (isFiltered)="onNodeFiltered($event)"\n        ></asm-menu-node>\n      </ng-container>\n    </ng-container>\n  '}]}],b.ctorParameters=function(){return[{type:s.Router},{type:c},{type:l},{type:n.ChangeDetectorRef}]},b.propDecorators={menuItem:[{type:n.Input}],isRootNode:[{type:n.Input}],level:[{type:n.Input}],disable:[{type:n.Input}],filtered:[{type:n.HostBinding,args:["class.asm-menu-item--filtered"]}],disabled:[{type:n.HostBinding,args:["class.asm-menu-item--disabled"]}]};var f=function(){function e(e,i,o){this.nodeService=e,this.roleService=i,this.changeDetectorRef=o,this.disable=!1,this.isActive=new n.EventEmitter,this.isFiltered=new n.EventEmitter,this.isOpen=!1,this.isActiveChild=!1,this.trackByItem=p,this.onDestroy$=new t.Subject}return Object.defineProperty(e.prototype,"open",{get:function(){return this.isOpen},enumerable:!1,configurable:!0}),e.prototype.ngAfterViewInit=function(){this.openedNodeSubscription(),this.activeItemsSubscription(),this.filterItemsSubscription()},e.prototype.ngOnDestroy=function(){this.onDestroy$.next(),this.onDestroy$.complete()},e.prototype.onNodeToggleClick=function(){this.isOpen=!this.isOpen,this.nodeService.openedNode.next({nodeComponent:this,nodeLevel:this.level}),this.changeDetectorRef.markForCheck()},e.prototype.activeItemsSubscription=function(){var e=this,n=this.menuItemComponents.map((function(e){return e.isActive$}));n&&n.length&&t.combineLatest(n).pipe(i.takeUntil(this.onDestroy$)).subscribe((function(n){e.isOpen=e.isActiveChild=n.includes(!0),e.isActive.emit(e.isOpen)}))},e.prototype.filterItemsSubscription=function(){var e=this,n=this.menuItemComponents.map((function(e){return e.isFiltered$}));n&&n.length&&t.combineLatest(n).pipe(i.takeUntil(this.onDestroy$)).subscribe((function(n){var t=!1===n.includes(!1);e.isFiltered.emit(t)}))},e.prototype.openedNodeSubscription=function(){var e=this;this.nodeService.openedNode.pipe(i.filter((function(){return!!e.isOpen})),i.filter((function(n){return n.nodeComponent!==e})),i.takeUntil(this.onDestroy$)).subscribe((function(n){n.nodeLevel<=e.level&&(e.isOpen=!1,e.changeDetectorRef.markForCheck())}))},e}();f.decorators=[{type:n.Component,args:[{selector:"asm-menu-node",animations:[h],changeDetection:n.ChangeDetectionStrategy.OnPush,template:'<ul [@openClose]="isOpen">\n    <li *ngIf="level === 0" class="asm-menu-item">\n      <span class="asm-menu-node__label">{{ menuItem.label }}</span>\n    </li>\n    <ng-container *ngFor="let childItem of menuItem.children; trackBy: trackByItem">\n      <li\n        asm-menu-item\n        class="asm-menu-item"\n        *ngIf="roleService.showItem$(childItem.roles) | async"\n        [menuItem]="childItem"\n        [level]="level + 1"\n        [disable]="disable"\n      ></li>\n    </ng-container>\n  </ul>'}]}],f.ctorParameters=function(){return[{type:u},{type:c},{type:n.ChangeDetectorRef}]},f.propDecorators={menuItem:[{type:n.Input}],level:[{type:n.Input}],disable:[{type:n.Input}],isActive:[{type:n.Output}],isFiltered:[{type:n.Output}],open:[{type:n.HostBinding,args:["class.asm-menu-node--open"]}],menuItemComponents:[{type:n.ViewChildren,args:[b]}]};var y=function(){function e(e){this.anchorService=e,this.disable=!1,this.clickAnchor=new n.EventEmitter}return Object.defineProperty(e.prototype,"active",{get:function(){var e;return this.isActive||!!(null===(e=this.routerLinActive)||void 0===e?void 0:e.isActive)&&!this.disable},enumerable:!1,configurable:!0}),e}();y.decorators=[{type:n.Component,args:[{selector:"asm-menu-anchor",changeDetection:n.ChangeDetectionStrategy.OnPush,template:'<ng-container [ngSwitch]="true">\n      <a *ngSwitchCase="!!menuItem.children" (click)="clickAnchor.emit()">\n        <ng-container *ngTemplateOutlet="innerItem"></ng-container>\n      </a>\n      <a\n        *ngSwitchCase="!!menuItem.route || menuItem.route === \'\'"\n        [routerLink]="disable ? undefined : menuItem.route"\n        routerLinkActive\n        #rla="routerLinkActive"\n        [routerLinkActiveOptions]="{ exact: menuItem.linkActiveExact === undefined ? true : menuItem.linkActiveExact }"\n      >\n        <ng-container *ngTemplateOutlet="innerItem"></ng-container>\n      </a>\n      <a *ngSwitchCase="!!menuItem.url" [href]="menuItem.url" [target]="menuItem.target">\n        <ng-container *ngTemplateOutlet="innerItem"></ng-container>\n      </a>\n    </ng-container>\n\n    <ng-template #innerItem>\n      <i\n        *ngIf="menuItem.iconClasses || anchorService.iconClasses"\n        [class]="menuItem.iconClasses || anchorService.iconClasses"\n        class="asm-menu-anchor__icon"\n      ></i>\n      <span class="asm-menu-anchor__label">{{ menuItem.label }}</span>\n      <span\n        *ngIf="menuItem.badges || menuItem.children"\n        class="asm-menu-anchor__pull"\n        [ngClass]="{ \'asm-badges\': menuItem.badges, \'asm-toggle\': menuItem.children }"\n      >\n        <span *ngFor="let badge of menuItem.badges" [class]="badge.classes" class="asm-badges__badge">{{\n          badge.label\n        }}</span>\n        <span class="asm-toggle__icon"><ng-content select="[toggleIcon]"></ng-content></span>\n      </span>\n    </ng-template>'}]}],y.ctorParameters=function(){return[{type:m}]},y.propDecorators={menuItem:[{type:n.Input}],isActive:[{type:n.Input}],disable:[{type:n.Input}],clickAnchor:[{type:n.Output}],active:[{type:n.HostBinding,args:["class.asm-menu-anchor--active"]}],routerLinActive:[{type:n.ViewChild,args:["rla"]}]};var v=function(){};v.decorators=[{type:n.NgModule,args:[{declarations:[d,b,f,y],imports:[s.RouterModule,o.CommonModule],exports:[d]}]}],e.SidebarMenuComponent=d,e.SidebarMenuModule=v,e.ɵa=u,e.ɵb=m,e.ɵc=c,e.ɵd=l,e.ɵe=b,e.ɵf=h,e.ɵg=g,e.ɵh=f,e.ɵi=y,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=angular-sidebar-menu.umd.min.js.map