@arkyc/widget 1.1.0 → 1.2.0

package/dist/ui.mjs

@@ -3,6 +3,7 @@ import { Camera } from "./capture.mjs";
 import { DEFAULT_TUNING, createDefaultFaceAnalyzer, isSelfieReady, makeChallengeDetector } from "./face.mjs";
 import { DEFAULT_DOCUMENT_TUNING, createDefaultDocumentAnalyzer, documentGuidance } from "./document.mjs";
 import { countries } from "./countries.mjs";
+import { createDom } from "./h.mjs";
 //#region src/ui.ts
 const DOCUMENT_LABELS = {
 	passport: "Passport",
@@ -99,36 +100,36 @@ var WidgetView = class {
 	timers = [];
 	/** Extra teardown run on each re-render (cancels in-flight detection loops). */
 	cleanups = [];
+	/** DOM hyperscript helpers (`h`/`append`/`field`) bound to this view's document (see {@link createDom}). */
+	dom;
 	constructor(doc, theme, handlers, nav = globalThis.navigator, analyzer = createDefaultFaceAnalyzer(), tuning = DEFAULT_TUNING, docAnalyzer = createDefaultDocumentAnalyzer(), docTuning = DEFAULT_DOCUMENT_TUNING) {
 		this.doc = doc;
 		this.theme = theme;
 		this.handlers = handlers;
+		this.dom = createDom(doc);
 		this.camera = new Camera(doc, nav);
 		this.analyzer = analyzer;
 		this.tuning = tuning;
 		this.docAnalyzer = docAnalyzer;
 		this.docTuning = docTuning;
-		this.root = this.el("div", { class: "arkyc-root" });
-		this.styleEl = this.el("style", { text: theme.stylesheet() });
+		this.root = this.dom.h("div", { class: "arkyc-root" });
+		this.styleEl = this.dom.h("style", { text: theme.stylesheet() });
 		this.root.appendChild(this.styleEl);
-		const card = this.el("div", { class: "arkyc-card" });
-		const header = this.el("div", { class: "arkyc-header" });
-		this.brandEl = this.el("div", { class: "arkyc-brand" });
+		this.brandEl = this.dom.h("div", { class: "arkyc-brand" });
 		this.fillBrand();
-		header.appendChild(this.brandEl);
-		const close = this.el("button", {
+		this.body = this.dom.h("div", { class: "arkyc-body" });
+		this.footer = this.dom.h("div", { class: "arkyc-footer" });
+		const header = this.dom.h("div", { class: "arkyc-header" }, [this.brandEl, this.dom.h("button", {
 			class: "arkyc-close",
 			html: "×",
-			"aria-label": "Close"
-		});
-		close.addEventListener("click", () => this.handlers.onClose());
-		header.appendChild(close);
-		this.body = this.el("div", { class: "arkyc-body" });
-		this.footer = this.el("div", { class: "arkyc-footer" });
-		card.appendChild(header);
-		card.appendChild(this.body);
-		card.appendChild(this.footer);
-		this.root.appendChild(card);
+			"aria-label": "Close",
+			on: { click: () => this.handlers.onClose() }
+		})]);
+		this.root.appendChild(this.dom.h("div", { class: "arkyc-card" }, [
+			header,
+			this.body,
+			this.footer
+		]));
 	}
 	/**
 	* Populate the header brand group from the current theme: the project logo
@@ -137,16 +138,14 @@ var WidgetView = class {
 	fillBrand() {
 		this.clear(this.brandEl);
 		const lastTenMins = Date.now() - Math.floor(Math.random() * (600 * 1e3));
-		if (this.theme.showBranding && (this.theme.logoUrl || this.theme.name)) {
-			if (this.theme.logoUrl) this.brandEl.appendChild(this.el("img", {
-				class: "arkyc-logo",
-				src: this.theme.logoUrl + "?stamp=" + lastTenMins
-			}));
-			if (this.theme.name) this.brandEl.appendChild(this.el("span", {
-				class: "arkyc-brand-name",
-				text: this.theme.name
-			}));
-		} else this.brandEl.appendChild(this.el("p", {
+		const branded = this.theme.showBranding && (this.theme.logoUrl || this.theme.name);
+		this.dom.append(this.brandEl, branded ? [this.theme.logoUrl && this.dom.h("img", {
+			class: "arkyc-logo",
+			src: `${this.theme.logoUrl}?stamp=${lastTenMins}`
+		}), this.theme.name && this.dom.h("span", {
+			class: "arkyc-brand-name",
+			text: this.theme.name
+		})] : this.dom.h("p", {
 			class: "arkyc-title",
 			text: "Verify your identity"
 		}));
@@ -202,6 +201,8 @@ var WidgetView = class {
 			case "selfie_capture": return this.renderCapture("Take a selfie", "user", state.allowSkip, true, state.strictCapture);
 			case "active_liveness": return this.renderActiveLiveness(state.livenessChallenges ?? [], state.allowSkip, state.requireLiveCamera);
 			case "ocr_processing": return this.renderProcessing("Reading your document…");
+			case "address_entry": return this.renderAddressForm(state.addressMethods ?? []);
+			case "address_processing": return this.renderProcessing("Verifying your address…");
 			case "passive_liveness": return this.renderProcessing("Checking liveness…");
 			case "face_match": return this.renderProcessing("Matching your face…");
 			case "processing": return this.renderProcessing(state.statusLabel ?? "Finalising verification…");
@@ -214,23 +215,21 @@ var WidgetView = class {
 	/** Prepend a decorative illustration for the given screen, when one exists. */
 	appendArt(key) {
 		const art = STEP_ART[key];
-		if (art) this.body.appendChild(this.el("div", {
+		if (art) this.body.appendChild(this.dom.h("div", {
 			class: "arkyc-illus",
 			html: art
 		}));
 	}
 	renderWelcome(handoffAvailable) {
 		this.appendArt("welcome");
-		this.body.appendChild(this.el("h2", {
+		this.dom.append(this.body, [this.dom.h("h2", {
 			class: "arkyc-h",
 			text: "Verify your identity"
-		}));
-		this.body.appendChild(this.el("p", {
+		}), this.dom.h("p", {
 			class: "arkyc-p",
 			text: "You will need a government-issued ID and a moment to take a selfie. Your data is processed securely."
-		}));
-		this.footer.appendChild(this.button("Get started", () => this.handlers.onStart()));
-		if (handoffAvailable) this.footer.appendChild(this.button("Continue on your phone", () => this.handlers.onUsePhone(), "arkyc-btn-ghost"));
+		})]);
+		this.dom.append(this.footer, [this.button("Get started", () => this.handlers.onStart()), handoffAvailable && this.button("Continue on your phone", () => this.handlers.onUsePhone(), "arkyc-btn-ghost")]);
 	}
 	/** A neutral connecting screen shown while the widget bootstraps the session. */
 	renderLoading(label = "Loading…") {
@@ -251,14 +250,13 @@ var WidgetView = class {
 		this.clear(this.footer);
 		this.root.classList.remove("arkyc-handoff");
 		this.appendArt(step);
-		this.body.appendChild(this.el("h2", {
+		this.dom.append(this.body, [this.dom.h("h2", {
 			class: "arkyc-h",
 			text: title
-		}));
-		this.body.appendChild(this.el("p", {
+		}), this.dom.h("p", {
 			class: "arkyc-p",
 			text: body
-		}));
+		})]);
 		this.footer.appendChild(this.button(cta, onContinue));
 	}
 	/**
@@ -271,85 +269,76 @@ var WidgetView = class {
 		this.clear(this.body);
 		this.clear(this.footer);
 		this.root.classList.add("arkyc-handoff");
-		this.body.appendChild(this.el("h2", {
-			class: "arkyc-h",
-			text: "Continue on your phone"
-		}));
-		this.body.appendChild(this.el("p", {
-			class: "arkyc-p",
-			text: "Scan this code with your phone camera to finish verifying there."
-		}));
-		this.body.appendChild(this.el("div", {
-			class: "arkyc-qr",
-			html: qrSvg
-		}));
-		const waiting = this.el("div", { class: "arkyc-handoff-wait" });
-		waiting.appendChild(this.el("div", { class: "arkyc-spinner sm" }));
-		waiting.appendChild(this.el("span", { text: "Waiting for your phone…" }));
-		this.body.appendChild(waiting);
+		this.dom.append(this.body, [
+			this.dom.h("h2", {
+				class: "arkyc-h",
+				text: "Continue on your phone"
+			}),
+			this.dom.h("p", {
+				class: "arkyc-p",
+				text: "Scan this code with your phone camera to finish verifying there."
+			}),
+			this.dom.h("div", {
+				class: "arkyc-qr",
+				html: qrSvg
+			}),
+			this.dom.h("div", { class: "arkyc-handoff-wait" }, [this.dom.h("div", { class: "arkyc-spinner sm" }), this.dom.h("span", { text: "Waiting for your phone…" })])
+		]);
 		if (allowContinueHere) this.footer.appendChild(this.button("Continue on this device", () => this.handlers.onContinueHere(), "arkyc-btn-ghost"));
 	}
 	renderDocumentSelection() {
-		this.body.appendChild(this.el("h2", {
+		this.body.appendChild(this.dom.h("h2", {
 			class: "arkyc-h",
 			text: "Select your document"
 		}));
-		const country = this.el("select", {
+		const country = this.dom.field("Country", {
 			class: "arkyc-btn arkyc-btn-ghost arkyc-text-center",
 			name: "country",
 			autocomplete: "country",
-			"aria-label": "Country"
+			choices: countries.map(({ name, iso2, flag }) => ({
+				value: iso2,
+				label: `${flag} ${name}`
+			}))
 		});
-		const placeholder = this.el("option", {
-			value: "",
-			selected: "selected"
-		});
-		placeholder.textContent = "Country";
-		country.appendChild(placeholder);
-		countries.forEach(({ name, iso2, flag }) => {
-			const option = this.el("option", { value: iso2 });
-			option.textContent = `${flag} ${name}`;
-			country.appendChild(option);
-		});
-		const choices = this.el("div", { class: "arkyc-choices" });
-		choices.appendChild(country);
-		Object.keys(DOCUMENT_LABELS).forEach((type) => {
+		const buttons = Object.keys(DOCUMENT_LABELS).map((type) => {
 			const btn = this.button(DOCUMENT_LABELS[type], () => this.handlers.onDocumentSelected(type, (country.value || "").trim().toUpperCase()));
 			btn.classList.add("arkyc-btn-ghost");
-			choices.appendChild(btn);
+			return btn;
 		});
-		this.body.appendChild(choices);
+		this.body.appendChild(this.dom.h("div", { class: "arkyc-choices" }, [country, ...buttons]));
 	}
 	renderCapture(title, facing, allowSkip, selfie = false, strict = false) {
 		const strictDoc = strict && !selfie;
-		this.body.appendChild(this.el("h2", {
-			class: "arkyc-h",
-			text: title
-		}));
-		this.body.appendChild(this.el("p", {
-			class: "arkyc-p",
-			text: "Position it clearly in frame, then capture."
-		}));
-		const fileInput = this.el("input", {
+		const fileInput = this.dom.h("input", {
 			type: "file",
 			accept: "image/*",
-			class: "arkyc-hidden"
+			class: "arkyc-hidden",
+			on: { change: () => this.handlers.onImage(Camera.fileFromInput(fileInput)) }
 		});
-		fileInput.addEventListener("change", () => this.handlers.onImage(Camera.fileFromInput(fileInput)));
-		this.body.appendChild(fileInput);
+		this.dom.append(this.body, [
+			this.dom.h("h2", {
+				class: "arkyc-h",
+				text: title
+			}),
+			this.dom.h("p", {
+				class: "arkyc-p",
+				text: "Position it clearly in frame, then capture."
+			}),
+			fileInput
+		]);
 		if (this.camera.supported) {
-			const video = this.el("video", { class: `arkyc-preview${selfie ? " selfie" : ""}` });
+			const video = this.dom.h("video", { class: `arkyc-preview${selfie ? " selfie" : ""}` });
 			const face = selfie ? this.buildFaceStage(video) : null;
 			const doc = selfie ? null : this.buildDocStage(video);
 			const mount = face?.stage ?? doc.stage;
 			this.body.appendChild(mount);
-			const hint = this.el("p", { class: "arkyc-p arkyc-hint" });
+			const hint = this.dom.h("p", { class: "arkyc-p arkyc-hint" });
 			this.body.appendChild(hint);
 			const confirmCapture = (blob) => {
 				this.destroy();
 				if (blob) {
 					const url = URL.createObjectURL(blob);
-					const still = this.el("img", {
+					const still = this.dom.h("img", {
 						class: `arkyc-preview${selfie ? " selfie" : ""}`,
 						src: url
 					});
@@ -382,16 +371,14 @@ var WidgetView = class {
 				this.runDocumentAutoCapture(video, hint, doc, strictDoc, onCapture);
 				if (!strictDoc) this.footer.appendChild(this.button("Capture", onCapture));
 			}
-		} else if (strictDoc) {
-			this.body.appendChild(this.el("div", {
-				class: "arkyc-badge err",
-				html: "!"
-			}));
-			this.body.appendChild(this.el("p", {
-				class: "arkyc-p",
-				text: "This step needs a working camera to scan your document. Please retry on a device with a camera."
-			}));
-		} else {
+		} else if (strictDoc) this.dom.append(this.body, [this.dom.h("div", {
+			class: "arkyc-badge err",
+			html: "!"
+		}), this.dom.h("p", {
+			class: "arkyc-p",
+			text: "This step needs a working camera to scan your document. Please retry on a device with a camera."
+		})]);
+		else {
 			const upload = this.button("Upload photo", () => fileInput.click());
 			this.footer.appendChild(upload);
 		}
@@ -585,18 +572,17 @@ var WidgetView = class {
 	* @returns
 	*/
 	renderActiveLiveness(challenges, allowSkip, requireLiveCamera) {
-		this.body.appendChild(this.el("h2", {
-			class: "arkyc-h",
-			text: "Liveness check"
-		}));
-		const prompt = this.el("p", {
+		const prompt = this.dom.h("p", {
 			class: "arkyc-p",
 			text: "Follow the on-screen prompts. Keep your face centred in the circle."
 		});
-		this.body.appendChild(prompt);
+		this.dom.append(this.body, [this.dom.h("h2", {
+			class: "arkyc-h",
+			text: "Liveness check"
+		}), prompt]);
 		if (!this.camera.supported || !this.camera.canRecord) {
 			if (requireLiveCamera) {
-				this.body.appendChild(this.el("div", {
+				this.body.appendChild(this.dom.h("div", {
 					class: "arkyc-badge err",
 					html: "!"
 				}));
@@ -617,11 +603,10 @@ var WidgetView = class {
 			}
 			return;
 		}
-		const video = this.el("video", { class: "arkyc-preview selfie" });
+		const video = this.dom.h("video", { class: "arkyc-preview selfie" });
 		const face = this.buildFaceStage(video);
 		const dots = this.buildDots(challenges.length);
-		if (challenges.length > 1) this.body.appendChild(dots.el);
-		this.body.appendChild(face.stage);
+		this.dom.append(this.body, [challenges.length > 1 && dots.el, face.stage]);
 		let recording = null;
 		let index = 0;
 		const performed = [];
@@ -732,20 +717,23 @@ var WidgetView = class {
 	* @returns
 	*/
 	buildFaceStage(video) {
-		const stage = this.el("div", { class: "arkyc-stage" });
-		stage.setAttribute("data-state", "wait");
-		stage.appendChild(video);
-		const ring = this.el("div", {
+		const ring = this.dom.h("div", {
 			class: "arkyc-ring",
 			html: "<svg viewBox=\"0 0 100 100\"><circle class=\"arkyc-ring-track\" cx=\"50\" cy=\"50\" r=\"46\"/><circle class=\"arkyc-ring-arc\" cx=\"50\" cy=\"50\" r=\"46\"/></svg>"
 		});
-		stage.appendChild(ring);
-		const cue = this.el("div", { class: "arkyc-cue" });
-		stage.appendChild(cue);
-		stage.appendChild(this.el("div", {
-			class: "arkyc-check",
-			html: CHECK_ICON
-		}));
+		const cue = this.dom.h("div", { class: "arkyc-cue" });
+		const stage = this.dom.h("div", {
+			class: "arkyc-stage",
+			"data-state": "wait"
+		}, [
+			video,
+			ring,
+			cue,
+			this.dom.h("div", {
+				class: "arkyc-check",
+				html: CHECK_ICON
+			})
+		]);
 		const arc = ring.querySelector(".arkyc-ring-arc");
 		const circumference = 2 * Math.PI * 46;
 		if (arc) {
@@ -772,15 +760,9 @@ var WidgetView = class {
 	* @param doc
 	*/
 	buildDots(count) {
-		const el = this.el("div", { class: "arkyc-dots" });
-		const dots = [];
-		for (let i = 0; i < count; i += 1) {
-			const dot = this.el("div", { class: "arkyc-dot" });
-			dots.push(dot);
-			el.appendChild(dot);
-		}
+		const dots = Array.from({ length: count }, () => this.dom.h("div", { class: "arkyc-dot" }));
 		return {
-			el,
+			el: this.dom.h("div", { class: "arkyc-dots" }, dots),
 			setActive: (index) => dots.forEach((d, i) => d.classList.toggle("active", i === index && !d.classList.contains("done"))),
 			markDone: (index) => {
 				const d = dots[index];
@@ -801,18 +783,16 @@ var WidgetView = class {
 	* @returns
 	*/
 	buildDocStage(video) {
-		const stage = this.el("div", { class: "arkyc-doc" });
-		stage.setAttribute("data-q", "wait");
-		stage.appendChild(video);
-		const frame = this.el("div", { class: "arkyc-doc-frame" });
-		for (const corner of [
+		const frame = this.dom.h("div", { class: "arkyc-doc-frame" }, [...[
 			"tl",
 			"tr",
 			"bl",
 			"br"
-		]) frame.appendChild(this.el("span", { class: `arkyc-corner ${corner}` }));
-		frame.appendChild(this.el("div", { class: "arkyc-scan" }));
-		stage.appendChild(frame);
+		].map((corner) => this.dom.h("span", { class: `arkyc-corner ${corner}` })), this.dom.h("div", { class: "arkyc-scan" })]);
+		const stage = this.dom.h("div", {
+			class: "arkyc-doc",
+			"data-q": "wait"
+		}, [video, frame]);
 		return {
 			stage,
 			setQuality: (quality) => stage.setAttribute("data-q", quality),
@@ -820,40 +800,42 @@ var WidgetView = class {
 		};
 	}
 	renderProcessing(label) {
-		this.body.appendChild(this.el("div", { class: "arkyc-spinner" }));
-		this.body.appendChild(this.el("p", {
+		this.dom.append(this.body, [this.dom.h("div", { class: "arkyc-spinner" }), this.dom.h("p", {
 			class: "arkyc-p",
 			text: label
-		}));
+		})]);
 	}
 	renderResult(decision, errorMessage, opts = {}) {
-		if (errorMessage) {
-			this.body.appendChild(this.el("div", {
+		if (errorMessage) this.dom.append(this.body, [
+			this.dom.h("div", {
 				class: "arkyc-badge err",
 				html: "!"
-			}));
-			this.body.appendChild(this.el("h2", {
+			}),
+			this.dom.h("h2", {
 				class: "arkyc-h",
 				text: "Something went wrong"
-			}));
-			this.body.appendChild(this.el("p", {
+			}),
+			this.dom.h("p", {
 				class: "arkyc-p",
 				text: errorMessage
-			}));
-		} else if (opts.terminal) {
+			})
+		]);
+		else if (opts.terminal) {
 			const n = TERMINAL_NOTICE[opts.status ?? "expired"] ?? EXPIRED_NOTICE;
-			this.body.appendChild(this.el("div", {
-				class: `arkyc-badge ${n.cls}`,
-				text: n.icon
-			}));
-			this.body.appendChild(this.el("h2", {
-				class: "arkyc-h",
-				text: n.title
-			}));
-			this.body.appendChild(this.el("p", {
-				class: "arkyc-p",
-				text: n.copy
-			}));
+			this.dom.append(this.body, [
+				this.dom.h("div", {
+					class: `arkyc-badge ${n.cls}`,
+					text: n.icon
+				}),
+				this.dom.h("h2", {
+					class: "arkyc-h",
+					text: n.title
+				}),
+				this.dom.h("p", {
+					class: "arkyc-p",
+					text: n.copy
+				})
+			]);
 			this.footer.appendChild(this.button("Close", () => this.handlers.onClose()));
 			return;
 		} else {
@@ -878,24 +860,128 @@ var WidgetView = class {
 				}
 			};
 			const r = map[decision ?? "requires_review"] ?? map.requires_review;
-			this.body.appendChild(this.el("div", {
-				class: `arkyc-badge ${r.cls}`,
-				text: r.icon
-			}));
-			this.body.appendChild(this.el("h2", {
-				class: "arkyc-h",
-				text: r.title
-			}));
-			this.body.appendChild(this.el("p", {
-				class: "arkyc-p",
-				text: r.copy
-			}));
+			this.dom.append(this.body, [
+				this.dom.h("div", {
+					class: `arkyc-badge ${r.cls}`,
+					text: r.icon
+				}),
+				this.dom.h("h2", {
+					class: "arkyc-h",
+					text: r.title
+				}),
+				this.dom.h("p", {
+					class: "arkyc-p",
+					text: r.copy
+				})
+			]);
 		}
 		this.footer.appendChild(this.button("Done", () => this.handlers.onAcknowledge()));
 	}
+	/**
+	* The address-entry form (opt-in address stage). Inputs shown depend on methods.
+	*
+	* @param methods
+	*/
+	renderAddressForm(methods) {
+		this.body.appendChild(this.dom.h("h2", {
+			class: "arkyc-h",
+			text: "Your address"
+		}));
+		this.body.appendChild(this.dom.h("p", {
+			class: "arkyc-p",
+			text: "Enter your residential address so we can verify it."
+		}));
+		const line1 = this.dom.field("Address line 1", {
+			autocomplete: "address-line1",
+			name: "street"
+		});
+		const line2 = this.dom.field("Address line 2 (optional)", {
+			autocomplete: "address-line2",
+			name: "town"
+		});
+		const city = this.dom.field("City", {
+			autocomplete: "address-level2",
+			name: "city"
+		});
+		const region = this.dom.field("State / region", {
+			autocomplete: "address-level1",
+			name: "state"
+		});
+		const postal = this.dom.field("ZIP/Postal code", {
+			autocomplete: "postal-code",
+			name: "zip"
+		});
+		const country = this.dom.field("Country", {
+			name: "country_iso2",
+			choices: countries.map((e) => ({
+				value: e.iso2,
+				label: `${e.flag} ${e.name}`
+			}))
+		});
+		this.body.appendChild(this.dom.h("div", { class: "arkyc-addr-form" }, [
+			line1,
+			line2,
+			city,
+			region,
+			postal,
+			country
+		]));
+		let poa = null;
+		if (methods.includes("poa_document")) {
+			const file = this.dom.h("input", {
+				class: "arkyc-addr-input",
+				type: "file",
+				accept: "image/*",
+				on: { change: () => poa = file.files?.[0] ?? null }
+			});
+			this.dom.append(this.body, [this.dom.h("p", {
+				class: "arkyc-p",
+				text: "Upload a proof of address (utility bill or bank statement)."
+			}), file]);
+		}
+		let useLocation = false;
+		const requiresLocation = methods.includes("device_location");
+		const submit = this.button("Continue", () => this.handlers.onAddress({
+			line1: line1.value.trim() || null,
+			line2: line2.value.trim() || null,
+			city: city.value.trim() || null,
+			region: region.value.trim() || null,
+			postalCode: postal.value.trim() || null,
+			country: country.value.trim().toUpperCase() || null,
+			poa,
+			useLocation
+		}));
+		if (requiresLocation) {
+			const status = this.dom.h("p", { class: "arkyc-p" });
+			const cb = this.dom.h("input", {
+				type: "checkbox",
+				on: { change: () => {
+					if (!cb.checked) {
+						useLocation = false;
+						status.textContent = "";
+						submit.setAttribute("disabled", "true");
+						return;
+					}
+					status.textContent = "Requesting your location…";
+					submit.setAttribute("disabled", "true");
+					Promise.resolve(this.handlers.onShareLocation()).then((ok) => {
+						useLocation = ok;
+						cb.checked = ok;
+						if (ok) submit.removeAttribute("disabled");
+						else submit.setAttribute("disabled", "true");
+						status.textContent = ok ? "Location shared ✓" : "Couldn’t access your location, allow location access to continue.";
+					});
+				} }
+			});
+			submit.setAttribute("disabled", "true");
+			this.body.appendChild(this.dom.h("label", { class: "arkyc-addr-opt" }, [cb, this.dom.h("span", { text: "Allow access to my current location to confirm my address" })]));
+			this.body.appendChild(status);
+		}
+		this.footer.appendChild(submit);
+	}
 	button(label, onClick, extraClass) {
 		const cls = extraClass ? `arkyc-btn ${extraClass}` : "arkyc-btn";
-		const btn = this.el("button", {
+		const btn = this.dom.h("button", {
 			class: cls,
 			text: label
 		});
@@ -912,18 +998,6 @@ var WidgetView = class {
 	clear(node) {
 		while (node.firstChild) node.removeChild(node.firstChild);
 	}
-	el(tag, props = {}) {
-		const node = this.doc.createElement(tag);
-		for (const [key, value] of Object.entries(props)) {
-			if (value == null) continue;
-			if (key === "class") node.className = value;
-			else if (key === "text") node.textContent = value;
-			else if (key === "html") node.innerHTML = value;
-			else if (key === "value" || key === "src" || key === "type" || key === "accept" || key === "placeholder") node[key] = value;
-			else node.setAttribute(key, value);
-		}
-		return node;
-	}
 };
 //#endregion
 export { WidgetView };