@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1841 @@
+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 { CascaderService } from "../../utils/cascader.service";
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+/**
+ * Cascader component for selecting from a multi-level hierarchy.
+ * Supports single/multiple selection, custom field names, searching, and async loading.
+ */
+export class XCascader {
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Options data to be displayed in the cascader.
+     * @type {CascaderOption[]}
+     * @example
+     * <x-cascader options={[
+     *   { value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou' }] }
+     * ]} />
+     */
+    options = [];
+    /**
+     * Selected value (array of values representing the path).
+     * For single mode: string[] like ['zhejiang', 'hangzhou']
+     * For multiple mode: string[][] like [['zhejiang', 'hangzhou'], ['jiangsu', 'nanjing']]
+     * @type {CascaderValue | null}
+     * @example
+     * <x-cascader value={['zhejiang', 'hangzhou']} />
+     * <x-cascader multiple value={[['zhejiang', 'hangzhou'], ['jiangsu', 'nanjing']]} />
+     */
+    value = null;
+    /**
+     * Initial selected value when the component is first mounted.
+     * @type {CascaderValue | null}
+     * @example
+     * <x-cascader defaultValue={['zhejiang', 'hangzhou']} />
+     */
+    defaultValue = null;
+    /**
+     * Placeholder text displayed when no value is selected.
+     * @type {string}
+     * @default 'Please select'
+     * @example
+     * <x-cascader placeholder="Select address" />
+     */
+    placeholder = translate('Cascader.placeholder', {}, 'Please select');
+    /**
+     * Whether the cascader component is disabled and non-interactive.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-cascader disabled />
+     */
+    disabled = false;
+    /**
+     * Whether to show a clear button that allows resetting the selection.
+     * @type {boolean}
+     * @default true
+     * @example
+     * <x-cascader allowClear={false} />
+     */
+    allowClear = true;
+    /**
+     * Whether to show a search input for filtering options.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-cascader showSearch />
+     */
+    showSearch = false;
+    /**
+     * Custom mapping for field names in the options data.
+     * @type {CascaderFieldNames}
+     * @default { value: 'value', label: 'label', children: 'children' }
+     * @example
+     * <x-cascader fieldNames={{ value: 'id', label: 'name', children: 'items' }} />
+     */
+    fieldNames = { value: 'value', label: 'label', children: 'children' };
+    /**
+     * Size of the cascader input field.
+     * @type {'large' | 'middle' | 'small'}
+     * @default 'middle'
+     * @example
+     * <x-cascader size="small" />
+     */
+    size = 'middle';
+    /**
+     * Current validation status of the component.
+     * @type {'error' | 'warning'}
+     * @example
+     * <x-cascader status="error" />
+     */
+    status;
+    /**
+     * Preferred placement of the dropdown relative to the input.
+     * @type {CascaderPlacement}
+     * @default 'bottomLeft'
+     * @example
+     * <x-cascader placement="topRight" />
+     */
+    placement = 'bottomLeft';
+    /**
+     * Visual variant style of the cascader input.
+     * @type {'outlined' | 'borderless' | 'filled'}
+     * @default 'outlined'
+     * @example
+     * <x-cascader variant="filled" />
+     */
+    variant = 'outlined';
+    /**
+     * Interaction type that triggers the expansion of sub-menus.
+     * @type {'click' | 'hover'}
+     * @default 'click'
+     * @example
+     * <x-cascader expandTrigger="hover" />
+     */
+    expandTrigger = 'click';
+    /**
+     * Whether to update the value on selecting each level of the hierarchy.
+     * If false, only selecting leaf nodes updates the value.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-cascader changeOnSelect />
+     */
+    changeOnSelect = false;
+    /**
+     * Whether to enable multi-selection mode using checkboxes.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-cascader multiple />
+     */
+    multiple = false;
+    /**
+     * Maximum number of selected tags displayed in the input (for multiple mode).
+     * 'responsive' will automatically hide overflowing tags.
+     * @type {number | 'responsive'}
+     * @default 'responsive'
+     * @example
+     * <x-cascader multiple maxTagCount={2} />
+     */
+    maxTagCount = 'responsive';
+    /**
+     * Controlled visibility state of the dropdown menu.
+     * @type {boolean}
+     * @example
+     * <x-cascader open={true} />
+     */
+    open;
+    /**
+     * Whether the component should automatically receive focus upon mounting.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-cascader autofocus />
+     */
+    autofocus = false;
+    /**
+     * Custom content to display when no options match the search or current selection.
+     * @type {string}
+     * @default 'No data'
+     * @example
+     * <x-cascader notFoundContent="No results found" />
+     */
+    notFoundContent = translate('Cascader.notFoundContent', {}, 'No data');
+    /**
+     * Whether the component is currently in a loading state.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-cascader loading />
+     */
+    loading = false;
+    /**
+     * Character(s) used to separate breadcrumb labels in the selected path.
+     * @type {string}
+     * @default ' / '
+     * @example
+     * <x-cascader displaySeparator=" > " />
+     */
+    displaySeparator = ' / ';
+    // ========================================
+    // STATE
+    // ========================================
+    /**
+     * Internal visibility state of the dropdown.
+     * @type {boolean}
+     */
+    isOpen = false;
+    /**
+     * Current hierarchy of options being displayed in the dropdown columns.
+     * @type {CascaderOption[][]}
+     */
+    activeOptions = [];
+    /**
+     * The list of options representing the currently selected path.
+     * @type {CascaderOption[]}
+     */
+    selectedPath = [];
+    /**
+     * The list of options representing the path currently under mouse hover.
+     * @type {CascaderOption[]}
+     */
+    hoveredPath = [];
+    /**
+     * Current value of the search input field.
+     * @type {string}
+     */
+    searchValue = '';
+    /**
+     * Options filtered by the search query.
+     * @type {CascaderOption[][]}
+     */
+    filteredOptions = [];
+    /**
+     * Whether the component currently has keyboard focus.
+     * @type {boolean}
+     */
+    isFocused = false;
+    /**
+     * Whether the mouse is currently hovering over the main input area.
+     * @type {boolean}
+     */
+    hovering = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when the selected value changes.
+     * @event xChange
+     * @example
+     * <x-cascader onXChange={(ev) => console.log('Selected:', ev.detail.value)} />
+     */
+    xChange;
+    /**
+     * Emitted when the user types in the search input.
+     * @event xSearch
+     * @example
+     * <x-cascader onXSearch={(ev) => console.log('Searching:', ev.detail.value)} />
+     */
+    xSearch;
+    /**
+     * Emitted when the dropdown menu visibility changes.
+     * @event xDropdownVisibleChange
+     * @example
+     * <x-cascader onXDropdownVisibleChange={(ev) => console.log('Visible:', ev.detail.visible)} />
+     */
+    xDropdownVisibleChange;
+    /**
+     * Emitted when a sub-menu needs to load data asynchronously.
+     * @event xLoadData
+     * @example
+     * <x-cascader onXLoadData={(ev) => handleLoadData(ev.detail.option)} />
+     */
+    xLoadData;
+    /**
+     * Emitted when the component receives focus.
+     * @event xFocus
+     */
+    xFocus;
+    /**
+     * Emitted when the component loses focus.
+     * @event xBlur
+     */
+    xBlur;
+    // ========================================
+    // REFS
+    // ========================================
+    wrapperRef;
+    portalInstance = null;
+    inputRef;
+    dropdownEl = null;
+    /**
+     * Cascader Service Instance
+     */
+    get cascaderService() {
+        return new CascaderService({
+            value: this.fieldNames?.value || 'value',
+            label: this.fieldNames?.label || 'label',
+            children: this.fieldNames?.children || 'children'
+        });
+    }
+    /**
+     * Destroys the portal instance and cleans up references.
+     * This is called when the dropdown is closed or the component is destroyed to prevent memory leaks.
+     * @returns {void}
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+        this.dropdownEl = null;
+    }
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Stencil lifecycle: Component is about to load.
+     * Initializes default values and synchronizes the initial path.
+     * @returns {void}
+     */
+    componentWillLoad() {
+        // If defaultValue is provided and value is not set, use defaultValue
+        if (this.defaultValue && !this.value) {
+            this.value = this.defaultValue;
+        }
+        // Set up initial root options
+        this.initActiveOptions();
+        // Resolve the full path of option objects from the value array
+        this.syncValueToPath();
+        // Sync controlled open prop with internal state
+        if (this.open !== undefined) {
+            this.isOpen = this.open;
+        }
+    }
+    /**
+     * Stencil lifecycle: Component has loaded.
+     * Handles automatic focusing if required by the `autofocus` prop.
+     * @returns {void}
+     */
+    componentDidLoad() {
+        if (this.autofocus) {
+            this.setFocus();
+        }
+    }
+    /**
+     * Stencil lifecycle: Component is removed from the DOM.
+     * Ensures the dropdown overlay is cleaned up.
+     * @returns {void}
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    /**
+     * Watches for changes in the `options` prop.
+     * Re-initializes active options and synchronizes the selection path.
+     * @returns {void}
+     */
+    watchOptions() {
+        this.initActiveOptions();
+        this.syncValueToPath();
+    }
+    /**
+     * Watches for changes in the `value` prop.
+     * Synchronizes the displayed path when the value is updated externally.
+     * @returns {void}
+     */
+    watchValue() {
+        this.syncValueToPath();
+    }
+    /**
+     * Watches for changes in the `open` prop.
+     * Synchronizes the controlled visibility state with the internal state.
+     * @param {boolean | undefined} newValue - The new visibility state.
+     * @returns {void}
+     */
+    watchOpen(newValue) {
+        if (newValue !== undefined) {
+            this.isOpen = newValue;
+        }
+    }
+    /**
+     * Watches for changes in the internal `isOpen` state.
+     * Triggers dropdown visibility event and handles portal creation/destruction.
+     * @param {boolean} newValue - The new internal visibility state.
+     * @returns {void}
+     */
+    isOpenChanged(newValue) {
+        // Notify external listeners about visibility changes
+        this.xDropdownVisibleChange.emit({ visible: newValue });
+        if (newValue) {
+            // Create or update the overlay portal if opening
+            this.createOrUpdatePortal();
+        }
+        else {
+            // Clean up the portal and reset search if closing
+            this.destroyPortal();
+            if (this.showSearch) {
+                this.searchValue = '';
+            }
+        }
+    }
+    /**
+     * Watches for changes in the `searchValue` state.
+     * Filters the options tree based on the user's input.
+     * @param {string} newValue - The new search query.
+     * @returns {void}
+     */
+    watchSearchValue(newValue) {
+        if (!this.showSearch)
+            return;
+        if (newValue) {
+            // Filter options and display only matching ones
+            const filteredOptions = this.cascaderService.filterOptions(this.options, newValue);
+            if (filteredOptions.length > 0) {
+                // Automatically expand the path to the first matched option
+                const matchingPath = this.cascaderService.getFirstMatchingPath(filteredOptions, newValue);
+                this.hoveredPath = matchingPath;
+                this.activeOptions = this.cascaderService.getActiveOptionsFromPath(filteredOptions, matchingPath);
+            }
+            else {
+                // No match, just show empty
+                this.activeOptions = [[]];
+                this.hoveredPath = [];
+            }
+        }
+        else {
+            // If search is cleared, restore the options tree
+            this.syncValueToPath();
+        }
+        // Update the portal content
+        this.updatePortal();
+    }
+    // ========================================
+    // LISTENERS
+    // ========================================
+    /**
+     * Listens for clicks on the window to detect outside clicks.
+     * Closes the dropdown if the user clicks outside the component and its portal.
+     * @param {MouseEvent} ev - The click event.
+     * @returns {void}
+     */
+    handleWindowClick(ev) {
+        // If dropdown is already closed, do nothing
+        if (!this.isOpen)
+            return;
+        const path = ev.composedPath();
+        const isInsideComponent = path.includes(this.el);
+        const portalEl = this.portalInstance?.getElement();
+        const isInsidePortal = portalEl ? path.includes(portalEl) : false;
+        // Check if the click happened outside the component trigger and the dropdown overlay
+        if (!isInsideComponent && !isInsidePortal) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Listens for keyboard events to support accessibility and navigation.
+     * Support Escape, Enter, and ArrowDown for common cascading selection interactions.
+     * @param {KeyboardEvent} event - The keyboard event.
+     * @returns {void}
+     */
+    handleKeyDown(event) {
+        // Ignore keyboard input if component is disabled
+        if (this.disabled)
+            return;
+        switch (event.key) {
+            case 'Escape':
+                // Close dropdown on Escape key
+                this.closeDropdown();
+                break;
+            case 'Enter':
+                // Open dropdown on Enter if closed
+                if (!this.isOpen) {
+                    this.openDropdown();
+                }
+                break;
+            case 'ArrowDown':
+                // Open dropdown on ArrowDown if closed
+                if (!this.isOpen) {
+                    this.openDropdown();
+                }
+                // Prevent page scrolling when navigating the menu
+                event.preventDefault();
+                break;
+        }
+    }
+    // ========================================
+    // PUBLIC METHODS
+    // ========================================
+    /**
+     * Sets focus on the cascader input field.
+     * This is a public method that can be called via a reference to the component.
+     * @returns {Promise<void>}
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+    }
+    /**
+     * Removes focus from the cascader input field.
+     * This is a public method that can be called via a reference to the component.
+     * @returns {Promise<void>}
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+    }
+    // ========================================
+    // PORTAL MANAGEMENT
+    // ========================================
+    /**
+     * Creates or updates the portal instance for the dropdown menu.
+     * Positions the dropdown relative to the component wrapper.
+     * @returns {void}
+     */
+    createOrUpdatePortal() {
+        if (!this.wrapperRef)
+            return;
+        const dropdownContent = this.buildDropdownElement();
+        if (this.portalInstance) {
+            // Update existing portal with new state and content
+            this.portalInstance.update({
+                open: true,
+                content: dropdownContent,
+                target: this.wrapperRef,
+                placement: this.placement,
+            });
+        }
+        else {
+            // Create a new portal instance if none exists
+            this.portalInstance = PortalController.create({
+                open: true,
+                content: dropdownContent,
+                target: this.wrapperRef,
+                placement: this.placement,
+            });
+        }
+    }
+    /**
+     * Forces an update of the content and position of the existing portal.
+     * @returns {void}
+     */
+    updatePortal() {
+        if (!this.portalInstance || !this.wrapperRef)
+            return;
+        this.portalInstance.update({
+            open: true,
+            content: this.buildDropdownElement(),
+            target: this.wrapperRef,
+            placement: this.placement,
+        });
+    }
+    // ========================================
+    // BUILD DOM METHODS (for Portal)
+    // ========================================
+    /**
+     * Builds and configures the dropdown content element.
+     * @returns {HTMLElement} The prepared x-cascader-dropdown-content element.
+     */
+    buildDropdownElement() {
+        if (!this.dropdownEl) {
+            this.dropdownEl = document.createElement('x-cascader-dropdown-content');
+            // Listen for item click and hover events - Add only once
+            this.dropdownEl.addEventListener('xItemClick', ((e) => {
+                const { option, depth } = e.detail;
+                this.handleOptionClick(option, depth);
+            }));
+            this.dropdownEl.addEventListener('xItemHover', ((e) => {
+                const { option, depth } = e.detail;
+                this.handleOptionHover(option, depth);
+            }));
+        }
+        const dropdownEl = this.dropdownEl;
+        // Set classes
+        const classes = {
+            'x-cascader-dropdown': true,
+            'x-cascader-dropdown-hidden': !this.isOpen,
+            [`x-cascader-dropdown-placement-${this.placement}`]: true,
+        };
+        // Set styles (empty, let SCSS handle it)
+        const styles = {};
+        dropdownEl.dropdownClasses = classes;
+        dropdownEl.dropdownStyle = styles;
+        dropdownEl.activeOptions = this.activeOptions;
+        dropdownEl.selectedPath = this.selectedPath;
+        dropdownEl.hoveredPath = this.hoveredPath;
+        dropdownEl.multiple = this.multiple;
+        dropdownEl.expandTrigger = this.expandTrigger;
+        dropdownEl.fieldNames = this.fieldNames;
+        dropdownEl.notFoundContent = this.notFoundContent;
+        return dropdownEl;
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Initializes the active options with the root level options.
+     * This sets the first column of the cascader dropdown.
+     * @returns {void}
+     */
+    initActiveOptions() {
+        if (this.options && this.options.length > 0) {
+            // Set the root options as the first column
+            this.activeOptions = [this.options];
+        }
+        else {
+            // Reset if no options provided
+            this.activeOptions = [];
+        }
+    }
+    /**
+     * Synchronizes the internal path representation based on the current `value`.
+     * Resolves component options objects from the value array (which usually contains only IDs/values).
+     *
+     * Flow:
+     * 1. Checks if `value` is present.
+     * 2. Determines the `valuePath`:
+     *    - For multiple mode: takes the first array of values (currently supports display of one path in input).
+     *    - For single mode: takes the value array directly.
+     * 3. Calls `findOptionPath` to resolve the full path of option objects.
+     * 4. Updates `selectedPath`.
+     * 5. Updates `activeOptions`:
+     *    - Reconstructs the columns of options to display based on the selected path.
+     *
+     * @returns {void}
+     */
+    syncValueToPath() {
+        // If no value is set, clear the selected path
+        if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
+            this.selectedPath = [];
+            this.hoveredPath = [];
+            this.initActiveOptions();
+            return;
+        }
+        // Resolve the relevant path array from either single or multiple selection modes
+        const valuePath = this.multiple
+            ? this.value[0] || []
+            : this.value;
+        // Find the full option objects matching the values in the path
+        const path = this.cascaderService.findOptionPath(this.options, valuePath);
+        this.selectedPath = path;
+        // Set hovered path to match selected path so that the menu is expanded correctly
+        this.hoveredPath = [...path];
+        // Update the multi-column menu display to match the selected path
+        if (path.length > 0) {
+            this.activeOptions = this.cascaderService.getActiveOptionsFromPath(this.options, path);
+        }
+        else {
+            this.initActiveOptions();
+        }
+    }
+    /**
+     * Helper to get children from option
+     */
+    getOptionChildren(option) {
+        return this.cascaderService.getChildren(option);
+    }
+    /**
+     * Opens the dropdown menu.
+     */
+    openDropdown() {
+        if (this.disabled)
+            return;
+        this.isOpen = true;
+    }
+    /**
+     * Closes the dropdown menu.
+     */
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    /**
+     * Toggles the dropdown menu visibility.
+     */
+    toggleDropdown() {
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    /**
+     * Handles click events on an option item.
+     * Manages hierarchy expansion, async loading, and selection updates.
+     *
+     * Flow:
+     * 1. Ignore if option is disabled.
+     * 2. Determine if the option has children.
+     * 3. Update the hovered/selected path state.
+     * 4. If children exist:
+     *    - Expand next level in activeOptions.
+     *    - Load data if leaf is false but children are empty.
+     *    - Emit change if changeOnSelect is enabled.
+     * 5. If no children:
+     *    - Selection is complete (leaf node).
+     *    - Update value and close dropdown if in single mode.
+     *
+     * @param {CascaderOption} option - The clicked option object.
+     * @param {number} depth - The hierarchical level of the clicked option.
+     * @returns {void}
+     */
+    handleOptionClick(option, depth) {
+        // Prevent interaction with disabled options
+        if (option.disabled)
+            return;
+        const children = this.getOptionChildren(option);
+        // Update the path representing the current hierarchical selection
+        const newPath = [...this.hoveredPath.slice(0, depth), option];
+        this.hoveredPath = newPath;
+        // Check if we need to open a sub-menu
+        if (children && children.length > 0) {
+            // Update columns to show the next level
+            this.activeOptions = [...this.activeOptions.slice(0, depth + 1), children];
+            // Handle asynchronous loading if children are marked as existing but not yet fetched
+            if (option.isLeaf === false && children.length === 0) {
+                this.xLoadData.emit({ option, path: newPath });
+            }
+            // If changeOnSelect is true, we update the component value even before reaching a leaf
+            if (this.changeOnSelect) {
+                this.selectPath(newPath);
+            }
+            // Re-render the portal with updated column data
+            this.updatePortal();
+        }
+        else {
+            // Leaf node selected: finalize selection
+            this.selectPath(newPath);
+            if (!this.multiple) {
+                // In single mode, selecting a leaf closes the menu
+                this.closeDropdown();
+            }
+            else {
+                // In multiple mode, keep menu open but refresh portal for checkbox states
+                this.updatePortal();
+            }
+        }
+    }
+    /**
+     * Handles mouse hover events on an option item.
+     * Updates the hovered path and expands the sub-menu if the option has children.
+     *
+     * @param {CascaderOption} option - The hovered option object.
+     * @param {number} depth - The hierarchy level.
+     * @returns {void}
+     */
+    handleOptionHover(option, depth) {
+        // Ignore hovering on disabled options
+        if (option.disabled)
+            return;
+        const children = this.getOptionChildren(option);
+        const newPath = [...this.hoveredPath.slice(0, depth), option];
+        this.hoveredPath = newPath;
+        if (children && children.length > 0) {
+            // Show children in the next column
+            this.activeOptions = [...this.activeOptions.slice(0, depth + 1), children];
+        }
+        else {
+            // No children, truncate active columns to current level
+            this.activeOptions = this.activeOptions.slice(0, depth + 1);
+        }
+        // Update the dropdown overlay content
+        this.updatePortal();
+    }
+    /**
+     * Updates the value and selected path states, then emits the change event.
+     * Handles both single and multiple selection logic.
+     *
+     * @param {CascaderOption[]} path - The array of options representing the choice.
+     * @returns {void}
+     */
+    selectPath(path) {
+        this.selectedPath = path;
+        const valuePath = path.map(opt => this.cascaderService.getValue(opt));
+        if (this.multiple) {
+            // Multiple selection logic
+            const currentValues = (this.value || []);
+            // Check if this path is already selected to implement toggle behavior
+            const existingIndex = currentValues.findIndex(v => v.length === valuePath.length && v.every((val, i) => val === valuePath[i]));
+            if (existingIndex >= 0) {
+                // Deselect if already present
+                const newValues = [...currentValues];
+                newValues.splice(existingIndex, 1);
+                this.value = newValues;
+            }
+            else {
+                // Add to selection if not present
+                this.value = [...currentValues, valuePath];
+            }
+        }
+        else {
+            // Single selection: simply overwrite current value
+            this.value = valuePath;
+            if (this.showSearch) {
+                this.searchValue = '';
+            }
+        }
+        // Notify listeners about the value change
+        this.xChange.emit({
+            value: this.value,
+            selectedOptions: path,
+        });
+    }
+    /**
+     * Resets the current selection and clears all paths.
+     * @param {MouseEvent} e - The click event from the clear button.
+     * @returns {void}
+     */
+    handleClear(e) {
+        // Prevent the click from triggering the dropdown toggle
+        e.stopPropagation();
+        // Reset values based on selection mode
+        this.value = this.multiple ? [] : null;
+        this.selectedPath = [];
+        this.hoveredPath = [];
+        // Revert menu to root state
+        this.initActiveOptions();
+        // Notify listeners about the clear action
+        this.xChange.emit({
+            value: this.value,
+            selectedOptions: [],
+        });
+    }
+    /**
+     * Handles input events in the search field.
+     * Updates `searchValue` and emits the search event.
+     *
+     * Flow:
+     * 1. Captures the input value from the event target.
+     * 2. Updates the internal `searchValue` state.
+     * 3. Emits the `xSearch` event with the new value for external filtering.
+     * 4. (Future) Triggers internal filtering logic if implemented.
+     *
+     * @param {Event} e - The input event.
+     * @returns {void}
+     */
+    handleSearchInput(e) {
+        const input = e.target;
+        this.searchValue = input.value;
+        // Notify listeners about the change in search value
+        this.xSearch.emit({ value: this.searchValue });
+    }
+    /**
+     * Internal handler for focus event.
+     * @returns {void}
+     */
+    handleFocus() {
+        this.isFocused = true;
+        this.xFocus.emit();
+    }
+    /**
+     * Internal handler for blur event.
+     * @returns {void}
+     */
+    handleBlur() {
+        this.isFocused = false;
+        this.xBlur.emit();
+    }
+    /**
+     * Updates hovering state when mouse enters the component.
+     */
+    handleMouseEnter = () => {
+        this.hovering = true;
+    };
+    /**
+     * Updates hovering state when mouse leaves the component.
+     */
+    handleMouseLeave = () => {
+        this.hovering = false;
+    };
+    // ========================================
+    // RENDER HELPERS
+    // ========================================
+    /**
+     * Constructs the string to be displayed in the input based on the selected path.
+     * Labels are joined using the `displaySeparator`.
+     *
+     * @returns {string} The concatenated labels or an empty string if no selection.
+     */
+    getDisplayLabel() {
+        if (this.selectedPath.length === 0) {
+            return '';
+        }
+        // Map selected objects to labels and join them
+        return this.selectedPath.map(opt => this.cascaderService.getLabel(opt)).join(this.displaySeparator);
+    }
+    /**
+     * Renders the arrow icon used to indicate dropdown state.
+     * @returns {JSX.Element} The rendered arrow icon.
+     */
+    renderArrowIcon() {
+        return (h("x-icon", { name: getIcon('arrowDown') }));
+    }
+    /**
+     * Renders the clear icon used to reset the selection.
+     * @returns {JSX.Element} The rendered clear icon.
+     */
+    renderClearIcon() {
+        return (h("x-icon", { name: getIcon('clear') }));
+    }
+    /**
+     * Renders the loading icon shown when the component is in a loading state.
+     * @returns {JSX.Element} The rendered loading icon.
+     */
+    renderLoadingIcon() {
+        return (h("x-icon", { name: getIcon('loading') }));
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Main render method for the XCascader component.
+     * Handles the input display, search mode, and placement of icons.
+     *
+     * Flow:
+     * 1. Calculates the display label from the selected path.
+     * 2. Determines visibility of the clear button (hovering + value exists).
+     * 3. Renders the Host element with dynamic classes for state (open, disabled, size, etc.).
+     * 4. Renders the selector area:
+     *    - If `showSearch` is true: Renders an input field that toggles between search value and display label.
+     *    - If `showSearch` is false: Renders a static text span.
+     * 5. Renders suffix icons:
+     *    - Loading icon (if loading).
+     *    - Clear icon (if applicable).
+     *    - Arrow/Chevron icon (indicates dropdown state).
+     *
+     * @returns {JSX.Element} The full component tree.
+     */
+    render() {
+        const label = this.getDisplayLabel();
+        // Determine if the clear button should be visible
+        const showClear = this.allowClear && label && !this.disabled && this.hovering;
+        return (h(Host, { key: '81bcdd8d83b330a2c51e2236be573db2c974e82e', class: {
+                'x-cascader': true,
+                'x-cascader-open': this.isOpen,
+                'x-cascader-disabled': this.disabled,
+                'x-cascader-focused': this.isFocused,
+                [`x-cascader-${this.size}`]: true,
+                [`x-cascader-status-${this.status}`]: !!this.status,
+                [`x-cascader-${this.variant}`]: true,
+                'x-cascader-multiple': this.multiple,
+            } }, h("div", { key: 'e0c09cf00a5e546cd06c6d41f2834c39106ea043', ref: el => (this.wrapperRef = el), class: {
+                'x-cascader-selector': true,
+                'x-cascader-selector-focused': this.isFocused,
+                'x-cascader-selector-disabled': this.disabled,
+                'disabled': this.disabled,
+            }, onClick: () => this.toggleDropdown(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearch ? (h("span", { class: "x-cascader-selection-search" }, h("input", { ref: el => (this.inputRef = el), type: "text", class: "x-cascader-selection-search-input",
+            // When open and searching, show searchValue. When closed, show the label.
+            value: this.isOpen ? this.searchValue : label, placeholder: label || this.placeholder, disabled: this.disabled, onInput: e => this.handleSearchInput(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }))) : (h("span", { class: "x-cascader-selection-item" }, label ? (h("span", { class: "x-cascader-selection-item-content" }, label)) : (h("span", { class: "x-cascader-selection-placeholder" }, this.placeholder)))), h("span", { key: '935e3b7a4766171737e7448d64eb94049b4c4413', class: "x-cascader-suffix" }, this.loading ? (h("span", { class: "x-cascader-loading" }, this.renderLoadingIcon())) : showClear ? (h("span", { class: "x-cascader-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())) : null, h("span", { key: 'b249c8b6f35132ec2207cdbffa72894a9d0497c9', class: { 'x-cascader-arrow': true, 'x-cascader-arrow-open': this.isOpen } }, this.renderArrowIcon())))));
+    }
+    static get is() { return "x-cascader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-cascader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-cascader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CascaderOption[]",
+                    "resolved": "CascaderOption[]",
+                    "references": {
+                        "CascaderOption": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderOption",
+                            "referenceLocation": "CascaderOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{CascaderOption[]}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader options={[\r\n  { value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou' }] }\r\n]} />"
+                        }],
+                    "text": "Options data to be displayed in the cascader."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "CascaderValue | null",
+                    "resolved": "string[] | string[][]",
+                    "references": {
+                        "CascaderValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderValue",
+                            "referenceLocation": "CascaderValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{CascaderValue | null}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader value={['zhejiang', 'hangzhou']} />\r\n<x-cascader multiple value={[['zhejiang', 'hangzhou'], ['jiangsu', 'nanjing']]} />"
+                        }],
+                    "text": "Selected value (array of values representing the path).\r\nFor single mode: string[] like ['zhejiang', 'hangzhou']\r\nFor multiple mode: string[][] like [['zhejiang', 'hangzhou'], ['jiangsu', 'nanjing']]"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "defaultValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CascaderValue | null",
+                    "resolved": "string[] | string[][]",
+                    "references": {
+                        "CascaderValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderValue",
+                            "referenceLocation": "CascaderValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{CascaderValue | null}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader defaultValue={['zhejiang', 'hangzhou']} />"
+                        }],
+                    "text": "Initial selected value when the component is first mounted."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "'Please select'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader placeholder=\"Select address\" />"
+                        }],
+                    "text": "Placeholder text displayed when no value is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "translate('Cascader.placeholder', {}, 'Please select')"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader disabled />"
+                        }],
+                    "text": "Whether the cascader component is disabled and non-interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader allowClear={false} />"
+                        }],
+                    "text": "Whether to show a clear button that allows resetting the selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "true"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader showSearch />"
+                        }],
+                    "text": "Whether to show a search input for filtering options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "false"
+            },
+            "fieldNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CascaderFieldNames",
+                    "resolved": "CascaderFieldNames",
+                    "references": {
+                        "CascaderFieldNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderFieldNames",
+                            "referenceLocation": "CascaderFieldNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{CascaderFieldNames}"
+                        }, {
+                            "name": "default",
+                            "text": "{ value: 'value', label: 'label', children: 'children' }"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader fieldNames={{ value: 'id', label: 'name', children: 'items' }} />"
+                        }],
+                    "text": "Custom mapping for field names in the options data."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{ value: 'value', label: 'label', children: 'children' }"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CascaderSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "CascaderSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderSize",
+                            "referenceLocation": "CascaderSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'large' | 'middle' | 'small'}"
+                        }, {
+                            "name": "default",
+                            "text": "'middle'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader size=\"small\" />"
+                        }],
+                    "text": "Size of the cascader input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CascaderStatus | undefined",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "CascaderStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderStatus",
+                            "referenceLocation": "CascaderStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'error' | 'warning'}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader status=\"error\" />"
+                        }],
+                    "text": "Current validation status of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CascaderPlacement",
+                    "resolved": "\"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "CascaderPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderPlacement",
+                            "referenceLocation": "CascaderPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{CascaderPlacement}"
+                        }, {
+                            "name": "default",
+                            "text": "'bottomLeft'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader placement=\"topRight\" />"
+                        }],
+                    "text": "Preferred placement of the dropdown relative to the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CascaderVariant",
+                    "resolved": "\"borderless\" | \"filled\" | \"outlined\"",
+                    "references": {
+                        "CascaderVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderVariant",
+                            "referenceLocation": "CascaderVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'outlined' | 'borderless' | 'filled'}"
+                        }, {
+                            "name": "default",
+                            "text": "'outlined'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader variant=\"filled\" />"
+                        }],
+                    "text": "Visual variant style of the cascader input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "expandTrigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CascaderExpandTrigger",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {
+                        "CascaderExpandTrigger": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderExpandTrigger",
+                            "referenceLocation": "CascaderExpandTrigger"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'click' | 'hover'}"
+                        }, {
+                            "name": "default",
+                            "text": "'click'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader expandTrigger=\"hover\" />"
+                        }],
+                    "text": "Interaction type that triggers the expansion of sub-menus."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-trigger",
+                "defaultValue": "'click'"
+            },
+            "changeOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader changeOnSelect />"
+                        }],
+                    "text": "Whether to update the value on selecting each level of the hierarchy.\r\nIf false, only selecting leaf nodes updates the value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "change-on-select",
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader multiple />"
+                        }],
+                    "text": "Whether to enable multi-selection mode using checkboxes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "maxTagCount": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | 'responsive'",
+                    "resolved": "\"responsive\" | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number | 'responsive'}"
+                        }, {
+                            "name": "default",
+                            "text": "'responsive'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader multiple maxTagCount={2} />"
+                        }],
+                    "text": "Maximum number of selected tags displayed in the input (for multiple mode).\r\n'responsive' will automatically hide overflowing tags."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tag-count",
+                "defaultValue": "'responsive'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean | undefined",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader open={true} />"
+                        }],
+                    "text": "Controlled visibility state of the dropdown menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader autofocus />"
+                        }],
+                    "text": "Whether the component should automatically receive focus upon mounting."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "notFoundContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "'No data'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader notFoundContent=\"No results found\" />"
+                        }],
+                    "text": "Custom content to display when no options match the search or current selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "not-found-content",
+                "defaultValue": "translate('Cascader.notFoundContent', {}, 'No data')"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader loading />"
+                        }],
+                    "text": "Whether the component is currently in a loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "displaySeparator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "' / '"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader displaySeparator=\" > \" />"
+                        }],
+                    "text": "Character(s) used to separate breadcrumb labels in the selected path."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-separator",
+                "defaultValue": "' / '"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "activeOptions": {},
+            "selectedPath": {},
+            "hoveredPath": {},
+            "searchValue": {},
+            "filteredOptions": {},
+            "isFocused": {},
+            "hovering": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "xChange"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader onXChange={(ev) => console.log('Selected:', ev.detail.value)} />"
+                        }],
+                    "text": "Emitted when the selected value changes."
+                },
+                "complexType": {
+                    "original": "CascaderChangeEventDetail",
+                    "resolved": "CascaderChangeEventDetail",
+                    "references": {
+                        "CascaderChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderChangeEventDetail",
+                            "referenceLocation": "CascaderChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSearch",
+                "name": "xSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "xSearch"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader onXSearch={(ev) => console.log('Searching:', ev.detail.value)} />"
+                        }],
+                    "text": "Emitted when the user types in the search input."
+                },
+                "complexType": {
+                    "original": "CascaderSearchEventDetail",
+                    "resolved": "CascaderSearchEventDetail",
+                    "references": {
+                        "CascaderSearchEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderSearchEventDetail",
+                            "referenceLocation": "CascaderSearchEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDropdownVisibleChange",
+                "name": "xDropdownVisibleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "xDropdownVisibleChange"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader onXDropdownVisibleChange={(ev) => console.log('Visible:', ev.detail.visible)} />"
+                        }],
+                    "text": "Emitted when the dropdown menu visibility changes."
+                },
+                "complexType": {
+                    "original": "CascaderDropdownVisibleChangeDetail",
+                    "resolved": "CascaderDropdownVisibleChangeDetail",
+                    "references": {
+                        "CascaderDropdownVisibleChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderDropdownVisibleChangeDetail",
+                            "referenceLocation": "CascaderDropdownVisibleChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xLoadData",
+                "name": "xLoadData",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "xLoadData"
+                        }, {
+                            "name": "example",
+                            "text": "<x-cascader onXLoadData={(ev) => handleLoadData(ev.detail.option)} />"
+                        }],
+                    "text": "Emitted when a sub-menu needs to load data asynchronously."
+                },
+                "complexType": {
+                    "original": "CascaderLoadDataEventDetail",
+                    "resolved": "CascaderLoadDataEventDetail",
+                    "references": {
+                        "CascaderLoadDataEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-cascader/types.ts::CascaderLoadDataEventDetail",
+                            "referenceLocation": "CascaderLoadDataEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "xFocus"
+                        }],
+                    "text": "Emitted when the component receives focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xBlur",
+                "name": "xBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "xBlur"
+                        }],
+                    "text": "Emitted when the component loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the cascader input field.\r\nThis is a public method that can be called via a reference to the component.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the cascader input field.\r\nThis is a public method that can be called via a reference to the component.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "watchOptions"
+            }, {
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "open",
+                "methodName": "watchOpen"
+            }, {
+                "propName": "isOpen",
+                "methodName": "isOpenChanged"
+            }, {
+                "propName": "searchValue",
+                "methodName": "watchSearchValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}