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

package/dist/ekyb/styles.css

@@ -0,0 +1,137 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+.IncodeEkybPage {
+  margin-inline: auto;
+}
+
+.IncodeEkybPage .IncodeEkybSpinner {
+  flex: 1;
+}
+
+.IncodeEkybPage .IncodeEkybForm {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeEkybPage .IncodeEkybForm .IncodeInputComposed, .IncodeEkybPage .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybPage .IncodeEkybForm .IncodeCountrySelector, .IncodeEkybPage .IncodeEkybForm .IncodeFormField {
+  margin-inline: auto;
+}
+
+.IncodeEkybPage .IncodeEkybForm .IncodeFormField {
+  margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeEkybPage .IncodeEkybForm .IncodeAddressAutocomplete {
+  margin-inline: auto;
+}
+
+.IncodeEkybPage .IncodeEkybCountrySelector {
+  width: 100%;
+}
+
+.IncodeEkybPage .IncodeEkybUbos, .IncodeEkybPage .IncodeEkybUboEntry {
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeEkybPage .IncodeEkybRemoveUbo {
+  cursor: pointer;
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
+  --tw-border-style: none;
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-s-regular-size);
+  font-weight: var(--typography-body-s-regular-weight);
+  line-height: var(--typography-body-s-regular-line-height);
+  letter-spacing: var(--typography-body-s-regular-letter-spacing);
+  color: var(--color-text-status-negative, var(--text-status-negative));
+  background-color: #0000;
+  border-style: none;
+}
+
+.IncodeEkybPage .IncodeEkybAddUbo {
+  cursor: pointer;
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
+  --tw-border-style: none;
+  padding-block: var(--spacing-8, var(--spacing-8, 8px));
+  text-align: center;
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-m-underlined-size);
+  font-weight: var(--typography-button-m-underlined-weight);
+  line-height: var(--typography-button-m-underlined-line-height);
+  letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+  color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
+  background-color: #0000;
+  border-style: none;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: auto;
+}
+
+.IncodeEkybPage .IncodeEkybAddUbo:hover {
+  opacity: .8;
+}
+
+.IncodeEkybPage .IncodeEkybSectionHeader {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h3-size);
+  font-weight: var(--typography-headline-h3-weight);
+  line-height: var(--typography-headline-h3-line-height);
+  letter-spacing: var(--typography-headline-h3-letter-spacing);
+  color: var(--color-input-text-label-default, var(--input-text-label-default));
+  margin-inline: auto;
+  margin-top: var(--spacing-16, var(--spacing-16, 16px));
+  width: 100%;
+  max-width: 420px;
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
+}
+
+.IncodeEkybPage .IncodeEkybFooter {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
+}
+
+@media (min-width: 768px) {
+  .IncodeEkybPage.IncodePageContainer {
+    margin-top: var(--spacing-0, var(--spacing-none, 0px));
+    max-height: none;
+  }
+
+  .IncodeEkybPage.IncodeEkybPageScrollable {
+    max-width: 500px;
+  }
+
+  .IncodeEkybPage .IncodePageContent {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+  }
+
+  .IncodeEkybPage .IncodeEkybForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
+    overflow-y: auto;
+  }
+
+  .IncodeEkybPage .IncodeEkybFooter {
+    flex-shrink: 0;
+  }
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/dist/ekybModule-BSs7mndb.js

