@verbb/formie-browser 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+- Initial public release.

package/LICENSE.md

@@ -0,0 +1,40 @@
+Copyright © Verbb
+
+Permission is hereby granted to any person obtaining a copy of this software
+(the “Software”) to use, copy, modify, merge, publish and/or distribute copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+1. **Don’t plagiarize.** The above copyright notice and this license shall be
+   included in all copies or substantial portions of the Software.
+
+2. **Don’t use the same license on more than one project.** Each licensed copy
+   of the Software shall be actively installed in no more than one production
+   environment at a time.
+
+3. **Don’t mess with the licensing features.** Software features related to
+   licensing shall not be altered or circumvented in any way, including (but
+   not limited to) license validation, payment prompts, feature restrictions,
+   and update eligibility.
+
+4. **Pay up.** Payment shall be made immediately upon receipt of any notice,
+   prompt, reminder, or other message indicating that a payment is owed.
+
+5. **Follow the law.** All use of the Software shall not violate any applicable
+   law or regulation, nor infringe the rights of any other person or entity.
+
+Failure to comply with the foregoing conditions will automatically and
+immediately result in termination of the permission granted hereby. This
+license does not include any right to receive updates to the Software or
+technical support. Licensees bear all risk related to the quality and
+performance of the Software and any modifications made or obtained to it,
+including liability for actual and consequential harm, such as loss or
+corruption of data, and any necessary service, repair, or correction.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
+LIABILITY, INCLUDING SPECIAL, INCIDENTAL AND CONSEQUENTIAL DAMAGES, WHETHER IN
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+# @verbb/formie-browser
+
+DOM-focused Formie runtime for mounting and managing forms outside the Craft plugin repo.
+
+## Install
+
+```bash
+npm install @verbb/formie-browser
+```
+
+## Usage
+
+```ts
+import { createFormieClient } from '@verbb/formie-browser';
+import '@verbb/formie-browser/css/formie.css';
+
+const client = createFormieClient();
+
+await client.mount(document.querySelector('#formie-root'), {
+    endpoint: '/actions/formie/server/forms/render',
+    formHandle: 'contactForm',
+});
+```
+
+## Public Surface
+
+Use only the root package entry and the exported CSS files:
+
+- `@verbb/formie-browser`
+- `@verbb/formie-browser/css/formie.css`
+- `@verbb/formie-browser/css/formie-base.css`
+- `@verbb/formie-browser/css/formie-theme.css`
+
+Anything else inside the package is private implementation detail and may change without notice.

package/dist/chunks/address-finder-DfMCiW89.js

@@ -0,0 +1,47 @@
+import { n as getAddressProviderEventName } from "./event-names-DamGPtXR.js";
+import { t as defineAddressModule } from "./api-CbqEMQT5.js";
+import { r as loadScriptAndEnsureGlobal } from "./scripts-BGD_iU_6.js";
+//#region src/js/modules/address/address-finder.ts
+var SCRIPT_ID = "FORMIE_ADDRESS_FINDER_SCRIPT";
+var addressFinderModule = defineAddressModule({
+	id: "address-finder",
+	load: async () => {
+		return loadScriptAndEnsureGlobal("AddressFinder", {
+			id: SCRIPT_ID,
+			src: "https://api.addressfinder.io/assets/v3/widget.js",
+			async: true,
+			defer: true
+		});
+	},
+	mount: ({ api, field, services, provider }) => {
+		const input = services.input.getAutocomplete();
+		if (!input || typeof api === "undefined" || !api.Widget) throw new Error("AddressFinder API not ready");
+		const apiKey = provider.apiKey || "";
+		const countryCode = provider.countryCode || "au";
+		const widget = new api.Widget(input, apiKey, countryCode, provider.widgetOptions);
+		widget.on("result:select", (fullAddress, metaData) => {
+			if (metaData.address_line_2) {
+				services.input.setValue("address1", metaData.address_line_2);
+				services.input.setValue("address2", metaData.address_line_1);
+			} else {
+				services.input.setValue("address1", metaData.address_line_1 || "");
+				services.input.setValue("address2", "");
+			}
+			services.input.setValue("city", metaData.locality_name || "");
+			services.input.setValue("zip", metaData.postcode || "");
+			services.input.setValue("state", metaData.state_territory || "");
+			services.input.setValue("country", countryCode);
+			field.dispatchEvent(new CustomEvent(getAddressProviderEventName("address-finder", "populate"), {
+				bubbles: true,
+				detail: {
+					addressProvider: "address-finder",
+					fullAddress,
+					metaData
+				}
+			}));
+		});
+		return widget;
+	}
+});
+//#endregion
+export { addressFinderModule };

package/dist/chunks/api-CbqEMQT5.js

