primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
388 lines (383 loc) • 17.9 kB
TypeScript
import { ContextMenuPassThrough, ContextMenuItemTemplateContext, ContextMenuProcessedItem, ContextMenuSubmenuIconTemplateContext } from 'primeng/types/contextmenu';
export * from 'primeng/types/contextmenu';
import * as _angular_core from '@angular/core';
import { TemplateRef, ElementRef, Renderer2 } from '@angular/core';
import { MotionOptions, MotionEvent } from '@primeuix/motion';
import * as i1 from 'primeng/api';
import { MenuItem, OverlayService } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { CSSProperties, AppendTo } from 'primeng/types/shared';
import { VoidListener } from 'primeng/ts-helpers';
import { BaseStyle } from 'primeng/base';
/**
*
* ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu.
* Refer to documentation of the individual documentation of the with context menu support.
*
* [Live Demo](https://www.primeng.org/contextmenu/)
*
* @module contextmenustyle
*
*/
declare enum ContextMenuClasses {
/**
* Class name of the root element
*/
root = "p-contextmenu",
/**
* Class name of the root list element
*/
rootList = "p-contextmenu-root-list",
/**
* Class name of the item element
*/
item = "p-contextmenu-item",
/**
* Class name of the item content element
*/
itemContent = "p-contextmenu-item-content",
/**
* Class name of the item link element
*/
itemLink = "p-contextmenu-item-link",
/**
* Class name of the item icon element
*/
itemIcon = "p-contextmenu-item-icon",
/**
* Class name of the item label element
*/
itemLabel = "p-contextmenu-item-label",
/**
* Class name of the submenu icon element
*/
submenuIcon = "p-contextmenu-submenu-icon",
/**
* Class name of the submenu element
*/
submenu = "p-contextmenu-submenu",
/**
* Class name of the separator element
*/
separator = "p-contextmenu-separator"
}
declare class ContextMenuStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: () => string[];
rootList: string;
item: ({ instance, processedItem }: {
instance: any;
processedItem: any;
}) => (string | {
'p-contextmenu-item-active': any;
'p-focus': any;
'p-disabled': any;
'p-contextmenu-mobile': any;
})[];
itemContent: string;
itemLink: string;
itemIcon: string;
itemLabel: string;
submenuIcon: string;
submenu: string;
separator: string;
};
inlineStyles: {
root: ({ instance }: {
instance: any;
}) => any;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContextMenuStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ContextMenuStyle>;
}
interface ContextMenuStyle extends BaseStyle {
}
declare class ContextMenuSub extends BaseComponent<ContextMenuPassThrough> {
visible: _angular_core.InputSignal<boolean>;
items: _angular_core.InputSignal<any[] | undefined>;
itemTemplate: _angular_core.InputSignal<TemplateRef<ContextMenuItemTemplateContext> | undefined>;
root: _angular_core.InputSignalWithTransform<boolean, unknown>;
autoZIndex: _angular_core.InputSignalWithTransform<boolean, unknown>;
baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
popup: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
menuId: _angular_core.InputSignal<string | undefined>;
ariaLabel: _angular_core.InputSignal<string | undefined>;
ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
level: _angular_core.InputSignalWithTransform<number, unknown>;
focusedItemId: _angular_core.InputSignal<string | undefined>;
activeItemPath: _angular_core.InputSignal<any[] | undefined>;
motionOptions: _angular_core.InputSignal<MotionOptions[] | undefined>;
tabindex: _angular_core.InputSignalWithTransform<number, unknown>;
itemClick: _angular_core.OutputEmitterRef<any>;
itemMouseEnter: _angular_core.OutputEmitterRef<any>;
menuFocus: _angular_core.OutputEmitterRef<any>;
menuBlur: _angular_core.OutputEmitterRef<any>;
menuKeydown: _angular_core.OutputEmitterRef<any>;
sublistViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
render: _angular_core.WritableSignal<boolean>;
listClass: _angular_core.Signal<string | undefined>;
listPtm: _angular_core.Signal<any>;
listId: _angular_core.Signal<string>;
motionState: _angular_core.Signal<boolean>;
hostName: string;
_componentStyle: ContextMenuStyle;
$pcContextMenu: ContextMenu | undefined;
$pcContextMenuSub: ContextMenuSub | undefined;
el: ElementRef<any>;
renderer: Renderer2;
contextMenu: ContextMenu;
queryMatches(): boolean;
constructor();
getItemProp(processedItem: ContextMenuProcessedItem, name: string, params?: Record<string, unknown> | null): any;
getItemId(processedItem: ContextMenuProcessedItem): string;
getItemKey(processedItem: ContextMenuProcessedItem): string;
getItemLabel(processedItem: ContextMenuProcessedItem): string;
getAriaSetSize(): number;
getAriaPosInset(index: number): number;
isItemVisible(processedItem: ContextMenuProcessedItem): boolean;
isItemActive(processedItem: ContextMenuProcessedItem): boolean | undefined;
isItemDisabled(processedItem: ContextMenuProcessedItem): boolean | undefined;
isItemFocused(processedItem: ContextMenuProcessedItem): boolean;
isItemGroup(processedItem: ContextMenuProcessedItem): boolean;
getAriaDisabled(processedItem: ContextMenuProcessedItem): true | undefined;
getAriaHaspopup(processedItem: ContextMenuProcessedItem): "menu" | undefined;
getAriaExpanded(processedItem: ContextMenuProcessedItem): boolean | undefined;
onItemMouseEnter(param: {
event: MouseEvent;
processedItem: ContextMenuProcessedItem;
}): void;
onItemClick(event: MouseEvent, processedItem: ContextMenuProcessedItem): void;
onBeforeEnter(event: MotionEvent): void;
onAfterLeave(): void;
_ptm(section: string, options?: Record<string, unknown>): any;
getPTOptions(processedItem: ContextMenuProcessedItem, index: number, key: string): any;
position(sublist: HTMLUListElement): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContextMenuSub, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContextMenuSub, "p-contextmenu-sub", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "root": { "alias": "root"; "required": false; "isSignal": true; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "popup": { "alias": "popup"; "required": false; "isSignal": true; }; "menuId": { "alias": "menuId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "focusedItemId": { "alias": "focusedItemId"; "required": false; "isSignal": true; }; "activeItemPath": { "alias": "activeItemPath"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemMouseEnter": "itemMouseEnter"; "menuFocus": "menuFocus"; "menuBlur": "menuBlur"; "menuKeydown": "menuKeydown"; }, never, never, true, never>;
}
/**
* ContextMenu displays an overlay menu on right click of its target. Note that components like Table has special integration with ContextMenu.
* @group Components
*/
declare class ContextMenu extends BaseComponent<ContextMenuPassThrough> {
componentName: string;
/**
* An array of menuitems.
* @group Props
*/
model: _angular_core.InputSignal<MenuItem[] | undefined>;
/**
* Event for which the menu must be displayed.
* @group Props
*/
triggerEvent: _angular_core.InputSignal<string>;
/**
* Local template variable name of the element to attach the context menu.
* @group Props
*/
target: _angular_core.InputSignal<string | HTMLElement | null | undefined>;
/**
* Attaches the menu to document instead of a particular item.
* @group Props
*/
global: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Inline style of the component.
* @group Props
*/
style: _angular_core.InputSignal<CSSProperties>;
/**
* Style class of the component.
* @group Props
*/
styleClass: _angular_core.InputSignal<string | undefined>;
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Current id state as a string.
* @group Props
*/
id: _angular_core.InputSignal<string | undefined>;
_id: string | undefined;
/**
* The breakpoint to define the maximum width boundary.
* @group Props
*/
breakpoint: _angular_core.InputSignal<string>;
/**
* Defines a string value that labels an interactive element.
* @group Props
*/
ariaLabel: _angular_core.InputSignal<string | undefined>;
/**
* Identifier of the underlying input element.
* @group Props
*/
ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
/**
* Press delay in touch devices as miliseconds.
* @group Props
*/
pressDelay: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* 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: _angular_core.InputSignal<AppendTo>;
/**
* The motion options.
* @group Props
*/
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMotionOptions: _angular_core.Signal<MotionOptions>;
/**
* Callback to invoke when overlay menu is shown.
* @group Emits
*/
onShow: _angular_core.OutputEmitterRef<void>;
/**
* Callback to invoke when overlay menu is hidden.
* @group Emits
*/
onHide: _angular_core.OutputEmitterRef<void>;
rootmenu: _angular_core.Signal<ContextMenuSub | undefined>;
container: HTMLElement | null | undefined;
handleSubmenuAfterLeave: (() => void) | null;
outsideClickListener: VoidListener;
resizeListener: VoidListener;
triggerEventListener: VoidListener;
documentClickListener: VoidListener;
documentTriggerListener: VoidListener;
touchEndListener: VoidListener;
pageX: number;
pageY: number;
visible: _angular_core.WritableSignal<boolean>;
render: _angular_core.WritableSignal<boolean>;
focused: boolean;
activeItemPath: _angular_core.WritableSignal<any>;
focusedItemInfo: _angular_core.WritableSignal<any>;
submenuVisible: _angular_core.WritableSignal<boolean>;
$appendTo: _angular_core.Signal<AppendTo>;
searchValue: string;
searchTimeout: any;
_processedItems: any[];
pressTimer: any;
hideCallback: any;
private matchMediaListener;
private query;
queryMatches: _angular_core.WritableSignal<boolean>;
_componentStyle: ContextMenuStyle;
overlayService: OverlayService;
get visibleItems(): ContextMenuProcessedItem[];
get processedItems(): any[];
get focusedItemId(): any;
constructor();
onInit(): void;
isMobile(): boolean;
bindTriggerEventListener(): void;
bindGlobalListeners(): void;
/**
* Custom item template.
* @group Templates
*/
itemTemplate: _angular_core.Signal<TemplateRef<ContextMenuItemTemplateContext> | undefined>;
/**
* Custom submenu icon template.
* @group Templates
*/
submenuIconTemplate: _angular_core.Signal<TemplateRef<ContextMenuSubmenuIconTemplateContext> | undefined>;
getPTOptions(key: string, item: MenuItem, index: number, _id: string): any;
isItemFocused(itemInfo: {
index: number;
item: MenuItem;
}): boolean;
createProcessedItems(items: MenuItem[], level?: number, parent?: ContextMenuProcessedItem | Record<string, never>, parentKey?: string): ContextMenuProcessedItem[];
bindMatchMediaListener(): void;
unbindMatchMediaListener(): void;
getItemProp(item: MenuItem, name: string): any;
getProccessedItemLabel(processedItem: ContextMenuProcessedItem): any;
getItemLabel(item: MenuItem): any;
isProcessedItemGroup(processedItem: ContextMenuProcessedItem): boolean;
isSelected(processedItem: ContextMenuProcessedItem): boolean;
isValidSelectedItem(processedItem: ContextMenuProcessedItem): boolean;
isValidItem(processedItem: ContextMenuProcessedItem): boolean;
isItemDisabled(item: MenuItem): boolean;
isItemSeparator(item: MenuItem): boolean;
isItemMatched(processedItem: ContextMenuProcessedItem): boolean;
isProccessedItemGroup(processedItem: ContextMenuProcessedItem): boolean;
onItemClick(event: {
processedItem: ContextMenuProcessedItem;
isFocus?: boolean;
}): void;
onItemMouseEnter(event: {
originalEvent: MouseEvent;
processedItem: ContextMenuProcessedItem;
}): void;
onKeyDown(event: KeyboardEvent): void;
onArrowDownKey(event: KeyboardEvent): void;
onArrowRightKey(event: KeyboardEvent): void;
onArrowUpKey(event: KeyboardEvent): void;
onArrowLeftKey(event: KeyboardEvent): void;
onHomeKey(event: KeyboardEvent): void;
onEndKey(event: KeyboardEvent): void;
onSpaceKey(event: KeyboardEvent): void;
onEscapeKey(event: KeyboardEvent): void;
onTabKey(event: KeyboardEvent): void;
onEnterKey(event: KeyboardEvent): void;
onItemChange(event: {
originalEvent?: Event;
processedItem: ContextMenuProcessedItem;
isFocus?: boolean;
}, type?: string): void;
onMenuFocus(_event: FocusEvent): void;
onMenuBlur(_event: FocusEvent): void;
onBeforeEnter(event: MotionEvent): void;
onAfterEnter(): void;
onAfterLeave(): void;
appendOverlay(): void;
restoreOverlayAppend(): void;
moveOnTop(): void;
onOverlayHide(): void;
onTouchStart(event: MouseEvent): void;
onTouchEnd(): void;
hide(): void;
toggle(event?: any): void;
show(event: any): void;
position(): void;
searchItems(event: any, char: string): boolean;
findVisibleItem(index: number): ContextMenuProcessedItem | null;
findLastFocusedItemIndex(): number;
findLastItemIndex(): number;
findPrevItemIndex(index: number): number;
findNextItemIndex(index: number): number;
findFirstFocusedItemIndex(): number;
findFirstItemIndex(): number;
findSelectedItemIndex(): number;
changeFocusedItemIndex(_event: KeyboardEvent, index: number): void;
scrollInView(index?: number): void;
bindResizeListener(): void;
isOutsideClicked(event: Event): boolean;
unbindResizeListener(): void;
unbindGlobalListeners(): void;
unbindTriggerEventListener(): void;
onDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContextMenu, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContextMenu, "p-contextmenu, p-context-menu", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "triggerEvent": { "alias": "triggerEvent"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "global": { "alias": "global"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "pressDelay": { "alias": "pressDelay"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; }, { "onShow": "onShow"; "onHide": "onHide"; }, ["itemTemplate", "submenuIconTemplate"], never, true, never>;
}
declare class ContextMenuModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContextMenuModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ContextMenuModule, never, [typeof ContextMenu, typeof i1.SharedModule], [typeof ContextMenu, typeof i1.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<ContextMenuModule>;
}
export { ContextMenu, ContextMenuClasses, ContextMenuModule, ContextMenuStyle };