@@ -0,0 +1,280 @@
+import { n as e } from "./i18n-9s4OSqwi.js";
+import { S as t, _ as n, d as r, h as i, l as a, p as o, v as s } from "./vendor-preact-D6SntenC.js";
+import { i as c, o as l } from "./hooks-BVnGysT7.js";
+import { t as u } from "./incodeComponent-C1o4M0ZK.js";
+import { r as d } from "./loadingIcon-BN5YRQUb.js";
+import { t as f } from "./page-C1yT4DLb.js";
+import "./extensibility-CzEJfRwo.js";
+import { t as p } from "./spinner-CKnjVHxw.js";
+import { t as m } from "./button-DcCUEn2n.js";
+import { t as h } from "./verificationResult-BrVbUJ4U.js";
+import { t as g } from "./inputComposed-APSw8C7o.js";
+import { i as _, r as v } from "./radioGroupComposed-BbmvxmD2.js";
+import { t as y } from "./dropdownComposed-DFRBG22E.js";
+import { t as b } from "./incodeModule-BqCjVgEI.js";
+import { n as x, t as S } from "./requiredLabelHint-BLwgqozE.js";
+import { n as C, t as w } from "./optionAccessibleLabel-CzEeX3Q4.js";
+import { t as T } from "./countrySelector-CE-JgIsv.js";
+import { DEV_ONLY_COUNTRIES as E, SUPPORTED_COUNTRIES as D, computeEkybDisplayErrors as O, createEkybManager as k } from "@incodetech/core/ekyb";
+//#region src/modules/ekyb/countrySelector.tsx
+var A = ({ value: t, onChange: n }) => {
+	let { t: r } = e();
+	return /* @__PURE__ */ s(T, {
+		id: "ekyb-country",
+		label: r("ekyb.country"),
+		value: t,
+		onChange: n,
+		countryCodes: D,
+		devOnlyCountryCodes: E,
+		"data-testid": "ekyb-country-selector"
+	});
+}, j = ({ field: t, value: n, error: r, errorParams: i, country: a, labelHint: o, onChange: c, onBlur: l }) => {
+	let { t: u } = e();
+	return t.type === "dropdown" ? /* @__PURE__ */ s(y, {
+		id: `ekyb-${t.name}`,
+		label: u(t.label),
+		labelHint: o,
+		placeholder: t.placeholder ? u(t.placeholder) : void 0,
+		value: n,
+		options: (t.options ?? []).map((e) => {
+			let t = u(e.label);
+			return {
+				...e,
+				label: t,
+				ariaLabel: w(t)
+			};
+		}),
+		error: _(u, r, i),
+		required: t.required,
+		searchable: !0,
+		onChange: (e) => c(t.name, e),
+		onBlur: l ? () => l(t.name) : void 0,
+		"data-testid": `ekyb-field-${t.name}`
+	}) : /* @__PURE__ */ s(v, {
+		name: t.name,
+		label: t.label,
+		displayLabel: t.displayLabel,
+		value: n,
+		error: r,
+		errorParams: i,
+		required: t.required,
+		labelHint: o,
+		onChange: c,
+		onBlur: l
+	});
+}, M = ({ ubos: t, errors: n, errorParams: r, canAddUbo: i, labelHint: a, onSetField: o, onBlur: c, onAdd: l, onRemove: u }) => {
+	let { t: d } = e(), f = (e) => _(d, n[e], r[e]);
+	return t.length === 0 ? null : /* @__PURE__ */ s("div", {
+		className: "IncodeEkybUbos",
+		children: [t.map((e, t) => {
+			let n = t === 0 ? d("ekyb.uboName") : d("ekyb.uboNameWithNumber", { number: t + 1 }), r = t === 0 ? d("ekyb.uboSurname") : d("ekyb.uboSurnameWithNumber", { number: t + 1 }), i = t === 0;
+			return /* @__PURE__ */ s("div", {
+				className: "IncodeEkybUboEntry",
+				role: "group",
+				"aria-label": `UBO ${t + 1}`,
+				children: [
+					/* @__PURE__ */ s(g, {
+						id: `ubo-${t}-name`,
+						label: n,
+						labelHint: a,
+						name: `ubo-${t}-name`,
+						value: e.name,
+						error: f(`ubo-${t}-name`),
+						required: !0,
+						onInput: (e) => o(t, "name", e.target.value),
+						onBlur: c ? () => c(`ubo-${t}-name`) : void 0,
+						"data-testid": `ekyb-ubo-${t}-name`
+					}),
+					/* @__PURE__ */ s(g, {
+						id: `ubo-${t}-surname`,
+						label: r,
+						labelHint: a,
+						name: `ubo-${t}-surname`,
+						value: e.surname,
+						error: f(`ubo-${t}-surname`),
+						required: !0,
+						onInput: (e) => o(t, "surname", e.target.value),
+						onBlur: c ? () => c(`ubo-${t}-surname`) : void 0,
+						"data-testid": `ekyb-ubo-${t}-surname`
+					}),
+					!i && /* @__PURE__ */ s("button", {
+						className: "IncodeEkybRemoveUbo",
+						onClick: () => u(t),
+						type: "button",
+						"aria-label": `${d("common.remove")} UBO ${t + 1}`,
+						children: d("common.remove")
+					})
+				]
+			}, e.id);
+		}), i && /* @__PURE__ */ s("button", {
+			className: "IncodeEkybAddUbo",
+			onClick: l,
+			type: "button",
+			"data-testid": "ekyb-add-ubo",
+			children: d("ekyb.addAnotherUbo")
+		})]
+	});
+}, N = ({ config: t, onFinish: r }) => {
+	let { t: i } = e(), [a, o] = l(() => k({ config: t }));
+	return n(() => {
+		(a.status === "finished" || a.status === "closed") && r?.();
+	}, [a.status, r]), a.status === "finished" || a.status === "closed" ? null : a.status === "loading" ? /* @__PURE__ */ s(h, {
+		status: "submitting",
+		submittingTitle: i("common.loading")
+	}) : a.status === "submitting" ? /* @__PURE__ */ s(f, {
+		className: "IncodeEkybPage",
+		children: /* @__PURE__ */ s(p, {
+			fullScreen: !1,
+			title: i("common.processing"),
+			className: "IncodeEkybSpinner"
+		})
+	}) : a.status === "success" ? /* @__PURE__ */ s(h, { status: "success" }) : a.status === "error" ? /* @__PURE__ */ s(h, {
+		status: "failure",
+		onRetry: () => o.retry()
+	}) : a.status === "form" ? /* @__PURE__ */ s(I, {
+		state: a,
+		manager: o
+	}) : null;
+}, P = new Set([
+	"street",
+	"houseNo",
+	"addressLine2",
+	"city",
+	"state",
+	"postalCode"
+]), F = [
+	"street",
+	"city",
+	"state",
+	"postalCode",
+	"houseNo"
+], I = ({ state: l, manager: u }) => {
+	let { country: p, fields: h, values: g, errors: _, isValid: v, ubos: y, canAddUbo: b, addressSuggestions: w, submitAttempted: T } = l, { t: E } = e(), D = a(null), k = a(null), N = a(void 0), I = c(D, h.length), [L, R] = o({}), z = i((e) => {
+		R((t) => t[e] ? t : {
+			...t,
+			[e]: !0
+		});
+	}, []), { displayErrors: B, errorParams: V } = r(() => O(_, L, T, p, h), [
+		_,
+		L,
+		T,
+		p,
+		h
+	]), H = i((e) => z(e), [z]), U = i((e, t) => {
+		z(e), u.setField(e, t);
+	}, [u, z]), W = i((e, t, n) => {
+		z(`ubo-${e}-${t}`), u.setUboField(e, t, n);
+	}, [u, z]), G = i((e) => {
+		for (let e of F) z(e);
+		u.selectAddress(e);
+	}, [u, z]), K = i((e) => {
+		u.removeUbo(e), R((t) => {
+			let n = {};
+			for (let [r, i] of Object.entries(t)) {
+				let t = r.match(/^ubo-(\d+)-(name|surname)$/);
+				if (!t) {
+					n[r] = i;
+					continue;
+				}
+				let a = Number(t[1]);
+				if (a === e) continue;
+				let o = a > e ? a - 1 : a;
+				n[`ubo-${o}-${t[2]}`] = i;
+			}
+			return n;
+		});
+	}, [u]);
+	n(() => {
+		let e = B.postalCode, t = N.current;
+		if (N.current = e, !e || t === e) return;
+		let n = requestAnimationFrame(() => {
+			let e = k.current;
+			e && (e.querySelector("#postalCode-error") ?? e).scrollIntoView({
+				behavior: "smooth",
+				block: "nearest"
+			});
+		});
+		return () => cancelAnimationFrame(n);
+	}, [B.postalCode]);
+	let q = h.filter((e) => !P.has(e.name)), J = h.filter((e) => P.has(e.name)), Y = r(() => x(h.map((e) => e.required)), [h]), X = (e) => {
+		let t = S(Y, e);
+		return t ? E(`forms.label.${t}`) : void 0;
+	};
+	return /* @__PURE__ */ s(f, {
+		className: `IncodeEkybPage${I ? " IncodeEkybPageScrollable" : ""}`,
+		title: E("ekyb.title"),
+		children: [/* @__PURE__ */ s("div", {
+			ref: D,
+			className: "IncodeEkybForm",
+			children: [
+				/* @__PURE__ */ s(A, {
+					value: p,
+					onChange: (e) => u.setCountry(e)
+				}),
+				q.map((e) => /* @__PURE__ */ s(j, {
+					field: e,
+					value: g[e.name] ?? "",
+					error: B[e.name],
+					errorParams: V[e.name],
+					country: p,
+					labelHint: X(e.required),
+					onChange: U,
+					onBlur: H
+				}, e.name)),
+				/* @__PURE__ */ s(M, {
+					ubos: y,
+					errors: B,
+					errorParams: V,
+					canAddUbo: b,
+					labelHint: X(!0),
+					onSetField: W,
+					onBlur: H,
+					onAdd: () => u.addUbo(),
+					onRemove: K
+				}),
+				J.length > 0 && /* @__PURE__ */ s(t, { children: [/* @__PURE__ */ s("h3", {
+					className: "IncodeEkybSectionHeader",
+					children: E("ekyb.addressDetails")
+				}), J.map((e) => e.name === "street" ? /* @__PURE__ */ s(C, {
+					label: e.label,
+					labelHint: X(e.required),
+					value: g.street ?? "",
+					error: B.street,
+					errorParams: V.street,
+					suggestions: w,
+					required: e.required,
+					onChange: (e) => U("street", e),
+					onSearch: (e) => u.searchAddress(e),
+					onSelect: G,
+					onBlur: () => H("street")
+				}, e.name) : /* @__PURE__ */ s("div", {
+					ref: e.name === "postalCode" ? k : void 0,
+					children: /* @__PURE__ */ s(j, {
+						field: e,
+						value: g[e.name] ?? "",
+						error: B[e.name],
+						errorParams: V[e.name],
+						country: p,
+						labelHint: X(e.required),
+						onChange: U,
+						onBlur: H
+					})
+				}, e.name))] })
+			]
+		}), /* @__PURE__ */ s("div", {
+			className: "IncodeEkybFooter",
+			children: [/* @__PURE__ */ s(m, {
+				onClick: () => u.submit(),
+				disabled: !v,
+				"data-testid": "ekyb-submit",
+				children: E("ekyb.continue")
+			}), /* @__PURE__ */ s(d, { size: 16 })]
+		})]
+	});
+}, L = ({ config: e, onFinish: t }) => /* @__PURE__ */ s(u, { children: e ? /* @__PURE__ */ s(N, {
+	config: e,
+	onFinish: t
+}) : null });
+b(L, "incode-ekyb");
+//#endregion
+export { L as t };

