@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

package/dist/bigconsole/components/widgets/form/FormWidget.js

@@ -1,56 +1,57 @@
 import { memo as e, useCallback as t, useMemo as n, useState as r } from "react";
 import { AlertCircle as i, CheckCircle as a, Loader2 as o, RotateCcw as s, Send as c, Settings as l } from "lucide-react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/form/FormWidget.tsx
-function f(e, t) {
-	let n = String(e ?? ""), r = e == null || n.trim() === "";
-	if (t.required && r) return `${t.label} is required`;
-	if (r) return null;
-	if (t.validation) for (let i of t.validation) switch (i.type) {
+function p(e, t, n) {
+	let r = String(e ?? ""), i = e == null || r.trim() === "";
+	if (t.required && i) return n("bigconsole.widget.form.validation.required", "{{label}} is required", { label: t.label ?? "" });
+	if (i) return null;
+	if (t.validation) for (let n of t.validation) switch (n.type) {
 		case "required":
-			if (r) return i.message;
+			if (i) return n.message;
 			break;
 		case "minLength":
-			if (n.length < Number(i.value)) return i.message;
+			if (r.length < Number(n.value)) return n.message;
 			break;
 		case "maxLength":
-			if (n.length > Number(i.value)) return i.message;
+			if (r.length > Number(n.value)) return n.message;
 			break;
 		case "min":
-			if (Number(e) < Number(i.value)) return i.message;
+			if (Number(e) < Number(n.value)) return n.message;
 			break;
 		case "max":
-			if (Number(e) > Number(i.value)) return i.message;
+			if (Number(e) > Number(n.value)) return n.message;
 			break;
 		case "pattern":
-			if (i.value && !new RegExp(String(i.value)).test(n)) return i.message;
+			if (n.value && !new RegExp(String(n.value)).test(r)) return n.message;
 			break;
 		case "email":
-			if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n)) return i.message;
+			if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r)) return n.message;
 			break;
 	}
-	if (t.type === "email" && !t.validation?.some((e) => e.type === "email") && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n)) return "Please enter a valid email address";
+	if (t.type === "email" && !t.validation?.some((e) => e.type === "email") && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r)) return n("bigconsole.widget.form.validation.email", "Please enter a valid email address");
 	if (t.type === "url") try {
-		new URL(n);
+		new URL(r);
 	} catch {
-		return "Please enter a valid URL";
+		return n("bigconsole.widget.form.validation.url", "Please enter a valid URL");
 	}
 	if (t.type === "number") {
-		if (isNaN(Number(e))) return "Please enter a valid number";
-		if (t.min !== void 0 && Number(e) < Number(t.min)) return `Value must be at least ${t.min}`;
-		if (t.max !== void 0 && Number(e) > Number(t.max)) return `Value must be at most ${t.max}`;
+		if (isNaN(Number(e))) return n("bigconsole.widget.form.validation.number", "Please enter a valid number");
+		if (t.min !== void 0 && Number(e) < Number(t.min)) return n("bigconsole.widget.form.validation.min", "Value must be at least {{min}}", { min: t.min ?? "" });
+		if (t.max !== void 0 && Number(e) > Number(t.max)) return n("bigconsole.widget.form.validation.max", "Value must be at most {{max}}", { max: t.max ?? "" });
 	}
 	return null;
 }
