@incodetech/web 2.1.1 → 2.2.0-rc.1

package/dist/incodeModule-uyUrSSUM.js

@@ -0,0 +1,25 @@
+import { d as T, x as _ } from "./vendor-preact-mvwZ8mJj.js";
+import { c as InstanceOverridesProvider } from "./spacer-Bnmh-DfR.js";
+import { t as registerIncodeElement } from "./registerIncodeElement-BduCekz5.js";
+//#region src/shared/webComponent/incodeModule.ts
+var incodeModulePropKeys = [
+	"config",
+	"manager",
+	"onFinish",
+	"onError"
+];
+function withInstanceOverrides(component) {
+	return function WithInstanceOverrides(props) {
+		const assets = props.config?.assets;
+		const animations = props.config?.animations;
+		return _(InstanceOverridesProvider, { value: T(() => ({
+			assets,
+			animations
+		}), [assets, animations]) }, _(component, props));
+	};
+}
+function registerIncodeModuleElement(component, tagName) {
+	registerIncodeElement(withInstanceOverrides(component), tagName, incodeModulePropKeys);
+}
+//#endregion
+export { registerIncodeModuleElement as t };

package/dist/index.es.js

@@ -1,10 +1,16 @@
-import { a as createI18n, i as setI18nInstance } from "./i18n-CU4xq8qC.js";
-import { t as setUiConfig } from "./uiConfig-D2_wawvr.js";
+import { c as createI18n, n as setUiConfig, s as setI18nInstance } from "./uiConfig-D7ezQeZ7.js";
+import { n as preloadDashboardTheme, o as resolveStandaloneSetupPolicy, r as resetDashboardThemeCache, s as setStandaloneSetupPolicy } from "./dashboardTheme-FtPiizV0.js";
 import { DEFAULT_WASM_VERSION } from "@incodetech/core/wasm";
 import { setup as setup$1 } from "@incodetech/core";
 //#region src/setup.ts
