@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
67 lines (66 loc) • 2.41 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { ModusSize } from '../types';
/**
* A customizable menu item component used to display the item portion of a menu.
*
* This component supports a 'start-icon' `<slot>` that allows for custom icons to be placed at the beginning of the item.
*/
export declare class ModusWcMenuItem {
private inheritedAttributes;
private parentMenuObserver?;
/** Reference to the host element */
el: HTMLElement;
bordered?: boolean;
/** If true, renders a checkbox at the start of the menu item. */
checkbox?: boolean;
/** Custom CSS class to apply to the li element. */
customClass?: string;
/** The disabled state of the menu item. */
disabled?: boolean;
/** The text rendered in the menu item. */
label: string;
/** The selected state of the menu item. */
selected?: boolean;
/** The focused state of the menu item. */
focused?: boolean;
/** The size of the menu item. */
size?: ModusSize;
/** The text rendered beneath the label. */
subLabel?: string;
/** The tooltip text to display when hovering over the menu item. */
tooltipContent?: string;
/** The position of the tooltip relative to the menu item. */
tooltipPosition?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
/** The unique identifying value of the menu item. */
value: string;
/** Whether this menu item has a collapsible submenu. When true, the item will show a caret and handle toggle behavior. */
hasSubmenu?: boolean;
/** Internal state to track if submenu is expanded */
isExpanded: boolean;
private _selectionMode?;
/** Event emitted when a menu item is selected. */
itemSelect: EventEmitter<{
value: string;
selected?: boolean;
}>;
componentWillLoad(): void;
componentDidLoad(): void;
disconnectedCallback(): void;
private handleSelectionModeChange;
handleKeyDown(e: KeyboardEvent): void;
/**
* Public method to collapse the submenu if it's expanded
*/
collapseSubmenu(): Promise<void>;
private getRootMenu;
private deselectSiblings;
private resolveSelectionMode;
private getClasses;
private getButtonClasses;
private getRole;
private hasCheckbox;
private getAriaChecked;
private getAriaSelected;
private handleItemSelect;
render(): any;
}