-function p(e, t) {
-	let n = {};
-	for (let r of t) {
-		let t = f(e[r.name], r);
-		t && (n[r.name] = t);
+function m(e, t, n) {
+	let r = {};
+	for (let i of t) {
+		let t = p(e[i.name], i, n);
+		t && (r[i.name] = t);
 	}
-	return n;
+	return r;
 }
-function m(e, t) {
+function h(e, t) {
 	let n = {}, r = {};
 	if (!e || typeof e != "object" || Array.isArray(e)) {
 		for (let e of t) n[e.name] = e.defaultValue ?? (e.type === "checkbox" ? !1 : "");
@@ -84,7 +85,7 @@ function m(e, t) {
 		fieldOptions: r
 	};
 }
-var h = {
+var g = {
 	container: {
 		display: "flex",
 		flexDirection: "column",
@@ -209,134 +210,140 @@ var h = {
 		color: "var(--color-text-muted)",
 		textAlign: "center"
 	}
-}, g = e(function({ widget: e, data: g = {}, onDrilldown: _, onSubmit: v }) {
-	let y = {
+}, _ = e(function({ widget: e, data: _ = {}, onDrilldown: v, onSubmit: y }) {
+	let { t: b } = u(), x = {
 		fields: [],
 		layout: "vertical",
 		submitLabel: "Submit",
 		showReset: !0,
 		validateOnBlur: !0,
 		validateOnChange: !1
-	}, b = e.config ? {
-		...y,
+	}, S = e.config ? {
+		...x,
 		...e.config
-	} : y, x = n(() => m(g, b.fields), [g, b.fields]), S = n(() => x.values, [x.values]), [C, w] = r(S), [T, E] = r({}), [D, O] = r(/* @__PURE__ */ new Set()), [k, A] = r(!1), [j, M] = r(!1), N = t((e, t) => {
-		if (w((n) => ({
+	} : x, C = n(() => h(_, S.fields), [_, S.fields]), w = n(() => C.values, [C.values]), [T, E] = r(w), [D, O] = r({}), [k, A] = r(/* @__PURE__ */ new Set()), [j, M] = r(!1), [N, P] = r(!1), F = t((e, t) => {
+		if (E((n) => ({
 			...n,
 			[e]: t
-		})), M(!1), b.validateOnChange) {
-			let n = b.fields.find((t) => t.name === e);
+		})), P(!1), S.validateOnChange) {
+			let n = S.fields.find((t) => t.name === e);
 			if (n) {
-				let r = f(t, n);
-				E((t) => ({
+				let r = p(t, n, b);
+				O((t) => ({
 					...t,
 					[e]: r
 				}));
 			}
 		}
-	}, [b.fields, b.validateOnChange]), P = t((e) => {
-		if (O((t) => new Set(t).add(e)), b.validateOnBlur) {
-			let t = b.fields.find((t) => t.name === e);
+	}, [
+		S.fields,
+		S.validateOnChange,
+		b
+	]), I = t((e) => {
+		if (A((t) => new Set(t).add(e)), S.validateOnBlur) {
+			let t = S.fields.find((t) => t.name === e);
 			if (t) {
-				let n = f(C[e], t);
-				E((t) => ({
+				let n = p(T[e], t, b);
+				O((t) => ({
 					...t,
 					[e]: n
 				}));
 			}
 		}
 	}, [
-		b.fields,
-		b.validateOnBlur,
-		C
-	]), F = t(async (t) => {
+		S.fields,
+		S.validateOnBlur,
+		T,
+		b
+	]), L = t(async (t) => {
 		t.preventDefault();
-		let n = p(C, b.fields);
-		if (E(n), O(new Set(b.fields.map((e) => e.name))), !Object.values(n).some((e) => e !== null)) {
-			A(!0);
+		let n = m(T, S.fields, b);
+		if (O(n), A(new Set(S.fields.map((e) => e.name))), !Object.values(n).some((e) => e !== null)) {
+			M(!0);
 			try {
 				let t = {
-					...C,
-					_action: b.submitAction || "form_submit",
+					...T,
+					_action: S.submitAction || "form_submit",
 					_widgetId: e.id,
 					_timestamp: (/* @__PURE__ */ new Date()).toISOString()
 				};
-				v && await v(t), _ && _({
+				y && await y(t), v && v({
 					type: "form_submit",
-					action: b.submitAction || "form_submit",
+					action: S.submitAction || "form_submit",
 					data: t
-				}), M(!0);
+				}), P(!0);
 			} catch {} finally {
-				A(!1);
+				M(!1);
 			}
 		}
 	}, [
-		C,
-		b.fields,
-		b.submitAction,
+		T,
+		S.fields,
+		S.submitAction,
 		e.id,
+		y,
 		v,
-		_
-	]), I = t(() => {
-		w(S), E({}), O(/* @__PURE__ */ new Set()), M(!1);
-	}, [S]), L = t((e) => {
-		let t = C[e.name], n = !!(D.has(e.name) && T[e.name]), r = {
-			...h.input,
-			...n ? h.inputError : {}
+		b
+	]), R = t(() => {
+		E(w), O({}), A(/* @__PURE__ */ new Set()), P(!1);
+	}, [w]), z = t((e) => {
+		let t = T[e.name], n = !!(k.has(e.name) && D[e.name]), r = {
+			...g.input,
+			...n ? g.inputError : {}
 		};
 		switch (e.type) {
-			case "textarea": return /* @__PURE__ */ u("textarea", {
+			case "textarea": return /* @__PURE__ */ d("textarea", {
 				id: e.name,
 				name: e.name,
 				value: String(t ?? ""),
 				placeholder: e.placeholder,
 				required: e.required,
-				disabled: e.disabled || k,
+				disabled: e.disabled || j,
 				readOnly: e.readonly,
 				rows: e.rows || 4,
 				style: {
 					...r,
-					...h.textarea
+					...g.textarea
 				},
-				onChange: (t) => N(e.name, t.target.value),
-				onBlur: () => P(e.name)
+				onChange: (t) => F(e.name, t.target.value),
+				onBlur: () => I(e.name)
 			});
 			case "select": {
-				let n = x.fieldOptions[e.name] ?? e.options ?? [];
-				return /* @__PURE__ */ d("select", {
+				let n = C.fieldOptions[e.name] ?? e.options ?? [];
+				return /* @__PURE__ */ f("select", {
 					id: e.name,
 					name: e.name,
 					value: String(t ?? ""),
 					required: e.required,
-					disabled: e.disabled || k,
+					disabled: e.disabled || j,
 					style: {
 						...r,
-						...h.select
+						...g.select
 					},
-					onChange: (t) => N(e.name, t.target.value),
-					onBlur: () => P(e.name),
-					children: [/* @__PURE__ */ u("option", {
+					onChange: (t) => F(e.name, t.target.value),
+					onBlur: () => I(e.name),
+					children: [/* @__PURE__ */ d("option", {
 						value: "",
-						children: e.placeholder || `Select ${e.label}...`
-					}), n.map((e) => /* @__PURE__ */ u("option", {
+						children: e.placeholder || b("bigconsole.widget.form.selectPlaceholder", "Select {{label}}...", { label: e.label ?? "" })
+					}), n.map((e) => /* @__PURE__ */ d("option", {
 						value: e.value,
 						disabled: e.disabled,
 						children: e.label
 					}, e.value))]
 				});
 			}
-			case "checkbox": return /* @__PURE__ */ d("div", {
-				style: h.checkbox,
-				children: [/* @__PURE__ */ u("input", {
+			case "checkbox": return /* @__PURE__ */ f("div", {
+				style: g.checkbox,
+				children: [/* @__PURE__ */ d("input", {
 					type: "checkbox",
 					id: e.name,
 					name: e.name,
 					checked: !!t,
-					disabled: e.disabled || k,
-					style: h.checkboxInput,
-					onChange: (t) => N(e.name, t.target.checked),
-					onBlur: () => P(e.name)
-				}), /* @__PURE__ */ u("label", {
+					disabled: e.disabled || j,
+					style: g.checkboxInput,
+					onChange: (t) => F(e.name, t.target.checked),
+					onBlur: () => I(e.name)
+				}), /* @__PURE__ */ d("label", {
 					htmlFor: e.name,
 					style: {
 						fontSize: "14px",
@@ -345,25 +352,25 @@ var h = {
 					children: e.label
 				})]
 			});
-			case "radio": return /* @__PURE__ */ u("div", {
+			case "radio": return /* @__PURE__ */ d("div", {
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					gap: "8px"
 				},
-				children: (x.fieldOptions[e.name] ?? e.options ?? []).map((n) => /* @__PURE__ */ d("div", {
-					style: h.checkbox,
-					children: [/* @__PURE__ */ u("input", {
+				children: (C.fieldOptions[e.name] ?? e.options ?? []).map((n) => /* @__PURE__ */ f("div", {
+					style: g.checkbox,
+					children: [/* @__PURE__ */ d("input", {
 						type: "radio",
 						id: `${e.name}-${n.value}`,
 						name: e.name,
 						value: n.value,
 						checked: t === n.value,
-						disabled: e.disabled || n.disabled || k,
-						style: h.checkboxInput,
-						onChange: (t) => N(e.name, t.target.value),
-						onBlur: () => P(e.name)
-					}), /* @__PURE__ */ u("label", {
+						disabled: e.disabled || n.disabled || j,
+						style: g.checkboxInput,
+						onChange: (t) => F(e.name, t.target.value),
+						onBlur: () => I(e.name)
+					}), /* @__PURE__ */ d("label", {
 						htmlFor: `${e.name}-${n.value}`,
 						style: {
 							fontSize: "14px",
@@ -373,104 +380,105 @@ var h = {
 					})]
 				}, n.value))
 			});
-			case "hidden": return /* @__PURE__ */ u("input", {
+			case "hidden": return /* @__PURE__ */ d("input", {
 				type: "hidden",
 				name: e.name,
 				value: String(t ?? "")
 			});
-			default: return /* @__PURE__ */ u("input", {
+			default: return /* @__PURE__ */ d("input", {
 				type: e.type,
 				id: e.name,
 				name: e.name,
 				value: String(t ?? ""),
 				placeholder: e.placeholder,
 				required: e.required,
-				disabled: e.disabled || k,
+				disabled: e.disabled || j,
 				readOnly: e.readonly,
 				min: e.min,
 				max: e.max,
 				step: e.step,
 				pattern: e.pattern,
 				style: r,
-				onChange: (t) => N(e.name, e.type === "number" ? t.target.valueAsNumber : t.target.value),
-				onBlur: () => P(e.name)
+				onChange: (t) => F(e.name, e.type === "number" ? t.target.valueAsNumber : t.target.value),
+				onBlur: () => I(e.name)
 			});
 		}
 	}, [
-		C,
 		T,
 		D,
 		k,
-		N,
-		P,
-		x
+		j,
+		F,
+		I,
+		C,
+		b
 	]);
-	if (b.fields.length === 0) return /* @__PURE__ */ d("div", {
-		style: h.emptyState,
+	if (S.fields.length === 0) return /* @__PURE__ */ f("div", {
+		style: g.emptyState,
 		children: [
-			/* @__PURE__ */ u(l, { style: {
+			/* @__PURE__ */ d(l, { style: {
 				width: "48px",
 				height: "48px",
 				marginBottom: "16px",
 				opacity: .5
 			} }),
-			/* @__PURE__ */ u("p", {
+			/* @__PURE__ */ d("p", {
 				style: { fontSize: "14px" },
-				children: "Configure Form Fields"
+				children: b("bigconsole.widget.form.configureTitle", "Configure Form Fields")
 			}),
-			/* @__PURE__ */ u("p", {
+			/* @__PURE__ */ d("p", {
 				style: {
 					fontSize: "12px",
 					marginTop: "4px"
 				},
-				children: "Add fields in widget settings to create your form"
+				children: b("bigconsole.widget.form.configureHint", "Add fields in widget settings to create your form")
 			})
 		]
 	});
-	let R = b.layout === "grid" ? {
+	let B = S.layout === "grid" ? {
 		display: "grid",
-		gridTemplateColumns: `repeat(${b.columns || 2}, 1fr)`,
+		gridTemplateColumns: `repeat(${S.columns || 2}, 1fr)`,
 		gap: "16px"
 	} : {};
-	return /* @__PURE__ */ d("div", {
-		style: h.container,
-		children: [/* @__PURE__ */ d("form", {
-			onSubmit: F,
+	return /* @__PURE__ */ f("div", {
+		style: g.container,
+		children: [/* @__PURE__ */ f("form", {
+			onSubmit: L,
 			style: {
-				...h.form,
-				...R
+				...g.form,
+				...B
 			},
-			children: [j && b.successMessage && /* @__PURE__ */ d("div", {
+			children: [N && S.successMessage && /* @__PURE__ */ f("div", {
 				style: {
-					...h.successMessage,
+					...g.successMessage,
 					gridColumn: "1 / -1"
 				},
-				children: [/* @__PURE__ */ u(a, { style: {
+				children: [/* @__PURE__ */ d(a, { style: {
 					width: "18px",
 					height: "18px"
-				} }), b.successMessage]
-			}), b.fields.map((e) => {
-				if (e.type === "hidden") return L(e);
-				let t = D.has(e.name) ? T[e.name] : null;
-				return /* @__PURE__ */ d("div", {
-					style: h.fieldWrapper,
+				} }), S.successMessage]
+			}), S.fields.map((e) => {
+				if (e.type === "hidden") return z(e);
+				let t = k.has(e.name) ? D[e.name] : null;
+				return /* @__PURE__ */ f("div", {
+					style: g.fieldWrapper,
 					children: [
-						e.type !== "checkbox" && /* @__PURE__ */ d("label", {
+						e.type !== "checkbox" && /* @__PURE__ */ f("label", {
 							htmlFor: e.name,
-							style: h.label,
-							children: [e.label, e.required && /* @__PURE__ */ u("span", {
-								style: h.required,
+							style: g.label,
+							children: [e.label, e.required && /* @__PURE__ */ d("span", {
+								style: g.required,
 								children: "*"
 							})]
 						}),
-						L(e),
-						e.helpText && !t && /* @__PURE__ */ u("p", {
-							style: h.helpText,
+						z(e),
+						e.helpText && !t && /* @__PURE__ */ d("p", {
+							style: g.helpText,
 							children: e.helpText
 						}),
-						t && /* @__PURE__ */ d("p", {
-							style: h.errorText,
-							children: [/* @__PURE__ */ u(i, { style: {
+						t && /* @__PURE__ */ f("p", {
+							style: g.errorText,
+							children: [/* @__PURE__ */ d(i, { style: {
 								width: "14px",
 								height: "14px"
 							} }), t]
@@ -478,43 +486,43 @@ var h = {
 					]
 				}, e.name);
 			})]
-		}), /* @__PURE__ */ d("div", {
-			style: h.footer,
-			children: [b.showReset !== !1 && /* @__PURE__ */ d("button", {
+		}), /* @__PURE__ */ f("div", {
+			style: g.footer,
+			children: [S.showReset !== !1 && /* @__PURE__ */ f("button", {
 				type: "button",
-				onClick: I,
-				disabled: k,
+				onClick: R,
+				disabled: j,
 				style: {
-					...h.button,
-					...h.resetButton,
-					opacity: k ? .6 : 1
+					...g.button,
+					...g.resetButton,
+					opacity: j ? .6 : 1
 				},
-				children: [/* @__PURE__ */ u(s, { style: {
+				children: [/* @__PURE__ */ d(s, { style: {
 					width: "16px",
 					height: "16px"
-				} }), b.resetLabel || "Reset"]
-			}), /* @__PURE__ */ d("button", {
+				} }), S.resetLabel || b("bigconsole.widget.form.reset", "Reset")]
+			}), /* @__PURE__ */ f("button", {
 				type: "submit",
-				onClick: F,
-				disabled: k,
+				onClick: L,
+				disabled: j,
 				style: {
-					...h.button,
-					...h.submitButton,
-					opacity: k ? .6 : 1
+					...g.button,
+					...g.submitButton,
+					opacity: j ? .6 : 1
 				},
-				children: [k ? /* @__PURE__ */ u(o, { style: {
+				children: [j ? /* @__PURE__ */ d(o, { style: {
 					width: "16px",
 					height: "16px",
 					animation: "spin 1s linear infinite"
-				} }) : /* @__PURE__ */ u(c, { style: {
+				} }) : /* @__PURE__ */ d(c, { style: {
 					width: "16px",
 					height: "16px"
-				} }), b.submitLabel || "Submit"]
+				} }), S.submitLabel || b("bigconsole.widget.form.submit", "Submit")]
 			})]
 		})]
 	});
 });
 //#endregion
-export { g as default, m as normalizeFormData };
+export { _ as default, h as normalizeFormData };
 
 //# sourceMappingURL=FormWidget.js.map