import { trigger, transition, style, animate } from '@angular/animations'; import * as i1 from '@angular/common'; import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common'; import * as i0 from '@angular/core'; import { input, EventEmitter, effect, forwardRef, booleanAttribute, numberAttribute, Component, ViewEncapsulation, Inject, Input, Output, ViewChild, signal, PLATFORM_ID, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core'; import * as i2 from '@angular/router'; import { RouterModule } from '@angular/router'; import * as i5 from 'primeng/api'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom'; import { AngleRightIcon } from 'primeng/icons/angleright'; import * as i3 from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple'; import * as i4 from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip'; import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; class TieredMenuSub { el; renderer; tieredMenu; items; itemTemplate; root = false; autoDisplay; autoZIndex = true; baseZIndex = 0; popup; menuId; ariaLabel; ariaLabelledBy; level = 0; focusedItemId; activeItemPath = input([]); tabindex = 0; itemClick = new EventEmitter(); itemMouseEnter = new EventEmitter(); menuFocus = new EventEmitter(); menuBlur = new EventEmitter(); menuKeydown = new EventEmitter(); sublistViewChild; constructor(el, renderer, tieredMenu) { this.el = el; this.renderer = renderer; this.tieredMenu = tieredMenu; effect(() => { const path = this.activeItemPath(); if (ObjectUtils.isNotEmpty(path)) { this.positionSubmenu(); } }); } ngAfterContentInit() { this.positionSubmenu(); } positionSubmenu() { if (isPlatformBrowser(this.tieredMenu.platformId)) { const sublist = this.sublistViewChild && this.sublistViewChild.nativeElement; if (sublist && !DomHandler.hasClass(sublist, 'p-submenu-list-flipped')) { const parentItem = sublist.parentElement.parentElement; const containerOffset = DomHandler.getOffset(parentItem); const viewport = DomHandler.getViewport(); const sublistWidth = sublist.offsetParent ? sublist.offsetWidth : DomHandler.getOuterWidth(sublist); const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]); if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) { DomHandler.addClass(sublist, 'p-submenu-list-flipped'); } } } } getItemProp(processedItem, name, params = null) { return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; } getItemId(processedItem) { return processedItem.item?.id ?? `${this.menuId}_${processedItem.key}`; } getItemKey(processedItem) { return this.getItemId(processedItem); } getItemClass(processedItem) { return { ...this.getItemProp(processedItem, 'class'), 'p-menuitem': true, 'p-highlight': this.isItemActive(processedItem), 'p-menuitem-active': this.isItemActive(processedItem), 'p-focus': this.isItemFocused(processedItem), 'p-disabled': this.isItemDisabled(processedItem) }; } getItemLabel(processedItem) { return this.getItemProp(processedItem, 'label'); } getSeparatorItemClass(processedItem) { return { ...this.getItemProp(processedItem, 'class'), 'p-menuitem-separator': true }; } getAriaSetSize() { return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length; } getAriaPosInset(index) { return (index - this.items.slice(0, index).filter((processedItem) => { const isItemVisible = this.isItemVisible(processedItem); const isVisibleSeparator = isItemVisible && this.getItemProp(processedItem, 'separator'); return !isItemVisible || isVisibleSeparator; }).length + 1); } isItemVisible(processedItem) { return this.getItemProp(processedItem, 'visible') !== false; } isItemActive(processedItem) { if (this.activeItemPath()) { return this.activeItemPath().some((path) => path.key === processedItem.key); } } isItemDisabled(processedItem) { return this.getItemProp(processedItem, 'disabled'); } isItemFocused(processedItem) { return this.focusedItemId === this.getItemId(processedItem); } isItemGroup(processedItem) { return ObjectUtils.isNotEmpty(processedItem.items); } onItemMouseEnter(param) { if (this.autoDisplay) { const { event, processedItem } = param; this.itemMouseEnter.emit({ originalEvent: event, processedItem }); } } onItemClick(event, processedItem) { this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item }); this.itemClick.emit({ originalEvent: event, processedItem, isFocus: true }); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TieredMenuSub, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: forwardRef(() => TieredMenu) }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.7", type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoDisplay: { classPropertyName: "autoDisplay", publicName: "autoDisplay", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: false, isRequired: false, transformFunction: numberAttribute }, focusedItemId: { classPropertyName: "focusedItemId", publicName: "focusedItemId", isSignal: false, isRequired: false, transformFunction: null }, activeItemPath: { classPropertyName: "activeItemPath", publicName: "activeItemPath", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute } }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true, static: true }], ngImport: i0, template: ` `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => i2.RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(() => i4.Tooltip), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(() => AngleRightIcon), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(() => TieredMenuSub), selector: "p-tieredMenuSub", inputs: ["items", "itemTemplate", "root", "autoDisplay", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TieredMenuSub, decorators: [{ type: Component, args: [{ selector: 'p-tieredMenuSub', template: ` `, encapsulation: ViewEncapsulation.None, host: { class: 'p-element' } }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TieredMenu, decorators: [{ type: Inject, args: [forwardRef(() => TieredMenu)] }] }], propDecorators: { items: [{ type: Input }], itemTemplate: [{ type: Input }], root: [{ type: Input, args: [{ transform: booleanAttribute }] }], autoDisplay: [{ type: Input, args: [{ transform: booleanAttribute }] }], autoZIndex: [{ type: Input, args: [{ transform: booleanAttribute }] }], baseZIndex: [{ type: Input, args: [{ transform: numberAttribute }] }], popup: [{ type: Input, args: [{ transform: booleanAttribute }] }], menuId: [{ type: Input }], ariaLabel: [{ type: Input }], ariaLabelledBy: [{ type: Input }], level: [{ type: Input, args: [{ transform: numberAttribute }] }], focusedItemId: [{ type: Input }], tabindex: [{ type: Input, args: [{ transform: numberAttribute }] }], itemClick: [{ type: Output }], itemMouseEnter: [{ type: Output }], menuFocus: [{ type: Output }], menuBlur: [{ type: Output }], menuKeydown: [{ type: Output }], sublistViewChild: [{ type: ViewChild, args: ['sublist', { static: true }] }] } }); /** * TieredMenu displays submenus in nested overlays. * @group Components */ class TieredMenu { document; platformId; el; renderer; cd; config; overlayService; /** * An array of menuitems. * @group Props */ set model(value) { this._model = value; this._processedItems = this.createProcessedItems(this._model || []); } get model() { return this._model; } /** * Defines if menu would displayed as a popup. * @group Props */ popup; /** * Inline style of the component. * @group Props */ style; /** * Style class of the component. * @group Props */ styleClass; /** * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element. * @group Props */ appendTo; /** * Whether to automatically manage layering. * @group Props */ autoZIndex = true; /** * Base zIndex value to use in layering. * @group Props */ baseZIndex = 0; /** * Whether to show a root submenu on mouse over. * @defaultValue true * @group Props */ autoDisplay = true; /** * Transition options of the show animation. * @group Props */ showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)'; /** * Transition options of the hide animation. * @group Props */ hideTransitionOptions = '.1s linear'; /** * Current id state as a string. * @group Props */ id; /** * Defines a string value that labels an interactive element. * @group Props */ ariaLabel; /** * Identifier of the underlying input element. * @group Props */ ariaLabelledBy; /** * When present, it specifies that the component should be disabled. * @group Props */ disabled = false; /** * Index of the element in tabbing order. * @group Props */ tabindex = 0; /** * Callback to invoke when overlay menu is shown. * @group Emits */ onShow = new EventEmitter(); /** * Callback to invoke when overlay menu is hidden. * @group Emits */ onHide = new EventEmitter(); templates; rootmenu; containerViewChild; submenuIconTemplate; itemTemplate; container; outsideClickListener; resizeListener; scrollHandler; target; relatedTarget; visible; relativeAlign; dirty = false; focused = false; activeItemPath = signal([]); number = signal(0); focusedItemInfo = signal({ index: -1, level: 0, parentKey: '', item: null }); searchValue = ''; searchTimeout; _processedItems; _model; get visibleItems() { const processedItem = this.activeItemPath().find((p) => p.key === this.focusedItemInfo().parentKey); return processedItem ? processedItem.items : this.processedItems; } get processedItems() { if (!this._processedItems || !this._processedItems.length) { this._processedItems = this.createProcessedItems(this.model || []); } return this._processedItems; } get focusedItemId() { const focusedItemInfo = this.focusedItemInfo(); return focusedItemInfo.item?.id ? focusedItemInfo.item.id : focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : ''}_${focusedItemInfo.index}` : null; } constructor(document, platformId, el, renderer, cd, config, overlayService) { this.document = document; this.platformId = platformId; this.el = el; this.renderer = renderer; this.cd = cd; this.config = config; this.overlayService = overlayService; effect(() => { const path = this.activeItemPath(); if (ObjectUtils.isNotEmpty(path)) { this.bindOutsideClickListener(); this.bindResizeListener(); } else { this.unbindOutsideClickListener(); this.unbindResizeListener(); } }); } ngOnInit() { this.id = this.id || UniqueComponentId(); } ngAfterContentInit() { this.templates?.forEach((item) => { switch (item.getType()) { case 'submenuicon': this.submenuIconTemplate = item.template; break; case 'item': this.itemTemplate = item.template; break; default: this.itemTemplate = item.template; break; } }); } createProcessedItems(items, level = 0, parent = {}, parentKey = '') { const processedItems = []; items && items.forEach((item, index) => { const key = (parentKey !== '' ? parentKey + '_' : '') + index; const newItem = { item, index, level, key, parent, parentKey }; newItem['items'] = this.createProcessedItems(item.items, level + 1, newItem, key); processedItems.push(newItem); }); return processedItems; } getItemProp(item, name) { return item ? ObjectUtils.getItemValue(item[name]) : undefined; } getProccessedItemLabel(processedItem) { return processedItem ? this.getItemLabel(processedItem.item) : undefined; } getItemLabel(item) { return this.getItemProp(item, 'label'); } isProcessedItemGroup(processedItem) { return processedItem && ObjectUtils.isNotEmpty(processedItem.items); } isSelected(processedItem) { return this.activeItemPath().some((p) => p.key === processedItem.key); } isValidSelectedItem(processedItem) { return this.isValidItem(processedItem) && this.isSelected(processedItem); } isValidItem(processedItem) { return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item); } isItemDisabled(item) { return this.getItemProp(item, 'disabled'); } isItemVisible(item) { return this.getItemProp(item, 'visible') !== false; } isItemSeparator(item) { return this.getItemProp(item, 'separator'); } isItemMatched(processedItem) { return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase()); } isProccessedItemGroup(processedItem) { return processedItem && ObjectUtils.isNotEmpty(processedItem.items); } onOverlayClick(event) { if (this.popup) { this.overlayService.add({ originalEvent: event, target: this.el.nativeElement }); } } onItemClick(event) { const { originalEvent, processedItem } = event; const grouped = this.isProcessedItemGroup(processedItem); const root = ObjectUtils.isEmpty(processedItem.parent); const selected = this.isSelected(processedItem); if (selected) { const { index, key, level, parentKey, item } = processedItem; this.activeItemPath.set(this.activeItemPath().filter((p) => key !== p.key && key.startsWith(p.key))); this.focusedItemInfo.set({ index, level, parentKey, item }); this.dirty = true; DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); } else { if (grouped) { this.onItemChange(event); } else { const rootProcessedItem = root ? processedItem : this.activeItemPath().find((p) => p.parentKey === ''); this.hide(originalEvent); this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1); DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); } } } onItemMouseEnter(event) { if (!DomHandler.isTouchDevice()) { if (this.dirty) { this.onItemChange(event); } } else { this.onItemChange({ event, processedItem: event.processedItem, focus: this.autoDisplay }); } } onKeyDown(event) { const metaKey = event.metaKey || event.ctrlKey; switch (event.code) { case 'ArrowDown': this.onArrowDownKey(event); break; case 'ArrowUp': this.onArrowUpKey(event); break; case 'ArrowLeft': this.onArrowLeftKey(event); break; case 'ArrowRight': this.onArrowRightKey(event); break; case 'Home': this.onHomeKey(event); break; case 'End': this.onEndKey(event); break; case 'Space': this.onSpaceKey(event); break; case 'Enter': this.onEnterKey(event); break; case 'Escape': this.onEscapeKey(event); break; case 'Tab': this.onTabKey(event); break; case 'PageDown': case 'PageUp': case 'Backspace': case 'ShiftLeft': case 'ShiftRight': //NOOP break; default: if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { this.searchItems(event, event.key); } break; } } onArrowDownKey(event) { const itemIndex = this.focusedItemInfo().index !== -1 ? this.findNextItemIndex(this.focusedItemInfo().index) : this.findFirstFocusedItemIndex(); this.changeFocusedItemIndex(event, itemIndex); event.preventDefault(); } onArrowRightKey(event) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; const grouped = this.isProccessedItemGroup(processedItem); const item = processedItem?.item; if (grouped) { this.onItemChange({ originalEvent: event, processedItem }); this.focusedItemInfo.set({ index: -1, parentKey: processedItem.key, item }); this.searchValue = ''; this.onArrowDownKey(event); } event.preventDefault(); } onArrowUpKey(event) { if (event.altKey) { if (this.focusedItemInfo().index !== -1) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; const grouped = this.isProccessedItemGroup(processedItem); !grouped && this.onItemChange({ originalEvent: event, processedItem }); } this.popup && this.hide(event, true); event.preventDefault(); } else { const itemIndex = this.focusedItemInfo().index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo().index) : this.findLastFocusedItemIndex(); this.changeFocusedItemIndex(event, itemIndex); event.preventDefault(); } } onArrowLeftKey(event) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; const parentItem = this.activeItemPath().find((p) => p.key === processedItem.parentKey); const root = ObjectUtils.isEmpty(processedItem.parent); if (!root) { this.focusedItemInfo.set({ index: -1, parentKey: parentItem ? parentItem.parentKey : '', item: processedItem.item }); this.searchValue = ''; this.onArrowDownKey(event); } const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== this.focusedItemInfo().parentKey); this.activeItemPath.set(activeItemPath); event.preventDefault(); } onHomeKey(event) { this.changeFocusedItemIndex(event, this.findFirstItemIndex()); event.preventDefault(); } onEndKey(event) { this.changeFocusedItemIndex(event, this.findLastItemIndex()); event.preventDefault(); } onSpaceKey(event) { this.onEnterKey(event); } onEscapeKey(event) { this.hide(event, true); this.focusedItemInfo().index = this.findFirstFocusedItemIndex(); event.preventDefault(); } onTabKey(event) { if (this.focusedItemInfo().index !== -1) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; const grouped = this.isProccessedItemGroup(processedItem); !grouped && this.onItemChange({ originalEvent: event, processedItem }); } this.hide(); } onEnterKey(event) { if (this.focusedItemInfo().index !== -1) { const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]'); anchorElement ? anchorElement.click() : element && element.click(); if (!this.popup) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; const grouped = this.isProccessedItemGroup(processedItem); !grouped && (this.focusedItemInfo().index = this.findFirstFocusedItemIndex()); } } event.preventDefault(); } onItemChange(event) { const { processedItem, isFocus } = event; if (ObjectUtils.isEmpty(processedItem)) return; const { index, key, level, parentKey, items, item } = processedItem; const grouped = ObjectUtils.isNotEmpty(items); const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== parentKey && p.parentKey !== key); grouped && activeItemPath.push(processedItem); this.focusedItemInfo.set({ index, level, parentKey, item }); this.activeItemPath.set(activeItemPath); grouped && (this.dirty = true); isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); } onMenuFocus(event) { this.focused = true; if (this.focusedItemInfo().index === -1 && !this.popup) { // this.onArrowDownKey(event); } } onMenuBlur(event) { this.focused = false; this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null }); this.searchValue = ''; this.dirty = false; } onOverlayAnimationStart(event) { switch (event.toState) { case 'visible': if (this.popup) { this.container = event.element; this.moveOnTop(); this.onShow.emit({}); this.appendOverlay(); this.alignOverlay(); this.bindOutsideClickListener(); this.bindResizeListener(); this.bindScrollListener(); DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); this.scrollInView(); } break; case 'void': this.onOverlayHide(); this.onHide.emit({}); break; } } alignOverlay() { if (this.relativeAlign) DomHandler.relativePosition(this.container, this.target); else DomHandler.absolutePosition(this.container, this.target); } onOverlayAnimationEnd(event) { switch (event.toState) { case 'void': ZIndexUtils.clear(event.element); break; } } appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container); else DomHandler.appendChild(this.container, this.appendTo); } } restoreOverlayAppend() { if (this.container && this.appendTo) { this.renderer.appendChild(this.el.nativeElement, this.container); } } moveOnTop() { if (this.autoZIndex) { ZIndexUtils.set('menu', this.container, this.baseZIndex + this.config.zIndex.menu); } } /** * Hides the popup menu. * @group Method */ hide(event, isFocus) { if (this.popup) { this.onHide.emit({}); this.visible = false; } this.activeItemPath.set([]); this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' }); isFocus && DomHandler.focus(this.relatedTarget || this.target || this.rootmenu.sublistViewChild.nativeElement); this.dirty = false; } /** * Toggles the visibility of the popup menu. * @param {Event} event - Browser event. * @group Method */ toggle(event) { this.visible ? this.hide(event, true) : this.show(event); } /** * Displays the popup menu. * @param {Event} even - Browser event. * @group Method */ show(event, isFocus) { if (this.popup) { this.visible = true; this.target = this.target || event.currentTarget; this.relatedTarget = event.relatedTarget || null; this.relativeAlign = event?.relativeAlign || null; } this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' }); isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); this.cd.markForCheck(); } searchItems(event, char) { this.searchValue = (this.searchValue || '') + char; let itemIndex = -1; let matched = false; if (this.focusedItemInfo().index !== -1) { itemIndex = this.visibleItems.slice(this.focusedItemInfo().index).findIndex((processedItem) => this.isItemMatched(processedItem)); itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo().index).findIndex((processedItem) => this.isItemMatched(processedItem)) : itemIndex + this.focusedItemInfo().index; } else { itemIndex = this.visibleItems.findIndex((processedItem) => this.isItemMatched(processedItem)); } if (itemIndex !== -1) { matched = true; } if (itemIndex === -1 && this.focusedItemInfo().index === -1) { itemIndex = this.findFirstFocusedItemIndex(); } if (itemIndex !== -1) { this.changeFocusedItemIndex(event, itemIndex); } if (this.searchTimeout) { clearTimeout(this.searchTimeout); } this.searchTimeout = setTimeout(() => { this.searchValue = ''; this.searchTimeout = null; }, 500); return matched; } findLastFocusedItemIndex() { const selectedIndex = this.findSelectedItemIndex(); return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex; } findLastItemIndex() { return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); } findPrevItemIndex(index) { const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; return matchedItemIndex > -1 ? matchedItemIndex : index; } findNextItemIndex(index) { const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1; return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index; } findFirstFocusedItemIndex() { const selectedIndex = this.findSelectedItemIndex(); return selectedIndex < 0 ? this.findFirstItemIndex() : selectedIndex; } findFirstItemIndex() { return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem)); } findSelectedItemIndex() { return this.visibleItems.findIndex((processedItem) => this.isValidSelectedItem(processedItem)); } changeFocusedItemIndex(event, index) { if (this.focusedItemInfo().index !== index) { const focusedItemInfo = this.focusedItemInfo(); this.focusedItemInfo.set({ ...focusedItemInfo, item: this.visibleItems[index].item, index }); this.scrollInView(); } } scrollInView(index = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId; const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } } bindScrollListener() { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, (event) => { if (this.visible) { this.hide(event, true); } }); } this.scrollHandler.bindScrollListener(); } unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); this.scrollHandler = null; } } bindResizeListener() { if (isPlatformBrowser(this.platformId)) { if (!this.resizeListener) { this.resizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => { if (!DomHandler.isTouchDevice()) { this.hide(event, true); } }); } } } bindOutsideClickListener() { if (isPlatformBrowser(this.platformId)) { if (!this.outsideClickListener) { this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => { const isOutsideContainer = this.containerViewChild && !this.containerViewChild.nativeElement.contains(event.target); const isOutsideTarget = this.popup ? !(this.target && (this.target === event.target || this.target.contains(event.target))) : true; if (isOutsideContainer && isOutsideTarget) { this.hide(); } }); } } } unbindOutsideClickListener() { if (this.outsideClickListener) { document.removeEventListener('click', this.outsideClickListener); this.outsideClickListener = null; } } unbindResizeListener() { if (this.resizeListener) { this.resizeListener(); this.resizeListener = null; } } onOverlayHide() { this.unbindOutsideClickListener(); this.unbindResizeListener(); this.unbindScrollListener(); if (!this.cd.destroyed) { 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(); } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TieredMenu, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.PrimeNGConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: TieredMenu, selector: "p-tieredMenu", inputs: { model: "model", popup: ["popup", "popup", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], autoDisplay: ["autoDisplay", "autoDisplay", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute] }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
`, isInline: true, styles: ["@layer primeng{.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:not(svg){margin-left:auto}.p-tieredmenu .p-menuitem-link .p-icon-wrapper{margin-left:auto}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list{display:block;left:100%;top:0}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list.p-submenu-list-flipped{left:-100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: ["items", "itemTemplate", "root", "autoDisplay", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], 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: "17.3.7", 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: ["@layer primeng{.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:not(svg){margin-left:auto}.p-tieredmenu .p-menuitem-link .p-icon-wrapper{margin-left:auto}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list{display:block;left:100%;top:0}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list.p-submenu-list-flipped{left:-100%}}\n"] }] }], ctorParameters: () => [{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT] }] }, { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID] }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.PrimeNGConfig }, { type: i5.OverlayService }], propDecorators: { model: [{ type: Input }], popup: [{ type: Input, args: [{ transform: booleanAttribute }] }], style: [{ type: Input }], styleClass: [{ type: Input }], appendTo: [{ type: Input }], autoZIndex: [{ type: Input, args: [{ transform: booleanAttribute }] }], baseZIndex: [{ type: Input, args: [{ transform: numberAttribute }] }], autoDisplay: [{ type: Input, args: [{ transform: booleanAttribute }] }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], id: [{ type: Input }], ariaLabel: [{ type: Input }], ariaLabelledBy: [{ type: Input }], disabled: [{ type: Input, args: [{ transform: booleanAttribute }] }], tabindex: [{ type: Input, args: [{ transform: numberAttribute }] }], onShow: [{ type: Output }], onHide: [{ type: Output }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }], rootmenu: [{ type: ViewChild, args: ['rootmenu'] }], containerViewChild: [{ type: ViewChild, args: ['container'] }] } }); class TieredMenuModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenu, TieredMenuSub], imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule], exports: [TieredMenu, RouterModule, TooltipModule, SharedModule] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TieredMenuModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule, RouterModule, TooltipModule, SharedModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TieredMenuModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule], exports: [TieredMenu, RouterModule, TooltipModule, SharedModule], declarations: [TieredMenu, TieredMenuSub] }] }] }); /** * Generated bundle index. Do not edit. */ export { TieredMenu, TieredMenuModule, TieredMenuSub }; //# sourceMappingURL=primeng-tieredmenu.mjs.map