formeo 5.0.3 → 5.1.1

package/dist/demo/assets/js/formeo.umd.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.2
+Version: 5.1.0
 Author: Draggable https://draggable.io
 */
 
@@ -6064,7 +6064,7 @@ Author: Draggable https://draggable.io
 	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.0.2";
+		version$2 = "5.1.0";
 		type = "module";
 		main = "dist/formeo.cjs.js";
 		module$1 = "dist/formeo.es.js";
@@ -11984,7 +11984,7 @@ Author: Draggable https://draggable.io
 	}));
 	//#endregion
 	//#region src/lib/js/common/loaders.js
-	var loaded, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
+	var loaded, AJAX_TIMEOUT_MS, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
 	var init_loaders = __esmMin((() => {
 		init_constants();
 		init_dom();
@@ -11994,12 +11994,14 @@ Author: Draggable https://draggable.io
 			css: /* @__PURE__ */ new Set(),
 			formeoSprite: null
 		};
-		ajax = (fileUrl, callback, onError = noop) => {
+		AJAX_TIMEOUT_MS = 1e4;
+		ajax = (fileUrl, callback, onError = noop, timeoutMs = AJAX_TIMEOUT_MS) => {
 			return new Promise((resolve) => {
-				return fetch(fileUrl).then((data) => {
+				const signal = typeof AbortSignal !== "undefined" && AbortSignal.timeout ? AbortSignal.timeout(timeoutMs) : void 0;
+				return fetch(fileUrl, signal ? { signal } : void 0).then((data) => {
 					if (!data.ok) return resolve(onError(data));
 					resolve(callback ? callback(data) : data);
-				}).catch((err) => onError(err));
+				}).catch((err) => resolve(onError(err)));
 			});
 		};
 		onLoadStylesheet = (elem, cb) => {
@@ -12782,6 +12784,9 @@ Author: Draggable https://draggable.io
 			isDOMElement(variable) {
 				return variable instanceof window.Element || variable instanceof window.HTMLElement || !!(variable && typeof variable === "object" && variable.nodeType === 1 && typeof variable.nodeName === "string");
 			}
+			resolveContainer(container) {
+				return typeof container === "string" ? document.querySelector(container) : container;
+			}
 		};
 		dom = new DOM();
 	}));
