@tylertech/forge 3.12.1 → 3.13.0

package/esm/tree/tree-item/tree-item.js

@@ -0,0 +1,378 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import { consume } from '@lit/context';
+import { tylIconCheckBox, tylIconCheckBoxOutlineBlank, tylIconIndeterminateCheckBox } from '@tylertech/tyler-icons';
+import { LitElement, html, nothing, unsafeCSS } from 'lit';
+import { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { setDefaultAria } from '../../core/utils/a11y-utils';
+import { toggleState } from '../../core/utils/utils';
+import { IconRegistry } from '../../icon';
+import { TREE_CONTEXT } from '../tree';
+import { getLevel, indeterminate } from '../tree-utils';
+import '../../icon';
+import '../../open-icon';
+const styles = ':host{display:block;outline:0}.forge-tree-item{--_tree-item-selected-background:var(--forge-tree-item-selected-background, var(--forge-theme-primary-container-low, #e8eaf6));--_tree-item-min-block-size:var(--forge-tree-item-min-block-size, var(--forge-spacing-xlarge, 32px));--_tree-item-shape:var(--forge-tree-item-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tree-item-expand-icon-inline-size:var(--forge-tree-item-expand-icon-inline-size, var(--forge-spacing-large, 24px));--_tree-item-padding-inline:var(--forge-tree-item-padding-inline, var(--forge-spacing-xxsmall, 4px));--_tree-item-padding-inline-start:var(--forge-tree-item-padding-inline-start, var(--_tree-item-padding-inline));--_tree-item-padding-inline-end:var(--forge-tree-item-padding-inline-end, var(--_tree-item-padding-inline));--_tree-item-gap:var(--forge-tree-item-gap, var(--forge-spacing-xxxsmall, 2px));--_tree-item-header-inline-gap:var(--forge-tree-item-header-inline-gap, var(--forge-spacing-xsmall, 8px));--_tree-item-indent-size:var(--forge-tree-item-indent-size, var(--forge-spacing-medium, 16px));--_tree-item-indent-line-style:var(--forge-tree-item-indent-line-style, solid);--_tree-item-indent-line-width:var(--forge-tree-item-indent-line-width, var(--forge-border-thin, 1px));--_tree-item-indent-line-color:var(--forge-tree-item-indent-line-color, var(--forge-theme-outline, #e0e0e0));--_tree-item-indent-line-offset:var(--forge-tree-item-indent-line-offset, 11.5px);--_tree-item-disabled-opacity:var(--forge-tree-item-disabled-opacity, 0.38)}.forge-tree-item{--_tree-item-checkbox-color:var(--forge-tree-item-checkbox-color, var(--forge-theme-text-low))}.forge-tree-item .header{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);display:flex;align-items:center;gap:var(--_tree-item-header-inline-gap);position:relative;border-radius:var(--_tree-item-shape);min-block-size:var(--_tree-item-min-block-size);padding-inline-start:calc(var(--_tree-item-indent-size) * var(--_tree-item-level) + var(--_tree-item-padding-inline-start));padding-inline-end:var(--_tree-item-padding-inline-end)}.forge-tree-item .leaf-spacer{inline-size:var(--_tree-item-expand-icon-inline-size)}.forge-tree-item .content{overflow:hidden;margin-inline-end:auto;white-space:nowrap;text-overflow:ellipsis}.forge-tree-item .expand-icon{display:flex;align-items:center;justify-content:center;position:relative;border-radius:var(--_tree-item-shape);inline-size:var(--_tree-item-expand-icon-inline-size);min-block-size:var(--_tree-item-min-block-size)}.forge-tree-item .expand-icon.has-custom-collapse-icon slot[name=expand-icon]{display:none}.forge-tree-item .expand-icon.has-custom-collapse-icon slot[name=collapse-icon]{display:contents}.forge-tree-item .checkbox{--forge-icon-color:var(--_tree-item-checkbox-color);display:var(--_tree-item-check-display)}.forge-tree-item .children{display:flex;flex-direction:column;gap:var(--_tree-item-gap);position:relative;margin-block-start:var(--_tree-item-gap)}.forge-tree-item .children::after{display:var(--_tree-item-indent-line-display);position:absolute;left:calc(var(--_tree-item-indent-size) * var(--_tree-item-level) + var(--_tree-item-indent-line-offset) + var(--_tree-item-padding-inline-start));block-size:100%;inline-size:var(--_tree-item-indent-line-width);border-inline-start-style:var(--_tree-item-indent-line-style);border-inline-start-width:var(--_tree-item-indent-line-width);border-inline-start-color:var(--_tree-item-indent-line-color);pointer-events:none;content:\"\"}.forge-tree-item .children-footer,.forge-tree-item .children-header{position:relative;padding-inline-start:calc(var(--_tree-item-indent-size) * (var(--_tree-item-level) + 1) + var(--_tree-item-padding-inline-start) + var(--_tree-item-expand-icon-inline-size) + var(--_tree-item-header-inline-gap) * 2);padding-inline-end:calc(var(--_tree-item-padding-inline-end) + var(--_tree-item-header-inline-gap))}.forge-tree-item.interactive .header{cursor:pointer}.forge-tree-item.indeterminate{--_tree-item-checkbox-color:var(--forge-tree-item-checkbox-color, var(--forge-theme-tertiary))}.forge-tree-item.disabled .checkbox,.forge-tree-item.disabled .content,.forge-tree-item.disabled .end,.forge-tree-item.disabled .start{opacity:var(--_tree-item-disabled-opacity)}.forge-tree-item.disabled:not(.open-disabled) .expand-icon{cursor:pointer}.forge-tree-item.open-disabled .expand-icon{opacity:var(--_tree-item-disabled-opacity)}:host(:state(leaf)) .children{display:none}:host(:not(:state(open))) .expand-icon slot[name=expand-icon]{display:contents}:host(:not(:state(open))) .expand-icon slot[name=collapse-icon]{display:none}:host(:not(:state(open))) .children{display:none}:host(:state(selected)) .header{--_tree-item-checkbox-color:var(--forge-tree-item-checkbox-color, var(--forge-theme-tertiary));background:var(--_tree-item-selected-background)}:host(:state(selected)) forge-state-layer{--forge-state-layer-color:var(--forge-theme-primary)}:host(:state(indeterminate)) .header{--_tree-item-checkbox-color:var(--forge-tree-item-checkbox-color, var(--forge-theme-tertiary))}:host(:state(indeterminate)) forge-state-layer{--forge-state-layer-color:var(--forge-theme-primary)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_tree-item-shape);z-index:1}.expand-icon forge-circular-progress{--forge-circular-progress-indicator-color:currentColor;--forge-circular-progress-size:16px;--forge-circular-progress-track-width:16}';
+/**
+ * @tag forge-tree-item
+ *
+ * @dependency forge-circular-progress
+ * @dependency forge-icon
+ * @dependency forge-open-icon
+ *
+ * @event {CustomEvent<unknown>} forge-tree-item-select - Dispatched when the user selects a tree item.
+ * @event {CustomEvent<void>} forge-tree-item-open - Dispatched when the user opens a tree item.
+ * @event {CustomEvent<void>} forge-tree-item-close - Dispatched when the user closes a tree item.
+ */
+let TreeItemComponent = class TreeItemComponent extends LitElement {
+    /**
+     * The depth of the tree item within the tree's hierarchy.
+     */
+    get level() {
+        return this._level;
+    }
+    /**
+     * Whether the tree item has no child items.
+     */
+    get leaf() {
+        return !this._children.length && !this.lazy;
+    }
+    /**
+     * Whether the selected value is indeterminate.
+     */
+    get indeterminate() {
+        return this[indeterminate];
+    }
+    constructor() {
+        super();
+        /**
+         * Whether the tree item is selected.
+         * @default false
+         * @attribute
+         */
+        this.selected = false;
+        /**
+         * Whether the tree item is expanded.
+         * @default false
+         * @attribute
+         */
+        this.open = false;
+        /**
+         * Whether the tree item supports lazy loading.
+         * @default false
+         * @attribute
+         */
+        this.lazy = false;
+        /**
+         * Whether the tree item is disabled.
+         * @default false
+         * @attribute
+         */
+        this.disabled = false;
+        /**
+         * Whether opening the tree item is disabled.
+         * @default false
+         * @attribute
+         */
+        this.openDisabled = false;
+        /**
+         * Whether the selected value is indeterminate. This is a symbol property to avoid being set from
+         * outside the library.
+         * @ignore
+         * @default false
+         */
+        this[_a] = false;
+        this._level = 0;
+        this._leaf = true;
+        this._loading = false;
+        this._hasSlottedExpandIcon = false;
+        this._hasSlottedCollapseIcon = false;
+        this._checkboxIcon = 'check_box_outline_blank';
+        // This is used to avoid dispatching a deselected update event when the tree item is first rendered.
+        this._hasBeenSelected = false;
+        this._internals = this.attachInternals();
+        IconRegistry.define([tylIconCheckBox, tylIconCheckBoxOutlineBlank, tylIconIndeterminateCheckBox]);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        setDefaultAria(this, this._internals, { role: 'treeitem' });
+        this.tabIndex = -1;
+        this._level = getLevel(this);
+        this._slotInParent();
+        this._detectChildren();
+        this._dispatchUpdate('added');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._dispatchUpdate('removed');
+    }
+    willUpdate(changedProperties) {
+        changedProperties.forEach((_, prop) => {
+            switch (prop) {
+                case 'selected':
+                    this._setSelected();
+                    this._checkboxIcon = this.indeterminate ? 'indeterminate_check_box' : this.selected ? 'check_box' : 'check_box_outline_blank';
+                    break;
+                case indeterminate:
+                    toggleState(this._internals, 'indeterminate', this.indeterminate);
+                    this._checkboxIcon = this.indeterminate ? 'indeterminate_check_box' : this.selected ? 'check_box' : 'check_box_outline_blank';
+                    break;
+                case 'open':
+                    this._setOpen();
+                    break;
+                case 'lazy':
+                    this._loading = this.lazy;
+                    this._detectChildren();
+                    this._setOpen();
+                    break;
+                case 'loading':
+                    this._setLoading();
+                    break;
+                case 'disabled':
+                    this._setDisabled();
+                    break;
+                case 'openDisabled':
+                    this._setOpenDisabled();
+                    break;
+            }
+        });
+        // Keep track of changed properties within the tree's context object.
+        const contextKey = '_treeContext';
+        const modeChanged = changedProperties.has(contextKey) && changedProperties.get(contextKey)?.mode !== this._treeContext?.mode;
+        const rootDisabledChanged = changedProperties.has(contextKey) && changedProperties.get(contextKey)?.disabled !== this._treeContext?.disabled;
+        const rootExpandIconChanged = changedProperties.has(contextKey) && changedProperties.get(contextKey)?.expandIcon !== this._treeContext?.expandIcon;
+        const rootCollapseIconChanged = changedProperties.has(contextKey) && changedProperties.get(contextKey)?.collapseIcon !== this._treeContext?.collapseIcon;
+        if (modeChanged) {
+            this._setDisabled();
+            this._setMode();
+            this._setOpen();
+        }
+        if (rootExpandIconChanged) {
+            this._setIconFromContext('expand');
+        }
+        if (rootCollapseIconChanged) {
+            this._setIconFromContext('collapse');
+        }
+        if (rootDisabledChanged) {
+            this._setDisabled();
+        }
+    }
+    render() {
+        // An item can individually disabled or inherit the disabled state from the tree.
+        const disabled = this.disabled || !!this._treeContext?.disabled;
+        // An item is interactive if a click anywhere in the header can select or open it. Interactive
+        // items show a pointer cursor.
+        const interactive = !this._treeContext
+            ? false
+            : this._treeContext.mode === 'off'
+                ? !this._leaf && !this.openDisabled
+                : this._treeContext.mode === 'leaf'
+                    ? (this._leaf && !disabled) || (!this._leaf && !this.openDisabled)
+                    : !disabled;
+        // The header state layer is removed when the item is not interactive.
+        const hideHeaderStateLayer = !interactive;
+        return html `
+      <div
+        part="root"
+        class=${classMap({ 'forge-tree-item': true, interactive, disabled, 'open-disabled': this.openDisabled })}
+        style=${styleMap({ '--_tree-item-level': this.level })}>
+        <div part="header" class="header">
+          ${!this._leaf ? this._expandIconTemplate() : html `<span class="leaf-spacer"></span>`}
+          ${this._treeContext?.mode === 'multiple'
+            ? html `<forge-icon id="checkbox" class="checkbox" part="checkbox" .name="${this._checkboxIcon}"></forge-icon>`
+            : nothing}
+          <div class="start">
+            <slot name="start"></slot>
+          </div>
+          <div class="content" part="content">
+            <slot></slot>
+          </div>
+          <div class="end">
+            <slot name="end"></slot>
+          </div>
+          ${hideHeaderStateLayer ? nothing : html `<forge-state-layer></forge-state-layer>`}
+          <forge-focus-indicator target=":host" focus-mode="focus" inward></forge-focus-indicator>
+        </div>
+        <div role="group" class="children" part="children">
+          <div class="children-header" part="children-header">
+            <slot name="children-header"></slot>
+          </div>
+          <slot name="children" @slotchange="${this._detectChildren}"></slot>
+          <div class="children-footer" part="children-footer">
+            <slot name="children-footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    _expandIconTemplate() {
+        // When an item is not interactive the expand icon may still be enabled and should show its
+        // own state layer.
+        const showStateLayer = this._treeContext &&
+            this._treeContext.mode !== 'leaf' &&
+            this._treeContext.mode !== 'off' &&
+            (this.disabled || this._treeContext.disabled) &&
+            !this.openDisabled;
+        if (this._loading) {
+            return html `
+        <span part="expand-icon" class="expand-icon" aria-hidden="true">
+          <forge-circular-progress class="loading" part="loading-indicator"></forge-circular-progress>
+        </span>
+      `;
+        }
+        // The default expand icon is shown when no custom expand or collapse icons are provided.
+        const showDefaultIcon = !this._hasSlottedExpandIcon && !this._hasSlottedCollapseIcon;
+        return html `
+      <span
+        part="expand-icon"
+        class=${classMap({
+            'expand-icon': true,
+            'has-custom-expand-icon': this._hasSlottedExpandIcon,
+            'has-custom-collapse-icon': this._hasSlottedCollapseIcon
+        })}
+        aria-hidden="true"
+        @slotchange="${this._detectSlottedExpandOrCollapseIcon}">
+        ${showDefaultIcon
+            ? html `<forge-open-icon class="default-expand-icon" orientation="horizontal" rotation="half" .open="${this.open}"></forge-open-icon>`
+            : nothing}
+        <slot name="expand-icon">
+          <slot name="context-expand-icon"></slot>
+        </slot>
+        <slot name="collapse-icon">
+          <slot name="context-collapse-icon"></slot>
+        </slot>
+        ${showStateLayer ? html `<forge-state-layer></forge-state-layer>` : nothing}
+      </span>
+    `;
+    }
+    _slotInParent() {
+        const parent = this.parentElement;
+        if (parent?.tagName.toLowerCase() === 'forge-tree-item') {
+            this.slot = 'children';
+        }
+    }
+    _detectChildren() {
+        this._leaf = this.leaf;
+        this._setOpen();
+        toggleState(this._internals, 'leaf', this._leaf);
+    }
+    _detectSlottedExpandOrCollapseIcon(evt) {
+        const slot = evt.target;
+        const assignedElements = slot.assignedElements();
+        if (slot.name === 'expand-icon' || slot.name === 'context-expand-icon') {
+            this._hasSlottedExpandIcon = !!assignedElements.length;
+        }
+        else if (slot.name === 'collapse-icon' || slot.name === 'context-collapse-icon') {
+            this._hasSlottedCollapseIcon = !!assignedElements.length;
+        }
+    }
+    _setIconFromContext(icon) {
+        if (!this._treeContext) {
+            return;
+        }
+        // Remove any old icons in this slot
+        const oldIcons = Array.from(this.children).filter(el => el.slot === `context-${icon}-icon`);
+        oldIcons.forEach(i => i.remove());
+        // Add the new icon if it exists
+        const newIcon = this._treeContext[`${icon}Icon`];
+        if (newIcon) {
+            this.append(newIcon.cloneNode(true));
+        }
+    }
+    _setDisabled() {
+        const disabled = this.disabled || !!this._treeContext?.disabled;
+        setDefaultAria(this, this._internals, { ariaDisabled: disabled ? 'true' : 'false' });
+        toggleState(this._internals, 'disabled', disabled);
+    }
+    _setLoading() {
+        setDefaultAria(this, this._internals, { ariaBusy: this._loading ? 'true' : 'false' });
+    }
+    _setMode() {
+        setDefaultAria(this, this._internals, {
+            ariaSelected: !this._treeContext || this._treeContext.mode === 'off' ? null : this.selected ? 'true' : 'false'
+        });
+    }
+    _setOpen() {
+        setDefaultAria(this, this._internals, {
+            ariaExpanded: this.leaf || this.openDisabled ? null : this.open ? 'true' : 'false'
+        });
+        toggleState(this._internals, 'open', !this.leaf && this.open);
+        if (this.open) {
+            this._dispatchUpdate('opened');
+        }
+    }
+    _setOpenDisabled() {
+        setDefaultAria(this, this._internals, { ariaExpanded: this.leaf || this.openDisabled ? null : this.open ? 'true' : 'false' });
+    }
+    _setSelected() {
+        if (!this._hasBeenSelected && this.selected) {
+            this._hasBeenSelected = true;
+        }
+        setDefaultAria(this, this._internals, { ariaSelected: !this._treeContext || this._treeContext.mode === 'off' ? null : this.selected ? 'true' : 'false' });
+        toggleState(this._internals, 'selected', this.selected);
+        if (this._hasBeenSelected) {
+            this._dispatchUpdate(this.selected ? 'selected' : 'deselected');
+        }
+    }
+    _dispatchUpdate(reason) {
+        this.dispatchEvent(new CustomEvent('forge-tree-item-update', { bubbles: true, detail: { reason } }));
+    }
+};
+_a = indeterminate;
+TreeItemComponent.styles = unsafeCSS(styles);
+__decorate([
+    property()
+], TreeItemComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemComponent.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemComponent.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemComponent.prototype, "lazy", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'open-disabled' })
+], TreeItemComponent.prototype, "openDisabled", void 0);
+__decorate([
+    property({ attribute: false })
+], TreeItemComponent.prototype, _a, void 0);
+__decorate([
+    state(),
+    consume({ context: TREE_CONTEXT, subscribe: true })
+], TreeItemComponent.prototype, "_treeContext", void 0);
+__decorate([
+    state()
+], TreeItemComponent.prototype, "_level", void 0);
+__decorate([
+    state()
+], TreeItemComponent.prototype, "_leaf", void 0);
+__decorate([
+    state()
+], TreeItemComponent.prototype, "_loading", void 0);
+__decorate([
+    state()
+], TreeItemComponent.prototype, "_hasSlottedExpandIcon", void 0);
+__decorate([
+    state()
+], TreeItemComponent.prototype, "_hasSlottedCollapseIcon", void 0);
+__decorate([
+    state()
+], TreeItemComponent.prototype, "_checkboxIcon", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'children', flatten: true })
+], TreeItemComponent.prototype, "_children", void 0);
+TreeItemComponent = __decorate([
+    customElement('forge-tree-item')
+], TreeItemComponent);
+export { TreeItemComponent };

package/esm/tree/tree-utils.d.ts

@@ -0,0 +1,154 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { TreeItemComponent } from './tree-item/tree-item';
+import { TreeComponent } from './tree/tree';
+export interface ITreeItemSnapshot {
+    el: TreeItemComponent;
+    indeterminate: boolean;
+    open: boolean;
+    selected: boolean;
+}
+/**
+ * A symbol property to represent the indeterminate state of a tree item.
+ */
+export declare const indeterminate: unique symbol;
+/**
+ * Checks if the given element is a tree component.
+ *
+ * @param el - The element to check.
+ * @returns True if the element is a tree component, false otherwise.
+ */
+export declare function isTree(el: Element): el is TreeComponent;
+/**
+ * Checks if an element is a tree item component.
+ *
+ * @param el - The element to check.
+ * @returns True if the element is a tree item component, false otherwise.
+ */
+export declare function isTreeItem(el: Element): el is TreeItemComponent;
+/**
+ * Returns whether an event originates from within a tree item.
+ *
+ * @param evt An event dispatched from a tree item.
+ * @returns Whether the event includes a tree item.
+ */
+export declare function getTreeItemFromEvent(evt: Event): TreeItemComponent | null;
+/**
+ * Gets all tree item components in an event path.
+ *
+ * @param evt An event dispatched from a tree item.
+ * @returns The dispatching tree item and all tree item ancestors.
+ */
+export declare function getTreeItemsInEventPath(evt: Event): TreeItemComponent[];
+/**
+ * Returns whether an event includes a tree item header.
+ *
+ * @param evt An event dispatched from a tree item.
+ * @returns Whether the event includes a header element within a tree item.
+ */
+export declare function eventPathIncludesTreeItemHeader(evt: Event): boolean;
+/**
+ * Returns whether an event includes a tree item expand icon.
+ *
+ * @param evt An event dispatched from a tree item.
+ * @returns Whether the event includes an expand icon element within a tree item.
+ */
+export declare function eventPathIncludesTreeItemExpandIcon(evt: Event): boolean;
+/**
+ * Gets the target tree item component from an event.
+ *
+ * @param evt An event dispatched from the target item.
+ * @returns The tree item component or null if not found.
+ */
+export declare function getTreeItemTarget(evt: Event): TreeItemComponent | null;
+/**
+ * Returns the level of the given tree item component.
+ * The level represents the depth of the item in the tree hierarchy.
+ *
+ * @param el - The tree item component.
+ * @returns The level of the tree item component.
+ */
+export declare function getLevel(el: TreeItemComponent): number;
+/**
+ * Returns the parent tree component of the given tree item component.
+ *
+ * @param el - The tree item component.
+ * @returns The parent tree component or null if not found.
+ */
+export declare function getParentTree(el: TreeItemComponent): TreeComponent | null;
+/**
+ * Retrieves the parent item of a given tree item component.
+ *
+ * @param el - The tree item component for which to find the parent item.
+ * @returns The parent item of the given tree item component, or `null` if the parent item is not found.
+ */
+export declare function getParentItem(el: TreeItemComponent): TreeItemComponent | null;
+/**
+ * Retrieves the child items of a tree component or tree item component.
+ *
+ * @param el The tree component or tree item component.
+ * @param flatten - If `true`, the function will return all child items recursively.
+ * @returns An array of child tree item components.
+ */
+export declare function getChildItems(el: TreeComponent | TreeItemComponent, flatten?: boolean): TreeItemComponent[];
+/**
+ * Returns the first child item of a tree component or tree item component.
+ *
+ * @param el - The tree component or tree item component.
+ * @returns The first child item if found, or `null` if no child item exists.
+ */
+export declare function getFirstChildItem(el: TreeComponent | TreeItemComponent): TreeItemComponent | null;
+/**
+ * Returns the last child item of a tree component or tree item component.
+ *
+ * @param el - The tree component or tree item component.
+ * @returns The last child item, or `null` if there are no child items.
+ */
+export declare function getLastChildItem(el: TreeComponent | TreeItemComponent): TreeItemComponent | null;
+/**
+ * Retrieves the sibling items of a given tree item.
+ *
+ * @param el - The tree item for which to retrieve the sibling items.
+ * @param includeSelf - Optional parameter to include the given tree item itself in the result.
+ * @returns An array of sibling tree items.
+ */
+export declare function getSiblingItems(el: TreeItemComponent, includeSelf?: boolean): TreeItemComponent[];
+/**
+ * Retrieves the next tree item component in the tree hierarchy.
+ *
+ * @param el - The current tree item component.
+ * @returns The next tree item component, or `null` if there is no next item.
+ */
+export declare function getNextItem(el: TreeItemComponent, includeChildren?: boolean): TreeItemComponent | null;
+/**
+ * Retrieves the previous sibling tree item component of the given element.
+ * If there are no previous sibling items, it returns the parent item.
+ *
+ * @param el - The current tree item component.
+ * @returns The previous sibling tree item component or the parent item if there are no previous siblings.
+ */
+export declare function getPreviousItem(el: TreeItemComponent): TreeItemComponent | null;
+/**
+ * Searches for an item in a tree based on a query string, starting from the position of a given item and wrapping around the
+ * beginning of the tree if necessary.
+ *
+ * @param from The starting item to search from.
+ * @param query The query string to search for.
+ * @returns The matching item if found, otherwise null.
+ */
+export declare function searchItems(from: TreeItemComponent, query: string): TreeItemComponent | null;
+/**
+ * Checks if an item in a tree is indeterminate.
+ *
+ * @param el - The tree item component to check.
+ * @returns True if any child items are indeterminate or if the selected states of the child items are not all the same, false otherwise.
+ */
+export declare function isIndeterminate(el: TreeItemComponent): boolean;
+/**
+ * Closes all descendant items of a tree or tree item component.
+ * @param el The tree or tree item component to close the descendants of.
+ */
+export declare function closeDescendants(el: TreeComponent | TreeItemComponent): void;