@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1004 @@
+import { h, Host } from "@stencil/core";
+import { PortalController } from "../x-portal";
+let activeDropdown = null;
+/**
+ * Dropdown component following Ant Design specification
+ * @part dropdown - The root overlay element
+ * @part menu - The menu container
+ * @part item - Menu item element
+ * @part item-icon - Menu item icon
+ * @part item-content - Menu item content
+ * @part arrow - The dropdown arrow
+ */
+export class XDropdown {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Whether the dropdown arrow should be visible.
+     * @example
+     * <x-dropdown arrow></x-dropdown>
+     */
+    arrow = false;
+    /**
+     * Whether to adjust dropdown placement automatically when dropdown is off screen.
+     * @example
+     * <x-dropdown autoAdjustOverflow={false}></x-dropdown>
+     */
+    autoAdjustOverflow = true;
+    /**
+     * Whether the dropdown menu is disabled.
+     * @example
+     * <x-dropdown disabled></x-dropdown>
+     */
+    disabled = false;
+    /**
+     * Whether destroy dropdown when hidden.
+     * @example
+     * <x-dropdown destroyOnHidden></x-dropdown>
+     */
+    destroyOnHidden = false;
+    /**
+     * The menu configuration.
+     * @example
+     * <x-dropdown menu={{ items: [{ key: '1', label: 'Item' }] }}></x-dropdown>
+     */
+    menu;
+    /**
+     * Placement of popup menu.
+     * @example
+     * <x-dropdown placement="bottomRight"></x-dropdown>
+     */
+    placement = 'bottomLeft';
+    /**
+     * The trigger mode which executes the dropdown action.
+     * @example
+     * <x-dropdown trigger="click"></x-dropdown>
+     */
+    trigger = 'hover';
+    /**
+     * Whether the dropdown menu is currently open (controlled).
+     * @example
+     * <x-dropdown open></x-dropdown>
+     */
+    open;
+    /**
+     * Custom class names for dropdown parts.
+     * @example
+     * <x-dropdown classNames={{ root: 'my-dropdown' }}></x-dropdown>
+     */
+    classNames = {};
+    /**
+     * Custom styles for dropdown parts.
+     * @example
+     * <x-dropdown styles={{ root: { minWidth: '200px' } }}></x-dropdown>
+     */
+    styles = {};
+    // ==================== Events ====================
+    /**
+     * Called when the open state is changed.
+     * @example
+     * <x-dropdown onXOpenChange={(ev) => console.log(ev.detail)}></x-dropdown>
+     */
+    xOpenChange;
+    /**
+     * Called when a menu item is clicked.
+     * @example
+     * <x-dropdown onXMenuClick={(ev) => console.log(ev.detail)}></x-dropdown>
+     */
+    xMenuClick;
+    // ==================== State ====================
+    /**
+     * Internal open state for uncontrolled mode.
+     */
+    internalOpen = false;
+    /**
+     * Context menu position when trigger is contextMenu.
+     */
+    contextMenuPosition = null;
+    /**
+     * Selected menu item keys.
+     */
+    selectedKeys = [];
+    /**
+     * Internal destroy flag for destroyOnHidden.
+     */
+    isDestroyed = false;
+    /**
+     * Current placement from portal.
+     */
+    currentPlacement;
+    /**
+     * Hover close timeout.
+     */
+    hoverTimer = null;
+    /**
+     * Overlay element reference.
+     */
+    overlayRef = null;
+    /**
+     * Portal instance for overlay.
+     */
+    portalInstance = null;
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize internal state before render.
+     * @returns void
+     */
+    componentWillLoad() {
+        this.internalOpen = this.open ?? false;
+        this.currentPlacement = this.placement;
+        if (this.menu?.selectedKeys) {
+            this.selectedKeys = this.menu.selectedKeys;
+        }
+        else if (this.menu?.defaultSelectedKeys) {
+            this.selectedKeys = this.menu.defaultSelectedKeys;
+        }
+    }
+    /**
+     * Sync placement to internal state.
+     * @param newVal - New placement.
+     * @returns void
+     */
+    watchPlacement(newVal) {
+        this.currentPlacement = newVal;
+    }
+    /**
+     * Cleanup timers and portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        if (this.hoverTimer) {
+            clearTimeout(this.hoverTimer);
+        }
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+        if (activeDropdown === this) {
+            activeDropdown = null;
+        }
+    }
+    /**
+     * Sync controlled open state and update portal.
+     * @param newValue - Open state.
+     * @returns void
+     */
+    watchOpen(newValue) {
+        if (newValue !== undefined) {
+            this.internalOpen = newValue;
+            if (newValue && this.destroyOnHidden) {
+                this.isDestroyed = false;
+            }
+            this.updatePortal();
+        }
+    }
+    /**
+     * Update portal after render.
+     * @returns void
+     */
+    componentDidRender() {
+        this.updatePortal();
+    }
+    // ==================== Listeners ====================
+    /**
+     * Close dropdown when clicking outside.
+     * @param ev - Mouse event.
+     * @returns void
+     */
+    handleWindowClick(ev) {
+        if (!this.internalOpen)
+            return;
+        if (this.el.contains(ev.target))
+            return;
+        if (this.overlayRef?.contains(ev.target))
+            return;
+        this.setOpen(false, 'trigger');
+    }
+    /**
+     * Close dropdown on Escape key.
+     * @param ev - Keyboard event.
+     * @returns void
+     */
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape' && this.internalOpen) {
+            this.setOpen(false, 'trigger');
+        }
+    }
+    // ==================== Helpers ====================
+    /**
+     * Get open state (controlled or internal).
+     * @returns boolean
+     */
+    get isOpen() {
+        return this.open !== undefined ? this.open : this.internalOpen;
+    }
+    /**
+     * Determine whether arrow should be shown.
+     * @returns boolean
+     */
+    get showArrow() {
+        return this.arrow === true || (typeof this.arrow === 'object' && !!this.arrow);
+    }
+    /**
+     * Determine arrow point-at-center behavior.
+     * @returns boolean
+     */
+    get arrowPointAtCenter() {
+        return typeof this.arrow === 'object' && this.arrow.pointAtCenter === true;
+    }
+    /**
+     * Get trigger element inside shadow root.
+     * @returns HTMLElement | undefined
+     */
+    getTriggerEl() {
+        return this.el.shadowRoot
+            ? this.el.shadowRoot.querySelector('.x-dropdown-trigger')
+            : this.el.querySelector('.x-dropdown-trigger');
+    }
+    /**
+     * Check if a trigger mode is enabled.
+     * @param type - Trigger type.
+     * @returns boolean
+     */
+    isTrigger(type) {
+        if (Array.isArray(this.trigger)) {
+            return this.trigger.includes(type);
+        }
+        return this.trigger === type;
+    }
+    /**
+     * Update open state and emit change event.
+     *
+     * Flow:
+     * 1. Checks disabled state.
+     * 2. Manages `activeDropdown` singleton to close other dropdowns if opening.
+     * 3. Updates `internalOpen` state.
+     * 4. Handles `destroyOnHidden` logic.
+     * 5. Emits `xOpenChange`.
+     * 6. Resets context menu position if closing.
+     *
+     * @param open - Open state.
+     * @param source - Event source.
+     * @returns void
+     */
+    setOpen(open, source) {
+        if (this.disabled)
+            return;
+        if (open) {
+            if (activeDropdown && activeDropdown !== this) {
+                activeDropdown.setOpen(false, 'trigger');
+            }
+            activeDropdown = this;
+        }
+        else if (activeDropdown === this) {
+            activeDropdown = null;
+        }
+        this.internalOpen = open;
+        if (!open && this.destroyOnHidden) {
+            this.isDestroyed = true;
+        }
+        this.xOpenChange.emit({ open, source });
+        // Reset context menu position when closing
+        if (!open) {
+            this.contextMenuPosition = null;
+        }
+    }
+    // ==================== Handlers ====================
+    /**
+     * Handle trigger mouse enter for hover mode.
+     * @returns void
+     */
+    handleMouseEnter = () => {
+        if (this.disabled)
+            return;
+        if (this.isTrigger('hover')) {
+            if (this.hoverTimer) {
+                clearTimeout(this.hoverTimer);
+                this.hoverTimer = null;
+            }
+            this.setOpen(true, 'trigger');
+        }
+    };
+    /**
+     * Handle trigger mouse leave for hover mode.
+     * @returns void
+     */
+    handleMouseLeave = () => {
+        if (this.disabled)
+            return;
+        if (this.isTrigger('hover')) {
+            this.hoverTimer = setTimeout(() => {
+                this.setOpen(false, 'trigger');
+            }, 100);
+        }
+    };
+    /**
+     * Keep dropdown open when hovering overlay in hover mode.
+     * @returns void
+     */
+    handleOverlayMouseEnter = () => {
+        if (this.disabled)
+            return;
+        if (this.isTrigger('hover')) {
+            if (this.hoverTimer) {
+                clearTimeout(this.hoverTimer);
+                this.hoverTimer = null;
+            }
+        }
+    };
+    /**
+     * Close dropdown when leaving overlay in hover mode.
+     * @returns void
+     */
+    handleOverlayMouseLeave = () => {
+        if (this.disabled)
+            return;
+        if (this.isTrigger('hover')) {
+            this.hoverTimer = setTimeout(() => {
+                this.setOpen(false, 'trigger');
+            }, 100);
+        }
+    };
+    /**
+     * Toggle dropdown on click trigger.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleClick = (e) => {
+        if (this.disabled)
+            return;
+        if (this.isTrigger('click')) {
+            e.stopPropagation();
+            this.setOpen(!this.isOpen, 'trigger');
+        }
+    };
+    /**
+     * Open dropdown at context menu position.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleContextMenu = (e) => {
+        if (this.disabled)
+            return;
+        if (this.isTrigger('contextMenu')) {
+            e.preventDefault();
+            e.stopPropagation();
+            // Get position relative to the host element
+            const rect = this.el.getBoundingClientRect();
+            this.contextMenuPosition = {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+            };
+            this.setOpen(true, 'trigger');
+        }
+    };
+    /**
+     * Handle menu item selection and emit click event.
+     * @param item - Menu item.
+     * @param keyPath - Path of keys.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleMenuItemClick = (item, keyPath, e) => {
+        if (item.disabled)
+            return;
+        // Handle selection if selectable
+        if (this.menu?.selectable) {
+            if (this.menu.multiple) {
+                if (this.selectedKeys.includes(item.key)) {
+                    this.selectedKeys = this.selectedKeys.filter(k => k !== item.key);
+                }
+                else {
+                    this.selectedKeys = [...this.selectedKeys, item.key];
+                }
+            }
+            else {
+                this.selectedKeys = [item.key];
+            }
+        }
+        this.xMenuClick.emit({
+            key: item.key,
+            keyPath,
+            item,
+            domEvent: e,
+        });
+        // Close dropdown after click (unless selectable)
+        if (!this.menu?.selectable) {
+            this.setOpen(false, 'menu');
+        }
+    };
+    // ==================== Render Helpers ====================
+    /**
+     * Build overlay style from styles prop.
+     * @returns style map
+     */
+    getOverlayStyle() {
+        const style = { ...(this.styles.root || {}) };
+        return style;
+    }
+    /**
+     * Build overlay element and render menu items.
+     * @returns HTMLElement
+     */
+    buildOverlayElement() {
+        // Create x-dropdown-content element
+        const overlayEl = document.createElement('x-dropdown-content');
+        const overlayClasses = {
+            'x-dropdown-overlay': true,
+            [`x-dropdown-placement-${this.currentPlacement || this.placement}`]: true,
+            'x-dropdown-hidden': !this.isOpen,
+            'x-dropdown-show-arrow': this.showArrow,
+            'x-dropdown-arrow-point-at-center': this.arrowPointAtCenter,
+            [this.classNames.root || '']: !!this.classNames.root,
+        };
+        // Set props on element
+        overlayEl.overlayClasses = overlayClasses;
+        overlayEl.overlayStyle = this.getOverlayStyle();
+        overlayEl.showArrow = this.showArrow;
+        overlayEl.isOpen = this.isOpen;
+        overlayEl.overlayMouseEnter = this.handleOverlayMouseEnter;
+        overlayEl.overlayMouseLeave = this.handleOverlayMouseLeave;
+        overlayEl.setOverlayRef = (el) => {
+            this.overlayRef = el;
+        };
+        // Render menu into overlay element
+        if (this.menu?.items && this.menu.items.length > 0) {
+            const menuEl = document.createElement('ul');
+            menuEl.className = 'x-dropdown-menu';
+            menuEl.setAttribute('role', 'menu');
+            menuEl.setAttribute('part', 'menu');
+            this.renderMenuItemsImperative(menuEl, this.menu.items);
+            overlayEl.appendChild(menuEl);
+        }
+        return overlayEl;
+    }
+    /**
+     * Render menu items into an element.
+     * @param container - Parent element.
+     * @param items - Menu items.
+     * @param keyPath - Current key path.
+     * @returns void
+     */
+    renderMenuItemsImperative(container, items, keyPath = []) {
+        items.forEach(item => {
+            const li = this.createMenuItemElement(item, keyPath);
+            if (li)
+                container.appendChild(li);
+        });
+    }
+    /**
+     * Create menu item element based on item type.
+     *
+     * Flow:
+     * 1. Handles 'divider': Creates separator li.
+     * 2. Handles 'group': Creates title and recursive list of children.
+     * 3. Handles 'submenu' (children present):
+     *    - Creates title with icon and arrow.
+     *    - Recursively builds submenu list.
+     * 4. Handles regular item:
+     *    - Sets classes for disabled, danger, selected states.
+     *    - Attaches click listener.
+     *    - Renders icon and content.
+     *
+     * @param item - Menu item.
+     * @param keyPath - Current key path.
+     * @returns HTMLElement | null
+     */
+    createMenuItemElement(item, keyPath = []) {
+        const currentPath = [...keyPath, item.key];
+        // Divider
+        if (item.type === 'divider') {
+            const li = document.createElement('li');
+            li.className = 'x-dropdown-menu-item-divider';
+            li.setAttribute('data-key', item.key);
+            return li;
+        }
+        // Group
+        if (item.type === 'group') {
+            const li = document.createElement('li');
+            li.className = 'x-dropdown-menu-item-group';
+            li.setAttribute('data-key', item.key);
+            const title = document.createElement('div');
+            title.className = 'x-dropdown-menu-item-group-title';
+            title.textContent = item.label;
+            li.appendChild(title);
+            const groupList = document.createElement('ul');
+            groupList.className = 'x-dropdown-menu-item-group-list';
+            if (item.children) {
+                this.renderMenuItemsImperative(groupList, item.children, currentPath);
+            }
+            li.appendChild(groupList);
+            return li;
+        }
+        // Submenu
+        if (item.children && item.children.length > 0) {
+            const li = document.createElement('li');
+            li.className = 'x-dropdown-menu-submenu' + (item.disabled ? ' x-dropdown-menu-item-disabled' : '');
+            li.setAttribute('data-key', item.key);
+            const titleDiv = document.createElement('div');
+            titleDiv.className = 'x-dropdown-menu-submenu-title';
+            if (item.icon) {
+                const iconSpan = document.createElement('span');
+                iconSpan.className = 'x-dropdown-menu-item-icon';
+                iconSpan.innerHTML = `<x-icon name="${item.icon}"></x-icon>`;
+                titleDiv.appendChild(iconSpan);
+            }
+            const textSpan = document.createElement('span');
+            textSpan.className = 'x-dropdown-menu-item-text';
+            textSpan.textContent = item.label;
+            titleDiv.appendChild(textSpan);
+            const arrowSpan = document.createElement('span');
+            arrowSpan.className = 'x-dropdown-menu-submenu-arrow';
+            arrowSpan.textContent = '›';
+            titleDiv.appendChild(arrowSpan);
+            li.appendChild(titleDiv);
+            const subMenu = document.createElement('ul');
+            subMenu.className = 'x-dropdown-menu x-dropdown-menu-sub';
+            this.renderMenuItemsImperative(subMenu, item.children, currentPath);
+            li.appendChild(subMenu);
+            return li;
+        }
+        // Regular item
+        const isSelected = this.selectedKeys.includes(item.key);
+        const li = document.createElement('li');
+        const classList = [
+            'x-dropdown-menu-item',
+            item.disabled ? 'x-dropdown-menu-item-disabled' : '',
+            item.danger ? 'x-dropdown-menu-item-danger' : '',
+            isSelected ? 'x-dropdown-menu-item-selected' : '',
+            this.classNames.item || '',
+        ].filter(Boolean);
+        li.className = classList.join(' ');
+        li.setAttribute('data-key', item.key);
+        li.setAttribute('part', 'item');
+        li.setAttribute('role', 'menuitem');
+        if (item.disabled)
+            li.setAttribute('aria-disabled', 'true');
+        li.addEventListener('click', (e) => this.handleMenuItemClick(item, currentPath, e));
+        if (item.icon) {
+            const iconSpan = document.createElement('span');
+            iconSpan.className = 'x-dropdown-menu-item-icon';
+            iconSpan.setAttribute('part', 'item-icon');
+            if (item.icon.trim().startsWith('<')) {
+                iconSpan.innerHTML = item.icon;
+            }
+            else {
+                iconSpan.innerHTML = `<x-icon name="${item.icon}"></x-icon>`;
+            }
+            li.appendChild(iconSpan);
+        }
+        const contentSpan = document.createElement('span');
+        contentSpan.className = 'x-dropdown-menu-item-content';
+        contentSpan.setAttribute('part', 'item-content');
+        contentSpan.innerHTML = item.label;
+        li.appendChild(contentSpan);
+        if (isSelected && this.menu?.selectable) {
+            const checkSpan = document.createElement('span');
+            checkSpan.className = 'x-dropdown-menu-item-selected-icon';
+            checkSpan.textContent = '✓';
+            li.appendChild(checkSpan);
+        }
+        return li;
+    }
+    /**
+     * Create or update portal for dropdown overlay.
+     * @returns void
+     */
+    updatePortal() {
+        const shouldRender = !this.destroyOnHidden || !this.isDestroyed || this.isOpen;
+        if (!shouldRender || !this.isOpen) {
+            if (this.portalInstance) {
+                this.portalInstance.destroy();
+                this.portalInstance = null;
+            }
+            return;
+        }
+        // Build overlay element with x-dropdown-content
+        const overlayElement = this.buildOverlayElement();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: this.isOpen,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                zIndex: 1050,
+                content: overlayElement,
+                onPlacementChange: (p) => {
+                    this.currentPlacement = p;
+                },
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: this.isOpen,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                content: overlayElement,
+                onPlacementChange: (p) => {
+                    this.currentPlacement = p;
+                },
+            });
+        }
+    }
+    // ==================== Render ====================
+    /**
+     * Render dropdown trigger and slot.
+     * @returns JSX.Element
+     */
+    render() {
+        const { disabled, isOpen } = this;
+        return (h(Host, { key: '3c55a2db25661bc0c639dee2c6e4dc37d3bf5d9c', class: {
+                'x-dropdown-open': isOpen,
+                'x-dropdown-disabled': disabled,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '0293f96b0503c6fed3acd4b1068a94541082a771', class: "x-dropdown-trigger", onClick: this.handleClick, onContextMenu: this.handleContextMenu }, h("slot", { key: '781896114c9317e4c8e9dd3a4a4d9b1169b6f5c4' }))));
+    }
+    static get is() { return "x-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "arrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | DropdownArrow",
+                    "resolved": "DropdownArrow | boolean",
+                    "references": {
+                        "DropdownArrow": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownArrow",
+                            "referenceLocation": "DropdownArrow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown arrow></x-dropdown>"
+                        }],
+                    "text": "Whether the dropdown arrow should be visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow",
+                "defaultValue": "false"
+            },
+            "autoAdjustOverflow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown autoAdjustOverflow={false}></x-dropdown>"
+                        }],
+                    "text": "Whether to adjust dropdown placement automatically when dropdown is off screen."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-adjust-overflow",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown disabled></x-dropdown>"
+                        }],
+                    "text": "Whether the dropdown menu is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "destroyOnHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown destroyOnHidden></x-dropdown>"
+                        }],
+                    "text": "Whether destroy dropdown when hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "destroy-on-hidden",
+                "defaultValue": "false"
+            },
+            "menu": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenu",
+                    "resolved": "DropdownMenu",
+                    "references": {
+                        "DropdownMenu": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownMenu",
+                            "referenceLocation": "DropdownMenu"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown menu={{ items: [{ key: '1', label: 'Item' }] }}></x-dropdown>"
+                        }],
+                    "text": "The menu configuration."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownPlacement",
+                    "resolved": "\"bottom\" | \"bottomLeft\" | \"bottomRight\" | \"top\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "DropdownPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownPlacement",
+                            "referenceLocation": "DropdownPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown placement=\"bottomRight\"></x-dropdown>"
+                        }],
+                    "text": "Placement of popup menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownTrigger | DropdownTrigger[]",
+                    "resolved": "\"click\" | \"contextMenu\" | \"hover\" | DropdownTrigger[]",
+                    "references": {
+                        "DropdownTrigger": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownTrigger",
+                            "referenceLocation": "DropdownTrigger"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown trigger=\"click\"></x-dropdown>"
+                        }],
+                    "text": "The trigger mode which executes the dropdown action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "defaultValue": "'hover'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown open></x-dropdown>"
+                        }],
+                    "text": "Whether the dropdown menu is currently open (controlled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownClassNames",
+                    "resolved": "DropdownClassNames",
+                    "references": {
+                        "DropdownClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownClassNames",
+                            "referenceLocation": "DropdownClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown classNames={{ root: 'my-dropdown' }}></x-dropdown>"
+                        }],
+                    "text": "Custom class names for dropdown parts."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownStyles",
+                    "resolved": "DropdownStyles",
+                    "references": {
+                        "DropdownStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownStyles",
+                            "referenceLocation": "DropdownStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown styles={{ root: { minWidth: '200px' } }}></x-dropdown>"
+                        }],
+                    "text": "Custom styles for dropdown parts."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpen": {},
+            "contextMenuPosition": {},
+            "selectedKeys": {},
+            "isDestroyed": {},
+            "currentPlacement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown onXOpenChange={(ev) => console.log(ev.detail)}></x-dropdown>"
+                        }],
+                    "text": "Called when the open state is changed."
+                },
+                "complexType": {
+                    "original": "DropdownOpenChangeEventDetail",
+                    "resolved": "DropdownOpenChangeEventDetail",
+                    "references": {
+                        "DropdownOpenChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownOpenChangeEventDetail",
+                            "referenceLocation": "DropdownOpenChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xMenuClick",
+                "name": "xMenuClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-dropdown onXMenuClick={(ev) => console.log(ev.detail)}></x-dropdown>"
+                        }],
+                    "text": "Called when a menu item is clicked."
+                },
+                "complexType": {
+                    "original": "DropdownMenuClickEventDetail",
+                    "resolved": "DropdownMenuClickEventDetail",
+                    "references": {
+                        "DropdownMenuClickEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-dropdown/types.ts::DropdownMenuClickEventDetail",
+                            "referenceLocation": "DropdownMenuClickEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "placement",
+                "methodName": "watchPlacement"
+            }, {
+                "propName": "open",
+                "methodName": "watchOpen"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}