import * as i0 from '@angular/core'; import { OnInit, OnChanges, EventEmitter, SimpleChanges, OnDestroy, AfterViewInit, QueryList, ElementRef } from '@angular/core'; import { FocusableOption } from '@angular/cdk/a11y'; import { EuiMenuItem } from '@eui/core'; export { EuiMenuItem } from '@eui/core'; /** * Represents a single item within an eUI menu structure. Supports hierarchical navigation with expandable/collapsible children, * multiple interaction modes (URL navigation, router links, commands, labels), and visual states (collapsed, disabled, selected). * Implements keyboard navigation and accessibility features for menu interactions. * * @usageNotes * ### Basic Usage * ```typescript * // Typically used within EuiMenuComponent via items array * item: EuiMenuItem = { * id: 'home', * label: 'Home', * icon: 'eui-home', * url: '/home' * }; * ``` * * ### With Children * ```typescript * item: EuiMenuItem = { * id: 'settings', * label: 'Settings', * expanded: true, * children: [ * { id: 'profile', label: 'Profile', url: '/settings/profile' } * ] * }; * ``` * * ### Accessibility * - Implements FocusableOption for keyboard navigation * - ARIA attributes for menu item role and state * - Keyboard support for Enter, Space, and Arrow keys * - Focus management for nested menu structures * * ### Notes * - Automatically managed by parent EuiMenuComponent * - Supports tooltips in collapsed menu mode * - Can display badges, action icons, and external link indicators */ declare class EuiMenuItemComponent implements OnInit, OnChanges, FocusableOption { role: string; ariaLabel: string; get cssClasses(): string; tabindex: string; get ariaHasPopup(): boolean; get ariaExpanded(): boolean; get ariaDisabled(): boolean; /** * The menu item data model containing label, icon, navigation properties, children, and state flags. * Required. Defines all visual and behavioral aspects of the menu item. */ item: EuiMenuItem; /** * Reference to the parent menu item when this item is nested within a hierarchical menu structure. * Optional. Used to determine styling and behavior based on menu depth. */ parent: EuiMenuItem; /** * Controls visibility of the expand/collapse icon for menu items with children. * @default true. Set to false to hide the expansion indicator. */ hasExpandIcon: boolean; /** * Emitted when the user toggles the expanded/collapsed state of a menu item with children. * Payload: The EuiMenuItem that was toggled. Triggered by clicking the expand icon or pressing Enter/Space on it. */ expandToggle: EventEmitter>; /** * Emitted when the user clicks or activates the menu item. * Payload: The EuiMenuItem that was clicked. Triggered by mouse click or keyboard activation (Enter/Space). */ itemClick: EventEmitter>; expandMenuLabel: string; collapseMenuLabel: string; isUrlItem: boolean; isLinkItem: boolean; isLabelItem: boolean; isActionIconFocused: boolean; /** * Indicates whether the menu item displays an icon. * @default false. Affects layout and spacing calculations. */ hasIcon: boolean; /** * Indicates whether the menu item displays an icon with a label in collapsed mode. * @default false. Applies special styling for icon-label combinations when menu is collapsed. */ hasIconLabel: boolean; /** * Enables tooltip display when the menu is in collapsed state. * @default false. Tooltip content is derived from item.tooltip or item.label. */ hasTooltip: boolean; /** * Enables tooltip display when the menu is in expanded state. * @default false. Useful for showing additional context even when labels are visible. */ hasTooltipOnExpanded: boolean; /** * Indicates whether the parent menu is in collapsed state. * @default false. Controls visibility of labels and affects tooltip behavior. */ isCollapsed: boolean; /** * Enables display of initials or abbreviated text when the menu is collapsed. * @default false. Used for compact representation in collapsed menus. */ hasCollapsedInitials: boolean; /** * Applies bold font weight to root-level menu items (items without a parent). * @default false. Provides visual hierarchy distinction for top-level navigation. */ hasBoldRootLevel: boolean; private elementRef; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; stopPropagation(event: MouseEvent): void; get menuItemTooltip(): string; onClick(event: MouseEvent | KeyboardEvent): void; onExpandToggle(event: Event): void; onActionIconClick(event: MouseEvent): void; onActionIconKeyDown(event: KeyboardEvent): void; focusActionIcon(): void; onActionIconFocusOut(): void; focus(): void; /** * Check if an element is visible in the viewport * @param partiallyVisible */ elementIsVisibleInViewport(partiallyVisible?: boolean): boolean; /** * Scroll the element into view * @param properties */ scrollIntoView(properties: unknown): void; private getTooltipFromItem; private getAriaLabel; /** * Returns the default eui-menu-item class on the HostBinding function * @private */ private getCssClasses; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hasIcon: unknown; static ngAcceptInputType_hasIconLabel: unknown; static ngAcceptInputType_hasTooltip: unknown; static ngAcceptInputType_hasTooltipOnExpanded: unknown; static ngAcceptInputType_isCollapsed: unknown; static ngAcceptInputType_hasCollapsedInitials: unknown; static ngAcceptInputType_hasBoldRootLevel: unknown; } /** * Navigation menu component supporting hierarchical item structures with expand/collapse functionality, * keyboard navigation, filtering, and router integration. Provides both collapsed and expanded states * with optional icons, tooltips, and scroll-to-active-item behavior. Commonly used for application * sidebars, navigation panels, and hierarchical content navigation. * * @usageNotes * ### Basic Usage * ```typescript * menuItems: EuiMenuItem[] = [ * { id: '1', label: 'Dashboard', url: '/dashboard', icon: 'eui-home' }, * { id: '2', label: 'Settings', children: [ * { id: '2-1', label: 'Profile', url: '/settings/profile' }, * { id: '2-2', label: 'Security', url: '/settings/security' } * ]} * ]; * ``` * * ```html * * ``` * * ### With Filter * ```html * * ``` * * ### Collapsed Mode * ```html * * ``` * * ### Accessibility * - Full keyboard navigation with Arrow keys, Enter, and Space * - ARIA roles and properties for menu structure * - Focus management for nested items * - Screen reader announcements for expand/collapse states * * ### Notes * - Supports URL navigation, router links, and command callbacks * - Automatically expands to active route when `hasScrollToItem` is enabled * - Filter functionality searches through all menu levels * - Collapsed mode shows icons or initials with tooltips */ declare class EuiMenuComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit { protected menuItemsComponents: QueryList; protected filterInput: ElementRef; menubar: ElementRef; get cssClasses(): string; /** * Hierarchical array of menu items to display. Each item can contain children for nested menus. * Required. */ items: EuiMenuItem[]; /** * Accessible label for the search filter input field. Defaults to 'Search filter' if not provided. */ searchFilterLabel: string; /** * Accessible label for external link indicators. */ externalLinkLabel: string; /** * URL fragment identifier to append when navigating to internal routes. */ fragmentId: string; /** * Current filter value for programmatic filtering of menu items. Defaults to empty string. */ filterValue: string; /** * Collapses the menu to a compact state showing only icons or initials. Defaults to false. */ isCollapsed: boolean; /** * Displays item initials when menu is collapsed instead of icons. Defaults to false. */ hasCollapsedInitials: boolean; /** * Enables the search filter input for filtering menu items by label. Defaults to false. */ hasFilter: boolean; /** * Displays icons for menu items when provided in item configuration. Defaults to false. */ hasIcons: boolean; /** * Shows labels alongside icons in the menu. Defaults to false. */ hasIconsLabels: boolean; /** * Enables tooltips on menu items when collapsed. Defaults to true. */ hasTooltip: boolean; /** * Shows tooltips even when menu is expanded. Defaults to false. */ hasTooltipOnExpanded: boolean; /** * Expands all menu items that do not have an explicit expanded property set. Items with * expanded: true or expanded: false are not affected. Defaults to false. */ expandAllItems: boolean; /** * Applies flat styling without hierarchical indentation. Defaults to false. */ isFlat: boolean; /** * Automatically scrolls to the active menu item matching the current route on navigation. * Defaults to false. */ hasScrollToItem: boolean; /** * Applies bold font weight to root-level menu items. Defaults to false. */ hasBoldRootLevel: boolean; /** * Emits true when any menu item is clicked, regardless of item type or state. */ isClick: EventEmitter; /** * Emits the clicked menu item. Triggered on all item clicks including disabled items. */ itemClick: EventEmitter; /** * Emits the menu item when its expanded state is toggled. Only triggered for items with children. */ expandToggle: EventEmitter>; protected hasExpandIcon: boolean; private subscription; private focusKeyManager; private router; private route; private cd; stopPropagation(event: MouseEvent): void; onKeydown(event: KeyboardEvent): void; ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; protected onClick(item: EuiMenuItem): void; protected onExpandToggle(item: EuiMenuItem): void; protected onMenuFilterClick(event: MouseEvent): void; /** * Filter the menu items based on the input value * @param event * @protected */ protected onFilter(event: Event): void; protected onFilter(value: string): void; /** * Check if the children of an item should be rendered. The children should be rendered if the item is expanded * or if the item is filtered and the filter input has a value. There are two cases when the filter input has a value: * 1. The user has typed something in the filter input * 2. The user has typed something in the filter input and the item is filtered * In general there are two states to be taken into account, the expanded state and the filtered state. * * @param item * @protected */ protected shouldRenderChild(item: EuiMenuItem): boolean; /** * finds the EuiMenuItemComponent in the queried focusableItems[] that matches the passed EuiMenuItem object * * @param menuItem an EuiMenuItem * @private */ private findFocusableItem; /** * finds the first item that is filtered * * @param menuItems an array of EuiMenuItem * @private */ private findFirstFilteredItem; /** * finds all filtered menu items * * @param menuItems an array of EuiMenuItem * @private */ private findFilteredItems; /** * checks the focus state of the action icon * * @private */ private checkActionIconFocusState; /** * filter all menu items given a value * * @param menuItems an array of menu items * @param filterValue the value to filter menu items * @private */ private filterMenuItems; /** * expand / collapse all items * * @param isExpanded * @param items * @private */ private setExpandedToAllItems; /** * expand / collapse a menu item * * @param item The item where the "expand" had been toggled * @param items The items list (used for recursion) * @private */ private onExpandToggled; /** * configure an array of items with visible, filtered and expand (in case of expandAllItems flag enabled) properties * * @param items An array of EuiMenuItem * @param parent the parent item of items if exists * @private */ private configureItems; /** * Given a URL and a list of items, it will expand the item that matches the URL. If not item matches exactly the url, then it will * match the item that is most relevant to that url. * * @param url * @param items * @param relevantItem * @private */ private findMostRelevantItem; /** * Given two items with url return the one with the most relevant url that matches given url * * @param url A URL to be matched with the one of given items * @param item1 * @param item2 * @private */ private getMostRelevantItem; /** * Given an item, if there's a parent expand it until you reach the root item * * @param item Given menu item * @private */ private expandToGivenItem; /** * Set a random id to an item and its child if they don't have one * @param item * @private */ private setRandomId; /** * Scroll to an item if it's not visible in the viewport * @param url * @private */ private scrollToItem; /** * Check if the filter input has a value * @private */ private isFilterEnabled; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isCollapsed: unknown; static ngAcceptInputType_hasCollapsedInitials: unknown; static ngAcceptInputType_hasFilter: unknown; static ngAcceptInputType_hasIcons: unknown; static ngAcceptInputType_hasIconsLabels: unknown; static ngAcceptInputType_hasTooltip: unknown; static ngAcceptInputType_hasTooltipOnExpanded: unknown; static ngAcceptInputType_expandAllItems: unknown; static ngAcceptInputType_isFlat: unknown; static ngAcceptInputType_hasScrollToItem: unknown; static ngAcceptInputType_hasBoldRootLevel: unknown; } declare const EUI_MENU: readonly [typeof EuiMenuComponent, typeof EuiMenuItemComponent]; export { EUI_MENU, EuiMenuComponent, EuiMenuItemComponent }; //# sourceMappingURL=eui-components-eui-menu.d.ts.map