@@ -0,0 +1,181 @@
+import { t as createDebug } from "./debug-KnZeKYBI.js";
+//#region src/js/modules/address/constants.ts
+/** Default selector for the autocomplete input within an address field. */
+var DEFAULT_AUTOCOMPLETE_SELECTOR = "[data-formie-address-autocomplete-input]";
+var ADDRESS_LOCATION_SELECTOR = "[data-formie-address-location]";
+/** Selector for address sub-field inputs used when populating from provider. */
+var ADDRESS_SELECTORS = {
+	autoComplete: "[data-formie-address-autocomplete-input]",
+	address1: "[data-formie-address-line1-input]",
+	address2: "[data-formie-address-line2-input]",
+	address3: "[data-formie-address-line3-input]",
+	city: "[data-formie-address-city-input]",
+	state: "[data-formie-address-state-input]",
+	zip: "[data-formie-address-zip-input]",
+	country: "[data-formie-address-country-input]"
+};
+//#endregion
+//#region src/js/modules/address/host.ts
+var ADDRESS_OPTION_KEYS = new Set(["handle"]);
+function getAddressProviderHandle(id, options) {
+	return (typeof options.handle === "string" && options.handle.trim() !== "" ? options.handle.trim() : "") || id;
+}
+function normalizeAddressModuleOptions(id, rawOptions) {
+	const options = rawOptions || {};
+	const provider = Object.entries(options).reduce((carry, [key, value]) => {
+		if (ADDRESS_OPTION_KEYS.has(key)) return carry;
+		carry[key] = value;
+		return carry;
+	}, {});
+	return {
+		handle: getAddressProviderHandle(id, options),
+		provider
+	};
+}
+function bindDomEvent(target, eventName, callback) {
+	target.addEventListener(eventName, callback);
+	return () => {
+		target.removeEventListener(eventName, callback);
+	};
+}
+function createAddressHostServices(ctx) {
+	const field = ctx.target;
+	const form = ctx.form;
+	const root = ctx.root;
+	const autocompleteSelector = DEFAULT_AUTOCOMPLETE_SELECTOR;
+	return {
+		root,
+		field,
+		form,
+		input: {
+			getAutocomplete: () => {
+				return field.querySelector(autocompleteSelector);
+			},
+			setValue: (selectorKey, value, fallback) => {
+				const selector = ADDRESS_SELECTORS[selectorKey];
+				const el = field.querySelector(selector);
+				if (el) el.value = value || fallback || "";
+			}
+		},
+		location: {
+			getButton: () => {
+				return field.querySelector(ADDRESS_LOCATION_SELECTOR);
+			},
+			onUseLocation: (callback) => {
+				const btn = field.querySelector(ADDRESS_LOCATION_SELECTOR);
+				if (!btn) return () => {};
+				const handler = (e) => {
+					e.preventDefault();
+					if (!navigator.geolocation) return;
+					navigator.geolocation.getCurrentPosition(callback, () => {}, { enableHighAccuracy: true });
+				};
+				btn.addEventListener("click", handler);
+				return () => {
+					btn.removeEventListener("click", handler);
+				};
+			}
+		},
+		events: { onField: (eventName, callback) => bindDomEvent(field, eventName, callback) }
+	};
+}
+//#endregion
+//#region src/js/modules/address/factories.ts
+var debug = createDebug("address");
+function isTargetVisible(element) {
+	const node = element;
+	return !node.closest("[data-formie-page-hidden]") && !node.closest("[hidden]");
+}
+function createManagedAddressModule(adapter) {
+	return {
+		id: adapter.id,
+		kind: "address",
+		match: (ctx) => {
+			return !!ctx.target.querySelector("[data-formie-address-autocomplete-input]");
+		},
+		setup: async (ctx) => {
+			const options = normalizeAddressModuleOptions(adapter.id, ctx.options || {});
+			const services = createAddressHostServices(ctx);
+			debug.log("Setup module.", { moduleId: adapter.id });
+			const setupCtx = {
+				...ctx,
+				options,
+				services
+			};
+			const cleanups = [];
+			let apiPromise = null;
+			let widget = null;
+			if (!services.input.getAutocomplete()) {
+				console.warn(`[formie] Address module "${adapter.id}" skipped: no autocomplete input found in target. Ensure the Address field has the Auto-Complete subfield enabled.`);
+				debug.warn("Autocomplete input missing; skipping module.", { moduleId: adapter.id });
+				return { destroy: () => {} };
+			}
+			const getApi = async () => {
+				if (!apiPromise) {
+					debug.log("Loading provider API.", { moduleId: adapter.id });
+					apiPromise = adapter.load(setupCtx);
+				}
+				return apiPromise;
+			};
+			const ensureMounted = async () => {
+				if (widget || !isTargetVisible(ctx.target)) return;
+				const api = await getApi();
+				widget = await adapter.mount({
+					api,
+					field: ctx.target,
+					services,
+					options,
+					provider: options.provider
+				});
+				debug.log("Widget mounted.", { moduleId: adapter.id });
+			};
+			if (isTargetVisible(ctx.target)) await ensureMounted();
+			["formie:page:navigate:after", "formie:submit:result"].forEach((eventName) => {
+				const handleVisibility = () => {
+					ensureMounted();
+				};
+				ctx.root.addEventListener(eventName, handleVisibility);
+				cleanups.push(() => {
+					ctx.root.removeEventListener(eventName, handleVisibility);
+				});
+			});
+			const locationCleanup = services.location.onUseLocation((position) => {
+				if (!adapter.onCurrentLocation) return;
+				(async () => {
+					await ensureMounted();
+					if (!widget) return;
+					const api = await getApi();
+					await adapter.onCurrentLocation?.(position, {
+						api,
+						widget,
+						field: ctx.target,
+						services,
+						options,
+						provider: options.provider
+					});
+				})();
+			});
+			if (locationCleanup) cleanups.push(locationCleanup);
+			return { destroy: async () => {
+				debug.log("Destroying module.", { moduleId: adapter.id });
+				cleanups.forEach((c) => c());
+				if (widget && adapter.unmount) {
+					const api = await getApi();
+					await adapter.unmount({
+						api,
+						widget,
+						field: ctx.target,
+						services,
+						options,
+						provider: options.provider
+					});
+					debug.log("Widget unmounted.", { moduleId: adapter.id });
+				}
+			} };
+		}
+	};
+}
+//#endregion
+//#region src/js/modules/address/api.ts
+var defineAddressModule = createManagedAddressModule;
+//#endregion
+export { ADDRESS_SELECTORS as n, defineAddressModule as t };