import ShoelaceElement from '../../internal/shoelace-element.js'; import SlTreeItem from '../tree-item/tree-item.component.js'; import type { CSSResultGroup } from 'lit'; /** * @summary Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user. * @documentation https://shoelace.style/components/tree * @status stable * @since 2.0 * * @event {{ selection: SlTreeItem[] }} sl-selection-change - Emitted when a tree item is selected or deselected. * * @slot - The default slot. * @slot expand-icon - The icon to show when the tree item is expanded. Works best with ``. * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with ``. * * @csspart base - The component's base wrapper. * * @cssproperty [--indent-size=var(--sl-spacing-medium)] - The size of the indentation for nested items. * @cssproperty [--indent-guide-color=var(--sl-color-neutral-200)] - The color of the indentation line. * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the * indentation line's starting position. * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed. * @cssproperty [--indent-guide-width=0] - The width of the indentation line. */ export default class SlTree extends ShoelaceElement { static styles: CSSResultGroup; defaultSlot: HTMLSlotElement; expandedIconSlot: HTMLSlotElement; collapsedIconSlot: HTMLSlotElement; /** * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */ selection: 'single' | 'multiple' | 'leaf'; private lastFocusedItem; private readonly localize; private mutationObserver; private clickTarget; constructor(); connectedCallback(): Promise; disconnectedCallback(): void; private getExpandButtonIcon; private initTreeItem; private handleTreeChanged; private selectItem; private getAllTreeItems; private focusItem; private handleKeyDown; private handleClick; handleMouseDown(event: MouseEvent): void; private handleFocusOut; private handleFocusIn; private handleSlotChange; handleSelectionChange(): Promise; /** @internal Returns the list of tree items that are selected in the tree. */ get selectedItems(): SlTreeItem[]; /** @internal Gets focusable tree items in the tree. */ getFocusableItems(): SlTreeItem[]; render(): import("lit-html").TemplateResult<1>; }