mlform 0.1.0

package/dist/ModelTypes-B9_veCKB.js

@@ -0,0 +1,5 @@
+var a = /* @__PURE__ */ ((r) => (r.TEXT = "text", r.NUMBER = "number", r.BOOLEAN = "boolean", r.CATEGORY = "category", r.DATE = "date", r))(a || {}), E = /* @__PURE__ */ ((r) => (r.REGRESSOR = "regressor", r.CLASSIFIER = "classifier", r))(E || {});
+export {
+  a as F,
+  E as M
+};

package/dist/ReportStrategy-DY3GC_mJ.js

@@ -0,0 +1,23 @@
+import { s as a, b as r, o as e, a as t, n as i, D as o } from "./FieldStrategy-pPekBtH-.js";
+const l = a({
+  title: t().min(1).max(100).regex(/^\S.*\S$/),
+  description: e(t().min(1).max(500)),
+  required: r().default(!0)
+}), c = a({
+  title: e(t().min(1).max(100)),
+  execution_time: e(i().min(0))
+});
+class d extends o {
+  // @ts-ignore
+  buildDescriptor(s) {
+    return {
+      ...this.buildControl(s),
+      slot: "report"
+    };
+  }
+}
+export {
+  l as B,
+  d as R,
+  c as a
+};

package/dist/boolean-field-Cd3uhIPj.js

@@ -0,0 +1,104 @@
+import { FieldElement as n } from "./mlform/extensions.mjs";
+import { x as u, a as d, n as f } from "./property-jKFNMQpR.js";
+import { t as h } from "./custom-element-ttkHUa8w.js";
+var c = Object.defineProperty, m = Object.getOwnPropertyDescriptor, v = (r, e, t) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, p = (r, e, t, o) => {
+  for (var a = o > 1 ? void 0 : o ? m(e, t) : e, s = r.length - 1, i; s >= 0; s--)
+    (i = r[s]) && (a = (o ? i(e, t, a) : i(a)) || a);
+  return o && a && c(e, t, a), a;
+}, g = (r, e, t) => v(r, e + "", t);
+let l = class extends n {
+  firstUpdated() {
+    this.defaultValue && (this.value = this.defaultValue === "true", this.dispatchState("success", `Status set to: ${this.value}.`));
+  }
+  onChange(r) {
+    const e = r.target;
+    this.value = e.value === "true", e.checked && this.dispatchState("success", `Status set to: ${this.value}.`);
+  }
+  render() {
+    return u`
+      <fieldset role="radiogroup">
+        <input
+          type="radio"
+          id="opt_yes"
+          name="bool"
+          @change=${this.onChange}
+          .value=${!0}
+          .checked=${this.value === !0}
+        />
+        <label class="opt" for="opt_yes"><span>True</span></label>
+
+        <input
+          type="radio"
+          id="opt_no"
+          name="bool"
+          @change=${this.onChange}
+          .value=${!1}
+          .checked=${this.value === !1}
+        />
+        <label class="opt" for="opt_no"><span>False</span></label>
+      </fieldset>
+    `;
+  }
+};
+g(l, "styles", [
+  n.baseStyles,
+  d`
+      fieldset {
+        display: flex;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        border: none;
+      }
+
+      input[type="radio"] {
+        display: none;
+      }
+
+      .opt {
+        flex: 1 1 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0.65rem 0.25rem;
+        font-size: 0.9rem;
+        font-weight: 500;
+        color: var(--ml-color-primary);
+        background: var(--ml-color-accent-bg);
+        border: 1px solid var(--ml-color-border);
+        cursor: pointer;
+        user-select: none;
+        transition:
+          background 0.2s ease,
+          color 0.2s ease,
+          border-color 0.2s;
+        transform: skewX(var(--skew));
+        margin-right: -1px;
+      }
+      .opt:last-of-type {
+        margin-right: 0;
+      }
+      .opt span {
+        transform: skewX(calc(-1 * var(--skew)));
+      }
+
+      .opt:hover {
+        background: var(--ml-color-hv-light);
+      }
+
+      input[type="radio"]:checked + label.opt {
+        background: var(--ml-color-success);
+        border-color: var(--ml-color-success);
+        color: var(--ml-color-surface);
+      }
+    `
+]);
+p([
+  f({ type: String })
+], l.prototype, "defaultValue", 2);
+l = p([
+  h("boolean-field")
+], l);
+export {
+  l as BooleanField
+};

package/dist/category-field-D_Ms1x9u.js

