@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1488 @@
+import { Host, h, } from "@stencil/core";
+import { getIcon } from "../../utils/config";
+import { clampValue, addStep, formatWithPrecision } from "./types";
+/**
+ * @component x-input-number
+ * @description Input number component following Ant Design specification.
+ * Enter a number within certain range with the mouse or keyboard.
+ *
+ * @slot addonBefore - The label text displayed before the input field
+ * @slot addonAfter - The label text displayed after the input field
+ * @slot prefix - The prefix icon for the Input
+ * @slot suffix - The suffix icon for the Input
+ *
+ * @example
+ * <x-input-number value="3" min="1" max="10"></x-input-number>
+ */
+export class XInputNumber {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * The label text displayed after (on the right side of) the input field
+     * @example
+     * <x-input-number addonAfter="USD"></x-input-number>
+     */
+    addonAfter;
+    /**
+     * The label text displayed before (on the left side of) the input field
+     * @example
+     * <x-input-number addonBefore="$"></x-input-number>
+     */
+    addonBefore;
+    /**
+     * Whether to get focus when component mounted
+     * @default false
+     * @example
+     * <x-input-number autoFocus></x-input-number>
+     */
+    autoFocus = false;
+    /**
+     * Whether to show +/- controls
+     * @default true
+     * @example
+     * <x-input-number controls={false}></x-input-number>
+     */
+    controls = true;
+    /**
+     * Custom decimal separator
+     * @example
+     * <x-input-number decimalSeparator=","></x-input-number>
+     */
+    decimalSeparator;
+    /**
+     * Default value
+     * @example
+     * <x-input-number defaultValue={3}></x-input-number>
+     */
+    defaultValue;
+    /**
+     * Whether the input is disabled
+     * @default false
+     * @example
+     * <x-input-number disabled></x-input-number>
+     */
+    disabled = false;
+    /**
+     * Specifies the format of the value presented
+     * @example
+     * <x-input-number formatter={(v) => `$${v}`}></x-input-number>
+     */
+    formatter;
+    /**
+     * Whether to enable keyboard behavior
+     * @default true
+     * @example
+     * <x-input-number keyboard={false}></x-input-number>
+     */
+    keyboard = true;
+    /**
+     * The max value
+     * @default Number.MAX_SAFE_INTEGER
+     * @example
+     * <x-input-number max={100}></x-input-number>
+     */
+    max = Number.MAX_SAFE_INTEGER;
+    /**
+     * The min value
+     * @default Number.MIN_SAFE_INTEGER
+     * @example
+     * <x-input-number min={0}></x-input-number>
+     */
+    min = Number.MIN_SAFE_INTEGER;
+    /**
+     * Specifies the value extracted from formatter
+     * @example
+     * <x-input-number parser={(v) => v.replace(/[^\d.]/g, '')}></x-input-number>
+     */
+    parser;
+    /**
+     * Placeholder text
+     * @example
+     * <x-input-number placeholder="Amount"></x-input-number>
+     */
+    placeholder;
+    /**
+     * The precision of input value
+     * @example
+     * <x-input-number precision={2}></x-input-number>
+     */
+    precision;
+    /**
+     * The prefix icon/text for the Input
+     * @example
+     * <x-input-number prefixIcon="calculate"></x-input-number>
+     */
+    prefixIcon;
+    /**
+     * Whether the input is read only
+     * @default false
+     * @example
+     * <x-input-number readOnly></x-input-number>
+     */
+    readOnly = false;
+    /**
+     * The size of the input box
+     * @default 'middle'
+     * @example
+     * <x-input-number size="small"></x-input-number>
+     */
+    size = 'middle';
+    /**
+     * Set validation status
+     * @example
+     * <x-input-number status="error"></x-input-number>
+     */
+    status;
+    /**
+     * The number to which the current value is increased or decreased
+     * @default 1
+     * @example
+     * <x-input-number step={0.5}></x-input-number>
+     */
+    step = 1;
+    /**
+     * Set value as string to support high precision decimals
+     * @default false
+     * @example
+     * <x-input-number stringMode></x-input-number>
+     */
+    stringMode = false;
+    /**
+     * The suffix icon/text for the Input
+     * @example
+     * <x-input-number suffix="kg"></x-input-number>
+     */
+    suffix;
+    /**
+     * Current value
+     * @example
+     * <x-input-number value={10}></x-input-number>
+     */
+    value;
+    /**
+     * Variants of Input
+     * @default 'outlined'
+     * @example
+     * <x-input-number variant="filled"></x-input-number>
+     */
+    variant = 'outlined';
+    /**
+     * Enable wheel to change value
+     * @default false
+     * @example
+     * <x-input-number changeOnWheel></x-input-number>
+     */
+    changeOnWheel = false;
+    /**
+     * Custom class names
+     * @example
+     * <x-input-number classNames={{ root: 'my-input-number' }}></x-input-number>
+     */
+    classNames;
+    /**
+     * Custom styles
+     * @example
+     * <x-input-number styles={{ root: { width: '200px' } }}></x-input-number>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Emitted when value is changed
+     * @example
+     * <x-input-number onXChange={(ev) => console.log(ev.detail)}></x-input-number>
+     */
+    xChange;
+    /**
+     * Emitted when the user presses Enter
+     * @example
+     * <x-input-number onXPressEnter={(ev) => console.log(ev.key)}></x-input-number>
+     */
+    xPressEnter;
+    /**
+     * Emitted when step button is clicked
+     * @example
+     * <x-input-number onXStep={(ev) => console.log(ev.detail)}></x-input-number>
+     */
+    xStep;
+    /**
+     * Emitted when input gets focus
+     * @example
+     * <x-input-number onXFocus={(ev) => console.log(ev)}></x-input-number>
+     */
+    xFocus;
+    /**
+     * Emitted when input loses focus
+     * @example
+     * <x-input-number onXBlur={(ev) => console.log(ev)}></x-input-number>
+     */
+    xBlur;
+    // ==================== State ====================
+    /**
+     * Focus state.
+     */
+    focused = false;
+    /**
+     * Display value in input.
+     */
+    inputValue = '';
+    /**
+     * Typing state to avoid clamping mid-typing.
+     */
+    isTyping = false;
+    // ==================== Private Properties ====================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    /**
+     * Timer for long-press stepping.
+     */
+    holdTimer;
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize value before render.
+     * @returns void
+     */
+    componentWillLoad() {
+        // Initialize value
+        if (this.value === undefined && this.defaultValue !== undefined) {
+            this.value = this.defaultValue;
+        }
+        this.updateInputValue();
+    }
+    /**
+     * Auto focus on mount when enabled.
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.autoFocus && this.inputRef) {
+            this.inputRef.focus();
+        }
+    }
+    /**
+     * Cleanup timers on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        if (this.holdTimer) {
+            clearInterval(this.holdTimer);
+        }
+    }
+    // ==================== Watchers ====================
+    /**
+     * Sync input display when value changes.
+     * @returns void
+     */
+    handleValueChange() {
+        if (!this.isTyping) {
+            this.updateInputValue();
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Focus the input element
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+    }
+    /**
+     * Remove focus from the input element
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Update formatted input display value.
+     *
+     * Flow:
+     * 1. Checks if `value` is valid.
+     * 2. Formats value using `formatter` prop or default `formatWithPrecision`.
+     * 3. Replaces decimal separator if custom one is provided.
+     * 4. Updates `inputValue` state (which is displayed in the input).
+     *
+     * @returns void
+     */
+    updateInputValue() {
+        let displayValue = '';
+        if (this.value !== null && this.value !== undefined && this.value !== '') {
+            if (this.formatter) {
+                displayValue = this.formatter(this.value, {
+                    userTyping: this.isTyping,
+                    input: this.inputValue,
+                });
+            }
+            else {
+                displayValue = formatWithPrecision(this.value, this.precision);
+            }
+            // Apply custom decimal separator
+            if (this.decimalSeparator && this.decimalSeparator !== '.') {
+                displayValue = displayValue.replace('.', this.decimalSeparator);
+            }
+        }
+        this.inputValue = displayValue;
+    }
+    /**
+     * Parse input string into numeric value.
+     *
+     * Flow:
+     * 1. Handles empty or invalid inputs.
+     * 2. Applies `parser` prop if provided.
+     * 3. Normalizes custom decimal separator to dot.
+     * 4. Removes non-numeric characters.
+     * 5. Parses string to float.
+     *
+     * @param input - Input string.
+     * @returns InputNumberValue
+     */
+    parseValue(input) {
+        if (!input || input === '' || input === '-') {
+            return null;
+        }
+        let value = input;
+        // Apply parser if provided
+        if (this.parser) {
+            return this.parser(value);
+        }
+        // Replace custom decimal separator
+        if (this.decimalSeparator && this.decimalSeparator !== '.') {
+            value = value.replace(new RegExp(`\\${this.decimalSeparator}`, 'g'), '.');
+        }
+        // Remove non-numeric characters
+        value = value.replace(/[^\d.-]/g, '');
+        const numValue = parseFloat(value);
+        return isNaN(numValue) ? null : numValue;
+    }
+    /**
+     * Handle input change and emit events.
+     *
+     * Flow:
+     * 1. Updates `inputValue` state from target.
+     * 2. Sets `isTyping` flag to true (prevents auto-formatting while typing).
+     * 3. Parses value.
+     * 4. Updates `value` state (without clamping, to allow intermediate invalid states while typing).
+     * 5. Emits `xChange` event.
+     *
+     * @param e - Input event.
+     * @returns void
+     */
+    handleInput = (e) => {
+        const target = e.target;
+        this.inputValue = target.value;
+        this.isTyping = true;
+        const parsedValue = this.parseValue(target.value);
+        if (parsedValue !== null) {
+            // Don't clamp while typing, just update value
+            this.value = this.stringMode ? String(parsedValue) : parsedValue;
+            this.xChange.emit({ value: this.value });
+        }
+    };
+    /**
+     * Handle input focus.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleFocus = (e) => {
+        this.focused = true;
+        this.xFocus.emit(e);
+    };
+    /**
+     * Handle input blur and clamp value.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleBlur = (e) => {
+        this.focused = false;
+        this.isTyping = false;
+        // Validate and clamp value on blur
+        let finalValue = this.value;
+        if (finalValue !== null && finalValue !== undefined && finalValue !== '') {
+            finalValue = clampValue(finalValue, this.min, this.max, this.precision);
+        }
+        if (finalValue !== this.value) {
+            this.value = finalValue;
+            this.xChange.emit({ value: this.value });
+        }
+        this.updateInputValue();
+        this.xBlur.emit(e);
+    };
+    /**
+     * Handle keyboard input and stepping.
+     * @param e - Keyboard event.
+     * @returns void
+     */
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            this.xPressEnter.emit(e);
+            this.handleBlur(e);
+        }
+        else if (this.keyboard) {
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.handleStep('up');
+            }
+            else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.handleStep('down');
+            }
+        }
+    };
+    /**
+     * Handle mouse wheel for stepping.
+     * @param e - Wheel event.
+     * @returns void
+     */
+    handleWheel = (e) => {
+        if (!this.changeOnWheel || !this.focused || this.disabled || this.readOnly) {
+            return;
+        }
+        e.preventDefault();
+        if (e.deltaY < 0) {
+            this.handleStep('up');
+        }
+        else if (e.deltaY > 0) {
+            this.handleStep('down');
+        }
+    };
+    /**
+     * Handle step change.
+     *
+     * Flow:
+     * 1. Checks if disabled or readonly.
+     * 2. Calculates next value using `addStep`.
+     * 3. Clamps result within bounds.
+     * 4. Updates `value` and `inputValue`.
+     * 5. Emits `xChange` and `xStep` events.
+     *
+     * @param type - Step direction.
+     * @returns void
+     */
+    handleStep = (type) => {
+        if (this.disabled || this.readOnly)
+            return;
+        const nextValue = addStep(this.value, this.step, type, this.precision);
+        const clampedValue = clampValue(nextValue, this.min, this.max, this.precision);
+        if (clampedValue !== null) {
+            this.value = this.stringMode ? String(clampedValue) : clampedValue;
+            this.isTyping = false;
+            this.updateInputValue();
+            this.xChange.emit({ value: this.value });
+            this.xStep.emit({
+                value: this.value,
+                offset: type === 'up' ? this.step : -this.step,
+                type,
+            });
+        }
+    };
+    /**
+     * Handle step button press and start repeat.
+     * @param type - Step direction.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleStepMouseDown = (type, e) => {
+        e.preventDefault();
+        this.handleStep(type);
+        // Long press handling
+        let delay = 600;
+        const repeatStep = () => {
+            this.handleStep(type);
+            delay = Math.max(50, delay * 0.9);
+            this.holdTimer = window.setTimeout(repeatStep, delay);
+        };
+        this.holdTimer = window.setTimeout(repeatStep, delay);
+    };
+    /**
+     * Stop long-press stepping.
+     * @returns void
+     */
+    handleStepMouseUp = () => {
+        if (this.holdTimer) {
+            clearTimeout(this.holdTimer);
+            this.holdTimer = undefined;
+        }
+    };
+    /**
+     * Check if step-up is disabled.
+     * @returns boolean
+     */
+    isUpDisabled() {
+        if (this.disabled || this.readOnly)
+            return true;
+        const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
+        return numValue !== null && numValue !== undefined && !isNaN(numValue) && numValue >= this.max;
+    }
+    /**
+     * Check if step-down is disabled.
+     * @returns boolean
+     */
+    isDownDisabled() {
+        if (this.disabled || this.readOnly)
+            return true;
+        const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
+        return numValue !== null && numValue !== undefined && !isNaN(numValue) && numValue <= this.min;
+    }
+    /**
+     * Check if current value is out of range.
+     * @returns boolean
+     */
+    isOutOfRange() {
+        if (this.value === null || this.value === undefined || this.value === '') {
+            return false;
+        }
+        const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
+        if (isNaN(numValue))
+            return false;
+        return numValue < this.min || numValue > this.max;
+    }
+    // ==================== Render ====================
+    /**
+     * Render up icon.
+     * @returns JSX.Element
+     */
+    renderUpIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor">
+        //   <path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z" />
+        // </svg>
+        h("x-icon", { name: getIcon('arrowUp') }));
+    }
+    /**
+     * Render down icon.
+     * @returns JSX.Element
+     */
+    renderDownIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor">
+        //   <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" />
+        // </svg>
+        h("x-icon", { name: getIcon('arrowDown') }));
+    }
+    /**
+     * Render input number with controls.
+     * @returns JSX.Element
+     * @example
+     * <x-input-number min={0} max={10} step={1}></x-input-number>
+     */
+    render() {
+        const hasAddon = !!this.addonBefore || !!this.addonAfter;
+        const hasAffix = !!this.prefixIcon || !!this.suffix;
+        const wrapperClasses = {
+            'x-input-number-wrapper': true,
+            'x-input-number-focused': this.focused,
+            'x-input-number-disabled': this.disabled,
+            'x-input-number-readonly': this.readOnly,
+            'disabled': this.disabled,
+            'readonly': this.readOnly,
+            'x-input-number-out-of-range': this.isOutOfRange(),
+            'x-input-number-status-error': this.status === 'error',
+            'x-input-number-status-warning': this.status === 'warning',
+            [`x-input-number-${this.size}`]: true,
+            [`x-input-number-${this.variant}`]: true,
+            'x-input-number-has-addon': hasAddon,
+            'x-input-number-has-affix': hasAffix,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        return (h(Host, { key: '121ff396550785581268cf58bbba452398aa194e', class: {
+                'x-input-number': true,
+                [`x-input-number-${this.size}`]: true,
+            } }, this.addonBefore && (h("span", { key: '65f9ebae015943f7748f625888a9257d3424d7de', class: "x-input-number-group-addon x-input-number-group-addon-before" }, h("slot", { key: 'eeaa2f4a4c22a04597109330901320ce5ca4d17a', name: "addonBefore" }, this.addonBefore))), h("div", { key: '4f13fea7319c6ea1520860a3eb62e758ed5f7e86', class: wrapperClasses, style: this.styles?.root }, this.prefixIcon && (h("span", { key: '5aef84bfd3445b9eba412a03c5bf3d6f4839849d', class: { 'x-input-number-prefix': true, [this.classNames?.prefix ?? '']: !!this.classNames?.prefix } }, h("slot", { key: 'e4d077e06a16fd89ea7e4d98767840b408123669', name: "prefix" }, this.prefixIcon))), h("div", { key: '95e44d6fb300e9a94c5bcbb64602523ee87bf26d', class: "x-input-number-input-wrap" }, h("input", { key: '9c416504c66b8ac7faa07dc2f83eca2867bb8d42', ref: (el) => (this.inputRef = el), class: {
+                'x-input-number-input': true,
+                [this.classNames?.input ?? '']: !!this.classNames?.input,
+            }, style: this.styles?.input, type: "text", inputMode: "decimal", autocomplete: "off", role: "spinbutton", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, value: this.inputValue, disabled: this.disabled, readOnly: this.readOnly, placeholder: this.placeholder, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel })), this.suffix && (h("span", { key: 'f5d9448d1dd2f00cc7c874230e7aa44ee08d9116', class: { 'x-input-number-suffix': true, [this.classNames?.suffix ?? '']: !!this.classNames?.suffix } }, h("slot", { key: 'f58380ae67766132439c8146d823e2a86b6bf32b', name: "suffix" }, this.suffix))), this.controls && (h("div", { key: '72e5024bf232d212300639b5b2030093b2149531', class: { 'x-input-number-handler-wrap': true, [this.classNames?.handlers ?? '']: !!this.classNames?.handlers } }, h("span", { key: '67968406dee6198ff1cc652351d39ac53e6043ef', class: {
+                'x-input-number-handler': true,
+                'x-input-number-handler-up': true,
+                'x-input-number-handler-disabled': this.isUpDisabled(),
+            }, onMouseDown: (e) => !this.isUpDisabled() && this.handleStepMouseDown('up', e), onMouseUp: this.handleStepMouseUp, onMouseLeave: this.handleStepMouseUp }, h("span", { key: 'fba5d46dc0b52db13e8315e3201c87f23fd08f84', class: "x-input-number-handler-up-inner" }, this.renderUpIcon())), h("span", { key: '3ecbdf11351a90ebc795f021f0cccb05cf1e08f9', class: {
+                'x-input-number-handler': true,
+                'x-input-number-handler-down': true,
+                'x-input-number-handler-disabled': this.isDownDisabled(),
+            }, onMouseDown: (e) => !this.isDownDisabled() && this.handleStepMouseDown('down', e), onMouseUp: this.handleStepMouseUp, onMouseLeave: this.handleStepMouseUp }, h("span", { key: '4335fd45f1a1842d1419a8e5edc2449f45f3faf8', class: "x-input-number-handler-down-inner" }, this.renderDownIcon()))))), this.addonAfter && (h("span", { key: '0ca6d501421a7641e0ed055b1abd5f0d29e498d2', class: "x-input-number-group-addon x-input-number-group-addon-after" }, h("slot", { key: '41f103cb4fe2b0c7a6e6d2dccf82ac3b2a983f56', name: "addonAfter" }, this.addonAfter)))));
+    }
+    static get is() { return "x-input-number"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-input-number.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-input-number.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "addonAfter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number addonAfter=\"USD\"></x-input-number>"
+                        }],
+                    "text": "The label text displayed after (on the right side of) the input field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-after"
+            },
+            "addonBefore": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number addonBefore=\"$\"></x-input-number>"
+                        }],
+                    "text": "The label text displayed before (on the left side of) the input field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-before"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number autoFocus></x-input-number>"
+                        }],
+                    "text": "Whether to get focus when component mounted"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "false"
+            },
+            "controls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number controls={false}></x-input-number>"
+                        }],
+                    "text": "Whether to show +/- controls"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "controls",
+                "defaultValue": "true"
+            },
+            "decimalSeparator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number decimalSeparator=\",\"></x-input-number>"
+                        }],
+                    "text": "Custom decimal separator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decimal-separator"
+            },
+            "defaultValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputNumberValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "InputNumberValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberValue",
+                            "referenceLocation": "InputNumberValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number defaultValue={3}></x-input-number>"
+                        }],
+                    "text": "Default value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number disabled></x-input-number>"
+                        }],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "formatter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputNumberFormatter",
+                    "resolved": "(value: InputNumberValue, info: { userTyping: boolean; input: string; }) => string",
+                    "references": {
+                        "InputNumberFormatter": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberFormatter",
+                            "referenceLocation": "InputNumberFormatter"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number formatter={(v) => `$${v}`}></x-input-number>"
+                        }],
+                    "text": "Specifies the format of the value presented"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "keyboard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number keyboard={false}></x-input-number>"
+                        }],
+                    "text": "Whether to enable keyboard behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard",
+                "defaultValue": "true"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "Number.MAX_SAFE_INTEGER"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number max={100}></x-input-number>"
+                        }],
+                    "text": "The max value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "Number.MAX_SAFE_INTEGER"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "Number.MIN_SAFE_INTEGER"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number min={0}></x-input-number>"
+                        }],
+                    "text": "The min value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "Number.MIN_SAFE_INTEGER"
+            },
+            "parser": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputNumberParser",
+                    "resolved": "(displayValue: string) => InputNumberValue",
+                    "references": {
+                        "InputNumberParser": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberParser",
+                            "referenceLocation": "InputNumberParser"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number parser={(v) => v.replace(/[^\\d.]/g, '')}></x-input-number>"
+                        }],
+                    "text": "Specifies the value extracted from formatter"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number placeholder=\"Amount\"></x-input-number>"
+                        }],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number precision={2}></x-input-number>"
+                        }],
+                    "text": "The precision of input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision"
+            },
+            "prefixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number prefixIcon=\"calculate\"></x-input-number>"
+                        }],
+                    "text": "The prefix icon/text for the Input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-icon"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number readOnly></x-input-number>"
+                        }],
+                    "text": "Whether the input is read only"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputNumberSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "InputNumberSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberSize",
+                            "referenceLocation": "InputNumberSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'middle'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number size=\"small\"></x-input-number>"
+                        }],
+                    "text": "The size of the input box"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputNumberStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "InputNumberStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberStatus",
+                            "referenceLocation": "InputNumberStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number status=\"error\"></x-input-number>"
+                        }],
+                    "text": "Set validation status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number step={0.5}></x-input-number>"
+                        }],
+                    "text": "The number to which the current value is increased or decreased"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "stringMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number stringMode></x-input-number>"
+                        }],
+                    "text": "Set value as string to support high precision decimals"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "string-mode",
+                "defaultValue": "false"
+            },
+            "suffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number suffix=\"kg\"></x-input-number>"
+                        }],
+                    "text": "The suffix icon/text for the Input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "InputNumberValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "InputNumberValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberValue",
+                            "referenceLocation": "InputNumberValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number value={10}></x-input-number>"
+                        }],
+                    "text": "Current value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputNumberVariant",
+                    "resolved": "\"borderless\" | \"filled\" | \"outlined\"",
+                    "references": {
+                        "InputNumberVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberVariant",
+                            "referenceLocation": "InputNumberVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'outlined'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number variant=\"filled\"></x-input-number>"
+                        }],
+                    "text": "Variants of Input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "changeOnWheel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-input-number changeOnWheel></x-input-number>"
+                        }],
+                    "text": "Enable wheel to change value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "change-on-wheel",
+                "defaultValue": "false"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputNumberClassNames",
+                    "resolved": "InputNumberClassNames",
+                    "references": {
+                        "InputNumberClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberClassNames",
+                            "referenceLocation": "InputNumberClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number classNames={{ root: 'my-input-number' }}></x-input-number>"
+                        }],
+                    "text": "Custom class names"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputNumberStyles",
+                    "resolved": "InputNumberStyles",
+                    "references": {
+                        "InputNumberStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberStyles",
+                            "referenceLocation": "InputNumberStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number styles={{ root: { width: '200px' } }}></x-input-number>"
+                        }],
+                    "text": "Custom styles"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "inputValue": {},
+            "isTyping": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number onXChange={(ev) => console.log(ev.detail)}></x-input-number>"
+                        }],
+                    "text": "Emitted when value is changed"
+                },
+                "complexType": {
+                    "original": "InputNumberChangeEventDetail",
+                    "resolved": "InputNumberChangeEventDetail",
+                    "references": {
+                        "InputNumberChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberChangeEventDetail",
+                            "referenceLocation": "InputNumberChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPressEnter",
+                "name": "xPressEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number onXPressEnter={(ev) => console.log(ev.key)}></x-input-number>"
+                        }],
+                    "text": "Emitted when the user presses Enter"
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xStep",
+                "name": "xStep",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number onXStep={(ev) => console.log(ev.detail)}></x-input-number>"
+                        }],
+                    "text": "Emitted when step button is clicked"
+                },
+                "complexType": {
+                    "original": "InputNumberStepEventDetail",
+                    "resolved": "InputNumberStepEventDetail",
+                    "references": {
+                        "InputNumberStepEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-input-number/types.ts::InputNumberStepEventDetail",
+                            "referenceLocation": "InputNumberStepEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input-number onXFocus={(ev) => console.log(ev)}></x-input-number>"
+                        }],
+                    "text": "Emitted when input gets 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-number onXBlur={(ev) => console.log(ev)}></x-input-number>"
+                        }],
+                    "text": "Emitted when input loses 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": "Focus the input element",
+                    "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 element",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.setBlur()"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}