@luminela/menu
Version:
A simple menubar component for Angular.
1 lines • 7.6 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"MenuComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"yui-menu","template":"","styles":[]}]}],"members":{"subMenuItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":27,"character":5},"arguments":[{"__symbolic":"reference","module":"@luminela/contextmenu","name":"MenuItemComponent","line":27,"character":21}]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"menuClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"menuItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"textTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"setActiveStyles":[{"__symbolic":"method"}],"setInactiveStyles":[{"__symbolic":"method"}],"createMenuItems":[{"__symbolic":"method"}],"initializeMenuItems":[{"__symbolic":"method"}]}},"MenuBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"yui-menu-bar","template":"<div class=\"wrapper\">\n <ul class=\"menubar-list\" *ngIf=\"menuList?.length > 0\">\n <li *ngFor=\"let item of menuList\" #listElement (mouseenter)=\"onMenuMouseEnter($event, item)\"\n (mouseleave)=\"onMenuMouseLeave($event, item)\" (click)=\"onMenuClick($event, item)\"\n [attr.data-uid]=\"item.uid\"\n [ngClass]=\"{'active': item.focused && !item.disabled, 'disabled': item.disabled}\">\n <span *ngIf=\"!item.textTemplate\">{{item.text}}</span>\n <ng-container [ngTemplateOutlet]=\"item.textTemplate\" *ngIf=\"!!item.textTemplate\"></ng-container>\n <yui-contextmenu [target]=\"listElement\" [menuItems]=\"item.menuItems\" [theme]=\"menuTheme\" [menuClass]=\"menuClass\"\n [precise]=\"false\" trigger=\"click\" (menuOpen)=\"onMenuOpen($event)\"\n (menuClose)=\"onMenuClose($event)\" (menuChange)=\"onMenuChange($event)\"></yui-contextmenu>\n </li>\n </ul>\n</div>\n","styles":["div.wrapper{height:25px;width:100%}div.wrapper,div.wrapper *{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;box-sizing:border-box;user-select:none}ul.menubar-list{justify-content:flex-start;width:100%}ul.menubar-list,ul.menubar-list>li{align-items:center;display:flex;height:100%}ul.menubar-list>li{border-left:1px solid transparent;border-right:1px solid transparent;font-size:13px;font-weight:600;justify-content:center;padding:0 10px}ul.menubar-list>li.disabled{pointer-events:none}:host-context(.theme-light) ul.menubar-list{background:#e8e8e8;border-bottom:1px solid #d1d1d1}:host-context(.theme-light) ul.menubar-list>li{color:#383848}:host-context(.theme-light) ul.menubar-list>li.active,:host-context(.theme-light) ul.menubar-list>li:hover:not(.disabled){background:#f2f2f4}:host-context(.theme-light) ul.menubar-list>li.active:not(:first-child),:host-context(.theme-light) ul.menubar-list>li:hover:not(.disabled):not(:first-child){border-left:1px solid #d1d1d1}:host-context(.theme-light) ul.menubar-list>li.disabled{color:#a7a7af}:host-context(.theme-dark) ul.menubar-list{background:#383838;border-bottom:1px solid #585858}:host-context(.theme-dark) ul.menubar-list>li{color:#c0c0c6}:host-context(.theme-dark) ul.menubar-list>li.active,:host-context(.theme-dark) ul.menubar-list>li:hover:not(.disabled){background:#47474f}:host-context(.theme-dark) ul.menubar-list>li.active:not(:first-child),:host-context(.theme-dark) ul.menubar-list>li:hover:not(.disabled):not(:first-child){border-left:1px solid #585858}:host-context(.theme-dark) ul.menubar-list>li.disabled{color:#6a6a70}"]}]}],"members":{"menuList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":31,"character":5},"arguments":[{"__symbolic":"reference","name":"MenuComponent"}]}]}],"menuClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"lt":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":39,"character":5},"arguments":["class.theme-light"]}]}],"dt":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":43,"character":5},"arguments":["class.theme-dark"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":48,"character":41}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onMenuChange":[{"__symbolic":"method"}],"onMenuClose":[{"__symbolic":"method"}],"onMenuClick":[{"__symbolic":"method"}],"onMenuMouseEnter":[{"__symbolic":"method"}],"onMenuMouseLeave":[{"__symbolic":"method"}],"onMenuOpen":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":117,"character":5},"arguments":["window:keydown",["$event"]]}]}]}},"MenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MenuBarComponent"},{"__symbolic":"reference","name":"MenuComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":8},{"__symbolic":"reference","module":"@luminela/contextmenu","name":"ContextMenuModule","line":11,"character":8}],"exports":[{"__symbolic":"reference","name":"MenuBarComponent"},{"__symbolic":"reference","name":"MenuComponent"}]}]}],"members":{}}},"origins":{"MenuComponent":"./lib/components/menu/menu.component","MenuBarComponent":"./lib/components/menu-bar/menu-bar.component","MenuModule":"./lib/menu.module"},"importAs":"@luminela/menu"}