mlform 0.1.0

package/dist/number-field-CC2DrVEb.js

@@ -0,0 +1,165 @@
+import { FieldElement as p } from "./mlform/extensions.mjs";
+import { a as m, n as u, x as c } from "./property-jKFNMQpR.js";
+import { t as d } from "./custom-element-ttkHUa8w.js";
+var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, b = (r, t, i) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[t] = i, l = (r, t, i, n) => {
+  for (var e = n > 1 ? void 0 : n ? f(t, i) : t, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (e = (n ? o(t, i, e) : o(e)) || e);
+  return n && e && h(t, i, e), e;
+}, v = (r, t, i) => b(r, t + "", i);
+let a = class extends p {
+  unit = "";
+  step = "1";
+  firstUpdated() {
+    if (this.placeholder || (this.placeholder = this.step), this.defaultValue) {
+      this.value = Number(this.defaultValue);
+      const r = new InputEvent("input", {
+        bubbles: !0,
+        composed: !0
+      });
+      Object.defineProperty(r, "target", {
+        value: { value: this.defaultValue },
+        writable: !1
+      }), this.onInput(r);
+    } else
+      this.value = NaN;
+  }
+  render() {
+    return c`
+      <div class="input-wrapper">
+        <input
+          type="text"
+          inputmode="decimal"
+          autocomplete="off"
+          @input=${this.onInput}
+          .step=${Number(this.step)}
+          .min=${Number(this.min)}
+          .max=${Number(this.max)}
+          .placeholder=${this.placeholder}
+          .value=${Number.isNaN(this.value) ? "" : this.value}
+        />
+        <span class="unit">${this.unit}</span>
+      </div>
+    `;
+  }
+  onInput(r) {
+    if (this.value = Number(r.target.value.trim()), !this.value) {
+      this.dispatchState("empty");
+      return;
+    }
+    if (!/^[0-9.,\s-]+$/.test(this.value.toString())) {
+      this.dispatchState(
+        "error",
+        "Only digits, comma, dot, space, and a leading minus are allowed."
+      );
+      return;
+    }
+    const i = (this.value.toString().match(/-/g) || []).length;
+    if (i > 1 || i === 1 && !this.value.toString().startsWith("-")) {
+      this.dispatchState(
+        "error",
+        "Minus sign must appear once and only at the beginning."
+      );
+      return;
+    }
+    if (!/^-?(?:\d{1,3}(?:([,\s])\d{3}(?:\1\d{3})*)|\d+)(?:[.]\d+)?$/.test(this.value.toString())) {
+      this.dispatchState(
+        "error",
+        "Invalid number format (check grouping or decimal separator)."
+      );
+      return;
+    }
+    const e = this.parseLocaleNumber(this.value.toString());
+    if (this.min && this.max && (e < parseFloat(this.min) || e > parseFloat(this.max))) {
+      this.dispatchState(
+        "error",
+        `Number must be between 
+        ${this.min} ${this.unit} and 
+        ${this.max ?? ""} ${this.unit}`
+      );
+      return;
+    }
+    if (this.min && e < parseFloat(this.min)) {
+      this.dispatchState(
+        "error",
+        `Number must be greater than or equal to ${this.min} ${this.unit}`
+      );
+      return;
+    }
+    if (this.max && e > parseFloat(this.max)) {
+      this.dispatchState(
+        "error",
+        `Number must be less than or equal to ${this.max} ${this.unit}`
+      );
+      return;
+    }
+    this.dispatchState(
+      "success",
+      `Valid Number: ${e.toLocaleString("en-US", {})} ${this.unit}`
+    );
+  }
+  parseLocaleNumber(r) {
+    let t = r.replace(/\s+/g, ""), i = "";
+    t.startsWith("-") && (i = "-", t = t.slice(1));
+    const n = t.lastIndexOf("."), e = Math.max(n);
+    let s, o = "";
+    return e !== -1 ? (s = t.slice(0, e), o = t.slice(e + 1)) : s = t, s = s.replace(/[.,]/g, ""), parseFloat(i + (o ? `${s}.${o}` : s));
+  }
+};
+v(a, "styles", [
+  p.baseStyles,
+  m`
+      .input-wrapper {
+        position: relative;
+      }
+      input[type="text"] {
+        width: 100%;
+        padding: 0.75rem calc(var(--unit-w) + 2rem) 0.75rem 1rem;
+        font-size: 1rem;
+        border: 1px solid var(--ml-color-border);
+        border-radius: var(--radius);
+        outline: none;
+        transition: border-color 0.2s ease;
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+      }
+      input[type="text"]:focus {
+        border-color: var(--ml-color-accent);
+      }
+      .unit {
+        position: absolute;
+        right: 1rem;
+        top: 50%;
+        min-width: var(--unit-w);
+        transform: translateY(-50%);
+        font-size: 0.9rem;
+        color: var(--ml-color-secondary);
+        pointer-events: none;
+      }
+    `
+]);
+l([
+  u({ type: String })
+], a.prototype, "unit", 2);
+l([
+  u({ type: String })
+], a.prototype, "step", 2);
+l([
+  u({ type: String })
+], a.prototype, "min", 2);
+l([
+  u({ type: String })
+], a.prototype, "max", 2);
+l([
+  u({ type: String })
+], a.prototype, "defaultValue", 2);
+l([
+  u({ type: String })
+], a.prototype, "placeholder", 2);
+a = l([
+  d("number-field")
+], a);
+export {
+  a as NumberField
+};