@@ -0,0 +1,73 @@
+import { FieldElement as p } from "./mlform/extensions.mjs";
+import { x as d, a as h, n as c } from "./property-jKFNMQpR.js";
+import { t as v } from "./custom-element-ttkHUa8w.js";
+var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, f = (e, t, r) => t in e ? u(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, n = (e, t, r, l) => {
+  for (var a = l > 1 ? void 0 : l ? m(t, r) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (a = (l ? o(t, r, a) : o(a)) || a);
+  return l && a && u(t, r, a), a;
+}, g = (e, t, r) => f(e, t + "", r);
+let i = class extends p {
+  firstUpdated() {
+    this.value = this.defaultValue, this.value ? this.dispatchState("success", `Category Selected: ${this.value}.`) : this.dispatchState("empty");
+  }
+  render() {
+    return d`
+      <select @change=${this.handleChange} .value=${this.value}>
+        <option value=${void 0} disabled ?hidden=${!!this.value}>
+          — Select —
+        </option>
+        ${this.optionList.map(
+      (e) => d`
+            <option value=${e} ?selected=${e === this.value}>${e}</option>
+          `
+    )}
+      </select>
+    `;
+  }
+  handleChange(e) {
+    const t = e.target;
+    this.value = this.optionList.find((r) => r === t.value) ?? "", this.dispatchState("success", `Category Selected: ${this.value}.`);
+  }
+};
+g(i, "styles", [
+  p.baseStyles,
+  h`
+      select {
+        width: 100%;
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+        border: 1px solid var(--ml-color-border);
+        border-radius: var(--radius);
+        background: var(--ml-color-surface)
+          url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 20 20" fill="%23475569"><path d="M5.516 7.548a.75.75 0 0 1 1.06-.032L10 10.79l3.424-3.274a.75.75 0 0 1 1.029 1.09l-3.955 3.787a.75.75 0 0 1-1.029 0L5.548 8.606a.75.75 0 0 1-.032-1.058z"/></svg>')
+          no-repeat right 0.75rem center;
+        background-size: 14px 14px;
+        appearance: none;
+        outline: none;
+        transition: border-color 0.2s ease;
+      }
+
+      select:focus {
+        border-color: var(--ml-color-accent);
+      }
+    `
+]);
+n([
+  c({
+    type: Array,
+    converter: {
+      fromAttribute(e) {
+        return e.split(",").map((t) => t.trim()).filter(Boolean);
+      }
+    }
+  })
+], i.prototype, "optionList", 2);
+n([
+  c({ type: String })
+], i.prototype, "defaultValue", 2);
+i = n([
+  v("category-field")
+], i);
+export {
+  i as CategoryField
+};

package/dist/classifier-prediction-C5QzorTo.js

@@ -0,0 +1,193 @@
+import { i as d, x as p, a as b, n as c } from "./property-jKFNMQpR.js";
+import { t as h } from "./custom-element-ttkHUa8w.js";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, u = (r, t, e) => t in r ? m(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, n = (r, t, e, i) => {
+  for (var o = i > 1 ? void 0 : i ? v(t, e) : t, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (o = (i ? s(t, e, o) : s(o)) || o);
+  return i && o && m(t, e, o), o;
+}, g = (r, t, e) => u(r, t + "", e);
+let l = class extends d {
+  _resolveMapping(r) {
+    return this.mapping?.length ? this.mapping : Array.from({ length: r }, (t, e) => `${e}`);
+  }
+  _flatToMatrix(r) {
+    const t = this.mapping?.length || Math.sqrt(r.length), e = [];
+    for (let i = 0; i < r.length; i += t)
+      e.push(r.slice(i, i + t));
+    return e;
+  }
+  get _probMatrix() {
+    return !Array.isArray(this.probabilities) || !this.probabilities.length ? [] : Array.isArray(this.probabilities[0]) ? this.probabilities : this._flatToMatrix(this.probabilities);
+  }
+  get _predictions() {
+    const r = this._probMatrix;
+    if (!r.length) return [];
+    const t = this._resolveMapping(r[0].length);
+    return r.map((e) => {
+      const i = t.map((a, s) => ({
+        label: a,
+        prob: e[s] || 0
+      })), o = i.reduce(
+        (a, s) => s.prob > a.prob ? s : a
+      );
+      return { items: i, main: o };
+    });
+  }
+  render() {
+    return p`
+      <div class="card">
+        <div class="title">${this.title}</div>
+        ${this._predictions.map(
+      (r) => p`
+            ${this.details ? r.items.map(
+        (t) => p`
+                    <div class="item">
+                      <div class="label">${t.label}</div>
+                      <div
+                        class="bar"
+                        style="--w: ${(t.prob * 100).toFixed(2)}%"
+                      ></div>
+                      <div class="pct">${t.prob.toFixed(2)}</div>
+                    </div>
+                  `
+      ) : p` <div class="prea">${r.main.label}</div>`}
+            ${this.details ? p`<br />` : ""}
+          `
+    )}
+      </div>
+    `;
+  }
+};
+g(l, "styles", b`
+    :host {
+      --bar-color: var(--ml-color-accent);
+      display: block;
+      margin: 10px;
+      font-family: "Inter", system-ui, sans-serif;
+    }
+
+    .card {
+      padding: 1.5rem 2rem;
+      border-radius: var(--radius);
+      background: var(--ml-color-surface);
+      box-shadow:
+        0 2px 4px var(--ml-color-shadow),
+        0 8px 16px var(--ml-color-shadow);
+      border: 1px solid var(--ml-color-border);
+    }
+
+    .prea {
+      padding: 1rem;
+      border-radius: var(--radius);
+      box-shadow:
+        0 2px 4px var(--ml-color-shadow),
+        0 8px 16px var(--ml-color-shadow);
+      border: 1px solid var(--ml-color-border);
+      margin: 10px;
+      background: var(--ml-color-surface);
+      color: var(--ml-color-primary);
+    }
+
+    .title {
+      font-size: 0.875rem; /* text-sm */
+      font-weight: 600;
+      text-transform: uppercase;
+      color: var(--ml-color-secondary);
+      letter-spacing: 0.06em;
+      margin-bottom: 1rem;
+    }
+
+    .item {
+      display: grid;
+      grid-template-columns: 120px 1fr 56px;
+      gap: 0.75rem;
+      align-items: center;
+      margin-bottom: 0.5rem;
+    }
+
+    .label {
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--ml-color-primary);
+      text-transform: capitalize;
+      text-align: right;
+    }
+
+    .bar {
+      position: relative;
+      width: 100%;
+      height: 10px;
+      background: var(--ml-color-border);
+      border-radius: 5px;
+      overflow: hidden;
+    }
+
+    .bar::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      width: var(--w);
+      background: linear-gradient(
+        90deg,
+        var(--bar-color) 0%,
+        var(--ml-color-accent-h) 100%
+      );
+      border-radius: 5px;
+      transition: width 0.3s ease;
+    }
+
+    .pct {
+      font-variant-numeric: tabular-nums;
+      font-size: 0.9rem;
+      color: var(--ml-color-primary);
+      text-align: right;
+    }
+  `);
+n([
+  c({ type: String })
+], l.prototype, "title", 2);
+n([
+  c({
+    attribute: "mapping",
+    converter: {
+      fromAttribute(r) {
+        if (!r) return [];
+        try {
+          return JSON.parse(r);
+        } catch {
+          return r.split(",").map((t) => t.trim());
+        }
+      }
+    }
+  })
+], l.prototype, "mapping", 2);
+n([
+  c({
+    attribute: "probabilities",
+    converter: {
+      fromAttribute(r) {
+        if (!r) return [];
+        try {
+          return JSON.parse(r);
+        } catch {
+          return r.split(",").map((t) => parseFloat(t));
+        }
+      }
+    }
+  })
+], l.prototype, "probabilities", 2);
+n([
+  c({
+    type: Boolean,
+    converter: {
+      fromAttribute(r) {
+        return r.toLowerCase() !== "false";
+      }
+    }
+  })
+], l.prototype, "details", 2);
+l = n([
+  h("classifier-prediction")
+], l);
+export {
+  l as ClassifierPrediction
+};

package/dist/custom-element-ttkHUa8w.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const n = (e) => (t, i) => {
+  i !== void 0 ? i.addInitializer(() => {
+    customElements.define(e, t);
+  }) : customElements.define(e, t);
+};
+export {
+  n as t
+};

package/dist/date-field-Cg_ja679.js

@@ -0,0 +1,162 @@
+import { FieldElement as p } from "./mlform/extensions.mjs";
+import { x as d, a as D, n as m } from "./property-jKFNMQpR.js";
+import { t as c } from "./custom-element-ttkHUa8w.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, T = (t, e, a) => e in t ? f(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, u = (t, e, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? v(e, a) : e, o = t.length - 1, s; o >= 0; o--)
+    (s = t[o]) && (r = (i ? s(e, a, r) : s(r)) || r);
+  return i && r && f(e, a, r), r;
+}, b = (t, e, a) => T(t, e + "", a);
+let n = class extends p {
+  step = "1";
+  firstUpdated() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      const t = new InputEvent("input", {
+        bubbles: !0,
+        composed: !0
+      });
+      Object.defineProperty(t, "target", {
+        value: { value: this.formatDateUTC(this.defaultValue) },
+        writable: !1
+      }), this.onInput(t);
+    }
+  }
+  render() {
+    return d`
+      <div class="input-wrapper">
+        <input
+          type="date"
+          @input=${this.onInput}
+          .step=${this.step}
+          .value=${this.value ? this.formatDateUTC(this.value) : void 0}
+          .min=${this.min ? this.formatDateUTC(this.min) : void 0}
+          .max=${this.max ? this.formatDateUTC(this.max) : void 0}
+        />
+      </div>
+    `;
+  }
+  onInput(t) {
+    if (this.value = new Date(t.target.value), !this.value) {
+      this.dispatchState("empty");
+      return;
+    }
+    if (this.max && this.min && (this.value < this.min || this.value > this.max)) {
+      this.dispatchState(
+        "error",
+        `Date must be between ${this.formatDateUTC(
+          this.min
+        )} and ${this.formatDateUTC(this.max)}.`
+      );
+      return;
+    }
+    if (this.max && this.value > this.max) {
+      this.dispatchState(
+        "error",
+        `Date must not be after ${this.formatDateUTC(this.max)}.`
+      );
+      return;
+    }
+    if (this.min && this.value < this.min) {
+      this.dispatchState(
+        "error",
+        `Date must not be before ${this.formatDateUTC(this.min)}.`
+      );
+      return;
+    }
+    const e = Math.max(1, Number(this.step) || 1), a = this.min ? this.startOfDayUTC(this.min) : new Date(Date.UTC(1970, 0, 1)), i = Math.round(
+      (this.value.getTime() - a.getTime()) / 864e5
+    );
+    if (!(i % e === 0)) {
+      const o = Math.floor(i / e), s = new Date(
+        a.getTime() + o * e * 864e5
+      ), l = new Date(s.getTime() + e * 864e5), h = [];
+      (!this.min || s >= this.startOfDayUTC(this.min)) && h.push(`Last valid date: ${this.formatDateUTC(s)}`), (!this.max || l <= this.startOfDayUTC(this.max)) && h.push(`Next valid date: ${this.formatDateUTC(l)}`), this.dispatchState(
+        "error",
+        `The Date must advance or retrocede in steps of ${e} day(s) starting from ${this.formatDateUTC(
+          a
+        )}
+ ${h[0]}. 
+ ${h[1]}.`
+      );
+      return;
+    }
+    this.dispatchState(
+      "success",
+      `Selected Date: ${this.formatDateUTC(this.value)}`
+    );
+  }
+  startOfDayUTC(t) {
+    return new Date(
+      Date.UTC(t.getUTCFullYear(), t.getUTCMonth(), t.getUTCDate())
+    );
+  }
+  formatDateUTC(t) {
+    return t.toISOString().split("T")[0];
+  }
+};
+b(n, "styles", [
+  p.baseStyles,
+  D`
+      input[type="date"] {
+        display: inline-block;
+        width: 100%;
+        padding: 0.75rem 0.75rem;
+        font-size: 1rem;
+        border: 1px solid var(--ml-color-border);
+        border-radius: var(--radius);
+        outline: none;
+        transition: border-color 0.2s ease;
+      }
+      input[type="date"]:focus {
+        border-color: var(--ml-color-accent);
+      }
+    `
+]);
+u([
+  m({ type: String })
+], n.prototype, "step", 2);
+u([
+  m({
+    type: Date,
+    converter: {
+      fromAttribute(t) {
+        return new Date(t);
+      },
+      toAttribute(t) {
+        return t.toISOString().split("T")[0];
+      }
+    }
+  })
+], n.prototype, "min", 2);
+u([
+  m({
+    type: Date,
+    converter: {
+      fromAttribute(t) {
+        return new Date(t);
+      },
+      toAttribute(t) {
+        return t.toISOString().split("T")[0];
+      }
+    }
+  })
+], n.prototype, "max", 2);
+u([
+  m({
+    type: Date,
+    converter: {
+      fromAttribute(t) {
+        return new Date(t);
+      },
+      toAttribute(t) {
+        return t.toISOString().split("T")[0];
+      }
+    }
+  })
+], n.prototype, "defaultValue", 2);
+n = u([
+  c("date-field")
+], n);
+export {
+  n as DateField
+};