formeo 5.0.1 → 5.0.2

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

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.0
+Version: 5.0.1
 Author: Draggable https://draggable.io
 */
 
@@ -436,7 +436,7 @@ Author: Draggable https://draggable.io
     window.SmartTooltip = SmartTooltip;
   }
   const name$1 = "formeo";
-  const version$2 = "5.0.0";
+  const version$2 = "5.0.1";
   const pkg = {
     name: name$1,
     version: version$2
@@ -1208,9 +1208,9 @@ Author: Draggable https://draggable.io
   function require_cloneBuffer() {
     if (hasRequired_cloneBuffer) return _cloneBuffer.exports;
     hasRequired_cloneBuffer = 1;
-    (function(module2, exports3) {
+    (function(module2, exports$1) {
       var root = require_root();
-      var freeExports = exports3 && !exports3.nodeType && exports3;
+      var freeExports = exports$1 && !exports$1.nodeType && exports$1;
       var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
       var moduleExports = freeModule && freeModule.exports === freeExports;
       var Buffer = moduleExports ? root.Buffer : void 0, allocUnsafe = Buffer ? Buffer.allocUnsafe : void 0;
@@ -1456,9 +1456,9 @@ Author: Draggable https://draggable.io
   function requireIsBuffer() {
     if (hasRequiredIsBuffer) return isBuffer.exports;
     hasRequiredIsBuffer = 1;
-    (function(module2, exports3) {
+    (function(module2, exports$1) {
       var root = require_root(), stubFalse = requireStubFalse();
-      var freeExports = exports3 && !exports3.nodeType && exports3;
+      var freeExports = exports$1 && !exports$1.nodeType && exports$1;
       var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
       var moduleExports = freeModule && freeModule.exports === freeExports;
       var Buffer = moduleExports ? root.Buffer : void 0;
@@ -1529,9 +1529,9 @@ Author: Draggable https://draggable.io
   function require_nodeUtil() {
     if (hasRequired_nodeUtil) return _nodeUtil.exports;
     hasRequired_nodeUtil = 1;
-    (function(module2, exports3) {
+    (function(module2, exports$1) {
       var freeGlobal = require_freeGlobal();
-      var freeExports = exports3 && !exports3.nodeType && exports3;
+      var freeExports = exports$1 && !exports$1.nodeType && exports$1;
       var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
       var moduleExports = freeModule && freeModule.exports === freeExports;
       var freeProcess = moduleExports && freeGlobal.process;
@@ -10857,6 +10857,8 @@ Author: Draggable https://draggable.io
     },
     onAdd: () => {
     },
+    onRemove: () => {
+    },
     onChange: (evt) => events.opts?.debug && console.log(evt),
     onUpdate: (evt) => events.opts?.debug && console.log(evt),
     onUpdateStage: (evt) => events.opts?.debug && console.log(evt),
@@ -10949,31 +10951,37 @@ Author: Draggable https://draggable.io
   document.addEventListener(EVENT_FORMEO_ADDED_ROW, (evt) => {
     const { timeStamp, type, detail } = evt;
     const eventData = { timeStamp, type, detail };
+    events.opts.onAdd(eventData);
     events.opts.onAddRow(eventData);
   });
   document.addEventListener(EVENT_FORMEO_ADDED_COLUMN, (evt) => {
     const { timeStamp, type, detail } = evt;
     const eventData = { timeStamp, type, detail };
+    events.opts.onAdd(eventData);
     events.opts.onAddColumn(eventData);
   });
   document.addEventListener(EVENT_FORMEO_ADDED_FIELD, (evt) => {
     const { timeStamp, type, detail } = evt;
     const eventData = { timeStamp, type, detail };
+    events.opts.onAdd(eventData);
     events.opts.onAddField(eventData);
   });
   document.addEventListener(EVENT_FORMEO_REMOVED_ROW, (evt) => {
     const { timeStamp, type, detail } = evt;
     const eventData = { timeStamp, type, detail };
+    events.opts.onRemove(eventData);
     events.opts.onRemoveRow(eventData);
   });
   document.addEventListener(EVENT_FORMEO_REMOVED_COLUMN, (evt) => {
     const { timeStamp, type, detail } = evt;
     const eventData = { timeStamp, type, detail };
+    events.opts.onRemove(eventData);
     events.opts.onRemoveColumn(eventData);
   });
   document.addEventListener(EVENT_FORMEO_REMOVED_FIELD, (evt) => {
     const { timeStamp, type, detail } = evt;
     const eventData = { timeStamp, type, detail };
+    events.opts.onRemove(eventData);
     events.opts.onRemoveField(eventData);
   });
   document.addEventListener(EVENT_FORMEO_ON_RENDER, (evt) => {

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

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

package/dist/demo/assets/js/index.min2.js

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

package/dist/demo/assets/js/index.min3.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.0
+Version: 5.0.1
 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.0
+Version: 5.0.1
 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.0
+Version: 5.0.1
 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.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>
+<!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.1</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.0
+Version: 5.0.1
 Author: Draggable https://draggable.io
 */
 
@@ -434,7 +434,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "5.0.0";
+const version$2 = "5.0.1";
 const pkg = {
   name: name$1,
   version: version$2
@@ -1206,9 +1206,9 @@ var hasRequired_cloneBuffer;
 function require_cloneBuffer() {
   if (hasRequired_cloneBuffer) return _cloneBuffer.exports;
   hasRequired_cloneBuffer = 1;
-  (function(module2, exports2) {
+  (function(module2, exports$1) {
     var root = require_root();
-    var freeExports = exports2 && !exports2.nodeType && exports2;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var Buffer = moduleExports ? root.Buffer : void 0, allocUnsafe = Buffer ? Buffer.allocUnsafe : void 0;
@@ -1454,9 +1454,9 @@ var hasRequiredIsBuffer;
 function requireIsBuffer() {
   if (hasRequiredIsBuffer) return isBuffer.exports;
   hasRequiredIsBuffer = 1;
-  (function(module2, exports2) {
+  (function(module2, exports$1) {
     var root = require_root(), stubFalse = requireStubFalse();
-    var freeExports = exports2 && !exports2.nodeType && exports2;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var Buffer = moduleExports ? root.Buffer : void 0;
@@ -1527,9 +1527,9 @@ var hasRequired_nodeUtil;
 function require_nodeUtil() {
   if (hasRequired_nodeUtil) return _nodeUtil.exports;
   hasRequired_nodeUtil = 1;
-  (function(module2, exports2) {
+  (function(module2, exports$1) {
     var freeGlobal = require_freeGlobal();
-    var freeExports = exports2 && !exports2.nodeType && exports2;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module2 && !module2.nodeType && module2;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var freeProcess = moduleExports && freeGlobal.process;
@@ -10063,12 +10063,12 @@ class Control {
         // will auto navigated between the groups
         focus: ({ target }) => {
           const group = target.closest(`.${CONTROL_GROUP_CLASSNAME}`);
-          return group && Controls$2.panels.nav.refresh(indexOfNode(group));
+          return group && Controls$1.panels.nav.refresh(indexOfNode(group));
         },
         click: ({ target }) => {
           const controlId = target.closest(".field-control")?.id;
           if (controlId) {
-            Controls$2.addElement(controlId);
+            Controls$1.addElement(controlId);
           }
         }
       }
@@ -10130,7 +10130,7 @@ const defaultOptions = Object.freeze({
   container: null,
   panels: { displayType: "slider" }
 });
-let Controls$1 = class Controls {
+let Controls$2 = class Controls {
   constructor() {
     this.data = /* @__PURE__ */ new Map();
     this.buttonActions = {
@@ -10440,11 +10440,11 @@ let Controls$1 = class Controls {
     return Promise.all(this.registerControls([...allControls, ...elements]));
   };
 };
-const Controls$2 = new Controls$1();
+const Controls$1 = new Controls$2();
 const index$7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Controls: Controls$1,
-  default: Controls$2
+  Controls: Controls$2,
+  default: Controls$1
 }, Symbol.toStringTag, { value: "Module" }));
 const checkableTypes = /* @__PURE__ */ new Set(["checkbox", "radio"]);
 const isSelectableType = /* @__PURE__ */ new Set(["radio", "checkbox", "select-one", "select-multiple"]);
@@ -10672,7 +10672,7 @@ let Fields$1 = class Fields extends ComponentData {
   get = (path) => {
     let found = path && get(this.data, path);
     if (!found) {
-      const control = Controls$2.get(path);
+      const control = Controls$1.get(path);
       if (control) {
         found = this.add(null, control.controlData);
       }
@@ -10714,7 +10714,7 @@ const Stages2 = stages;
 const Rows2 = rows;
 const Columns2 = columns;
 const Fields2 = fields;
-const Controls2 = Controls$2;
+const Controls2 = Controls$1;
 const getFormData = (formData, useSessionStorage = false) => {
   if (formData !== void 0 && formData !== null) {
     const parsed = parseData(formData);
@@ -10855,6 +10855,8 @@ const defaults$1 = {
   },
   onAdd: () => {
   },
+  onRemove: () => {
+  },
   onChange: (evt) => events.opts?.debug && console.log(evt),
   onUpdate: (evt) => events.opts?.debug && console.log(evt),
   onUpdateStage: (evt) => events.opts?.debug && console.log(evt),
@@ -10947,31 +10949,37 @@ document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, (evt) => {
 document.addEventListener(EVENT_FORMEO_ADDED_ROW, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddRow(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ADDED_COLUMN, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddColumn(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ADDED_FIELD, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddField(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_ROW, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveRow(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_COLUMN, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveColumn(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_FIELD, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveField(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ON_RENDER, (evt) => {
@@ -11243,7 +11251,7 @@ let FormeoEditor$1 = class FormeoEditor {
       return this.#refreshUI();
     }
     this.#initState = INIT_STATES.INITIALIZING;
-    this.#initPromise = Controls$2.init(this.opts.controls, this.opts.stickyControls).then((controls) => {
+    this.#initPromise = Controls$1.init(this.opts.controls, this.opts.stickyControls).then((controls) => {
       this.controls = controls;
       if (!this.#dataLoadedOnce) {
         this.#loadInitialData();
@@ -11280,7 +11288,7 @@ let FormeoEditor$1 = class FormeoEditor {
    * @return {Promise}
    */
   async #refreshUI() {
-    this.controls = await Controls$2.init(this.opts.controls, this.opts.stickyControls);
+    this.controls = await Controls$1.init(this.opts.controls, this.opts.stickyControls);
     this.render();
     return this;
   }

package/dist/formeo.css

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

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.0.0
+Version: 5.0.1
 Author: Draggable https://draggable.io
 */
 
@@ -432,7 +432,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "5.0.0";
+const version$2 = "5.0.1";
 const pkg = {
   name: name$1,
   version: version$2
@@ -1204,9 +1204,9 @@ var hasRequired_cloneBuffer;
 function require_cloneBuffer() {
   if (hasRequired_cloneBuffer) return _cloneBuffer.exports;
   hasRequired_cloneBuffer = 1;
-  (function(module, exports) {
+  (function(module, exports$1) {
     var root = require_root();
-    var freeExports = exports && !exports.nodeType && exports;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module && !module.nodeType && module;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var Buffer = moduleExports ? root.Buffer : void 0, allocUnsafe = Buffer ? Buffer.allocUnsafe : void 0;
@@ -1452,9 +1452,9 @@ var hasRequiredIsBuffer;
 function requireIsBuffer() {
   if (hasRequiredIsBuffer) return isBuffer.exports;
   hasRequiredIsBuffer = 1;
-  (function(module, exports) {
+  (function(module, exports$1) {
     var root = require_root(), stubFalse = requireStubFalse();
-    var freeExports = exports && !exports.nodeType && exports;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module && !module.nodeType && module;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var Buffer = moduleExports ? root.Buffer : void 0;
@@ -1525,9 +1525,9 @@ var hasRequired_nodeUtil;
 function require_nodeUtil() {
   if (hasRequired_nodeUtil) return _nodeUtil.exports;
   hasRequired_nodeUtil = 1;
-  (function(module, exports) {
+  (function(module, exports$1) {
     var freeGlobal = require_freeGlobal();
-    var freeExports = exports && !exports.nodeType && exports;
+    var freeExports = exports$1 && !exports$1.nodeType && exports$1;
     var freeModule = freeExports && true && module && !module.nodeType && module;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var freeProcess = moduleExports && freeGlobal.process;
@@ -10853,6 +10853,8 @@ const defaults$1 = {
   },
   onAdd: () => {
   },
+  onRemove: () => {
+  },
   onChange: (evt) => events.opts?.debug && console.log(evt),
   onUpdate: (evt) => events.opts?.debug && console.log(evt),
   onUpdateStage: (evt) => events.opts?.debug && console.log(evt),
@@ -10945,31 +10947,37 @@ document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, (evt) => {
 document.addEventListener(EVENT_FORMEO_ADDED_ROW, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddRow(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ADDED_COLUMN, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddColumn(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ADDED_FIELD, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onAdd(eventData);
   events.opts.onAddField(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_ROW, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveRow(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_COLUMN, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveColumn(eventData);
 });
 document.addEventListener(EVENT_FORMEO_REMOVED_FIELD, (evt) => {
   const { timeStamp, type, detail } = evt;
   const eventData = { timeStamp, type, detail };
+  events.opts.onRemove(eventData);
   events.opts.onRemoveField(eventData);
 });
 document.addEventListener(EVENT_FORMEO_ON_RENDER, (evt) => {