formeo 5.5.0 → 5.6.0

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.4.0
+Version: 5.5.0
 Author: Draggable https://draggable.io
 */
 
@@ -6060,7 +6060,7 @@ if (globalThis !== void 0) globalThis.SmartTooltip = SmartTooltip;
 var name$1, version$2, type, main, module$1, unpkg, exports$1, files, homepage, repository, author, contributors, bugs, description, keywords, ignore, config, scripts, devDependencies, dependencies, release, commitlint, package_default;
 var init_package = __esmMin((() => {
 	name$1 = "formeo";
-	version$2 = "5.4.0";
+	version$2 = "5.5.0";
 	type = "module";
 	main = "dist/formeo.cjs.js";
 	module$1 = "dist/formeo.es.js";
@@ -11116,9 +11116,11 @@ var reachesDocument = (evt) => evt.target === document || Boolean(evt.bubbles &&
 */
 var Events = class {
 	components = null;
+	destroyed = false;
 	constructor() {
 		this.opts = this.defaults();
 		this.formeoUpdatedThrottled = throttle$1(() => {
+			if (this.destroyed) return;
 			const eventData = {
 				timeStamp: globalThis.performance.now(),
 				type: EVENT_FORMEO_UPDATED,
@@ -11174,6 +11176,7 @@ var Events = class {
 		return evt;
 	}
 	runCallbacks({ type, timeStamp, detail }) {
+		if (this.destroyed) return;
 		if (type === "formeoUpdated") return this.formeoUpdatedThrottled();
 		if (type === "formeoSaved") return this.opts.onSave({
 			timeStamp,
@@ -11201,6 +11204,7 @@ var Events = class {
 	confirmClearAll = (detail) => {
 		const evt = new globalThis.CustomEvent("confirmClearAll", { detail });
 		document.dispatchEvent(evt);
+		if (this.destroyed) return;
 		this.opts.confirmClearAll({
 			timeStamp: evt.timeStamp,
 			type: evt.type,
@@ -11209,7 +11213,7 @@ var Events = class {
 	};
 	formeoLoaded = (formeo) => {
 		document.dispatchEvent(new globalThis.CustomEvent("formeoLoaded", { detail: { formeo } }));
-		this.opts.formeoLoaded(formeo);
+		if (!this.destroyed) this.opts.formeoLoaded(formeo);
 	};
 	columnResized = (detail) => document.dispatchEvent(new globalThis.CustomEvent("columnResized", { detail }));
 	/**
@@ -11219,7 +11223,7 @@ var Events = class {
 	*/
 	onResizeWindow = () => {
 		const { columns, controls } = this.components || {};
-		if (!columns || !controls?.dom?.isConnected || this.resizeFrame) return;
+		if (this.destroyed || !columns || !controls?.dom?.isConnected || this.resizeFrame) return;
 		this.resizeFrame = window.requestAnimationFrame(() => {
 			this.resizeFrame = null;
 			for (const column of Object.values(columns.data)) {
@@ -11234,6 +11238,18 @@ var Events = class {
 			}
 		});
 	};
+	/**
+	* Stop calling this editor's option callbacks, including a trailing onUpdate/onChange that is
+	* already scheduled, and cancel a pending resize frame. FormeoEditor#destroy (#166) calls it.
+	* DOM events are still dispatched, so page listeners are unaffected.
+	*/
+	destroy() {
+		this.destroyed = true;
+		if (this.resizeFrame) {
+			window.cancelAnimationFrame(this.resizeFrame);
+			this.resizeFrame = null;
+		}
+	}
 };
 var events = new Events();
 //#endregion
@@ -13106,6 +13122,24 @@ var init_sortable_esm = __esmMin((() => {
 	Sortable.mount(Remove, Revert);
 }));
 //#endregion
+//#region src/lib/js/common/sortable.js
+var destroySortables;
+var init_sortable = __esmMin((() => {
+	init_sortable_esm();
+	destroySortables = (root) => {
+		if (!root) return 0;
+		let count = 0;
+		for (const el of [root, ...root.querySelectorAll("*")]) {
+			const sortable = Sortable.get(el);
+			if (sortable) {
+				sortable.destroy();
+				count++;
+			}
+		}
+		return count;
+	};
+}));
+//#endregion
 //#region src/lib/js/components/panels.js
 var defaults$1, getTransition, Panels;
 var init_panels = __esmMin((() => {
@@ -13135,18 +13169,25 @@ var init_panels = __esmMin((() => {
 			const panelsWrap = this.createPanelsWrap();
 			this.nav = this.navActions();
 			this.nav.groupChange(this.activePanelIndex);
-			const resizeObserver = new window.ResizeObserver(([{ contentRect: { width } }]) => {
+			this.resizeObserver = new window.ResizeObserver(([{ contentRect: { width } }]) => {
 				if (this.currentWidth !== width) {
 					this.toggleTabbedLayout();
 					this.currentWidth = width;
 					this.nav.setTranslateX(this.activePanelIndex, false);
 				}
 			});
-			const observeTimeout = window.setTimeout(() => {
-				resizeObserver.observe(panelsWrap);
-				window.clearTimeout(observeTimeout);
+			this.observeTimeout = window.setTimeout(() => {
+				this.resizeObserver?.observe(panelsWrap);
 			}, ANIMATION_SPEED_SLOW);
 		}
+		/**
+		* Stop watching the panels' size
+		*/
+		destroy() {
+			window.clearTimeout(this.observeTimeout);
+			this.resizeObserver?.disconnect();
+			this.resizeObserver = null;
+		}
 		getPanelDisplay() {
 			const column = this.panelsWrap;
 			const autoDisplayType = Number.parseInt(dom.getStyle(column, "width"), 10) > 390 ? "tabbed" : "slider";
@@ -13445,7 +13486,7 @@ var init_control = __esmMin((() => {
 }));
 //#endregion
 //#region src/lib/js/components/controls/options.js
-init_sortable_esm();
+init_sortable();
 init_panels();
 init_control();
 var defaultOptions = Object.freeze({
@@ -14763,6 +14804,7 @@ var init_edit_panel_item = __esmMin((() => {
 var addAttributeActions, defaultConfigOptions, defaultConfigValues, EditPanel;
 var init_edit_panel = __esmMin((() => {
 	init_i18n_es_min();
+	init_sortable_esm();
 	init_dom();
 	init_helpers$2();
 	init_string();
@@ -15088,6 +15130,7 @@ var init_edit_panel = __esmMin((() => {
 //#region src/lib/js/components/component.js
 var propertyOptions, Component;
 var init_component = __esmMin((() => {
+	init_sortable_esm();
 	init_animation();
 	init_dom();
 	init_helpers$2();
@@ -15242,6 +15285,8 @@ var init_component = __esmMin((() => {
 			});
 			forEach(children, (child) => child.remove());
 			this.dom.remove();
+			this.panels?.destroy();
+			this.releaseSortables();
 			remove(this.components.getAddress(siblingsPath), this.id);
 			if (!parent.children.length) parent.emptyClass();
 			if (parent.name === "row") parent.autoColumnWidths();
@@ -15590,6 +15635,20 @@ var init_component = __esmMin((() => {
 			return this.saveChildOrder();
 		};
 		/**
+		* Destroy the Sortables of this removed component and its descendants, so Sortable's page-wide
+		* list stops holding them (and through them the editor). A column emptied by a drag is removed
+		* from inside Sortable's drop handler; destroying that Sortable there would end the drop early,
+		* so during a drag it is released once the drop has finished.
+		*/
+		releaseSortables() {
+			const { dom: removedDom } = this;
+			if (Sortable.active) {
+				queueMicrotask(() => destroySortables(removedDom));
+				return;
+			}
+			destroySortables(removedDom);
+		}
+		/**
 		* Handler for removing content from a sortable component
 		* @param  {Object} evt
 		* @return {Array} updated child order
@@ -15815,6 +15874,7 @@ var init_component = __esmMin((() => {
 				id: this.id,
 				displayType: "auto"
 			};
+			this.panels?.destroy();
 			this.panels = new Panels(panelsData);
 			if (this.dom) {
 				this.dom.querySelector(".panel-nav").replaceWith(this.panels.panelNav);
@@ -16593,6 +16653,7 @@ init_i18n_es_min();
 init_sortable_esm();
 init_dom();
 init_helpers$2();
+init_sortable();
 init_utils();
 init_object();
 init_constants();
@@ -16882,6 +16943,22 @@ var Controls = class {
 		if (group === "layout") return this.layoutTypes[metaId.replace("layout-", "")]();
 		return this.layoutTypes.field(elementData);
 	};
+	/**
+	* Remove the controls from the page and release their Sortables and Panels. A control drag in
+	* progress in these controls is ended: its ghost is removed and the page overflow it hid is
+	* restored. Safe to call more than once, and before init().
+	*/
+	destroy() {
+		const element = this.dom;
+		if (element && Sortable.active?.el && element.contains(Sortable.active.el)) Sortable.ghost?.remove();
+		if (this.originalDocumentOverflow != null) {
+			document.documentElement.style.overflow = this.originalDocumentOverflow;
+			this.originalDocumentOverflow = null;
+		}
+		destroySortables(element);
+		this.panels?.destroy();
+		element?.remove();
+	}
 	applyOptions = async (controlOptions = {}) => {
 		const { container, elements, groupOrder, ...options } = merge(defaultOptions, controlOptions);
 		this.container = dom.resolveContainer(container);
@@ -17921,6 +17998,7 @@ var defaults = { get editor() {
 init_i18n_es_min();
 init_dom();
 init_loaders();
+init_sortable();
 init_utils();
 init_constants();
 /**
@@ -17931,9 +18009,11 @@ var INIT_STATES = {
 	LOADING_RESOURCES: "loading",
 	INITIALIZING: "initializing",
 	READY: "ready",
-	ERROR: "error"
+	ERROR: "error",
+	DESTROYED: "destroyed"
 };
 var storageKeyHolders = /* @__PURE__ */ new Map();
+var pageTooltip = null;
 /**
 * Whether an editor is still on the page, or still on its way there. An editor whose container
 * left the page or no longer holds its DOM (a remount, a demo switch) no longer owns its key.
@@ -17941,7 +18021,7 @@ var storageKeyHolders = /* @__PURE__ */ new Map();
 * @return {Boolean}
 */
 var isLiveEditor = (editor) => {
-	if (editor.initState === INIT_STATES.ERROR) return false;
+	if (editor.initState === INIT_STATES.ERROR || editor.initState === INIT_STATES.DESTROYED) return false;
 	if (!editor.editor) return !editor.editorContainer || editor.editorContainer.isConnected;
 	return Boolean(editor.editorContainer?.isConnected && editor.editorContainer.contains(editor.editor));
 };
@@ -17953,6 +18033,7 @@ var FormeoEditor$1 = class {
 	#initPromise = null;
 	#lockedFormData = null;
 	#dataLoadedOnce = false;
+	#onDOMContentLoaded = () => this.loadResources();
 	/**
 	* @param  {Object} options  formeo options
 	* @param  {String|Object}   userFormData loaded formData
@@ -17988,7 +18069,7 @@ var FormeoEditor$1 = class {
 			if (holder && isLiveEditor(holder)) console.warn(`formeo: another editor on this page already saves to sessionStorage key "${key}". Give each editor its own key, e.g. sessionStorage: 'orders-form'.`);
 			storageKeyHolders.set(key, this);
 		}
-		if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", this.loadResources.bind(this));
+		if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", this.#onDOMContentLoaded, { once: true });
 		else this.loadResources();
 	}
 	get formData() {
@@ -18011,6 +18092,7 @@ var FormeoEditor$1 = class {
 	* @return {void}
 	*/
 	clear() {
+		if (this.isDestroyed) return;
 		const defaultData = DEFAULT_FORMDATA();
 		this.#lockedFormData = defaultData;
 		this.userFormData = defaultData;
@@ -18022,7 +18104,8 @@ var FormeoEditor$1 = class {
 	* @return {Promise} asynchronously loaded remote resources
 	*/
 	async loadResources() {
-		document.removeEventListener("DOMContentLoaded", this.loadResources);
+		document.removeEventListener("DOMContentLoaded", this.#onDOMContentLoaded);
+		if (this.isDestroyed) return;
 		this.#initState = INIT_STATES.LOADING_RESOURCES;
 		const promises = [
 			fetchIcons(this.opts.svgSprite),
@@ -18035,8 +18118,10 @@ var FormeoEditor$1 = class {
 		].filter(Boolean);
 		try {
 			await Promise.all(promises);
+			if (this.isDestroyed) return;
 			if (this.opts.allowEdit) this.init();
 		} catch (error) {
+			if (this.isDestroyed) return;
 			this.#initState = INIT_STATES.ERROR;
 			console.error("Failed to load resources:", error);
 			throw error;
@@ -18048,10 +18133,15 @@ var FormeoEditor$1 = class {
 	* dom elements, actions events and more.
 	*/
 	init() {
+		if (this.isDestroyed) return Promise.resolve(this);
 		if (this.#initState === INIT_STATES.INITIALIZING) return this.#initPromise;
 		if (this.#initState === INIT_STATES.READY) return this.#refreshUI();
 		this.#initState = INIT_STATES.INITIALIZING;
 		this.#initPromise = new Controls(this.Components).init(this.opts.controls, this.opts.stickyControls).then((controls) => {
+			if (this.isDestroyed) {
+				controls.destroy();
+				return this;
+			}
 			this.controls = controls;
 			this.Components.controls = controls;
 			if (!this.#dataLoadedOnce) {
@@ -18061,13 +18151,17 @@ var FormeoEditor$1 = class {
 			this.formId = this.Components.get("id");
 			this.i18n = { setLang: this.#setLanguage.bind(this) };
 			this.render();
+			if (this.isDestroyed) return this;
 			this.onResize = this.events.onResizeWindow;
 			window.addEventListener("resize", this.onResize);
 			this.#initState = INIT_STATES.READY;
 			this.opts.onLoad?.(this);
+			if (this.isDestroyed) return this;
 			this.tooltipInstance = new SmartTooltip();
+			pageTooltip = this.tooltipInstance;
 			return this;
 		}).catch((error) => {
+			if (this.isDestroyed) return this;
 			this.#initState = INIT_STATES.ERROR;
 			console.error("Failed to initialize editor:", error);
 			throw error;
@@ -18089,7 +18183,13 @@ var FormeoEditor$1 = class {
 	* @return {Promise}
 	*/
 	async #refreshUI() {
-		this.controls = await new Controls(this.Components).init(this.opts.controls, this.opts.stickyControls);
+		if (this.isDestroyed) return this;
+		const controls = await new Controls(this.Components).init(this.opts.controls, this.opts.stickyControls);
+		if (this.isDestroyed) {
+			controls.destroy();
+			return this;
+		}
+		this.controls = controls;
 		this.Components.controls = this.controls;
 		this.render();
 		return this;
@@ -18117,6 +18217,7 @@ var FormeoEditor$1 = class {
 		return DEFAULT_FORMDATA();
 	}
 	load(formData = this.userFormData, opts = this.opts) {
+		if (this.isDestroyed) return;
 		this.Components.load(formData, opts);
 		this.render();
 	}
@@ -18135,16 +18236,28 @@ var FormeoEditor$1 = class {
 		return this.#initState === INIT_STATES.READY;
 	}
 	/**
+	* Check if destroy() was called
+	* @return {boolean}
+	*/
+	get isDestroyed() {
+		return this.#initState === INIT_STATES.DESTROYED;
+	}
+	/**
 	* Wait for the editor to be ready
 	* @return {Promise} resolves when editor is ready
 	*/
 	async whenReady() {
 		if (this.#initState === INIT_STATES.READY) return this;
+		if (this.isDestroyed) return Promise.reject(/* @__PURE__ */ new Error("Editor was destroyed"));
 		if (this.#initState === INIT_STATES.ERROR) return Promise.reject(/* @__PURE__ */ new Error("Editor initialization failed"));
-		if (this.#initPromise) return this.#initPromise;
+		if (this.#initPromise) return this.#initPromise.then((editor) => {
+			if (this.isDestroyed) throw new Error("Editor was destroyed");
+			return editor;
+		});
 		return new Promise((resolve, reject) => {
 			const checkReady = () => {
 				if (this.#initState === INIT_STATES.READY) resolve(this);
+				else if (this.isDestroyed) reject(/* @__PURE__ */ new Error("Editor was destroyed"));
 				else if (this.#initState === INIT_STATES.ERROR) reject(/* @__PURE__ */ new Error("Editor initialization failed"));
 				else globalThis.requestAnimationFrame(checkReady);
 			};
@@ -18156,6 +18269,7 @@ var FormeoEditor$1 = class {
 	* @return {void}
 	*/
 	render() {
+		if (this.isDestroyed) return;
 		if (!this.controls) return globalThis.requestAnimationFrame(() => this.render());
 		this.stages = Object.values(this.Components.get("stages"));
 		if (this.opts.controlOnLeft) for (const stage of this.stages) stage.dom.style.order = 1;
@@ -18186,6 +18300,46 @@ var FormeoEditor$1 = class {
 		}
 		this.events.formeoLoaded(this);
 	}
+	/**
+	* Remove the editor from the page and release what it holds: its Sortable instances, resize
+	* observers, window resize listener, pending callbacks and loaded components. Other editors on
+	* the page keep working, and a new editor can mount in the same container.
+	* Safe to call more than once, and before the editor is ready.
+	* @return {void}
+	*/
+	destroy() {
+		if (this.isDestroyed) return;
+		this.#initState = INIT_STATES.DESTROYED;
+		document.removeEventListener("DOMContentLoaded", this.#onDOMContentLoaded);
+		window.removeEventListener("resize", this.onResize);
+		this.events.destroy();
+		if (this.opts.sessionStorage) {
+			const key = formDataStorageKey(this.opts.sessionStorage);
+			if (storageKeyHolders.get(key) === this) storageKeyHolders.delete(key);
+		}
+		this.controls?.destroy();
+		destroySortables(this.editor);
+		for (const type of [
+			"stages",
+			"rows",
+			"columns",
+			"fields"
+		]) {
+			for (const component of Object.values(this.Components[type]?.data || {})) component.panels?.destroy();
+			this.Components[type]?.empty();
+		}
+		this.editor?.remove();
+		this.Components.empty();
+		if (pageTooltip && !document.querySelector(".formeo-editor")) {
+			pageTooltip.destroy();
+			pageTooltip = null;
+		}
+		this.tooltipInstance = null;
+		this.editor = null;
+		this.controls = null;
+		this.Components.controls = null;
+		this.stages = [];
+	}
 };
 //#endregion
 //#region src/lib/js/renderer/helpers.js
@@ -18467,7 +18621,7 @@ var focusFirst = (page) => {
 *   `progress` only affects the wizard, adding a clickable step list above the pages
 * @param {Array<Object>} stages stage data in render order, for page titles
 * @param {Function} [onChange] called with (page, previousPage) whenever the page changes
-* @return {{show: Function, index: Number, count: Number}|null} null when there is only one page
+* @return {{show: Function, index: Number, count: Number, destroy: Function}|null} null when there is only one page
 */
 var paginate = (form, { type, progress, labels }, stages, onChange) => {
 	const pages = Array.from(form.children).filter((elem) => elem.classList.contains(STAGE_CLASSNAME));
@@ -18660,14 +18814,16 @@ var paginate = (form, { type, progress, labels }, stages, onChange) => {
 		}
 	};
 	const ownerDocument = form.ownerDocument;
-	ownerDocument.addEventListener("click", ({ target }) => {
+	const onDocumentClick = ({ target }) => {
 		const control = target.closest?.("button, input");
 		if (control?.form !== form) return;
 		if (control?.type === "submit" || control?.tagName === "INPUT" && control.type === "image") markReported();
-	}, true);
-	ownerDocument.addEventListener("keydown", ({ key, target }) => {
+	};
+	const onDocumentKeydown = ({ key, target }) => {
 		if (key === "Enter" && target.tagName === "INPUT" && target.form === form) markReported();
-	}, true);
+	};
+	ownerDocument.addEventListener("click", onDocumentClick, true);
+	ownerDocument.addEventListener("keydown", onDocumentKeydown, true);
 	for (const method of ["requestSubmit", "reportValidity"]) {
 		const native = HTMLFormElement.prototype[method];
 		if (typeof native !== "function") continue;
@@ -18687,7 +18843,11 @@ var paginate = (form, { type, progress, labels }, stages, onChange) => {
 		get index() {
 			return current;
 		},
-		count
+		count,
+		destroy() {
+			ownerDocument.removeEventListener("click", onDocumentClick, true);
+			ownerDocument.removeEventListener("keydown", onDocumentKeydown, true);
+		}
 	};
 };
 //#endregion
@@ -18814,8 +18974,21 @@ var FormeoRenderer$1 = class {
 			formData: this.form
 		});
 	}
+	/**
+	* Remove the rendered form from the page and stop its pagination. render() can be called again afterwards.
+	* @return {void}
+	*/
+	destroy() {
+		this.pager?.destroy();
+		this.pager = null;
+		this.renderedForm?.remove();
+		this.renderedForm = null;
+		this.components = Object.create(null);
+	}
 	getRenderedForm(formData = this.form) {
 		this.form = cleanFormData(formData);
+		this.pager?.destroy();
+		this.pager = null;
 		const renderCount = document.getElementsByClassName("formeo-render").length;
 		const config = {
 			...this.config,