@xlabs-store/core 0.0.1

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

@@ -0,0 +1,890 @@
+import { h } from "@stencil/core";
+import { getIcon } from "../../../utils/config";
+/**
+ * Tree-select dropdown content component rendered in a portal layer.
+ */
+export class XTreeSelectDropdownContent {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Class map for dropdown wrapper.
+     * @example
+     * <x-tree-select-dropdown-content dropdownClasses={{ 'x-tree-dropdown': true }}></x-tree-select-dropdown-content>
+     */
+    dropdownClasses = {};
+    /**
+     * Inline style map for dropdown wrapper.
+     * @example
+     * <x-tree-select-dropdown-content dropdownStyle={{ width: '240px' }}></x-tree-select-dropdown-content>
+     */
+    dropdownStyle = {};
+    /**
+     * Callback to pass dropdown element ref.
+     * @example
+     * <x-tree-select-dropdown-content setDropdownRef={(el) => console.log(el)}></x-tree-select-dropdown-content>
+     */
+    setDropdownRef;
+    /**
+     * Tree data.
+     * @example
+     * <x-tree-select-dropdown-content treeData={[{ title: 'A', value: 'a' }]}></x-tree-select-dropdown-content>
+     */
+    treeData = [];
+    /**
+     * Currently selected values.
+     * @example
+     * <x-tree-select-dropdown-content selectedValues={['a']}></x-tree-select-dropdown-content>
+     */
+    selectedValues = [];
+    /**
+     * Currently expanded node keys.
+     * @example
+     * <x-tree-select-dropdown-content expandedKeys={['a']}></x-tree-select-dropdown-content>
+     */
+    expandedKeys = [];
+    /**
+     * Checked keys for treeCheckable mode.
+     * @example
+     * <x-tree-select-dropdown-content checkedKeys={['a']}></x-tree-select-dropdown-content>
+     */
+    checkedKeys = [];
+    /**
+     * Half-checked (indeterminate) keys.
+     * @example
+     * <x-tree-select-dropdown-content halfCheckedKeys={['a']}></x-tree-select-dropdown-content>
+     */
+    halfCheckedKeys = [];
+    /**
+     * Whether multiple selection is enabled.
+     * @example
+     * <x-tree-select-dropdown-content multiple></x-tree-select-dropdown-content>
+     */
+    multiple = false;
+    /**
+     * Whether tree nodes are checkable.
+     * @example
+     * <x-tree-select-dropdown-content treeCheckable></x-tree-select-dropdown-content>
+     */
+    treeCheckable = false;
+    /**
+     * Whether to show tree line.
+     * @example
+     * <x-tree-select-dropdown-content treeLine></x-tree-select-dropdown-content>
+     */
+    treeLine = false;
+    /**
+     * Custom field names.
+     * @example
+     * <x-tree-select-dropdown-content fieldNames={{ label: 'name', value: 'id', children: 'nodes' }}></x-tree-select-dropdown-content>
+     */
+    fieldNames = { value: 'value', label: 'label', children: 'children' };
+    /**
+     * Content shown when no data.
+     * @example
+     * <x-tree-select-dropdown-content notFoundContent="Empty"></x-tree-select-dropdown-content>
+     */
+    notFoundContent = 'No data';
+    /**
+     * Search value for highlighting matches.
+     * @example
+     * <x-tree-select-dropdown-content searchValue="ap"></x-tree-select-dropdown-content>
+     */
+    searchValue = '';
+    /**
+     * Custom filter function.
+     * @example
+     * <x-tree-select-dropdown-content filterTreeNode={(v, n) => n.title?.includes(v)}></x-tree-select-dropdown-content>
+     */
+    filterTreeNode;
+    // ==================== Events ====================
+    /**
+     * Emitted when a node is clicked (for selection).
+     * @example
+     * <x-tree-select-dropdown-content onXNodeClick={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>
+     */
+    xNodeClick;
+    /**
+     * Emitted when a node is expanded/collapsed.
+     * @example
+     * <x-tree-select-dropdown-content onXNodeExpand={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>
+     */
+    xNodeExpand;
+    /**
+     * Emitted when a checkbox is toggled.
+     * @example
+     * <x-tree-select-dropdown-content onXNodeCheck={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>
+     */
+    xNodeCheck;
+    // ==================== Refs ====================
+    /**
+     * Dropdown element reference.
+     */
+    dropdownEl = null;
+    // ==================== Lifecycle ====================
+    componentDidLoad() {
+        this.setDropdownRef?.(this.dropdownEl);
+    }
+    disconnectedCallback() {
+        this.setDropdownRef?.(null);
+    }
+    // ==================== Private Methods - Refs ====================
+    /**
+     * Capture dropdown ref and forward to callback.
+     * @param el - Dropdown element.
+     * @returns void
+     */
+    setRef = (el) => {
+        this.dropdownEl = el;
+        this.setDropdownRef?.(el);
+    };
+    // ==================== Private Methods - Field Accessors ====================
+    /**
+     * Get node value using field mapping.
+     * @param node - Tree node.
+     * @returns string
+     */
+    getNodeValue(node) {
+        if (!node)
+            return '';
+        const field = this.fieldNames?.value || 'value';
+        return node[field] ?? node.key ?? '';
+    }
+    /**
+     * Get node title using field mapping.
+     * @param node - Tree node.
+     * @returns string
+     */
+    getNodeTitle(node) {
+        if (!node)
+            return '';
+        const field = this.fieldNames?.label || 'label';
+        return node[field] ?? node.title ?? '';
+    }
+    /**
+     * Get node children using field mapping.
+     * @param node - Tree node.
+     * @returns TreeSelectNode[] | undefined
+     */
+    getNodeChildren(node) {
+        if (!node)
+            return undefined;
+        const field = this.fieldNames?.children || 'children';
+        return node[field];
+    }
+    // ==================== Private Methods - State Checks ====================
+    /**
+     * Check expanded state for node.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    isNodeExpanded(node) {
+        if (!node)
+            return false;
+        const key = node.key ?? this.getNodeValue(node);
+        return this.expandedKeys?.includes(key) ?? false;
+    }
+    /**
+     * Check selected state for node.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    isNodeSelected(node) {
+        if (!node)
+            return false;
+        const value = this.getNodeValue(node);
+        return this.selectedValues?.includes(value) ?? false;
+    }
+    /**
+     * Check checked state for node.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    isNodeChecked(node) {
+        if (!node)
+            return false;
+        const key = node.key ?? this.getNodeValue(node);
+        return this.checkedKeys?.includes(key) ?? false;
+    }
+    /**
+     * Check half-checked state for node.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    isNodeHalfChecked(node) {
+        if (!node)
+            return false;
+        const key = node.key ?? this.getNodeValue(node);
+        return this.halfCheckedKeys?.includes(key) ?? false;
+    }
+    /**
+     * Check if node has children.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    hasChildren(node) {
+        if (!node)
+            return false;
+        if (node.isLeaf)
+            return false;
+        const children = this.getNodeChildren(node);
+        return !!children && children.length > 0;
+    }
+    /**
+     * Determine if node matches current filter.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    matchesFilter(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 any children match filter.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    hasMatchedChildren(node) {
+        const children = this.getNodeChildren(node);
+        if (!children)
+            return false;
+        return children.some(child => this.matchesFilter(child) || this.hasMatchedChildren(child));
+    }
+    /**
+     * Determine whether node should be shown.
+     * Note: The treeData passed to this component is already filtered by the parent.
+     * We only need to check if we should show based on internal visibility logic,
+     * but for search, we trust the parent's filtering.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    shouldShowNode(node) {
+        // If treeData is already filtered, we should show everything in it.
+        // However, if we want to support highlighting or other features, we might need to check.
+        // But given the parent handles filtering, we can just return true here.
+        return !!node;
+    }
+    // ==================== Private Methods - Event Handlers ====================
+    /**
+     * Handle node click and emit selection event.
+     * @param node - Tree node.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleNodeClick = (node, e) => {
+        e.stopPropagation();
+        if (node.disabled)
+            return;
+        const value = this.getNodeValue(node);
+        this.xNodeClick.emit({ node, value });
+    };
+    /**
+     * Handle node expand/collapse.
+     * @param node - Tree node.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleNodeExpand = (node, e) => {
+        e.stopPropagation();
+        const isExpanded = this.isNodeExpanded(node);
+        this.xNodeExpand.emit({ node, expanded: !isExpanded });
+    };
+    /**
+     * Handle node checkbox toggle.
+     * @param node - Tree node.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleNodeCheck = (node, e) => {
+        e.stopPropagation();
+        if (node.disabled || node.disableCheckbox)
+            return;
+        const isChecked = this.isNodeChecked(node);
+        this.xNodeCheck.emit({ node, checked: !isChecked });
+    };
+    // ==================== Render Methods ====================
+    /**
+     * Render indentation units for tree node level.
+     * @param level - Tree depth level.
+     * @returns JSX.Element | null
+     */
+    renderIndent(level) {
+        if (level === 0)
+            return null;
+        const indentUnits = [];
+        for (let i = 0; i < level; i++) {
+            indentUnits.push(h("span", { class: "x-tree-indent-unit", key: i }));
+        }
+        return (h("span", { class: "x-tree-indent" }, indentUnits));
+    }
+    /**
+     * Render expand/collapse switcher.
+     * @param node - Tree node.
+     * @returns JSX.Element
+     */
+    renderSwitcher(node) {
+        const hasChildNodes = this.hasChildren(node);
+        const isExpanded = this.isNodeExpanded(node);
+        const switcherClasses = {
+            'x-tree-switcher': true,
+            'x-tree-switcher-open': hasChildNodes && isExpanded,
+            'x-tree-switcher-close': hasChildNodes && !isExpanded,
+            'x-tree-switcher-leaf': !hasChildNodes,
+        };
+        return (h("span", { class: switcherClasses, onClick: (e) => hasChildNodes && this.handleNodeExpand(node, e) }, h("span", { class: "x-tree-switcher-icon" }, h("x-icon", { name: getIcon('arrowRight') }))));
+    }
+    /**
+     * Render checkbox for treeCheckable mode.
+     * @param node - Tree node.
+     * @returns JSX.Element
+     */
+    renderCheckbox(node) {
+        const isChecked = this.isNodeChecked(node);
+        const isHalfChecked = this.isNodeHalfChecked(node);
+        const isDisabled = node.disabled || node.disableCheckbox;
+        const checkboxClasses = {
+            'x-tree-checkbox': true,
+            'x-tree-checkbox-checked': isChecked,
+            'x-tree-checkbox-indeterminate': !isChecked && isHalfChecked,
+            'x-tree-checkbox-disabled': isDisabled,
+        };
+        return (h("span", { class: checkboxClasses, onClick: (e) => this.handleNodeCheck(node, e) }, h("span", { class: "x-tree-checkbox-inner" })));
+    }
+    /**
+     * Render node title and optional icon.
+     * @param node - Tree node.
+     * @returns JSX.Element
+     */
+    renderNodeContent(node) {
+        const title = this.getNodeTitle(node);
+        return (h("span", { class: "x-tree-node-content-wrapper" }, node.icon && (h("span", { class: "x-tree-iconEle", innerHTML: node.icon })), h("span", { class: "x-tree-title" }, title)));
+    }
+    /**
+     * Render a tree node and its children.
+     * @param node - Tree node.
+     * @param level - Depth level.
+     * @returns JSX.Element | null
+     */
+    renderTreeNode(node, level) {
+        if (!node)
+            return null;
+        if (!this.shouldShowNode(node))
+            return null;
+        const isExpanded = this.isNodeExpanded(node);
+        const isSelected = this.isNodeSelected(node);
+        const isChecked = this.isNodeChecked(node);
+        const hasChildNodes = this.hasChildren(node);
+        const children = this.getNodeChildren(node);
+        const nodeKey = node.key ?? this.getNodeValue(node);
+        const nodeClasses = {
+            'x-tree-treenode': true,
+            'x-tree-treenode-disabled': !!node.disabled,
+            'x-tree-treenode-selected': !this.treeCheckable && isSelected,
+            'x-tree-treenode-checked': this.treeCheckable && isChecked,
+        };
+        return (h("div", { class: "x-tree-treenode-wrapper", key: nodeKey }, h("div", { class: nodeClasses, onClick: (e) => !this.treeCheckable && this.handleNodeClick(node, e) }, this.renderIndent(level), this.renderSwitcher(node), this.treeCheckable && this.renderCheckbox(node), this.renderNodeContent(node)), hasChildNodes && isExpanded && children && (h("div", { class: "x-tree-child-tree" }, children.map(child => this.renderTreeNode(child, level + 1))))));
+    }
+    /**
+     * Render tree nodes recursively.
+     * @param nodes - Node list.
+     * @param level - Depth level.
+     * @returns Array<JSX.Element | null>
+     */
+    renderTree(nodes, level = 0) {
+        if (!nodes || !Array.isArray(nodes))
+            return [];
+        return nodes
+            .filter(node => node != null)
+            .map(node => this.renderTreeNode(node, level))
+            .filter(Boolean);
+    }
+    /**
+     * Render empty state when no data matches.
+     * @returns JSX.Element
+     */
+    renderEmpty() {
+        return (h("div", { class: "x-tree-select-empty" }, h("div", { class: "x-tree-select-empty-image" }, h("svg", { viewBox: "0 0 64 41" }, h("g", { transform: "translate(0 1)", fill: "none", "fill-rule": "evenodd" }, h("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), h("g", { "fill-rule": "nonzero", stroke: "#d9d9d9" }, h("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), h("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" }))))), h("div", { class: "x-tree-select-empty-description" }, this.notFoundContent)));
+    }
+    /**
+     * Render dropdown tree content.
+     * @returns JSX.Element
+     * @example
+     * <x-tree-select-dropdown-content treeData={[{ title: 'A', value: 'a' }]}></x-tree-select-dropdown-content>
+     */
+    render() {
+        const hasData = this.treeData && this.treeData.length > 0;
+        const hasVisibleData = hasData && this.treeData.some(node => this.shouldShowNode(node));
+        const treeClasses = {
+            'x-tree-select-tree': true,
+            'x-tree-line': this.treeLine,
+        };
+        return (h("div", { key: 'baab5dc7e243c61b783e67cd5452279720c25feb', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown" }, !hasVisibleData ? (this.renderEmpty()) : (h("div", { class: treeClasses }, this.renderTree(this.treeData)))));
+    }
+    static get is() { return "x-tree-select-dropdown-content"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tree-select-dropdown-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tree-select-dropdown-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dropdownClasses": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectDropdownClassMap",
+                    "resolved": "TreeSelectDropdownClassMap",
+                    "references": {
+                        "TreeSelectDropdownClassMap": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeSelectDropdownClassMap",
+                            "referenceLocation": "TreeSelectDropdownClassMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content dropdownClasses={{ 'x-tree-dropdown': true }}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Class map for dropdown wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "dropdownStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectDropdownStyleMap",
+                    "resolved": "TreeSelectDropdownStyleMap",
+                    "references": {
+                        "TreeSelectDropdownStyleMap": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeSelectDropdownStyleMap",
+                            "referenceLocation": "TreeSelectDropdownStyleMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content dropdownStyle={{ width: '240px' }}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Inline style map for dropdown wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "setDropdownRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectDropdownRefCallback",
+                    "resolved": "(el: HTMLDivElement) => void",
+                    "references": {
+                        "TreeSelectDropdownRefCallback": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeSelectDropdownRefCallback",
+                            "referenceLocation": "TreeSelectDropdownRefCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content setDropdownRef={(el) => console.log(el)}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Callback to pass dropdown element ref."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "treeData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectNode[]",
+                    "resolved": "TreeSelectNode[]",
+                    "references": {
+                        "TreeSelectNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeSelectNode",
+                            "referenceLocation": "TreeSelectNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content treeData={[{ title: 'A', value: 'a' }]}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Tree data."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedValues": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content selectedValues={['a']}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Currently selected values."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "expandedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content expandedKeys={['a']}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Currently expanded node keys."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "checkedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content checkedKeys={['a']}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Checked keys for treeCheckable mode."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "halfCheckedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content halfCheckedKeys={['a']}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Half-checked (indeterminate) keys."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content multiple></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Whether multiple selection is enabled."
+                },
+                "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-dropdown-content treeCheckable></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Whether tree nodes are checkable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-checkable",
+                "defaultValue": "false"
+            },
+            "treeLine": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content treeLine></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Whether to show tree line."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-line",
+                "defaultValue": "false"
+            },
+            "fieldNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeSelectFieldNames",
+                    "resolved": "TreeSelectFieldNames",
+                    "references": {
+                        "TreeSelectFieldNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeSelectFieldNames",
+                            "referenceLocation": "TreeSelectFieldNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content fieldNames={{ label: 'name', value: 'id', children: 'nodes' }}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Custom field names."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{ value: 'value', label: 'label', children: 'children' }"
+            },
+            "notFoundContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content notFoundContent=\"Empty\"></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Content shown when no data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "not-found-content",
+                "defaultValue": "'No data'"
+            },
+            "searchValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content searchValue=\"ap\"></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Search value for highlighting matches."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-value",
+                "defaultValue": "''"
+            },
+            "filterTreeNode": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(inputValue: string, node: TreeSelectNode) => boolean",
+                    "resolved": "(inputValue: string, node: TreeSelectNode) => boolean",
+                    "references": {
+                        "TreeSelectNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeSelectNode",
+                            "referenceLocation": "TreeSelectNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content filterTreeNode={(v, n) => n.title?.includes(v)}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Custom filter function."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xNodeClick",
+                "name": "xNodeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content onXNodeClick={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Emitted when a node is clicked (for selection)."
+                },
+                "complexType": {
+                    "original": "TreeNodeClickDetail",
+                    "resolved": "TreeNodeClickDetail",
+                    "references": {
+                        "TreeNodeClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeNodeClickDetail",
+                            "referenceLocation": "TreeNodeClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xNodeExpand",
+                "name": "xNodeExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content onXNodeExpand={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Emitted when a node is expanded/collapsed."
+                },
+                "complexType": {
+                    "original": "TreeNodeExpandDetail",
+                    "resolved": "TreeNodeExpandDetail",
+                    "references": {
+                        "TreeNodeExpandDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeNodeExpandDetail",
+                            "referenceLocation": "TreeNodeExpandDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xNodeCheck",
+                "name": "xNodeCheck",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tree-select-dropdown-content onXNodeCheck={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>"
+                        }],
+                    "text": "Emitted when a checkbox is toggled."
+                },
+                "complexType": {
+                    "original": "TreeNodeCheckDetail",
+                    "resolved": "TreeNodeCheckDetail",
+                    "references": {
+                        "TreeNodeCheckDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tree-select/tree-select-dropdown-content/types.ts::TreeNodeCheckDetail",
+                            "referenceLocation": "TreeNodeCheckDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}