primeng
Version:
[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [
{"version":3,"file":"primeng-contextmenu.mjs","sources":["../../src/app/components/contextmenu/contextmenu.ts","../../src/app/components/contextmenu/primeng-contextmenu.ts"],"sourcesContent":["import { AnimationEvent, animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Inject,\n Input,\n NgModule,\n OnDestroy,\n OnInit,\n Output,\n PLATFORM_ID,\n QueryList,\n Renderer2,\n TemplateRef,\n ViewChild,\n ViewContainerRef,\n ViewEncapsulation,\n ViewRef,\n booleanAttribute,\n effect,\n forwardRef,\n numberAttribute,\n signal\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { MenuItem, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { DomHandler } from 'primeng/dom';\nimport { AngleRightIcon } from 'primeng/icons/angleright';\nimport { RippleModule } from 'primeng/ripple';\nimport { TooltipModule } from 'primeng/tooltip';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';\n\n@Component({\n selector: 'p-contextMenuSub',\n template: `\n <ul\n *ngIf=\"root ? true : visible\"\n #sublist\n role=\"menu\"\n [ngClass]=\"{ 'p-submenu-list': !root, 'p-contextmenu-root-list': root }\"\n [@overlayAnimation]=\"visible\"\n (@overlayAnimation.start)=\"onEnter($event, sublist)\"\n [attr.id]=\"menuId + '_list'\"\n [tabindex]=\"tabindex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledBy]=\"ariaLabelledBy\"\n [attr.aria-activedescendant]=\"focusedItemId\"\n [attr.aria-orientation]=\"'vertical'\"\n [attr.data-pc-section]=\"'menu'\"\n (keydown)=\"menuKeydown.emit($event)\"\n (focus)=\"menuFocus.emit($event)\"\n (blur)=\"menuBlur.emit($event)\"\n >\n <ng-template ngFor let-processedItem [ngForOf]=\"items\" let-index=\"index\">\n <li\n *ngIf=\"isItemVisible(processedItem) && getItemProp(processedItem, 'separator')\"\n [attr.id]=\"getItemId(processedItem)\"\n [style]=\"getItemProp(processedItem, 'style')\"\n [ngClass]=\"getSeparatorItemClass(processedItem)\"\n role=\"separator\"\n [attr.data-pc-section]=\"'separator'\"\n ></li>\n <li\n #listItem\n *ngIf=\"isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')\"\n role=\"menuitem\"\n [attr.id]=\"getItemId(processedItem)\"\n [attr.data-pc-section]=\"'menuitem'\"\n [attr.data-p-highlight]=\"isItemActive(processedItem)\"\n [attr.data-p-focused]=\"isItemFocused(processedItem)\"\n [attr.data-p-disabled]=\"isItemDisabled(processedItem)\"\n [attr.aria-label]=\"getItemLabel(processedItem)\"\n [attr.aria-disabled]=\"isItemDisabled(processedItem) || undefined\"\n [attr.aria-haspopup]=\"isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined\"\n [attr.aria-expanded]=\"isItemGroup(processedItem) ? isItemActive(processedItem) : undefined\"\n [attr.aria-level]=\"level + 1\"\n [attr.aria-setsize]=\"getAriaSetSize()\"\n [attr.aria-posinset]=\"getAriaPosInset(index)\"\n [ngStyle]=\"getItemProp(processedItem, 'style')\"\n [ngClass]=\"getItemClass(processedItem)\"\n [class]=\"getItemProp(processedItem, 'styleClass')\"\n pTooltip\n [tooltipOptions]=\"getItemProp(processedItem, 'tooltipOptions')\"\n >\n <div [attr.data-pc-section]=\"'content'\" class=\"p-menuitem-content\" (click)=\"onItemClick($event, processedItem)\" (mouseenter)=\"onItemMouseEnter({ $event, processedItem })\">\n <ng-container *ngIf=\"!itemTemplate\">\n <a\n *ngIf=\"!getItemProp(processedItem, 'routerLink')\"\n [attr.href]=\"getItemProp(processedItem, 'url')\"\n [attr.aria-hidden]=\"true\"\n [attr.data-automationid]=\"getItemProp(processedItem, 'automationId')\"\n [attr.data-pc-section]=\"'action'\"\n [target]=\"getItemProp(processedItem, 'target')\"\n [ngClass]=\"{ 'p-menuitem-link': true }\"\n [attr.tabindex]=\"-1\"\n pRipple\n >\n <span\n *ngIf=\"getItemProp(processedItem, 'icon')\"\n class=\"p-menuitem-icon\"\n [ngClass]=\"getItemProp(processedItem, 'icon')\"\n [ngStyle]=\"getItemProp(processedItem, 'iconStyle')\"\n [attr.data-pc-section]=\"'icon'\"\n [attr.aria-hidden]=\"true\"\n [attr.tabindex]=\"-1\"\n >\n </span>\n <span *ngIf=\"getItemProp(processedItem, 'escape'); else htmlLabel\" class=\"p-menuitem-text\" [attr.data-pc-section]=\"'label'\">\n {{ getItemLabel(processedItem) }}\n </span>\n <ng-template #htmlLabel>\n <span class=\"p-menuitem-text\" [innerHTML]=\"getItemLabel(processedItem)\" [attr.data-pc-section]=\"'label'\"></span>\n </ng-template>\n <span class=\"p-menuitem-badge\" *ngIf=\"getItemProp(processedItem, 'badge')\" [ngClass]=\"getItemProp(processedItem, 'badgeStyleClass')\">{{ getItemProp(processedItem, 'badge') }}</span>\n\n <ng-container *ngIf=\"isItemGroup(processedItem)\">\n <AngleRightIcon *ngIf=\"!contextMenu.submenuIconTemplate\" [styleClass]=\"'p-submenu-icon'\" [attr.data-pc-section]=\"'submenuicon'\" [attr.aria-hidden]=\"true\" />\n <ng-template *ngTemplateOutlet=\"contextMenu.submenuIconTemplate\" [attr.data-pc-section]=\"'submenuicon'\" [attr.aria-hidden]=\"true\"></ng-template>\n </ng-container>\n </a>\n <a\n *ngIf=\"getItemProp(processedItem, 'routerLink')\"\n [routerLink]=\"getItemProp(processedItem, 'routerLink')\"\n [attr.data-automationid]=\"getItemProp(processedItem, 'automationId')\"\n [attr.tabindex]=\"-1\"\n [attr.aria-hidden]=\"true\"\n [attr.data-pc-section]=\"'action'\"\n [queryParams]=\"getItemProp(processedItem, 'queryParams')\"\n [routerLinkActive]=\"'p-menuitem-link-active'\"\n [routerLinkActiveOptions]=\"getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }\"\n [target]=\"getItemProp(processedItem, 'target')\"\n [ngClass]=\"{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }\"\n [fragment]=\"getItemProp(processedItem, 'fragment')\"\n [queryParamsHandling]=\"getItemProp(processedItem, 'queryParamsHandling')\"\n [preserveFragment]=\"getItemProp(processedItem, 'preserveFragment')\"\n [skipLocationChange]=\"getItemProp(processedItem, 'skipLocationChange')\"\n [replaceUrl]=\"getItemProp(processedItem, 'replaceUrl')\"\n [state]=\"getItemProp(processedItem, 'state')\"\n pRipple\n >\n <span\n *ngIf=\"getItemProp(processedItem, 'icon')\"\n class=\"p-menuitem-icon\"\n [ngClass]=\"getItemProp(processedItem, 'icon')\"\n [ngStyle]=\"getItemProp(processedItem, 'iconStyle')\"\n [attr.data-pc-section]=\"'icon'\"\n [attr.aria-hidden]=\"true\"\n [attr.tabindex]=\"-1\"\n >\n </span>\n <span *ngIf=\"getItemProp(processedItem, 'escape'); else htmlLabel\" class=\"p-menuitem-text\" [attr.data-pc-section]=\"'label'\">\n {{ getItemLabel(processedItem) }}\n </span>\n <ng-template #htmlLabel>\n <span class=\"p-menuitem-text\" [innerHTML]=\"getItemLabel(processedItem)\" [attr.data-pc-section]=\"'label'\"></span>\n </ng-template>\n <span class=\"p-menuitem-badge\" *ngIf=\"getItemProp(processedItem, 'badge')\" [ngClass]=\"getItemProp(processedItem, 'badgeStyleClass')\">{{ getItemProp(processedItem, 'badge') }}</span>\n\n <ng-container *ngIf=\"isItemGroup(processedItem)\">\n <AngleRightIcon *ngIf=\"!contextMenu.submenuIconTemplate\" [styleClass]=\"'p-submenu-icon'\" [attr.data-pc-section]=\"'submenuicon'\" [attr.aria-hidden]=\"true\" />\n <ng-template *ngTemplateOutlet=\"contextMenu.submenuIconTemplate\" [attr.data-pc-section]=\"'submenuicon'\" [attr.aria-hidden]=\"true\"></ng-template>\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngIf=\"itemTemplate\">\n <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: processedItem.item }\"></ng-template>\n </ng-container>\n </div>\n\n <p-contextMenuSub\n *ngIf=\"isItemVisible(processedItem) && isItemGroup(processedItem)\"\n [items]=\"processedItem.items\"\n [itemTemplate]=\"itemTemplate\"\n [menuId]=\"menuId\"\n [visible]=\"isItemActive(processedItem) && isItemGroup(processedItem)\"\n [activeItemPath]=\"activeItemPath\"\n [focusedItemId]=\"focusedItemId\"\n [level]=\"level + 1\"\n (itemClick)=\"itemClick.emit($event)\"\n (itemMouseEnter)=\"onItemMouseEnter($event)\"\n ></p-contextMenuSub>\n </li>\n </ng-template>\n </ul>\n `,\n animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0 })]), transition(':leave', [style({ opacity: 0 })])])],\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'p-element'\n }\n})\nexport class ContextMenuSub {\n @Input({ transform: booleanAttribute }) visible: boolean = false;\n\n @Input() items: any[];\n\n @Input() itemTemplate: HTMLElement | undefined;\n\n @Input({ transform: booleanAttribute }) root: boolean | undefined = false;\n\n @Input({ transform: booleanAttribute }) autoZIndex: boolean = true;\n\n @Input({ transform: numberAttribute }) baseZIndex: number = 0;\n\n @Input({ transform: booleanAttribute }) popup: boolean | undefined;\n\n @Input() menuId: string | undefined;\n\n @Input() ariaLabel: string | undefined;\n\n @Input() ariaLabelledBy: string | undefined;\n\n @Input({ transform: numberAttribute }) level: number = 0;\n\n @Input() focusedItemId: string | undefined;\n\n @Input() activeItemPath: any[];\n\n @Input({ transform: numberAttribute }) tabindex: number = 0;\n\n @Output() itemClick: EventEmitter<any> = new EventEmitter();\n\n @Output() itemMouseEnter: EventEmitter<any> = new EventEmitter();\n\n @Output() menuFocus: EventEmitter<any> = new EventEmitter();\n\n @Output() menuBlur: EventEmitter<any> = new EventEmitter();\n\n @Output() menuKeydown: EventEmitter<any> = new EventEmitter();\n\n @ViewChild('sublist') sublistViewChild: ElementRef;\n\n constructor(\n @Inject(DOCUMENT) private document: Document,\n public el: ElementRef,\n public renderer: Renderer2,\n private cd: ChangeDetectorRef,\n @Inject(forwardRef(() => ContextMenu)) public contextMenu: ContextMenu,\n private ref: ViewContainerRef\n ) {}\n\n getItemProp(processedItem: any, name: string, params: any | null = null) {\n return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;\n }\n\n getItemId(processedItem: any): string {\n return processedItem.item && processedItem.item?.id ? processedItem.item.id : `${this.menuId}_${processedItem.key}`;\n }\n\n getItemKey(processedItem: any): string {\n return this.getItemId(processedItem);\n }\n\n getItemClass(processedItem: any) {\n return {\n ...this.getItemProp(processedItem, 'class'),\n 'p-menuitem': true,\n 'p-highlight': this.isItemActive(processedItem),\n 'p-menuitem-active': this.isItemActive(processedItem),\n 'p-focus': this.isItemFocused(processedItem),\n 'p-disabled': this.isItemDisabled(processedItem)\n };\n }\n\n getItemLabel(processedItem: any): string {\n return this.getItemProp(processedItem, 'label');\n }\n\n getSeparatorItemClass(processedItem: any) {\n return {\n ...this.getItemProp(processedItem, 'class'),\n 'p-menuitem-separator': true\n };\n }\n\n getAriaSetSize() {\n return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;\n }\n\n getAriaPosInset(index: number) {\n return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;\n }\n\n isItemVisible(processedItem: any): boolean {\n return this.getItemProp(processedItem, 'visible') !== false;\n }\n\n isItemActive(processedItem: any): boolean {\n if (this.activeItemPath) {\n return this.activeItemPath.some((path) => path.key === processedItem.key);\n }\n }\n\n isItemDisabled(processedItem: any): boolean {\n return this.getItemProp(processedItem, 'disabled');\n }\n\n isItemFocused(processedItem: any): boolean {\n return this.focusedItemId === this.getItemId(processedItem);\n }\n\n isItemGroup(processedItem: any): boolean {\n return ObjectUtils.isNotEmpty(processedItem.items);\n }\n\n onItemMouseEnter(param: any) {\n const { event, processedItem } = param;\n this.itemMouseEnter.emit({ originalEvent: event, processedItem });\n }\n\n onItemClick(event: any, processedItem: any) {\n this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });\n this.itemClick.emit({ originalEvent: event, processedItem, isFocus: true });\n }\n\n onEnter(event, sublist) {\n if (event.fromState === 'void' && event.toState) {\n const sublist = event.element;\n this.position(sublist);\n }\n }\n\n position(sublist) {\n const parentItem = sublist.parentElement.parentElement;\n const containerOffset = DomHandler.getOffset(sublist.parentElement.parentElement);\n const viewport = DomHandler.getViewport();\n const sublistWidth = sublist.offsetParent ? sublist.offsetWidth : DomHandler.getHiddenElementOuterWidth(sublist);\n const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);\n\n sublist.style.top = '0px';\n\n if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {\n sublist.style.left = -1 * sublistWidth + 'px';\n } else {\n sublist.style.left = itemOuterWidth + 'px';\n }\n }\n}\n/**\n * ContextMenu displays an overlay menu on right click of its target. Note that components like Table has special integration with ContextMenu.\n * @group Components\n */\n@Component({\n selector: 'p-contextMenu',\n template: `\n <div\n #container\n [attr.data-pc-section]=\"'root'\"\n [attr.data-pc-name]=\"'contextmenu'\"\n [attr.id]=\"id\"\n [ngClass]=\"{ 'p-contextmenu p-component': true, 'p-contextmenu-overlay': true }\"\n [class]=\"styleClass\"\n [ngStyle]=\"style\"\n [@overlayAnimation]=\"{ value: 'visible' }\"\n (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n *ngIf=\"visible()\"\n >\n <p-contextMenuSub\n #rootmenu\n [root]=\"true\"\n [items]=\"processedItems\"\n [itemTemplate]=\"itemTemplate\"\n [menuId]=\"id\"\n [tabindex]=\"!disabled ? tabindex : -1\"\n [ariaLabel]=\"ariaLabel\"\n [ariaLabelledBy]=\"ariaLabelledBy\"\n [baseZIndex]=\"baseZIndex\"\n [autoZIndex]=\"autoZIndex\"\n [visible]=\"submenuVisible()\"\n [focusedItemId]=\"focused ? focusedItemId : undefined\"\n [activeItemPath]=\"activeItemPath()\"\n (itemClick)=\"onItemClick($event)\"\n (menuFocus)=\"onMenuFocus($event)\"\n (menuBlur)=\"onMenuBlur($event)\"\n (menuKeydown)=\"onKeyDown($event)\"\n (itemMouseEnter)=\"onItemMouseEnter($event)\"\n ></p-contextMenuSub>\n </div>\n `,\n animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0 }), animate('250ms')]), transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])])],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./contextmenu.css'],\n host: {\n class: 'p-element'\n }\n})\nexport class ContextMenu implements OnInit, AfterContentInit, OnDestroy {\n /**\n * An array of menuitems.\n * @group Props\n */\n @Input() set model(value: MenuItem[] | undefined) {\n this._model = value;\n this._processedItems = this.createProcessedItems(this._model || []);\n }\n get model(): MenuItem[] | undefined {\n return this._model;\n }\n /**\n * Event for which the menu must be displayed.\n * @group Props\n */\n @Input() triggerEvent: string = 'contextmenu';\n /**\n * Local template variable name of the element to attach the context menu.\n * @group Props\n */\n @Input() target: HTMLElement | string | undefined;\n /**\n * Attaches the menu to document instead of a particular item.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) global: boolean;\n /**\n * Inline style of the component.\n * @group Props\n */\n @Input() style: { [klass: string]: any } | null | undefined;\n /**\n * Style class of the component.\n * @group Props\n */\n @Input() styleClass: string | undefined;\n /**\n * Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element.\n * @group Props\n */\n @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n /**\n * Whether to automatically manage layering.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) autoZIndex: boolean = true;\n /**\n * Base zIndex value to use in layering.\n * @group Props\n */\n @Input({ transform: numberAttribute }) baseZIndex: number = 0;\n /**\n * Current id state as a string.\n * @group Props\n */\n @Input() id: string | undefined;\n /**\n * Defines a string value that labels an interactive element.\n * @group Props\n */\n @Input() ariaLabel: string | undefined;\n /**\n * Identifier of the underlying input element.\n * @group Props\n */\n @Input() ariaLabelledBy: string | undefined;\n /**\n * Press delay in touch devices as miliseconds.\n * @group Props\n */\n @Input({ transform: numberAttribute }) pressDelay: number | undefined = 500;\n /**\n * Callback to invoke when overlay menu is shown.\n * @group Emits\n */\n @Output() onShow: EventEmitter<null> = new EventEmitter<null>();\n /**\n * Callback to invoke when overlay menu is hidden.\n * @group Emits\n */\n @Output() onHide: EventEmitter<null> = new EventEmitter<null>();\n\n @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n @ViewChild('rootmenu') rootmenu: ContextMenuSub | undefined;\n\n @ViewChild('container') containerViewChild: ElementRef<any> | undefined;\n\n submenuIconTemplate: Nullable<TemplateRef<any>>;\n\n itemTemplate: Nullable<TemplateRef<any>>;\n\n container: HTMLDivElement | undefined;\n\n outsideClickListener: VoidListener;\n\n resizeListener: VoidListener;\n\n triggerEventListener: VoidListener;\n\n documentClickListener: VoidListener;\n\n documentTriggerListener: VoidListener;\n\n touchEndListener: VoidListener;\n\n pageX: number;\n\n pageY: number;\n\n visible = signal(false);\n\n relativeAlign: boolean | undefined;\n\n private window: Window;\n\n focused: boolean = false;\n\n activeItemPath = signal<any>([]);\n\n focusedItemInfo = signal<any>({ index: -1, level: 0, parentKey: '', item: null });\n\n submenuVisible = signal<boolean>(false);\n\n searchValue: string = '';\n\n searchTimeout: any;\n\n _processedItems: any[];\n\n _model: MenuItem[] | undefined;\n\n pressTimer: any;\n\n get visibleItems() {\n const processedItem = this.activeItemPath().find((p) => p.key === this.focusedItemInfo().parentKey);\n\n return processedItem ? processedItem.items : this.processedItems;\n }\n\n get processedItems() {\n if (!this._processedItems || !this._processedItems.length) {\n this._processedItems = this.createProcessedItems(this.model || []);\n }\n return this._processedItems;\n }\n\n get focusedItemId() {\n const focusedItem = this.focusedItemInfo();\n return focusedItem.item && focusedItem.item?.id ? focusedItem.item.id : focusedItem.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(focusedItem.parentKey) ? '_' + focusedItem.parentKey : ''}_${focusedItem.index}` : null;\n }\n\n constructor(\n @Inject(DOCUMENT) private document: Document,\n @Inject(PLATFORM_ID) private platformId: any,\n public el: ElementRef,\n public renderer: Renderer2,\n public cd: ChangeDetectorRef,\n public config: PrimeNGConfig,\n public overlayService: OverlayService\n ) {\n this.window = this.document.defaultView as Window;\n effect(() => {\n const path = this.activeItemPath();\n\n if (ObjectUtils.isNotEmpty(path)) {\n this.bindGlobalListeners();\n } else if (!this.visible()) {\n this.unbindGlobalListeners();\n }\n });\n }\n\n ngOnInit() {\n this.id = this.id || UniqueComponentId();\n this.bindTriggerEventListener();\n }\n\n isMobile() {\n return DomHandler.isIOS() || DomHandler.isAndroid();\n }\n\n bindTriggerEventListener() {\n if (isPlatformBrowser(this.platformId)) {\n if (!this.triggerEventListener) {\n if (!this.isMobile()) {\n if (this.global) {\n this.triggerEventListener = this.renderer.listen(this.document, this.triggerEvent, (event) => {\n this.show(event);\n });\n } else if (this.target) {\n this.triggerEventListener = this.renderer.listen(this.target, this.triggerEvent, (event) => {\n this.show(event);\n });\n }\n } else {\n if (this.global) {\n this.triggerEventListener = this.renderer.listen(this.document, 'touchstart', this.onTouchStart.bind(this));\n this.touchEndListener = this.renderer.listen(this.document, 'touchend', this.onTouchEnd.bind(this));\n } else if (this.target) {\n this.triggerEventListener = this.renderer.listen(this.target, 'touchstart', this.onTouchStart.bind(this));\n this.touchEndListener = this.renderer.listen(this.target, 'touchend', this.onTouchEnd.bind(this));\n }\n }\n }\n }\n }\n\n bindGlobalListeners() {\n if (isPlatformBrowser(this.platformId)) {\n if (!this.documentClickListener) {\n const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document';\n\n this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {\n if (this.containerViewChild.nativeElement.offsetParent && this.isOutsideClicked(event) && !event.ctrlKey && event.button !== 2 && this.triggerEvent !== 'click') {\n this.hide();\n }\n });\n\n this.documentTriggerListener = this.renderer.listen(documentTarget, this.triggerEvent, (event) => {\n if (this.containerViewChild.nativeElement.offsetParent && this.isOutsideClicked(event)) {\n this.hide();\n }\n });\n }\n if (!this.resizeListener) {\n this.resizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => {\n this.hide();\n });\n }\n }\n }\n\n ngAfterContentInit() {\n this.templates?.forEach((item) => {\n switch (item.getType()) {\n case 'submenuicon':\n this.submenuIconTemplate = item.template;\n break;\n case 'item':\n this.itemTemplate = item.template;\n break;\n default:\n this.itemTemplate = item.template;\n break;\n }\n });\n }\n\n createProcessedItems(items: any, level: number = 0, parent: any = {}, parentKey: any = '') {\n const processedItems = [];\n\n items &&\n items.forEach((item, index) => {\n const key = (parentKey !== '' ? parentKey + '_' : '') + index;\n const newItem = {\n item,\n index,\n level,\n key,\n parent,\n parentKey\n };\n\n newItem['items'] = this.createProcessedItems(item.items, level + 1, newItem, key);\n processedItems.push(newItem);\n });\n\n return processedItems;\n }\n\n getItemProp(item: any, name: string) {\n return item ? ObjectUtils.getItemValue(item[name]) : undefined;\n }\n\n getProccessedItemLabel(processedItem: any) {\n return processedItem ? this.getItemLabel(processedItem.item) : undefined;\n }\n\n getItemLabel(item: any) {\n return this.getItemProp(item, 'label');\n }\n\n isProcessedItemGroup(processedItem: any): boolean {\n return processedItem && ObjectUtils.isNotEmpty(processedItem.items);\n }\n\n isSelected(processedItem: any): boolean {\n return this.activeItemPath().some((p) => p.key === processedItem.key);\n }\n\n isValidSelectedItem(processedItem: any): boolean {\n return this.isValidItem(processedItem) && this.isSelected(processedItem);\n }\n\n isValidItem(processedItem: any): boolean {\n return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);\n }\n\n isItemDisabled(item: any): boolean {\n return this.getItemProp(item, 'disabled');\n }\n\n isItemSeparator(item: any): boolean {\n return this.getItemProp(item, 'separator');\n }\n\n isItemMatched(processedItem: any): boolean {\n return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());\n }\n\n isProccessedItemGroup(processedItem: any): boolean {\n return processedItem && ObjectUtils.isNotEmpty(processedItem.items);\n }\n\n onItemClick(event: any) {\n const { processedItem } = event;\n const grouped = this.isProcessedItemGroup(processedItem);\n const selected = this.isSelected(processedItem);\n\n if (selected) {\n const { index, key, level, parentKey, item } = processedItem;\n\n this.activeItemPath.set(this.activeItemPath().filter((p) => key !== p.key && key.startsWith(p.key)));\n this.focusedItemInfo.set({ index, level, parentKey, item });\n\n DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);\n } else {\n grouped ? this.onItemChange(event) : this.hide();\n }\n }\n\n onItemMouseEnter(event: any) {\n this.onItemChange(event);\n }\n\n onKeyDown(event: KeyboardEvent) {\n const metaKey = event.metaKey || event.ctrlKey;\n\n switch (event.code) {\n case 'ArrowDown':\n this.onArrowDownKey(event);\n break;\n\n case 'ArrowUp':\n this.onArrowUpKey(event);\n break;\n\n case 'ArrowLeft':\n this.onArrowLeftKey(event);\n break;\n\n case 'ArrowRight':\n this.onArrowRightKey(event);\n break;\n\n case 'Home':\n this.onHomeKey(event);\n break;\n\n case 'End':\n this.onEndKey(event);\n break;\n\n case 'Space':\n this.onSpaceKey(event);\n break;\n\n case 'Enter':\n this.onEnterKey(event);\n break;\n\n case 'Escape':\n this.onEscapeKey(event);\n break;\n\n case 'Tab':\n this.onTabKey(event);\n break;\n\n case 'PageDown':\n case 'PageUp':\n case 'Backspace':\n case 'ShiftLeft':\n case 'ShiftRight':\n //NOOP\n break;\n\n default:\n if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {\n this.searchItems(event, event.key);\n }\n\n break;\n }\n }\n\n onArrowDownKey(event: KeyboardEvent) {\n const itemIndex = this.focusedItemInfo().index !== -1 ? this.findNextItemIndex(this.focusedItemInfo().index) : this.findFirstFocusedItemIndex();\n\n this.changeFocusedItemIndex(event, itemIndex);\n event.preventDefault();\n }\n\n onArrowRightKey(event: KeyboardEvent) {\n const processedItem = this.visibleItems[this.focusedItemInfo().index];\n const grouped = this.isProccessedItemGroup(processedItem);\n\n if (grouped) {\n this.onItemChange({ originalEvent: event, processedItem });\n this.focusedItemInfo.set({ index: -1, parentKey: processedItem.key, item: processedItem.item });\n this.searchValue = '';\n this.onArrowDownKey(event);\n }\n\n event.preventDefault();\n }\n\n onArrowUpKey(event: KeyboardEvent) {\n if (event.altKey) {\n if (this.focusedItemInfo().index !== -1) {\n const processedItem = this.visibleItems[this.focusedItemInfo().index];\n const grouped = this.isProccessedItemGroup(processedItem);\n\n !grouped && this.onItemChange({ originalEvent: event, processedItem });\n }\n\n this.hide();\n event.preventDefault();\n } else {\n const itemIndex = this.focusedItemInfo().index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo().index) : this.findLastFocusedItemIndex();\n\n this.changeFocusedItemIndex(event, itemIndex);\n event.preventDefault();\n }\n }\n\n onArrowLeftKey(event: KeyboardEvent) {\n const processedItem = this.visibleItems[this.focusedItemInfo().index];\n const parentItem = this.activeItemPath().find((p) => p.key === processedItem.parentKey);\n const root = ObjectUtils.isEmpty(processedItem.parent);\n\n if (!root) {\n this.focusedItemInfo.set({ index: -1, parentKey: parentItem ? parentItem.parentKey : '', item: processedItem.item });\n this.searchValue = '';\n this.onArrowDownKey(event);\n }\n\n const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== this.focusedItemInfo().parentKey);\n this.activeItemPath.set(activeItemPath);\n\n event.preventDefault();\n }\n\n onHomeKey(event: KeyboardEvent) {\n this.changeFocusedItemIndex(event, this.findFirstItemIndex());\n event.preventDefault();\n }\n\n onEndKey(event: KeyboardEvent) {\n this.changeFocusedItemIndex(event, this.findLastItemIndex());\n event.preventDefault();\n }\n\n onSpaceKey(event: KeyboardEvent) {\n this.onEnterKey(event);\n }\n\n onEscapeKey(event: KeyboardEvent) {\n this.hide();\n const processedItem = this.findVisibleItem(this.findFirstFocusedItemIndex());\n const focusedItemInfo = this.focusedItemInfo();\n this.focusedItemInfo.set({ ...focusedItemInfo, index: this.findFirstFocusedItemIndex(), item: processedItem.item });\n\n event.preventDefault();\n }\n\n onTabKey(event: KeyboardEvent) {\n if (this.focusedItemInfo().index !== -1) {\n const processedItem = this.visibleItems[this.focusedItemInfo().index];\n const grouped = this.isProccessedItemGroup(processedItem);\n\n !grouped && this.onItemChange({ originalEvent: event, processedItem });\n }\n\n this.hide();\n }\n\n onEnterKey(event: KeyboardEvent) {\n if (this.focusedItemInfo().index !== -1) {\n const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id=\"${`${this.focusedItemId}`}\"]`);\n const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section=\"action\"]');\n\n anchorElement ? anchorElement.click() : element && element.click();\n\n const processedItem = this.visibleItems[this.focusedItemInfo().index];\n const grouped = this.isProccessedItemGroup(processedItem);\n\n if (!grouped) {\n const focusedItemInfo = this.focusedItemInfo();\n this.focusedItemInfo.set({ ...focusedItemInfo, index: this.findFirstFocusedItemIndex() });\n }\n }\n\n event.preventDefault();\n }\n\n onItemChange(event: any) {\n const { processedItem, isFocus } = event;\n if (ObjectUtils.isEmpty(processedItem)) return;\n\n const { index, key, level, parentKey, items } = processedItem;\n const grouped = ObjectUtils.isNotEmpty(items);\n const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== parentKey && p.parentKey !== key);\n\n if (grouped) {\n activeItemPath.push(processedItem);\n this.submenuVisible.set(true);\n }\n this.focusedItemInfo.set({ index, level, parentKey, item: processedItem.item });\n this.activeItemPath.set(activeItemPath);\n\n isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);\n }\n\n onMenuFocus(event: any) {\n this.focused = true;\n const focusedItemInfo = this.focusedItemInfo().index !== -1 ? this.focusedItemInfo() : { index: -1, level: 0, parentKey: '', item: null };\n\n this.focusedItemInfo.set(focusedItemInfo);\n }\n\n onMenuBlur(event: any) {\n this.focused = false;\n this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });\n this.searchValue = '';\n }\n\n onOverlayAnimationStart(event: AnimationEvent) {\n switch (event.toState) {\n case 'visible':\n this.container = event.element;\n this.position();\n this.moveOnTop();\n this.appendOverlay();\n this.bindGlobalListeners();\n DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);\n break;\n }\n }\n\n onOverlayAnimationEnd(event: AnimationEvent) {\n switch (event.toState) {\n case 'void':\n this.onOverlayHide();\n break;\n }\n }\n\n appendOverlay() {\n if (this.appendTo) {\n if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.containerViewChild.nativeElement);\n else DomHandler.appendChild(this.containerViewChild.nativeElement, this.appendTo);\n }\n }\n\n moveOnTop() {\n if (this.autoZIndex && this.containerViewChild) {\n ZIndexUtils.set('menu', this.containerViewChild.nativeElement, this.baseZIndex + this.config.zIndex.menu);\n }\n }\n\n onOverlayHide() {\n this.unbindGlobalListeners();\n\n if (!(this.cd as ViewRef).destroyed) {\n this.target = null;\n }\n\n if (this.container && this.autoZIndex) {\n ZIndexUtils.clear(this.container);\n }\n\n this.container = null;\n }\n\n onTouchStart(event: MouseEvent) {\n this.pressTimer = setTimeout(() => {\n this.show(event);\n }, this.pressDelay);\n }\n\n onTouchEnd() {\n clearTimeout(this.pressTimer);\n }\n\n hide() {\n this.visible.set(false);\n this.onHide.emit();\n this.activeItemPath.set([]);\n this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });\n }\n\n toggle(event?: any) {\n this.visible() ? this.hide() : this.show(event);\n }\n\n show(event: any) {\n this.activeItemPath.set([]);\n this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });\n\n this.pageX = event.pageX;\n this.pageY = event.pageY;\n\n this.onShow.emit();\n this.visible() ? this.position() : this.visible.set(true);\n\n event.stopPropagation();\n event.preventDefault();\n }\n\n position() {\n let left = this.pageX + 1;\n let top = this.pageY + 1;\n let width = this.containerViewChild.nativeElement.offsetParent ? this.containerViewChild.nativeElement.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.containerViewChild.nativeElement);\n let height = this.containerViewChild.nativeElement.offsetParent ? this.containerViewChild.nativeElement.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.containerViewChild.nativeElement);\n let viewport = DomHandler.getViewport();\n\n //flip\n if (left + width - this.document.scrollingElement.scrollLeft > viewport.width) {\n left -= width;\n }\n\n //flip\n if (top + height - this.document.scrollingElement.scrollTop > viewport.height) {\n top -= height;\n }\n\n //fit\n if (left < this.document.scrollingElement.scrollLeft) {\n left = this.document.scrollingElement.scrollLeft;\n }\n\n //fit\n if (top < this.document.scrollingElement.scrollTop) {\n top = this.document.scrollingElement.scrollTop;\n }\n\n this.containerViewChild.nativeElement.style.left = left + 'px';\n this.containerViewChild.nativeElement.style.top = top + 'px';\n }\n\n searchItems(event: any, char: string) {\n this.searchValue = (this.searchValue || '') + char;\n\n let itemIndex = -1;\n let matched = false;\n\n if (this.focusedItemInfo().index !== -1) {\n itemIndex = this.visibleItems.slice(this.focusedItemInfo().index).findIndex((processedItem) => this.isItemMatched(processedItem));\n itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo().index).findIndex((processedItem) => this.isItemMatched(processedItem)) : itemIndex + this.focusedItemInfo().index;\n } else {\n itemIndex = this.visibleItems.findIndex((processedItem) => this.isItemMatched(processedItem));\n }\n\n if (itemIndex !== -1) {\n matched = true;\n }\n\n if (itemIndex === -1 && this.focusedItemInfo().index === -1) {\n itemIndex = this.findFirstFocusedItemIndex();\n }\n\n if (itemIndex !== -1) {\n this.changeFocusedItemIndex(event, itemIndex);\n }\n\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n\n this.searchTimeout = setTimeout(() => {\n this.searchValue = '';\n this.searchTimeout = null;\n }, 500);\n\n return matched;\n }\n\n findVisibleItem(index) {\n return ObjectUtils.isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null;\n }\n\n findLastFocusedItemIndex() {\n const selectedIndex = this.findSelectedItemIndex();\n return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;\n }\n\n findLastItemIndex() {\n return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem));\n }\n\n findPrevItemIndex(index: number) {\n const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1;\n\n return matchedItemIndex > -1 ? matchedItemIndex : index;\n }\n\n findNextItemIndex(index: number) {\n const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1;\n\n return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;\n }\n\n findFirstFocusedItemIndex() {\n const selectedIndex = this.findSelectedItemIndex();\n\n return selectedIndex < 0 ? this.findFirstItemIndex() : selectedIndex;\n }\n\n findFirstItemIndex() {\n return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem));\n }\n\n findSelectedItemIndex() {\n return this.visibleItems.findIndex((processedItem) => this.isValidSelectedItem(processedItem));\n }\n\n changeFocusedItemIndex(event: any, index: number) {\n const processedItem = this.findVisibleItem(index);\n const focusedItemInfo = this.focusedItemInfo();\n if (focusedItemInfo.index !== index) {\n this.focusedItemInfo.set({ ...focusedItemInfo, index, item: processedItem.item });\n this.scrollInView();\n }\n }\n\n scrollInView(index: number = -1) {\n const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;\n const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id=\"${id}\"]`);\n\n if (element) {\n element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }\n }\n\n bindResizeListener() {\n if (isPlatformBrowser(this.platformId)) {\n if (!this.resizeListener) {\n this.resizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => {\n this.hide();\n });\n }\n }\n }\n\n isOutsideClicked(event: Event) {\n return !(this.containerViewChild.nativeElement.isSameNode(event.target) || this.containerViewChild.nativeElement.contains(event.target));\n }\n\n unbindResizeListener() {\n if (this.resizeListener) {\n this.resizeListener();\n this.resizeListener = null;\n }\n }\n\n unbindGlobalListeners() {\n if (this.documentClickListener) {\n this.documentClickListener();\n this.documentClickListener = null;\n }\n\n if (this.documentTriggerListener) {\n this.documentTriggerListener();\n this.documentTriggerListener = null;\n }\n\n if (this.resizeListener) {\n this.resizeListener();\n this.resizeListener = null;\n }\n\n if (this.touchEndListener) {\n this.touchEndListener();\n this.touchEndListener = null;\n }\n }\n\n unbindTriggerEventListener() {\n if (this.triggerEventListener) {\n this.triggerEventListener();\n this.triggerEventListener = null;\n }\n }\n\n removeAppendedElements() {\n if (this.appendTo && this.containerViewChild) {\n if (this.appendTo === 'body') {\n this.renderer.removeChild(this.document.body, this.containerViewChild.nativeElement);\n } else {\n DomHandler.removeChild(this.containerViewChild.nativeElement, this.appendTo);\n }\n }\n }\n\n ngOnDestroy() {\n this.unbindGlobalListeners();\n this.unbindTriggerEventListener();\n this.removeAppendedElements();\n }\n}\n\n@NgModule({\n imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule],\n exports: [ContextMenu, RouterModule, TooltipModule, SharedModule],\n declarations: [ContextMenu, ContextMenuSub]\n})\nexport class ContextMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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