igniteui-webcomponents/components/tree/tree-item.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { LitElement } from 'lit';
import type IgcTreeComponent from './tree.js';
/**
 * The tree-item component represents a child item of the tree component or another tree item.
 *
 * @element igc-tree-item
 *
 * @slot - Renders nested tree-item component.
 * @slot label - Renders the tree item container.
 * @slot indicator - Renders the expand indicator container.
 * @slot loading - Renders the tree item loading indicator container.
 * @slot indentation - Renders the container (by default the space) before the tree item.
 *
 * @csspart wrapper - The wrapper for the tree item.
 * @csspart selected - Indicates selected state. Applies to `wrapper`.
 * @csspart focused - Indicates focused state. Applies to `wrapper`.
 * @csspart active - Indicates an active state. Applies to `wrapper`.
 * @csspart indicator - The expand indicator of the tree item.
 * @csspart label - The tree item content.
 * @csspart text - The tree item displayed text.
 * @csspart select - The checkbox of the tree item when selection is enabled.
 */
export default class IgcTreeItemComponent extends LitElement {
    static readonly tagName = "igc-tree-item";
    static styles: import("lit").CSSResult[];
    static register(): void;
    private tabbableEl?;
    private focusedProgrammatically;
    private groupRef;
    private animationPlayer;
    /** A reference to the tree the item is a part of. */
    tree?: IgcTreeComponent;
    /** The parent item of the current tree item (if any) */
    parent: IgcTreeItemComponent | null;
    /** @private @hidden @internal */
    init: boolean;
    private contentList;
    /** @private @hidden @internal */
    wrapper: HTMLElement;
    private isFocused;
    /** @private @hidden @internal */
    hasChildren: boolean;
    /** The depth of the item, relative to the root. */
    level: number;
    /** @private @hidden @internal */
    indeterminate: boolean;
    /**
     * The tree item label.
     * @attr
     */
    label: string;
    /**
     * The tree item expansion state.
     * @attr
     */
    expanded: boolean;
    /**
     * Marks the item as the tree's active item.
     * @attr
     */
    active: boolean;
    /**
     * Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.
     * @attr
     */
    disabled: boolean;
    /**
     * The tree item selection state.
     * @attr
     */
    selected: boolean;
    /**
     * To be used for load-on-demand scenarios in order to specify whether the item is loading data.
     * @attr
     */
    loading: boolean;
    /**
     * The value entry that the tree item is visualizing. Required for searching through items.
     * @type any
     * @attr
     */
    value: any;
    private toggleAnimation;
    protected bothChange(): void;
    protected expandedChange(oldValue: boolean): void;
    protected activeChange(): void;
    protected disabledChange(): void;
    protected selectedChange(): void;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    private get selectionService();
    private get navService();
    private get parts();
    private get directChildren();
    private get allChildren();
    /** The full path to the tree item, starting from the top-most ancestor. */
    get path(): IgcTreeItemComponent[];
    private itemClick;
    private expandIndicatorClick;
    private selectorClick;
    private onFocus;
    private onBlur;
    private onFocusIn;
    private onFocusOut;
    private labelChange;
    private handleChange;
    /**
     * Returns a collection of child items.
     * If the parameter value is true returns all tree item's direct children,
     * otherwise - only the direct children.
     */
    getChildren(options?: {
        flatten: boolean;
    }): IgcTreeItemComponent[];
    /**
     * @private
     * Expands the tree item.
     */
    expandWithEvent(): Promise<void>;
    /**
     * @private
     * Collapses the tree item.
     */
    collapseWithEvent(): Promise<void>;
    /** Toggles tree item expansion state. */
    toggle(): void;
    /** Expands the tree item. */
    expand(): void;
    /** Collapses the tree item. */
    collapse(): void;
    protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-tree-item': IgcTreeItemComponent;
    }
}