package/dist/ekybModule-D9M3E2Gm.js

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

package/dist/ekyc/ekyc.es.js

@@ -0,0 +1,2 @@
+import { t as e } from "../ekycModule-CU9pt5YN.js";
+export { e as EkycModule };

package/dist/ekyc/styles.css

@@ -0,0 +1,106 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+.IncodeEkycPage {
+  max-width: 480px;
+  margin-inline: auto;
+}
+
+@media (min-width: 48rem) {
+  .IncodeEkycPage .IncodePageInner {
+    padding-inline: var(--spacing-0, var(--spacing-none, 0px));
+    padding-block: var(--spacing-0, var(--spacing-none, 0px));
+  }
+}
+
+.IncodeEkycPage .IncodeEkycSpinner {
+  flex: 1;
+}
+
+.IncodeEkycPage .IncodeEkycForm {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeEkycPage .IncodeEkycForm .IncodeInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodePhoneInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeAddressAutocomplete {
+  margin-inline: auto;
+}
+
+.IncodeEkycPage .IncodeEkycForm .IncodeFormField {
+  margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeEkycPage .IncodeEkycSectionHeader {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h3-size);
+  font-weight: var(--typography-headline-h3-weight);
+  line-height: var(--typography-headline-h3-line-height);
+  letter-spacing: var(--typography-headline-h3-letter-spacing);
+  color: var(--color-input-text-label-default, var(--input-text-label-default));
+  margin-inline: auto;
+  margin-top: var(--spacing-16, var(--spacing-16, 16px));
+  width: 100%;
+  max-width: 420px;
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
+}
+
+.IncodeEkycPage .IncodeEkycRadioGroup {
+  width: 100%;
+  max-width: 420px;
+  margin-inline: auto;
+}
+
+.IncodeEkycPage .IncodeEkycFooter {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeEkycPage .IncodeEkycFooter .IncodeEkycSubmitError {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+  margin-top: 0;
+}
+
+@media (min-width: 768px) {
+  .IncodeEkycPage.IncodePageContainer {
+    height: 100dvh;
+    max-height: none;
+    margin-top: var(--spacing-0, var(--spacing-none, 0px));
+  }
+
+  .IncodeEkycPage .IncodePageInner {
+    height: 100%;
+  }
+
+  .IncodeEkycPage.IncodeEkycPageScrollable {
+    max-width: 500px;
+  }
+
+  .IncodeEkycPage .IncodePageContent {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+  }
+
+  .IncodeEkycPage .IncodeEkycForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
+    overflow-y: auto;
+  }
+
+  .IncodeEkycPage.IncodeEkycPageScrollable .IncodeEkycForm {
+    margin-left: var(--spacing-8, var(--spacing-8, 8px));
+  }
+
+  .IncodeEkycPage .IncodeEkycFooter {
+    flex-shrink: 0;
+  }
+}