atomicuilibrary 0.0.1

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

@@ -0,0 +1,695 @@
+import { h, Host } from "@stencil/core";
+export class NumberInput {
+    el;
+    internals;
+    /** Whether to show the type-based prefix icon (e.g. hash for numbers) */
+    showTypeIcon = false;
+    /** Prefix icon to display */
+    prefixIcon = '';
+    /** Name of the input */
+    name;
+    /** Current value */
+    value = 0;
+    /** Minimum value */
+    min = -Infinity;
+    /** Maximum value */
+    max = Infinity;
+    /** Step amount */
+    step = 1;
+    /** Label text */
+    label = '';
+    /** Placeholder */
+    placeholder = '0';
+    /** Disabled state */
+    disabled = false;
+    /** Readonly state */
+    readonly = false;
+    /** Size variant */
+    size = 'md';
+    /** Style variant */
+    variant = 'default';
+    /** Prefix text/symbol (e.g. '$') */
+    prefixText = '';
+    /** Suffix text/symbol (e.g. 'kg') */
+    suffixText = '';
+    /** Helper text below input */
+    helperText = '';
+    /** Error text — also sets error state */
+    errorText = '';
+    /** Number of decimal places (-1 = no rounding) */
+    precision = -1;
+    /** Show stepper buttons */
+    showStepper = false;
+    /** Controls layout of stepper: 'sides' | 'right' | 'none' */
+    stepperLayout = 'sides';
+    /** Keyboard shortcut: scroll wheel to change value */
+    scrollWheel = true;
+    /** Full width */
+    fullWidth = false;
+    /** RTL support */
+    rtl = false;
+    inputValue = '0';
+    isFocused = false;
+    stepperInterval;
+    numberChange;
+    numberInput;
+    componentWillLoad() {
+        if (this.variant === 'plain') {
+            this.showStepper = false;
+        }
+        this.inputValue = this.format(this.value);
+        this.internals.setFormValue(this.value.toString());
+    }
+    valueChanged(val) {
+        this.inputValue = this.format(val);
+        this.internals.setFormValue(val.toString());
+    }
+    format(val) {
+        if (this.precision >= 0)
+            return val.toFixed(this.precision);
+        return String(val);
+    }
+    clamp(val) {
+        return Math.min(this.max, Math.max(this.min, val));
+    }
+    increment = () => {
+        if (this.disabled || this.readonly)
+            return;
+        const next = this.clamp(this.value + this.step);
+        this.value = next;
+        this.numberChange.emit(next);
+    };
+    decrement = () => {
+        if (this.disabled || this.readonly)
+            return;
+        const next = this.clamp(this.value - this.step);
+        this.value = next;
+        this.numberChange.emit(next);
+    };
+    startStepping = (dir) => {
+        if (this.disabled || this.readonly)
+            return;
+        const fn = dir === 'inc' ? this.increment : this.decrement;
+        fn();
+        this.stepperInterval = setInterval(fn, 100);
+    };
+    stopStepping = () => {
+        clearInterval(this.stepperInterval);
+    };
+    handleInput = (e) => {
+        const raw = e.detail;
+        this.inputValue = raw;
+        const parsed = parseFloat(raw);
+        if (!isNaN(parsed)) {
+            this.value = parsed;
+            this.numberInput.emit(parsed);
+        }
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        const parsed = parseFloat(this.inputValue);
+        if (isNaN(parsed)) {
+            this.value = this.clamp(0);
+        }
+        else {
+            this.value = this.clamp(parsed);
+        }
+        this.inputValue = this.format(this.value);
+        this.numberChange.emit(this.value);
+    };
+    handleWheel = (e) => {
+        if (!this.scrollWheel || this.disabled || !this.isFocused)
+            return;
+        e.preventDefault();
+        if (e.deltaY < 0)
+            this.increment();
+        else
+            this.decrement();
+    };
+    handleKeyDown = (e) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.increment();
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.decrement();
+        }
+    };
+    render() {
+        const isError = !!this.errorText;
+        const isRight = this.stepperLayout === 'right';
+        return (h(Host, { key: '34a35f828baa751fbaab05db0ea6d7e4eb42281e', class: { 'full-width': this.fullWidth } }, this.label && h("label", { key: '756934f01225ddbdd8235fc9081177dedc004531', class: "ni-label" }, this.label), h("div", { key: '822ac22167cb75cdcb16274d4a5fa95291875cc9', class: {
+                'ni-wrapper': true,
+                [`ni-${this.size}`]: true,
+                'ni-error': isError,
+                'ni-disabled': this.disabled,
+                'ni-focused': this.isFocused,
+                'ni-right': isRight,
+                'ni-rtl': this.rtl,
+                'ni-plain': this.variant === 'plain',
+            }, dir: this.rtl ? 'rtl' : 'ltr' }, this.showStepper && this.stepperLayout === 'sides' && (h("ui-button", { key: '714881b359dfc953c8b6f93fb0295c0ae2f134ea', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "minus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' })), this.renderPrefix(), h("ui-input", { key: 'b2d56228f500995d4f6fbd78c639e6383c36bd3e', class: "ni-input", type: "number", value: this.inputValue, min: this.min === -Infinity ? undefined : this.min, max: this.max === Infinity ? undefined : this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, onInputChange: this.handleInput, onInputBlur: this.handleBlur, onFocusInternal: () => (this.isFocused = true), onWheel: (e) => this.handleWheel(e), onInputKeydown: (e) => this.handleKeyDown(e.detail), fullWidth: true, size: this.size, variant: "plain", showTypeIcon: false }), this.renderSuffix(), this.showStepper && isRight && (h("div", { key: 'e400b4eea2656a85a5c5df3487ead9f45367100b', class: "ni-stacker" }, h("ui-button", { key: '9cd89756bc4792dccc9657ca39b6d6cff2a9e819', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "chevron-up", iconLibrary: "lucide", iconOnly: true, size: "xxs" }), h("ui-button", { key: '42248f0ccc65d42c903775f8e5fcbd97f76e04e7', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "chevron-down", iconLibrary: "lucide", iconOnly: true, size: "xxs" }))), this.showStepper && this.stepperLayout === 'sides' && (h("ui-button", { key: 'dbf5c5d29bf6945baaaa96a46915440088f2509f', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "plus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' }))), (this.helperText || this.errorText) && (h("div", { key: 'f4f1e6ff10c5ddbbc4e49c7e2325e103537e9e08', class: { 'ni-helper': true, 'ni-helper-error': isError } }, isError ? this.errorText : this.helperText))));
+    }
+    renderPrefix() {
+        const hasPrefix = this.prefixText || this.prefixIcon;
+        const showDefaultIcon = this.showTypeIcon && !hasPrefix;
+        if (!hasPrefix && !showDefaultIcon)
+            return null;
+        return (h("span", { class: "ni-affix ni-prefix" }, this.prefixText && h("span", null, this.prefixText), (this.prefixIcon || showDefaultIcon) && (h("ui-icon", { library: "lucide", name: this.prefixIcon || 'hash', size: "14px" }))));
+    }
+    renderSuffix() {
+        if (!this.suffixText)
+            return null;
+        return h("span", { class: "ni-affix ni-suffix" }, this.suffixText);
+    }
+    static get is() { return "ui-number-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["number-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["number-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showTypeIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the type-based prefix icon (e.g. hash for numbers)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-type-icon",
+                "defaultValue": "false"
+            },
+            "prefixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix icon to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-icon",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "-Infinity"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "Infinity"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step amount"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'0'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "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": [],
+                    "text": "Readonly state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
+                    "references": {
+                        "ComponentSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'plain'",
+                    "resolved": "\"default\" | \"plain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Style variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "prefixText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix text/symbol (e.g. '$')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-text",
+                "defaultValue": "''"
+            },
+            "suffixText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Suffix text/symbol (e.g. 'kg')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-text",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text below input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text \u2014 also sets error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-text",
+                "defaultValue": "''"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of decimal places (-1 = no rounding)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision",
+                "defaultValue": "-1"
+            },
+            "showStepper": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show stepper buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-stepper",
+                "defaultValue": "false"
+            },
+            "stepperLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sides' | 'right' | 'none'",
+                    "resolved": "\"none\" | \"right\" | \"sides\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls layout of stepper: 'sides' | 'right' | 'none'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stepper-layout",
+                "defaultValue": "'sides'"
+            },
+            "scrollWheel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keyboard shortcut: scroll wheel to change value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-wheel",
+                "defaultValue": "true"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {},
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "numberChange",
+                "name": "numberChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "numberInput",
+                "name": "numberInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}