@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
72 lines (71 loc) • 2.77 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { ModusSize } from '../types';
/**
* A customizable tree item component used to display the item portion of a tree menu.
*
* This component supports `start` and `end` slots for custom content at the beginning and end of the item.
*/
export declare class ModusWcTreeItem {
private inheritedAttributes;
private parentTreeMenuObserver?;
/** Reference to the host element */
el: HTMLElement;
bordered?: boolean;
/** If true, renders a checkbox at the start of the tree item. */
checkbox?: boolean;
/** Custom CSS class to apply to the li element. */
customClass?: string;
/** The disabled state of the tree item. */
disabled?: boolean;
/** The text rendered in the tree item. */
label: string;
/** The selected state of the tree item. */
selected?: boolean;
/** The focused state of the tree item. */
focused?: boolean;
/** The size of the tree item. */
size?: ModusSize;
/** The text rendered beneath the label. */
subLabel?: string;
/** The tooltip text to display when hovering over the tree item. */
tooltipContent?: string;
/** The position of the tooltip relative to the tree item. */
tooltipPosition?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
/** The unique identifying value of the tree item. */
value: string;
/** Whether this tree item has a collapsible submenu. When true, the item will show a caret and handle toggle behavior. */
hasSubmenu?: boolean;
/** When true, prevents the built-in inline submenu toggle on click. The item will only emit `itemSelect` so the consumer can handle the expansion externally (e.g. show a flyout panel). Only has an effect when `hasSubmenu` is also true. */
blockExpand?: boolean;
/** Internal state to track if submenu is expanded */
isExpanded: boolean;
private _selectionMode?;
/** Event emitted when a tree 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 getRootTreeMenu;
private deselectSiblings;
private resolveSelectionMode;
private getClasses;
private getInteractiveClasses;
private getRole;
private hasCheckbox;
private getAriaChecked;
private getAriaSelected;
private isSlotClick;
private isInteractiveSlotClick;
private handleItemClick;
private handleItemSelect;
render(): any;
}