@dropi/ui 0.1.0

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

@@ -0,0 +1,735 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-input
+ * Text input with floating label, validation states, password toggle,
+ * number/letter restrictions, thousand separator, and native form association.
+ *
+ * ## Form usage (native HTML form)
+ * ```html
+ * <form>
+ *   <dropi-input name="email" label="Email" required></dropi-input>
+ * </form>
+ * ```
+ *
+ * ## Controlled usage (React / Vue / Angular)
+ * Pass `value` and listen to `dropiInput` to update.
+ */
+export class DropiInput {
+    internals;
+    // ── Identification ──────────────────────────────────────────
+    /** Input id. Defaults to label value. */
+    inputId = '';
+    /** Name attribute for native form submission */
+    name = '';
+    // ── Content ─────────────────────────────────────────────────
+    /** Floating or fixed label text */
+    label = '';
+    /** Placeholder text (visible in fixedLabel mode or on focus) */
+    placeholder = ' ';
+    /** Current value (controlled) */
+    value = '';
+    /** Max character length */
+    maxlength;
+    // ── Behavior ────────────────────────────────────────────────
+    /** Disable the input */
+    disabled = false;
+    /** Mark as required (shows asterisk when showAsterisk is true) */
+    required = false;
+    /** Show the required asterisk on the label */
+    showAsterisk = true;
+    /** Show label above the input (fixed), instead of floating inside */
+    fixedLabel = false;
+    /** Keyboard input mode hint */
+    inputMode = 'text';
+    // ── Input type modifiers ────────────────────────────────────
+    /** Show password visibility toggle (renders as password field) */
+    passwordInput = false;
+    /** Apply thousand separator formatting (e.g. 1,000,000) */
+    moneyFormat = false;
+    /** Apply thousand separator without currency symbol */
+    thousandSeparator = false;
+    /** Only allow numeric characters */
+    onlyNumbers = false;
+    /** Allow decimal point when onlyNumbers is true */
+    allowDecimals = false;
+    /** Only allow letter characters */
+    onlyLetters = false;
+    // ── Icon ────────────────────────────────────────────────────
+    /** Icon name shown inside the input (only visible when value is not empty) */
+    icon = '';
+    /** Color token for the icon */
+    iconColor = 'Gray-Gray-400';
+    // ── Validation ──────────────────────────────────────────────
+    /** Mark the field as invalid (consumer-controlled) */
+    invalid = false;
+    /** Helper / error text shown below the field */
+    helperText = '';
+    /** Only show helperText when the field is invalid */
+    showHelperOnlyOnError = false;
+    // ── Internal state ──────────────────────────────────────────
+    showPassword = false;
+    touched = false;
+    // ── Events ──────────────────────────────────────────────────
+    /** Emitted on every keystroke with the current value */
+    dropiInput;
+    /** Emitted on blur with the final value */
+    dropiChange;
+    /** Emitted on focus */
+    dropiFocus;
+    /** Emitted on blur */
+    dropiBlur;
+    valueChanged(val) {
+        this.internals.setFormValue(val);
+    }
+    disabledChanged(val) {
+        this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.value ?? '');
+    }
+    // ── Handlers ────────────────────────────────────────────────
+    handleInput(e) {
+        let val = e.target.value;
+        if (this.onlyNumbers)
+            val = this.filterNumbers(val);
+        if (this.onlyLetters)
+            val = this.filterLetters(val);
+        if (this.moneyFormat || this.thousandSeparator)
+            val = this.formatThousands(val, this.moneyFormat);
+        this.value = val;
+        this.internals.setFormValue(val);
+        this.dropiInput.emit(val);
+    }
+    handleKeyDown(e) {
+        if (this.onlyNumbers && !this.isAllowedNumberKey(e)) {
+            e.preventDefault();
+        }
+        if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
+            e.preventDefault();
+        }
+    }
+    handleFocus() {
+        this.dropiFocus.emit();
+    }
+    handleBlur() {
+        this.touched = true;
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
+    }
+    togglePassword() {
+        if (this.disabled)
+            return;
+        this.showPassword = !this.showPassword;
+    }
+    // ── Helpers ─────────────────────────────────────────────────
+    filterNumbers(val) {
+        const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;
+        return val.replace(pattern, '');
+    }
+    filterLetters(val) {
+        return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g, '');
+    }
+    isAllowedNumberKey(e) {
+        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];
+        if (allowed.includes(e.key))
+            return true;
+        if (e.ctrlKey || e.metaKey)
+            return true; // copy/paste/select-all
+        if (/^[0-9]$/.test(e.key))
+            return true;
+        if (this.allowDecimals && e.key === '.')
+            return true;
+        return false;
+    }
+    isAllowedLetterKey(e) {
+        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];
+        if (allowed.includes(e.key))
+            return true;
+        if (e.ctrlKey || e.metaKey)
+            return true;
+        return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);
+    }
+    formatThousands(val, withCurrency) {
+        const raw = val.replace(/[^0-9.]/g, '');
+        const [integer, decimal] = raw.split('.');
+        const formatted = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;
+        return withCurrency ? `$${result}` : result;
+    }
+    // ── Computed ─────────────────────────────────────────────────
+    get resolvedId() {
+        return this.inputId || this.label;
+    }
+    get inputType() {
+        if (this.passwordInput)
+            return this.showPassword ? 'text' : 'password';
+        return 'text';
+    }
+    get showHelper() {
+        if (!this.helperText)
+            return false;
+        if (this.showHelperOnlyOnError)
+            return this.invalid && this.touched;
+        return true;
+    }
+    get isInvalid() {
+        return this.invalid && this.touched;
+    }
+    // ── Render ───────────────────────────────────────────────────
+    render() {
+        const showAsterisk = this.required && this.showAsterisk && !this.disabled;
+        const showIconInline = !!this.icon && !!this.value;
+        return (h("div", { key: '4ea9c2118e6452345a2a92eedc807e6d94019784', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'b8c1269e9d583becd9614f6f3c28f6a2b536f18f', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: '945665772caab1a1c95f1a054dea1b8dd88287a3', class: "asterisk" }, " *"))), h("div", { key: 'f550584dde83c907429255d9a98b8a59ff322cbb', class: "form-group" }, h("div", { key: '6cc46f5822e62d59bb211e7d9eb7909ab2b833c9', class: "input-container" }, showIconInline && (h("dropi-icon", { key: 'c860e808ae7cd805aa9c430d52743f7eab0aaeba', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: 'ba571d4d14ec2a911a8b0bd4cdc7a8481aebe746', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'aad18a94d94c9600236bac7c23e38b1c1c41f06a', id: this.resolvedId, class: {
+                'form-control': true,
+                'form-control-valid': !this.isInvalid && this.touched && !!this.value,
+                'form-control-invalid': this.isInvalid,
+                'padding-icon': showIconInline,
+                'text-password': this.passwordInput && !this.showPassword,
+                'fixed-label-input': this.fixedLabel,
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8ba7ea50525aa8990662d45829ba732094c41f80', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '3916d3de6392da62b8086920cd2fce3b96238416', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '83e17f7d0cdb503b86fd035775e1cb45d9f41709', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '4e034348270853f8a3aafbbbb938a5974076aebd', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '7832f200ccc6f6273d65012b9e642c313399a277', class: {
+                'disabled-helper': this.disabled,
+                'invalid-color': this.isInvalid,
+            } }, this.helperText)))))));
+    }
+    static get is() { return "dropi-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input id. Defaults to label value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for native form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Floating or fixed 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 text (visible in fixedLabel mode or on focus)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "' '"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value (controlled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max character length"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark as required (shows asterisk when showAsterisk is true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "showAsterisk": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the required asterisk on the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-asterisk",
+                "defaultValue": "true"
+            },
+            "fixedLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show label above the input (fixed), instead of floating inside"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fixed-label",
+                "defaultValue": "false"
+            },
+            "inputMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputMode",
+                    "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "InputMode": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-input/dropi-input.tsx",
+                            "id": "src/components/dropi-input/dropi-input.tsx::InputMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keyboard input mode hint"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-mode",
+                "defaultValue": "'text'"
+            },
+            "passwordInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show password visibility toggle (renders as password field)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "password-input",
+                "defaultValue": "false"
+            },
+            "moneyFormat": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply thousand separator formatting (e.g. 1,000,000)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "money-format",
+                "defaultValue": "false"
+            },
+            "thousandSeparator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply thousand separator without currency symbol"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thousand-separator",
+                "defaultValue": "false"
+            },
+            "onlyNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Only allow numeric characters"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "only-numbers",
+                "defaultValue": "false"
+            },
+            "allowDecimals": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow decimal point when onlyNumbers is true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-decimals",
+                "defaultValue": "false"
+            },
+            "onlyLetters": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Only allow letter characters"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "only-letters",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name shown inside the input (only visible when value is not empty)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color token for the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-color",
+                "defaultValue": "'Gray-Gray-400'"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark the field as invalid (consumer-controlled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper / error text shown below the field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "showHelperOnlyOnError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Only show helperText when the field is invalid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-helper-only-on-error",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showPassword": {},
+            "touched": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiInput",
+                "name": "dropiInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke with the current value"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on blur with the final value"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiFocus",
+                "name": "dropiFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiBlur",
+                "name": "dropiBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on blur"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}