primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
1,070 lines (1,061 loc) • 49.8 kB
JavaScript
import { trigger, transition, style as style$1, animate } from '@angular/animations';
import * as i2 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, PLATFORM_ID, Inject, Pipe, inject, EventEmitter, forwardRef, Output, Input, ViewEncapsulation, Component, input, computed, signal, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
import * as i1 from '@angular/platform-browser';
import { DomSanitizer } from '@angular/platform-browser';
import * as i3 from '@angular/router';
import { RouterModule } from '@angular/router';
import { uuid, focus, relativePosition, absolutePosition, isTouchDevice, find, findSingle } from '@primeuix/utils';
import * as i5 from 'primeng/api';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import * as i4 from 'primeng/badge';
import { BadgeModule } from 'primeng/badge';
import { BaseComponent } from 'primeng/basecomponent';
import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
import { Ripple } from 'primeng/ripple';
import * as i6 from 'primeng/tooltip';
import { TooltipModule } from 'primeng/tooltip';
import { ZIndexUtils } from 'primeng/utils';
import { style } from '@primeuix/styles/menu';
import { BaseStyle } from 'primeng/base';
const inlineStyles = {
root: ({ instance }) => ({ position: instance.popup ? 'absolute' : 'relative' })
};
const classes = {
root: ({ instance }) => [
'p-menu p-component',
{
'p-menu-overlay': instance.popup
}
],
start: 'p-menu-start',
list: 'p-menu-list',
submenuLabel: 'p-menu-submenu-label',
separator: 'p-menu-separator',
end: 'p-menu-end',
item: ({ instance, item, id }) => [
'p-menu-item',
{
'p-focus': instance.focusedOptionId() && id === instance.focusedOptionId(),
'p-disabled': instance.disabled(item.disabled)
},
item.styleClass
],
itemContent: 'p-menu-item-content',
itemLink: 'p-menu-item-link',
itemIcon: ({ item }) => ['p-menu-item-icon', item.icon, item.iconClass],
itemLabel: 'p-menu-item-label'
};
class MenuStyle extends BaseStyle {
name = 'menu';
theme = style;
classes = classes;
inlineStyles = inlineStyles;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MenuStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MenuStyle, decorators: [{
type: Injectable
}] });
/**
*
* Menu is a navigation / command component that supports dynamic and static positioning.
*
* [Live Demo](https://www.primeng.org/menu/)
*
* @module menustyle
*
*/
var MenuClasses;
(function (MenuClasses) {
/**
* Class name of the root element
*/
MenuClasses["root"] = "p-menu";
/**
* Class name of the start element
*/
MenuClasses["start"] = "p-menu-start";
/**
* Class name of the list element
*/
MenuClasses["list"] = "p-menu-list";
/**
* Class name of the submenu item element
*/
MenuClasses["submenuItem"] = "p-menu-submenu-item";
/**
* Class name of the separator element
*/
MenuClasses["separator"] = "p-menu-separator";
/**
* Class name of the end element
*/
MenuClasses["end"] = "p-menu-end";
/**
* Class name of the item element
*/
MenuClasses["item"] = "p-menu-item";
/**
* Class name of the item content element
*/
MenuClasses["itemContent"] = "p-menu-item-content";
/**
* Class name of the item link element
*/
MenuClasses["itemLink"] = "p-menu-item-link";
/**
* Class name of the item icon element
*/
MenuClasses["itemIcon"] = "p-menu-item-icon";
/**
* Class name of the item label element
*/
MenuClasses["itemLabel"] = "p-menu-item-label";
})(MenuClasses || (MenuClasses = {}));
class SafeHtmlPipe {
platformId;
sanitizer;
constructor(platformId, sanitizer) {
this.platformId = platformId;
this.sanitizer = sanitizer;
}
transform(value) {
if (!value || !isPlatformBrowser(this.platformId)) {
return value;
}
return this.sanitizer.bypassSecurityTrustHtml(value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: PLATFORM_ID }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SafeHtmlPipe, decorators: [{
type: Pipe,
args: [{
name: 'safeHtml',
standalone: true
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: i1.DomSanitizer }] });
function sanitizeHtml(value) {
const platformId = inject(PLATFORM_ID);
const sanitizer = inject(DomSanitizer);
if (!value || !isPlatformBrowser(platformId)) {
return value;
}
return sanitizer.bypassSecurityTrustHtml(value);
}
class MenuItemContent extends BaseComponent {
item;
itemTemplate;
onMenuItemClick = new EventEmitter();
menu;
_componentStyle = inject(MenuStyle);
constructor(menu) {
super();
this.menu = menu;
}
onItemClick(event, item) {
this.onMenuItemClick.emit({ originalEvent: event, item });
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MenuItemContent, deps: [{ token: forwardRef(() => Menu) }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: MenuItemContent, isStandalone: true, selector: "[pMenuItemContent]", inputs: { item: ["pMenuItemContent", "item"], itemTemplate: "itemTemplate" }, outputs: { onMenuItemClick: "onMenuItemClick" }, providers: [MenuStyle], usesInheritance: true, ngImport: i0, template: ` <div [class]="cx('itemContent')" (click)="onItemClick($event, item)" [attr.data-pc-section]="'content'">
<ng-container *ngIf="!itemTemplate">
<a
*ngIf="!item?.routerLink"
[attr.title]="item.title"
[attr.href]="item.url || null"
[attr.data-automationid]="item.automationId"
[attr.tabindex]="-1"
[attr.data-pc-section]="'action'"
[class]="cx('itemLink')"
[target]="item.target"
pRipple
>
<ng-container *ngTemplateOutlet="itemContent; context: { $implicit: item }"></ng-container>
</a>
<a
*ngIf="item?.routerLink"
[routerLink]="item.routerLink"
[attr.data-automationid]="item.automationId"
[attr.tabindex]="-1"
[attr.data-pc-section]="'action'"
[attr.title]="item.title"
[queryParams]="item.queryParams"
routerLinkActive="p-menu-item-link-active"
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
[class]="cx('itemLink')"
[target]="item.target"
[fragment]="item.fragment"
[queryParamsHandling]="item.queryParamsHandling"
[preserveFragment]="item.preserveFragment"
[skipLocationChange]="item.skipLocationChange"
[replaceUrl]="item.replaceUrl"
[state]="item.state"
pRipple
>
<ng-container *ngTemplateOutlet="itemContent; context: { $implicit: item }"></ng-container>
</a>
</ng-container>
<ng-container *ngIf="itemTemplate">
<ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
</ng-container>
<ng-template #itemContent>
<span [class]="cx('itemIcon', { item })" *ngIf="item.icon" [style]="item.iconStyle"></span>
<span [class]="cx('itemLabel')" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
<ng-template #htmlLabel><span class="p-menu-item-label" [innerHTML]="sanitizeHtml(item.label)"></span></ng-template>
<p-badge *ngIf="item.badge" [styleClass]="item.badgeStyleClass" [value]="item.badge" />
</ng-template>
</div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MenuItemContent, decorators: [{
type: Component,
args: [{
selector: '[pMenuItemContent]',
standalone: true,
imports: [CommonModule, RouterModule, Ripple, TooltipModule, BadgeModule, SharedModule],
template: ` <div [class]="cx('itemContent')" (click)="onItemClick($event, item)" [attr.data-pc-section]="'content'">
<ng-container *ngIf="!itemTemplate">
<a
*ngIf="!item?.routerLink"
[attr.title]="item.title"
[attr.href]="item.url || null"
[attr.data-automationid]="item.automationId"
[attr.tabindex]="-1"
[attr.data-pc-section]="'action'"
[class]="cx('itemLink')"
[target]="item.target"
pRipple
>
<ng-container *ngTemplateOutlet="itemContent; context: { $implicit: item }"></ng-container>
</a>
<a
*ngIf="item?.routerLink"
[routerLink]="item.routerLink"
[attr.data-automationid]="item.automationId"
[attr.tabindex]="-1"
[attr.data-pc-section]="'action'"
[attr.title]="item.title"
[queryParams]="item.queryParams"
routerLinkActive="p-menu-item-link-active"
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
[class]="cx('itemLink')"
[target]="item.target"
[fragment]="item.fragment"
[queryParamsHandling]="item.queryParamsHandling"
[preserveFragment]="item.preserveFragment"
[skipLocationChange]="item.skipLocationChange"
[replaceUrl]="item.replaceUrl"
[state]="item.state"
pRipple
>
<ng-container *ngTemplateOutlet="itemContent; context: { $implicit: item }"></ng-container>
</a>
</ng-container>
<ng-container *ngIf="itemTemplate">
<ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
</ng-container>
<ng-template #itemContent>
<span [class]="cx('itemIcon', { item })" *ngIf="item.icon" [style]="item.iconStyle"></span>
<span [class]="cx('itemLabel')" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
<ng-template #htmlLabel><span class="p-menu-item-label" [innerHTML]="sanitizeHtml(item.label)"></span></ng-template>
<p-badge *ngIf="item.badge" [styleClass]="item.badgeStyleClass" [value]="item.badge" />
</ng-template>
</div>`,
encapsulation: ViewEncapsulation.None,
providers: [MenuStyle]
}]
}], ctorParameters: () => [{ type: Menu, decorators: [{
type: Inject,
args: [forwardRef(() => Menu)]
}] }], propDecorators: { item: [{
type: Input,
args: ['pMenuItemContent']
}], itemTemplate: [{
type: Input
}], onMenuItemClick: [{
type: Output
}] } });
/**
* Menu is a navigation / command component that supports dynamic and static positioning.
* @group Components
*/
class Menu extends BaseComponent {
overlayService;
/**
* An array of menuitems.
* @group Props
*/
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;
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex = true;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex = 0;
/**
* 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';
/**
* Defines a string value that labels an interactive element.
* @group Props
*/
ariaLabel;
/**
* Identifier of the underlying input element.
* @group Props
*/
ariaLabelledBy;
/**
* Current id state as a string.
* @group Props
*/
id;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex = 0;
/**
* Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @defaultValue 'self'
* @group Props
*/
appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
/**
* 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();
/**
* Callback to invoke when the list loses focus.
* @param {Event} event - blur event.
* @group Emits
*/
onBlur = new EventEmitter();
/**
* Callback to invoke when the list receives focus.
* @param {Event} event - focus event.
* @group Emits
*/
onFocus = new EventEmitter();
listViewChild;
containerViewChild;
$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
container;
scrollHandler;
documentClickListener;
documentResizeListener;
preventDocumentDefault;
target;
visible;
focusedOptionId = computed(() => {
return this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : null;
}, ...(ngDevMode ? [{ debugName: "focusedOptionId" }] : []));
focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
selectedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedOptionIndex" }] : []));
focused = false;
overlayVisible = false;
relativeAlign;
_componentStyle = inject(MenuStyle);
constructor(overlayService) {
super();
this.overlayService = overlayService;
this.id = this.id || uuid('pn_id_');
}
/**
* Toggles the visibility of the popup menu.
* @param {Event} event - Browser event.
* @group Method
*/
toggle(event) {
if (this.visible)
this.hide();
else
this.show(event);
this.preventDocumentDefault = true;
}
/**
* Displays the popup menu.
* @param {Event} event - Browser event.
* @group Method
*/
show(event) {
this.target = event.currentTarget;
this.relativeAlign = event.relativeAlign;
this.visible = true;
this.preventDocumentDefault = true;
this.overlayVisible = true;
this.cd.markForCheck();
}
ngOnInit() {
super.ngOnInit();
if (!this.popup) {
this.bindDocumentClickListener();
}
}
/**
* Defines template option for start.
* @group Templates
*/
startTemplate;
_startTemplate;
/**
* Defines template option for end.
* @group Templates
*/
endTemplate;
_endTemplate;
/**
* Defines template option for header.
* @group Templates
*/
headerTemplate;
_headerTemplate;
/**
* Defines template option for item.
* @group Templates
*/
itemTemplate;
_itemTemplate;
/**
* Defines template option for item.
* @group Templates
*/
submenuHeaderTemplate;
_submenuHeaderTemplate;
templates;
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'start':
this._startTemplate = item.template;
break;
case 'end':
this._endTemplate = item.template;
break;
case 'item':
this._itemTemplate = item.template;
break;
case 'submenuheader':
this._submenuHeaderTemplate = item.template;
break;
default:
this._itemTemplate = item.template;
break;
}
});
}
getTabIndexValue() {
return this.tabindex !== undefined ? this.tabindex.toString() : null;
}
onOverlayAnimationStart(event) {
switch (event.toState) {
case 'visible':
if (this.popup) {
this.container = event.element;
this.moveOnTop();
this.onShow.emit({});
this.attrSelector && this.container.setAttribute(this.attrSelector, '');
this.appendOverlay();
this.alignOverlay();
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
this.bindScrollListener();
focus(this.listViewChild.nativeElement);
}
break;
case 'void':
this.onOverlayHide();
this.onHide.emit({});
break;
}
}
onOverlayAnimationEnd(event) {
switch (event.toState) {
case 'void':
if (this.autoZIndex) {
ZIndexUtils.clear(event.element);
}
break;
}
}
alignOverlay() {
if (this.relativeAlign)
relativePosition(this.container, this.target);
else
absolutePosition(this.container, this.target);
}
appendOverlay() {
DomHandler.appendOverlay(this.container, this.$appendTo() === 'body' ? this.document.body : this.$appendTo(), this.$appendTo());
}
restoreOverlayAppend() {
if (this.container && this.$appendTo() !== 'self') {
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() {
this.visible = false;
this.relativeAlign = false;
this.cd.markForCheck();
}
onWindowResize() {
if (this.visible && !isTouchDevice()) {
this.hide();
}
}
menuitemId(item, id, index, childIndex) {
return item?.id ?? `${id}_${index}${childIndex !== undefined ? '_' + childIndex : ''}`;
}
isItemFocused(id) {
return this.focusedOptionId() === id;
}
label(label) {
return typeof label === 'function' ? label() : label;
}
disabled(disabled) {
return typeof disabled === 'function' ? disabled() : typeof disabled === 'undefined' ? false : disabled;
}
activedescendant() {
return this.focused ? this.focusedOptionId() : undefined;
}
onListFocus(event) {
if (!this.focused) {
this.focused = true;
!this.popup && this.changeFocusedOptionIndex(0);
this.onFocus.emit(event);
}
}
onListBlur(event) {
if (this.focused) {
this.focused = false;
this.changeFocusedOptionIndex(-1);
this.selectedOptionIndex.set(-1);
this.focusedOptionIndex.set(-1);
this.onBlur.emit(event);
}
}
onListKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
this.onArrowDownKey(event);
break;
case 'ArrowUp':
this.onArrowUpKey(event);
break;
case 'Home':
this.onHomeKey(event);
break;
case 'End':
this.onEndKey(event);
break;
case 'Enter':
this.onEnterKey(event);
break;
case 'NumpadEnter':
this.onEnterKey(event);
break;
case 'Space':
this.onSpaceKey(event);
break;
case 'Escape':
case 'Tab':
if (this.popup) {
focus(this.target);
this.hide();
}
this.overlayVisible && this.hide();
break;
default:
break;
}
}
onArrowDownKey(event) {
const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex());
this.changeFocusedOptionIndex(optionIndex);
event.preventDefault();
}
onArrowUpKey(event) {
if (event.altKey && this.popup) {
focus(this.target);
this.hide();
event.preventDefault();
}
else {
const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex());
this.changeFocusedOptionIndex(optionIndex);
event.preventDefault();
}
}
onHomeKey(event) {
this.changeFocusedOptionIndex(0);
event.preventDefault();
}
onEndKey(event) {
this.changeFocusedOptionIndex(find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
event.preventDefault();
}
onEnterKey(event) {
const element = findSingle(this.containerViewChild.nativeElement, `li[id="${`${this.focusedOptionIndex()}`}"]`);
const anchorElement = element && findSingle(element, 'a[data-pc-section="action"]');
this.popup && focus(this.target);
anchorElement ? anchorElement.click() : element && element.click();
event.preventDefault();
}
onSpaceKey(event) {
this.onEnterKey(event);
}
findNextOptionIndex(index) {
const links = find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
}
findPrevOptionIndex(index) {
const links = find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
}
changeFocusedOptionIndex(index) {
const links = find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
if (links.length > 0) {
let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
order > -1 && this.focusedOptionIndex.set(links[order].getAttribute('id'));
}
}
itemClick(event, id) {
const { originalEvent, item } = event;
if (!this.focused) {
this.focused = true;
this.onFocus.emit();
}
if (item.disabled) {
originalEvent.preventDefault();
return;
}
if (!item.url && !item.routerLink) {
originalEvent.preventDefault();
}
if (item.command) {
item.command({
originalEvent: originalEvent,
item: item
});
}
if (this.popup) {
this.hide();
}
if (!this.popup && this.focusedOptionIndex() !== id) {
this.focusedOptionIndex.set(id);
}
}
onOverlayClick(event) {
if (this.popup) {
this.overlayService.add({
originalEvent: event,
target: this.el.nativeElement
});
}
this.preventDocumentDefault = true;
}
bindDocumentClickListener() {
if (!this.documentClickListener && isPlatformBrowser(this.platformId)) {
const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
const isOutsideContainer = this.containerViewChild?.nativeElement && !this.containerViewChild?.nativeElement.contains(event.target);
const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
if (!this.popup && isOutsideContainer && isOutsideTarget) {
this.onListBlur(event);
}
if (this.preventDocumentDefault && this.overlayVisible && isOutsideContainer && isOutsideTarget) {
this.hide();
this.preventDocumentDefault = false;
}
});
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
bindDocumentResizeListener() {
if (!this.documentResizeListener && isPlatformBrowser(this.platformId)) {
const window = this.document.defaultView;
this.documentResizeListener = this.renderer.listen(window, 'resize', this.onWindowResize.bind(this));
}
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
this.documentResizeListener();
this.documentResizeListener = null;
}
}
bindScrollListener() {
if (!this.scrollHandler && isPlatformBrowser(this.platformId)) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
if (this.visible) {
this.hide();
}
});
}
this.scrollHandler?.bindScrollListener();
}
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
this.scrollHandler = null;
}
}
onOverlayHide() {
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.unbindScrollListener();
this.preventDocumentDefault = false;
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();
}
if (!this.popup) {
this.unbindDocumentClickListener();
}
super.ngOnDestroy();
}
hasSubMenu() {
return this.model?.some((item) => item.items) ?? false;
}
isItemHidden(item) {
if (item.separator) {
return item.visible === false || (item.items && item.items.some((subitem) => subitem.visible !== false));
}
return item.visible === false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Menu, deps: [{ token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: Menu, isStandalone: true, selector: "p-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus" }, providers: [MenuStyle], queries: [{ propertyName: "startTemplate", first: true, predicate: ["start"] }, { propertyName: "endTemplate", first: true, predicate: ["end"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "submenuHeaderTemplate", first: true, predicate: ["submenuheader"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<div
#container
[class]="cn(cx('root'), styleClass)"
[style]="sx('root')"
[ngStyle]="style"
*ngIf="!popup || visible"
(click)="onOverlayClick($event)"
[]="{
value: 'visible',
params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
}"
[@.disabled]="popup !== true"
(.start)="onOverlayAnimationStart($event)"
(.done)="onOverlayAnimationEnd($event)"
[attr.data-pc-name]="'menu'"
[attr.id]="id"
>
<div *ngIf="startTemplate ?? _startTemplate" [class]="cx('start')" [attr.data-pc-section]="'start'">
<ng-container *ngTemplateOutlet="startTemplate ?? _startTemplate"></ng-container>
</div>
<ul
#list
[class]="cx('list')"
role="menu"
[attr.id]="id + '_list'"
[attr.tabindex]="getTabIndexValue()"
[attr.data-pc-section]="'menu'"
[attr.aria-activedescendant]="activedescendant()"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledBy]="ariaLabelledBy"
(focus)="onListFocus($event)"
(blur)="onListBlur($event)"
(keydown)="onListKeyDown($event)"
>
<ng-template ngFor let-submenu let-i="index" [ngForOf]="model" *ngIf="hasSubMenu()">
<li [class]="cx('separator')" *ngIf="submenu.separator && submenu.visible !== false" role="separator"></li>
<li [class]="cx('submenuLabel')" [attr.data-automationid]="submenu.automationId" *ngIf="!submenu.separator" pTooltip [tooltipOptions]="submenu.tooltipOptions" role="none" [attr.id]="menuitemId(submenu, id, i)">
<ng-container *ngIf="!submenuHeaderTemplate && !_submenuHeaderTemplate">
<span *ngIf="submenu.escape !== false; else htmlSubmenuLabel">{{ submenu.label }}</span>
<ng-template #htmlSubmenuLabel><span [innerHTML]="sanitizeHtml(submenu.label)"></span></ng-template>
</ng-container>
<ng-container *ngTemplateOutlet="submenuHeaderTemplate ?? _submenuHeaderTemplate; context: { $implicit: submenu }"></ng-container>
</li>
<ng-template ngFor let-item let-j="index" [ngForOf]="submenu.items">
<li [class]="cx('separator')" *ngIf="item.separator && (item.visible !== false || submenu.visible !== false)" role="separator"></li>
<li
[class]="cn(cx('item', { item, id: menuitemId(item, id, i, j) }), item?.styleClass)"
*ngIf="!item.separator && item.visible !== false && (item.visible !== undefined || submenu.visible !== false)"
[pMenuItemContent]="item"
[itemTemplate]="itemTemplate ?? _itemTemplate"
[style]="item.style"
(onMenuItemClick)="itemClick($event, menuitemId(item, id, i, j))"
pTooltip
[tooltipOptions]="item.tooltipOptions"
role="menuitem"
[attr.data-pc-section]="'menuitem'"
[attr.aria-label]="label(item.label)"
[attr.data-p-focused]="isItemFocused(menuitemId(item, id, i, j))"
[attr.data-p-disabled]="disabled(item.disabled)"
[attr.aria-disabled]="disabled(item.disabled)"
[attr.id]="menuitemId(item, id, i, j)"
></li>
</ng-template>
</ng-template>
<ng-template ngFor let-item let-i="index" [ngForOf]="model" *ngIf="!hasSubMenu()">
<li [class]="cx('separator')" *ngIf="item.separator && item.visible !== false" role="separator"></li>
<li
[class]="cn(cx('item', { item, id: menuitemId(item, id, i) }), item?.styleClass)"
*ngIf="!item.separator && item.visible !== false"
[pMenuItemContent]="item"
[itemTemplate]="itemTemplate ?? _itemTemplate"
[ngStyle]="item.style"
(onMenuItemClick)="itemClick($event, menuitemId(item, id, i))"
pTooltip
[tooltipOptions]="item.tooltipOptions"
role="menuitem"
[attr.data-pc-section]="'menuitem'"
[attr.aria-label]="label(item.label)"
[attr.data-p-focused]="isItemFocused(menuitemId(item, id, i))"
[attr.data-p-disabled]="disabled(item.disabled)"
[attr.aria-disabled]="disabled(item.disabled)"
[attr.id]="menuitemId(item, id, i)"
></li>
</ng-template>
</ul>
<div *ngIf="endTemplate ?? _endTemplate" [class]="cx('end')" [attr.data-pc-section]="'end'">
<ng-container *ngTemplateOutlet="endTemplate ?? _endTemplate"></ng-container>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: ["pMenuItemContent", "itemTemplate"], outputs: ["onMenuItemClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SharedModule }], animations: [trigger('overlayAnimation', [transition(':enter', [style$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style$1({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Menu, decorators: [{
type: Component,
args: [{
selector: 'p-menu',
standalone: true,
imports: [CommonModule, RouterModule, MenuItemContent, TooltipModule, BadgeModule, SharedModule],
template: `
<div
#container
[class]="cn(cx('root'), styleClass)"
[style]="sx('root')"
[ngStyle]="style"
*ngIf="!popup || visible"
(click)="onOverlayClick($event)"
[]="{
value: 'visible',
params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
}"
[@.disabled]="popup !== true"
(.start)="onOverlayAnimationStart($event)"
(.done)="onOverlayAnimationEnd($event)"
[attr.data-pc-name]="'menu'"
[attr.id]="id"
>
<div *ngIf="startTemplate ?? _startTemplate" [class]="cx('start')" [attr.data-pc-section]="'start'">
<ng-container *ngTemplateOutlet="startTemplate ?? _startTemplate"></ng-container>
</div>
<ul
#list
[class]="cx('list')"
role="menu"
[attr.id]="id + '_list'"
[attr.tabindex]="getTabIndexValue()"
[attr.data-pc-section]="'menu'"
[attr.aria-activedescendant]="activedescendant()"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledBy]="ariaLabelledBy"
(focus)="onListFocus($event)"
(blur)="onListBlur($event)"
(keydown)="onListKeyDown($event)"
>
<ng-template ngFor let-submenu let-i="index" [ngForOf]="model" *ngIf="hasSubMenu()">
<li [class]="cx('separator')" *ngIf="submenu.separator && submenu.visible !== false" role="separator"></li>
<li [class]="cx('submenuLabel')" [attr.data-automationid]="submenu.automationId" *ngIf="!submenu.separator" pTooltip [tooltipOptions]="submenu.tooltipOptions" role="none" [attr.id]="menuitemId(submenu, id, i)">
<ng-container *ngIf="!submenuHeaderTemplate && !_submenuHeaderTemplate">
<span *ngIf="submenu.escape !== false; else htmlSubmenuLabel">{{ submenu.label }}</span>
<ng-template #htmlSubmenuLabel><span [innerHTML]="sanitizeHtml(submenu.label)"></span></ng-template>
</ng-container>
<ng-container *ngTemplateOutlet="submenuHeaderTemplate ?? _submenuHeaderTemplate; context: { $implicit: submenu }"></ng-container>
</li>
<ng-template ngFor let-item let-j="index" [ngForOf]="submenu.items">
<li [class]="cx('separator')" *ngIf="item.separator && (item.visible !== false || submenu.visible !== false)" role="separator"></li>
<li
[class]="cn(cx('item', { item, id: menuitemId(item, id, i, j) }), item?.styleClass)"
*ngIf="!item.separator && item.visible !== false && (item.visible !== undefined || submenu.visible !== false)"
[pMenuItemContent]="item"
[itemTemplate]="itemTemplate ?? _itemTemplate"
[style]="item.style"
(onMenuItemClick)="itemClick($event, menuitemId(item, id, i, j))"
pTooltip
[tooltipOptions]="item.tooltipOptions"
role="menuitem"
[attr.data-pc-section]="'menuitem'"
[attr.aria-label]="label(item.label)"
[attr.data-p-focused]="isItemFocused(menuitemId(item, id, i, j))"
[attr.data-p-disabled]="disabled(item.disabled)"
[attr.aria-disabled]="disabled(item.disabled)"
[attr.id]="menuitemId(item, id, i, j)"
></li>
</ng-template>
</ng-template>
<ng-template ngFor let-item let-i="index" [ngForOf]="model" *ngIf="!hasSubMenu()">
<li [class]="cx('separator')" *ngIf="item.separator && item.visible !== false" role="separator"></li>
<li
[class]="cn(cx('item', { item, id: menuitemId(item, id, i) }), item?.styleClass)"
*ngIf="!item.separator && item.visible !== false"
[pMenuItemContent]="item"
[itemTemplate]="itemTemplate ?? _itemTemplate"
[ngStyle]="item.style"
(onMenuItemClick)="itemClick($event, menuitemId(item, id, i))"
pTooltip
[tooltipOptions]="item.tooltipOptions"
role="menuitem"
[attr.data-pc-section]="'menuitem'"
[attr.aria-label]="label(item.label)"
[attr.data-p-focused]="isItemFocused(menuitemId(item, id, i))"
[attr.data-p-disabled]="disabled(item.disabled)"
[attr.aria-disabled]="disabled(item.disabled)"
[attr.id]="menuitemId(item, id, i)"
></li>
</ng-template>
</ul>
<div *ngIf="endTemplate ?? _endTemplate" [class]="cx('end')" [attr.data-pc-section]="'end'">
<ng-container *ngTemplateOutlet="endTemplate ?? _endTemplate"></ng-container>
</div>
</div>
`,
animations: [trigger('overlayAnimation', [transition(':enter', [style$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style$1({ opacity: 0 }))])])],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [MenuStyle]
}]
}], ctorParameters: () => [{ type: i5.OverlayService }], propDecorators: { model: [{
type: Input
}], popup: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], autoZIndex: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], baseZIndex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], showTransitionOptions: [{
type: Input
}], hideTransitionOptions: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}], id: [{
type: Input
}], tabindex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], onShow: [{
type: Output
}], onHide: [{
type: Output
}], onBlur: [{
type: Output
}], onFocus: [{
type: Output
}], listViewChild: [{
type: ViewChild,
args: ['list']
}], containerViewChild: [{
type: ViewChild,
args: ['container']
}], startTemplate: [{
type: ContentChild,
args: ['start', { descendants: false }]
}], endTemplate: [{
type: ContentChild,
args: ['end', { descendants: false }]
}], headerTemplate: [{
type: ContentChild,
args: ['header', { descendants: false }]
}], itemTemplate: [{
type: ContentChild,
args: ['item', { descendants: false }]
}], submenuHeaderTemplate: [{
type: ContentChild,
args: ['submenuheader', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class MenuModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: MenuModule, imports: [Menu, SharedModule, SafeHtmlPipe], exports: [Menu, SharedModule, SafeHtmlPipe] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MenuModule, imports: [Menu, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MenuModule, decorators: [{
type: NgModule,
args: [{
imports: [Menu, SharedModule, SafeHtmlPipe],
exports: [Menu, SharedModule, SafeHtmlPipe]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Menu, MenuClasses, MenuItemContent, MenuModule, MenuStyle, SafeHtmlPipe, sanitizeHtml };
//# sourceMappingURL=primeng-menu.mjs.map