@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1449 @@
+import { Host, h, } from "@stencil/core";
+import { getIcon } from "../../utils/config";
+export class XInput {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * The label text displayed before (on the left side of) the input field
+     * @example
+     * <x-input addonBefore="https://"></x-input>
+     */
+    addonBefore;
+    /**
+     * The label text displayed after (on the right side of) the input field
+     * @example
+     * <x-input addonAfter=".com"></x-input>
+     */
+    addonAfter;
+    /**
+     * If allow to remove input content with clear icon
+     * @example
+     * <x-input allowClear></x-input>
+     */
+    allowClear = false;
+    /**
+     * Whether has border style (deprecated, use variant instead)
+     * @example
+     * <x-input bordered={false}></x-input>
+     */
+    bordered = true;
+    /**
+     * Variant of input: 'outlined' | 'borderless' | 'filled'
+     * @example
+     * <x-input variant="filled"></x-input>
+     */
+    variant = 'outlined';
+    /**
+     * The initial input content
+     * @example
+     * <x-input defaultValue="hello"></x-input>
+     */
+    defaultValue = '';
+    /**
+     * Whether the input is disabled
+     * @example
+     * <x-input disabled></x-input>
+     */
+    disabled = false;
+    /**
+     * Whether the input is read only
+     * @example
+     * <x-input readOnly></x-input>
+     */
+    readOnly = false;
+    /**
+     * The ID for input
+     * @example
+     * <x-input inputId="email"></x-input>
+     */
+    inputId;
+    /**
+     * The max length
+     * @example
+     * <x-input maxLength={20}></x-input>
+     */
+    maxLength;
+    /**
+     * The min value (for number type)
+     * @example
+     * <x-input type="number" min={0}></x-input>
+     */
+    min;
+    /**
+     * The max value (for number type)
+     * @example
+     * <x-input type="number" max={100}></x-input>
+     */
+    max;
+    /**
+     * Step value (for number type)
+     * @example
+     * <x-input type="number" step={0.5}></x-input>
+     */
+    step;
+    /**
+     * The prefix icon for the Input
+     * @example
+     * <x-input prefixIcon="search"></x-input>
+     */
+    prefixIcon;
+    /**
+     * The suffix icon for the Input
+     * @example
+     * <x-input suffixIcon="close"></x-input>
+     */
+    suffixIcon;
+    /**
+     * The size of the input box: 'large' | 'middle' | 'small'
+     * @example
+     * <x-input size="small"></x-input>
+     */
+    size = 'middle';
+    /**
+     * Set validation status: 'error' | 'warning'
+     * @example
+     * <x-input status="error"></x-input>
+     */
+    status;
+    /**
+     * The type of input
+     * @example
+     * <x-input type="password"></x-input>
+     */
+    type = 'text';
+    /**
+     * The input content value
+     * @example
+     * <x-input value="demo"></x-input>
+     */
+    value = '';
+    /**
+     * Placeholder text
+     * @example
+     * <x-input placeholder="Type here"></x-input>
+     */
+    placeholder = '';
+    /**
+     * Name attribute for form
+     * @example
+     * <x-input name="email"></x-input>
+     */
+    name;
+    /**
+     * Auto focus on mount
+     * @example
+     * <x-input autofocus></x-input>
+     */
+    autofocus = false;
+    /**
+     * Autocomplete attribute
+     * @example
+     * <x-input autocomplete="email"></x-input>
+     */
+    autocomplete = 'off';
+    /**
+     * Whether to show character count
+     * @example
+     * <x-input showCount></x-input>
+     */
+    showCount = false;
+    /**
+     * Whether to show password toggle icon (for password type)
+     * @example
+     * <x-input type="password" showPasswordToggle={false}></x-input>
+     */
+    showPasswordToggle = true;
+    /**
+     * Pattern for validation
+     * @example
+     * <x-input pattern="[A-Za-z]+"></x-input>
+     */
+    pattern;
+    /**
+     * Required attribute
+     * @example
+     * <x-input required></x-input>
+     */
+    required = false;
+    /**
+     * Spellcheck attribute
+     * @example
+     * <x-input spellcheck></x-input>
+     */
+    spellcheck = false;
+    // ========================================
+    // STATE
+    // ========================================
+    /**
+     * Focus state.
+     */
+    focused = false;
+    /**
+     * Password visibility state.
+     */
+    passwordVisible = false;
+    /**
+     * Hover state for clear icon.
+     */
+    hovering = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when input value changes
+     * @example
+     * <x-input onXChange={(ev) => console.log(ev.detail)}></x-input>
+     */
+    xChange;
+    /**
+     * Emitted on input event
+     * @example
+     * <x-input onXInput={(ev) => console.log(ev.detail)}></x-input>
+     */
+    xInput;
+    /**
+     * Emitted when pressing Enter key
+     * @example
+     * <x-input onXPressEnter={(ev) => console.log(ev.key)}></x-input>
+     */
+    xPressEnter;
+    /**
+     * Emitted on focus
+     * @example
+     * <x-input onXFocus={(ev) => console.log(ev)}></x-input>
+     */
+    xFocus;
+    /**
+     * Emitted on blur
+     * @example
+     * <x-input onXBlur={(ev) => console.log(ev)}></x-input>
+     */
+    xBlur;
+    /**
+     * Emitted when clear button is clicked
+     * @example
+     * <x-input onXClear={() => {}}></x-input>
+     */
+    xClear;
+    // ========================================
+    // REFS
+    // ========================================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Initialize value before render.
+     *
+     * Flow:
+     * 1. Checks if `value` is empty but `defaultValue` is provided.
+     * 2. Sets internal `value` to `defaultValue`.
+     *
+     * @returns void
+     */
+    componentWillLoad() {
+        if (!this.value && this.defaultValue) {
+            this.value = this.defaultValue;
+        }
+    }
+    /**
+     * Auto focus on mount when enabled.
+     *
+     * Flow:
+     * 1. Checks `autofocus` prop and `disabled` state.
+     * 2. If allowed, schedules `setFocus()` in next animation frame.
+     *
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.autofocus && !this.disabled) {
+            requestAnimationFrame(() => {
+                this.setFocus();
+            });
+        }
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    /**
+     * Sync input element when value changes.
+     * @returns void
+     */
+    valueChanged() {
+        // Sync input value with prop
+        if (this.inputRef && this.inputRef.value !== this.value) {
+            this.inputRef.value = this.value;
+        }
+    }
+    // ========================================
+    // PUBLIC METHODS
+    // ========================================
+    /**
+     * Set focus on the input
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+    }
+    /**
+     * Remove focus from the input
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+    }
+    /**
+     * Select all text in the input
+     * @returns Promise<void>
+     * @example
+     * await el.select()
+     */
+    async select() {
+        this.inputRef?.select();
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Handle input change and emit events.
+     * @param e - Input event.
+     * @returns void
+     */
+    handleInput = (e) => {
+        const target = e.target;
+        const newValue = target.value;
+        // For number type, validate
+        if (this.type === 'number') {
+            const numValue = parseFloat(newValue);
+            if (!isNaN(numValue)) {
+                if (this.min !== undefined && numValue < this.min) {
+                    target.value = String(this.min);
+                    this.value = String(this.min);
+                }
+                else if (this.max !== undefined && numValue > this.max) {
+                    target.value = String(this.max);
+                    this.value = String(this.max);
+                }
+                else {
+                    this.value = newValue;
+                }
+            }
+            else if (newValue === '' || newValue === '-') {
+                this.value = newValue;
+            }
+        }
+        else {
+            this.value = newValue;
+        }
+        this.xInput.emit(e);
+        this.xChange.emit({ value: this.value, event: e });
+    };
+    /**
+     * Handle keydown for Enter.
+     * @param e - Keyboard event.
+     * @returns void
+     */
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            this.xPressEnter.emit(e);
+        }
+    };
+    /**
+     * Handle focus event.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleFocus = (e) => {
+        this.focused = true;
+        this.xFocus.emit(e);
+    };
+    /**
+     * Handle blur event.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleBlur = (e) => {
+        this.focused = false;
+        this.xBlur.emit(e);
+    };
+    /**
+     * Handle clear action.
+     *
+     * Flow:
+     * 1. Prevents default and stops propagation.
+     * 2. Resets `value` to empty string.
+     * 3. Emits `xChange` with empty value.
+     * 4. Emits `xClear`.
+     * 5. Refocuses the input element.
+     *
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.value = '';
+        this.xChange.emit({ value: '', event: e });
+        this.xClear.emit();
+        // Focus back to input
+        this.setFocus();
+    };
+    /**
+     * Track hover state on wrapper enter.
+     * @returns void
+     */
+    handleMouseEnter = () => {
+        this.hovering = true;
+    };
+    /**
+     * Track hover state on wrapper leave.
+     * @returns void
+     */
+    handleMouseLeave = () => {
+        this.hovering = false;
+    };
+    /**
+     * Toggle password visibility.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    togglePasswordVisibility = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.passwordVisible = !this.passwordVisible;
+    };
+    /**
+     * Resolve input type based on password visibility.
+     * @returns string
+     */
+    getInputType() {
+        if (this.type === 'password') {
+            return this.passwordVisible ? 'text' : 'password';
+        }
+        return this.type;
+    }
+    /**
+     * Resolve variant with bordered fallback.
+     * @returns InputVariant
+     */
+    getVariant() {
+        // Support deprecated bordered prop
+        if (!this.bordered) {
+            return 'borderless';
+        }
+        return this.variant;
+    }
+    /**
+     * Whether prefix content exists.
+     * @returns boolean
+     */
+    hasPrefix() {
+        return !!this.prefixIcon;
+    }
+    /**
+     * Whether suffix content exists.
+     * @returns boolean
+     */
+    hasSuffix() {
+        return (!!this.suffixIcon ||
+            this.allowClear ||
+            this.type === 'password' ||
+            this.showCount);
+    }
+    // ========================================
+    // RENDER METHODS
+    // ========================================
+    /**
+     * Render clear icon.
+     * @returns JSX.Element
+     */
+    renderClearIcon() {
+        return h("x-icon", { name: getIcon('clear') });
+    }
+    /**
+     * Render password visible icon.
+     * @returns JSX.Element
+     */
+    renderEyeIcon() {
+        return h("x-icon", { name: getIcon('visibility') });
+    }
+    /**
+     * Render password hidden icon.
+     * @returns JSX.Element
+     */
+    renderEyeInvisibleIcon() {
+        return h("x-icon", { name: getIcon('visibilityOff') });
+    }
+    /**
+     * Render prefix icon/slot.
+     * @returns JSX.Element | null
+     */
+    renderPrefix() {
+        if (!this.hasPrefix())
+            return null;
+        return (h("span", { class: "x-input-prefix" }, this.prefixIcon && h("x-icon", { name: this.prefixIcon }), h("slot", { name: "prefix" })));
+    }
+    /**
+     * Render suffix icons and count.
+     * @returns JSX.Element | null
+     */
+    renderSuffix() {
+        const showClear = this.allowClear && this.value && !this.disabled && !this.readOnly && this.hovering;
+        const isPassword = this.type === 'password' && this.showPasswordToggle;
+        if (!this.hasSuffix() && !showClear)
+            return null;
+        return (h("span", { class: "x-input-suffix" }, showClear && (h("span", { class: "x-input-clear-icon", onClick: this.handleClear, role: "button", tabIndex: -1, "aria-label": "clear" }, this.renderClearIcon())), isPassword && (h("span", { class: "x-input-password-icon", onClick: this.togglePasswordVisibility, role: "button", tabIndex: -1, "aria-label": this.passwordVisible ? 'hide password' : 'show password' }, this.passwordVisible ? this.renderEyeIcon() : this.renderEyeInvisibleIcon())), this.suffixIcon && h("x-icon", { name: this.suffixIcon }), h("slot", { name: "suffix" }), this.showCount && (h("span", { class: "x-input-count" }, this.value?.length || 0, this.maxLength !== undefined && `/${this.maxLength}`))));
+    }
+    /**
+     * Render input element.
+     * @returns JSX.Element
+     */
+    renderInput() {
+        return (h("input", { ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-input", type: this.getInputType(), value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, maxLength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, required: this.required, autoComplete: this.autocomplete, spellcheck: this.spellcheck, "aria-invalid": this.status === 'error' ? 'true' : undefined, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+    }
+    /**
+     * Render input with addons and affixes.
+     * @returns JSX.Element
+     * @example
+     * <x-input addonBefore="https://" suffixIcon="close"></x-input>
+     */
+    render() {
+        const variant = this.getVariant();
+        const hasAddon = this.addonBefore || this.addonAfter;
+        const wrapperClasses = {
+            'x-input-wrapper': true,
+            'x-input-group': !!hasAddon,
+            [`x-input-wrapper-${this.size}`]: true,
+            'x-input-wrapper-disabled': this.disabled,
+            'x-input-wrapper-readonly': this.readOnly,
+            [`x-input-wrapper-status-${this.status}`]: !!this.status,
+        };
+        const affixWrapperClasses = {
+            'x-input-affix-wrapper': true,
+            'x-input-affix-wrapper-focused': this.focused,
+            'x-input-affix-wrapper-disabled': this.disabled,
+            'x-input-affix-wrapper-readonly': this.readOnly,
+            'disabled': this.disabled,
+            'readonly': this.readOnly,
+            [`x-input-affix-wrapper-${this.size}`]: true,
+            [`x-input-affix-wrapper-${variant}`]: true,
+            [`x-input-affix-wrapper-status-${this.status}`]: !!this.status,
+            'x-input-affix-wrapper-has-prefix': this.hasPrefix(),
+            'x-input-affix-wrapper-has-suffix': this.hasSuffix(),
+        };
+        return (h(Host, { key: '4df8b3203a3cf17705ec1fcc56e016503414d633', class: wrapperClasses }, this.addonBefore && (h("span", { key: '00788fdccceee9722e9b452dc2557a91db2f7abf', class: "x-input-group-addon x-input-group-addon-before" }, this.addonBefore, h("slot", { key: '9c63be1e6b447d77f346f47955459e225b993dec', name: "addonBefore" }))), h("div", { key: '213841b2078abf21f8026632b1f82acebcbefa39', class: affixWrapperClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.renderPrefix(), this.renderInput(), this.renderSuffix()), this.addonAfter && (h("span", { key: '89597130f3daf173bbf798e6b5fd4d7032c60198', class: "x-input-group-addon x-input-group-addon-after" }, this.addonAfter, h("slot", { key: 'c1a9c1e9e626437b790d05448f85c6b052bdcb0a', name: "addonAfter" })))));
+    }
+    static get is() { return "x-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "addonBefore": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input addonBefore=\"https://\"></x-input>"
+                        }],
+                    "text": "The label text displayed before (on the left side of) the input field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-before"
+            },
+            "addonAfter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input addonAfter=\".com\"></x-input>"
+                        }],
+                    "text": "The label text displayed after (on the right side of) the input field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-after"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input allowClear></x-input>"
+                        }],
+                    "text": "If allow to remove input content with clear icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "false"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input bordered={false}></x-input>"
+                        }],
+                    "text": "Whether has border style (deprecated, use variant instead)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputVariant",
+                    "resolved": "\"borderless\" | \"filled\" | \"outlined\"",
+                    "references": {
+                        "InputVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input/types.ts::InputVariant",
+                            "referenceLocation": "InputVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input variant=\"filled\"></x-input>"
+                        }],
+                    "text": "Variant of input: 'outlined' | 'borderless' | 'filled'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input defaultValue=\"hello\"></x-input>"
+                        }],
+                    "text": "The initial input content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input disabled></x-input>"
+                        }],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input readOnly></x-input>"
+                        }],
+                    "text": "Whether the input is read only"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input inputId=\"email\"></x-input>"
+                        }],
+                    "text": "The ID for input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input maxLength={20}></x-input>"
+                        }],
+                    "text": "The max length"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input type=\"number\" min={0}></x-input>"
+                        }],
+                    "text": "The min value (for number type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input type=\"number\" max={100}></x-input>"
+                        }],
+                    "text": "The max value (for number type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input type=\"number\" step={0.5}></x-input>"
+                        }],
+                    "text": "Step value (for number type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step"
+            },
+            "prefixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input prefixIcon=\"search\"></x-input>"
+                        }],
+                    "text": "The prefix icon for the Input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-icon"
+            },
+            "suffixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input suffixIcon=\"close\"></x-input>"
+                        }],
+                    "text": "The suffix icon for the Input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-icon"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "InputSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input/types.ts::InputSize",
+                            "referenceLocation": "InputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input size=\"small\"></x-input>"
+                        }],
+                    "text": "The size of the input box: 'large' | 'middle' | 'small'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "InputStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input/types.ts::InputStatus",
+                            "referenceLocation": "InputStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input status=\"error\"></x-input>"
+                        }],
+                    "text": "Set validation status: 'error' | 'warning'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputType",
+                    "resolved": "\"color\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "InputType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input/types.ts::InputType",
+                            "referenceLocation": "InputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input type=\"password\"></x-input>"
+                        }],
+                    "text": "The type of input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input value=\"demo\"></x-input>"
+                        }],
+                    "text": "The input content value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input placeholder=\"Type here\"></x-input>"
+                        }],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input name=\"email\"></x-input>"
+                        }],
+                    "text": "Name attribute for form"
+                },
+                "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 autofocus></x-input>"
+                        }],
+                    "text": "Auto focus on mount"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input autocomplete=\"email\"></x-input>"
+                        }],
+                    "text": "Autocomplete attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'off'"
+            },
+            "showCount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input showCount></x-input>"
+                        }],
+                    "text": "Whether to show character count"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-count",
+                "defaultValue": "false"
+            },
+            "showPasswordToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input type=\"password\" showPasswordToggle={false}></x-input>"
+                        }],
+                    "text": "Whether to show password toggle icon (for password type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-password-toggle",
+                "defaultValue": "true"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input pattern=\"[A-Za-z]+\"></x-input>"
+                        }],
+                    "text": "Pattern for validation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input required></x-input>"
+                        }],
+                    "text": "Required attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "spellcheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input spellcheck></x-input>"
+                        }],
+                    "text": "Spellcheck attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spellcheck",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "passwordVisible": {},
+            "hovering": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input onXChange={(ev) => console.log(ev.detail)}></x-input>"
+                        }],
+                    "text": "Emitted when input value changes"
+                },
+                "complexType": {
+                    "original": "InputChangeEventDetail",
+                    "resolved": "InputChangeEventDetail",
+                    "references": {
+                        "InputChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input/types.ts::InputChangeEventDetail",
+                            "referenceLocation": "InputChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xInput",
+                "name": "xInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input onXInput={(ev) => console.log(ev.detail)}></x-input>"
+                        }],
+                    "text": "Emitted on input event"
+                },
+                "complexType": {
+                    "original": "InputEvent",
+                    "resolved": "InputEvent",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPressEnter",
+                "name": "xPressEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input onXPressEnter={(ev) => console.log(ev.key)}></x-input>"
+                        }],
+                    "text": "Emitted when pressing Enter key"
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input onXFocus={(ev) => console.log(ev)}></x-input>"
+                        }],
+                    "text": "Emitted on focus"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xBlur",
+                "name": "xBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input onXBlur={(ev) => console.log(ev)}></x-input>"
+                        }],
+                    "text": "Emitted on blur"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xClear",
+                "name": "xClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input onXClear={() => {}}></x-input>"
+                        }],
+                    "text": "Emitted when clear button is clicked"
+                },
+                "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": "Set focus on the input",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.setFocus()"
+                        }]
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove focus from the input",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.setBlur()"
+                        }]
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select all text in the input",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.select()"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}