formeo 4.1.4 → 4.2.1

package/dist/formeo.min.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 4.1.3
+Version: 4.2.0
 Author: Draggable https://draggable.io
 */
 
@@ -53,8 +53,8 @@ Author: Draggable https://draggable.io
       this.config = { location: parsedLocation, ...restOptions };
       const { override, preloaded = {} } = this.config;
       const allLangs = Object.entries(this.langs).concat(Object.entries(override || preloaded));
-      this.langs = allLangs.reduce((acc, [locale, lang]) => {
-        acc[locale] = this.applyLanguage(locale, lang);
+      this.langs = allLangs.reduce((acc, [locale2, lang]) => {
+        acc[locale2] = this.applyLanguage(locale2, lang);
         return acc;
       }, {});
       this.locale = this.config.locale || this.config.langs[0];
@@ -73,9 +73,9 @@ Author: Draggable https://draggable.io
      * @param {String} locale
      * @param {String|Object} lang
      */
-    addLanguage(locale, lang = {}) {
+    addLanguage(locale2, lang = {}) {
       lang = typeof lang === "string" ? I18N.processFile(lang) : lang;
-      this.applyLanguage(locale, lang);
+      this.applyLanguage(locale2, lang);
       this.config.langs.push("locale");
     }
     /**
@@ -84,9 +84,9 @@ Author: Draggable https://draggable.io
      * @param  {String} locale - locale to check for value
      * @return {String} language string or undefined
      */
-    getValue(key, locale = this.locale) {
+    getValue(key, locale2 = this.locale) {
       var _a;
-      const value = (_a = this.langs[locale]) == null ? void 0 : _a[key];
+      const value = (_a = this.langs[locale2]) == null ? void 0 : _a[key];
       return value || this.getFallbackValue(key);
     }
     /**
@@ -163,9 +163,9 @@ Author: Draggable https://draggable.io
     static fromFile(rawText) {
       const lines = rawText.split("\n");
       const lang = {};
-      for (let matches2, i = 0; i < lines.length; i++) {
+      for (let matches2, i2 = 0; i2 < lines.length; i2++) {
         const regex = /^(.+?) *?= *?([^\n]+)/;
-        matches2 = regex.exec(lines[i]);
+        matches2 = regex.exec(lines[i2]);
         if (matches2) {
           lang[matches2[1]] = matches2[2].replace(/(^\s+|\s+$)/g, "");
         }
@@ -178,22 +178,22 @@ Author: Draggable https://draggable.io
      * @param  {Boolean} useCache
      * @return {Promise}       resolves response
      */
-    loadLang(locale, useCache = true) {
+    loadLang(locale2, useCache = true) {
       const _this = this;
       return new Promise(function(resolve, reject) {
-        if (_this.loaded.indexOf(locale) !== -1 && useCache) {
-          _this.applyLanguage(_this.langs[locale]);
-          return resolve(_this.langs[locale]);
+        if (_this.loaded.indexOf(locale2) !== -1 && useCache) {
+          _this.applyLanguage(_this.langs[locale2]);
+          return resolve(_this.langs[locale2]);
         } else {
-          const langFile = [_this.config.location, locale, _this.config.extension].join("");
+          const langFile = [_this.config.location, locale2, _this.config.extension].join("");
           return fetchData(langFile).then((lang) => {
             const processedFile = I18N.processFile(lang);
-            _this.applyLanguage(locale, processedFile);
-            _this.loaded.push(locale);
-            return resolve(_this.langs[locale]);
+            _this.applyLanguage(locale2, processedFile);
+            _this.loaded.push(locale2);
+            return resolve(_this.langs[locale2]);
           }).catch((err) => {
             console.error(err);
-            const lang = _this.applyLanguage(locale);
+            const lang = _this.applyLanguage(locale2);
             resolve(lang);
           });
         }
@@ -205,11 +205,11 @@ Author: Draggable https://draggable.io
      * @param {Object} lang
      * @return {Object} overriden language
      */
-    applyLanguage(locale, lang = {}) {
-      const override = this.config.override[locale] || {};
-      const existingLang = this.langs[locale] || {};
-      this.langs[locale] = { ...existingLang, ...lang, ...override };
-      return this.langs[locale];
+    applyLanguage(locale2, lang = {}) {
+      const override = this.config.override[locale2] || {};
+      const existingLang = this.langs[locale2] || {};
+      this.langs[locale2] = { ...existingLang, ...lang, ...override };
+      return this.langs[locale2];
     }
     /**
      * return currently available languages
@@ -223,10 +223,10 @@ Author: Draggable https://draggable.io
      * @param {String}   locale
      * @return {Promise} language
      */
-    async setCurrent(locale = "en-US") {
-      await this.loadLang(locale);
-      this.locale = locale;
-      this.current = this.langs[locale];
+    async setCurrent(locale2 = "en-US") {
+      await this.loadLang(locale2);
+      this.locale = locale2;
+      this.current = this.langs[locale2];
       return this.current;
     }
   }
@@ -259,9 +259,9 @@ Author: Draggable https://draggable.io
       __publicField(this, "tooltip");
       __publicField(this, "activeTriggerType", null);
       __publicField(this, "spacing", 12);
-      __publicField(this, "handleClick", (e) => {
+      __publicField(this, "handleClick", (e2) => {
         const triggerName = this.triggerName;
-        const trigger = e.target.closest(`[${triggerName}][${triggerName}-type="click"]`);
+        const trigger = e2.target.closest(`[${triggerName}][${triggerName}-type="click"]`);
         if (trigger) {
           if (this.isVisible()) {
             this.hide();
@@ -274,9 +274,9 @@ Author: Draggable https://draggable.io
           this.hide();
         }
       });
-      __publicField(this, "handleMouseOver", (e) => {
+      __publicField(this, "handleMouseOver", (e2) => {
         const triggerName = this.triggerName;
-        const trigger = e.target.closest(`[${triggerName}]`);
+        const trigger = e2.target.closest(`[${triggerName}]`);
         if (this.activeTriggerType !== "click" && (trigger == null ? void 0 : trigger.getAttribute(`${triggerName}-type`)) !== "click") {
           const content = trigger == null ? void 0 : trigger.getAttribute(`${triggerName}`);
           if (content) {
@@ -285,9 +285,9 @@ Author: Draggable https://draggable.io
           }
         }
       });
-      __publicField(this, "handleMouseOut", (e) => {
+      __publicField(this, "handleMouseOut", (e2) => {
         const triggerName = this.triggerName;
-        const trigger = e.target.closest(`[${triggerName}]`);
+        const trigger = e2.target.closest(`[${triggerName}]`);
         if (this.activeTriggerType !== "click" && (trigger == null ? void 0 : trigger.getAttribute(`${triggerName}-type`)) !== "click") {
           this.hide();
         }
@@ -435,7 +435,7 @@ Author: Draggable https://draggable.io
     window.SmartTooltip = SmartTooltip;
   }
   const name$1 = "formeo";
-  const version$2 = "4.1.3";
+  const version$2 = "4.2.0";
   const pkg = {
     name: name$1,
     version: version$2
@@ -669,7 +669,7 @@ Author: Draggable https://draggable.io
       try {
         value[symToStringTag] = void 0;
         var unmasked = true;
-      } catch (e) {
+      } catch (e2) {
       }
       var result = nativeObjectToString.call(value);
       if (unmasked) {
@@ -780,11 +780,11 @@ Author: Draggable https://draggable.io
       if (func != null) {
         try {
           return funcToString.call(func);
-        } catch (e) {
+        } catch (e2) {
         }
         try {
           return func + "";
-        } catch (e) {
+        } catch (e2) {
         }
       }
       return "";
@@ -1130,7 +1130,7 @@ Author: Draggable https://draggable.io
         var func = getNative(Object, "defineProperty");
         func({}, "", {});
         return func;
-      } catch (e) {
+      } catch (e2) {
       }
     })();
     _defineProperty$1 = defineProperty;
@@ -1541,7 +1541,7 @@ Author: Draggable https://draggable.io
             return types;
           }
           return freeProcess && freeProcess.binding && freeProcess.binding("util");
-        } catch (e) {
+        } catch (e2) {
         }
       })();
       module2.exports = nodeUtil;
@@ -2074,8 +2074,8 @@ Author: Draggable https://draggable.io
     }
     if (Array.isArray(obj)) {
       copy = [];
-      for (let i = 0, len = obj.length; i < len; i++) {
-        copy[i] = clone$1(obj[i]);
+      for (let i2 = 0, len = obj.length; i2 < len; i2++) {
+        copy[i2] = clone$1(obj[i2]);
       }
       return copy;
     }
@@ -2147,8 +2147,8 @@ Author: Draggable https://draggable.io
     if (typeof data === "string") {
       try {
         return JSON.parse(data);
-      } catch (e) {
-        console.error("Invalid JSON string provided:", e);
+      } catch (e2) {
+        console.error("Invalid JSON string provided:", e2);
         return /* @__PURE__ */ Object.create(null);
       }
     }
@@ -2170,20 +2170,17 @@ Author: Draggable https://draggable.io
     }
     return result;
   }
+  let BUNDLED_SVG_SPRITE = null;
+  try {
+    BUNDLED_SVG_SPRITE = require("../../lib/icons/formeo-sprite.svg?raw");
+  } catch (e2) {
+  }
   const name = pkg.name;
   const version$1 = pkg.version;
   const PACKAGE_NAME = name;
   const formeoSpriteId = "formeo-sprite";
-  const POLYFILLS = [
-    { name: "cssPreload", src: "//cdnjs.cloudflare.com/ajax/libs/loadCSS/2.0.1/cssrelpreload.min.js" },
-    { name: "mutationObserver", src: "//cdn.jsdelivr.net/npm/mutationobserver-shim/dist/mutationobserver.min.js" },
-    { name: "fetch", src: "https://unpkg.com/unfetch/polyfill" }
-  ];
-  const relativeSpritePath = `../../lib/icons/${formeoSpriteId}.svg`;
-  const localSpriteUrl = false ? (void 0)(relativeSpritePath) : relativeSpritePath;
-  const isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development" || false;
-  const SVG_SPRITE_URL = isDev ? localSpriteUrl : `https://cdn.jsdelivr.net/npm/formeo@${version$1}/dist/${formeoSpriteId}.svg`;
-  const FALLBACK_SVG_SPRITE_URL = `https://draggable.github.io/formeo/assets/img/${formeoSpriteId}.svg`;
+  const SVG_SPRITE_URL = null;
+  const FALLBACK_SVG_SPRITE_URL = `https://cdn.jsdelivr.net/npm/formeo@${version$1}/dist/${formeoSpriteId}.svg`;
   const CSS_URL = `https://cdn.jsdelivr.net/npm/formeo@${version$1}/dist/formeo.min.css`;
   const FALLBACK_CSS_URL = "https://draggable.github.io/formeo/assets/css/formeo.min.css";
   const PANEL_CLASSNAME = "f-panel";
@@ -2283,6 +2280,7 @@ Author: Draggable https://draggable.io
   const ANIMATION_SPEED_SLOW = Math.round(ANIMATION_SPEED_BASE * 2);
   const EVENT_FORMEO_SAVED = "formeoSaved";
   const EVENT_FORMEO_UPDATED = "formeoUpdated";
+  const EVENT_FORMEO_CHANGED = "formeoChanged";
   const EVENT_FORMEO_UPDATED_STAGE = "formeoUpdatedStage";
   const EVENT_FORMEO_UPDATED_ROW = "formeoUpdatedRow";
   const EVENT_FORMEO_UPDATED_COLUMN = "formeoUpdatedColumn";
@@ -2290,6 +2288,12 @@ Author: Draggable https://draggable.io
   const EVENT_FORMEO_CLEARED = "formeoCleared";
   const EVENT_FORMEO_ON_RENDER = "formeoOnRender";
   const EVENT_FORMEO_CONDITION_UPDATED = "formeoConditionUpdated";
+  const EVENT_FORMEO_ADDED_ROW = "formeoAddedRow";
+  const EVENT_FORMEO_ADDED_COLUMN = "formeoAddedColumn";
+  const EVENT_FORMEO_ADDED_FIELD = "formeoAddedField";
+  const EVENT_FORMEO_REMOVED_ROW = "formeoRemovedRow";
+  const EVENT_FORMEO_REMOVED_COLUMN = "formeoRemovedColumn";
+  const EVENT_FORMEO_REMOVED_FIELD = "formeoRemovedField";
   const COMPARISON_OPERATORS = {
     equals: "==",
     notEquals: "!=",
@@ -3296,6 +3300,18 @@ Author: Draggable https://draggable.io
           evtData.previousValue = oldVal;
         }
         events.formeoUpdated(evtData);
+        if (this.name) {
+          const componentEventMap = {
+            stage: EVENT_FORMEO_UPDATED_STAGE,
+            row: EVENT_FORMEO_UPDATED_ROW,
+            column: EVENT_FORMEO_UPDATED_COLUMN,
+            field: EVENT_FORMEO_UPDATED_FIELD
+          };
+          const specificEvent = componentEventMap[this.name];
+          if (specificEvent) {
+            events.formeoUpdated(evtData, specificEvent);
+          }
+        }
       }
       return data;
     }
@@ -3365,6 +3381,23 @@ Author: Draggable https://draggable.io
       const component = this.Component({ ...data, id: elemId });
       this.data[elemId] = component;
       this.active = component;
+      const componentEventMap = {
+        row: EVENT_FORMEO_ADDED_ROW,
+        column: EVENT_FORMEO_ADDED_COLUMN,
+        field: EVENT_FORMEO_ADDED_FIELD
+      };
+      const addEvent = componentEventMap[this.name];
+      if (addEvent) {
+        events.formeoUpdated(
+          {
+            entity: component,
+            componentId: elemId,
+            componentType: this.name,
+            data: component.data
+          },
+          addEvent
+        );
+      }
       return component;
     };
     /**
@@ -3430,9 +3463,9 @@ Author: Draggable https://draggable.io
     return keys;
   }
   function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      if (i % 2) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2] != null ? arguments[i2] : {};
+      if (i2 % 2) {
         ownKeys(Object(source), true).forEach(function(key) {
           _defineProperty(target, key, source[key]);
         });
@@ -3474,8 +3507,8 @@ Author: Draggable https://draggable.io
   }
   function _extends() {
     _extends = Object.assign || function(target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+      for (var i2 = 1; i2 < arguments.length; i2++) {
+        var source = arguments[i2];
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
@@ -3490,9 +3523,9 @@ Author: Draggable https://draggable.io
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
+    var key, i2;
+    for (i2 = 0; i2 < sourceKeys.length; i2++) {
+      key = sourceKeys[i2];
       if (excluded.indexOf(key) >= 0) continue;
       target[key] = source[key];
     }
@@ -3501,11 +3534,11 @@ Author: Draggable https://draggable.io
   function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
-    var key, i;
+    var key, i2;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-      for (i = 0; i < sourceSymbolKeys.length; i++) {
-        key = sourceSymbolKeys[i];
+      for (i2 = 0; i2 < sourceSymbolKeys.length; i2++) {
+        key = sourceSymbolKeys[i2];
         if (excluded.indexOf(key) >= 0) continue;
         if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
         target[key] = source[key];
@@ -3614,10 +3647,10 @@ Author: Draggable https://draggable.io
   }
   function find(ctx, tagName, iterator) {
     if (ctx) {
-      var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length;
+      var list = ctx.getElementsByTagName(tagName), i2 = 0, n = list.length;
       if (iterator) {
-        for (; i < n; i++) {
-          iterator(list[i], i);
+        for (; i2 < n; i2++) {
+          iterator(list[i2], i2);
         }
       }
       return list;
@@ -3700,15 +3733,15 @@ Author: Draggable https://draggable.io
     return false;
   }
   function getChild(el, childNum, options, includeDragEl) {
-    var currentChild = 0, i = 0, children = el.children;
-    while (i < children.length) {
-      if (children[i].style.display !== "none" && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false)) {
+    var currentChild = 0, i2 = 0, children = el.children;
+    while (i2 < children.length) {
+      if (children[i2].style.display !== "none" && children[i2] !== Sortable.ghost && (includeDragEl || children[i2] !== Sortable.dragged) && closest(children[i2], options.draggable, el, false)) {
         if (currentChild === childNum) {
-          return children[i];
+          return children[i2];
         }
         currentChild++;
       }
-      i++;
+      i2++;
     }
     return null;
   }
@@ -3743,10 +3776,10 @@ Author: Draggable https://draggable.io
     return [offsetLeft, offsetTop];
   }
   function indexOfObject(arr, obj) {
-    for (var i in arr) {
-      if (!arr.hasOwnProperty(i)) continue;
+    for (var i2 in arr) {
+      if (!arr.hasOwnProperty(i2)) continue;
       for (var key in obj) {
-        if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i);
+        if (obj.hasOwnProperty(key) && obj[key] === arr[i2][key]) return Number(i2);
       }
     }
     return -1;
@@ -4199,9 +4232,9 @@ Author: Draggable https://draggable.io
       var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY);
       if (nearest) {
         var event = {};
-        for (var i in evt) {
-          if (evt.hasOwnProperty(i)) {
-            event[i] = evt[i];
+        for (var i2 in evt) {
+          if (evt.hasOwnProperty(i2)) {
+            event[i2] = evt[i2];
           }
         }
         event.target = event.rootEl = nearest;
@@ -4450,8 +4483,8 @@ Author: Draggable https://draggable.io
         }
       }
     },
-    _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler(e) {
-      var touch = e.touches ? e.touches[0] : e;
+    _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler(e2) {
+      var touch = e2.touches ? e2.touches[0] : e2;
       if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) {
         this._disableDelayedDrag();
       }
@@ -5052,9 +5085,9 @@ Author: Draggable https://draggable.io
      * @returns {String[]}
      */
     toArray: function toArray() {
-      var order = [], el, children = this.el.children, i = 0, n = children.length, options = this.options;
-      for (; i < n; i++) {
-        el = children[i];
+      var order = [], el, children = this.el.children, i2 = 0, n = children.length, options = this.options;
+      for (; i2 < n; i2++) {
+        el = children[i2];
         if (closest(el, options.draggable, this.el, false)) {
           order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));
         }
@@ -5067,8 +5100,8 @@ Author: Draggable https://draggable.io
      */
     sort: function sort(order, useAnimation) {
       var items = {}, rootEl2 = this.el;
-      this.toArray().forEach(function(id, i) {
-        var el = rootEl2.children[i];
+      this.toArray().forEach(function(id, i2) {
+        var el = rootEl2.children[i2];
         if (closest(el, this.options.draggable, rootEl2, false)) {
           items[id] = el;
         }
@@ -5261,9 +5294,9 @@ Author: Draggable https://draggable.io
     }
   }
   function _generateId(el) {
-    var str = el.tagName + el.className + el.src + el.href + el.textContent, i = str.length, sum = 0;
-    while (i--) {
-      sum += str.charCodeAt(i);
+    var str = el.tagName + el.className + el.src + el.href + el.textContent, i2 = str.length, sum = 0;
+    while (i2--) {
+      sum += str.charCodeAt(i2);
     }
     return sum.toString(36);
   }
@@ -5455,9 +5488,9 @@ Author: Draggable https://draggable.io
       var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX);
       var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY);
       if (!autoScrolls[layersOut]) {
-        for (var i = 0; i <= layersOut; i++) {
-          if (!autoScrolls[i]) {
-            autoScrolls[i] = {};
+        for (var i2 = 0; i2 <= layersOut; i2++) {
+          if (!autoScrolls[i2]) {
+            autoScrolls[i2] = {};
           }
         }
       }
@@ -5657,13 +5690,13 @@ Author: Draggable https://draggable.io
     return unique(orderedElements);
   };
   const forEach = (arr, cb, scope) => {
-    for (let i = 0; i < arr.length; i++) {
-      cb.call(scope, arr[i], i);
+    for (let i2 = 0; i2 < arr.length; i2++) {
+      cb.call(scope, arr[i2], i2);
     }
   };
   const map = (arr, cb) => {
     const newArray = [];
-    forEach(arr, (elem, i) => newArray.push(cb(elem, i)));
+    forEach(arr, (elem, i2) => newArray.push(cb(elem, i2)));
     return newArray;
   };
   const sanitizedAttributeNames = {};
@@ -5682,7 +5715,6 @@ Author: Draggable https://draggable.io
   const capitalize = (str) => str.replace(/\b\w/g, (m) => m.toUpperCase());
   const copyObj = (obj) => window.JSON.parse(window.JSON.stringify(obj));
   const subtract = (arr, from) => from.filter((a) => !~arr.indexOf(a));
-  const isIE = () => window.navigator.userAgent.indexOf("MSIE ") !== -1;
   const helpers = {
     capitalize,
     safeAttrName,
@@ -5694,8 +5726,119 @@ Author: Draggable https://draggable.io
     indexOfNode,
     isInt,
     get,
-    orderObjectsBy,
-    isIE
+    orderObjectsBy
+  };
+  const loaded = {
+    js: /* @__PURE__ */ new Set(),
+    css: /* @__PURE__ */ new Set(),
+    formeoSprite: null
+  };
+  const ajax = (fileUrl, callback, onError = noop) => {
+    return new Promise((resolve) => {
+      return fetch(fileUrl).then((data) => {
+        if (!data.ok) {
+          return resolve(onError(data));
+        }
+        resolve(callback ? callback(data) : data);
+      }).catch((err) => onError(err));
+    });
+  };
+  const onLoadStylesheet = (elem, cb) => {
+    elem.removeEventListener("load", onLoadStylesheet);
+    cb(elem.src);
+  };
+  const onLoadJavascript = (elem, cb) => {
+    elem.removeEventListener("load", onLoadJavascript);
+    cb(elem.src);
+  };
+  const insertScript = (src) => {
+    return new Promise((resolve, reject) => {
+      if (loaded.js.has(src)) {
+        return resolve(src);
+      }
+      loaded.js.add(src);
+      const script = dom.create({
+        tag: "script",
+        attrs: {
+          type: "text/javascript",
+          async: true,
+          src
+        },
+        action: {
+          load: () => onLoadJavascript(script, resolve),
+          error: () => reject(new Error(`${src} failed to load.`))
+        }
+      });
+      document.head.appendChild(script);
+    });
+  };
+  const insertStyle = (srcs) => {
+    srcs = Array.isArray(srcs) ? srcs : [srcs];
+    const promises = srcs.map(
+      (src) => new Promise((resolve, reject) => {
+        if (loaded.css.has(src)) {
+          return resolve(src);
+        }
+        loaded.css.add(src);
+        const styleLink = dom.create({
+          tag: "link",
+          attrs: {
+            rel: "stylesheet",
+            href: src
+          },
+          action: {
+            load: () => onLoadStylesheet(styleLink, resolve),
+            error: () => reject(new Error(`${(void 0).src} failed to load.`))
+          }
+        });
+        document.head.appendChild(styleLink);
+      })
+    );
+    return Promise.all(promises);
+  };
+  const insertScripts = (srcs) => {
+    srcs = Array.isArray(srcs) ? srcs : [srcs];
+    const promises = srcs.map((src) => insertScript(src));
+    return Promise.all(promises);
+  };
+  const insertStyles = (srcs) => {
+    srcs = Array.isArray(srcs) ? srcs : [srcs];
+    const promises = srcs.map((src) => insertStyle(src));
+    return Promise.all(promises);
+  };
+  const insertIcons = (iconSvgStr) => {
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(iconSvgStr, "image/svg+xml");
+    loaded.formeoSprite = svgDoc.documentElement;
+    return loaded.formeoSprite;
+  };
+  const fetchIcons = async (iconSpriteUrl = SVG_SPRITE_URL) => {
+    if (loaded.formeoSprite) {
+      return loaded.formeoSprite;
+    }
+    if (!iconSpriteUrl) {
+      return insertIcons(BUNDLED_SVG_SPRITE);
+    }
+    const parseResp = async (resp) => insertIcons(await resp.text());
+    return ajax(iconSpriteUrl, parseResp, () => ajax(FALLBACK_SVG_SPRITE_URL, parseResp));
+  };
+  const LOADER_MAP = {
+    js: insertScripts,
+    css: insertStyles
+  };
+  const fetchDependencies = (dependencies) => {
+    const promises = Object.entries(dependencies).map(([type, src]) => {
+      return LOADER_MAP[type](src);
+    });
+    return Promise.all(promises);
+  };
+  const fetchFormeoStyle = async (cssUrl) => {
+    if (!loaded.css.has(cssUrl)) {
+      await insertStyle(cssUrl);
+      if (!loaded.css.has(FALLBACK_CSS_URL)) {
+        return await insertStyle(FALLBACK_CSS_URL);
+      }
+    }
   };
   const iconFontTemplates = {
     glyphicons: (icon) => `<span class="glyphicon glyphicon-${icon}" aria-hidden="true"></span>`,
@@ -5790,7 +5933,7 @@ Author: Draggable https://draggable.io
       processed.push("tag");
       let childType;
       const { tag } = elem;
-      let i;
+      let i2;
       const wrap = {
         attrs: {},
         className: [helpers.get(elem, "config.inputWrap")],
@@ -5884,8 +6027,8 @@ Author: Draggable https://draggable.io
         processed.push("action");
       }
       const remaining = helpers.subtract(processed, Object.keys(elem));
-      for (i = remaining.length - 1; i >= 0; i--) {
-        element[remaining[i]] = elem[remaining[i]];
+      for (i2 = remaining.length - 1; i2 >= 0; i2--) {
+        element[remaining[i2]] = elem[remaining[i2]];
       }
       if (wrap.children.length) {
         element = this.create(wrap);
@@ -5925,25 +6068,26 @@ Author: Draggable https://draggable.io
       if (this.iconSymbols) {
         return this.iconSymbols;
       }
-      const iconSymbolNodes = document.querySelectorAll(`#${formeoSpriteId} svg symbol`);
-      const createSvgIconConfig = (symbolId) => ({
-        tag: "svg",
-        attrs: {
-          className: ["svg-icon", symbolId]
-        },
-        children: [
-          {
-            tag: "use",
-            attrs: {
-              "xmlns:xlink": "http://www.w3.org/1999/xlink",
-              "xlink:href": `#${symbolId}`
-            }
-          }
-        ]
-      });
+      const iconSymbolNodes = loaded.formeoSprite.querySelectorAll("svg symbol");
+      const createSvgIconConfig = (symbol) => {
+        const viewBox = symbol.getAttribute("viewBox") || "0 0 24 24";
+        const children = Array.from(symbol.children).map((child) => {
+          const clonedNode = child.cloneNode(true);
+          return clonedNode.outerHTML;
+        }).join("");
+        return {
+          tag: "svg",
+          attrs: {
+            className: ["svg-icon", symbol.id],
+            viewBox,
+            xmlns: "http://www.w3.org/2000/svg"
+          },
+          children
+        };
+      };
       this.iconSymbols = Array.from(iconSymbolNodes).reduce((acc, symbol) => {
         const name2 = symbol.id.replace(iconPrefix, "");
-        acc[name2] = createSvgIconConfig(symbol.id);
+        acc[name2] = createSvgIconConfig(symbol);
         return acc;
       }, {});
       this.cachedIcons = {};
@@ -6051,19 +6195,19 @@ Author: Draggable https://draggable.io
       });
       return elementsContainingText;
     };
-    generateOption = ({ type = "option", label, value, i = 0, selected }) => {
+    generateOption = ({ type = "option", label, value, i: i2 = 0, selected }) => {
       const isOption = type === "option";
       return {
         tag: isOption ? "option" : "input",
         attrs: {
           type,
-          value: value || `${type}-${i}`,
-          [type === "option" ? "selected" : "checked"]: selected || !i
+          value: value || `${type}-${i2}`,
+          [type === "option" ? "selected" : "checked"]: selected || !i2
         },
         config: {
           label: label || mi18n.get("labelCount", {
             label: mi18n.get("option"),
-            count: i
+            count: i2
           })
         }
       };
@@ -6079,7 +6223,7 @@ Author: Draggable https://draggable.io
       const { action, attrs = {} } = elem;
       const fieldType = attrs.type || elem.tag;
       const id = attrs.id || elem.id;
-      const optionMap = (option, i) => {
+      const optionMap = (option, i2) => {
         const { label, value, ...rest } = option;
         const defaultInput = () => {
           const input = {
@@ -6088,7 +6232,7 @@ Author: Draggable https://draggable.io
               name: id,
               type: fieldType,
               value: value || "",
-              id: `${id}-${i}`,
+              id: `${id}-${i2}`,
               ...rest
             },
             action
@@ -6096,7 +6240,7 @@ Author: Draggable https://draggable.io
           const optionLabel = {
             tag: "label",
             attrs: {
-              for: `${id}-${i}`
+              for: `${id}-${i2}`
             },
             children: label
           };
@@ -6629,7 +6773,7 @@ Author: Draggable https://draggable.io
      * @return {Object} DOM Element to be injected into the form.
      */
     build() {
-      const keyboardNav = (e) => {
+      const keyboardNav = (e2) => {
         const list = this.list;
         const activeOption = this.getActiveOption();
         const keyCodeMap = /* @__PURE__ */ new Map([
@@ -6666,7 +6810,7 @@ Author: Draggable https://draggable.io
                   this.hideList();
                 }
               }
-              e.preventDefault();
+              e2.preventDefault();
             }
           ],
           [
@@ -6677,7 +6821,7 @@ Author: Draggable https://draggable.io
             }
           ]
         ]);
-        let direction = keyCodeMap.get(e.keyCode);
+        let direction = keyCodeMap.get(e2.keyCode);
         if (!direction) {
           direction = () => false;
         }
@@ -7570,7 +7714,7 @@ Author: Draggable https://draggable.io
       };
       const editPanelButtons = [];
       if (type === "conditions") {
-        if (!mi18n.current.clearAll) {
+        if (mi18n.current && !mi18n.current.clearAll) {
           mi18n.put("clearAll", "Clear All");
         }
         const clearAllBtn = {
@@ -7866,7 +8010,7 @@ Author: Draggable https://draggable.io
           placement: "top"
         },
         action: {
-          click: (e) => this.nav.nextGroup(e)
+          click: (e2) => this.nav.nextGroup(e2)
         },
         content: dom.icon("triangle-right")
       };
@@ -7882,7 +8026,7 @@ Author: Draggable https://draggable.io
           placement: "top"
         },
         action: {
-          click: (e) => this.nav.prevGroup(e)
+          click: (e2) => this.nav.prevGroup(e2)
         },
         content: dom.icon("triangle-left")
       };
@@ -8064,6 +8208,7 @@ Author: Draggable https://draggable.io
     dispatchComponentEvent(eventName, eventData = {}) {
       const fullEventData = {
         component: this,
+        target: this,
         type: eventName,
         timestamp: Date.now(),
         ...eventData
@@ -8149,6 +8294,22 @@ Author: Draggable https://draggable.io
       if (parent.name === "row") {
         parent.autoColumnWidths();
       }
+      const componentEventMap = {
+        row: EVENT_FORMEO_REMOVED_ROW,
+        column: EVENT_FORMEO_REMOVED_COLUMN,
+        field: EVENT_FORMEO_REMOVED_FIELD
+      };
+      const removeEvent = componentEventMap[this.name];
+      if (removeEvent) {
+        events.formeoUpdated(
+          {
+            componentId: this.id,
+            componentType: this.name,
+            parent
+          },
+          removeEvent
+        );
+      }
       return components[`${this.name}s`].delete(this.id);
     };
     /**
@@ -8202,12 +8363,7 @@ Author: Draggable https://draggable.io
       return dom.create({
         tag: "span",
         className: ["component-tag", `${this.name}-tag`],
-        children: [
-          (this.isColumn || this.isField) && dom.icon("component-corner", { className: "bottom-left" }),
-          dom.icon(`handle-${this.name}`),
-          toTitleCase(this.name),
-          (this.isColumn || this.isRow) && dom.icon("component-corner", { className: "bottom-right" })
-        ].filter(Boolean)
+        children: [dom.icon(`handle-${this.name}`), toTitleCase(this.name)].filter(Boolean)
       });
     };
     /**
@@ -9271,8 +9427,8 @@ Author: Draggable https://draggable.io
       if (typeof widths === "string") {
         widths = widths.split(",");
       }
-      this.children.forEach((column, i) => {
-        column.setWidth(`${widths[i]}%`);
+      this.children.forEach((column, i2) => {
+        column.setWidth(`${widths[i2]}%`);
         column.refreshFieldPanels();
       });
     };
@@ -9445,7 +9601,7 @@ Author: Draggable https://draggable.io
     }
     onAdd(...args) {
       const component = super.onAdd(...args);
-      if (component && component.name === "column") {
+      if (component?.name === "column") {
         component.parent.autoColumnWidths();
       }
     }
@@ -9473,133 +9629,6 @@ Author: Draggable https://draggable.io
     }
   };
   const stages = new Stages$1();
-  const loaded = {
-    js: /* @__PURE__ */ new Set(),
-    css: /* @__PURE__ */ new Set()
-  };
-  const ajax = (fileUrl, callback, onError = noop) => {
-    return new Promise((resolve) => {
-      return fetch(fileUrl).then((data) => {
-        if (!data.ok) {
-          return resolve(onError(data));
-        }
-        resolve(callback ? callback(data) : data);
-      }).catch((err) => onError(err));
-    });
-  };
-  const onLoadStylesheet = (elem, cb) => {
-    elem.removeEventListener("load", onLoadStylesheet);
-    cb(elem.src);
-  };
-  const onLoadJavascript = (elem, cb) => {
-    elem.removeEventListener("load", onLoadJavascript);
-    cb(elem.src);
-  };
-  const insertScript = (src) => {
-    return new Promise((resolve, reject) => {
-      if (loaded.js.has(src)) {
-        return resolve(src);
-      }
-      loaded.js.add(src);
-      const script = dom.create({
-        tag: "script",
-        attrs: {
-          type: "text/javascript",
-          async: true,
-          src
-        },
-        action: {
-          load: () => onLoadJavascript(script, resolve),
-          error: () => reject(new Error(`${src} failed to load.`))
-        }
-      });
-      document.head.appendChild(script);
-    });
-  };
-  const insertStyle = (srcs) => {
-    srcs = Array.isArray(srcs) ? srcs : [srcs];
-    const promises = srcs.map(
-      (src) => new Promise((resolve, reject) => {
-        if (loaded.css.has(src)) {
-          return resolve(src);
-        }
-        loaded.css.add(src);
-        const styleLink = dom.create({
-          tag: "link",
-          attrs: {
-            rel: "stylesheet",
-            href: src
-          },
-          action: {
-            load: () => onLoadStylesheet(styleLink, resolve),
-            error: () => reject(new Error(`${(void 0).src} failed to load.`))
-          }
-        });
-        document.head.appendChild(styleLink);
-      })
-    );
-    return Promise.all(promises);
-  };
-  const insertScripts = (srcs) => {
-    srcs = Array.isArray(srcs) ? srcs : [srcs];
-    const promises = srcs.map((src) => insertScript(src));
-    return Promise.all(promises);
-  };
-  const insertStyles = (srcs) => {
-    srcs = Array.isArray(srcs) ? srcs : [srcs];
-    const promises = srcs.map((src) => insertStyle(src));
-    return Promise.all(promises);
-  };
-  const insertIcons = (iconSvgStr) => {
-    let iconSpriteWrap = document.getElementById(formeoSpriteId);
-    if (!iconSpriteWrap) {
-      iconSpriteWrap = dom.create({
-        id: formeoSpriteId,
-        children: iconSvgStr,
-        attrs: {
-          hidden: true,
-          style: "display: none;"
-        }
-      });
-      document.body.insertBefore(iconSpriteWrap, document.body.childNodes[0]);
-    }
-    return iconSpriteWrap;
-  };
-  const fetchIcons = async (iconSpriteUrl = SVG_SPRITE_URL) => {
-    const formeoSprite = document.getElementById(formeoSpriteId);
-    if (formeoSprite) {
-      return;
-    }
-    const parseResp = async (resp) => insertIcons(await resp.text());
-    return ajax(iconSpriteUrl, parseResp, () => ajax(FALLBACK_SVG_SPRITE_URL, parseResp));
-  };
-  const loadPolyfills = (polyfillConfig) => {
-    const polyfills = Array.isArray(polyfillConfig) ? POLYFILLS.filter(({ name: name2 }) => polyfillConfig.indexOf(name2) !== -1) : POLYFILLS;
-    return Promise.all(polyfills.map(({ src }) => insertScript(src)));
-  };
-  const LOADER_MAP = {
-    js: insertScripts,
-    css: insertStyles
-  };
-  const fetchDependencies = (dependencies) => {
-    const promises = Object.entries(dependencies).map(([type, src]) => {
-      return LOADER_MAP[type](src);
-    });
-    return Promise.all(promises);
-  };
-  const isCssLoaded = () => {
-    const formeoSprite = document.getElementById(formeoSpriteId);
-    const computedStyle = window.getComputedStyle(formeoSprite);
-    return computedStyle.visibility === "hidden";
-  };
-  const fetchFormeoStyle = async (cssUrl) => {
-    if (!isCssLoaded()) {
-      await insertStyle(cssUrl);
-      if (!isCssLoaded()) {
-        return await insertStyle(FALLBACK_CSS_URL);
-      }
-    }
-  };
   class Control {
     controlCache = /* @__PURE__ */ new Set();
     /**
@@ -9668,9 +9697,9 @@ Author: Draggable https://draggable.io
      * @return {String} the translated label
      */
     i18n(lookup, args) {
-      const locale = mi18n.locale;
+      const locale2 = mi18n.locale;
       const controlTranslations = this.definition?.i18n;
-      const localeTranslations = controlTranslations?.[locale] || {};
+      const localeTranslations = controlTranslations?.[locale2] || {};
       return (localeTranslations[lookup]?.() ?? localeTranslations[lookup]) || mi18n.get(lookup, args);
     }
   }
@@ -9921,12 +9950,12 @@ Author: Draggable https://draggable.io
         // @todo finish the addGroup method
         addGroup: (group) => console.log(group)
       };
-      for (let i = groups.length - 1; i >= 0; i--) {
-        const storeID = `formeo-controls-${groups[i]}`;
+      for (let i2 = groups.length - 1; i2 >= 0; i2--) {
+        const storeID = `formeo-controls-${groups[i2]}`;
         if (!this.options.sortable) {
           window.localStorage.removeItem(storeID);
         }
-        Sortable.create(groups[i], {
+        Sortable.create(groups[i2], {
           animation: 150,
           forceFallback: true,
           fallbackClass: "control-moving",
@@ -10398,12 +10427,18 @@ Author: Draggable https://draggable.io
     },
     onAdd: () => {
     },
-    onChange: (...args) => defaults$1.onUpdate(...args),
+    onChange: (evt) => events.opts?.debug && console.log(evt),
     onUpdate: (evt) => events.opts?.debug && console.log(evt),
     onUpdateStage: (evt) => events.opts?.debug && console.log(evt),
     onUpdateRow: (evt) => events.opts?.debug && console.log(evt),
     onUpdateColumn: (evt) => events.opts?.debug && console.log(evt),
     onUpdateField: (evt) => events.opts?.debug && console.log(evt),
+    onAddRow: (evt) => events.opts?.debug && console.log(evt),
+    onAddColumn: (evt) => events.opts?.debug && console.log(evt),
+    onAddField: (evt) => events.opts?.debug && console.log(evt),
+    onRemoveRow: (evt) => events.opts?.debug && console.log(evt),
+    onRemoveColumn: (evt) => events.opts?.debug && console.log(evt),
+    onRemoveField: (evt) => events.opts?.debug && console.log(evt),
     onRender: (evt) => events.opts?.debug && console.log(evt),
     onSave: (_evt) => {
     },
@@ -10419,6 +10454,13 @@ Author: Draggable https://draggable.io
       bubbles: events.opts?.debug || events.opts?.bubbles
     });
     evt.data = (src || document).dispatchEvent(evt);
+    if (type === EVENT_FORMEO_UPDATED) {
+      const changedEvt = new window.CustomEvent(EVENT_FORMEO_CHANGED, {
+        detail: evtData,
+        bubbles: events.opts?.debug || events.opts?.bubbles
+      });
+      (src || document).dispatchEvent(changedEvt);
+    }
     return evt;
   };
   const events = {
@@ -10427,50 +10469,82 @@ Author: Draggable https://draggable.io
       return this;
     },
     formeoSaved: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_SAVED),
-    formeoUpdated: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_UPDATED),
+    formeoUpdated: (evt, eventType) => defaultCustomEvent(evt, eventType || EVENT_FORMEO_UPDATED),
     formeoCleared: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_CLEARED),
     formeoOnRender: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_ON_RENDER),
-    formeoConditionUpdated: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_CONDITION_UPDATED)
+    formeoConditionUpdated: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_CONDITION_UPDATED),
+    formeoAddedRow: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_ADDED_ROW),
+    formeoAddedColumn: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_ADDED_COLUMN),
+    formeoAddedField: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_ADDED_FIELD),
+    formeoRemovedRow: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_REMOVED_ROW),
+    formeoRemovedColumn: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_REMOVED_COLUMN),
+    formeoRemovedField: (evt) => defaultCustomEvent(evt, EVENT_FORMEO_REMOVED_FIELD)
   };
   const formeoUpdatedThrottled = throttle$1(() => {
-    events.opts.onUpdate({
+    const eventData = {
       timeStamp: window.performance.now(),
       type: EVENT_FORMEO_UPDATED,
       detail: components.formData
-    });
+    };
+    events.opts.onUpdate(eventData);
+    if (events.opts.onChange !== events.opts.onUpdate) {
+      events.opts.onChange(eventData);
+    }
   }, ANIMATION_SPEED_FAST);
   document.addEventListener(EVENT_FORMEO_UPDATED, formeoUpdatedThrottled);
   document.addEventListener(EVENT_FORMEO_UPDATED_STAGE, (evt) => {
     const { timeStamp, type, detail } = evt;
-    events.opts.onUpdate({
-      timeStamp,
-      type,
-      detail
-    });
+    const eventData = { timeStamp, type, detail };
+    events.opts.onUpdate(eventData);
+    events.opts.onUpdateStage(eventData);
   });
   document.addEventListener(EVENT_FORMEO_UPDATED_ROW, (evt) => {
     const { timeStamp, type, detail } = evt;
-    events.opts.onUpdate({
-      timeStamp,
-      type,
-      detail
-    });
+    const eventData = { timeStamp, type, detail };
+    events.opts.onUpdate(eventData);
+    events.opts.onUpdateRow(eventData);
   });
   document.addEventListener(EVENT_FORMEO_UPDATED_COLUMN, (evt) => {
     const { timeStamp, type, detail } = evt;
-    events.opts.onUpdate({
-      timeStamp,
-      type,
-      detail
-    });
+    const eventData = { timeStamp, type, detail };
+    events.opts.onUpdate(eventData);
+    events.opts.onUpdateColumn(eventData);
   });
   document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, (evt) => {
     const { timeStamp, type, detail } = evt;
-    events.opts.onUpdate({
-      timeStamp,
-      type,
-      detail
-    });
+    const eventData = { timeStamp, type, detail };
+    events.opts.onUpdate(eventData);
+    events.opts.onUpdateField(eventData);
+  });
+  document.addEventListener(EVENT_FORMEO_ADDED_ROW, (evt) => {
+    const { timeStamp, type, detail } = evt;
+    const eventData = { timeStamp, type, detail };
+    events.opts.onAddRow(eventData);
+  });
+  document.addEventListener(EVENT_FORMEO_ADDED_COLUMN, (evt) => {
+    const { timeStamp, type, detail } = evt;
+    const eventData = { timeStamp, type, detail };
+    events.opts.onAddColumn(eventData);
+  });
+  document.addEventListener(EVENT_FORMEO_ADDED_FIELD, (evt) => {
+    const { timeStamp, type, detail } = evt;
+    const eventData = { timeStamp, type, detail };
+    events.opts.onAddField(eventData);
+  });
+  document.addEventListener(EVENT_FORMEO_REMOVED_ROW, (evt) => {
+    const { timeStamp, type, detail } = evt;
+    const eventData = { timeStamp, type, detail };
+    events.opts.onRemoveRow(eventData);
+  });
+  document.addEventListener(EVENT_FORMEO_REMOVED_COLUMN, (evt) => {
+    const { timeStamp, type, detail } = evt;
+    const eventData = { timeStamp, type, detail };
+    events.opts.onRemoveColumn(eventData);
+  });
+  document.addEventListener(EVENT_FORMEO_REMOVED_FIELD, (evt) => {
+    const { timeStamp, type, detail } = evt;
+    const eventData = { timeStamp, type, detail };
+    events.opts.onRemoveField(eventData);
   });
   document.addEventListener(EVENT_FORMEO_ON_RENDER, (evt) => {
     const { timeStamp, type, detail } = evt;
@@ -10602,8 +10676,10 @@ Author: Draggable https://draggable.io
       }
     }
   };
-  const enUS = void 0;
-  mi18n.addLanguage("en-US", enUS);
+  const e = { "en-US": { "en-US": "English", dir: "ltr", "af-ZA": "Afrikaans (South Africa)", "ar-TN": "Arabic (Tunisia)", "cs-CZ": "Czech (Czechia)", "de-DE": "German (Germany)", "es-ES": "European Spanish", "fa-IR": "Persian (Iran)", "fi-FI": "Finnish (Finland)", "fr-FR": "French (France)", "hu-HU": "Hungarian (Hungary)", "it-IT": "Italian (Italy)", "ja-JP": "Japanese (Japan)", "nb-NO": "Norwegian Bokmål (Norway)", "pl-PL": "Polish (Poland)", "pt-BR": "Brazilian Portuguese", "pt-PT": "European Portuguese", "ro-RO": "Romanian (Romania)", "ru-RU": "Russian (Russia)", "th-TH": "Thai (Thailand)", "tr-TR": "Turkish (Türkiye)", "zh-CN": "Chinese (China)", "zh-HK": "Chinese (Hong Kong SAR China)", "action.add.attrs.attr": "What attribute would you like to add?", "action.add.attrs.value": "Default Value", addOption: "Add Option", allFieldsRemoved: "All fields were removed.", allowSelect: "Allow Select", and: "and", attribute: "Attribute", attributeNotPermitted: 'Attribute "{attribute}" is not permitted, please choose another.', attributes: "Attributes", "attrs.class": "Class", "attrs.className": "Class", "attrs.dir": "Direction", "attrs.id": "Id", "attrs.required": "Required", "attrs.style": "Style", "attrs.title": "Title", "attrs.type": "Type", "attrs.value": "Value", autocomplete: "Autocomplete", button: "Button", cannotBeEmpty: "This field cannot be empty", cannotClearFields: "There are no fields to clear", checkbox: "Checkbox", checkboxes: "Checkboxes", class: "Class", clear: "Clear", clearAllMessage: "Are you sure you want to clear all fields?", close: "Close", column: "Column", "condition.target.placeholder": "target", "condition.type.and": "And", "condition.type.if": "If", "condition.type.or": "Or", "condition.type.then": "Then", "condition.value.placeholder": "value", confirmClearAll: "Are you sure you want to remove all fields?", content: "Content", control: "Control", "controlGroups.nextGroup": "Next Group", "controlGroups.prevGroup": "Previous Group", "controls.filteringTerm": 'Filtering "{term}"', "controls.form.button": "Button", "controls.form.checkbox-group": "Checkbox Group", "controls.form.input.date": "Date", "controls.form.input.email": "Email", "controls.form.input.file": "File Upload", "controls.form.input.hidden": "Hidden Input", "controls.form.input.number": "Number", "controls.form.input.text": "Text Input", "controls.form.radio-group": "Radio Group", "controls.form.select": "Select", "controls.form.textarea": "TextArea", "controls.groups.form": "Form Fields", "controls.groups.html": "HTML Elements", "controls.groups.layout": "Layout", "controls.html.divider": "Divider", "controls.html.header": "Header", "controls.html.paragraph": "Paragraph", "controls.layout.column": "Column", "controls.layout.row": "Row", copy: "Copy To Clipboard", danger: "Danger", defineColumnLayout: "Define a column layout", defineColumnWidths: "Define column widths", description: "Help Text", descriptionField: "Description", "editing.row": "Editing Row", editorTitle: "Form Elements", field: "Field", "field.property.invalid": "not valid", "field.property.isChecked": "is checked", "field.property.isNotVisible": "is not visible", "field.property.isVisible": "is visible", "field.property.label": "label", "field.property.valid": "valid", "field.property.value": "value", fieldNonEditable: "This field cannot be edited.", fieldRemoveWarning: "Are you sure you want to remove this field?", fileUpload: "File Upload", formUpdated: "Form Updated", getStarted: "Drag a field from the right to get started.", group: "Group", grouped: "Grouped", hidden: "Hidden Input", hide: "Edit", htmlElements: "HTML Elements", if: "If", "if.condition.source.placeholder": "source", "if.condition.target.placeholder": "target / value", info: "Info", "input.date": "Date", "input.text": "Text", label: "Label", labelCount: "{label} {count}", labelEmpty: "Field Label cannot be empty", "lang.af": "Afrikaans", "lang.ar": "Arabic", "lang.cs": "Czech", "lang.de": "German", "lang.en": "English", "lang.es": "Spanish", "lang.fa": "Persian", "lang.fi": "Finnish", "lang.fr": "French", "lang.hu": "Hungarian", "lang.it": "Italian", "lang.ja": "Japanese", "lang.nb": "Norwegian Bokmål", "lang.pl": "Polish", "lang.pt": "Portuguese", "lang.ro": "Romanian", "lang.ru": "Russian", "lang.th": "Thai", "lang.tr": "Turkish", "lang.zh": "Chinese", layout: "Layout", limitRole: "Limit access to one or more of the following roles:", mandatory: "Mandatory", maxlength: "Max Length", "meta.group": "Group", "meta.icon": "Ico", "meta.label": "Label", minOptionMessage: "This field requires a minimum of 2 options", name: "Name", newOptionLabel: "New {type}", no: "No", number: "Number", off: "Off", on: "On", "operator.contains": "contains", "operator.equals": "equals", "operator.notContains": "not contains", "operator.notEquals": "not equal", "operator.notVisible": "not visible", "operator.visible": "visible", option: "Option", optional: "optional", optionEmpty: "Option value required", optionLabel: "Option {count}", options: "Options", or: "or", order: "Order", "panel.label.attrs": "Attributes", "panel.label.conditions": "Conditions", "panel.label.config": "Configuration", "panel.label.meta": "Meta", "panel.label.options": "Options", "panelEditButtons.attrs": "+ Attribute", "panelEditButtons.conditions": "+ Condition", "panelEditButtons.options": "+ Option", placeholder: "Placeholder", "placeholder.className": "space separated classes", "placeholder.email": "Enter you email", "placeholder.label": "Label", "placeholder.password": "Enter your password", "placeholder.placeholder": "Placeholder", "placeholder.text": "Enter some Text", "placeholder.textarea": "Enter a lot of text", "placeholder.value": "Value", preview: "Preview", primary: "Primary", remove: "Remove", removeMessage: "Remove Element", removeType: "Remove {type}", required: "Required", reset: "Reset", richText: "Rich Text Editor", roles: "Access", row: "Row", "row.makeInputGroup": "Make this row an input group.", "row.makeInputGroupDesc": "Input Groups enable users to add sets of inputs at a time.", "row.settings.fieldsetWrap": "Wrap row in a &lt;fieldset&gt; tag", "row.settings.fieldsetWrap.aria": "Wrap Row in Fieldset", save: "Save", secondary: "Secondary", select: "Select", selectColor: "Select Color", selectionsMessage: "Allow Multiple Selections", selectOptions: "Options", separator: "Separator", settings: "Settings", size: "Size", sizes: "Sizes", "sizes.lg": "Large", "sizes.m": "Default", "sizes.sm": "Small", "sizes.xs": "Extra Small", style: "Style", styles: "Styles", "styles.btn": "Button Style", "styles.btn.danger": "Danger", "styles.btn.default": "Default", "styles.btn.info": "Info", "styles.btn.primary": "Primary", "styles.btn.success": "Success", "styles.btn.warning": "Warning", subtype: "Type", success: "Success", text: "Text Field", then: "Then", "then.condition.target.placeholder": "target", toggle: "Toggle", ungrouped: "Un-Grouped", warning: "Warning", yes: "Yes" } }, i = e["en-US"];
+  const locale = "en-US";
+  mi18n.addLanguage(locale, i);
+  mi18n.setCurrent(locale);
   const defaults = {
     get editor() {
       return {
@@ -10614,8 +10690,8 @@ Author: Draggable https://draggable.io
         sessionStorage: false,
         editorContainer: null,
         // element or selector to attach editor to
-        svgSprite: SVG_SPRITE_URL,
-        // change to null
+        svgSprite: null,
+        // null = use bundled sprite, or provide custom URL
         style: CSS_URL,
         // change to null
         iconFont: null,
@@ -10625,8 +10701,6 @@ Author: Draggable https://draggable.io
         events: {},
         actions: {},
         controls: {},
-        polyfills: isIE(),
-        // loads csspreloadrel
         i18n: {
           location: "https://draggable.github.io/formeo/assets/lang/"
         },
@@ -10635,6 +10709,7 @@ Author: Draggable https://draggable.io
       };
     }
   };
+  new SmartTooltip();
   let FormeoEditor$1 = class FormeoEditor {
     /**
      * @param  {Object} options  formeo options
@@ -10655,7 +10730,6 @@ Author: Draggable https://draggable.io
       this.dom = dom;
       events.init({ debug, ...events$1 });
       actions.init({ debug, sessionStorage: opts.sessionStorage, ...actions$1 });
-      this.tooltip = new SmartTooltip();
       if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", this.loadResources.bind(this));
       } else {
@@ -10669,6 +10743,9 @@ Author: Draggable https://draggable.io
       this.userFormData = cleanFormData(data);
       this.load(this.userFormData, this.opts);
     }
+    loadData(data = {}) {
+      this.formData = data;
+    }
     get json() {
       return this.Components.json;
     }
@@ -10688,17 +10765,15 @@ Author: Draggable https://draggable.io
     async loadResources() {
       document.removeEventListener("DOMContentLoaded", this.loadResources);
       const promises = [];
-      if (this.opts.polyfills) {
-        loadPolyfills(this.opts.polyfills);
-      }
-      await fetchIcons(this.opts.svgSprite);
-      promises.push(fetchFormeoStyle(this.opts.style));
-      promises.push(mi18n.init({ ...this.opts.i18n, locale: window.sessionStorage?.getItem(SESSION_LOCALE_KEY) }));
-      const resolvedPromises = await Promise.all(promises);
+      promises.push(
+        fetchIcons(this.opts.svgSprite),
+        fetchFormeoStyle(this.opts.style),
+        mi18n.init({ ...this.opts.i18n, locale: globalThis.sessionStorage?.getItem(SESSION_LOCALE_KEY) })
+      );
+      await Promise.all(promises);
       if (this.opts.allowEdit) {
         this.init();
       }
-      return resolvedPromises;
     }
     /**
      * Formeo initializer
@@ -10758,7 +10833,7 @@ Author: Draggable https://draggable.io
         dom.empty(this.editorContainer);
         this.editorContainer.appendChild(this.editor);
       }
-      events.formeoLoaded = new window.CustomEvent("formeoLoaded", {
+      events.formeoLoaded = new globalThis.CustomEvent("formeoLoaded", {
         detail: {
           formeo: this
         }
@@ -11014,8 +11089,8 @@ Author: Draggable https://draggable.io
       },
       children: "Add +",
       action: {
-        click: (e) => {
-          const fInputGroup = e.target.parentElement;
+        click: (e2) => {
+          const fInputGroup = e2.target.parentElement;
           const elem = dom.create(this.cloneComponentData(id));
           fInputGroup.insertBefore(elem, fInputGroup.lastChild);
           const removeButton = dom.create(createRemoveButton());
@@ -11248,15 +11323,15 @@ Author: Draggable https://draggable.io
       super(mergedConfig);
     }
   }
-  const generateOptionConfig = ({ type, isMultiple = false, count = 3 }) => Array.from({ length: count }, (_v, k) => k + 1).map((i) => {
+  const generateOptionConfig = ({ type, isMultiple = false, count = 3 }) => Array.from({ length: count }, (_v, k) => k + 1).map((i2) => {
     const selectedKey = type === "checkbox" || isMultiple ? "checked" : "selected";
     return {
       label: mi18n.get("labelCount", {
         label: toTitleCase(type),
-        count: i
+        count: i2
       }),
-      value: `${type}-${i}`,
-      [selectedKey]: !i
+      value: `${type}-${i2}`,
+      [selectedKey]: !i2
     };
   });
   class CheckboxGroupControl extends Control {