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,
419 lines (414 loc) • 19.6 kB
TypeScript
import { TieredMenuPassThrough, TieredMenuProcessedItem, TieredMenuItemTemplateContext, TieredMenuItemClickEvent, TieredMenuItemMouseEnterEvent, TieredMenuFocusedItemInfo, TieredMenuToggleEvent } from 'primeng/types/tieredmenu';
export * from 'primeng/types/tieredmenu';
import { BaseStyle } from 'primeng/base';
import * as _angular_core from '@angular/core';
import { TemplateRef, ElementRef } from '@angular/core';
import { MotionOptions, MotionEvent } from '@primeuix/motion';
import * as i2 from 'primeng/api';
import { MenuItem, OverlayService } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ConnectedOverlayScrollHandler } from 'primeng/dom';
import { CSSProperties, AppendTo } from 'primeng/types/shared';
import { VoidListener, Nullable } from 'primeng/ts-helpers';
/**
*
* TieredMenu displays submenus in nested overlays.
*
* [Live Demo](https://www.primeng.org/menu/)
*
* @module tieredmenustyle
*
*/
declare enum TieredMenuClasses {
/**
* Class name of the root element
*/
root = "p-tieredmenu",
/**
* Class name of the start element
*/
start = "p-tieredmenu-start",
/**
* Class name of the root list element
*/
rootList = "p-tieredmenu-root-list",
/**
* Class name of the item element
*/
item = "p-tieredmenu-item",
/**
* Class name of the item content element
*/
itemContent = "p-tieredmenu-item-content",
/**
* Class name of the item link element
*/
itemLink = "p-tieredmenu-item-link",
/**
* Class name of the item icon element
*/
itemIcon = "p-tieredmenu-item-icon",
/**
* Class name of the item label element
*/
itemLabel = "p-tieredmenu-item-label",
/**
* Class name of the submenu icon element
*/
submenuIcon = "p-tieredmenu-submenu-icon",
/**
* Class name of the submenu element
*/
submenu = "p-tieredmenu-submenu",
/**
* Class name of the separator element
*/
separator = "p-tieredmenu-separator",
/**
* Class name of the end element
*/
end = "p-tieredmenu-end"
}
declare class TieredMenuStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-tieredmenu-overlay': any;
'p-tieredmenu-mobile': any;
})[];
start: string;
rootList: string;
item: ({ instance, processedItem }: {
instance: any;
processedItem: any;
}) => (string | {
'p-tieredmenu-item-active': any;
'p-focus': any;
'p-disabled': any;
})[];
itemContent: string;
itemLink: string;
itemIcon: string;
itemLabel: string;
itemBadge: string;
submenuIcon: string;
submenu: string;
separator: string;
end: string;
};
inlineStyles: {
submenu: ({ instance, processedItem }: {
instance: any;
processedItem: any;
}) => {
display: string;
};
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TieredMenuStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<TieredMenuStyle>;
}
interface TieredMenuStyle extends BaseStyle {
}
declare class TieredMenuSub extends BaseComponent<TieredMenuPassThrough> {
visible: _angular_core.InputSignal<boolean>;
items: _angular_core.InputSignal<TieredMenuProcessedItem[]>;
itemTemplate: _angular_core.InputSignal<TemplateRef<TieredMenuItemTemplateContext> | undefined>;
root: _angular_core.InputSignalWithTransform<boolean, unknown>;
autoDisplay: _angular_core.InputSignalWithTransform<boolean, unknown>;
autoZIndex: _angular_core.InputSignalWithTransform<boolean, unknown>;
baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
popup: _angular_core.InputSignalWithTransform<boolean, 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<TieredMenuProcessedItem[]>;
motionOptions: _angular_core.InputSignal<MotionOptions[] | undefined>;
tabindex: _angular_core.InputSignalWithTransform<number, unknown>;
inlineStyles: _angular_core.InputSignal<CSSProperties>;
itemClick: _angular_core.OutputEmitterRef<TieredMenuItemClickEvent>;
itemMouseEnter: _angular_core.OutputEmitterRef<TieredMenuItemMouseEnterEvent>;
menuFocus: _angular_core.OutputEmitterRef<FocusEvent>;
menuBlur: _angular_core.OutputEmitterRef<FocusEvent>;
menuKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
sublistViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
render: _angular_core.WritableSignal<boolean>;
_componentStyle: TieredMenuStyle;
bindDirectiveInstance: Bind;
$pcTieredMenu: TieredMenu | undefined;
$pcTieredMenuSub: TieredMenuSub | undefined;
tieredMenu: TieredMenu;
constructor();
onAfterViewChecked(): void;
positionSubmenu(sublist: HTMLElement): void;
getItemProp(processedItem: TieredMenuProcessedItem, name: string, params?: Record<string, unknown> | null): any;
getItemId(processedItem: TieredMenuProcessedItem): string;
getItemKey(processedItem: TieredMenuProcessedItem): string;
getItemLabel(processedItem: TieredMenuProcessedItem): string;
getAriaSetSize(): number;
getAriaPosInset(index: number): number;
isItemVisible(processedItem: TieredMenuProcessedItem): boolean;
isItemActive(processedItem: TieredMenuProcessedItem): boolean;
isItemDisabled(processedItem: TieredMenuProcessedItem): boolean;
isItemFocused(processedItem: TieredMenuProcessedItem): boolean;
isItemGroup(processedItem: TieredMenuProcessedItem): boolean;
hasIcon(processedItem: TieredMenuProcessedItem): boolean;
hasBadge(processedItem: TieredMenuProcessedItem): boolean;
shouldEscapeLabel(processedItem: TieredMenuProcessedItem): boolean;
getRouterLinkActiveOptions(processedItem: TieredMenuProcessedItem): any;
getItemTemplateContext(processedItem: TieredMenuProcessedItem): TieredMenuItemTemplateContext;
getAriaHaspopup(processedItem: TieredMenuProcessedItem): "menu" | undefined;
getAriaExpanded(processedItem: TieredMenuProcessedItem): boolean | undefined;
shouldShowSubmenu(processedItem: TieredMenuProcessedItem): boolean;
isSubmenuVisible(processedItem: TieredMenuProcessedItem): boolean;
hasRouterLink(processedItem: TieredMenuProcessedItem): boolean;
isSeparator(processedItem: TieredMenuProcessedItem): boolean;
isMenuItem(processedItem: TieredMenuProcessedItem): boolean;
getListClass(): string | undefined;
getListSection(): "rootList" | "submenu";
getMotionState(): boolean;
getAriaDisabled(processedItem: TieredMenuProcessedItem): true | undefined;
_ptm(section: string, options?: Record<string, unknown>): any;
getPTOptions(processedItem: TieredMenuProcessedItem, index: number, key: string): any;
onItemMouseEnter(param: {
$event: Event;
processedItem: TieredMenuProcessedItem;
}): void;
onItemClick(event: Event, processedItem: TieredMenuProcessedItem): void;
onBeforeEnter(event: MotionEvent): void;
onAfterLeave(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TieredMenuSub, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TieredMenuSub, "p-tieredmenusub", 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; }; "autoDisplay": { "alias": "autoDisplay"; "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; }; "inlineStyles": { "alias": "inlineStyles"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemMouseEnter": "itemMouseEnter"; "menuFocus": "menuFocus"; "menuBlur": "menuBlur"; "menuKeydown": "menuKeydown"; }, never, never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* TieredMenu displays submenus in nested overlays.
* @group Components
*/
declare class TieredMenu extends BaseComponent<TieredMenuPassThrough> {
componentName: string;
/**
* An array of menuitems.
* @group Props
*/
model: _angular_core.InputSignal<MenuItem[] | undefined>;
/**
* Defines if menu would displayed as a popup.
* @group Props
*/
popup: _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>;
/**
* The breakpoint to define the maximum width boundary.
* @group Props
*/
breakpoint: _angular_core.InputSignal<string>;
/**
* 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>;
/**
* Whether to show a root submenu on mouse over.
* @defaultValue true
* @group Props
*/
autoDisplay: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Current id state as a string.
* @group Props
*/
id: _angular_core.InputSignal<string | undefined>;
/**
* 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>;
/**
* When present, it specifies that the component should be disabled.
* @group Props
*/
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex: _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<Record<string, never>>;
/**
* Callback to invoke when overlay menu is hidden.
* @group Emits
*/
onHide: _angular_core.OutputEmitterRef<Record<string, never>>;
rootmenu: _angular_core.Signal<TieredMenuSub | undefined>;
containerViewChild: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
/**
* Custom submenu icon template.
* @group Templates
*/
submenuIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom item template.
* @param {TieredMenuItemTemplateContext} context - item context.
* @see {@link TieredMenuItemTemplateContext}
* @group Templates
*/
itemTemplate: _angular_core.Signal<TemplateRef<TieredMenuItemTemplateContext> | undefined>;
$appendTo: _angular_core.Signal<AppendTo>;
render: _angular_core.WritableSignal<boolean>;
container: HTMLElement | undefined;
outsideClickListener: VoidListener;
resizeListener: VoidListener;
scrollHandler: Nullable<ConnectedOverlayScrollHandler>;
target: HTMLElement | null;
relatedTarget: HTMLElement | null;
visible: boolean | undefined;
dirty: boolean;
focused: boolean;
activeItemPath: _angular_core.WritableSignal<TieredMenuProcessedItem[]>;
focusedItemInfo: _angular_core.WritableSignal<TieredMenuFocusedItemInfo>;
searchValue: string;
searchTimeout: ReturnType<typeof setTimeout> | undefined;
_processedItems: TieredMenuProcessedItem[];
_componentStyle: TieredMenuStyle;
bindDirectiveInstance: Bind;
overlayService: OverlayService;
private matchMediaListener;
private query;
queryMatches: _angular_core.WritableSignal<boolean>;
private _internalId;
$id: _angular_core.Signal<string>;
shouldRender(): boolean;
shouldAnimate(): boolean;
getMenuTabindex(): number;
getFocusedItemIdValue(): string | null | undefined;
get visibleItems(): TieredMenuProcessedItem[];
get processedItems(): TieredMenuProcessedItem[];
get focusedItemId(): string | null;
constructor();
onAfterViewChecked(): void;
onInit(): void;
bindMatchMediaListener(): void;
unbindMatchMediaListener(): void;
createProcessedItems(items: MenuItem[] | undefined, level?: number, parent?: TieredMenuProcessedItem | Record<string, never>, parentKey?: string): TieredMenuProcessedItem[];
getItemProp(item: MenuItem, name: keyof MenuItem): any;
getProccessedItemLabel(processedItem: TieredMenuProcessedItem): any;
getItemLabel(item: MenuItem): any;
isProcessedItemGroup(processedItem: TieredMenuProcessedItem): boolean;
isSelected(processedItem: TieredMenuProcessedItem): boolean;
isValidSelectedItem(processedItem: TieredMenuProcessedItem): boolean;
isValidItem(processedItem: TieredMenuProcessedItem): boolean;
isItemDisabled(item: MenuItem): boolean;
isItemVisible(item: MenuItem): boolean;
isItemSeparator(item: MenuItem): boolean;
isItemMatched(processedItem: TieredMenuProcessedItem): boolean;
isProccessedItemGroup(processedItem: TieredMenuProcessedItem): boolean;
onOverlayClick(event: MouseEvent): void;
onItemClick(event: TieredMenuItemClickEvent): void;
onItemMouseEnter(event: TieredMenuItemMouseEnterEvent): 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: TieredMenuItemClickEvent | TieredMenuItemMouseEnterEvent, type?: string): void;
onMenuFocus(_event: FocusEvent): void;
onMenuBlur(_event: FocusEvent): void;
onOverlayBeforeEnter(event: MotionEvent): void;
onOverlayAfterEnter(): void;
onOverlayAfterLeave(): void;
relativeAlign: boolean;
alignOverlay(): void;
appendOverlay(): void;
restoreOverlayAppend(): void;
moveOnTop(): void;
/**
* Hides the popup menu.
* @group Method
*/
hide(_event?: Event, isFocus?: boolean): void;
/**
* Toggles the visibility of the popup menu.
* @param {TieredMenuToggleEvent} event - Toggle event.
* @group Method
*/
toggle(event: TieredMenuToggleEvent): void;
/**
* Displays the popup menu.
* @param {TieredMenuToggleEvent} event - Toggle event.
* @group Method
*/
show(event: TieredMenuToggleEvent, isFocus?: boolean): void;
searchItems(event: KeyboardEvent, char: string): boolean;
findLastFocusedItemIndex(): number;
findLastItemIndex(): number;
findPrevItemIndex(index: number): number;
findNextItemIndex(index: number): number;
findFirstFocusedItemIndex(): number;
findFirstItemIndex(): number;
findSelectedItemIndex(): number;
changeFocusedItemIndex(_event: Event, index: number): void;
scrollInView(index?: number): void;
bindScrollListener(): void;
unbindScrollListener(): void;
bindResizeListener(): void;
bindOutsideClickListener(): void;
unbindOutsideClickListener(): void;
unbindResizeListener(): void;
onOverlayHide(): void;
onDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TieredMenu, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TieredMenu, "p-tieredmenu, p-tiered-menu", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "popup": { "alias": "popup"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "autoDisplay": { "alias": "autoDisplay"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; }, { "onShow": "onShow"; "onHide": "onHide"; }, ["submenuIconTemplate", "itemTemplate"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class TieredMenuModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TieredMenuModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<TieredMenuModule, never, [typeof TieredMenu, typeof i2.SharedModule], [typeof TieredMenu, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<TieredMenuModule>;
}
export { TieredMenu, TieredMenuClasses, TieredMenuModule, TieredMenuStyle };