@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-input-icon/x-input-icon.js

@@ -0,0 +1,917 @@
+import { Host, h } from "@stencil/core";
+import { PortalController } from "../x-portal/portal-controller";
+import { translate } from "../../locales/locale.service";
+export class XInputIcon {
+    el;
+    /**
+     * Whether the input is disabled.
+     * @example <x-input-icon disabled></x-input-icon>
+     * @default false
+     */
+    disabled = false;
+    /**
+     * The selected icon name (controlled value).
+     * @example <x-input-icon value="home"></x-input-icon>
+     * @default ''
+     */
+    value = '';
+    /**
+     * The initial icon name (uncontrolled).
+     * @example <x-input-icon defaultValue="home"></x-input-icon>
+     */
+    defaultValue;
+    /**
+     * Placeholder text shown when no icon is selected.
+     * @example <x-input-icon placeholder="Choose an icon"></x-input-icon>
+     * @default 'Select icon'
+     */
+    placeholder = translate('InputIcon.placeholder', {}, 'Select icon');
+    /**
+     * Size of the input trigger: 'large' | 'middle' | 'small'.
+     * @example <x-input-icon size="large"></x-input-icon>
+     * @default 'middle'
+     */
+    size = 'middle';
+    /**
+     * Visual variant of the trigger: 'outlined' | 'filled' | 'borderless'.
+     * Mapped to x-select's `bordered` prop internally.
+     * @example <x-input-icon variant="borderless"></x-input-icon>
+     * @default 'outlined'
+     */
+    variant = 'outlined';
+    /**
+     * Validation status: 'error' | 'warning'.
+     * @example <x-input-icon status="error"></x-input-icon>
+     */
+    status;
+    /**
+     * Placement of the icon picker dropdown.
+     * @example <x-input-icon placement="bottomRight"></x-input-icon>
+     * @default 'bottomLeft'
+     */
+    placement = 'bottomLeft';
+    /**
+     * The trigger type: 'input' | 'avatar' | 'button' | 'div' | 'icon'.
+     * @example <x-input-icon triggerType="avatar"></x-input-icon>
+     * @default 'input'
+     */
+    triggerType = 'input';
+    /**
+     * Whether to show the clear button when a value is selected.
+     * @example <x-input-icon [allowClear]="false"></x-input-icon>
+     * @default true
+     */
+    allowClear = true;
+    /**
+     * Whether to show the icon name as text inside the input.
+     * Set to false to display only the icon glyph.
+     * @example <x-input-icon [showName]="false"></x-input-icon>
+     * @default true
+     */
+    showName = true;
+    /**
+     * Whether the dropdown picker is open (controlled).
+     * @example <x-input-icon [open]="true"></x-input-icon>
+     * @default false
+     */
+    open = false;
+    /**
+     * The id attribute for the inner input element.
+     * Useful for associating a <label> element.
+     * @example <x-input-icon inputId="icon-field"></x-input-icon>
+     */
+    inputId;
+    /**
+     * The name attribute for the inner input (form submission).
+     * @example <x-input-icon name="menuIcon"></x-input-icon>
+     */
+    name;
+    /**
+     * Whether to auto-focus the input on mount.
+     * @example <x-input-icon autofocus></x-input-icon>
+     * @default false
+     */
+    autofocus = false;
+    focused = false;
+    /** Current search text typed in x-select's showSearch input */
+    pickerSearchQuery = '';
+    /**
+     * Emitted when the selected icon changes.
+     * @example (xChange)="handleChange($event)"
+     */
+    xChange;
+    /**
+     * Emitted when the dropdown open state changes.
+     * @example (xOpenChange)="handleOpenChange($event)"
+     */
+    xOpenChange;
+    /**
+     * Emitted when the input loses focus.
+     * @example (xBlur)="handleBlur($event)"
+     */
+    xBlur;
+    /**
+     * Emitted when the input gains focus.
+     * @example (xFocus)="handleFocus($event)"
+     */
+    xFocus;
+    wrapperRef;
+    inputRef;
+    portalInstance = null;
+    /** Persistent reference to the dropdown content element for live searchQuery updates */
+    dropdownContentEl = null;
+    componentWillLoad() {
+        if (!this.value && this.defaultValue) {
+            this.value = this.defaultValue;
+        }
+    }
+    componentDidLoad() {
+        if (this.autofocus && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    openChanged(newValue) {
+        this.xOpenChange.emit(newValue);
+        if (newValue) {
+            this.createOrUpdatePortal();
+        }
+        else {
+            this.destroyPortal();
+        }
+    }
+    handleWindowClick(ev) {
+        if (!this.open)
+            return;
+        const path = ev.composedPath();
+        const isInsideComponent = path.includes(this.el);
+        const portalEl = this.portalInstance?.getElement();
+        const isInsidePortal = portalEl ? path.includes(portalEl) : false;
+        if (!isInsideComponent && !isInsidePortal) {
+            this.closeDropdown();
+        }
+    }
+    handleKeydown(ev) {
+        if (this.disabled)
+            return;
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            this.closeDropdown();
+            this.inputRef?.setBlur();
+        }
+        else if (ev.key === 'Enter') {
+            if (!this.open) {
+                this.openDropdown();
+            }
+        }
+    }
+    async setFocus() {
+        this.inputRef?.setFocus();
+        this.focused = true;
+    }
+    async setBlur() {
+        this.inputRef?.setBlur();
+        this.focused = false;
+    }
+    /** Handle search text typed in x-select → propagate to dropdown content */
+    handleSearch = (e) => {
+        const query = (e.detail || '').toLowerCase().trim();
+        this.pickerSearchQuery = query;
+        // Update existing dropdown element directly without rebuilding portal
+        if (this.dropdownContentEl) {
+            this.dropdownContentEl.searchQuery = query;
+        }
+        // Ensure portal is open when user starts typing
+        if (!this.open) {
+            this.openDropdown();
+        }
+    };
+    /**
+     * Wrapper click handler — toggles the icon picker portal open/closed.
+     * Click when closed → opens portal.
+     * Click when open  → closes portal (toggle behavior).
+     */
+    handleWrapperClick = (e) => {
+        if (this.disabled)
+            return;
+        // Detect if the click came from x-select's clear button (inside its shadow DOM).
+        const path = e.composedPath();
+        const isClearBtn = path.some(node => {
+            const el = node;
+            return el && el.classList && el.classList.contains('x-select-clear');
+        });
+        if (isClearBtn)
+            return;
+        // Toggle: close if already open, open if closed
+        if (this.open) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    };
+    openDropdown() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+    }
+    closeDropdown() {
+        if (!this.open)
+            return;
+        this.open = false;
+        // Reset search query so next open starts fresh
+        this.pickerSearchQuery = '';
+        if (this.dropdownContentEl) {
+            this.dropdownContentEl.searchQuery = '';
+        }
+    }
+    handleIconSelect = (icon) => {
+        this.value = icon;
+        this.xChange.emit({ value: icon });
+        this.closeDropdown();
+        this.inputRef?.setFocus();
+    };
+    handleClear = () => {
+        this.value = '';
+        this.xChange.emit({ value: '' });
+    };
+    handleInputFocus = (e) => {
+        this.focused = true;
+        this.xFocus.emit(e.detail);
+        // Do NOT auto-open here — wrapper onClick handles toggle.
+        // Auto-opening on focus conflicts with the toggle close behavior.
+    };
+    handleInputBlur = (e) => {
+        this.focused = false;
+        this.xBlur.emit(e.detail);
+    };
+    getWrapperEl() {
+        return this.wrapperRef || undefined;
+    }
+    createOrUpdatePortal() {
+        if (!this.open)
+            return;
+        const triggerEl = this.getWrapperEl();
+        if (!triggerEl)
+            return;
+        const dropdownContent = this.buildDropdownElement();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: true,
+                target: triggerEl,
+                placement: this.placement,
+                zIndex: 1050,
+                content: dropdownContent,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: true,
+                target: triggerEl,
+                placement: this.placement,
+                zIndex: 1050,
+                content: dropdownContent,
+            });
+        }
+    }
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+        this.dropdownContentEl = null;
+        this.pickerSearchQuery = '';
+    }
+    buildDropdownElement() {
+        // Reuse existing element to preserve searchQuery and observer state
+        if (!this.dropdownContentEl) {
+            const el = document.createElement('x-icon-picker-dropdown-content');
+            el.addEventListener('xIconClick', ((e) => {
+                this.handleIconSelect(e.detail);
+            }));
+            el.addEventListener('xSearch', ((e) => {
+                this.handleSearch({ detail: e.detail });
+            }));
+            this.dropdownContentEl = el;
+        }
+        const classes = {
+            'x-input-icon-dropdown': true,
+            'x-input-icon-dropdown-hidden': !this.open,
+        };
+        this.dropdownContentEl.dropdownClasses = classes;
+        this.dropdownContentEl.value = this.value;
+        this.dropdownContentEl.placement = this.placement;
+        this.dropdownContentEl.searchQuery = this.pickerSearchQuery;
+        this.dropdownContentEl.showSearchInput = this.triggerType !== 'input';
+        return this.dropdownContentEl;
+    }
+    renderTrigger(hasValue, isSearching) {
+        if (this.triggerType === 'avatar') {
+            return (h("x-avatar", { icon: this.value || undefined, size: this.size === 'middle' ? 'default' : this.size }, !this.value && this.showName ? this.placeholder : ''));
+        }
+        if (this.triggerType === 'button') {
+            return (h("x-button", { size: this.size, disabled: this.disabled, type: this.variant === 'filled' ? 'primary' : 'default' }, hasValue && h("x-icon", { name: this.value, slot: "icon" }), hasValue ? (this.showName ? this.value : '') : this.placeholder));
+        }
+        if (this.triggerType === 'icon') {
+            return (h("x-icon", { name: hasValue ? this.value : 'appstore' }));
+        }
+        if (this.triggerType === 'div') {
+            return (h("div", null, hasValue && h("x-icon", { name: this.value }), h("span", null, hasValue ? (this.showName ? this.value : '') : this.placeholder)));
+        }
+        // Default 'input' trigger
+        return [
+            hasValue && !isSearching && (h("div", { class: "x-input-icon-preview", "aria-hidden": "true", key: "preview" }, h("x-icon", { name: this.value }))),
+            h("x-select", { key: "select", ref: el => (this.inputRef = el), open: false, value: hasValue ? this.value : undefined, options: hasValue ? [{ value: this.value, label: this.showName ? this.value : '' }] : [], placeholder: this.placeholder, allowClear: this.allowClear && hasValue, disabled: this.disabled, size: this.size, status: this.status, bordered: this.variant !== 'borderless', inputId: this.inputId, name: this.name, showSearch: true, dropdownStyle: { display: 'none' }, notFoundContent: " ", onXSearch: this.handleSearch, onXClear: this.handleClear, onXBlur: this.handleInputBlur, onXFocus: this.handleInputFocus }),
+        ];
+    }
+    render() {
+        const hasValue = !!this.value;
+        // When searching, hide the icon preview and remove left-padding shift
+        const isSearching = !!this.pickerSearchQuery;
+        return (h(Host, { key: '0076a9cc582b756efee6dd13fbf5f002ce2a2e6d' }, h("div", { key: 'bc64265cd01262fb2acf6c407743178528c51ded', class: {
+                'x-input-icon-wrapper': true,
+                // Only apply icon-offset padding when showing icon (not during search)
+                'x-input-icon-has-value': hasValue && !isSearching && this.triggerType === 'input',
+                'x-input-icon-only-icon': !this.showName && this.triggerType === 'input',
+                [`x-input-icon-${this.triggerType}`]: true,
+            }, ref: el => (this.wrapperRef = el), onClick: this.handleWrapperClick }, this.renderTrigger(hasValue, isSearching))));
+    }
+    static get is() { return "x-input-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-input-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-input-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon disabled></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the input is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon value=\"home\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "The selected icon name (controlled value)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon defaultValue=\"home\"></x-input-icon>"
+                        }],
+                    "text": "The initial icon name (uncontrolled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon placeholder=\"Choose an icon\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "'Select icon'"
+                        }],
+                    "text": "Placeholder text shown when no icon is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "translate('InputIcon.placeholder', {}, 'Select icon')"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputIconSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "InputIconSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-icon/types.ts::InputIconSize",
+                            "referenceLocation": "InputIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon size=\"large\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "'middle'"
+                        }],
+                    "text": "Size of the input trigger: 'large' | 'middle' | 'small'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'outlined' | 'filled' | 'borderless'",
+                    "resolved": "\"borderless\" | \"filled\" | \"outlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon variant=\"borderless\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "'outlined'"
+                        }],
+                    "text": "Visual variant of the trigger: 'outlined' | 'filled' | 'borderless'.\nMapped to x-select's `bordered` prop internally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputIconStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "InputIconStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-icon/types.ts::InputIconStatus",
+                            "referenceLocation": "InputIconStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon status=\"error\"></x-input-icon>"
+                        }],
+                    "text": "Validation status: 'error' | 'warning'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputIconPlacement",
+                    "resolved": "\"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "InputIconPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-icon/types.ts::InputIconPlacement",
+                            "referenceLocation": "InputIconPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon placement=\"bottomRight\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "'bottomLeft'"
+                        }],
+                    "text": "Placement of the icon picker dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "triggerType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputIconTriggerType",
+                    "resolved": "\"avatar\" | \"button\" | \"div\" | \"icon\" | \"input\"",
+                    "references": {
+                        "InputIconTriggerType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-icon/types.ts::InputIconTriggerType",
+                            "referenceLocation": "InputIconTriggerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon triggerType=\"avatar\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "'input'"
+                        }],
+                    "text": "The trigger type: 'input' | 'avatar' | 'button' | 'div' | 'icon'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-type",
+                "defaultValue": "'input'"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon [allowClear]=\"false\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to show the clear button when a value is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "true"
+            },
+            "showName": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon [showName]=\"false\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to show the icon name as text inside the input.\nSet to false to display only the icon glyph."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-name",
+                "defaultValue": "true"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon [open]=\"true\"></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the dropdown picker is open (controlled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon inputId=\"icon-field\"></x-input-icon>"
+                        }],
+                    "text": "The id attribute for the inner input element.\nUseful for associating a <label> element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon name=\"menuIcon\"></x-input-icon>"
+                        }],
+                    "text": "The name attribute for the inner input (form submission)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-icon autofocus></x-input-icon>"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether to auto-focus the input on mount."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "pickerSearchQuery": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "(xChange)=\"handleChange($event)\""
+                        }],
+                    "text": "Emitted when the selected icon changes."
+                },
+                "complexType": {
+                    "original": "InputIconChangeEventDetail",
+                    "resolved": "InputIconChangeEventDetail",
+                    "references": {
+                        "InputIconChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-icon/types.ts::InputIconChangeEventDetail",
+                            "referenceLocation": "InputIconChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "(xOpenChange)=\"handleOpenChange($event)\""
+                        }],
+                    "text": "Emitted when the dropdown open state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "xBlur",
+                "name": "xBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "(xBlur)=\"handleBlur($event)\""
+                        }],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "(xFocus)=\"handleFocus($event)\""
+                        }],
+                    "text": "Emitted when the input gains focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}