desktop-menu-bar
Version:
An angular component for a desktop like menu bar
16 lines (14 loc) • 5.55 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("desktop-menu-bar",["exports","@angular/core","@angular/common"],t):t((e=e||self)["desktop-menu-bar"]={},e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */function o(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s}var i=function(){function e(){this.items=[]}return e.prototype.ngOnInit=function(){},o([t.Input()],e.prototype,"items",void 0),e=o([t.Component({selector:"desktop-menu-bar",template:'<div class="menu-bar">\n <div class="menu-bar-item" *ngFor="let item of items">\n <span>{{ item.text }}</span>\n <desktop-menu-bar-vertical class="dropdown" [items]="item.children"></desktop-menu-bar-vertical>\n </div>\n</div>\n',styles:[".menu-bar{background-color:#d3d3d3;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu-bar .menu-bar-item{padding:6px 12px;cursor:pointer;position:relative}.menu-bar .menu-bar-item:hover{background-color:#b9b9b9}.menu-bar .menu-bar-item .dropdown{z-index:1;position:absolute;top:100%;left:0;visibility:hidden;-webkit-transition:visibility;transition:visibility}.menu-bar .menu-bar-item:hover>.dropdown{visibility:visible;-webkit-transition-delay:.2s;transition-delay:.2s}"]})],e)}(),r=function(){function e(){}return e.prototype.ngOnInit=function(){},o([t.Input()],e.prototype,"items",void 0),e=o([t.Component({selector:"desktop-menu-bar-vertical",template:'<div>\n <div *ngFor="let item of items" class="vertical-menu-item">\n <span (click)="item.action ? item.action() : null">\n {{ item.text }}\n <span *ngIf="item.children && item.children.length">></span>\n </span>\n <desktop-menu-bar-vertical class="dropdown" [items]="item.children"></desktop-menu-bar-vertical>\n </div>\n</div>\n',styles:[".vertical-menu-item{white-space:nowrap;background-color:#d3d3d3;padding:6px 12px;cursor:pointer;position:relative}.vertical-menu-item:hover{background-color:#b9b9b9}.vertical-menu-item .dropdown{z-index:1;position:absolute;top:0;left:100%;visibility:hidden;-webkit-transition:visibility;transition:visibility}.vertical-menu-item:hover>.dropdown{visibility:visible;-webkit-transition-delay:.2s;transition-delay:.2s}.vertical-menu-item:not(:last-child){border-bottom:1px solid rgba(255,255,255,.4)}"]})],e)}(),s=function(){function e(){}return e=o([t.NgModule({declarations:[i,r],imports:[n.CommonModule],exports:[i]})],e)}(),a=function(){function e(e,t,n){this.applicationRef=e,this.resolver=t,this.injector=n,this.menuComponentRef=null,this.menuItems=null}return e.prototype.setMenuBarItems=function(e){this.menuItems=e,this.updateMenuBarItemsInComponent()},e.prototype.updateMenuBarItemsInComponent=function(){this.isMenuBarVisible()&&(this.menuComponentRef.instance.items=this.menuItems)},e.prototype.showMenuBar=function(){if(!this.isMenuBarVisible()){var e=this.resolver.resolveComponentFactory(i);this.menuComponentRef=e.create(this.injector),this.applicationRef.attachView(this.menuComponentRef.hostView),this.moveToDocumentBody(this.menuComponentRef),this.updateMenuBarItemsInComponent()}},e.prototype.hideMenuBar=function(){this.isMenuBarVisible()&&(this.applicationRef.detachView(this.menuComponentRef.hostView),this.detachFromDocument(this.menuComponentRef),this.menuComponentRef=null)},e.prototype.isMenuBarVisible=function(){return!!this.menuComponentRef},e.prototype.moveToElement=function(e,t){t.insertBefore(e.location.nativeElement,t.firstChild)},e.prototype.moveToDocumentBody=function(e){this.moveToElement(e,document.querySelector("body"))},e.prototype.detachFromDocument=function(e){var t=e.location.nativeElement;t.parentNode&&t.parentNode.removeChild(t)},e.ctorParameters=function(){return[{type:t.ApplicationRef},{type:t.ComponentFactoryResolver},{type:t.Injector}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](t.ApplicationRef),t["ɵɵinject"](t.ComponentFactoryResolver),t["ɵɵinject"](t.INJECTOR))},token:e,providedIn:"root"}),e=o([t.Injectable({providedIn:"root"})],e)}();e.DesktopMenuBarComponent=i,e.DesktopMenuBarModule=s,e.DesktopMenuBarService=a,e.ɵa=r,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=desktop-menu-bar.umd.min.js.map