@luminela/menu/bundles/luminela-menu.umd.min.js

A simple menubar component for Angular.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@luminela/contextmenu"),require("uuid"),require("@angular/cdk/a11y"),require("@angular/common")):"function"==typeof define&&define.amd?define("@luminela/menu",["exports","@angular/core","@luminela/contextmenu","uuid","@angular/cdk/a11y","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).luminela=e.luminela||{},e.luminela.menu={}),e.ng.core,e.contextmenu,e.uuid,e.ng.cdk.a11y,e.ng.common)}(this,(function(e,t,n,i,o,u){"use strict";var s=function(){function e(){this.uid=i.v4(),this.focused=!1,this.disabled=!1,this.menuItems=[]}return e.prototype.ngOnInit=function(){},e.prototype.ngOnDestroy=function(){var e;null===(e=this.subMenuItemsSubscription$)||void 0===e||e.unsubscribe()},e.prototype.ngAfterContentInit=function(){var e,t=this;(null===(e=this.menuItems)||void 0===e?void 0:e.length)>0||(this.createMenuItems(),this.initializeMenuItems(this.menuItems),this.subMenuItemsSubscription$=this.subMenuItems.changes.subscribe((function(){t.createMenuItems(),t.initializeMenuItems(t.menuItems)})))},e.prototype.setActiveStyles=function(){this.disabled||(this.focused=!0)},e.prototype.setInactiveStyles=function(){this.focused=!1},e.prototype.createMenuItems=function(){this.menuItems&&0!==this.menuItems.length||(this.menuItems=this.subMenuItems.map((function(e){return e.getMenuItemData()})))},e.prototype.initializeMenuItems=function(e){var t=this;e.forEach((function(e){var n;e.visible=!1!==e.visible,t.initializeMenuItems((null===(n=e.menuItems)||void 0===n?void 0:n.length)>0?e.menuItems:[])}))},e}();s.decorators=[{type:t.Component,args:[{selector:"yui-menu",template:""}]}],s.ctorParameters=function(){return[]},s.propDecorators={subMenuItems:[{type:t.ContentChildren,args:[n.MenuItemComponent]}],disabled:[{type:t.Input}],menuClass:[{type:t.Input}],menuItems:[{type:t.Input}],target:[{type:t.Input}],text:[{type:t.Input}],textTemplate:[{type:t.Input}]};var r=function(){function e(e){this.hostElementRef=e,this.menuThemeClass="theme-light",this.menuTheme="light",this.menuClass=""}return Object.defineProperty(e.prototype,"theme",{set:function(e){this.menuTheme=e,this.menuThemeClass="dark"===e?"theme-dark":"theme-light"},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"lt",{get:function(){return"theme-light"===this.menuThemeClass},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"dt",{get:function(){return"theme-dark"===this.menuThemeClass},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.ngAfterContentInit=function(){console.log(this.menuList)},e.prototype.ngAfterViewInit=function(){this.keyManager=new o.ActiveDescendantKeyManager(this.menuList.toArray()).withWrap(!0).skipPredicate((function(e){return e.disabled}))},e.prototype.onMenuChange=function(e){this.menuChangeData=e},e.prototype.onMenuClose=function(e){this.keyManager.setActiveItem(null),this.previousMenuData=null,this.currentMenu&&(this.currentMenu.focused=!1,this.currentMenu=null),this.menuChangeData=null},e.prototype.onMenuClick=function(e,t){var n;if(this.previousMenuElement===e.target.closest("[data-uid='"+t.uid+"']"))return t.focused=!t.focused,void(t.focused||null===(n=this.previousMenuData)||void 0===n||n.contextMenuRef.popupRef.close());this.previousMenuElement=e.target.closest("li").firstChild,this.keyManager.setActiveItem(this.menuList.find((function(e){return e.uid===t.uid}))),this.currentMenu=t},e.prototype.onMenuMouseEnter=function(e,t){var n;if(this.previousMenuData){if(this.previousMenuElement===e.target.closest("[data-uid='"+t.uid+"']"))return;null===(n=this.previousMenuData)||void 0===n||n.contextMenuRef.popupRef.close(),e.target.dispatchEvent(new MouseEvent("click",Object.assign({},e))),this.keyManager.setActiveItem(this.menuList.find((function(e){return e.uid===t.uid})))}this.previousMenuElement=e.target.closest("li").firstChild,this.currentMenu=t},e.prototype.onMenuMouseLeave=function(e,t){},e.prototype.onMenuOpen=function(e){e.depth>0||(this.previousMenuData=e)},e.prototype.onKeydown=function(e){var t,n,i;if(this.previousMenuData){switch(e.key){case"Enter":case"NumEnter":case" ":return void this.keyManager.setActiveItem(null);case"ArrowUp":case"ArrowDown":return void console.log("Ignore "+e.key);case"ArrowLeft":if((null===(t=this.menuChangeData)||void 0===t?void 0:t.depth)>1)return;this.keyManager.setPreviousItemActive();break;case"ArrowRight":if((null===(i=null===(n=this.menuChangeData)||void 0===n?void 0:n.item.menuItems)||void 0===i?void 0:i.length)>0)return;this.keyManager.setNextItemActive();break;default:this.keyManager.onKeydown(e)}this.keyManager.activeItem&&(this.currentMenu=this.keyManager.activeItem,document.querySelector("[data-uid='"+this.currentMenu.uid+"']").dispatchEvent(new MouseEvent("mouseenter")))}},e}();r.decorators=[{type:t.Component,args:[{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}"]}]}],r.ctorParameters=function(){return[{type:t.ElementRef}]},r.propDecorators={menuList:[{type:t.ContentChildren,args:[s]}],menuClass:[{type:t.Input}],theme:[{type:t.Input}],lt:[{type:t.HostBinding,args:["class.theme-light"]}],dt:[{type:t.HostBinding,args:["class.theme-dark"]}],onKeydown:[{type:t.HostListener,args:["window:keydown",["$event"]]}]};var a=function(){};a.decorators=[{type:t.NgModule,args:[{declarations:[r,s],imports:[u.CommonModule,n.ContextMenuModule],exports:[r,s]}]}],e.MenuBarComponent=r,e.MenuComponent=s,e.MenuModule=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=luminela-menu.umd.min.js.map