@xlabs-store/core 0.0.1

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

@@ -0,0 +1,2750 @@
+import { Host, h, } from "@stencil/core";
+import { PortalController } from "../x-portal/portal-controller";
+import { getIcon } from "../../utils/config";
+import { translate } from "../../locales/locale.service";
+import { TreeService } from "../../utils/tree.service";
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+export class XTreeSelect {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Tree data source.
+     * @example
+     * <x-tree-select treeData={[{ key: '1', title: 'Node' }]}></x-tree-select>
+     */
+    treeData = [];
+    /**
+     * Current selected value(s).
+     * @example
+     * <x-tree-select value="1"></x-tree-select>
+     */
+    value;
+    /**
+     * Default value.
+     * @example
+     * <x-tree-select defaultValue="1"></x-tree-select>
+     */
+    defaultValue;
+    /**
+     * Placeholder text.
+     * @example
+     * <x-tree-select placeholder="Select"></x-tree-select>
+     */
+    placeholder = translate('TreeSelect.placeholder', {}, 'Please select');
+    /**
+     * Whether disabled.
+     * @example
+     * <x-tree-select disabled></x-tree-select>
+     */
+    disabled = false;
+    /**
+     * Whether allow multiple selection.
+     * @example
+     * <x-tree-select multiple></x-tree-select>
+     */
+    multiple = false;
+    /**
+     * Whether show checkbox (treeCheckable mode).
+     * @example
+     * <x-tree-select treeCheckable></x-tree-select>
+     */
+    treeCheckable = false;
+    /**
+     * Check node precisely (parent-child independent).
+     * @example
+     * <x-tree-select treeCheckStrictly></x-tree-select>
+     */
+    treeCheckStrictly = false;
+    /**
+     * Strategy for showing checked items.
+     * @example
+     * <x-tree-select showCheckedStrategy="SHOW_PARENT"></x-tree-select>
+     */
+    showCheckedStrategy = 'SHOW_CHILD';
+    /**
+     * Whether allow clear.
+     * @example
+     * <x-tree-select allowClear></x-tree-select>
+     */
+    allowClear = false;
+    /**
+     * Whether show search input.
+     * @example
+     * <x-tree-select showSearch></x-tree-select>
+     */
+    showSearch = false;
+    /**
+     * Filter function for tree nodes.
+     * @example
+     * <x-tree-select filterTreeNode={(v, n) => n.title.startsWith(v)}></x-tree-select>
+     */
+    filterTreeNode;
+    /**
+     * Filter tree nodes by input value (property name).
+     * @example
+     * <x-tree-select treeNodeFilterProp="title"></x-tree-select>
+     */
+    treeNodeFilterProp = 'title';
+    /**
+     * Size of the select.
+     * @example
+     * <x-tree-select size="small"></x-tree-select>
+     */
+    size = 'middle';
+    /**
+     * Validation status.
+     * @example
+     * <x-tree-select status="error"></x-tree-select>
+     */
+    status;
+    /**
+     * Dropdown placement.
+     * @example
+     * <x-tree-select placement="bottomRight"></x-tree-select>
+     */
+    placement = 'bottomLeft';
+    /**
+     * Variant style.
+     * @example
+     * <x-tree-select variant="filled"></x-tree-select>
+     */
+    variant = 'outlined';
+    /**
+     * Whether the dropdown is open.
+     * @example
+     * <x-tree-select open></x-tree-select>
+     */
+    open = false;
+    /**
+     * Max tag count to show in multiple mode.
+     * @example
+     * <x-tree-select multiple maxTagCount={2}></x-tree-select>
+     */
+    maxTagCount;
+    /**
+     * Placeholder for max tag count.
+     * @example
+     * <x-tree-select maxTagPlaceholder="+ more"></x-tree-select>
+     */
+    maxTagPlaceholder;
+    /**
+     * Whether show tree line.
+     * @example
+     * <x-tree-select treeLine></x-tree-select>
+     */
+    treeLine = false;
+    /**
+     * Default expanded keys.
+     * @example
+     * <x-tree-select defaultExpandedKeys={['1']}></x-tree-select>
+     */
+    defaultExpandedKeys = [];
+    /**
+     * Default expand all tree nodes.
+     * @example
+     * <x-tree-select defaultExpandAll></x-tree-select>
+     */
+    defaultExpandAll = false;
+    /**
+     * Default expand parent nodes.
+     * @example
+     * <x-tree-select treeDefaultExpandParent={false}></x-tree-select>
+     */
+    treeDefaultExpandParent = true;
+    /**
+     * Expand on load.
+     * @example
+     * <x-tree-select treeExpandedKeys={['1']}></x-tree-select>
+     */
+    treeExpandedKeys;
+    /**
+     * Auto focus on mount.
+     * @example
+     * <x-tree-select autofocus></x-tree-select>
+     */
+    autofocus = false;
+    /**
+     * Input ID.
+     * @example
+     * <x-tree-select inputId="tree"></x-tree-select>
+     */
+    inputId;
+    /**
+     * Name for form.
+     * @example
+     * <x-tree-select name="tree"></x-tree-select>
+     */
+    name;
+    /**
+     * Max height of dropdown.
+     * @example
+     * <x-tree-select listHeight={300}></x-tree-select>
+     */
+    listHeight = 256;
+    /**
+     * Whether loading state.
+     * @example
+     * <x-tree-select loading></x-tree-select>
+     */
+    loading = false;
+    /**
+     * Text when no data.
+     * @example
+     * <x-tree-select notFoundContent="Empty"></x-tree-select>
+     */
+    notFoundContent = translate('TreeSelect.notFoundContent', {}, 'No data');
+    /**
+     * Whether dropdown matches selector width.
+     * @example
+     * <x-tree-select popupMatchSelectWidth={false}></x-tree-select>
+     */
+    popupMatchSelectWidth = true;
+    /**
+     * Custom field names mapping.
+     * @example
+     * <x-tree-select fieldNames={{ title: 'label', value: 'id' }}></x-tree-select>
+     */
+    fieldNames;
+    /**
+     * Whether show arrow icon.
+     * @example
+     * <x-tree-select showArrow={false}></x-tree-select>
+     */
+    showArrow = true;
+    /**
+     * Whether show tree icon.
+     * @example
+     * <x-tree-select treeIcon></x-tree-select>
+     */
+    treeIcon = false;
+    /**
+     * Whether virtual scroll.
+     * @example
+     * <x-tree-select virtual={false}></x-tree-select>
+     */
+    virtual = true;
+    /**
+     * Label in value (for controlled mode).
+     * @example
+     * <x-tree-select labelInValue></x-tree-select>
+     */
+    labelInValue = false;
+    // ========================================
+    // STATE
+    // ========================================
+    /**
+     * Focus state.
+     */
+    focused = false;
+    /**
+     * Hover state for clear icon.
+     */
+    hovering = false;
+    /**
+     * Current search value.
+     */
+    searchValue = '';
+    /**
+     * Expanded tree node keys.
+     */
+    expandedKeys = [];
+    /**
+     * Selected keys for single/multiple mode.
+     */
+    selectedKeys = [];
+    /**
+     * Checked keys for checkable mode.
+     */
+    checkedKeys = [];
+    /**
+     * Half-checked keys for checkable mode.
+     */
+    halfCheckedKeys = [];
+    /**
+     * Dropdown width for portal.
+     */
+    dropdownWidth = 0;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when value changes.
+     * @example
+     * <x-tree-select onXChange={(ev) => console.log(ev.detail)}></x-tree-select>
+     */
+    xChange;
+    /**
+     * Emitted when dropdown opens/closes.
+     * @example
+     * <x-tree-select onXOpenChange={(ev) => console.log(ev.detail)}></x-tree-select>
+     */
+    xOpenChange;
+    /**
+     * Emitted when tree node expands/collapses.
+     * @example
+     * <x-tree-select onXTreeExpand={(ev) => console.log(ev.detail)}></x-tree-select>
+     */
+    xTreeExpand;
+    /**
+     * Emitted on search.
+     * @example
+     * <x-tree-select onXSearch={(ev) => console.log(ev.detail)}></x-tree-select>
+     */
+    xSearch;
+    /**
+     * Emitted on focus.
+     * @example
+     * <x-tree-select onXFocus={(ev) => console.log(ev)}></x-tree-select>
+     */
+    xFocus;
+    /**
+     * Emitted on blur.
+     * @example
+     * <x-tree-select onXBlur={(ev) => console.log(ev)}></x-tree-select>
+     */
+    xBlur;
+    /**
+     * Emitted when dropdown visible changes.
+     * @example
+     * <x-tree-select onXDropdownVisibleChange={(ev) => console.log(ev.detail)}></x-tree-select>
+     */
+    xDropdownVisibleChange;
+    // ========================================
+    // REFS
+    // ========================================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    /**
+     * Wrapper element reference.
+     */
+    wrapperRef;
+    /**
+     * Portal instance for dropdown.
+     */
+    portalInstance = null;
+    /**
+     * Dropdown element reference.
+     */
+    dropdownEl = null;
+    /**
+     * Tree Service Instance
+     */
+    get treeService() {
+        return new TreeService({
+            id: this.fieldNames?.value || 'key',
+            children: this.fieldNames?.children || 'children'
+        });
+    }
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+        this.dropdownEl = null;
+    }
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Initialize state from value and expansion settings.
+     *
+     * Flow:
+     * 1. Initialize `expandedKeys` based on props (treeExpandedKeys, defaultExpandAll, defaultExpandedKeys, or parent of value).
+     * 2. Initialize `value` from `defaultValue` if `value` is undefined.
+     * 3. Sync `value` to internal state (`selectedKeys`, `checkedKeys`).
+     */
+    componentWillLoad() {
+        // Initialize value first
+        if (this.value !== undefined) {
+            this.syncValueToState();
+        }
+        else if (this.defaultValue !== undefined) {
+            this.value = this.defaultValue;
+            this.syncValueToState();
+        }
+        // Initialize expanded keys
+        if (this.treeExpandedKeys) {
+            this.expandedKeys = [...this.treeExpandedKeys];
+        }
+        else if (this.defaultExpandAll) {
+            this.expandedKeys = this.treeService.getAllKeys(this.treeData);
+        }
+        else {
+            let initialExpanded = this.defaultExpandedKeys ? [...this.defaultExpandedKeys] : [];
+            if (this.treeDefaultExpandParent && this.value) {
+                // Expand parents of selected value
+                const parents = this.getParentKeys(this.value);
+                initialExpanded = [...new Set([...initialExpanded, ...parents])];
+            }
+            this.expandedKeys = initialExpanded;
+        }
+    }
+    treeDataChanged() {
+        if (this.treeExpandedKeys) {
+            this.expandedKeys = [...this.treeExpandedKeys];
+        }
+        else if (this.defaultExpandAll) {
+            this.expandedKeys = this.treeService.getAllKeys(this.treeData);
+        }
+        else if (this.treeDefaultExpandParent && this.value) {
+            const parents = this.getParentKeys(this.value);
+            this.expandedKeys = [...new Set([...this.expandedKeys, ...parents])];
+        }
+    }
+    /**
+     * Auto focus on mount when enabled.
+     */
+    componentDidLoad() {
+        if (this.autofocus && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    /**
+     * Cleanup portal on disconnect.
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    /**
+     * Sync state when value changes.
+     */
+    valueChanged() {
+        this.syncValueToState();
+    }
+    /**
+     * Sync expanded keys when controlled prop changes.
+     * @param newValue - Expanded keys.
+     */
+    treeExpandedKeysChanged(newValue) {
+        if (newValue) {
+            this.expandedKeys = [...newValue];
+        }
+    }
+    /**
+     * Handle open state changes and portal sync.
+     *
+     * Flow:
+     * 1. Emit `xOpenChange` and `xDropdownVisibleChange`.
+     * 2. If open, create or update portal.
+     * 3. If closed, destroy portal.
+     * @param newValue - Open state.
+     */
+    openChanged(newValue) {
+        this.xOpenChange.emit(newValue);
+        this.xDropdownVisibleChange.emit(newValue);
+        if (newValue) {
+            this.createOrUpdatePortal();
+        }
+        else {
+            this.destroyPortal();
+        }
+    }
+    // ========================================
+    // LISTENERS
+    // ========================================
+    /**
+     * Close dropdown when clicking outside.
+     *
+     * Flow:
+     * 1. Check if click path includes component or portal.
+     * 2. If neither, close dropdown.
+     * @param ev - Mouse event.
+     */
+    handleWindowClick(ev) {
+        if (!this.open)
+            return;
+        const path = ev.composedPath();
+        const isInsideComponent = path.includes(this.el);
+        const portalEl = this.portalInstance?.getElement();
+        const isInsidePortal = portalEl ? path.includes(portalEl) : false;
+        if (!isInsideComponent && !isInsidePortal) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Handle keyboard open/close and tag removal.
+     *
+     * Flow:
+     * - Escape: Close dropdown.
+     * - Enter/Down/Up: Open dropdown if closed.
+     * - Tab: Close dropdown.
+     * - Backspace: Remove last tag in multiple mode if search is empty.
+     * @param ev - Keyboard event.
+     */
+    handleKeydown(ev) {
+        if (this.disabled)
+            return;
+        switch (ev.key) {
+            case 'Escape':
+                ev.preventDefault();
+                this.closeDropdown();
+                break;
+            case 'Enter':
+                if (!this.open) {
+                    ev.preventDefault();
+                    this.openDropdown();
+                }
+                break;
+            case 'ArrowDown':
+                if (!this.open) {
+                    ev.preventDefault();
+                    this.openDropdown();
+                }
+                break;
+            case 'ArrowUp':
+                if (!this.open) {
+                    ev.preventDefault();
+                    this.openDropdown();
+                }
+                break;
+            case 'Tab':
+                if (this.open) {
+                    this.closeDropdown();
+                }
+                break;
+            case 'Backspace':
+                if (this.isMultiple() && !this.searchValue) {
+                    ev.preventDefault();
+                    this.removeLastTag();
+                }
+                break;
+        }
+    }
+    // ========================================
+    // PUBLIC METHODS
+    // ========================================
+    /**
+     * Focus the input programmatically.
+     * @returns Promise<void>
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+        this.focused = true;
+    }
+    /**
+     * Blur the input programmatically.
+     * @returns Promise<void>
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+        this.focused = false;
+    }
+    // ========================================
+    // PRIVATE METHODS - Field Names
+    // ========================================
+    /**
+     * Resolve field name mapping.
+     * @param field - Field key.
+     * @returns Mapped field name.
+     */
+    getFieldName(field) {
+        if (this.fieldNames && this.fieldNames[field]) {
+            return this.fieldNames[field];
+        }
+        return field;
+    }
+    /**
+     * Get node title using field mapping.
+     * @param node - Tree node.
+     * @returns Node title.
+     */
+    getNodeTitle(node) {
+        const field = this.getFieldName('title');
+        return node[field] || node.title || '';
+    }
+    /**
+     * Get node value using field mapping.
+     * @param node - Tree node.
+     * @returns Node value.
+     */
+    getNodeValue(node) {
+        const field = this.getFieldName('value');
+        return node[field] || node.value || node.key || '';
+    }
+    /**
+     * Get node children using field mapping.
+     * @param node - Tree node.
+     * @returns Array of children or undefined.
+     */
+    getNodeChildren(node) {
+        const field = this.getFieldName('children');
+        return node[field] || node.children;
+    }
+    // ========================================
+    // PRIVATE METHODS - Tree Operations
+    // ========================================
+    /**
+     * Determine if component is in multiple selection mode.
+     * @returns True if multiple or checkable.
+     */
+    isMultiple() {
+        return this.multiple || this.treeCheckable;
+    }
+    /**
+     * Sync value prop into selected/checked keys state.
+     *
+     * Flow:
+     * 1. If checkable: update `checkedKeys` and calculate `halfCheckedKeys` (if not strict).
+     * 2. If multiple: update `selectedKeys` array.
+     * 3. If single: update `selectedKeys` with single value.
+     */
+    syncValueToState() {
+        if (this.treeCheckable) {
+            const rawValues = Array.isArray(this.value) ? [...this.value] : (this.value ? [this.value] : []);
+            this.checkedKeys = this.expandCheckedKeys(rawValues);
+            if (!this.treeCheckStrictly) {
+                // Recalculate to ensure consistency (e.g. if parent provided, ensure children added)
+                // expandCheckedKeys does this, but recalcCheckedKeys ensures bottom-up consistency
+                this.checkedKeys = this.recalcCheckedKeys(this.checkedKeys);
+                this.halfCheckedKeys = this.calculateHalfCheckedKeys();
+            }
+        }
+        else if (this.multiple) {
+            this.selectedKeys = Array.isArray(this.value) ? [...this.value] : (this.value ? [this.value] : []);
+        }
+        else {
+            this.selectedKeys = this.value ? [this.value] : [];
+        }
+    }
+    /**
+     * Expand parent keys to include all descendants (for cascade mode).
+     * @param keys - Initial keys (potentially parents).
+     * @returns Array of keys including descendants.
+     */
+    expandCheckedKeys(keys) {
+        if (this.treeCheckStrictly)
+            return keys;
+        const expanded = new Set(keys);
+        const traverse = (node) => {
+            const children = this.getNodeChildren(node);
+            if (expanded.has(this.treeService.getId(node))) {
+                // Add all descendants
+                const addDescendants = (n) => {
+                    expanded.add(this.treeService.getId(n));
+                    const kids = this.getNodeChildren(n);
+                    if (kids)
+                        kids.forEach(addDescendants);
+                };
+                if (children)
+                    children.forEach(addDescendants);
+            }
+            else if (children) {
+                children.forEach(traverse);
+            }
+        };
+        this.treeData.forEach(traverse);
+        return Array.from(expanded);
+    }
+    /**
+     * Recalculate checked keys from bottom up to ensure consistency.
+     * If all children checked -> check parent.
+     * If not all children checked -> uncheck parent.
+     * @param currentChecked - Current checked keys.
+     * @returns Consistent checked keys.
+     */
+    recalcCheckedKeys(currentChecked) {
+        if (this.treeCheckStrictly)
+            return currentChecked;
+        const checkedSet = new Set(currentChecked);
+        // Returns: 0 (none), 1 (some), 2 (all)
+        const check = (node) => {
+            const children = this.getNodeChildren(node);
+            const key = node.key || this.getNodeValue(node);
+            if (!children || children.length === 0) {
+                return checkedSet.has(key) ? 2 : 0;
+            }
+            let all = true;
+            let some = false;
+            for (const child of children) {
+                const status = check(child);
+                if (status !== 2)
+                    all = false;
+                if (status > 0) {
+                    some = true;
+                }
+            }
+            if (all) {
+                checkedSet.add(key);
+                return 2;
+            }
+            else {
+                checkedSet.delete(key);
+                // If some children are checked, parent is indeterminate (handled by halfCheckedKeys)
+                // But parent itself is NOT checked.
+                return some ? 1 : 0;
+            }
+        };
+        this.treeData.forEach(check);
+        return Array.from(checkedSet);
+    }
+    /**
+     * Get values based on showCheckedStrategy.
+     * @param checkedKeys - All checked keys.
+     * @returns Filtered keys.
+     */
+    getCheckedStrategyValues(checkedKeys) {
+        if (this.treeCheckStrictly)
+            return checkedKeys;
+        const strategy = this.showCheckedStrategy;
+        if (strategy === 'SHOW_ALL')
+            return checkedKeys;
+        const result = [];
+        const checkedSet = new Set(checkedKeys);
+        const traverse = (node) => {
+            const key = node.key;
+            const isChecked = checkedSet.has(key);
+            const children = this.getNodeChildren(node);
+            if (isChecked) {
+                if (strategy === 'SHOW_PARENT') {
+                    result.push(key);
+                    return; // Don't traverse children
+                }
+                else if (strategy === 'SHOW_CHILD') {
+                    if (!children || children.length === 0) {
+                        result.push(key);
+                    }
+                    else {
+                        if (children)
+                            children.forEach(traverse);
+                    }
+                    return;
+                }
+            }
+            if (children) {
+                children.forEach(traverse);
+            }
+        };
+        this.treeData.forEach(traverse);
+        return result;
+    }
+    /**
+     * Get parent keys path for given value(s).
+     *
+     * Flow:
+     * 1. Iterate over each selected value.
+     * 2. Traverse tree using TreeService to find path from root to node.
+     * @param value - Selected value(s).
+     * @returns Unique array of parent keys.
+     */
+    getParentKeys(value) {
+        const values = Array.isArray(value) ? value : [value];
+        const parentKeys = [];
+        for (const val of values) {
+            const path = this.treeService.getParentIdsPath(val, this.treeData);
+            parentKeys.push(...path);
+        }
+        return [...new Set(parentKeys)];
+    }
+    /**
+     * Find node by key or value recursively.
+     * @param key - Node key or value.
+     * @returns Found node or null.
+     */
+    findNode(key) {
+        const find = (nodes) => {
+            for (const node of nodes) {
+                if (String(node.key) === String(key) || String(this.getNodeValue(node)) === String(key))
+                    return node;
+                const children = this.getNodeChildren(node);
+                if (children) {
+                    const found = find(children);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        return find(this.treeData);
+    }
+    /**
+     * Get labels for currently selected keys.
+     * @returns Array of labels.
+     */
+    getSelectedLabels() {
+        const keys = this.treeCheckable
+            ? (Array.isArray(this.value) ? this.value : [])
+            : this.selectedKeys;
+        return keys.map(key => {
+            const node = this.findNode(key);
+            return node ? this.getNodeTitle(node) : key;
+        });
+    }
+    /**
+     * Get all descendant keys for a node.
+     * @param node - Tree node.
+     * @returns Array of all child keys.
+     */
+    getAllChildKeys(node) {
+        return this.treeService.getAllChildIds(node);
+    }
+    /**
+     * Calculate half-checked keys based on current checked state.
+     *
+     * Flow:
+     * 1. Traverse tree bottom-up (implicitly via recursion).
+     * 2. If node has children, check their checked status.
+     * 3. If some children checked but not all, mark node as half-checked.
+     * @returns Array of half-checked keys.
+     */
+    calculateHalfCheckedKeys() {
+        return this.treeService.calculateHalfCheckedKeys(this.checkedKeys, this.treeData);
+    }
+    // ========================================
+    // PRIVATE METHODS - Actions
+    // ========================================
+    openDropdown() {
+        if (this.disabled || this.open)
+            return;
+        if (this.treeExpandedKeys) {
+            this.expandedKeys = [...this.treeExpandedKeys];
+        }
+        else if (this.defaultExpandAll) {
+            this.expandedKeys = this.treeService.getAllKeys(this.treeData);
+        }
+        else if (this.value && (Array.isArray(this.value) ? this.value.length > 0 : true) && this.treeDefaultExpandParent) {
+            const parents = this.getParentKeys(this.value);
+            this.expandedKeys = [...new Set([...this.expandedKeys, ...parents])];
+        }
+        this.open = true;
+        requestAnimationFrame(() => {
+            if (this.wrapperRef && this.popupMatchSelectWidth) {
+                this.dropdownWidth = this.wrapperRef.offsetWidth;
+            }
+        });
+    }
+    /**
+     * Close dropdown and reset search.
+     */
+    closeDropdown() {
+        if (!this.open)
+            return;
+        // Clear search value when closing
+        this.searchValue = '';
+        const hasValue = Array.isArray(this.value) ? this.value.length > 0 : !!this.value;
+        if (this.treeExpandedKeys) {
+            this.expandedKeys = [...this.treeExpandedKeys];
+        }
+        else if (this.defaultExpandAll) {
+            this.expandedKeys = this.treeService.getAllKeys(this.treeData);
+        }
+        else {
+            let expanded = this.defaultExpandedKeys ? [...this.defaultExpandedKeys] : [];
+            if (hasValue && this.treeDefaultExpandParent) {
+                const parents = this.getParentKeys(this.value);
+                expanded = [...new Set([...expanded, ...parents])];
+            }
+            this.expandedKeys = expanded;
+        }
+        this.open = false;
+    }
+    /**
+     * Handle tree node click.
+     *
+     * Flow:
+     * 1. If checkable, toggle check state.
+     * 2. If multiple, toggle selection.
+     * 3. If single, set selection and close dropdown.
+     * @param node - Tree node.
+     * @param e - Mouse event.
+     */
+    handleNodeClick(node, e) {
+        e.stopPropagation();
+        if (node.disabled)
+            return;
+        if (this.treeCheckable) {
+            this.handleNodeCheck(node);
+        }
+        else if (this.multiple) {
+            this.handleMultipleSelect(node);
+        }
+        else {
+            this.handleSingleSelect(node);
+        }
+    }
+    /**
+     * Handle node check/uncheck.
+     *
+     * Flow:
+     * 1. Determine if strict or cascade mode.
+     * 2. Update `checkedKeys` (and `halfCheckedKeys` if cascading).
+     * 3. Update `value` prop.
+     * 4. Emit `xChange` event.
+     * @param node - Tree node.
+     */
+    handleNodeCheck(node) {
+        const key = node.key || this.getNodeValue(node);
+        const isChecked = this.checkedKeys.includes(key);
+        const result = this.treeService.toggleCheck(node, isChecked, this.checkedKeys, this.treeData, this.treeCheckStrictly);
+        this.checkedKeys = result.checkedKeys;
+        if (!this.treeCheckStrictly) {
+            this.halfCheckedKeys = result.halfCheckedKeys;
+        }
+        const strategyValues = this.getCheckedStrategyValues(this.checkedKeys);
+        this.value = strategyValues;
+        this.xChange.emit({
+            value: strategyValues,
+            label: this.getSelectedLabels(),
+            nodes: strategyValues.map(k => this.findNode(k)).filter(Boolean),
+        });
+    }
+    /**
+     * Handle multiple selection for node.
+     * @param node - Tree node.
+     */
+    handleMultipleSelect(node) {
+        this.selectedKeys = this.treeService.toggleSelect(node, this.selectedKeys, true);
+        this.value = [...this.selectedKeys];
+        this.xChange.emit({
+            value: this.selectedKeys,
+            label: this.getSelectedLabels(),
+            nodes: this.selectedKeys.map(k => this.findNode(k)).filter(Boolean),
+        });
+    }
+    /**
+     * Handle single selection for node.
+     * @param node - Tree node.
+     */
+    handleSingleSelect(node) {
+        this.selectedKeys = [node.key];
+        this.value = this.getNodeValue(node);
+        this.xChange.emit({
+            value: this.value,
+            label: this.getNodeTitle(node),
+            node: node,
+        });
+        this.closeDropdown();
+    }
+    /**
+     * Handle node expand/collapse.
+     * @param node - Tree node.
+     * @param e - Mouse event.
+     */
+    handleNodeExpand(node, e) {
+        e.stopPropagation();
+        this.expandedKeys = this.treeService.toggleExpand(node, this.expandedKeys);
+        this.xTreeExpand.emit({ expandedKeys: this.expandedKeys });
+    }
+    /**
+     * Handle search input changes.
+     *
+     * Flow:
+     * 1. Update search value state.
+     * 2. Emit `xSearch` event.
+     * 3. If searching, find and expand parent nodes of matched items.
+     * 4. If clearing search, reset expanded keys to default.
+     * @param e - Input event.
+     */
+    handleSearch(e) {
+        const value = e.target.value;
+        this.searchValue = value;
+        this.xSearch.emit({ value });
+        // Auto expand matched nodes
+        if (value) {
+            // When searching, we only expand the matched parents
+            const matchedParents = this.getMatchedParentKeys(value);
+            this.expandedKeys = [...new Set(matchedParents)];
+        }
+        else {
+            // When clearing search, reset to default expanded keys
+            if (this.treeExpandedKeys) {
+                this.expandedKeys = [...this.treeExpandedKeys];
+            }
+            else if (this.defaultExpandAll) {
+                this.expandedKeys = this.treeService.getAllKeys(this.treeData);
+            }
+            else if (this.value && (Array.isArray(this.value) ? this.value.length > 0 : true) && this.treeDefaultExpandParent) {
+                const parents = this.getParentKeys(this.value);
+                this.expandedKeys = [...new Set([...this.expandedKeys, ...parents])];
+            }
+            else {
+                this.expandedKeys = [...this.defaultExpandedKeys];
+            }
+        }
+        this.updatePortal();
+    }
+    /**
+     * Collect parent keys of nodes matching search.
+     * @param searchValue - Search text.
+     * @returns Array of parent keys.
+     */
+    getMatchedParentKeys(searchValue) {
+        const parentKeys = [];
+        const searchLower = searchValue.toLowerCase();
+        const traverse = (nodes, path = []) => {
+            for (const node of nodes) {
+                const title = this.getNodeTitle(node).toLowerCase();
+                const children = this.getNodeChildren(node);
+                const key = node.key ?? this.getNodeValue(node);
+                if (title.includes(searchLower)) {
+                    parentKeys.push(...path);
+                }
+                if (children) {
+                    traverse(children, [...path, key]);
+                }
+            }
+        };
+        traverse(this.treeData);
+        return parentKeys;
+    }
+    /**
+     * Handle clear action.
+     *
+     * Flow:
+     * 1. Reset all selection and search states.
+     * 2. Emit `xChange` with empty/null value.
+     * @param e - Mouse event.
+     */
+    handleClear(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.selectedKeys = [];
+        this.checkedKeys = [];
+        this.halfCheckedKeys = [];
+        this.value = this.isMultiple() ? [] : undefined;
+        this.searchValue = '';
+        this.xChange.emit({
+            value: this.isMultiple() ? [] : null,
+            label: [],
+        });
+    }
+    /**
+     * Remove tag by key.
+     *
+     * Flow:
+     * 1. If checkable: update `checkedKeys` (and `halfCheckedKeys` if cascading).
+     * 2. Otherwise: filter `selectedKeys`.
+     * 3. Update `value` prop.
+     * 4. Emit `xChange`.
+     * @param key - Node key.
+     * @param e - Mouse event.
+     */
+    removeTag(key, e) {
+        e.stopPropagation();
+        if (this.treeCheckable) {
+            const node = this.findNode(key);
+            if (node && !this.treeCheckStrictly) {
+                const allChildKeys = this.getAllChildKeys(node);
+                const toRemove = new Set([key, ...allChildKeys]);
+                this.checkedKeys = this.checkedKeys.filter(k => !toRemove.has(k));
+                this.checkedKeys = this.recalcCheckedKeys(this.checkedKeys);
+                this.halfCheckedKeys = this.calculateHalfCheckedKeys();
+            }
+            else {
+                this.checkedKeys = this.checkedKeys.filter(k => k !== key);
+            }
+            this.value = this.getCheckedStrategyValues(this.checkedKeys);
+        }
+        else {
+            this.selectedKeys = this.selectedKeys.filter(k => k !== key);
+            this.value = [...this.selectedKeys];
+        }
+        this.xChange.emit({
+            value: this.value,
+            label: this.getSelectedLabels(),
+        });
+    }
+    /**
+     * Remove last selected tag.
+     */
+    removeLastTag() {
+        const keys = this.treeCheckable ? this.checkedKeys : this.selectedKeys;
+        if (keys.length > 0) {
+            const lastKey = keys[keys.length - 1];
+            this.removeTag(lastKey, new MouseEvent('click'));
+        }
+    }
+    /**
+     * Handle selector click to open dropdown.
+     */
+    handleSelectorClick = () => {
+        if (!this.disabled) {
+            this.openDropdown();
+        }
+    };
+    /**
+     * Handle input focus.
+     * @param e - Focus event.
+     */
+    handleInputFocus = (e) => {
+        this.focused = true;
+        this.xFocus.emit(e);
+    };
+    /**
+     * Handle input blur.
+     * @param e - Focus event.
+     */
+    handleInputBlur = (e) => {
+        setTimeout(() => {
+            this.focused = false;
+            this.xBlur.emit(e);
+        }, 150);
+    };
+    /**
+     * Track hover state on wrapper enter.
+     */
+    handleMouseEnter = () => {
+        this.hovering = true;
+    };
+    /**
+     * Track hover state on wrapper leave.
+     */
+    handleMouseLeave = () => {
+        this.hovering = false;
+    };
+    // ========================================
+    // PRIVATE METHODS - Portal Management
+    // ========================================
+    /**
+     * Get wrapper element for portal.
+     * @returns Wrapper element or undefined.
+     */
+    getWrapperEl() {
+        return this.wrapperRef || undefined;
+    }
+    /**
+     * Build dropdown content element and wire events.
+     *
+     * Flow:
+     * 1. Create `x-tree-select-dropdown-content` if not exists.
+     * 2. Attach selection, expansion, and check event listeners.
+     * 3. Filter tree data based on search value.
+     * 4. Sync current component state to dropdown element props.
+     * @returns Dropdown element.
+     */
+    buildDropdownElement() {
+        if (!this.dropdownEl) {
+            this.dropdownEl = document.createElement('x-tree-select-dropdown-content');
+            // Event listeners - Add only once
+            this.dropdownEl.addEventListener('xNodeClick', ((e) => {
+                const { node, value } = e.detail;
+                this.handleNodeSelect(node, value);
+            }));
+            this.dropdownEl.addEventListener('xNodeExpand', ((e) => {
+                const { node, expanded } = e.detail;
+                this.handleNodeExpandFromEvent(node, expanded);
+                // We might need to update portal if size changes, but since we reuse element, internal update might be enough
+                // or trigger updatePortal position
+                this.updatePortal();
+            }));
+            this.dropdownEl.addEventListener('xNodeCheck', ((e) => {
+                const { node, checked } = e.detail;
+                this.handleNodeCheckFromEvent(node, checked);
+                this.updatePortal();
+            }));
+        }
+        const dropdownEl = this.dropdownEl;
+        const classes = {
+            'x-tree-select-dropdown': true,
+            'x-tree-select-dropdown-hidden': !this.open,
+            [`x-tree-select-dropdown-placement-${this.placement}`]: true,
+        };
+        // Get filtered tree data if showSearch and has searchValue
+        const filteredTreeData = this.showSearch && this.searchValue
+            ? this.filterTree(this.treeData, this.searchValue)
+            : this.treeData;
+        dropdownEl.dropdownClasses = classes;
+        dropdownEl.dropdownStyle = {};
+        dropdownEl.treeData = filteredTreeData;
+        dropdownEl.selectedValues = this.getSelectedValues();
+        dropdownEl.expandedKeys = this.expandedKeys;
+        dropdownEl.checkedKeys = this.checkedKeys || [];
+        dropdownEl.halfCheckedKeys = this.halfCheckedKeys || [];
+        dropdownEl.multiple = this.multiple;
+        dropdownEl.treeCheckable = this.treeCheckable;
+        dropdownEl.treeLine = this.treeLine;
+        dropdownEl.fieldNames = this.fieldNames;
+        dropdownEl.notFoundContent = this.notFoundContent || 'No data';
+        dropdownEl.searchValue = this.searchValue;
+        return dropdownEl;
+    }
+    /**
+     * Create portal or update existing instance.
+     *
+     * Flow:
+     * 1. Build dropdown content.
+     * 2. Calculate popup width if required.
+     * 3. Create or update `PortalController` instance.
+     */
+    createOrUpdatePortal() {
+        if (!this.open)
+            return;
+        const triggerEl = this.getWrapperEl();
+        if (!triggerEl)
+            return;
+        const dropdownContent = this.buildDropdownElement();
+        // Calculate width
+        if (this.popupMatchSelectWidth) {
+            this.dropdownWidth = triggerEl.offsetWidth;
+        }
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: true,
+                target: triggerEl,
+                placement: this.placement,
+                zIndex: 1050,
+                width: this.popupMatchSelectWidth && this.dropdownWidth > 0 ? `${this.dropdownWidth}px` : undefined,
+                content: dropdownContent,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: true,
+                target: triggerEl,
+                placement: this.placement,
+                zIndex: 1050,
+                width: this.popupMatchSelectWidth && this.dropdownWidth > 0 ? `${this.dropdownWidth}px` : undefined,
+                content: dropdownContent,
+            });
+        }
+    }
+    /**
+     * Update portal content and placement.
+     */
+    updatePortal() {
+        if (!this.open || !this.portalInstance)
+            return;
+        const triggerEl = this.getWrapperEl();
+        if (!triggerEl)
+            return;
+        const dropdownContent = this.buildDropdownElement();
+        this.portalInstance.update({
+            open: true,
+            target: triggerEl,
+            placement: this.placement,
+            zIndex: 1050,
+            width: this.popupMatchSelectWidth && this.dropdownWidth > 0 ? `${this.dropdownWidth}px` : undefined,
+            content: dropdownContent,
+        });
+    }
+    // ========================================
+    // PRIVATE METHODS - Selection Helpers
+    // ========================================
+    /**
+     * Get selected values based on checkable mode.
+     * @returns Array of selected/checked values.
+     */
+    getSelectedValues() {
+        if (this.treeCheckable) {
+            return this.checkedKeys || [];
+        }
+        return this.selectedKeys || [];
+    }
+    /**
+     * Filter tree nodes by search value recursively.
+     *
+     * Flow:
+     * 1. Traverse nodes.
+     * 2. Include node if title matches or any child matches.
+     * 3. If node matches, keep all its children.
+     * @param nodes - Tree nodes.
+     * @param searchValue - Search text.
+     * @returns Filtered tree nodes.
+     */
+    filterTree(nodes, searchValue) {
+        return this.treeService.filterTree(nodes, searchValue, (node, search) => {
+            if (this.filterTreeNode) {
+                return this.filterTreeNode(search, node);
+            }
+            const searchLower = search.toLowerCase();
+            const title = this.getNodeTitle(node).toLowerCase();
+            return title.includes(searchLower);
+        });
+    }
+    /**
+     * Handle node selection from dropdown events.
+     * @param node - Tree node.
+     * @param _value - Node value.
+     */
+    handleNodeSelect(node, _value) {
+        if (node.disabled)
+            return;
+        if (this.treeCheckable) {
+            this.handleNodeCheck(node);
+        }
+        else if (this.multiple) {
+            this.handleMultipleSelect(node);
+        }
+        else {
+            this.handleSingleSelect(node);
+        }
+        this.updatePortal();
+    }
+    /**
+     * Handle expand event from dropdown.
+     * @param node - Tree node.
+     * @param expanded - Expanded state.
+     */
+    handleNodeExpandFromEvent(node, expanded) {
+        const key = node.key || this.getNodeValue(node);
+        if (expanded) {
+            this.expandedKeys = [...this.expandedKeys, key];
+        }
+        else {
+            this.expandedKeys = this.expandedKeys.filter(k => k !== key);
+        }
+        this.xTreeExpand.emit({ expandedKeys: this.expandedKeys });
+    }
+    /**
+     * Handle check event from dropdown.
+     *
+     * Flow:
+     * 1. Determine strict or cascade mode.
+     * 2. Update `checkedKeys` and `halfCheckedKeys`.
+     * 3. Update `value` prop and emit `xChange`.
+     * @param node - Tree node.
+     * @param checked - Checked state.
+     */
+    handleNodeCheckFromEvent(node, checked) {
+        const result = this.treeService.toggleCheck(node, checked, this.checkedKeys, this.treeData, this.treeCheckStrictly);
+        this.checkedKeys = result.checkedKeys;
+        if (!this.treeCheckStrictly) {
+            this.halfCheckedKeys = result.halfCheckedKeys;
+        }
+        const strategyValues = this.getCheckedStrategyValues(this.checkedKeys);
+        this.value = strategyValues;
+        this.xChange.emit({
+            value: strategyValues,
+            label: this.getSelectedLabels(),
+            nodes: strategyValues.map(k => this.findNode(k)).filter(Boolean),
+        });
+    }
+    // ========================================
+    // PRIVATE METHODS - Filtering
+    // ========================================
+    /**
+     * Match node against search value.
+     * @param node - Tree node.
+     * @returns True if matches.
+     */
+    matchSearch(node) {
+        if (!this.searchValue)
+            return true;
+        if (this.filterTreeNode) {
+            return this.filterTreeNode(this.searchValue, node);
+        }
+        const searchLower = this.searchValue.toLowerCase();
+        const title = this.getNodeTitle(node).toLowerCase();
+        return title.includes(searchLower);
+    }
+    /**
+     * Check if node has children matching search.
+     * @param node - Tree node.
+     * @returns True if any child matches.
+     */
+    hasMatchedChildren(node) {
+        const children = this.getNodeChildren(node);
+        if (!children)
+            return false;
+        return children.some(child => this.matchSearch(child) || this.hasMatchedChildren(child));
+    }
+    /**
+     * Determine whether to show node in filtered view.
+     * @param node - Tree node.
+     * @returns True if node or children match.
+     */
+    shouldShowNode(node) {
+        if (!this.searchValue)
+            return true;
+        return this.matchSearch(node) || this.hasMatchedChildren(node);
+    }
+    // ========================================
+    // RENDER METHODS - Icons
+    // ========================================
+    /**
+     * Render arrow icon.
+     * @returns JSX.Element
+     */
+    renderArrowIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor" class="x-tree-select-arrow-icon">
+        //   <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" />
+        // </svg>
+        h("x-icon", { name: getIcon('arrowDown') }));
+    }
+    /**
+     * Render clear icon.
+     * @returns JSX.Element
+     */
+    renderClearIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
+        //   <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" />
+        // </svg>
+        h("x-icon", { name: getIcon('clear') }));
+    }
+    /**
+     * Render loading icon.
+     * @returns JSX.Element
+     */
+    renderLoadingIcon() {
+        return (
+        // <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" class="x-tree-select-loading-icon">
+        //   <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 googl874 searching150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" />
+        // </svg>
+        h("x-icon", { spin: true, name: getIcon('loading') }));
+    }
+    /**
+     * Render switcher icon for tree nodes.
+     * @param expanded - Expanded state.
+     * @returns JSX.Element
+     */
+    renderSwitcherIcon(expanded) {
+        return (
+        // <svg
+        //   viewBox="64 64 896 896"
+        //   width="1em"
+        //   height="1em"
+        //   fill="currentColor"
+        //   class={{ 'x-tree-select-switcher-icon': true, 'x-tree-select-switcher-icon-expanded': expanded }}
+        // >
+        //   <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" />
+        // </svg>
+        h("x-icon", { class: { 'x-tree-select-switcher-icon': true, 'x-tree-select-switcher-icon-expanded': expanded }, name: getIcon('arrowRight') }));
+    }
+    /**
+     * Render checkbox for tree node.
+     * @param checked - Checked state.
+     * @param halfChecked - Half checked state.
+     * @returns JSX.Element
+     */
+    renderCheckbox(checked, halfChecked = false) {
+        return (h("span", { class: {
+                'x-tree-select-checkbox': true,
+                'x-tree-select-checkbox-checked': checked,
+                'x-tree-select-checkbox-indeterminate': halfChecked && !checked,
+            } }, checked && (
+        // <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
+        //   <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
+        // </svg>
+        h("x-icon", { name: getIcon('checkSmall') })), halfChecked && !checked && (h("span", { class: "x-tree-select-checkbox-inner-indeterminate" }))));
+    }
+    /**
+     * Render remove icon for tags.
+     * @returns JSX.Element
+     */
+    renderRemoveIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
+        //   <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />
+        // </svg>
+        h("x-icon", { name: getIcon('close') }));
+    }
+    // ========================================
+    // RENDER METHODS - Tree
+    // ========================================
+    /**
+     * Render tree node recursively.
+     *
+     * Flow:
+     * 1. Check if node should be shown.
+     * 2. Determine state (expanded, selected, checked, matched).
+     * 3. Render indentation, switcher, checkbox, and content.
+     * 4. Recursively render children if expanded.
+     * @param node - Tree node.
+     * @param level - Tree level.
+     * @returns JSX element or null.
+     */
+    renderTreeNode(node, level = 0) {
+        if (!this.shouldShowNode(node))
+            return null;
+        const children = this.getNodeChildren(node);
+        const hasChildren = children && children.length > 0;
+        const isExpanded = this.expandedKeys.includes(node.key);
+        const isSelected = this.selectedKeys.includes(node.key);
+        const isChecked = this.checkedKeys.includes(node.key);
+        const isHalfChecked = this.halfCheckedKeys.includes(node.key);
+        const isDisabled = node.disabled || false;
+        const isMatched = this.matchSearch(node);
+        return (h("div", { class: "x-tree-select-treenode-wrapper", key: node.key }, h("div", { class: {
+                'x-tree-select-treenode': true,
+                'x-tree-select-treenode-switcher-open': isExpanded,
+                'x-tree-select-treenode-switcher-close': !isExpanded && hasChildren,
+                'x-tree-select-treenode-selected': isSelected && !this.treeCheckable,
+                'x-tree-select-treenode-checked': isChecked,
+                'x-tree-select-treenode-disabled': isDisabled,
+                'x-tree-select-treenode-matched': isMatched && !!this.searchValue,
+            } }, level > 0 && (h("span", { class: "x-tree-select-indent" }, Array.from({ length: level }, (_, i) => (h("span", { class: {
+                'x-tree-select-indent-unit': true,
+                'x-tree-select-indent-unit-line': this.treeLine,
+            }, key: i }))))), h("span", { class: {
+                'x-tree-select-switcher': true,
+                'x-tree-select-switcher-leaf': !hasChildren,
+            }, onClick: (e) => hasChildren && this.handleNodeExpand(node, e) }, hasChildren && this.renderSwitcherIcon(isExpanded)), this.treeCheckable && (h("span", { class: {
+                'x-tree-select-checkbox-wrapper': true,
+                'x-tree-select-checkbox-wrapper-disabled': isDisabled || node.disableCheckbox,
+            }, onClick: (e) => !isDisabled && !node.disableCheckbox && this.handleNodeClick(node, e) }, this.renderCheckbox(isChecked, isHalfChecked))), h("span", { class: {
+                'x-tree-select-node-content': true,
+                'x-tree-select-node-content-wrapper': true,
+            }, onClick: (e) => !isDisabled && this.handleNodeClick(node, e) }, h("span", { class: "x-tree-select-title" }, this.renderHighlightedTitle(this.getNodeTitle(node))))), hasChildren && isExpanded && (h("div", { class: "x-tree-select-child-tree" }, children.map(child => this.renderTreeNode(child, level + 1))))));
+    }
+    /**
+     * Render title with search highlight.
+     * @param title - Node title.
+     * @returns Title with highlight span or plain string.
+     */
+    renderHighlightedTitle(title) {
+        if (!this.searchValue)
+            return title;
+        const searchLower = this.searchValue.toLowerCase();
+        const titleLower = title.toLowerCase();
+        const index = titleLower.indexOf(searchLower);
+        if (index === -1)
+            return title;
+        const before = title.slice(0, index);
+        const match = title.slice(index, index + this.searchValue.length);
+        const after = title.slice(index + this.searchValue.length);
+        return [
+            before,
+            h("span", { class: "x-tree-select-title-highlight" }, match),
+            after,
+        ];
+    }
+    // ========================================
+    // RENDER METHODS - Selector
+    // ========================================
+    /**
+     * Render tags for multiple selection mode.
+     *
+     * Flow:
+     * 1. Calculate tags to display based on `maxTagCount`.
+     * 2. Render each tag with remove icon.
+     * 3. Render rest placeholder if any.
+     * 4. Render search input.
+     * @returns JSX element.
+     */
+    renderTags() {
+        const keys = this.treeCheckable ? this.checkedKeys : this.selectedKeys;
+        let displayKeys = keys;
+        let restCount = 0;
+        if (this.maxTagCount !== undefined && this.maxTagCount >= 0 && keys.length > this.maxTagCount) {
+            displayKeys = keys.slice(0, this.maxTagCount);
+            restCount = keys.length - this.maxTagCount;
+        }
+        return (h("div", { class: "x-tree-select-selection-overflow" }, displayKeys.map(key => {
+            const node = this.findNode(key);
+            const title = node ? this.getNodeTitle(node) : key;
+            return (h("span", { class: "x-tree-select-selection-item", key: key }, h("span", { class: "x-tree-select-selection-item-content" }, title), h("span", { class: "x-tree-select-selection-item-remove", onClick: (e) => this.removeTag(key, e) }, this.renderRemoveIcon())));
+        }), restCount > 0 && (h("span", { class: "x-tree-select-selection-item x-tree-select-selection-item-rest" }, h("span", { class: "x-tree-select-selection-item-content" }, this.maxTagPlaceholder || `+ ${restCount} ...`))), h("span", { class: "x-tree-select-selection-search" }, h("input", { ref: el => (this.inputRef = el), class: "x-tree-select-selection-search-input", value: this.searchValue, disabled: this.disabled, onInput: (e) => this.handleSearch(e), onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, style: { width: this.searchValue ? `${this.searchValue.length + 1}ch` : '4px' } }))));
+    }
+    /**
+     * Render selector for single selection mode.
+     * @returns JSX element.
+     */
+    renderSingleSelector() {
+        const hasValue = this.selectedKeys.length > 0;
+        const label = hasValue ? this.getSelectedLabels()[0] : '';
+        return (h("div", { class: "x-tree-select-selection-search", style: { position: 'relative' } }, hasValue && !this.searchValue && (h("span", { class: "x-tree-select-selection-item", title: label, style: {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                right: '0',
+                bottom: '0',
+                pointerEvents: 'none',
+                display: 'flex',
+                alignItems: 'center'
+            } }, label)), h("input", { ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-tree-select-selection-search-input", value: this.showSearch ? this.searchValue : '', placeholder: "", readOnly: !this.showSearch, disabled: this.disabled, autoComplete: "off", onInput: (e) => this.handleSearch(e), onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), !hasValue && !this.searchValue && (h("span", { class: "x-tree-select-selection-placeholder", style: {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                right: '0',
+                bottom: '0',
+                pointerEvents: 'none',
+                display: 'flex',
+                alignItems: 'center'
+            } }, this.placeholder))));
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Render tree select input and suffix icons.
+     * @returns JSX element.
+     */
+    render() {
+        const isMultiple = this.isMultiple();
+        const hasValue = isMultiple
+            ? (this.treeCheckable ? this.checkedKeys.length > 0 : this.selectedKeys.length > 0)
+            : this.selectedKeys.length > 0;
+        const showClear = this.allowClear && !this.disabled && this.hovering && hasValue;
+        const hostClasses = {
+            'x-tree-select': true,
+            'x-tree-select-open': this.open,
+            'x-tree-select-focused': this.focused,
+            'x-tree-select-disabled': this.disabled,
+            'x-tree-select-multiple': isMultiple,
+            'x-tree-select-single': !isMultiple,
+            'x-tree-select-show-search': this.showSearch,
+            'x-tree-select-loading': this.loading,
+            'x-tree-select-show-arrow': this.showArrow,
+            'x-tree-select-allow-clear': this.allowClear,
+            [`x-tree-select-${this.size}`]: true,
+            [`x-tree-select-${this.variant}`]: true,
+            [`x-tree-select-status-${this.status}`]: !!this.status,
+        };
+        return (h(Host, { key: 'c2189c02f2ec226991b0a268872a2480706cfe1e', class: hostClasses }, h("div", { key: 'bc108e641fc9644e564cbabb8158367d739710ac', ref: el => (this.wrapperRef = el), class: {
+                'x-tree-select-wrapper': true,
+                'disabled': this.disabled,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f647380e9ee4c0c1d09f504997f25a18cb09da16', class: {
+                'x-tree-select-selector': true,
+                'disabled': this.disabled,
+            }, onClick: this.handleSelectorClick }, isMultiple ? this.renderTags() : this.renderSingleSelector()), h("span", { key: 'b3256f205894e25fca6f6ce0b0de29e000d0c4d6', class: "x-tree-select-suffix" }, showClear && (h("span", { key: '39189ead6d64ec3a126327b152e70d25eb9405c3', class: "x-tree-select-clear", onClick: (e) => this.handleClear(e) }, this.renderClearIcon())), this.loading ? (h("span", { class: "x-tree-select-arrow", part: "arrow" }, this.renderLoadingIcon())) : this.showArrow ? (h("span", { class: { 'x-tree-select-arrow': true, 'x-tree-select-arrow-open': this.open }, part: "arrow" }, this.renderArrowIcon())) : null))));
+    }
+    static get is() { return "x-tree-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-tree-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-tree-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "treeData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectNode[]",
+                    "resolved": "TreeSelectNode[]",
+                    "references": {
+                        "TreeSelectNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectNode",
+                            "referenceLocation": "TreeSelectNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select treeData={[{ key: '1', title: 'Node' }]}></x-tree-select>"
+                        }],
+                    "text": "Tree data source."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select value=\"1\"></x-tree-select>"
+                        }],
+                    "text": "Current selected value(s)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select defaultValue=\"1\"></x-tree-select>"
+                        }],
+                    "text": "Default value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select placeholder=\"Select\"></x-tree-select>"
+                        }],
+                    "text": "Placeholder text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "translate('TreeSelect.placeholder', {}, 'Please select')"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select disabled></x-tree-select>"
+                        }],
+                    "text": "Whether disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select multiple></x-tree-select>"
+                        }],
+                    "text": "Whether allow multiple selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "treeCheckable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select treeCheckable></x-tree-select>"
+                        }],
+                    "text": "Whether show checkbox (treeCheckable mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-checkable",
+                "defaultValue": "false"
+            },
+            "treeCheckStrictly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select treeCheckStrictly></x-tree-select>"
+                        }],
+                    "text": "Check node precisely (parent-child independent)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-check-strictly",
+                "defaultValue": "false"
+            },
+            "showCheckedStrategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectShowCheckedStrategy",
+                    "resolved": "\"SHOW_ALL\" | \"SHOW_CHILD\" | \"SHOW_PARENT\"",
+                    "references": {
+                        "TreeSelectShowCheckedStrategy": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectShowCheckedStrategy",
+                            "referenceLocation": "TreeSelectShowCheckedStrategy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select showCheckedStrategy=\"SHOW_PARENT\"></x-tree-select>"
+                        }],
+                    "text": "Strategy for showing checked items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-checked-strategy",
+                "defaultValue": "'SHOW_CHILD'"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select allowClear></x-tree-select>"
+                        }],
+                    "text": "Whether allow clear."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "false"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select showSearch></x-tree-select>"
+                        }],
+                    "text": "Whether show search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "false"
+            },
+            "filterTreeNode": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(inputValue: string, treeNode: TreeSelectNode) => boolean",
+                    "resolved": "(inputValue: string, treeNode: TreeSelectNode) => boolean",
+                    "references": {
+                        "TreeSelectNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectNode",
+                            "referenceLocation": "TreeSelectNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select filterTreeNode={(v, n) => n.title.startsWith(v)}></x-tree-select>"
+                        }],
+                    "text": "Filter function for tree nodes."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "treeNodeFilterProp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select treeNodeFilterProp=\"title\"></x-tree-select>"
+                        }],
+                    "text": "Filter tree nodes by input value (property name)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-node-filter-prop",
+                "defaultValue": "'title'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "TreeSelectSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectSize",
+                            "referenceLocation": "TreeSelectSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select size=\"small\"></x-tree-select>"
+                        }],
+                    "text": "Size of the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "TreeSelectStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectStatus",
+                            "referenceLocation": "TreeSelectStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select status=\"error\"></x-tree-select>"
+                        }],
+                    "text": "Validation status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectPlacement",
+                    "resolved": "\"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "TreeSelectPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectPlacement",
+                            "referenceLocation": "TreeSelectPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select placement=\"bottomRight\"></x-tree-select>"
+                        }],
+                    "text": "Dropdown placement."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectVariant",
+                    "resolved": "\"borderless\" | \"filled\" | \"outlined\"",
+                    "references": {
+                        "TreeSelectVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectVariant",
+                            "referenceLocation": "TreeSelectVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select variant=\"filled\"></x-tree-select>"
+                        }],
+                    "text": "Variant style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select open></x-tree-select>"
+                        }],
+                    "text": "Whether the dropdown is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "maxTagCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select multiple maxTagCount={2}></x-tree-select>"
+                        }],
+                    "text": "Max tag count to show in multiple mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tag-count"
+            },
+            "maxTagPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select maxTagPlaceholder=\"+ more\"></x-tree-select>"
+                        }],
+                    "text": "Placeholder for max tag count."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tag-placeholder"
+            },
+            "treeLine": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select treeLine></x-tree-select>"
+                        }],
+                    "text": "Whether show tree line."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-line",
+                "defaultValue": "false"
+            },
+            "defaultExpandedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select defaultExpandedKeys={['1']}></x-tree-select>"
+                        }],
+                    "text": "Default expanded keys."
+                },
+                "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-select defaultExpandAll></x-tree-select>"
+                        }],
+                    "text": "Default expand all tree nodes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-expand-all",
+                "defaultValue": "false"
+            },
+            "treeDefaultExpandParent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select treeDefaultExpandParent={false}></x-tree-select>"
+                        }],
+                    "text": "Default expand parent nodes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-default-expand-parent",
+                "defaultValue": "true"
+            },
+            "treeExpandedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select treeExpandedKeys={['1']}></x-tree-select>"
+                        }],
+                    "text": "Expand on load."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select autofocus></x-tree-select>"
+                        }],
+                    "text": "Auto focus on mount."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select inputId=\"tree\"></x-tree-select>"
+                        }],
+                    "text": "Input ID."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select name=\"tree\"></x-tree-select>"
+                        }],
+                    "text": "Name for form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "listHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select listHeight={300}></x-tree-select>"
+                        }],
+                    "text": "Max height of dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-height",
+                "defaultValue": "256"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select loading></x-tree-select>"
+                        }],
+                    "text": "Whether loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "notFoundContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select notFoundContent=\"Empty\"></x-tree-select>"
+                        }],
+                    "text": "Text when no data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "not-found-content",
+                "defaultValue": "translate('TreeSelect.notFoundContent', {}, 'No data')"
+            },
+            "popupMatchSelectWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select popupMatchSelectWidth={false}></x-tree-select>"
+                        }],
+                    "text": "Whether dropdown matches selector width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-match-select-width",
+                "defaultValue": "true"
+            },
+            "fieldNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectFieldNames",
+                    "resolved": "TreeSelectFieldNames",
+                    "references": {
+                        "TreeSelectFieldNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectFieldNames",
+                            "referenceLocation": "TreeSelectFieldNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select fieldNames={{ title: 'label', value: 'id' }}></x-tree-select>"
+                        }],
+                    "text": "Custom field names mapping."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select showArrow={false}></x-tree-select>"
+                        }],
+                    "text": "Whether show arrow icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-arrow",
+                "defaultValue": "true"
+            },
+            "treeIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select treeIcon></x-tree-select>"
+                        }],
+                    "text": "Whether show tree icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-icon",
+                "defaultValue": "false"
+            },
+            "virtual": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select virtual={false}></x-tree-select>"
+                        }],
+                    "text": "Whether virtual scroll."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual",
+                "defaultValue": "true"
+            },
+            "labelInValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select labelInValue></x-tree-select>"
+                        }],
+                    "text": "Label in value (for controlled mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-in-value",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "hovering": {},
+            "searchValue": {},
+            "expandedKeys": {},
+            "selectedKeys": {},
+            "checkedKeys": {},
+            "halfCheckedKeys": {},
+            "dropdownWidth": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select onXChange={(ev) => console.log(ev.detail)}></x-tree-select>"
+                        }],
+                    "text": "Emitted when value changes."
+                },
+                "complexType": {
+                    "original": "TreeSelectChangeEventDetail",
+                    "resolved": "TreeSelectChangeEventDetail",
+                    "references": {
+                        "TreeSelectChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectChangeEventDetail",
+                            "referenceLocation": "TreeSelectChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select onXOpenChange={(ev) => console.log(ev.detail)}></x-tree-select>"
+                        }],
+                    "text": "Emitted when dropdown opens/closes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "xTreeExpand",
+                "name": "xTreeExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select onXTreeExpand={(ev) => console.log(ev.detail)}></x-tree-select>"
+                        }],
+                    "text": "Emitted when tree node expands/collapses."
+                },
+                "complexType": {
+                    "original": "TreeSelectExpandEventDetail",
+                    "resolved": "TreeSelectExpandEventDetail",
+                    "references": {
+                        "TreeSelectExpandEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectExpandEventDetail",
+                            "referenceLocation": "TreeSelectExpandEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSearch",
+                "name": "xSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select onXSearch={(ev) => console.log(ev.detail)}></x-tree-select>"
+                        }],
+                    "text": "Emitted on search."
+                },
+                "complexType": {
+                    "original": "TreeSelectSearchEventDetail",
+                    "resolved": "TreeSelectSearchEventDetail",
+                    "references": {
+                        "TreeSelectSearchEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/types.ts::TreeSelectSearchEventDetail",
+                            "referenceLocation": "TreeSelectSearchEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select onXFocus={(ev) => console.log(ev)}></x-tree-select>"
+                        }],
+                    "text": "Emitted on focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xBlur",
+                "name": "xBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select onXBlur={(ev) => console.log(ev)}></x-tree-select>"
+                        }],
+                    "text": "Emitted on blur."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDropdownVisibleChange",
+                "name": "xDropdownVisibleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select onXDropdownVisibleChange={(ev) => console.log(ev.detail)}></x-tree-select>"
+                        }],
+                    "text": "Emitted when dropdown visible changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "treeData",
+                "methodName": "treeDataChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "treeExpandedKeys",
+                "methodName": "treeExpandedKeysChanged"
+            }, {
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}