angular-sidebar-menu
Version:
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.
79 lines • 11.6 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Modes } from './sidebar-menu.interface';
import { AnchorService } from './internal/anchor.service';
import { NodeService } from './internal/node.service';
import { RoleService } from './internal/role.service';
import { SearchService } from './internal/search.service';
import { trackByItem } from './internal/utils';
export class SidebarMenuComponent {
constructor(anchorService, nodeService, searchService, roleService) {
this.anchorService = anchorService;
this.nodeService = nodeService;
this.searchService = searchService;
this.roleService = roleService;
this.mode = Modes.EXPANDED;
this.modes = Modes;
this.disableAnimations = true;
this.trackByItem = trackByItem;
}
set _menu(menu) {
this.disableAnimations = true;
this.menu = menu;
setTimeout(() => {
this.disableAnimations = false;
});
}
set iconClasses(cssClasses) {
this.anchorService.iconClasses = cssClasses;
}
set toggleIconClasses(cssClasses) {
this.nodeService.toggleIconClasses = cssClasses;
}
set role(role) {
this.roleService.role = role;
}
set unAuthorizedVisibility(visibility) {
this.roleService.unAuthorizedVisibility = visibility;
}
set search(value) {
this.searchService.search = value;
}
}
SidebarMenuComponent.decorators = [
{ type: Component, args: [{
selector: 'asm-angular-sidebar-menu',
providers: [NodeService, AnchorService, RoleService, SearchService],
changeDetection: ChangeDetectionStrategy.OnPush,
template: ` <div class="asm-menu" [ngClass]="'asm-menu--mode-' + mode" [@.disabled]="disableAnimations">
<ng-content></ng-content>
<ul class="asm-menu__node">
<ng-container *ngFor="let item of menu; trackBy: trackByItem">
<li
asm-menu-item
class="asm-menu-item asm-menu-item--root"
*ngIf="roleService.showItem$(item.roles) | async"
[menuItem]="item"
[level]="0"
></li>
</ng-container>
</ul>
</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}"]
},] }
];
SidebarMenuComponent.ctorParameters = () => [
{ type: AnchorService },
{ type: NodeService },
{ type: SearchService },
{ type: RoleService }
];
SidebarMenuComponent.propDecorators = {
_menu: [{ type: Input, args: ['menu',] }],
iconClasses: [{ type: Input }],
toggleIconClasses: [{ type: Input }],
role: [{ type: Input }],
unAuthorizedVisibility: [{ type: Input }],
search: [{ type: Input }],
mode: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2xpYnJhcnkvc3JjL2xpYi9zaWRlYmFyLW1lbnUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTFFLE9BQU8sRUFBUSxLQUFLLEVBQTBCLE1BQU0sMEJBQTBCLENBQUM7QUFFL0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzFELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsV0FBVyxFQUFRLE1BQU0seUJBQXlCLENBQUM7QUFDNUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzFELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQXNCL0MsTUFBTSxPQUFPLG9CQUFvQjtJQStCL0IsWUFDVSxhQUE0QixFQUM1QixXQUF3QixFQUN4QixhQUE0QixFQUM3QixXQUF3QjtRQUh2QixrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQUM1QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUN4QixrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQUM3QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQVh4QixTQUFJLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQztRQUcvQixVQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ2Qsc0JBQWlCLEdBQUcsSUFBSSxDQUFDO1FBQ3pCLGdCQUFXLEdBQUcsV0FBVyxDQUFDO0lBT3ZCLENBQUM7SUFuQ0osSUFBbUIsS0FBSyxDQUFDLElBQVU7UUFDakMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQztRQUM5QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUVqQixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEtBQUssQ0FBQztRQUNqQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFDRCxJQUFhLFdBQVcsQ0FBQyxVQUFrQjtRQUN6QyxJQUFJLENBQUMsYUFBYSxDQUFDLFdBQVcsR0FBRyxVQUFVLENBQUM7SUFDOUMsQ0FBQztJQUNELElBQWEsaUJBQWlCLENBQUMsVUFBa0I7UUFDL0MsSUFBSSxDQUFDLFdBQVcsQ0FBQyxpQkFBaUIsR0FBRyxVQUFVLENBQUM7SUFDbEQsQ0FBQztJQUNELElBQWEsSUFBSSxDQUFDLElBQXNCO1FBQ3RDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztJQUMvQixDQUFDO0lBQ0QsSUFBYSxzQkFBc0IsQ0FBQyxVQUFrQztRQUNwRSxJQUFJLENBQUMsV0FBVyxDQUFDLHNCQUFzQixHQUFHLFVBQVUsQ0FBQztJQUN2RCxDQUFDO0lBQ0QsSUFBYSxNQUFNLENBQUMsS0FBeUI7UUFDM0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3BDLENBQUM7OztZQTNDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLDBCQUEwQjtnQkFFcEMsU0FBUyxFQUFFLENBQUMsV0FBVyxFQUFFLGFBQWEsRUFBRSxXQUFXLEVBQUUsYUFBYSxDQUFDO2dCQUNuRSxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtnQkFDL0MsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7O1NBYUg7O2FBQ1I7OztZQXpCUSxhQUFhO1lBQ2IsV0FBVztZQUVYLGFBQWE7WUFEYixXQUFXOzs7b0JBeUJqQixLQUFLLFNBQUMsTUFBTTswQkFRWixLQUFLO2dDQUdMLEtBQUs7bUJBR0wsS0FBSztxQ0FHTCxLQUFLO3FCQUdMLEtBQUs7bUJBR0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IE1lbnUsIE1vZGVzLCBVbkF1dGhvcml6ZWRWaXNpYmlsaXR5IH0gZnJvbSAnLi9zaWRlYmFyLW1lbnUuaW50ZXJmYWNlJztcblxuaW1wb3J0IHsgQW5jaG9yU2VydmljZSB9IGZyb20gJy4vaW50ZXJuYWwvYW5jaG9yLnNlcnZpY2UnO1xuaW1wb3J0IHsgTm9kZVNlcnZpY2UgfSBmcm9tICcuL2ludGVybmFsL25vZGUuc2VydmljZSc7XG5pbXBvcnQgeyBSb2xlU2VydmljZSwgUm9sZSB9IGZyb20gJy4vaW50ZXJuYWwvcm9sZS5zZXJ2aWNlJztcbmltcG9ydCB7IFNlYXJjaFNlcnZpY2UgfSBmcm9tICcuL2ludGVybmFsL3NlYXJjaC5zZXJ2aWNlJztcbmltcG9ydCB7IHRyYWNrQnlJdGVtIH0gZnJvbSAnLi9pbnRlcm5hbC91dGlscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FzbS1hbmd1bGFyLXNpZGViYXItbWVudScsXG4gIHN0eWxlVXJsczogWydzaWRlYmFyLW1lbnUuY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbTm9kZVNlcnZpY2UsIEFuY2hvclNlcnZpY2UsIFJvbGVTZXJ2aWNlLCBTZWFyY2hTZXJ2aWNlXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlOiBgIDxkaXYgY2xhc3M9XCJhc20tbWVudVwiIFtuZ0NsYXNzXT1cIidhc20tbWVudS0tbW9kZS0nICsgbW9kZVwiIFtALmRpc2FibGVkXT1cImRpc2FibGVBbmltYXRpb25zXCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDx1bCBjbGFzcz1cImFzbS1tZW51X19ub2RlXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBpdGVtIG9mIG1lbnU7IHRyYWNrQnk6IHRyYWNrQnlJdGVtXCI+XG4gICAgICAgIDxsaVxuICAgICAgICAgIGFzbS1tZW51LWl0ZW1cbiAgICAgICAgICBjbGFzcz1cImFzbS1tZW51LWl0ZW0gYXNtLW1lbnUtaXRlbS0tcm9vdFwiXG4gICAgICAgICAgKm5nSWY9XCJyb2xlU2VydmljZS5zaG93SXRlbSQoaXRlbS5yb2xlcykgfCBhc3luY1wiXG4gICAgICAgICAgW21lbnVJdGVtXT1cIml0ZW1cIlxuICAgICAgICAgIFtsZXZlbF09XCIwXCJcbiAgICAgICAgPjwvbGk+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L3VsPlxuICA8L2Rpdj5gLFxufSlcbmV4cG9ydCBjbGFzcyBTaWRlYmFyTWVudUNvbXBvbmVudCB7XG4gIEBJbnB1dCgnbWVudScpIHNldCBfbWVudShtZW51OiBNZW51KSB7XG4gICAgdGhpcy5kaXNhYmxlQW5pbWF0aW9ucyA9IHRydWU7XG4gICAgdGhpcy5tZW51ID0gbWVudTtcblxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5kaXNhYmxlQW5pbWF0aW9ucyA9IGZhbHNlO1xuICAgIH0pO1xuICB9XG4gIEBJbnB1dCgpIHNldCBpY29uQ2xhc3Nlcyhjc3NDbGFzc2VzOiBzdHJpbmcpIHtcbiAgICB0aGlzLmFuY2hvclNlcnZpY2UuaWNvbkNsYXNzZXMgPSBjc3NDbGFzc2VzO1xuICB9XG4gIEBJbnB1dCgpIHNldCB0b2dnbGVJY29uQ2xhc3Nlcyhjc3NDbGFzc2VzOiBzdHJpbmcpIHtcbiAgICB0aGlzLm5vZGVTZXJ2aWNlLnRvZ2dsZUljb25DbGFzc2VzID0gY3NzQ2xhc3NlcztcbiAgfVxuICBASW5wdXQoKSBzZXQgcm9sZShyb2xlOiBSb2xlIHwgdW5kZWZpbmVkKSB7XG4gICAgdGhpcy5yb2xlU2VydmljZS5yb2xlID0gcm9sZTtcbiAgfVxuICBASW5wdXQoKSBzZXQgdW5BdXRob3JpemVkVmlzaWJpbGl0eSh2aXNpYmlsaXR5OiBVbkF1dGhvcml6ZWRWaXNpYmlsaXR5KSB7XG4gICAgdGhpcy5yb2xlU2VydmljZS51bkF1dGhvcml6ZWRWaXNpYmlsaXR5ID0gdmlzaWJpbGl0eTtcbiAgfVxuICBASW5wdXQoKSBzZXQgc2VhcmNoKHZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLnNlYXJjaFNlcnZpY2Uuc2VhcmNoID0gdmFsdWU7XG4gIH1cbiAgQElucHV0KCkgbW9kZSA9IE1vZGVzLkVYUEFOREVEO1xuXG4gIG1lbnU/OiBNZW51O1xuICBtb2RlcyA9IE1vZGVzO1xuICBkaXNhYmxlQW5pbWF0aW9ucyA9IHRydWU7XG4gIHRyYWNrQnlJdGVtID0gdHJhY2tCeUl0ZW07XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBhbmNob3JTZXJ2aWNlOiBBbmNob3JTZXJ2aWNlLFxuICAgIHByaXZhdGUgbm9kZVNlcnZpY2U6IE5vZGVTZXJ2aWNlLFxuICAgIHByaXZhdGUgc2VhcmNoU2VydmljZTogU2VhcmNoU2VydmljZSxcbiAgICBwdWJsaWMgcm9sZVNlcnZpY2U6IFJvbGVTZXJ2aWNlXG4gICkge31cbn1cbiJdfQ==