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,
403 lines (398 loc) • 18.6 kB
TypeScript
import { MegaMenuPassThrough, ProcessedMegaMenuItem, MegaMenuItemTemplateContext, MegaMenuOrientation, MegaMenuItemClickEvent, MegaMenuItemMouseEnterEvent, MegaMenuFocusedItemInfo } from 'primeng/types/megamenu';
export * from 'primeng/types/megamenu';
import * as _angular_core from '@angular/core';
import { TemplateRef, ElementRef } from '@angular/core';
import { MotionOptions } from '@primeuix/motion';
import * as i2 from 'primeng/api';
import { MegaMenuItem } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { VoidListener } from 'primeng/ts-helpers';
import { BaseStyle } from 'primeng/base';
/**
*
* MegaMenu is navigation component that displays submenus together.
*
* [Live Demo](https://www.primeng.org/megamenu/)
*
* @module megamenustyle
*
*/
declare enum MegaMenuClasses {
/**
* Class name of the root element
*/
root = "p-megamenu",
/**
* Class name of the start element
*/
start = "p-megamenu-start",
/**
* Class name of the button element
*/
button = "p-megamenu-button",
/**
* Class name of the root list element
*/
rootList = "p-megamenu-root-list",
/**
* Class name of the submenu item element
*/
submenuItem = "p-megamenu-submenu-item",
/**
* Class name of the item element
*/
item = "p-megamenu-item",
/**
* Class name of the item content element
*/
itemContent = "p-megamenu-item-content",
/**
* Class name of the item link element
*/
itemLink = "p-megamenu-item-link",
/**
* Class name of the item icon element
*/
itemIcon = "p-megamenu-item-icon",
/**
* Class name of the item label element
*/
itemLabel = "p-megamenu-item-label",
/**
* Class name of the submenu icon element
*/
submenuIcon = "p-megamenu-submenu-icon",
/**
* Class name of the panel element
*/
panel = "p-megamenu-panel",
/**
* Class name of the grid element
*/
grid = "p-megamenu-grid",
/**
* Class name of the submenu element
*/
submenu = "p-megamenu-submenu",
/**
* Class name of the submenu item label element
*/
submenuItemLabel = "p-megamenu-submenu-item-label",
/**
* Class name of the separator element
*/
separator = "p-megamenu-separator",
/**
* Class name of the end element
*/
end = "p-megamenu-end"
}
declare class MegaMenuStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-megamenu-mobile': any;
'p-megamenu-mobile-active': any;
'p-megamenu-horizontal': boolean;
'p-megamenu-vertical': boolean;
})[];
start: string;
button: string;
rootList: string;
submenuLabel: ({ instance, processedItem }: {
instance: any;
processedItem: any;
}) => (string | {
'p-disabled': any;
})[];
item: ({ instance, processedItem }: {
instance: any;
processedItem: any;
}) => any[];
itemContent: string;
itemLink: string;
itemIcon: string;
itemLabel: string;
submenuIcon: string;
overlay: string;
grid: string;
column: ({ instance, processedItem }: {
instance: any;
processedItem: any;
}) => any;
submenu: string;
separator: string;
end: string;
};
inlineStyles: {
rootList: ({ instance }: {
instance: any;
}) => {
'max-height': any;
overflow: string;
};
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MegaMenuStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<MegaMenuStyle>;
}
interface MegaMenuStyle extends BaseStyle {
}
declare class MegaMenuSub extends BaseComponent<MegaMenuPassThrough> {
bindDirectiveInstance: Bind;
$pcMegaMenu: MegaMenu | undefined;
$pcMegaMenuSub: MegaMenuSub | undefined;
id: _angular_core.InputSignal<string | undefined>;
items: _angular_core.InputSignal<ProcessedMegaMenuItem[] | undefined>;
itemTemplate: _angular_core.InputSignal<TemplateRef<MegaMenuItemTemplateContext> | undefined>;
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>;
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
orientation: _angular_core.InputSignal<MegaMenuOrientation | undefined>;
activeItem: _angular_core.InputSignal<ProcessedMegaMenuItem | null | undefined>;
submenu: _angular_core.InputSignal<ProcessedMegaMenuItem | undefined>;
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
queryMatches: _angular_core.InputSignalWithTransform<boolean, unknown>;
mobileActive: _angular_core.InputSignalWithTransform<boolean, unknown>;
scrollHeight: _angular_core.InputSignal<string | undefined>;
tabindex: _angular_core.InputSignalWithTransform<number, unknown>;
root: _angular_core.InputSignalWithTransform<boolean, unknown>;
itemClick: _angular_core.OutputEmitterRef<MegaMenuItemClickEvent>;
itemMouseEnter: _angular_core.OutputEmitterRef<MegaMenuItemMouseEnterEvent>;
menuFocus: _angular_core.OutputEmitterRef<FocusEvent>;
menuBlur: _angular_core.OutputEmitterRef<FocusEvent>;
menuKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
menuMouseDown: _angular_core.OutputEmitterRef<MouseEvent>;
megaMenu: MegaMenu;
_componentStyle: MegaMenuStyle;
hostName: string;
hostClass: _angular_core.Signal<string | undefined>;
hostDisplay: _angular_core.Signal<"none" | null | undefined>;
hostRole: _angular_core.Signal<"menubar" | "menu">;
hostDataPcSection: _angular_core.Signal<"submenu" | "rootlist">;
isHorizontalOrMobile: _angular_core.Signal<boolean>;
isHorizontal: _angular_core.Signal<boolean>;
isSeparator(processedItem: ProcessedMegaMenuItem): any;
hasRouterLink(processedItem: ProcessedMegaMenuItem): any;
hasIcon(processedItem: ProcessedMegaMenuItem): any;
shouldEscape(processedItem: ProcessedMegaMenuItem): any;
hasBadge(processedItem: ProcessedMegaMenuItem): any;
isVisibleItemGroup(processedItem: ProcessedMegaMenuItem): boolean;
getAriaHasPopup(processedItem: ProcessedMegaMenuItem): "menu" | undefined;
getAriaExpanded(processedItem: ProcessedMegaMenuItem): boolean | undefined;
getRouterLinkActiveOptions(processedItem: ProcessedMegaMenuItem): any;
hasSubmenuIcon: _angular_core.Signal<boolean>;
onAfterViewChecked(): void;
onItemClick(event: Event, processedItem: ProcessedMegaMenuItem): void;
getItemProp(processedItem: ProcessedMegaMenuItem | undefined, name: string, params?: {
originalEvent: Event;
item: MegaMenuItem;
} | null): any;
getItemId(processedItem: ProcessedMegaMenuItem): string;
getSubListId(processedItem: ProcessedMegaMenuItem): string;
getItemLabel(processedItem: ProcessedMegaMenuItem | undefined): string;
isSubmenuVisible(submenu: ProcessedMegaMenuItem | undefined): boolean;
isItemVisible(processedItem: ProcessedMegaMenuItem | undefined): boolean;
isItemActive(processedItem: ProcessedMegaMenuItem): boolean;
isItemDisabled(processedItem: ProcessedMegaMenuItem): boolean;
isItemFocused(processedItem: ProcessedMegaMenuItem): boolean;
isItemGroup(processedItem: ProcessedMegaMenuItem): boolean;
getAriaSetSize(): number | undefined;
getAriaPosInset(index: number): number;
onItemMouseEnter(param: {
$event: Event;
processedItem: ProcessedMegaMenuItem;
}): void;
getPTOptions(processedItem: ProcessedMegaMenuItem, index: number, key: string): any;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MegaMenuSub, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MegaMenuSub, "p-megamenu-sub, ul[pMegaMenuSub]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "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; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "activeItem": { "alias": "activeItem"; "required": false; "isSignal": true; }; "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; "queryMatches": { "alias": "queryMatches"; "required": false; "isSignal": true; }; "mobileActive": { "alias": "mobileActive"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "root": { "alias": "root"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemMouseEnter": "itemMouseEnter"; "menuFocus": "menuFocus"; "menuBlur": "menuBlur"; "menuKeydown": "menuKeydown"; "menuMouseDown": "menuMouseDown"; }, never, never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* MegaMenu is navigation component that displays submenus together.
* @group Components
*/
declare class MegaMenu extends BaseComponent<MegaMenuPassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
/**
* An array of menuitems.
* @group Props
*/
model: _angular_core.InputSignal<MegaMenuItem[] | undefined>;
/**
* Defines the orientation.
* @group Props
*/
orientation: _angular_core.InputSignal<MegaMenuOrientation>;
/**
* 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>;
/**
* The breakpoint to define the maximum width boundary.
* @group Props
*/
breakpoint: _angular_core.InputSignal<string>;
/**
* Height of the viewport, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
scrollHeight: _angular_core.InputSignal<string>;
/**
* 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>;
/**
* Defines the motion options for the submenu open/close animation.
* @group Props
*/
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMotionOptions: _angular_core.Signal<MotionOptions>;
/**
* Defines template option for start.
* @group Templates
*/
startTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Defines template option for end.
* @group Templates
*/
endTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Defines template option for menu icon.
* @group Templates
*/
menuiconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Defines template option for submenu icon.
* @group Templates
*/
submenuiconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom item template.
* @param {MegaMenuItemTemplateContext} context - item context.
* @see {@link MegaMenuItemTemplateContext}
* @group Templates
*/
itemTemplate: _angular_core.Signal<TemplateRef<MegaMenuItemTemplateContext> | undefined>;
/**
* Custom menu button template on responsive mode.
* @group Templates
*/
buttonTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom menu button icon template on responsive mode.
* @group Templates
*/
buttoniconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
menubuttonViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
rootmenu: _angular_core.Signal<MegaMenuSub | undefined>;
outsideClickListener: VoidListener;
resizeListener: ((event: Event) => void) | null;
dirty: boolean;
focused: _angular_core.WritableSignal<boolean>;
activeItem: _angular_core.WritableSignal<ProcessedMegaMenuItem | null>;
focusedItemInfo: _angular_core.WritableSignal<MegaMenuFocusedItemInfo>;
searchValue: string;
searchTimeout: ReturnType<typeof setTimeout> | null;
_componentStyle: MegaMenuStyle;
private matchMediaListener;
private query;
queryMatches: _angular_core.WritableSignal<boolean>;
mobileActive: _angular_core.WritableSignal<boolean>;
private _internalId;
$id: _angular_core.Signal<string>;
processedItems: _angular_core.Signal<ProcessedMegaMenuItem[]>;
visibleItems: _angular_core.Signal<ProcessedMegaMenuItem[]>;
focusedItemId: _angular_core.Signal<string | null>;
rootMenuTabindex: _angular_core.Signal<number>;
activeFocusedItemId: _angular_core.Signal<string | null | undefined>;
get navigationAriaLabel(): string | undefined;
constructor();
onInit(): void;
onAfterViewChecked(): void;
bindMatchMediaListener(): void;
unbindMatchMediaListener(): void;
createProcessedItems(items: MegaMenuItem[], level?: number, parent?: ProcessedMegaMenuItem | Record<string, never>, parentKey?: string, columnIndex?: number): ProcessedMegaMenuItem[];
getItemProp(item: MegaMenuItem, name: string): any;
onItemClick(event: MegaMenuItemClickEvent): void;
onItemMouseEnter(event: MegaMenuItemMouseEnterEvent): void;
menuButtonClick(event: MouseEvent): void;
menuButtonKeydown(event: KeyboardEvent): void;
toggle(event: MouseEvent): void;
show(): void;
scrollInView(index?: number): void;
onItemChange(event: MegaMenuItemClickEvent | MegaMenuItemMouseEnterEvent): void;
hide(_event?: Event, isFocus?: boolean): void;
onMenuMouseDown(_event: MouseEvent): void;
onMenuFocus(event: FocusEvent): void;
onMenuBlur(event: FocusEvent): void;
onKeyDown(event: KeyboardEvent): void;
findFirstFocusedItemIndex(): number;
findFirstItemIndex(): number;
findSelectedItemIndex(): number;
isProcessedItemGroup(processedItem: ProcessedMegaMenuItem): boolean;
isSelected(processedItem: ProcessedMegaMenuItem): boolean;
isValidSelectedItem(processedItem: ProcessedMegaMenuItem): boolean;
isValidItem(processedItem: ProcessedMegaMenuItem): boolean;
isItemDisabled(item: MegaMenuItem): boolean;
isItemSeparator(item: MegaMenuItem): boolean;
isItemMatched(processedItem: ProcessedMegaMenuItem): boolean;
isProccessedItemGroup(processedItem: ProcessedMegaMenuItem | null): boolean;
searchItems(event: KeyboardEvent, char: string): boolean;
getProccessedItemLabel(processedItem: ProcessedMegaMenuItem): any;
getItemLabel(item: MegaMenuItem): any;
changeFocusedItemInfo(_event: KeyboardEvent, index: number): 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;
findVisibleItem(index: number): ProcessedMegaMenuItem | null;
findLastFocusedItemIndex(): number;
findLastItemIndex(): number;
findPrevItemIndex(index: number): number;
findNextItemIndex(index: number): number;
bindResizeListener(): void;
bindOutsideClickListener(): void;
unbindOutsideClickListener(): void;
unbindResizeListener(): void;
onDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MegaMenu, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MegaMenu, "p-megamenu, p-mega-menu", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "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; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; }, {}, ["startTemplate", "endTemplate", "menuiconTemplate", "submenuiconTemplate", "itemTemplate", "buttonTemplate", "buttoniconTemplate"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class MegaMenuModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MegaMenuModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<MegaMenuModule, never, [typeof MegaMenu, typeof i2.SharedModule], [typeof MegaMenu, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<MegaMenuModule>;
}
export { MegaMenu, MegaMenuClasses, MegaMenuModule, MegaMenuStyle };