mlform 0.1.2 → 0.1.4

package/dist/mlform/questionnaire.mjs

@@ -0,0 +1,640 @@
+import { f as e, h as t, r as n } from "../design-system-CrrSGfFB.js";
+import { E as r, I as i, S as a, l as o, t as s } from "../engine-nnhWPT2L.js";
+import { _ as c, b as l, d as u, g as d, h as f, m as p, o as m, p as h, r as g, u as _, v, x as y, y as b } from "../primitives-Pi-ztAr6.js";
+//#region src/questionnaire/constants.ts
+var x = {
+	questionnaire: "mlf-questionnaire",
+	stepIndicator: "mlf-step-indicator"
+}, S = {
+	stepChange: "mlf-step-change",
+	stepValidationError: "mlf-step-validation-error",
+	submitStart: "mlf-q-submit-start",
+	submitAbort: "mlf-q-submit-abort",
+	submitSuccess: "mlf-q-submit-success",
+	submitError: "mlf-q-submit-error"
+}, C = {
+	prev: "Previous",
+	next: "Next",
+	submit: "Submit",
+	validating: "Validating...",
+	submitting: "Submitting..."
+}, w = Object.freeze({
+	stepLabel: (e, t) => `Step ${e} of ${t}`,
+	prevLabel: "Previous",
+	nextLabel: "Next",
+	submitLabel: "Submit",
+	validatingLabel: "Validating...",
+	submittingLabel: "Submitting..."
+}), T = (e) => e ? Object.freeze({
+	...w,
+	...e
+}) : w, E = class extends v {
+	static styles = y`
+    :host {
+      display: block;
+      min-width: 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    .indicator {
+      display: grid;
+      gap: 0.5rem;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+    }
+
+    .step-label {
+      font-size: var(--mlf-font-size-sm, 0.84rem);
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--mlf-color-text-muted, #475569);
+    }
+
+    .step-fraction {
+      font-size: var(--mlf-font-size-sm, 0.84rem);
+      font-weight: 700;
+      color: var(--mlf-color-accent, #1e40af);
+    }
+
+    .track {
+      height: 4px;
+      border-radius: 999px;
+      background: var(--mlf-color-border, #e2e8f0);
+      overflow: hidden;
+    }
+
+    .fill {
+      height: 100%;
+      border-radius: 999px;
+      background: var(--mlf-color-accent, #1e40af);
+      transition: width 0.3s ease;
+    }
+
+    .dots {
+      display: flex;
+      gap: 0.4rem;
+      flex-wrap: wrap;
+    }
+
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--mlf-color-border, #e2e8f0);
+      transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+    }
+
+    .dot.active {
+      background: var(--mlf-color-accent, #1e40af);
+      transform: scale(1.25);
+    }
+
+    .dot.done {
+      background: color-mix(in srgb, var(--mlf-color-accent, #1e40af) 50%, transparent);
+    }
+  `;
+	#e = 1;
+	get current() {
+		return this.#e;
+	}
+	set current(e) {
+		this.#e = e;
+	}
+	#t = 1;
+	get total() {
+		return this.#t;
+	}
+	set total(e) {
+		this.#t = e;
+	}
+	#n = "Step";
+	get label() {
+		return this.#n;
+	}
+	set label(e) {
+		this.#n = e;
+	}
+	render() {
+		let e = this.total > 0 ? Math.round(this.current / this.total * 100) : 0;
+		return l`
+      <div
+        class="indicator"
+        role="status"
+        aria-label=${`${this.label} ${this.current} of ${this.total}`}
+      >
+        <div class="header">
+          <span class="step-label">${this.label}</span>
+          <span class="step-fraction">${this.current} / ${this.total}</span>
+        </div>
+        <div class="track" aria-hidden="true">
+          <div class="fill" style="width: ${e}%"></div>
+        </div>
+        <div class="dots" aria-hidden="true">
+          ${Array.from({ length: this.total }, (e, t) => l`<div class=${t + 1 < this.current ? "dot done" : t + 1 === this.current ? "dot active" : "dot"}></div>`)}
+        </div>
+      </div>
+    `;
+	}
+};
+u([d({ type: Number })], E.prototype, "current", null), u([d({ type: Number })], E.prototype, "total", null), u([d({ type: String })], E.prototype, "label", null), E = u([c(x.stepIndicator)], E);
+//#endregion
+//#region src/questionnaire/primitives/components/questionnaire-root.ts
+var D = class extends v {
+	static styles = y`
+    :host {
+      display: block;
+      flex: 1 1 auto;
+      align-self: stretch;
+      inline-size: 100%;
+      block-size: 100%;
+      color: var(--mlf-shell-color, var(--mlf-color-text, #0f172a));
+      background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
+      font-family: var(--mlf-font-family-body);
+      min-width: 0;
+      min-height: 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    .root {
+      display: grid;
+      grid-template-rows: 1fr;
+      gap: var(--mlf-shell-gap, 1rem);
+      inline-size: 100%;
+      block-size: 100%;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    .panel {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+      border-radius: var(--mlf-panel-radius, 12px);
+      border: var(--mlf-border-width, 1px) solid
+        var(--mlf-panel-border, var(--mlf-color-border, #e2e8f0));
+      background: var(--mlf-panel-bg, var(--mlf-color-surface, #ffffff));
+      box-shadow:
+        0 2px 4px var(--mlf-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+        0 8px 16px var(--mlf-panel-shadow, rgba(0, 0, 0, 0.04));
+    }
+
+    /* Fixed header — never scrolls */
+    .pane-header {
+      flex: 0 0 auto;
+      display: grid;
+      gap: 0.85rem;
+      padding: 1rem 1.5rem;
+      border-bottom: var(--mlf-border-width, 1px) solid
+        var(--mlf-panel-border, var(--mlf-color-border, #e2e8f0));
+      background: var(--mlf-panel-header-bg, rgba(255, 255, 255, 0.6));
+      backdrop-filter: blur(var(--mlf-header-blur, 3px));
+      -webkit-backdrop-filter: blur(var(--mlf-header-blur, 3px));
+    }
+
+    .step-title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--mlf-pane-title-color, var(--mlf-color-text, #0f172a));
+      line-height: 1.3;
+    }
+
+    .step-description {
+      margin: 0;
+      font-size: var(--mlf-font-size-sm, 0.84rem);
+      color: var(--mlf-color-text-muted, #475569);
+      line-height: 1.5;
+    }
+
+    /* Scrollable middle — grows to fill available space */
+    .pane-body {
+      flex: 1 1 auto;
+      display: grid;
+      align-content: start;
+      gap: 1rem;
+      padding: 1rem 1rem 1.25rem;
+      overflow-y: auto;
+      overflow-x: hidden;
+      overscroll-behavior: contain;
+      scrollbar-color: color-mix(in srgb, var(--mlf-color-text-muted, #475569) 55%, transparent)
+        transparent;
+    }
+
+    .pane-body::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .pane-body::-webkit-scrollbar-thumb {
+      background: color-mix(in srgb, var(--mlf-color-text-muted, #475569) 50%, transparent);
+      border-radius: 999px;
+    }
+
+    .collection {
+      display: grid;
+      gap: var(--mlf-section-gap, 1rem);
+    }
+
+    /* Fixed footer — never scrolls */
+    .actions {
+      flex: 0 0 var(--mlf-q-footer-height, 4.5rem);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.75rem 1.5rem;
+      border-top: var(--mlf-border-width, 1px) solid
+        var(--mlf-panel-border, var(--mlf-color-border, #e2e8f0));
+      background: var(--mlf-panel-footer-bg, var(--mlf-color-bg-light, #f5f7fa));
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      min-height: 2.5rem;
+      padding: 0.5rem 1.25rem;
+      border: var(--mlf-border-width, 1px) solid transparent;
+      border-radius: var(--mlf-input-radius, 12px);
+      font: inherit;
+      font-size: 0.95rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition:
+        background-color 0.2s ease,
+        border-color 0.2s ease,
+        opacity 0.2s ease;
+    }
+
+    .btn:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    .btn-prev {
+      background: transparent;
+      border-color: var(--mlf-input-border, var(--mlf-color-border, #e2e8f0));
+      color: var(--mlf-color-text-muted, #475569);
+    }
+
+    .btn-prev:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--mlf-color-text-muted, #475569) 8%, transparent);
+    }
+
+    .btn-next,
+    .btn-submit {
+      background: var(--mlf-submit-bg, var(--mlf-color-accent, #1e40af));
+      border-color: var(--mlf-submit-bg, var(--mlf-color-accent, #1e40af));
+      color: var(--mlf-submit-color, #ffffff);
+    }
+
+    .btn-next:hover:not(:disabled),
+    .btn-submit:hover:not(:disabled) {
+      opacity: 0.88;
+    }
+
+    .btn-next:focus-visible,
+    .btn-submit:focus-visible,
+    .btn-prev:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--mlf-input-shadow-focus, rgba(29, 78, 216, 0.18));
+    }
+
+    .spacer {
+      flex: 1 1 auto;
+    }
+  `;
+	#e;
+	get controller() {
+		return this.#e;
+	}
+	set controller(e) {
+		this.#e = e;
+	}
+	#t;
+	get registry() {
+		return this.#t;
+	}
+	set registry(e) {
+		this.#t = e;
+	}
+	#n = w;
+	get text() {
+		return this.#n;
+	}
+	set text(e) {
+		this.#n = e;
+	}
+	#r = h;
+	get primitiveText() {
+		return this.#r;
+	}
+	set primitiveText(e) {
+		this.#r = e;
+	}
+	#i = null;
+	get qState() {
+		return this.#i;
+	}
+	set qState(e) {
+		this.#i = e;
+	}
+	#a = "idle";
+	get formStatus() {
+		return this.#a;
+	}
+	set formStatus(e) {
+		this.#a = e;
+	}
+	#o = new _(this, (e) => {
+		this.qState = e?.state ?? null, e && this.#f(e.form);
+	});
+	#s = null;
+	#c;
+	willUpdate(e) {
+		e.has("controller") && this.#o.bind(this.controller);
+	}
+	disconnectedCallback() {
+		this.#s?.(), this.#s = null, this.#c = void 0, super.disconnectedCallback();
+	}
+	render() {
+		let e = this.controller, t = this.qState;
+		if (!e || !t) return l``;
+		let { currentStep: n, stepProgress: r, canGoPrev: i, isLastStep: a } = t, o = e.form, s = this.text, c = this.formStatus, u = c === "submitting" || c === "validating", d = n.fieldIds.map((e) => o.getField(e)).filter((e) => e !== void 0 && e.state.visible), f = a ? c === "validating" ? s.validatingLabel : c === "submitting" ? s.submittingLabel : s.submitLabel : s.nextLabel;
+		return l`
+      <div class="root">
+        <section class="panel" part="questionnaire-panel">
+          <header class="pane-header">
+            <mlf-step-indicator
+              .current=${r.current}
+              .total=${r.total}
+              .label=${s.stepLabel(r.current, r.total).split(" ")[0] ?? "Step"}
+            ></mlf-step-indicator>
+
+            <h1 class="step-title">${n.title}</h1>
+
+            ${n.description ? l`<p class="step-description">${n.description}</p>` : b}
+          </header>
+
+          <div class="pane-body">
+            <div class="collection" part="field-list">
+              ${m(d, (e) => e.id, (e) => l`
+                  <mlf-field-frame
+                    .controller=${e}
+                    .registry=${this.registry}
+                    .text=${this.primitiveText}
+                  ></mlf-field-frame>
+                `)}
+            </div>
+          </div>
+
+          <div class="actions" part="actions">
+            <button
+              type="button"
+              class="btn btn-prev"
+              ?disabled=${!i || u}
+              @click=${this.#u}
+            >
+              ${s.prevLabel}
+            </button>
+
+            <span class="spacer"></span>
+
+            <button
+              type="button"
+              class=${a ? "btn btn-submit" : "btn btn-next"}
+              ?disabled=${u}
+              @click=${a ? this.#d : this.#l}
+            >
+              ${f}
+            </button>
+          </div>
+        </section>
+      </div>
+    `;
+	}
+	#l = async () => {
+		let e = this.controller;
+		e && (await e.next() ? this.dispatchEvent(new CustomEvent(S.stepChange, {
+			detail: { state: e.state },
+			bubbles: !0,
+			composed: !0
+		})) : this.dispatchEvent(new CustomEvent(S.stepValidationError, {
+			detail: { state: e.state },
+			bubbles: !0,
+			composed: !0
+		})));
+	};
+	#u = () => {
+		let e = this.controller;
+		e && (e.prev(), this.dispatchEvent(new CustomEvent(S.stepChange, {
+			detail: { state: e.state },
+			bubbles: !0,
+			composed: !0
+		})));
+	};
+	#d = async () => {
+		let e = this.controller;
+		if (e) {
+			if (!await e.next()) {
+				this.dispatchEvent(new CustomEvent(S.stepValidationError, {
+					detail: { state: e.state },
+					bubbles: !0,
+					composed: !0
+				}));
+				return;
+			}
+			this.dispatchEvent(new CustomEvent(S.submitStart, {
+				detail: {
+					form: e.form,
+					state: e.form.state
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+			try {
+				let t = await e.form.submit();
+				this.dispatchEvent(new CustomEvent(S.submitSuccess, {
+					detail: {
+						form: e.form,
+						state: e.form.state,
+						result: t
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			} catch (t) {
+				this.dispatchEvent(new CustomEvent(t instanceof i ? S.submitAbort : S.submitError, {
+					detail: {
+						form: e.form,
+						state: e.form.state,
+						error: t
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			}
+		}
+	};
+	#f(e) {
+		this.#c !== e && (this.#s?.(), this.#s = null, this.#c = e, this.formStatus = e.state.status, this.#s = e.subscribeSelector(() => e.state.status, (e) => {
+			this.formStatus = e;
+		}));
+	}
+};
+u([d({ attribute: !1 })], D.prototype, "controller", null), u([d({ attribute: !1 })], D.prototype, "registry", null), u([d({ attribute: !1 })], D.prototype, "text", null), u([d({ attribute: !1 })], D.prototype, "primitiveText", null), u([f()], D.prototype, "qState", null), u([f()], D.prototype, "formStatus", null), D = u([c(x.questionnaire)], D);
+//#endregion
+//#region src/questionnaire/defaults.ts
+var O = {
+	mode: "auto",
+	theme: "neutral",
+	recipe: "default"
+}, k = (e) => {
+	if (!e) return o();
+	let t = r();
+	for (let n of e.listFields()) t.registerField(n);
+	for (let n of e.listReports()) t.registerReport(n);
+	for (let n of e.listExplanations()) t.registerExplanation(n);
+	return t;
+}, A = (e) => e?.clone() ?? g(), j = (e) => e?.clone() ?? t.clone(), M = (t) => e(O, t ?? {}), N = class {
+	#e;
+	#t;
+	#n = 0;
+	#r = /* @__PURE__ */ new Set();
+	constructor(e, t) {
+		this.#e = e, this.#t = t;
+	}
+	get steps() {
+		return this.#t;
+	}
+	get form() {
+		return this.#e;
+	}
+	get state() {
+		return this.#a();
+	}
+	async next() {
+		let e = this.#t[this.#n];
+		if (!e) return !1;
+		let t = e.fieldIds.map((e) => this.#e.getField(e)).filter((e) => e !== void 0 && e.state.visible);
+		return (await Promise.all(t.map((e) => e.validate()))).some((e) => e.errors.length > 0) ? !1 : (this.#n < this.#t.length - 1 && (this.#n++, this.#i()), !0);
+	}
+	prev() {
+		this.#n > 0 && (this.#n--, this.#i());
+	}
+	subscribe(e) {
+		return this.#r.add(e), () => {
+			this.#r.delete(e);
+		};
+	}
+	#i() {
+		let e = this.#a();
+		for (let t of this.#r) t(e);
+	}
+	#a() {
+		let e = this.#t.length, t = this.#n, n = this.#t[t];
+		if (!n) throw Error("QuestionnaireController: invalid step index.");
+		return {
+			stepIndex: t,
+			canGoNext: t < e - 1,
+			canGoPrev: t > 0,
+			isLastStep: t === e - 1,
+			stepProgress: {
+				current: t + 1,
+				total: e
+			},
+			currentStep: n
+		};
+	}
+}, P = class extends Error {
+	constructor(e) {
+		super(e), this.name = "QuestionnaireError";
+	}
+}, F = (e, t, n, r) => {
+	let i = a(e ?? t) || `step-${n + 1}`;
+	if (e) {
+		if (r.has(i)) throw new P(`Duplicate step id "${i}".`);
+		return r.add(i), i;
+	}
+	let o = i, s = 2;
+	for (; r.has(o);) o = `${i}-${s}`, s++;
+	return r.add(o), o;
+}, I = (e, t) => {
+	if (!e.steps || e.steps.length === 0) throw new P("Questionnaire must have at least one step.");
+	let n = [], r = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Map();
+	return {
+		steps: e.steps.map((e, t) => {
+			let o = F(e.id, e.title, t, r);
+			if (!e.fields || e.fields.length === 0) throw new P(`Step "${e.title}" must have at least one field.`);
+			let s = e.fields.map((e) => {
+				let t = `${o}-${a(e.label) || "field"}`, r = i.get(t) ?? 0;
+				i.set(t, r + 1);
+				let s = r === 0 ? t : `${t}-${r + 1}`;
+				return n.push({
+					...e,
+					id: s
+				}), s;
+			});
+			return {
+				id: o,
+				title: e.title,
+				description: e.description,
+				fieldIds: s
+			};
+		}),
+		formSchema: { fields: n }
+	};
+}, L = (e) => e, R = Symbol("mlform.questionnaire.mounted"), z = (e, t) => {
+	let r = e;
+	r[R]?.unmount();
+	let i = k(t.registry), a = A(t.primitiveRegistry), o = j(t.designSystemRegistry), c = M(t.designSystem), { steps: l, formSchema: u } = I(t.schema, i), d = s({
+		schema: u,
+		registry: i,
+		transport: t.transport,
+		initialValues: t.initialValues,
+		validators: t.validators,
+		hooks: t.hooks,
+		inactiveFieldPolicy: t.inactiveFieldPolicy,
+		listenerErrorPolicy: t.listenerErrorPolicy,
+		onListenerError: t.onListenerError
+	}), f = new N(d, l), m = document.createElement(x.questionnaire);
+	m.controller = f, m.registry = a, m.text = T(t.text), m.primitiveText = p(t.primitiveText), e.replaceChildren(m);
+	let h = n(m, {
+		config: c,
+		registry: o,
+		onChange: t.onDesignSystemChange
+	}), g = !1, _ = Object.freeze({
+		controller: f,
+		form: d,
+		host: m,
+		designSystem: h,
+		unmount() {
+			g || (g = !0, r[R] === _ && delete r[R], d.abortSubmit("unmount"), h.disconnect(), m.remove());
+		}
+	});
+	return r[R] = _, _;
+}, B = (e) => {
+	e.unmount();
+};
+//#endregion
+export { N as QuestionnaireController, P as QuestionnaireError, L as createQuestionnaireSchema, z as mountQuestionnaire, I as normalizeQuestionnaireSchema, C as questionnaireDefaultLabels, S as questionnaireEventNames, w as questionnaireStaticText, x as questionnaireTagNames, T as resolveQuestionnaireText, B as unmountQuestionnaire };

package/dist/mlform/transport.mjs

@@ -0,0 +1,2 @@
+import { A as e, B as t, C as n, D as r, E as i, F as a, G as o, H as s, I as c, K as l, L as u, M as d, N as f, O as p, P as m, R as h, S as g, T as _, U as v, V as y, W as b, _ as x, a as S, b as C, c as w, d as T, f as E, g as D, h as O, i as k, j as A, k as j, l as M, m as N, n as P, o as F, p as I, q as L, r as R, s as z, t as B, u as V, v as H, w as U, x as W, y as G, z as K } from "../transport-A1RsnZhD.js";
+export { l as TransportError, h as assertPayloadWithinLimits, K as assertTransportCapabilities, t as cloneCapabilities, S as createFallbackTransport, F as createFanoutTransport, m as createGraphqlTransport, r as createGrpcSessionTransport, p as createGrpcStreamTransport, j as createGrpcTransport, e as createGrpcUnaryTransport, P as createHedgedTransport, a as createJsonTransport, w as createLoadBalancedTransport, x as createMemoryCircuitBreakerState, O as createMemorySharedRateLimiter, E as createMemoryTransportCacheStore, B as createMemoryTransportHealthState, k as createPipelineTransport, z as createQuorumFanoutTransport, R as createRacingTransport, M as createRoutingTransport, d as createSessionTransport, f as createSseTransport, A as createWebSocketSessionTransport, V as createWeightedRoutingTransport, c as getTransportPolicyContext, y as inferTransportCapabilities, s as mergeTransportCapabilities, v as normalizeTransportCapabilities, i as pipe, b as transportDefaults, L as transportErrorCodes, o as transportErrorMessages, H as withAuth, T as withCache, D as withCircuitBreaker, I as withDedup, W as withLogging, G as withMetrics, N as withRateLimit, g as withRequestTransform, n as withResponseTransform, _ as withRetry, U as withTimeout, C as withTracing, u as withTransportPolicyContext };