-async function setup({ apiURL, token, customHeaders, timeout, wasm, ipLookup, fingerprint, devMode, i18n, uiConfig }) {
-	if (uiConfig) setUiConfig(uiConfig);
+function preloadOptionalDashboardTheme(token) {
+	return Promise.resolve().then(() => preloadDashboardTheme(token)).then(() => void 0).catch(() => void 0);
+}
+async function setup({ apiURL, token, customHeaders, timeout, wasm, ipLookup, fingerprint, devMode, featureManagement, environment, i18n, uiConfig, flow, theme }) {
+	const standaloneSetupPolicy = resolveStandaloneSetupPolicy(flow, theme, token);
+	setStandaloneSetupPolicy(standaloneSetupPolicy);
+	resetDashboardThemeCache();
+	if (uiConfig && !standaloneSetupPolicy.theme.preload) setUiConfig(uiConfig);
 	await setup$1({
 		apiURL,
 		token,
@@ -13,8 +19,13 @@ async function setup({ apiURL, token, customHeaders, timeout, wasm, ipLookup, fi
 		wasm,
 		ipLookup,
 		fingerprint,
-		devMode
+		devMode,
+		featureManagement,
+		environment,
+		flow
 	});
+	if (standaloneSetupPolicy.theme.preload) await preloadOptionalDashboardTheme(token);
+	if (uiConfig && standaloneSetupPolicy.theme.preload) setUiConfig(uiConfig);
 	setI18nInstance(createI18n(i18n));
 }
 //#endregion

package/dist/inputComposed-CABc288U.js

@@ -0,0 +1 @@
+import "./inputComposed-Pp_XN1-h.js";

package/dist/{inputComposed-C1R2LAa3.js → inputComposed-Pp_XN1-h.js}

@@ -1,8 +1,8 @@
-import { a as D, v as u } from "./vendor-preact-DThS2ZQ_.js";
-import { n as cn } from "./loadingIcon-B0ysgiNq.js";
-import { t as ErrorIcon } from "./errorIcon-BA4T6iy-.js";
-import { o as CloseIcon } from "./icons-CJJbIpBq.js";
-import { t as SuccessIcon } from "./successIcon-B5mGvdx1.js";
+import { a as D, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { u as cn } from "./spacer-Bnmh-DfR.js";
+import { n as ErrorIcon } from "./incode-logo-cGsd55rc.js";
+import { l as CloseIcon } from "./icons-D0cfSCBM.js";
+import { t as SuccessIcon } from "./successIcon-Bj8Y9CuI.js";
 //#region src/shared/input/input.tsx
 var Input = D((props, ref) => {
 	const { class: className, type = "text", ...restProps } = props;
@@ -15,7 +15,7 @@ var Input = D((props, ref) => {
 });
 //#endregion
 //#region src/shared/inputComposed/inputComposed.tsx
-var InputComposed = D(({ id, label, labelHint, "aria-label": ariaLabel, "aria-describedby": externalDescribedBy, type, error, showErrorIcon, helper, showHelperIcon, closeButton, rightIcon, required, suppressMessages = false, class: className, value, ...restProps }, ref) => {
+var InputComposed = D(({ id, label, labelHint, "aria-label": ariaLabel, "aria-describedby": externalDescribedBy, type, error, invalid, showErrorIcon, helper, showHelperIcon, closeButton, rightIcon, required, suppressMessages = false, class: className, value, ...restProps }, ref) => {
 	const helperId = `${id}-helper`;
 	const errorId = `${id}-error`;
 	const describedByIds = [
@@ -49,7 +49,7 @@ var InputComposed = D(({ id, label, labelHint, "aria-label": ariaLabel, "aria-de
 						...!label && ariaLabel ? { "aria-label": ariaLabel } : {},
 						"aria-describedby": describedByIds,
 						"aria-required": required ? "true" : void 0,
-						"aria-invalid": error ? "true" : void 0,
+						"aria-invalid": error || invalid ? "true" : void 0,
 						value
 					}),
 					rightIcon,
@@ -73,7 +73,7 @@ var InputComposed = D(({ id, label, labelHint, "aria-label": ariaLabel, "aria-de
 				"data-testid": `${id}-error-wrapper`,
 				children: [showErrorIcon && /* @__PURE__ */ u("div", {
 					class: "IncodeInputComposedIconWrapper",
-					children: /* @__PURE__ */ u(ErrorIcon, { size: 17 })
+					children: /* @__PURE__ */ u(ErrorIcon, { size: 16 })
 				}), /* @__PURE__ */ u("p", {
 					id: errorId,
 					class: "IncodeInputComposedError",
@@ -85,7 +85,7 @@ var InputComposed = D(({ id, label, labelHint, "aria-label": ariaLabel, "aria-de
 				"data-testid": `${id}-helper-wrapper`,
 				children: [showHelperIcon && /* @__PURE__ */ u("div", {
 					class: "IncodeInputComposedIconWrapper",
-					children: /* @__PURE__ */ u(SuccessIcon, { size: 17 })
+					children: /* @__PURE__ */ u(SuccessIcon, { size: 16 })
 				}), /* @__PURE__ */ u("p", {
 					id: helperId,
 					class: "IncodeInputComposedHelper",

package/dist/{mandatoryConsent-D0GTKu-H.js → mandatoryConsent-DSAjFc0h.js}

@@ -1,13 +1,10 @@
-import { n as useTranslation } from "./i18n-CU4xq8qC.js";
-import { _ as y, l as A, v as u } from "./vendor-preact-DThS2ZQ_.js";
-import { c as useModuleTerminalCallbacks, s as isTerminalModuleState, u as useManager } from "./hooks-CNu7o-v8.js";
-import { t as IncodeComponent } from "./incodeComponent-CfzJGETt.js";
-import { t as Page } from "./page-DidH_RkX.js";
-import { t as TransitionSpinner } from "./transitionSpinner-CuNCqHNi.js";
-import { t as Button } from "./button-Dz6AsbmF.js";
-import { t as Checkbox } from "./checkbox-1wUHSoaK.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-B-4_3JrK.js";
-import { t as RichText } from "./richText-CB1fmegc.js";
+import { a as useTranslation } from "./uiConfig-D7ezQeZ7.js";
+import { _ as y, l as A, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { _ as useModuleTerminalCallbacks, g as isTerminalModuleState, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "./incodeComponent-B-daxouV.js";
+import { r as Button } from "./incode-logo-cGsd55rc.js";
+import { t as Checkbox } from "./checkbox-Jgwh943i.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-uyUrSSUM.js";
+import { t as RichText } from "./richText-2OnIN9ff.js";
 import { createMandatoryConsentManager } from "@incodetech/core/mandatory-consent";
 //#region src/modules/mandatory-consent/mandatoryConsent.tsx
 var stopLinkPropagation = (event) => {
@@ -94,7 +91,7 @@ var MandatoryConsentContent = ({ config, manager: externalManager, onFinish, onE
 		})
 	}, "ready");
 };
-var MandatoryConsent = ({ config, manager, onFinish, onError }) => {
+var MandatoryConsentWithLocalConfig = ({ config, manager, onFinish, onError }) => {
 	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(MandatoryConsentContent, {
 		config,
 		manager,
@@ -102,6 +99,7 @@ var MandatoryConsent = ({ config, manager, onFinish, onError }) => {
 		onError
 	}) : null });
 };
+var MandatoryConsent = withStandaloneModuleBootstrap(MandatoryConsentWithLocalConfig, "MANDATORY_CONSENT", { supportsExternalManager: true });
 registerIncodeModuleElement(MandatoryConsent, "incode-mandatory-consent");
 //#endregion
 export { MandatoryConsent };

package/dist/manualCaptureButton-BY8dRhGA.js

@@ -0,0 +1,300 @@
+import { a as useTranslation } from "./uiConfig-D7ezQeZ7.js";
+import { S as k, _ as y, a as D, h as q, l as A, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { o as Lottie, t as Spacer, u as cn } from "./spacer-Bnmh-DfR.js";
+import { r as Button } from "./incode-logo-cGsd55rc.js";
+import { h as CaptureButtonIcon } from "./icons-D0cfSCBM.js";
+//#region src/shared/cameraOverlay/cameraFrame.tsx
+var CameraFrame = D(({ variant, aspectRatio, orientation = "horizontal", frameState = "idle", className, children }, ref) => {
+	const stateClass = `IncodeCameraFrame${frameState.charAt(0).toUpperCase()}${frameState.slice(1)}`;
+	return /* @__PURE__ */ u("div", {
+		ref,
+		class: cn("IncodeCameraFrame", variant === "fill" && "IncodeCameraFrameFill", variant === "locked" && "IncodeCameraFrameLocked", variant === "locked" && orientation === "horizontal" && "IncodeCameraFrameHorizontal", variant === "locked" && orientation === "vertical" && "IncodeCameraFrameVertical", stateClass, className),
+		style: aspectRatio ? { aspectRatio } : void 0,
+		"aria-hidden": true,
+		children
+	});
+});
+//#endregion
+//#region src/shared/cameraOverlay/cameraView.tsx
+var CameraView = ({ stream, children, videoRef: externalVideoRef, onPlaying, className, mirrored, ...rest }) => {
+	const internalVideoRef = A(null);
+	const setVideoRef = (el) => {
+		internalVideoRef.current = el;
+		if (typeof externalVideoRef === "function") externalVideoRef(el);
+		else if (externalVideoRef) externalVideoRef.current = el;
+	};
+	y(() => {
+		if (internalVideoRef.current && stream) {
+			internalVideoRef.current.srcObject = stream;
+			internalVideoRef.current.play().catch(() => {});
+		}
+	}, [stream]);
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeCameraView", className),
+		...rest,
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeCameraViewVideo",
+			children: /* @__PURE__ */ u("video", {
+				ref: setVideoRef,
+				autoplay: true,
+				playsInline: true,
+				muted: true,
+				onPlaying,
+				"aria-hidden": "true",
+				class: cn("IncodeCameraViewVideoElement", mirrored && "IncodeCameraViewVideoMirrored")
+			})
+		}), children]
+	});
+};
+//#endregion
+//#region src/modules/id/capture/useCaptureNotification.ts
+var animationCache = /* @__PURE__ */ new Map();
+var preloadPromise = null;
+var animationLoaders = {
+	blur: () => import("./blurdevicelottie-8BbophdM.js"),
+	glare: () => import("./glaredevicelottie-Cnvah0kz.js"),
+	align: () => import("./aligndevicelottie-CfoZ5Uus.js"),
+	front: () => import("./frontdevicelottie-CFcahVLk.js"),
+	back: () => import("./backdevicelottie-yKkczgFy.js")
+};
+function startPreload() {
+	preloadPromise ??= Promise.all([
+		animationLoaders.blur(),
+		animationLoaders.glare(),
+		animationLoaders.align(),
+		animationLoaders.front(),
+		animationLoaders.back()
+	]).then(([blur, glare, align, front, back]) => {
+		animationCache.set("blur", blur.default);
+		animationCache.set("glare", glare.default);
+		animationCache.set("align", align.default);
+		animationCache.set("front", front.default);
+		animationCache.set("back", back.default);
+	}).catch(() => {});
+	return preloadPromise;
+}
+function preloadCaptureAnimations() {
+	startPreload();
+}
+function usePreloadCaptureAnimations() {
+	y(() => {
+		preloadCaptureAnimations();
+	}, []);
+}
+function useCaptureNotification(detectionStatus, mode) {
+	const { t } = useTranslation();
+	const [, forceUpdate] = d(0);
+	y(() => {
+		let mounted = true;
+		startPreload().then(() => {
+			if (mounted) forceUpdate((n) => n + 1);
+		});
+		return () => {
+			mounted = false;
+		};
+	}, []);
+	if (detectionStatus === "blur") return {
+		title: t("idv2.capture.notifications.blur.title"),
+		description: t("idv2.capture.notifications.blur.description"),
+		animationData: animationCache.get("blur") ?? null
+	};
+	if (detectionStatus === "glare") return {
+		title: t("idv2.capture.notifications.glare.title"),
+		description: t("idv2.capture.notifications.glare.description"),
+		animationData: animationCache.get("glare") ?? null
+	};
+	if (detectionStatus === "farAway") return {
+		title: t("idv2.capture.notifications.notAligned.title"),
+		description: t("idv2.capture.notifications.notAligned.description"),
+		animationData: animationCache.get("align") ?? null
+	};
+	if (detectionStatus === "wrongSide") {
+		const isBack = mode === "back";
+		return {
+			title: isBack ? t("idv2.capture.notifications.showBack.title") : t("idv2.capture.notifications.showFront.title"),
+			description: isBack ? t("idv2.capture.notifications.showBack.description") : t("idv2.capture.notifications.showFront.description"),
+			animationData: animationCache.get(isBack ? "back" : "front") ?? null
+		};
+	}
+	return null;
+}
+//#endregion
+//#region src/modules/id/capture/captureNotification.tsx
+var CaptureNotification = ({ detectionStatus, mode, isCapturing }) => {
+	const { t } = useTranslation();
+	const notification = useCaptureNotification(detectionStatus, mode);
+	const liveRef = A(null);
+	const lastAnnouncedRef = A({
+		message: "",
+		at: 0
+	});
+	const prevDetectionStatusRef = A(detectionStatus);
+	const hasAnnouncedInstructionsRef = A(false);
+	const clearTimerRef = A();
+	const outerTimerRef = A();
+	const isIdle = detectionStatus === "detecting" || detectionStatus === "idNotDetected" || detectionStatus === "manualCapture";
+	const isManualCapture = detectionStatus === "manualCapture";
+	const isWrongSide = detectionStatus === "wrongSide";
+	const isFarAway = detectionStatus === "farAway";
+	const isGlare = detectionStatus === "glare";
+	const isBlur = detectionStatus === "blur";
+	const announce = q((message) => {
+		const now = Date.now();
+		const last = lastAnnouncedRef.current;
+		if (message === last.message && now - last.at < 200) return;
+		lastAnnouncedRef.current = {
+			message,
+			at: now
+		};
+		const node = liveRef.current;
+		if (!node) return;
+		clearTimeout(clearTimerRef.current);
+		node.textContent = "";
+		outerTimerRef.current = setTimeout(() => {
+			node.textContent = message;
+			clearTimerRef.current = setTimeout(() => {
+				node.textContent = "";
+			}, 3e3);
+		}, 50);
+	}, []);
+	const getIdleMessage = q(() => {
+		if (mode === "passport") return t("idv2.capture.fillFramePassport");
+		if (mode === "back") return t("idv2.capture.fillFrameBack");
+		return t("idv2.capture.fillFrameFront");
+	}, [mode, t]);
+	y(() => {
+		if (isManualCapture) {
+			hasAnnouncedInstructionsRef.current = false;
+			return;
+		}
+		if (hasAnnouncedInstructionsRef.current) return;
+		if (!isIdle) return;
+		const timer = setTimeout(() => {
+			hasAnnouncedInstructionsRef.current = true;
+			announce(getIdleMessage());
+		}, 500);
+		return () => clearTimeout(timer);
+	}, [
+		isIdle,
+		isManualCapture,
+		announce,
+		getIdleMessage
+	]);
+	y(() => {
+		const prev = prevDetectionStatusRef.current;
+		prevDetectionStatusRef.current = detectionStatus;
+		if (prev !== "manualCapture" && isManualCapture) announce(t("idv2.capture.manualCapture.modeSwitchAriaAnnouncement"));
+	}, [
+		announce,
+		detectionStatus,
+		isManualCapture,
+		t
+	]);
+	y(() => {
+		if (isCapturing) return;
+		if (isWrongSide) {
+			const baseKey = mode === "front" || mode === "passport" ? "idv2.capture.notifications.showFront" : "idv2.capture.notifications.showBack";
+			announce(`${t(`${baseKey}.title`)}. ${t(`${baseKey}.description`)}`);
+			return;
+		}
+		if (isFarAway) {
+			announce(`${t("idv2.capture.notifications.notAligned.title")}.`);
+			return;
+		}
+		if (isGlare) {
+			announce(`${t("idv2.capture.notifications.glare.title")}.`);
+			return;
+		}
+		if (isBlur) {
+			announce(`${t("idv2.capture.notifications.blur.title")}.`);
+			return;
+		}
+		if (isIdle && hasAnnouncedInstructionsRef.current) announce(getIdleMessage());
+	}, [
+		announce,
+		isBlur,
+		isCapturing,
+		isFarAway,
+		isGlare,
+		isIdle,
+		isWrongSide,
+		mode,
+		t,
+		getIdleMessage
+	]);
+	y(() => {
+		return () => {
+			clearTimeout(outerTimerRef.current);
+			clearTimeout(clearTimerRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("div", {
+		ref: liveRef,
+		class: "IncodeSrOnly",
+		"aria-live": "assertive",
+		"aria-atomic": "true"
+	}), notification ? /* @__PURE__ */ u("div", {
+		class: cn("IncodeIdCaptureNotification"),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeIdCaptureNotificationContent",
+			children: [
+				/* @__PURE__ */ u("div", {
+					class: cn("IncodeIdCaptureNotificationText"),
+					children: [/* @__PURE__ */ u("div", {
+						class: "IncodeIdCaptureNotificationTitle",
+						children: notification.title
+					}), notification.description && /* @__PURE__ */ u("div", {
+						class: "IncodeIdCaptureNotificationDescription",
+						children: notification.description
+					})]
+				}),
+				/* @__PURE__ */ u(Spacer, {
+					size: 16,
+					direction: "horizontal"
+				}),
+				notification.animationData && /* @__PURE__ */ u("div", {
+					class: "IncodeIdCaptureNotificationAnimation",
+					children: /* @__PURE__ */ u(Lottie, {
+						animationData: notification.animationData,
+						loop: true,
+						autoStop: true,
+						stopFramePosition: "last"
+					})
+				})
+			]
+		})
+	}) : null] });
+};
+//#endregion
+//#region src/modules/id/capture/manualCaptureButton.tsx
+var ManualCaptureButton = ({ onClick, disabled, isPassport }) => {
+	const { t } = useTranslation();
+	const firstStepKey = isPassport ? "idv2.commonIssues.firstStepPassport" : "idv2.commonIssues.firstStep";
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeIdManualCaptureButton",
+		"data-testid": "manual-capture-button",
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeIdManualCaptureTooltipContainer",
+			children: /* @__PURE__ */ u("div", {
+				class: "IncodeIdManualCaptureTooltip",
+				children: /* @__PURE__ */ u("ol", {
+					class: "IncodeIdManualCaptureTooltipList",
+					children: [/* @__PURE__ */ u("li", { children: t(firstStepKey) }), /* @__PURE__ */ u("li", { children: t("idv2.commonIssues.secondStep") })]
+				})
+			})
+		}), /* @__PURE__ */ u("div", {
+			class: "IncodeIdManualCaptureButtonContent",
+			children: /* @__PURE__ */ u(Button, {
+				variant: "link",
+				onClick,
+				disabled,
+				class: "IncodeIdManualCaptureButtonButton",
+				"aria-label": t("manualCapture.ariaLabel"),
+				children: /* @__PURE__ */ u(CaptureButtonIcon, {})
+			})
+		})]
+	});
+};
+//#endregion
+export { CameraView as a, usePreloadCaptureAnimations as i, CaptureNotification as n, CameraFrame as o, preloadCaptureAnimations as r, ManualCaptureButton as t };