@@ -16251,7 +16256,7 @@ Author: Draggable https://draggable.io
 			};
 			applyOptions = async (controlOptions = {}) => {
 				const { container, elements, groupOrder, ...options } = merge(defaultOptions, controlOptions);
-				this.container = container;
+				this.container = dom.resolveContainer(container);
 				this.groupOrder = unique(groupOrder.concat([
 					"common",
 					"html",
@@ -17796,7 +17801,7 @@ Author: Draggable https://draggable.io
 			config: {},
 			events: {},
 			actions: {},
-			controls: {},
+			controls: { container: null },
 			i18n: { location: "https://draggable.github.io/formeo/assets/lang/" },
 			onLoad: () => {}
 		};
@@ -17837,7 +17842,7 @@ Author: Draggable https://draggable.io
 		*/
 		constructor({ formData, ...options }, userFormData) {
 			const { actions: actions$1, events: events$1, debug, config, editorContainer, ...opts } = merge(defaults.editor, options);
-			if (editorContainer) this.editorContainer = typeof editorContainer === "string" ? document.querySelector(editorContainer) : editorContainer;
+			if (editorContainer) this.editorContainer = dom.resolveContainer(editorContainer) || null;
 			this.opts = opts;
 			dom.setOptions = opts;
 			components.config = config;
@@ -18034,7 +18039,11 @@ Author: Draggable https://draggable.io
 				dom.dir = s.current.dir;
 			}
 			this.editor = dom.create(elemConfig);
-			(this.controls.container || this.editor).appendChild(this.controls.dom);
+			const controlsContainer = this.controls.container || this.editor;
+			if (controlsContainer) {
+				if (controlsContainer !== this.editor) dom.empty(controlsContainer);
+				controlsContainer.appendChild(this.controls.dom);
+			}
 			if (this.editorContainer) {
 				dom.empty(this.editorContainer);
 				this.editorContainer.appendChild(this.editor);

package/dist/demo/assets/js/html.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.2
+Version: 5.1.0
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/layout.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.2
+Version: 5.1.0
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/mode-json.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.2
+Version: 5.1.0
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/assets/js/theme-github_light_default.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.2
+Version: 5.1.0
 Author: Draggable https://draggable.io
 */
 

package/dist/demo/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag &amp; Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文（中国）</option><option value="zh-HK" dir="ltr">中文（中國香港特別行政區）</option></select></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v5.0.2</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>
+<!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag &amp; Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文（中国）</option><option value="zh-HK" dir="ltr">中文（中國香港特別行政區）</option></select></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v5.1.0</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>

package/dist/formeo.cjs.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.2
+Version: 5.1.0
 Author: Draggable https://draggable.io
 */
 
@@ -6061,7 +6061,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.0.2";
+	version$2 = "5.1.0";
 	type = "module";
 	main = "dist/formeo.cjs.js";
 	module$1 = "dist/formeo.es.js";
@@ -11981,7 +11981,7 @@ var init_helpers$2 = __esmMin((() => {
 }));
 //#endregion
 //#region src/lib/js/common/loaders.js
-var loaded, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
+var loaded, AJAX_TIMEOUT_MS, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
 var init_loaders = __esmMin((() => {
 	init_constants();
 	init_dom();
@@ -11991,12 +11991,14 @@ var init_loaders = __esmMin((() => {
 		css: /* @__PURE__ */ new Set(),
 		formeoSprite: null
 	};
-	ajax = (fileUrl, callback, onError = noop) => {
+	AJAX_TIMEOUT_MS = 1e4;
+	ajax = (fileUrl, callback, onError = noop, timeoutMs = AJAX_TIMEOUT_MS) => {
 		return new Promise((resolve) => {
-			return fetch(fileUrl).then((data) => {
+			const signal = typeof AbortSignal !== "undefined" && AbortSignal.timeout ? AbortSignal.timeout(timeoutMs) : void 0;
+			return fetch(fileUrl, signal ? { signal } : void 0).then((data) => {
 				if (!data.ok) return resolve(onError(data));
 				resolve(callback ? callback(data) : data);
-			}).catch((err) => onError(err));
+			}).catch((err) => resolve(onError(err)));
 		});
 	};
 	onLoadStylesheet = (elem, cb) => {
@@ -12779,6 +12781,9 @@ var init_dom = __esmMin((() => {
 		isDOMElement(variable) {
 			return variable instanceof window.Element || variable instanceof window.HTMLElement || !!(variable && typeof variable === "object" && variable.nodeType === 1 && typeof variable.nodeName === "string");
 		}
+		resolveContainer(container) {
+			return typeof container === "string" ? document.querySelector(container) : container;
+		}
 	};
 	dom = new DOM();
 }));
@@ -16248,7 +16253,7 @@ var init_controls = __esmMin((() => {
 		};
 		applyOptions = async (controlOptions = {}) => {
 			const { container, elements, groupOrder, ...options } = merge(defaultOptions, controlOptions);
-			this.container = container;
+			this.container = dom.resolveContainer(container);
 			this.groupOrder = unique(groupOrder.concat([
 				"common",
 				"html",
@@ -17793,7 +17798,7 @@ var defaults = { get editor() {
 		config: {},
 		events: {},
 		actions: {},
-		controls: {},
+		controls: { container: null },
 		i18n: { location: "https://draggable.github.io/formeo/assets/lang/" },
 		onLoad: () => {}
 	};
@@ -17834,7 +17839,7 @@ var FormeoEditor$1 = class {
 	*/
 	constructor({ formData, ...options }, userFormData) {
 		const { actions: actions$1, events: events$1, debug, config, editorContainer, ...opts } = merge(defaults.editor, options);
-		if (editorContainer) this.editorContainer = typeof editorContainer === "string" ? document.querySelector(editorContainer) : editorContainer;
+		if (editorContainer) this.editorContainer = dom.resolveContainer(editorContainer) || null;
 		this.opts = opts;
 		dom.setOptions = opts;
 		components.config = config;
@@ -18031,7 +18036,11 @@ var FormeoEditor$1 = class {
 			dom.dir = s.current.dir;
 		}
 		this.editor = dom.create(elemConfig);
-		(this.controls.container || this.editor).appendChild(this.controls.dom);
+		const controlsContainer = this.controls.container || this.editor;
+		if (controlsContainer) {
+			if (controlsContainer !== this.editor) dom.empty(controlsContainer);
+			controlsContainer.appendChild(this.controls.dom);
+		}
 		if (this.editorContainer) {
 			dom.empty(this.editorContainer);
 			this.editorContainer.appendChild(this.editor);

package/dist/formeo.css

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.2
+Version: 5.1.0
 Author: Draggable https://draggable.io
 */
 

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.2
+Version: 5.1.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.0.2";
+	version$2 = "5.1.0";
 	type = "module";
 	main = "dist/formeo.cjs.js";
 	module$1 = "dist/formeo.es.js";
@@ -11980,7 +11980,7 @@ var init_helpers$2 = __esmMin((() => {
 }));
 //#endregion
 //#region src/lib/js/common/loaders.js
-var loaded, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
+var loaded, AJAX_TIMEOUT_MS, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
 var init_loaders = __esmMin((() => {
 	init_constants();
 	init_dom();
@@ -11990,12 +11990,14 @@ var init_loaders = __esmMin((() => {
 		css: /* @__PURE__ */ new Set(),
 		formeoSprite: null
 	};
-	ajax = (fileUrl, callback, onError = noop) => {
+	AJAX_TIMEOUT_MS = 1e4;
+	ajax = (fileUrl, callback, onError = noop, timeoutMs = AJAX_TIMEOUT_MS) => {
 		return new Promise((resolve) => {
-			return fetch(fileUrl).then((data) => {
+			const signal = typeof AbortSignal !== "undefined" && AbortSignal.timeout ? AbortSignal.timeout(timeoutMs) : void 0;
+			return fetch(fileUrl, signal ? { signal } : void 0).then((data) => {
 				if (!data.ok) return resolve(onError(data));
 				resolve(callback ? callback(data) : data);
-			}).catch((err) => onError(err));
+			}).catch((err) => resolve(onError(err)));
 		});
 	};
 	onLoadStylesheet = (elem, cb) => {
@@ -12778,6 +12780,9 @@ var init_dom = __esmMin((() => {
 		isDOMElement(variable) {
 			return variable instanceof window.Element || variable instanceof window.HTMLElement || !!(variable && typeof variable === "object" && variable.nodeType === 1 && typeof variable.nodeName === "string");
 		}
+		resolveContainer(container) {
+			return typeof container === "string" ? document.querySelector(container) : container;
+		}
 	};
 	dom = new DOM();
 }));
@@ -16247,7 +16252,7 @@ var init_controls = __esmMin((() => {
 		};
 		applyOptions = async (controlOptions = {}) => {
 			const { container, elements, groupOrder, ...options } = merge(defaultOptions, controlOptions);
-			this.container = container;
+			this.container = dom.resolveContainer(container);
 			this.groupOrder = unique(groupOrder.concat([
 				"common",
 				"html",
@@ -17792,7 +17797,7 @@ var defaults = { get editor() {
 		config: {},
 		events: {},
 		actions: {},
-		controls: {},
+		controls: { container: null },
 		i18n: { location: "https://draggable.github.io/formeo/assets/lang/" },
 		onLoad: () => {}
 	};
@@ -17833,7 +17838,7 @@ var FormeoEditor$1 = class {
 	*/
 	constructor({ formData, ...options }, userFormData) {
 		const { actions: actions$1, events: events$1, debug, config, editorContainer, ...opts } = merge(defaults.editor, options);
-		if (editorContainer) this.editorContainer = typeof editorContainer === "string" ? document.querySelector(editorContainer) : editorContainer;
+		if (editorContainer) this.editorContainer = dom.resolveContainer(editorContainer) || null;
 		this.opts = opts;
 		dom.setOptions = opts;
 		components.config = config;
@@ -18030,7 +18035,11 @@ var FormeoEditor$1 = class {
 			dom.dir = s.current.dir;
 		}
 		this.editor = dom.create(elemConfig);
-		(this.controls.container || this.editor).appendChild(this.controls.dom);
+		const controlsContainer = this.controls.container || this.editor;
+		if (controlsContainer) {
+			if (controlsContainer !== this.editor) dom.empty(controlsContainer);
+			controlsContainer.appendChild(this.controls.dom);
+		}
 		if (this.editorContainer) {
 			dom.empty(this.editorContainer);
 			this.editorContainer.appendChild(this.editor);