@incodetech/web 2.0.0-alpha.8 → 2.0.0-rc.0

package/dist/dropdownComposed-DFRBG22E.js

@@ -0,0 +1,284 @@
+import { _ as e, l as t, p as n, v as r } from "./vendor-preact-D6SntenC.js";
+import { n as i } from "./loadingIcon-BN5YRQUb.js";
+import { g as a, l as o, n as s, o as c, u as ee } from "./icons-Cc7zwchP.js";
+import { t as te } from "./successIcon-DbILeIz_.js";
+//#region src/shared/dropdownComposed/dropdownComposed.tsx
+var l = ({ id: l, label: u, labelHint: d, placeholder: f = "Choose an option", value: p, options: m, onChange: h, error: g, helper: _, showErrorIcon: v, showHelperIcon: y, suppressMessages: b = !1, disabled: x = !1, required: S, searchable: C = !1, searchPlaceholder: w = "Search...", noResultsText: T = "No results found", name: E, tabIndex: ne, onKeyDown: re, onBlur: ie, renderSelectedLabel: D, siblingElement: O, enterKeyHint: ae, class: k, "aria-label": A, "data-testid": j }) => {
+	let [M, N] = n(!1), [P, F] = n(!1), [I, L] = n(-1), [R, z] = n(""), B = t(null), V = t(null), H = t(null), U = t([]), W = t(null), G = t(""), K = t(), q = m.find((e) => e.value === p), oe = q ? D ? D(q) : q.label : f, J = C && R ? m.filter((e) => e.label.toLowerCase().includes(R.toLowerCase())) : m, Y = `${l}-label`, X = `${l}-listbox`, Z = `${l}-helper`, Q = `${l}-error`, se = b ? "" : [_ ? Z : null, g ? Q : null].filter(Boolean).join(" ");
+	e(() => {
+		if (!M) return;
+		let e = requestAnimationFrame(() => {
+			C && W.current && W.current.focus(), requestAnimationFrame(() => {
+				H.current?.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest",
+					inline: "nearest"
+				});
+			});
+		});
+		return () => cancelAnimationFrame(e);
+	}, [M, C]), e(() => {
+		M || (L(-1), z(""));
+	}, [M]), e(() => {
+		I >= 0 && U.current[I] && U.current[I]?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [I]), e(() => () => {
+		K.current && clearTimeout(K.current);
+	}, []);
+	let ce = () => {
+		x || N((e) => !e);
+	}, $ = (e) => {
+		h(e), N(!1), L(-1), V.current?.focus();
+	}, le = () => {
+		F(!0);
+	}, ue = (e) => {
+		F(!1), B.current?.contains(e.relatedTarget) || (N(!1), ie?.());
+	}, de = (e) => {
+		if (x) return;
+		re?.(e);
+		let { key: t } = e;
+		if (t.length === 1 && /^[a-zA-Z0-9]$/.test(t)) {
+			e.preventDefault(), K.current && clearTimeout(K.current), G.current += t.toLowerCase();
+			let n = J.findIndex((e) => e.label.toLowerCase().startsWith(G.current));
+			n !== -1 && (M || N(!0), L(n)), K.current = setTimeout(() => {
+				G.current = "";
+			}, 500);
+			return;
+		}
+		switch (t) {
+			case "ArrowDown":
+				e.preventDefault(), M ? L((e) => e < J.length - 1 ? e + 1 : e) : (N(!0), L(0));
+				break;
+			case "ArrowUp":
+				e.preventDefault(), M ? L((e) => e > 0 ? e - 1 : e) : (N(!0), L(J.length - 1));
+				break;
+			case "Home":
+				e.preventDefault(), M && L(0);
+				break;
+			case "End":
+				e.preventDefault(), M && L(J.length - 1);
+				break;
+			case "Enter":
+				e.preventDefault(), M && I >= 0 && J[I] ? $(J[I].value) : M || N(!0);
+				break;
+			case " ":
+				e.preventDefault(), M && I >= 0 && J[I] ? $(J[I].value) : M || (N(!0), L(0));
+				break;
+			case "Escape":
+				e.preventDefault(), M && (N(!1), L(-1), V.current?.focus());
+				break;
+			case "Tab":
+				M && (N(!1), L(-1));
+				break;
+			default: break;
+		}
+	}, fe = (e) => {
+		let { key: t } = e;
+		switch (t) {
+			case "ArrowDown":
+				e.preventDefault(), L((e) => e < J.length - 1 ? e + 1 : e);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), L((e) => e > 0 ? e - 1 : e);
+				break;
+			case "Home":
+				e.preventDefault(), L(0);
+				break;
+			case "End":
+				e.preventDefault(), L(J.length - 1);
+				break;
+			case "Enter":
+				e.preventDefault(), I >= 0 && J[I] && $(J[I].value);
+				break;
+			case "Escape":
+				e.preventDefault(), N(!1), L(-1), V.current?.focus();
+				break;
+			case "Tab":
+				R || (N(!1), L(-1));
+				break;
+			default: break;
+		}
+	};
+	return /* @__PURE__ */ r("div", {
+		class: i("IncodeDropdownComposed", k),
+		ref: B,
+		onBlur: ue,
+		children: [
+			E && /* @__PURE__ */ r("input", {
+				type: "hidden",
+				name: E,
+				value: p || "",
+				disabled: x,
+				required: S
+			}),
+			u && /* @__PURE__ */ r("label", {
+				class: "IncodeDropdownComposedLabel",
+				id: Y,
+				htmlFor: l,
+				"data-testid": `${l}-label`,
+				children: [u, d && /* @__PURE__ */ r("span", {
+					class: "IncodeDropdownComposedLabelHint",
+					"data-testid": `${l}-label-hint`,
+					children: d
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				class: "IncodeDropdownComposedWrapper",
+				children: [/* @__PURE__ */ r("div", {
+					class: i("IncodeDropdownComposedTriggerRow", { IncodeDropdownComposedTriggerRowWithSibling: !!O }),
+					children: [/* @__PURE__ */ r("button", {
+						ref: V,
+						type: "button",
+						id: l,
+						class: "IncodeDropdownComposedTrigger",
+						onClick: ce,
+						onFocus: le,
+						onKeyDown: de,
+						tabIndex: x ? -1 : ne ?? 0,
+						disabled: x,
+						"aria-haspopup": "listbox",
+						"aria-expanded": M ? "true" : "false",
+						"aria-disabled": x ? "true" : void 0,
+						"aria-labelledby": u ? Y : void 0,
+						"aria-label": u ? void 0 : A,
+						"aria-controls": M ? X : void 0,
+						"aria-activedescendant": M && I >= 0 ? `${l}-option-${I}` : void 0,
+						"aria-invalid": g ? "true" : void 0,
+						"aria-required": S ? "true" : void 0,
+						"aria-describedby": se || void 0,
+						"data-error": g ? "true" : void 0,
+						"data-focused": P || M ? "true" : void 0,
+						"data-testid": j,
+						children: [/* @__PURE__ */ r("span", {
+							class: q ? "IncodeDropdownComposedTriggerText" : "IncodeDropdownComposedTriggerPlaceholder",
+							"aria-hidden": !u && A ? "true" : void 0,
+							children: oe
+						}), /* @__PURE__ */ r("span", {
+							class: "IncodeDropdownComposedTriggerIcon",
+							"aria-hidden": "true",
+							"data-open": M,
+							children: /* @__PURE__ */ r(o, {})
+						})]
+					}), O && /* @__PURE__ */ r("div", {
+						class: "IncodeDropdownComposedSibling",
+						children: O
+					})]
+				}), M && /* @__PURE__ */ r("div", {
+					ref: H,
+					class: "IncodeDropdownComposedList",
+					"data-error": g ? "true" : void 0,
+					children: [C && /* @__PURE__ */ r("div", {
+						class: "IncodeDropdownComposedSearchWrapper",
+						children: /* @__PURE__ */ r("div", {
+							class: "IncodeDropdownComposedSearchInner",
+							children: [/* @__PURE__ */ r("input", {
+								ref: W,
+								type: "text",
+								class: "IncodeDropdownComposedSearchInput",
+								value: R,
+								onInput: (e) => {
+									z(e.target.value), L(0);
+								},
+								onKeyDown: fe,
+								placeholder: w,
+								role: "combobox",
+								"aria-autocomplete": "list",
+								"aria-expanded": "true",
+								"aria-controls": X,
+								"aria-activedescendant": I >= 0 ? `${l}-option-${I}` : void 0,
+								"aria-label": w,
+								autocomplete: "off"
+							}), R ? /* @__PURE__ */ r("button", {
+								type: "button",
+								class: "IncodeDropdownComposedCloseIconButton",
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => {
+									R && (z(""), W.current?.focus());
+								},
+								"aria-label": "Clear search query",
+								children: /* @__PURE__ */ r(c, {
+									width: 20,
+									height: 20,
+									fillColor: "var(--icon-neutral-500)"
+								})
+							}) : /* @__PURE__ */ r("span", {
+								class: "IncodeDropdownComposedSearchIcon",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ r(s, { size: 20 })
+							})]
+						})
+					}), /* @__PURE__ */ r("div", {
+						id: X,
+						role: "listbox",
+						"aria-labelledby": u ? Y : void 0,
+						"aria-label": u ? void 0 : A ?? f,
+						class: "IncodeDropdownComposedOptionsScroll",
+						children: J.length === 0 ? /* @__PURE__ */ r("div", {
+							class: "IncodeDropdownComposedNoResults",
+							children: T
+						}) : J.map((e, t) => {
+							let n = p === e.value;
+							return /* @__PURE__ */ r("div", {
+								id: `${l}-option-${t}`,
+								role: "option",
+								"aria-label": e.ariaLabel,
+								"aria-selected": n ? "true" : "false",
+								class: "IncodeDropdownComposedOption",
+								"data-highlighted": I === t,
+								ref: (e) => {
+									U.current[t] = e;
+								},
+								onClick: () => $(e.value),
+								onMouseDown: (e) => e.preventDefault(),
+								onMouseEnter: () => L(t),
+								children: [e.ariaLabel ? /* @__PURE__ */ r("span", {
+									"aria-hidden": "true",
+									children: e.label
+								}) : e.label, n && /* @__PURE__ */ r("span", {
+									class: "IncodeDropdownComposedCheckmarkIcon",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ r(ee, {})
+								})]
+							}, e.value);
+						})
+					})]
+				})]
+			}),
+			C && /* @__PURE__ */ r("div", {
+				class: "IncodeDropdownComposedLiveRegion",
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: M && R ? J.length === 0 ? T : `${J.length} result${J.length === 1 ? "" : "s"} available` : ""
+			}),
+			!b && g && /* @__PURE__ */ r("div", {
+				class: "IncodeDropdownComposedErrorWrapper",
+				"data-testid": `${l}-error-wrapper`,
+				children: [v && /* @__PURE__ */ r("div", {
+					class: "IncodeDropdownComposedIconWrapper",
+					children: /* @__PURE__ */ r(a, { size: 17 })
+				}), /* @__PURE__ */ r("p", {
+					id: Q,
+					class: "IncodeDropdownComposedError",
+					children: g
+				})]
+			}),
+			!b && _ && !g && /* @__PURE__ */ r("div", {
+				class: "IncodeDropdownComposedHelperWrapper",
+				"data-testid": `${l}-helper-wrapper`,
+				children: [y && /* @__PURE__ */ r("div", {
+					class: "IncodeDropdownComposedIconWrapper",
+					children: /* @__PURE__ */ r(te, { size: 17 })
+				}), /* @__PURE__ */ r("p", {
+					id: Z,
+					class: "IncodeDropdownComposedHelper",
+					children: _
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { l as t };

package/dist/dropdownComposed-DwTzc2YU.js

@@ -0,0 +1 @@
+import "./dropdownComposed-DFRBG22E.js";

package/dist/dynamic-forms/styles.css

@@ -0,0 +1,36 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+.IncodeDynamicFormsProgress {
+  margin-bottom: var(--spacing-4, var(--spacing-4, 4px));
+  text-align: center;
+  font-size: var(--text-sm, .875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
+  color: var(--text-secondary);
+}
+
+.IncodeDynamicFormsPage .IncodePageTitleContainer {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
+}
+
+.IncodeDynamicFormsPage .IncodePageContent {
+  align-items: center;
+}
+
+.IncodeDynamicFormsForm {
+  flex-direction: column;
+  width: 100%;
+  max-width: 420px;
+  height: 100%;
+  display: flex;
+}
+
+.IncodeDynamicFormsForm button {
+  margin-top: auto;
+}
+
+.IncodeDynamicFormsField {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  display: flex;
+}

package/dist/dynamicForms-CJP1Ia6Q.js

@@ -0,0 +1,262 @@
+import { n as e } from "./i18n-9s4OSqwi.js";
+import { _ as t, d as n, p as r, v as i } from "./vendor-preact-D6SntenC.js";
+import { o as a } from "./hooks-BVnGysT7.js";
+import { t as o } from "./incodeComponent-C1o4M0ZK.js";
+import { r as s } from "./loadingIcon-BN5YRQUb.js";
+import { t as c } from "./page-C1yT4DLb.js";
+import { t as l } from "./button-DcCUEn2n.js";
+import { t as u } from "./verificationResult-BrVbUJ4U.js";
+import { t as d } from "./inputComposed-APSw8C7o.js";
+import { t as f } from "./checkbox-Cl57ltq_.js";
+import { n as p, t as m } from "./phoneInputComposed-bvWhGLFZ.js";
+import { t as h } from "./dropdownComposed-DFRBG22E.js";
+import { t as g } from "./dateInputComposed-BpAGsjN6.js";
+import { t as _ } from "./incodeModule-BqCjVgEI.js";
+import { t as v } from "./emailInput-DppGf9pv.js";
+import { formatCPF as y } from "@incodetech/core/cpf-ocr";
+import { createDynamicFormsManager as b } from "@incodetech/core/dynamic-forms";
+//#region src/modules/dynamic-forms/dynamicForms.tsx
+function x(e) {
+	return e.inputType ?? e.overrides ?? "TEXT";
+}
+var S = ({ question: e, value: t, disabled: r = !1, onChange: a, onPhoneChange: o, onPhoneBlur: s, phoneError: c, onEmailChange: l, onEmailBlur: u, emailError: _, onCpfChange: b, onCpfBlur: S, cpfError: C }) => {
+	let w = x(e), T = `dynamic-form-${e.questionId}`, E = e.isOptional ? e.question : `* ${e.question}`, D = w === "COUNTRY" || w === "NATIONALITY", O = n(() => D ? p.map((e) => ({
+		value: e.code,
+		label: `${e.emoji} ${e.name}`,
+		ariaLabel: e.name
+	})) : [], [D]);
+	if (w === "YESNO") return /* @__PURE__ */ i("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ i(f, {
+			id: T,
+			name: e.questionId,
+			label: E,
+			checked: t === "YES",
+			disabled: r,
+			onChange: (t) => a(e.questionId, t.target.checked ? "YES" : "NO")
+		})
+	});
+	if (w === "DATE") return /* @__PURE__ */ i("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ i(g, {
+			id: T,
+			name: e.questionId,
+			label: E,
+			value: t,
+			disabled: r,
+			onInput: (t) => a(e.questionId, t.target.value)
+		})
+	});
+	if (w === "PHONE") return /* @__PURE__ */ i("div", {
+		class: "IncodeDynamicFormsField",
+		onFocusOut: () => s?.(e.questionId),
+		children: /* @__PURE__ */ i(m, {
+			id: T,
+			label: E,
+			value: t,
+			error: c,
+			showErrorIcon: !!c,
+			disabled: r,
+			onChange: (t, n) => o?.(e.questionId, t, n)
+		})
+	});
+	if (w === "COUNTRY" || w === "NATIONALITY") return /* @__PURE__ */ i("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ i(h, {
+			id: T,
+			label: E,
+			value: t,
+			options: O,
+			searchable: !0,
+			disabled: r,
+			onChange: (t) => a(e.questionId, t)
+		})
+	});
+	if (w === "SELECT" || w === "MULTISELECT") {
+		let n = (e.options ?? []).map((e) => ({
+			value: e,
+			label: e
+		}));
+		return /* @__PURE__ */ i("div", {
+			class: "IncodeDynamicFormsField",
+			children: /* @__PURE__ */ i(h, {
+				id: T,
+				label: E,
+				value: t,
+				options: n,
+				searchable: n.length > 5,
+				disabled: r,
+				onChange: (t) => a(e.questionId, t)
+			})
+		});
+	}
+	return w === "EMAIL" ? /* @__PURE__ */ i("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ i(v, {
+			value: t,
+			emailError: _,
+			label: E,
+			disabled: r,
+			onEmailChange: (t, n) => {
+				a(e.questionId, t), l?.(e.questionId, t, n);
+			},
+			onBlur: () => u?.(e.questionId)
+		})
+	}) : w === "CPF" ? /* @__PURE__ */ i("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ i(d, {
+			id: T,
+			name: e.questionId,
+			label: E,
+			inputMode: "numeric",
+			maxLength: 14,
+			value: t,
+			error: C,
+			showErrorIcon: !!C,
+			disabled: r,
+			onInput: (t) => {
+				let n = y(t.target.value);
+				t.target.value = n, a(e.questionId, n), b?.(e.questionId, n);
+			},
+			onBlur: () => S?.(e.questionId)
+		})
+	}) : w === "NUMBER" ? /* @__PURE__ */ i("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ i(d, {
+			id: T,
+			name: e.questionId,
+			label: E,
+			type: "number",
+			inputMode: "numeric",
+			value: t,
+			disabled: r,
+			onInput: (t) => {
+				let n = t.target.value.replace(/[^0-9]/g, "");
+				a(e.questionId, n);
+			}
+		})
+	}) : /* @__PURE__ */ i("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ i(d, {
+			id: T,
+			name: e.questionId,
+			label: E,
+			type: "text",
+			value: t,
+			disabled: r,
+			onInput: (t) => a(e.questionId, t.target.value)
+		})
+	});
+}, C = ({ screen: n, answers: a, answerValidity: o, canSubmit: u, isSubmitting: d = !1, onAnswerChange: f, onAnswerValidityChange: p, onSubmit: m }) => {
+	let { t: h } = e(), [g, _] = r({}), [v, y] = r({}), [b, C] = r({}), [w, T] = r({}), [E, D] = r({}), [O, k] = r({});
+	return t(() => {
+		_({}), y({}), C({}), T({}), D({}), k({});
+	}, [n]), /* @__PURE__ */ i(c, {
+		className: "IncodeDynamicFormsPage",
+		title: n.hideTitle ? void 0 : n.title || h("dynamicForms.title"),
+		hideFooterBranding: !0,
+		children: [/* @__PURE__ */ i(s, { size: 32 }), /* @__PURE__ */ i("form", {
+			class: "IncodeDynamicFormsForm",
+			onSubmit: (e) => {
+				e.preventDefault(), m();
+			},
+			autoComplete: "off",
+			children: [n.questions.map((e) => {
+				let t = x(e), n = t === "PHONE", r = t === "EMAIL", s = t === "CPF", c = o[e.questionId], l = n && g[e.questionId] && v[e.questionId] && c === !1 ? h("phone.invalidPhone") : void 0, u = r && b[e.questionId] && w[e.questionId] && c === !1 ? h("verification.errors.emailInvalid") : void 0, m = s && E[e.questionId] && O[e.questionId] && c === !1 ? h("dynamicForms.invalidCpf") : void 0;
+				return /* @__PURE__ */ i(S, {
+					question: e,
+					value: a[e.questionId] ?? "",
+					disabled: d,
+					onChange: f,
+					onPhoneChange: (e, t, n) => {
+						f(e, t), p(e, n), _((t) => ({
+							...t,
+							[e]: !0
+						}));
+					},
+					onPhoneBlur: (e) => y((t) => ({
+						...t,
+						[e]: !0
+					})),
+					phoneError: l,
+					onEmailChange: (e, t, n) => {
+						p(e, n), C((t) => ({
+							...t,
+							[e]: !0
+						}));
+					},
+					onEmailBlur: (e) => T((t) => ({
+						...t,
+						[e]: !0
+					})),
+					emailError: u,
+					onCpfChange: (e) => {
+						D((t) => ({
+							...t,
+							[e]: !0
+						}));
+					},
+					onCpfBlur: (e) => k((t) => ({
+						...t,
+						[e]: !0
+					})),
+					cpfError: m
+				}, e.questionId);
+			}), /* @__PURE__ */ i(l, {
+				type: "submit",
+				disabled: !u,
+				isLoading: d,
+				children: h("common.continue")
+			})]
+		})]
+	});
+}, w = ({ config: n, manager: r, onFinish: o }) => {
+	let { t: s } = e(), [c, l] = a(() => {
+		if (r) return r;
+		if (!n) throw Error("DynamicForms config is required");
+		return b({ config: n });
+	}, {
+		manageLifecycle: !r,
+		autoLoad: !0
+	});
+	if (t(() => {
+		(c.status === "finished" || c.status === "closed") && o?.();
+	}, [c.status, o]), c.status === "idle" || c.status === "loadingScreens") return /* @__PURE__ */ i(u, {
+		status: "submitting",
+		submittingTitle: s("common.loading"),
+		hideFooterBranding: !0
+	});
+	if (c.status === "inputting" || c.status === "submitting") {
+		let e = c.status === "submitting", t = c.status === "inputting" ? c.canSubmit : !1;
+		return /* @__PURE__ */ i(C, {
+			screen: c.currentScreen,
+			answers: c.answers,
+			answerValidity: c.answerValidity,
+			canSubmit: t,
+			isSubmitting: e,
+			onAnswerChange: (e, t) => l.setAnswer(e, t),
+			onAnswerValidityChange: (e, t) => l.setAnswerValidity(e, t),
+			onSubmit: () => l.submit()
+		});
+	}
+	if (c.status === "success") return /* @__PURE__ */ i(u, {
+		status: "success",
+		successTitle: s("dynamicForms.success"),
+		hideFooterBranding: !0
+	});
+	if (c.status === "misconfigured") return /* @__PURE__ */ i(u, {
+		status: "failure",
+		failureTitle: s("dynamicForms.misconfigured"),
+		onSkip: () => l.close(),
+		skipLabel: s("common.close"),
+		hideFooterBranding: !0
+	});
+	if (c.status === "finished" || c.status === "closed") return null;
+}, T = ({ config: e, manager: t, onFinish: n }) => /* @__PURE__ */ i(o, { children: e || t ? /* @__PURE__ */ i(w, {
+	config: e,
+	manager: t,
+	onFinish: n
+}) : null });
+_(T, "incode-dynamic-forms");
+//#endregion
+export { T as DynamicForms };

package/dist/ekyb/ekyb.es.js

@@ -0,0 +1,2 @@
+import { t as e } from "../ekybModule-BSs7mndb.js";
+export { e as EkybModule };