import { EventEmitter, Component, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, Input, Output, ChangeDetectionStrategy, ContentChildren, ViewChild, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DomHandler } from 'primeng/dom'; import { PrimeTemplate } from 'primeng/api'; import { RouterModule } from '@angular/router'; import { RippleModule } from 'primeng/ripple'; class MenubarSub { constructor(el, renderer, cd) { this.el = el; this.renderer = renderer; this.cd = cd; this.autoZIndex = true; this.baseZIndex = 0; this.leafClick = new EventEmitter(); this.menuHoverActive = false; } get parentActive() { return this._parentActive; } set parentActive(value) { if (!this.root) { this._parentActive = value; if (!value) this.activeItem = null; } } onItemClick(event, item) { if (item.disabled) { event.preventDefault(); return; } if (!item.url && !item.routerLink) { event.preventDefault(); } if (item.command) { item.command({ originalEvent: event, item: item }); } if (item.items) { if (this.activeItem && item === this.activeItem) { this.activeItem = null; this.unbindDocumentClickListener(); } else { this.activeItem = item; if (this.root) { this.bindDocumentClickListener(); } } } if (!item.items) { this.onLeafClick(); } } onItemMouseEnter(event, item) { if (item.disabled || this.mobileActive) { event.preventDefault(); return; } if (this.root) { if (this.activeItem || this.autoDisplay) { this.activeItem = item; this.bindDocumentClickListener(); } } else { this.activeItem = item; this.bindDocumentClickListener(); } } onLeafClick() { this.activeItem = null; if (this.root) { this.unbindDocumentClickListener(); } this.leafClick.emit(); } bindDocumentClickListener() { if (!this.documentClickListener) { this.documentClickListener = (event) => { if (this.el && !this.el.nativeElement.contains(event.target)) { this.activeItem = null; this.cd.markForCheck(); this.unbindDocumentClickListener(); } }; document.addEventListener('click', this.documentClickListener); } } unbindDocumentClickListener() { if (this.documentClickListener) { document.removeEventListener('click', this.documentClickListener); this.documentClickListener = null; } } ngOnDestroy() { this.unbindDocumentClickListener(); } } MenubarSub.decorators = [ { type: Component, args: [{ selector: 'p-menubarSub', template: `
`, encapsulation: ViewEncapsulation.None },] } ]; MenubarSub.ctorParameters = () => [ { type: ElementRef }, { type: Renderer2 }, { type: ChangeDetectorRef } ]; MenubarSub.propDecorators = { item: [{ type: Input }], root: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], mobileActive: [{ type: Input }], autoDisplay: [{ type: Input }], parentActive: [{ type: Input }], leafClick: [{ type: Output }] }; class Menubar { constructor(el, renderer, cd) { this.el = el; this.renderer = renderer; this.cd = cd; this.autoZIndex = true; this.baseZIndex = 0; } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'start': this.startTemplate = item.template; break; case 'end': this.endTemplate = item.template; break; } }); } toggle(event) { this.mobileActive = !this.mobileActive; let rootmenu = DomHandler.findSingle(this.el.nativeElement, ".p-menubar-root-list"); rootmenu.style.zIndex = String(DomHandler.generateZIndex()); this.bindOutsideClickListener(); event.preventDefault(); } bindOutsideClickListener() { if (!this.outsideClickListener) { this.outsideClickListener = (event) => { if (this.mobileActive && this.rootmenu.el.nativeElement !== event.target && !this.rootmenu.el.nativeElement.contains(event.target) && this.menubutton.nativeElement !== event.target && !this.menubutton.nativeElement.contains(event.target)) { this.mobileActive = false; this.cd.markForCheck(); } }; document.addEventListener('click', this.outsideClickListener); } } onLeafClick() { this.mobileActive = false; this.unbindOutsideClickListener(); } unbindOutsideClickListener() { if (this.outsideClickListener) { document.removeEventListener('click', this.outsideClickListener); this.outsideClickListener = null; } } ngOnDestroy() { this.unbindOutsideClickListener(); } } Menubar.decorators = [ { type: Component, args: [{ selector: 'p-menubar', template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-menubar{align-items:center;display:flex}.p-menubar ul{list-style:none;margin:0;padding:0}.p-menubar .p-menuitem-link{align-items:center;cursor:pointer;display:flex;overflow:hidden;position:relative;text-decoration:none}.p-menubar .p-menuitem-text{line-height:1}.p-menubar .p-menuitem{position:relative}.p-menubar-root-list{align-items:center;display:flex}.p-menubar-root-list>li ul{display:none;z-index:1}.p-menubar-root-list>.p-menuitem-active>p-menubarsub>.p-submenu-list{display:block}.p-menubar .p-submenu-list{display:none;position:absolute;z-index:1}.p-menubar .p-submenu-list>.p-menuitem-active>p-menubarsub>.p-submenu-list{display:block;left:100%;top:0}.p-menubar .p-submenu-list .p-menuitem-link .p-submenu-icon{margin-left:auto}.p-menubar .p-menubar-custom,.p-menubar .p-menubar-end{-ms-grid-row-align:center;align-self:center;margin-left:auto}.p-menubar-button{align-items:center;cursor:pointer;display:none;justify-content:center}"] },] } ]; Menubar.ctorParameters = () => [ { type: ElementRef }, { type: Renderer2 }, { type: ChangeDetectorRef } ]; Menubar.propDecorators = { model: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], autoDisplay: [{ type: Input }], templates: [{ type: ContentChildren, args: [PrimeTemplate,] }], menubutton: [{ type: ViewChild, args: ['menubutton',] }], rootmenu: [{ type: ViewChild, args: ['rootmenu',] }] }; class MenubarModule { } MenubarModule.decorators = [ { type: NgModule, args: [{ imports: [CommonModule, RouterModule, RippleModule], exports: [Menubar, RouterModule], declarations: [Menubar, MenubarSub] },] } ]; /** * Generated bundle index. Do not edit. */ export { Menubar, MenubarModule, MenubarSub }; //# sourceMappingURL=primeng-menubar.js.map