desktop-menu-bar/fesm2015/desktop-menu-bar.js

An angular component for a desktop like menu bar

import { __decorate } from 'tslib';
import { Input, Component, NgModule, ApplicationRef, ComponentFactoryResolver, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Injectable } from '@angular/core';
import { CommonModule } from '@angular/common';

let DesktopMenuBarComponent = class DesktopMenuBarComponent {
    constructor() {
        this.items = [];
    }
    ngOnInit() { }
};
__decorate([
    Input()
], DesktopMenuBarComponent.prototype, "items", void 0);
DesktopMenuBarComponent = __decorate([
    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}"]
    })
], DesktopMenuBarComponent);

let DesktopMenuBarVerticalComponent = class DesktopMenuBarVerticalComponent {
    constructor() { }
    ngOnInit() { }
};
__decorate([
    Input()
], DesktopMenuBarVerticalComponent.prototype, "items", void 0);
DesktopMenuBarVerticalComponent = __decorate([
    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)}"]
    })
], DesktopMenuBarVerticalComponent);

let DesktopMenuBarModule = class DesktopMenuBarModule {
};
DesktopMenuBarModule = __decorate([
    NgModule({
        declarations: [DesktopMenuBarComponent, DesktopMenuBarVerticalComponent],
        imports: [CommonModule],
        exports: [DesktopMenuBarComponent]
    })
], DesktopMenuBarModule);

let DesktopMenuBarService = class DesktopMenuBarService {
    constructor(applicationRef, resolver, injector) {
        this.applicationRef = applicationRef;
        this.resolver = resolver;
        this.injector = injector;
        this.menuComponentRef = null;
        this.menuItems = null;
    }
    setMenuBarItems(items) {
        this.menuItems = items;
        this.updateMenuBarItemsInComponent();
    }
    updateMenuBarItemsInComponent() {
        if (this.isMenuBarVisible()) {
            this.menuComponentRef.instance.items = this.menuItems;
        }
    }
    showMenuBar() {
        if (!this.isMenuBarVisible()) {
            const componentFactory = this.resolver.resolveComponentFactory(DesktopMenuBarComponent);
            this.menuComponentRef = componentFactory.create(this.injector);
            this.applicationRef.attachView(this.menuComponentRef.hostView);
            this.moveToDocumentBody(this.menuComponentRef);
            this.updateMenuBarItemsInComponent();
        }
    }
    hideMenuBar() {
        if (this.isMenuBarVisible()) {
            this.applicationRef.detachView(this.menuComponentRef.hostView);
            this.detachFromDocument(this.menuComponentRef);
            this.menuComponentRef = null;
        }
    }
    isMenuBarVisible() {
        return !!this.menuComponentRef;
    }
    moveToElement(componentRef, element) {
        element.insertBefore(componentRef.location.nativeElement, element.firstChild);
    }
    moveToDocumentBody(componentRef) {
        this.moveToElement(componentRef, document.querySelector('body'));
    }
    detachFromDocument(componentRef) {
        const element = componentRef.location.nativeElement;
        if (element.parentNode) {
            element.parentNode.removeChild(element);
        }
    }
};
DesktopMenuBarService.ctorParameters = () => [
    { type: ApplicationRef },
    { type: ComponentFactoryResolver },
    { type: Injector }
];
DesktopMenuBarService.ɵprov = ɵɵdefineInjectable({ factory: function DesktopMenuBarService_Factory() { return new DesktopMenuBarService(ɵɵinject(ApplicationRef), ɵɵinject(ComponentFactoryResolver), ɵɵinject(INJECTOR)); }, token: DesktopMenuBarService, providedIn: "root" });
DesktopMenuBarService = __decorate([
    Injectable({
        providedIn: 'root'
    })
], DesktopMenuBarService);

/**
 * Generated bundle index. Do not edit.
 */

export { DesktopMenuBarComponent, DesktopMenuBarModule, DesktopMenuBarService, DesktopMenuBarVerticalComponent as ɵa };
//# sourceMappingURL=desktop-menu-bar.js.map