import * as i0 from '@angular/core'; import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, NgModule } from '@angular/core'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom'; import * as i4 from '@angular/router'; import { RouterModule } from '@angular/router'; import * as i3 from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple'; import { trigger, transition, style, animate } from '@angular/animations'; import { ZIndexUtils } from 'primeng/utils'; import * as i2 from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip'; import * as i5 from 'primeng/api'; class TieredMenuSub { constructor(el, renderer, cd) { this.el = el; this.renderer = renderer; this.cd = cd; this.autoZIndex = true; this.baseZIndex = 0; this.leafClick = new EventEmitter(); this.keydownItem = 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.popup) { this.activeItem = item; this.bindDocumentClickListener(); } } else { this.activeItem = item; this.bindDocumentClickListener(); } } onLeafClick() { this.activeItem = null; if (this.root) { this.unbindDocumentClickListener(); } this.leafClick.emit(); } onItemKeyDown(event, item) { let listItem = event.currentTarget.parentElement; switch (event.key) { case 'ArrowDown': var nextItem = this.findNextItem(listItem); if (nextItem) { nextItem.children[0].focus(); } event.preventDefault(); break; case 'ArrowUp': var prevItem = this.findPrevItem(listItem); if (prevItem) { prevItem.children[0].focus(); } event.preventDefault(); break; case 'ArrowRight': if (item.items) { this.activeItem = item; if (this.root) { this.bindDocumentClickListener(); } setTimeout(() => { listItem.children[1].children[0].children[0].children[0].focus(); }, 50); } event.preventDefault(); break; default: break; } this.keydownItem.emit({ originalEvent: event, element: listItem }); } findNextItem(item) { let nextItem = item.nextElementSibling; if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem; else return null; } findPrevItem(item) { let prevItem = item.previousElementSibling; if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem; else return null; } onChildItemKeyDown(event) { if (event.originalEvent.key === 'ArrowLeft') { this.activeItem = null; if (this.root) { this.unbindDocumentClickListener(); } event.element.parentElement.parentElement.parentElement.children[0].focus(); } } 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(); } } TieredMenuSub.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TieredMenuSub, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); TieredMenuSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: { item: "item", root: "root", autoDisplay: "autoDisplay", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", mobileActive: "mobileActive", popup: "popup", parentActive: "parentActive" }, outputs: { leafClick: "leafClick", keydownItem: "keydownItem" }, host: { classAttribute: "p-element" }, ngImport: i0, template: ` `, isInline: true, components: [{ type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: ["item", "root", "autoDisplay", "autoZIndex", "baseZIndex", "mobileActive", "popup", "parentActive"], outputs: ["leafClick", "keydownItem"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.Ripple, selector: "[pRipple]" }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TieredMenuSub, decorators: [{ type: Component, args: [{ selector: 'p-tieredMenuSub', template: ` `, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' } }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{ type: Input }], root: [{ type: Input }], autoDisplay: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], mobileActive: [{ type: Input }], popup: [{ type: Input }], parentActive: [{ type: Input }], leafClick: [{ type: Output }], keydownItem: [{ type: Output }] } }); class TieredMenu { constructor(el, renderer, cd, config, overlayService) { this.el = el; this.renderer = renderer; this.cd = cd; this.config = config; this.overlayService = overlayService; this.autoZIndex = true; this.baseZIndex = 0; this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)'; this.hideTransitionOptions = '.1s linear'; } toggle(event) { if (this.visible) this.hide(); else this.show(event); this.preventDocumentDefault = true; } show(event) { this.target = event.currentTarget; this.visible = true; this.parentActive = true; this.preventDocumentDefault = true; this.cd.markForCheck(); } onOverlayClick(event) { if (this.popup) { this.overlayService.add({ originalEvent: event, target: this.el.nativeElement }); } this.preventDocumentDefault = true; } onOverlayAnimationStart(event) { switch (event.toState) { case 'visible': if (this.popup) { this.container = event.element; this.moveOnTop(); this.appendOverlay(); DomHandler.absolutePosition(this.container, this.target); this.bindDocumentClickListener(); this.bindDocumentResizeListener(); this.bindScrollListener(); } break; case 'void': this.onOverlayHide(); break; } } onOverlayAnimationEnd(event) { switch (event.toState) { case 'void': ZIndexUtils.clear(event.element); break; } } appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') document.body.appendChild(this.container); else DomHandler.appendChild(this.container, this.appendTo); } } restoreOverlayAppend() { if (this.container && this.appendTo) { this.el.nativeElement.appendChild(this.container); } } moveOnTop() { if (this.autoZIndex) { ZIndexUtils.set('menu', this.container, this.baseZIndex + this.config.zIndex.menu); } } hide() { this.visible = false; this.parentActive = false; this.cd.markForCheck(); } onWindowResize() { this.hide(); } onLeafClick() { if (this.popup) { this.hide(); } this.unbindDocumentClickListener(); } bindDocumentClickListener() { if (!this.documentClickListener) { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => { if (!this.preventDocumentDefault && this.popup) { this.hide(); } this.preventDocumentDefault = false; }); } } unbindDocumentClickListener() { if (this.documentClickListener) { this.documentClickListener(); this.documentClickListener = null; } } bindDocumentResizeListener() { this.documentResizeListener = this.onWindowResize.bind(this); window.addEventListener('resize', this.documentResizeListener); } unbindDocumentResizeListener() { if (this.documentResizeListener) { window.removeEventListener('resize', this.documentResizeListener); this.documentResizeListener = null; } } bindScrollListener() { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => { if (this.visible) { this.hide(); } }); } this.scrollHandler.bindScrollListener(); } unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); } } onOverlayHide() { this.unbindDocumentClickListener(); this.unbindDocumentResizeListener(); this.unbindScrollListener(); this.preventDocumentDefault = false; this.target = null; } ngOnDestroy() { if (this.popup) { if (this.scrollHandler) { this.scrollHandler.destroy(); this.scrollHandler = null; } if (this.container && this.autoZIndex) { ZIndexUtils.clear(this.container); } this.restoreOverlayAppend(); this.onOverlayHide(); } } } TieredMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TieredMenu, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.PrimeNGConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); TieredMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TieredMenu, selector: "p-tieredMenu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", autoDisplay: "autoDisplay", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
`, isInline: true, styles: [".p-tieredmenu-overlay{position:absolute;top:0;left:0}.p-tieredmenu ul{margin:0;padding:0;list-style:none}.p-tieredmenu .p-submenu-list{position:absolute;min-width:100%;z-index:1;display:none}.p-tieredmenu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-tieredmenu .p-menuitem-text{line-height:1}.p-tieredmenu .p-menuitem{position:relative}.p-tieredmenu .p-menuitem-link .p-submenu-icon{margin-left:auto}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list{display:block;left:100%;top:0}\n"], components: [{ type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: ["item", "root", "autoDisplay", "autoZIndex", "baseZIndex", "mobileActive", "popup", "parentActive"], outputs: ["leafClick", "keydownItem"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TieredMenu, decorators: [{ type: Component, args: [{ selector: 'p-tieredMenu', template: `
`, animations: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-tieredmenu-overlay{position:absolute;top:0;left:0}.p-tieredmenu ul{margin:0;padding:0;list-style:none}.p-tieredmenu .p-submenu-list{position:absolute;min-width:100%;z-index:1;display:none}.p-tieredmenu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-tieredmenu .p-menuitem-text{line-height:1}.p-tieredmenu .p-menuitem{position:relative}.p-tieredmenu .p-menuitem-link .p-submenu-icon{margin-left:auto}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list{display:block;left:100%;top:0}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.PrimeNGConfig }, { type: i5.OverlayService }]; }, propDecorators: { model: [{ type: Input }], popup: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], appendTo: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], autoDisplay: [{ type: Input }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }] } }); class TieredMenuModule { } TieredMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); TieredMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenu, TieredMenuSub], imports: [CommonModule, RouterModule, RippleModule, TooltipModule], exports: [TieredMenu, RouterModule, TooltipModule] }); TieredMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TieredMenuModule, imports: [[CommonModule, RouterModule, RippleModule, TooltipModule], RouterModule, TooltipModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TieredMenuModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, RouterModule, RippleModule, TooltipModule], exports: [TieredMenu, RouterModule, TooltipModule], declarations: [TieredMenu, TieredMenuSub] }] }] }); /** * Generated bundle index. Do not edit. */ export { TieredMenu, TieredMenuModule, TieredMenuSub };