@incodetech/web 2.2.0-rc.8 → 2.3.0-rc.0

package/dist/curp-validation/curp-validation.es.js

@@ -1,18 +1,15 @@
-import { a as useTranslation } from "../uiConfig-Dqnjankd.js";
-import { C as k, d as T, y as u } from "../vendor-preact-BPXMFRom.js";
-import { b as useManager, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "../incodeComponent-BtFz-bx2.js";
-import { t as Spacer } from "../spacer-DLEDuWEx.js";
-import { n as ErrorIcon, r as Button } from "../incode-logo-DeIDDejm.js";
-import "../icons-ChHV5iHi.js";
-import { t as SuccessIcon } from "../successIcon-DS8BLsgy.js";
-import { t as AutoFocusTitle } from "../autoFocusTitle-DB-23sv_.js";
-import { t as InputComposed } from "../inputComposed-C2zTEXsp.js";
-import { t as DropdownComposed } from "../dropdownComposed-CEegNzG4.js";
-import "../dropdownComposed-Bf4EcKFw.js";
-import { t as DateInputComposed } from "../dateInputComposed-DSgV0wnb.js";
-import "../dateInputComposed-BGC37jC7.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
-import { n as getRequiredHintMode, t as getFieldHint } from "../requiredLabelHint-Dx0WS2cR.js";
+import { o as useTranslation } from "../uiConfig-C1jdTj-i.js";
+import { S as k, v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, d as TransitionSpinner, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "../incodeComponent-D3_BSWan.js";
+import { t as Spacer } from "../spacer-ayyj5lMa.js";
+import { b as ErrorIcon, r as SuccessIcon, x as Button } from "../icons-eIgP34nj.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-CIbcUW_x.js";
+import { t as InputComposed } from "../inputComposed-CTZnsHLi.js";
+import { t as DropdownComposed } from "../dropdownComposed-DYdI3B4r.js";
+import "../dropdownComposed-CXwC9j18.js";
+import { t as DateInputComposed } from "../dateInputComposed-BcmKKwRL.js";
+import "../dateInputComposed-DPM6l_SL.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BQgvYKyr.js";
 import { GENERATE_CURP_FIELDS, createCurpValidationManager, mexicanStates } from "@incodetech/core/curp-validation";
 //#region src/modules/curp-validation/curpInput.tsx
 var CurpInput = ({ curp, errorKey, onCurpChange, onCurpBlur, onVerify, onSwitchToGenerate, disabled = false, placeholder, continueLabel, dontHaveLabel }) => {
@@ -34,11 +31,11 @@ var CurpInput = ({ curp, errorKey, onCurpChange, onCurpBlur, onVerify, onSwitchT
 				value: curp,
 				onInput: handleInput,
 				onBlur: onCurpBlur,
+				label: t("curp.placeholder.curp") ?? "CURP",
 				placeholder: displayPlaceholder,
 				disabled,
 				required: true,
 				maxLength: 18,
-				"aria-label": t("curp.placeholder.curp") ?? "CURP",
 				error: errorMessage,
 				showErrorIcon: !!errorMessage
 			}),
@@ -80,7 +77,6 @@ var GenerateCurpFormComponent = ({ form, validationErrors, onFormChange, onValid
 		generate: t("curp.generateCta") ?? "Generate CURP",
 		...customLabels
 	};
-	const mode = T(() => getRequiredHintMode(GENERATE_CURP_FIELDS.map((f) => f.required)), []);
 	const hasValidationErrors = !!validationErrors && Object.keys(validationErrors).length > 0;
 	const handleTextChange = (field) => (e) => {
 		const target = e.target;
@@ -118,8 +114,6 @@ var GenerateCurpFormComponent = ({ form, validationErrors, onFormChange, onValid
 		}
 	};
 	const renderField = (field) => {
-		const hint = getFieldHint(mode, field.required);
-		const labelHint = hint ? t(`forms.label.${hint}`) ?? void 0 : void 0;
 		const errorKey = validationErrors?.[field.key];
 		const errorMessage = errorKey ? t(errorKey) ?? void 0 : void 0;
 		const label = labelForField(field.key);
@@ -129,7 +123,6 @@ var GenerateCurpFormComponent = ({ form, validationErrors, onFormChange, onValid
 			return /* @__PURE__ */ u(DropdownComposed, {
 				id: `curp-${field.key === "birthState" ? "birth-state" : "gender"}`,
 				label,
-				labelHint,
 				placeholder,
 				value: form[field.key],
 				options,
@@ -149,7 +142,6 @@ var GenerateCurpFormComponent = ({ form, validationErrors, onFormChange, onValid
 		if (field.type === "date") return /* @__PURE__ */ u(DateInputComposed, {
 			id: "curp-birth-date",
 			label,
-			labelHint,
 			value: form.birthDate,
 			onInput: handleTextChange("birthDate"),
 			onBlur: handleBlur("birthDate"),
@@ -164,7 +156,6 @@ var GenerateCurpFormComponent = ({ form, validationErrors, onFormChange, onValid
 		return /* @__PURE__ */ u(InputComposed, {
 			id: field.key === "name" ? "curp-first-name" : field.key === "firstLastName" ? "curp-first-last" : "curp-second-last",
 			label,
-			labelHint,
 			value: form[field.key],
 			onInput: handleTextChange(field.key),
 			onBlur: handleBlur(field.key),
@@ -212,6 +203,7 @@ var CurpValidationContent = ({ config, manager: externalManager, onFinish, onErr
 	if (state.status === "enterCurp") return /* @__PURE__ */ u(Page, {
 		className: "IncodeCurpValidationPage",
 		title: t("curp.enterCurp") ?? "Enter your CURP",
+		subtitle: t("forms.subtitle"),
 		children: /* @__PURE__ */ u(CurpInput, {
 			curp: state.curp,
 			errorKey: state.validationErrors?.curp,
@@ -227,6 +219,7 @@ var CurpValidationContent = ({ config, manager: externalManager, onFinish, onErr
 	if (state.status === "generateCurp") return /* @__PURE__ */ u(Page, {
 		className: "IncodeCurpValidationPage IncodeCurpGeneratePage",
 		title: t("curp.generate") ?? "Generate your CURP",
+		subtitle: t("forms.subtitle"),
 		hideFooterBranding: true,
 		children: /* @__PURE__ */ u(GenerateCurpFormComponent, {
 			form: state.form,

package/dist/curp-validation/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeCurpValidationPage .IncodePageContent {\n  padding-top: var(--spacing-32, var(--spacing-32, 32px));\n  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n\n@media (min-width: 48rem) {\n  .IncodeCurpValidationPage.IncodeCurpGeneratePage.IncodePageContainer {\n    align-items: stretch;\n  }\n\n  .IncodeCurpValidationPage.IncodeCurpGeneratePage .IncodePageInner {\n    height: 100%;\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n  }\n\n  .IncodeCurpValidationPage.IncodeCurpGeneratePage .IncodePageContent {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n  }\n}\n\n.IncodeCurpValidationPage .IncodeCurpValidation {\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.IncodeCurpValidationPage .IncodeCurpInput {\n  min-height: var(--spacing-0, var(--spacing-none, 0px));\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:focus {\n  text-decoration: none;\n}\n\n.IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:active {\n  color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));\n}\n\n.IncodeCurpValidationPage .IncodeGenerateCurpForm {\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  flex-direction: column;\n  display: flex;\n}\n\n@media (min-width: 48rem) {\n  .IncodeCurpValidationPage .IncodeGenerateCurpForm {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n  }\n}\n\n.IncodeCurpValidationPage .IncodeGenerateCurpFields {\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n@media (min-width: 48rem) {\n  .IncodeCurpValidationPage .IncodeGenerateCurpFields {\n    min-height: var(--spacing-0, var(--spacing-none, 0px));\n    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));\n    flex: 1;\n    overflow-y: auto;\n  }\n}\n\n.IncodeCurpValidationPage .IncodeGenerateCurpFooter {\n  width: 100%;\n  padding-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n@media (min-width: 48rem) {\n  .IncodeCurpValidationPage .IncodeGenerateCurpFooter {\n    flex-shrink: 0;\n  }\n}\n\n.IncodeCurpValidationPage .IncodeCurpConfirm {\n  width: 100%;\n  max-width: var(--incode-curp-confirm-max-w);\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeCurpValidationPage .IncodeCurpConfirm .IncodeInput {\n  text-align: center;\n  font-family: var(--typography-input-dropdown-family);\n  font-size: var(--typography-input-dropdown-m-size);\n  font-weight: var(--typography-input-dropdown-m-weight);\n  line-height: var(--typography-input-dropdown-m-line-height);\n  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);\n}\n\n.IncodeCurpValidationPage .IncodeCurpSuccess, .IncodeCurpValidationPage .IncodeCurpFailure {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeCurpValidationPage .IncodeCurpSuccessTitle, .IncodeCurpValidationPage .IncodeCurpFailureTitle {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeCurpValidationPage .IncodeCurpFailureHint {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n";

package/dist/custom-fields/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeCustomFieldsForm {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  overflow-y: auto;\n}\n\n.IncodeCustomFieldsForm .IncodeCustomFieldsField {\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeCustomFieldsPage .IncodePageHeader {\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n";

package/dist/{customFields-rVMTo1Yu.js → customFields-BdnLB6L1.js}

@@ -1,14 +1,13 @@
-import { a as useTranslation } from "./uiConfig-Dqnjankd.js";
-import { p as d, y as u } from "./vendor-preact-BPXMFRom.js";
-import { b as useManager, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "./incodeComponent-BtFz-bx2.js";
-import { n as LoadingIcon, t as Spacer } from "./spacer-DLEDuWEx.js";
-import { r as Button } from "./incode-logo-DeIDDejm.js";
-import { t as SuccessIcon } from "./successIcon-DS8BLsgy.js";
-import { t as StatusPage } from "./statusPage-BF4qGjF3.js";
-import { t as InputComposed } from "./inputComposed-C2zTEXsp.js";
-import { t as Checkbox } from "./checkbox-FGA-Ij-D.js";
-import { t as DateInputComposed } from "./dateInputComposed-DSgV0wnb.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-9K8KUs61.js";
+import { o as useTranslation } from "./uiConfig-C1jdTj-i.js";
+import { f as d, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "./incodeComponent-D3_BSWan.js";
+import { n as LoadingIcon, t as Spacer } from "./spacer-ayyj5lMa.js";
+import { r as SuccessIcon, x as Button } from "./icons-eIgP34nj.js";
+import { t as StatusPage } from "./statusPage-Bqz3Ci4f.js";
+import { t as InputComposed } from "./inputComposed-CTZnsHLi.js";
+import { t as Checkbox } from "./checkbox-D0wfscwg.js";
+import { t as DateInputComposed } from "./dateInputComposed-BcmKKwRL.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-BQgvYKyr.js";
 import { createCustomFieldsManager } from "@incodetech/core/custom-fields";
 //#region src/modules/custom-fields/customFields.tsx
 var INPUT_TYPE_MAP = {
@@ -17,14 +16,19 @@ var INPUT_TYPE_MAP = {
 	STRING: "text"
 };
 var INPUT_STEP_MAP = { DOUBLE: "any" };
-var DateFieldInput = ({ field, isDisabled, onChange }) => {
+var DateFieldInput = ({ error, field, isDisabled, required, onChange }) => {
 	const [dateValue, setDateValue] = d("");
+	const id = `custom-field-${field.name}`;
 	return /* @__PURE__ */ u("div", {
 		class: "IncodeCustomFieldsField",
 		children: /* @__PURE__ */ u(DateInputComposed, {
-			id: `custom-field-${field.name}`,
+			id,
 			name: field.name,
 			label: field.label,
+			"data-testid": id,
+			error,
+			showErrorIcon: !!error,
+			required,
 			disabled: isDisabled,
 			value: dateValue,
 			onInput: (e) => {
@@ -35,7 +39,7 @@ var DateFieldInput = ({ field, isDisabled, onChange }) => {
 		})
 	});
 };
-var CustomFieldInput = ({ field, isDisabled, onChange }) => {
+var CustomFieldInput = ({ error, field, isDisabled, required, onChange }) => {
 	const id = `custom-field-${field.name}`;
 	if (field.type === "BOOLEAN") return /* @__PURE__ */ u("div", {
 		class: "IncodeCustomFieldsField",
@@ -43,13 +47,18 @@ var CustomFieldInput = ({ field, isDisabled, onChange }) => {
 			id,
 			name: field.name,
 			label: field.label,
+			"data-testid": id,
+			error,
+			required,
 			disabled: isDisabled,
 			onChange: (e) => onChange(field.name, e.target.checked)
 		})
 	});
 	if (field.type === "DATE") return /* @__PURE__ */ u(DateFieldInput, {
+		error,
 		field,
 		isDisabled,
+		required,
 		onChange
 	});
 	return /* @__PURE__ */ u("div", {
@@ -58,8 +67,12 @@ var CustomFieldInput = ({ field, isDisabled, onChange }) => {
 			id,
 			name: field.name,
 			label: field.label,
+			"data-testid": id,
+			error,
+			showErrorIcon: !!error,
 			type: INPUT_TYPE_MAP[field.type] ?? "text",
 			step: INPUT_STEP_MAP[field.type],
+			required,
 			disabled: isDisabled,
 			onInput: (e) => onChange(field.name, e.target.value)
 		})
@@ -79,6 +92,7 @@ var CustomFieldsContent = ({ config, manager: externalManager, onFinish, onError
 		status: state.status === "finished" ? "finished" : "loading",
 		onFinish
 	});
+	if (state.status === "idle") return null;
 	if (state.status === "success") return /* @__PURE__ */ u(StatusPage, {
 		variant: "success",
 		icon: /* @__PURE__ */ u(SuccessIcon, { size: 64 }),
@@ -101,24 +115,35 @@ var CustomFieldsContent = ({ config, manager: externalManager, onFinish, onError
 	return /* @__PURE__ */ u(Page, {
 		className: "IncodeCustomFieldsPage",
 		title,
+		subtitle: t("forms.subtitle"),
 		hideFooterBranding: true,
+		"data-testid": "custom-fields-page",
 		children: /* @__PURE__ */ u("form", {
 			class: "IncodeCustomFieldsForm",
+			"data-testid": "custom-fields-form",
+			noValidate: true,
 			onSubmit: (e) => {
 				e.preventDefault();
 				manager.submit();
 			},
 			autoComplete: "off",
 			children: [
-				customFields.map((field) => /* @__PURE__ */ u(CustomFieldInput, {
-					field,
-					isDisabled: false,
-					onChange: handleChange
-				}, field.name)),
+				customFields.map((field) => {
+					const required = field.type !== "BOOLEAN";
+					const errorKey = state.validationErrors?.[field.name];
+					return /* @__PURE__ */ u(CustomFieldInput, {
+						error: errorKey ? t(errorKey, { fieldName: field.label }) : void 0,
+						field,
+						isDisabled: false,
+						required,
+						onChange: handleChange
+					}, field.name);
+				}),
 				/* @__PURE__ */ u(Spacer, {}),
 				/* @__PURE__ */ u(Button, {
 					type: "submit",
 					disabled: !canSubmit,
+					"data-testid": "custom-fields-submit",
 					children: t("customFields.continue")
 				})
 			]

package/dist/{customWatchlist-DgpXtVRf.js → customWatchlist-DzeHJAa3.js}

@@ -1,15 +1,15 @@
-import { a as useTranslation } from "./uiConfig-Dqnjankd.js";
-import { v as y, y as u } from "./vendor-preact-BPXMFRom.js";
-import { b as useManager, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "./incodeComponent-BtFz-bx2.js";
-import { n as LoadingIcon } from "./spacer-DLEDuWEx.js";
-import { t as SuccessIcon } from "./successIcon-DS8BLsgy.js";
-import { t as StatusPage } from "./statusPage-BF4qGjF3.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-9K8KUs61.js";
+import { o as useTranslation } from "./uiConfig-C1jdTj-i.js";
+import { _ as y, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "./incodeComponent-D3_BSWan.js";
+import { n as LoadingIcon } from "./spacer-ayyj5lMa.js";
+import { r as SuccessIcon } from "./icons-eIgP34nj.js";
+import { t as StatusPage } from "./statusPage-Bqz3Ci4f.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-BQgvYKyr.js";
 import { createCustomWatchlistManager } from "@incodetech/core/custom-watchlist";
 //#region src/modules/custom-watchlist/customWatchlist.tsx
-var CustomWatchlistContent = ({ onFinish }) => {
+var CustomWatchlistContent = ({ manager: externalManager, onFinish }) => {
 	const { t } = useTranslation();
-	const [state, manager] = useManager(() => createCustomWatchlistManager());
+	const [state, manager] = useManager(() => externalManager ?? createCustomWatchlistManager(), { manageLifecycle: !externalManager });
 	y(() => {
 		manager.load();
 	}, [manager]);
@@ -29,8 +29,11 @@ var CustomWatchlistContent = ({ onFinish }) => {
 		subtitle: t("customWatchlist.wontTake")
 	});
 };
-var CustomWatchlistWithLocalConfig = ({ onFinish }) => /* @__PURE__ */ u(IncodeComponent, { children: /* @__PURE__ */ u(CustomWatchlistContent, { onFinish }) });
-var CustomWatchlist = withStandaloneModuleBootstrap(CustomWatchlistWithLocalConfig, "INCODE_WATCHLIST");
+var CustomWatchlistWithLocalConfig = ({ manager, onFinish }) => /* @__PURE__ */ u(IncodeComponent, { children: /* @__PURE__ */ u(CustomWatchlistContent, {
+	manager,
+	onFinish
+}) });
+var CustomWatchlist = withStandaloneModuleBootstrap(CustomWatchlistWithLocalConfig, "INCODE_WATCHLIST", { supportsExternalManager: true });
 registerIncodeModuleElement(CustomWatchlist, "incode-custom-watchlist");
 //#endregion
 export { CustomWatchlist };