@xlabs-store/core 0.0.1

package/dist/collection/components/x-tree/x-tree.js

@@ -0,0 +1,1793 @@
+import { Host, h } from "@stencil/core";
+import { getIcon } from "../../utils/config";
+import { TreeService } from "../../utils/tree.service";
+export class XTree {
+    /**
+     * Host element reference.
+     */
+    el;
+    /**
+     * Tree data
+     * @example
+     * <x-tree treeData={[{ key: '1', title: 'Node' }]}></x-tree>
+     */
+    treeData = [];
+    /**
+     * Show checkbox
+     * @example
+     * <x-tree checkable></x-tree>
+     */
+    checkable = false;
+    /**
+     * Allow node selection
+     * @example
+     * <x-tree selectable={false}></x-tree>
+     */
+    selectable = true;
+    /**
+     * Allow multiple selection
+     * @example
+     * <x-tree multiple></x-tree>
+     */
+    multiple = false;
+    /**
+     * Expanded keys (controlled)
+     * @example
+     * <x-tree expandedKeys={['1']}></x-tree>
+     */
+    expandedKeys = [];
+    /**
+     * Selected keys (controlled)
+     * @example
+     * <x-tree selectedKeys={['1']}></x-tree>
+     */
+    selectedKeys = [];
+    /**
+     * Checked keys (controlled)
+     * @example
+     * <x-tree checkedKeys={['1']}></x-tree>
+     */
+    checkedKeys = [];
+    /**
+     * Default expanded keys (uncontrolled)
+     * @example
+     * <x-tree defaultExpandedKeys={['1']}></x-tree>
+     */
+    defaultExpandedKeys = [];
+    /**
+     * Default selected keys (uncontrolled)
+     * @example
+     * <x-tree defaultSelectedKeys={['1']}></x-tree>
+     */
+    defaultSelectedKeys = [];
+    /**
+     * Default checked keys (uncontrolled)
+     * @example
+     * <x-tree defaultCheckedKeys={['1']}></x-tree>
+     */
+    defaultCheckedKeys = [];
+    /**
+     * Expand all nodes by default
+     * @example
+     * <x-tree defaultExpandAll></x-tree>
+     */
+    defaultExpandAll = false;
+    /**
+     * Expand parent nodes when checking
+     * @example
+     * <x-tree autoExpandParent={false}></x-tree>
+     */
+    autoExpandParent = true;
+    /**
+     * Show connecting lines
+     * @example
+     * <x-tree showLine></x-tree>
+     */
+    showLine = false;
+    /**
+     * Show icon before node title
+     * @example
+     * <x-tree showIcon></x-tree>
+     */
+    showIcon = false;
+    /**
+     * Whether to block the entire row
+     * @example
+     * <x-tree blockNode></x-tree>
+     */
+    blockNode = false;
+    /**
+     * Disabled the entire tree
+     * @example
+     * <x-tree disabled></x-tree>
+     */
+    disabled = false;
+    /**
+     * Whether to enable drag
+     * @example
+     * <x-tree allowDrag></x-tree>
+     */
+    allowDrag = false;
+    /**
+     * Virtual scroll (for large data)
+     * @example
+     * <x-tree virtual></x-tree>
+     */
+    virtual = false;
+    /**
+     * Height for virtual scroll
+     * @example
+     * <x-tree height={300}></x-tree>
+     */
+    height;
+    /**
+     * Item height for virtual scroll
+     * @example
+     * <x-tree itemHeight={32}></x-tree>
+     */
+    itemHeight = 32;
+    /**
+     * Check strictly (parent-child independent)
+     * @example
+     * <x-tree checkStrictly></x-tree>
+     */
+    checkStrictly = false;
+    /**
+     * Internal expanded keys.
+     */
+    internalExpandedKeys = [];
+    /**
+     * Internal selected keys.
+     */
+    internalSelectedKeys = [];
+    /**
+     * Internal checked keys.
+     */
+    internalCheckedKeys = [];
+    /**
+     * Half-checked keys for non-strict mode.
+     */
+    halfCheckedKeys = [];
+    /**
+     * Loading keys for async nodes.
+     */
+    loadingKeys = [];
+    /**
+     * Drag over node key.
+     */
+    dragOverNodeKey = null;
+    /**
+     * Scroll top for virtual scroll.
+     */
+    scrollTop = 0;
+    /**
+     * Filter value for tree nodes.
+     * @example
+     * <x-tree filterValue="search text"></x-tree>
+     */
+    filterValue = '';
+    /**
+     * Custom actions for all nodes (right side)
+     * If a node has its own actions, they will take priority.
+     */
+    actions;
+    /**
+     * Whether to show actions only on hover (for all nodes)
+     */
+    showActions;
+    /**
+     * Filter function (optional).
+     * @example
+     * <x-tree filterTreeNode={(node, value) => node.title.includes(value)}></x-tree>
+     */
+    filterTreeNode;
+    /**
+     * Flattened nodes for virtual scroll cache.
+     */
+    flattenedNodes = [];
+    /**
+     * Internal focused key for keyboard navigation.
+     */
+    focusedKey = null;
+    /**
+     * Tree Service Instance
+     */
+    treeService = new TreeService({ id: 'key', children: 'children' });
+    /**
+     * Emitted when expand state changes.
+     * @example
+     * <x-tree onXExpand={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xExpand;
+    /**
+     * Emitted when selection changes.
+     * @example
+     * <x-tree onXSelect={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xSelect;
+    /**
+     * Emitted when check state changes.
+     * @example
+     * <x-tree onXCheck={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xCheck;
+    /**
+     * Emitted when drag starts.
+     * @example
+     * <x-tree onXDragStart={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragStart;
+    /**
+     * Emitted when drag enters.
+     * @example
+     * <x-tree onXDragEnter={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragEnter;
+    /**
+     * Emitted when dragging over.
+     * @example
+     * <x-tree onXDragOver={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragOver;
+    /**
+     * Emitted when drag leaves.
+     * @example
+     * <x-tree onXDragLeave={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragLeave;
+    /**
+     * Emitted when drag ends.
+     * @example
+     * <x-tree onXDragEnd={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragEnd;
+    /**
+     * Emitted when drop happens.
+     * @example
+     * <x-tree onXDrop={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDrop;
+    /**
+     * Emitted when data loading is required.
+     * @example
+     * <x-tree onXLoadData={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xLoadData;
+    /**
+     * Emitted when a custom action is clicked.
+     * @example
+     * <x-tree onXAction={(ev) => console.log('Action:', ev.detail.action, 'Node:', ev.detail.node)}></x-tree>
+     */
+    xAction;
+    /**
+     * Initialize internal state from defaults.
+     *
+     * Flow:
+     * 1. If defaultExpandAll is true, expand all nodes.
+     * 2. Otherwise, use defaultExpandedKeys.
+     * 3. Initialize selectedKeys and checkedKeys from defaults.
+     * 4. Update half-checked keys if not in strict mode.
+     */
+    componentWillLoad() {
+        // Initialize internal state from default props
+        if (this.defaultExpandAll) {
+            this.internalExpandedKeys = this.treeService.getAllKeys(this.treeData);
+        }
+        else if (this.defaultExpandedKeys.length > 0) {
+            this.internalExpandedKeys = [...this.defaultExpandedKeys];
+        }
+        if (this.defaultSelectedKeys.length > 0) {
+            this.internalSelectedKeys = [...this.defaultSelectedKeys];
+        }
+        if (this.selectedKeys?.length > 0) {
+            this.internalSelectedKeys = [...this.selectedKeys];
+        }
+        if (this.defaultCheckedKeys.length > 0) {
+            this.internalCheckedKeys = [...this.defaultCheckedKeys];
+        }
+        if (this.checkedKeys?.length > 0) {
+            this.internalCheckedKeys = [...this.checkedKeys];
+        }
+        if (this.internalCheckedKeys.length > 0 && !this.checkStrictly) {
+            this.halfCheckedKeys = this.treeService.calculateHalfCheckedKeys(this.internalCheckedKeys, this.treeData);
+        }
+        if (this.autoExpandParent) {
+            const keysToExpand = new Set(this.internalExpandedKeys);
+            const expandParents = (keys) => {
+                keys.forEach(key => {
+                    let parent = this.treeService.getParentId(key, this.treeData);
+                    while (parent) {
+                        keysToExpand.add(parent);
+                        parent = this.treeService.getParentId(parent, this.treeData);
+                    }
+                });
+            };
+            if (this.internalSelectedKeys.length > 0)
+                expandParents(this.internalSelectedKeys);
+            if (this.internalCheckedKeys.length > 0)
+                expandParents(this.internalCheckedKeys);
+            this.internalExpandedKeys = Array.from(keysToExpand);
+        }
+        if (this.expandedKeys?.length > 0) {
+            this.internalExpandedKeys = [...new Set([...this.internalExpandedKeys, ...this.expandedKeys])];
+        }
+        if (this.virtual) {
+            this.updateFlattenedNodes();
+        }
+    }
+    /**
+     * Handle scroll event for virtual scroll.
+     * @param event - Scroll event.
+     */
+    handleScroll = (event) => {
+        if (!this.virtual)
+            return;
+        const target = event.target;
+        this.scrollTop = target.scrollTop;
+    };
+    watchTreeData() {
+        if (this.defaultExpandAll) {
+            this.internalExpandedKeys = this.treeService.getAllKeys(this.treeData);
+        }
+        else if (this.autoExpandParent) {
+            // Need to expand parents of selected/checked items if applicable
+            const keysToExpand = new Set(this.internalExpandedKeys);
+            const expandParents = (keys) => {
+                keys.forEach(key => {
+                    let parent = this.treeService.getParentId(key, this.treeData);
+                    while (parent) {
+                        keysToExpand.add(parent);
+                        parent = this.treeService.getParentId(parent, this.treeData);
+                    }
+                });
+            };
+            if (this.internalSelectedKeys.length > 0)
+                expandParents(this.internalSelectedKeys);
+            if (this.internalCheckedKeys.length > 0)
+                expandParents(this.internalCheckedKeys);
+            this.internalExpandedKeys = Array.from(keysToExpand);
+        }
+        this.updateFlattenedNodes();
+    }
+    watchExpandedKeys(newVal) {
+        if (newVal && newVal.length > 0) {
+            this.internalExpandedKeys = [...newVal];
+            this.updateFlattenedNodes();
+        }
+    }
+    watchFilterValue() {
+        this.updateFlattenedNodes();
+        // Auto expand parent nodes of matched items
+        if (this.filterValue) {
+            const expandedKeys = new Set(this.internalExpandedKeys);
+            const loop = (nodes) => {
+                nodes.forEach(node => {
+                    if (this.checkFilter(node)) {
+                        // Expand parents
+                        let parent = this.treeService.getParentId(node.key, this.treeData);
+                        while (parent) {
+                            expandedKeys.add(parent);
+                            parent = this.treeService.getParentId(parent, this.treeData);
+                        }
+                    }
+                    if (node.children) {
+                        loop(node.children);
+                    }
+                });
+            };
+            loop(this.treeData);
+            this.internalExpandedKeys = Array.from(expandedKeys);
+            // Re-flatten after expansion
+            this.updateFlattenedNodes();
+        }
+    }
+    /**
+     * Check if node matches filter.
+     */
+    checkFilter(node) {
+        if (!this.filterValue)
+            return true;
+        if (this.filterTreeNode) {
+            return this.filterTreeNode(node, this.filterValue);
+        }
+        return node.title.toLowerCase().includes(this.filterValue.toLowerCase());
+    }
+    hasMatchingChild(node) {
+        if (!node.children)
+            return false;
+        return node.children.some(child => {
+            if (this.checkFilter(child))
+                return true;
+            return this.hasMatchingChild(child);
+        });
+    }
+    /**
+     * Sync internal selected keys when prop changes.
+     * @param newVal - New selected keys.
+     */
+    watchSelectedKeys(newVal) {
+        if (newVal) {
+            this.internalSelectedKeys = [...newVal];
+            if (this.autoExpandParent) {
+                const keysToExpand = new Set(this.internalExpandedKeys);
+                newVal.forEach(key => {
+                    let parent = this.treeService.getParentId(key, this.treeData);
+                    while (parent) {
+                        keysToExpand.add(parent);
+                        parent = this.treeService.getParentId(parent, this.treeData);
+                    }
+                });
+                this.internalExpandedKeys = Array.from(keysToExpand);
+                this.updateFlattenedNodes();
+            }
+        }
+    }
+    /**
+     * Sync internal checked keys when prop changes.
+     * @param newVal - New checked keys.
+     */
+    watchCheckedKeys(newVal) {
+        if (newVal) {
+            this.internalCheckedKeys = [...newVal];
+            if (!this.checkStrictly) {
+                this.halfCheckedKeys = this.treeService.calculateHalfCheckedKeys(this.internalCheckedKeys, this.treeData);
+            }
+        }
+    }
+    handleExpand(node, e) {
+        e.stopPropagation();
+        if (node.isLeaf || node.disabled || this.disabled)
+            return;
+        const expanded = !this.internalExpandedKeys.includes(node.key);
+        if (expanded) {
+            // Async load data if node has no children and is not a leaf
+            if ((!node.children || node.children.length === 0) && !node.isLeaf) {
+                this.loadingKeys = [...this.loadingKeys, node.key];
+                this.xLoadData.emit({
+                    expandedKeys: this.internalExpandedKeys,
+                    node,
+                    expanded: true
+                });
+            }
+        }
+        this.internalExpandedKeys = this.treeService.toggleExpand(node, this.internalExpandedKeys);
+        if (this.virtual) {
+            this.updateFlattenedNodes();
+        }
+        this.expandedKeys = this.internalExpandedKeys;
+        this.xExpand.emit({ expandedKeys: this.internalExpandedKeys, node, expanded });
+    }
+    /**
+     * Update the list of flattened nodes for virtual scroll.
+     */
+    updateFlattenedNodes() {
+        const flattened = [];
+        // Recursive function to flatten the tree
+        // It filters nodes if filterValue is set
+        const flatten = (nodes, level, parentChain) => {
+            let filteredNodes = nodes;
+            if (this.filterValue) {
+                filteredNodes = nodes.filter(node => {
+                    const matches = this.checkFilter(node);
+                    const hasMatchingChild = this.hasMatchingChild(node);
+                    return matches || hasMatchingChild;
+                });
+            }
+            filteredNodes.forEach((node, index) => {
+                const isLast = index === filteredNodes.length - 1;
+                const currentChain = [...parentChain, isLast];
+                flattened.push({ node, level, parentChain, isLast });
+                if (this.internalExpandedKeys.includes(node.key) && node.children && node.children.length > 0) {
+                    flatten(node.children, level + 1, currentChain);
+                }
+            });
+        };
+        flatten(this.treeData, 0, []);
+        this.flattenedNodes = flattened;
+    }
+    handleSelect(node, e) {
+        e.stopPropagation();
+        if (!this.selectable || node.disabled || this.disabled)
+            return;
+        if (node.selectable === false)
+            return;
+        const selected = !this.internalSelectedKeys.includes(node.key);
+        this.internalSelectedKeys = this.treeService.toggleSelect(node, this.internalSelectedKeys, this.multiple);
+        this.selectedKeys = this.internalSelectedKeys;
+        this.xSelect.emit({ selectedKeys: this.internalSelectedKeys, node, selected });
+    }
+    handleCheck(node, e) {
+        e.stopPropagation();
+        if (node.disabled || node.disableCheckbox || this.disabled)
+            return;
+        const checked = !this.internalCheckedKeys.includes(node.key);
+        const result = this.treeService.toggleCheck(node, checked, this.internalCheckedKeys, this.treeData, this.checkStrictly);
+        this.internalCheckedKeys = result.checkedKeys;
+        if (!this.checkStrictly) {
+            this.halfCheckedKeys = result.halfCheckedKeys;
+        }
+        this.checkedKeys = this.internalCheckedKeys;
+        this.xCheck.emit({
+            checkedKeys: this.internalCheckedKeys,
+            node,
+            checked,
+            halfCheckedKeys: this.halfCheckedKeys
+        });
+    }
+    /**
+     * Handle drag start.
+     * @param node - The node being dragged.
+     * @param e - Drag event.
+     */
+    handleDragStart(node, e) {
+        if (this.disabled || node.disabled) {
+            e.preventDefault();
+            return;
+        }
+        e.stopPropagation();
+        this.xDragStart.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drag enter.
+     * @param node - The node being entered.
+     * @param e - Drag event.
+     */
+    handleDragEnter(node, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragOverNodeKey = node.key;
+        this.xDragEnter.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drag over.
+     * @param node - The node being dragged over.
+     * @param e - Drag event.
+     */
+    handleDragOver(node, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.xDragOver.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drag leave.
+     * @param node - The node being left.
+     * @param e - Drag event.
+     */
+    handleDragLeave(node, e) {
+        e.stopPropagation();
+        this.xDragLeave.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drag end.
+     * @param node - The node being dragged.
+     * @param e - Drag event.
+     */
+    handleDragEnd(node, e) {
+        e.stopPropagation();
+        this.dragOverNodeKey = null;
+        this.xDragEnd.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drop.
+     * @param node - The node being dropped on.
+     * @param e - Drag event.
+     */
+    handleDrop(node, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragOverNodeKey = null;
+        this.xDrop.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle key down event.
+     * @param e - Keyboard event.
+     */
+    handleKeyDown(e) {
+        if (this.disabled)
+            return;
+        const visibleNodes = this.flattenedNodes.map(item => item.node);
+        const focusedIndex = visibleNodes.findIndex(n => n.key === this.focusedKey);
+        let nextIndex = focusedIndex;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (focusedIndex < visibleNodes.length - 1) {
+                    nextIndex = focusedIndex + 1;
+                }
+                else if (focusedIndex === -1 && visibleNodes.length > 0) {
+                    nextIndex = 0;
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (focusedIndex > 0) {
+                    nextIndex = focusedIndex - 1;
+                }
+                else if (focusedIndex === -1 && visibleNodes.length > 0) {
+                    nextIndex = visibleNodes.length - 1;
+                }
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (focusedIndex !== -1) {
+                    const node = visibleNodes[focusedIndex];
+                    if (!node.isLeaf && (!node.children || node.children.length > 0)) {
+                        if (!this.internalExpandedKeys.includes(node.key)) {
+                            this.handleExpand(node, e);
+                        }
+                        else {
+                            // Move to first child if already expanded
+                            nextIndex = focusedIndex + 1;
+                        }
+                    }
+                }
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (focusedIndex !== -1) {
+                    const node = visibleNodes[focusedIndex];
+                    if (this.internalExpandedKeys.includes(node.key)) {
+                        this.handleExpand(node, e);
+                    }
+                    else {
+                        const parentKey = this.treeService.getParentId(node.key, this.treeData);
+                        if (parentKey) {
+                            const parentIndex = visibleNodes.findIndex(n => n.key === parentKey);
+                            if (parentIndex !== -1) {
+                                nextIndex = parentIndex;
+                            }
+                        }
+                    }
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (focusedIndex !== -1) {
+                    const node = visibleNodes[focusedIndex];
+                    if (this.checkable) {
+                        this.handleCheck(node, e);
+                    }
+                    else {
+                        this.handleSelect(node, e);
+                    }
+                }
+                break;
+        }
+        if (nextIndex !== focusedIndex && nextIndex !== -1) {
+            this.focusedKey = visibleNodes[nextIndex].key;
+            // Scroll into view if virtual
+            if (this.virtual && this.height) {
+                const itemTop = nextIndex * this.itemHeight;
+                if (itemTop < this.scrollTop) {
+                    this.scrollTop = itemTop;
+                }
+                else if (itemTop + this.itemHeight > this.scrollTop + this.height) {
+                    this.scrollTop = itemTop + this.itemHeight - this.height;
+                }
+            }
+        }
+    }
+    /**
+     * Render the switcher icon (arrow or loading).
+     * @param node - The node to render switcher for.
+     * @param expanded - Whether the node is expanded.
+     * @param isLast - Whether the node is the last child.
+     * @returns JSX.Element
+     */
+    renderSwitcher(node, expanded, isLast) {
+        const hasChildren = node.children && node.children.length > 0;
+        const isLeaf = node.isLeaf || (!hasChildren && node.isLeaf !== false);
+        const isLoading = this.loadingKeys.includes(node.key);
+        if (isLoading) {
+            return (h("span", { class: "x-tree-switcher x-tree-switcher-loading" }, h("span", { class: "x-tree-switcher-loading-icon" }, h("x-icon", { spin: true, name: getIcon('loading') }))));
+        }
+        if (isLeaf) {
+            if (this.showLine) {
+                return (h("span", { class: {
+                        'x-tree-switcher': true,
+                        'x-tree-switcher-leaf-line': true,
+                        'x-tree-switcher-leaf-line-last': isLast
+                    } }, h("span", { class: "x-tree-switcher-leaf-line-icon" })));
+            }
+            return h("span", { class: "x-tree-switcher x-tree-switcher-leaf" });
+        }
+        return (h("span", { class: {
+                'x-tree-switcher': true,
+                'x-tree-switcher-open': expanded,
+                'x-tree-switcher-close': !expanded,
+                'x-tree-switcher-last': isLast,
+            }, onClick: (e) => this.handleExpand(node, e) }, h("span", { class: "x-tree-switcher-icon" }, h("x-icon", { name: getIcon('arrowDown') }))));
+    }
+    /**
+     * Render the checkbox for a node.
+     * @param node - The node to render checkbox for.
+     * @returns JSX.Element
+     */
+    renderCheckbox(node) {
+        if (!this.checkable)
+            return null;
+        if (node.checkable === false)
+            return null;
+        const checked = this.internalCheckedKeys.includes(node.key);
+        const halfChecked = this.halfCheckedKeys.includes(node.key);
+        const disabled = node.disabled || node.disableCheckbox || this.disabled;
+        return (h("span", { class: {
+                'x-tree-checkbox': true,
+                'x-tree-checkbox-checked': checked,
+                'x-tree-checkbox-indeterminate': halfChecked && !checked,
+                'x-tree-checkbox-disabled': disabled,
+            }, onClick: (e) => !disabled && this.handleCheck(node, e) }, h("span", { class: "x-tree-checkbox-inner" })));
+    }
+    /**
+     * Render the node icon.
+     * @param node - The node to render icon for.
+     * @returns JSX.Element
+     */
+    renderIcon(node) {
+        if (!this.showIcon && !node.icon)
+            return null;
+        return (h("span", { class: "x-tree-iconEle" }, node.icon ? h("x-icon", { name: node.icon }) : h("x-icon", { name: getIcon('file') })));
+    }
+    /**
+     * Render a single tree node row.
+     *
+     * Flow:
+     * 1. Determine state (expanded, selected, disabled).
+     * 2. Render indentation.
+     * 3. Render switcher.
+     * 4. Render checkbox.
+     * 5. Render content (icon + title).
+     * @param node - The node to render.
+     * @param level - Indentation level.
+     * @param parentChain - Chain of parent nodes' last child status.
+     * @param isLast - Whether the current node is the last child.
+     * @returns JSX.Element
+     */
+    renderTreeNode(node, level = 0, parentChain = [], isLast = false) {
+        const expanded = this.internalExpandedKeys.includes(node.key);
+        const selected = this.internalSelectedKeys.includes(node.key);
+        const hasChildren = node.children && node.children.length > 0;
+        const isDisabled = node.disabled || this.disabled;
+        return (h("div", { class: {
+                'x-tree-treenode': true,
+                'x-tree-treenode-disabled': isDisabled,
+                'x-tree-treenode-switcher-open': expanded,
+                'x-tree-treenode-switcher-close': !expanded && hasChildren,
+                'x-tree-treenode-selected': selected,
+                'x-tree-treenode-leaf': !hasChildren,
+                'x-tree-treenode-drag-over': this.dragOverNodeKey === node.key,
+                'x-tree-treenode-focused': this.focusedKey === node.key,
+            }, draggable: this.allowDrag && !isDisabled, role: "treeitem", "aria-selected": selected ? 'true' : 'false', "aria-expanded": hasChildren ? (expanded ? 'true' : 'false') : null, "aria-level": level + 1, "aria-disabled": isDisabled ? 'true' : 'false', tabindex: this.focusedKey === node.key ? 0 : -1, onClick: (e) => {
+                this.focusedKey = node.key;
+                // Native click will handle selection
+                console.log(e);
+            }, onKeyDown: (e) => this.handleKeyDown(e), onDragStart: (e) => this.handleDragStart(node, e), onDragEnter: (e) => this.handleDragEnter(node, e), onDragOver: (e) => this.handleDragOver(node, e), onDragLeave: (e) => this.handleDragLeave(node, e), onDragEnd: (e) => this.handleDragEnd(node, e), onDrop: (e) => this.handleDrop(node, e) }, Array.from({ length: level }).map((_, i) => (h("span", { key: `indent-${i}`, class: {
+                'x-tree-indent-unit': true,
+                'x-tree-indent-unit-start': i === 0,
+                'x-tree-indent-unit-end': parentChain[i],
+            } }))), this.renderSwitcher(node, expanded, isLast), this.renderCheckbox(node), h("span", { class: {
+                'x-tree-node-content-wrapper': true,
+                'x-tree-node-content-wrapper-open': expanded,
+                'x-tree-node-content-wrapper-close': !expanded && hasChildren,
+                'x-tree-node-selected': selected,
+            }, onClick: (e) => this.handleSelect(node, e) }, this.renderIcon(node), h("span", { class: "x-tree-title" }, node.title), this.renderActions(node))));
+    }
+    /**
+     * Render custom actions for a tree node.
+     * Actions typically appear on hover or always on the right side.
+     * If an action has children, it renders as a dropdown menu.
+     *
+     * @param node - The node to render actions for.
+     * @returns JSX.Element
+     */
+    renderActions(node) {
+        const actions = node.actions || this.actions;
+        const showActions = node.showActions || this.showActions;
+        if (!actions || actions.length === 0)
+            return null;
+        return (h("span", { class: {
+                'x-tree-actions': true,
+                'x-tree-actions-hover': showActions === 'hover',
+            }, onClick: (e) => e.stopPropagation() }, actions.map(action => {
+            const hasChildren = action.children && action.children.length > 0;
+            const actionContent = (h("span", { class: {
+                    'x-tree-action-item': true,
+                    'x-tree-action-item-disabled': action.disabled,
+                    'x-tree-action-item-danger': action.danger,
+                }, title: action.label, onClick: (e) => {
+                    if (!hasChildren) {
+                        if (!action.disabled) {
+                            this.xAction.emit({ action, node });
+                        }
+                        e.stopPropagation();
+                    }
+                } }, action.icon && h("x-icon", { name: action.icon }), !action.icon && action.label && h("span", null, action.label)));
+            if (hasChildren && !action.disabled) {
+                return (h("x-dropdown", { menu: { items: action.children }, trigger: "click", onXMenuClick: (e) => {
+                        this.xAction.emit({ action: e.detail.item, node });
+                    } }, actionContent));
+            }
+            return actionContent;
+        })));
+    }
+    /**
+     * Recursively render tree nodes.
+     *
+     * Flow:
+     * 1. Iterate through nodes.
+     * 2. Render current node.
+     * 3. If expanded and has children, recursively render children in a container.
+     * @param nodes - List of nodes to render.
+     * @param level - Current indentation level.
+     * @param parentChain - Chain of parent nodes' last child status.
+     * @returns Array of JSX elements.
+     */
+    renderTreeNodes(nodes, level = 0, parentChain = []) {
+        const result = [];
+        // Apply filter if present
+        let visibleNodes = nodes;
+        if (this.filterValue) {
+            visibleNodes = nodes.filter(node => {
+                const matches = this.checkFilter(node);
+                const hasMatchingChild = this.hasMatchingChild(node);
+                return matches || hasMatchingChild;
+            });
+        }
+        visibleNodes.forEach((node, index) => {
+            const isLast = index === visibleNodes.length - 1;
+            const currentChain = [...parentChain, isLast];
+            result.push(this.renderTreeNode(node, level, parentChain, isLast));
+            const expanded = this.internalExpandedKeys.includes(node.key);
+            if (node.children && node.children.length > 0 && expanded) {
+                result.push(h("div", { class: "x-tree-child-tree x-tree-child-tree-open" }, this.renderTreeNodes(node.children, level + 1, currentChain)));
+            }
+        });
+        return result;
+    }
+    /**
+     * Render the tree component.
+     * @returns JSX.Element
+     */
+    render() {
+        let content;
+        if (this.virtual && this.height) {
+            // Use cached flattened nodes
+            const flattened = this.flattenedNodes;
+            const totalHeight = flattened.length * this.itemHeight;
+            const startIndex = Math.max(0, Math.floor(this.scrollTop / this.itemHeight) - 5); // buffer 5
+            const endIndex = Math.min(flattened.length - 1, Math.ceil((this.scrollTop + this.height) / this.itemHeight) + 5 // buffer 5
+            );
+            const visibleItems = flattened.slice(startIndex, endIndex + 1);
+            const offsetY = startIndex * this.itemHeight;
+            content = (h("div", { key: 'df4416972cd0e0909034b5fda7eea292c2f0820c', class: "x-tree-virtual-holder", style: { height: `${this.height}px`, overflow: 'auto', position: 'relative' }, onScroll: this.handleScroll }, h("div", { key: '2d3e1aa6d2190030de99f367684b438745136765', style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { key: '5e06ecc42b061f269d8bc962279d96469bb4822a', style: {
+                    transform: `translateY(${offsetY}px)`,
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    right: '0'
+                } }, visibleItems.map(item => this.renderTreeNode(item.node, item.level, item.parentChain, item.isLast))))));
+        }
+        else {
+            content = (h("div", { key: '95e6a1e97b1d9f27a5d201e46ad933705e2fe29b', class: "x-tree-list-holder" }, h("div", { key: 'ba66d45c266bc8ab9e15322eeda386fdfa2fac5c', class: "x-tree-list-holder-inner" }, this.renderTreeNodes(this.treeData))));
+        }
+        return (h(Host, { key: '321dd6c5185aa80c17d6c1a46701aee79101d567', class: {
+                'x-tree': true,
+                'x-tree-show-line': this.showLine,
+                'x-tree-icon-hide': !this.showIcon,
+                'x-tree-block-node': this.blockNode,
+                'x-tree-directory': false,
+            } }, h("div", { key: 'd0dc97d35b527725dc7f991f1742019c76f7944f', class: "x-tree-list", role: "tree" }, content)));
+    }
+    static get is() { return "x-tree"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-tree.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-tree.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "treeData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeNode[]",
+                    "resolved": "TreeNode[]",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree treeData={[{ key: '1', title: 'Node' }]}></x-tree>"
+                        }],
+                    "text": "Tree data"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "checkable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree checkable></x-tree>"
+                        }],
+                    "text": "Show checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkable",
+                "defaultValue": "false"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree selectable={false}></x-tree>"
+                        }],
+                    "text": "Allow node selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "true"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree multiple></x-tree>"
+                        }],
+                    "text": "Allow multiple selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "expandedKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree expandedKeys={['1']}></x-tree>"
+                        }],
+                    "text": "Expanded keys (controlled)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree selectedKeys={['1']}></x-tree>"
+                        }],
+                    "text": "Selected keys (controlled)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "checkedKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree checkedKeys={['1']}></x-tree>"
+                        }],
+                    "text": "Checked keys (controlled)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "defaultExpandedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree defaultExpandedKeys={['1']}></x-tree>"
+                        }],
+                    "text": "Default expanded keys (uncontrolled)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "defaultSelectedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree defaultSelectedKeys={['1']}></x-tree>"
+                        }],
+                    "text": "Default selected keys (uncontrolled)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "defaultCheckedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree defaultCheckedKeys={['1']}></x-tree>"
+                        }],
+                    "text": "Default checked keys (uncontrolled)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "defaultExpandAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree defaultExpandAll></x-tree>"
+                        }],
+                    "text": "Expand all nodes by default"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-expand-all",
+                "defaultValue": "false"
+            },
+            "autoExpandParent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree autoExpandParent={false}></x-tree>"
+                        }],
+                    "text": "Expand parent nodes when checking"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-expand-parent",
+                "defaultValue": "true"
+            },
+            "showLine": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree showLine></x-tree>"
+                        }],
+                    "text": "Show connecting lines"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-line",
+                "defaultValue": "false"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree showIcon></x-tree>"
+                        }],
+                    "text": "Show icon before node title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "false"
+            },
+            "blockNode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree blockNode></x-tree>"
+                        }],
+                    "text": "Whether to block the entire row"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "block-node",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree disabled></x-tree>"
+                        }],
+                    "text": "Disabled the entire tree"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "allowDrag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree allowDrag></x-tree>"
+                        }],
+                    "text": "Whether to enable drag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-drag",
+                "defaultValue": "false"
+            },
+            "virtual": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree virtual></x-tree>"
+                        }],
+                    "text": "Virtual scroll (for large data)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual",
+                "defaultValue": "false"
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree height={300}></x-tree>"
+                        }],
+                    "text": "Height for virtual scroll"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            },
+            "itemHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree itemHeight={32}></x-tree>"
+                        }],
+                    "text": "Item height for virtual scroll"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-height",
+                "defaultValue": "32"
+            },
+            "checkStrictly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree checkStrictly></x-tree>"
+                        }],
+                    "text": "Check strictly (parent-child independent)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "check-strictly",
+                "defaultValue": "false"
+            },
+            "filterValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree filterValue=\"search text\"></x-tree>"
+                        }],
+                    "text": "Filter value for tree nodes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-value",
+                "defaultValue": "''"
+            },
+            "actions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenuItem[]",
+                    "resolved": "DropdownMenuItem[]",
+                    "references": {
+                        "DropdownMenuItem": {
+                            "location": "import",
+                            "path": "../x-dropdown/types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownMenuItem",
+                            "referenceLocation": "DropdownMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom actions for all nodes (right side)\r\nIf a node has its own actions, they will take priority."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showActions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'hover' | 'always'",
+                    "resolved": "\"always\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show actions only on hover (for all nodes)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-actions"
+            },
+            "filterTreeNode": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(node: TreeNode, value: string) => boolean",
+                    "resolved": "(node: TreeNode, value: string) => boolean",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree filterTreeNode={(node, value) => node.title.includes(value)}></x-tree>"
+                        }],
+                    "text": "Filter function (optional)."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalExpandedKeys": {},
+            "internalSelectedKeys": {},
+            "internalCheckedKeys": {},
+            "halfCheckedKeys": {},
+            "loadingKeys": {},
+            "dragOverNodeKey": {},
+            "scrollTop": {},
+            "focusedKey": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xExpand",
+                "name": "xExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXExpand={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when expand state changes."
+                },
+                "complexType": {
+                    "original": "TreeExpandEvent",
+                    "resolved": "TreeExpandEvent",
+                    "references": {
+                        "TreeExpandEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeExpandEvent",
+                            "referenceLocation": "TreeExpandEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSelect",
+                "name": "xSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXSelect={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when selection changes."
+                },
+                "complexType": {
+                    "original": "TreeSelectEvent",
+                    "resolved": "TreeSelectEvent",
+                    "references": {
+                        "TreeSelectEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeSelectEvent",
+                            "referenceLocation": "TreeSelectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xCheck",
+                "name": "xCheck",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXCheck={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when check state changes."
+                },
+                "complexType": {
+                    "original": "TreeCheckEvent",
+                    "resolved": "TreeCheckEvent",
+                    "references": {
+                        "TreeCheckEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeCheckEvent",
+                            "referenceLocation": "TreeCheckEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDragStart",
+                "name": "xDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXDragStart={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when drag starts."
+                },
+                "complexType": {
+                    "original": "TreeDragEvent",
+                    "resolved": "TreeDragEvent",
+                    "references": {
+                        "TreeDragEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeDragEvent",
+                            "referenceLocation": "TreeDragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDragEnter",
+                "name": "xDragEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXDragEnter={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when drag enters."
+                },
+                "complexType": {
+                    "original": "TreeDragEvent",
+                    "resolved": "TreeDragEvent",
+                    "references": {
+                        "TreeDragEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeDragEvent",
+                            "referenceLocation": "TreeDragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDragOver",
+                "name": "xDragOver",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXDragOver={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when dragging over."
+                },
+                "complexType": {
+                    "original": "TreeDragEvent",
+                    "resolved": "TreeDragEvent",
+                    "references": {
+                        "TreeDragEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeDragEvent",
+                            "referenceLocation": "TreeDragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDragLeave",
+                "name": "xDragLeave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXDragLeave={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when drag leaves."
+                },
+                "complexType": {
+                    "original": "TreeDragEvent",
+                    "resolved": "TreeDragEvent",
+                    "references": {
+                        "TreeDragEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeDragEvent",
+                            "referenceLocation": "TreeDragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDragEnd",
+                "name": "xDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXDragEnd={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when drag ends."
+                },
+                "complexType": {
+                    "original": "TreeDragEvent",
+                    "resolved": "TreeDragEvent",
+                    "references": {
+                        "TreeDragEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeDragEvent",
+                            "referenceLocation": "TreeDragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDrop",
+                "name": "xDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXDrop={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when drop happens."
+                },
+                "complexType": {
+                    "original": "TreeDragEvent",
+                    "resolved": "TreeDragEvent",
+                    "references": {
+                        "TreeDragEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeDragEvent",
+                            "referenceLocation": "TreeDragEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xLoadData",
+                "name": "xLoadData",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXLoadData={(ev) => console.log(ev.detail)}></x-tree>"
+                        }],
+                    "text": "Emitted when data loading is required."
+                },
+                "complexType": {
+                    "original": "TreeExpandEvent",
+                    "resolved": "TreeExpandEvent",
+                    "references": {
+                        "TreeExpandEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeExpandEvent",
+                            "referenceLocation": "TreeExpandEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xAction",
+                "name": "xAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree onXAction={(ev) => console.log('Action:', ev.detail.action, 'Node:', ev.detail.node)}></x-tree>"
+                        }],
+                    "text": "Emitted when a custom action is clicked."
+                },
+                "complexType": {
+                    "original": "TreeActionEvent",
+                    "resolved": "TreeActionEvent",
+                    "references": {
+                        "TreeActionEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree/types.ts::TreeActionEvent",
+                            "referenceLocation": "TreeActionEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "treeData",
+                "methodName": "watchTreeData"
+            }, {
+                "propName": "expandedKeys",
+                "methodName": "watchExpandedKeys"
+            }, {
+                "propName": "filterValue",
+                "methodName": "watchFilterValue"
+            }, {
+                "propName": "selectedKeys",
+                "methodName": "watchSelectedKeys"
+            }, {
+                "propName": "checkedKeys",
+                "methodName": "watchCheckedKeys"
+            }];
+    }
+}