formeo 3.0.8 → 3.1.1

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 3.0.7
+Version: 3.1.0
 Author: Draggable https://draggable.io
 */
 
@@ -434,7 +434,7 @@ if (window !== void 0) {
   window.SmartTooltip = SmartTooltip;
 }
 const name$1 = "formeo";
-const version$2 = "3.0.7";
+const version$2 = "3.1.0";
 const type = "module";
 const main = "dist/formeo.cjs.js";
 const module = "dist/formeo.es.js";
@@ -526,6 +526,7 @@ const devDependencies = {
   "@semantic-release/changelog": "^6.0.3",
   "@semantic-release/git": "^10.0.1",
   "@semantic-release/npm": "^12.0.1",
+  "ace-builds": "^1.36.5",
   jsdom: "^25.0.1",
   lefthook: "^1.7.18",
   "npm-run-all": "^2.1.0",
@@ -3049,7 +3050,7 @@ function lastChild(el, selector) {
   }
   return last || null;
 }
-function index(el, selector) {
+function index$6(el, selector) {
   var index2 = 0;
   if (!el || !el.parentNode) {
     return -1;
@@ -3660,8 +3661,8 @@ Sortable.prototype = /** @lends Sortable.prototype */
     if (lastDownEl === target) {
       return;
     }
-    oldIndex = index(target);
-    oldDraggableIndex = index(target, options.draggable);
+    oldIndex = index$6(target);
+    oldDraggableIndex = index$6(target, options.draggable);
     if (typeof filter === "function") {
       if (filter.call(this, evt, target, this)) {
         _dispatchEvent({
@@ -4081,8 +4082,8 @@ Sortable.prototype = /** @lends Sortable.prototype */
       return completedFired = true;
     }
     function changed() {
-      newIndex = index(dragEl);
-      newDraggableIndex = index(dragEl, options.draggable);
+      newIndex = index$6(dragEl);
+      newDraggableIndex = index$6(dragEl, options.draggable);
       _dispatchEvent({
         sortable: _this,
         name: "change",
@@ -4168,7 +4169,7 @@ Sortable.prototype = /** @lends Sortable.prototype */
         direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target);
         var sibling;
         if (direction !== 0) {
-          var dragIndex = index(dragEl);
+          var dragIndex = index$6(dragEl);
           do {
             dragIndex -= direction;
             sibling = parentEl.children[dragIndex];
@@ -4230,14 +4231,14 @@ Sortable.prototype = /** @lends Sortable.prototype */
   },
   _onDrop: function _onDrop(evt) {
     var el = this.el, options = this.options;
-    newIndex = index(dragEl);
-    newDraggableIndex = index(dragEl, options.draggable);
+    newIndex = index$6(dragEl);
+    newDraggableIndex = index$6(dragEl, options.draggable);
     pluginEvent2("drop", this, {
       evt
     });
     parentEl = dragEl && dragEl.parentNode;
-    newIndex = index(dragEl);
-    newDraggableIndex = index(dragEl, options.draggable);
+    newIndex = index$6(dragEl);
+    newDraggableIndex = index$6(dragEl, options.draggable);
     if (Sortable.eventCanceled) {
       this._nulling();
       return;
@@ -4584,7 +4585,7 @@ function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, inv
   return 0;
 }
 function _getInsertDirection(target) {
-  if (index(dragEl) < index(target)) {
+  if (index$6(dragEl) < index$6(target)) {
     return 1;
   } else {
     return -1;
@@ -4632,7 +4633,7 @@ Sortable.utils = {
   closest,
   toggleClass,
   clone,
-  index,
+  index: index$6,
   nextTick: _nextTick,
   cancelNextTick: _cancelNextTick,
   detectDirection: _detectDirection,
@@ -6776,6 +6777,9 @@ class Field extends Component {
    */
   constructor(fieldData = /* @__PURE__ */ Object.create(null)) {
     super("field", { ...DEFAULT_DATA$3(), ...fieldData });
+    __publicField(this, "setData", (path, value) => {
+      return super.set(path, value);
+    });
     /**
      * Updates the conditions panel when linked field data changes
      */
@@ -6961,9 +6965,8 @@ class Field extends Component {
   /**
    * wrapper for Data.set
    */
-  set(...args) {
-    const [path, value] = args;
-    const data = super.set(path, value);
+  set(path, value) {
+    const data = this.setData(path, value);
     this.updatePreview();
     return data;
   }
@@ -7055,7 +7058,10 @@ class Field extends Component {
     const prevData = clone$1(this.data);
     const { action = {} } = Controls$2.get(prevData.config.controlId);
     prevData.id = `prev-${this.id}`;
-    prevData.action = action;
+    prevData.action = Object.entries(action).reduce((acc, [key, value]) => {
+      acc[key] = value.bind(this);
+      return acc;
+    }, {});
     if ((_a = this.data) == null ? void 0 : _a.config.editableContent) {
       prevData.attrs = { ...prevData.attrs, contenteditable: true };
     }
@@ -7267,1008 +7273,578 @@ class Control {
     return (((_b = localeTranslations[lookup]) == null ? void 0 : _b.call(localeTranslations)) ?? localeTranslations[lookup]) || mi18n.get(lookup, args);
   }
 }
-const rowControl = {
-  config: {
-    label: "row"
-  },
-  meta: {
-    group: "layout",
-    icon: "rows",
-    id: "layout-row"
-  }
-};
-const columnControl = {
-  config: {
-    label: "column"
+const defaultOptions = Object.freeze({
+  sortable: true,
+  elementOrder: {},
+  groupOrder: [],
+  groups: [
+    {
+      id: "layout",
+      label: "controls.groups.layout",
+      elementOrder: ["row", "column"]
+    },
+    {
+      id: "common",
+      label: "controls.groups.form",
+      elementOrder: ["button", "checkbox"]
+    },
+    {
+      id: "html",
+      label: "controls.groups.html",
+      elementOrder: ["header", "block-text"]
+    }
+  ],
+  disable: {
+    groups: [],
+    elements: [],
+    formActions: []
   },
-  meta: {
-    group: "layout",
-    icon: "columns",
-    id: "layout-column"
-  }
-};
-const layoutControls = [rowControl, columnControl];
-class HiddenControl extends Control {
+  elements: [],
+  container: null,
+  panels: { displayType: "slider" }
+});
+let Controls$1 = class Controls {
   constructor() {
-    const hiddenInput = {
-      tag: "input",
-      attrs: {
-        type: "hidden",
-        value: ""
-      },
-      config: {
-        label: mi18n.get("hidden"),
-        hideLabel: true
-      },
-      meta: {
-        group: "common",
-        icon: "hidden",
-        id: "hidden"
+    __publicField(this, "groupLabel", (key) => mi18n.get(key) || key || "");
+    __publicField(this, "layoutTypes", {
+      row: () => Stages2.active.addChild(),
+      column: () => this.layoutTypes.row().addChild(),
+      field: (controlData) => this.layoutTypes.column().addChild(controlData)
+    });
+    /**
+     * Append an element to the stage
+     * @param {String} id of elements
+     */
+    __publicField(this, "addElement", (id) => {
+      const {
+        meta: { group, id: metaId },
+        ...elementData
+      } = get(this.get(id), "controlData");
+      set(elementData, "config.controlId", metaId);
+      if (group === "layout") {
+        return this.layoutTypes[metaId.replace("layout-", "")]();
       }
-    };
-    super(hiddenInput);
-  }
-}
-class NumberControl extends Control {
-  constructor() {
-    const numberInput = {
-      tag: "input",
-      attrs: {
-        type: "number",
-        required: false,
-        className: ""
-      },
-      config: {
-        label: mi18n.get("number")
+      return this.layoutTypes.field(elementData);
+    });
+    __publicField(this, "applyOptions", async (controlOptions = {}) => {
+      const { container, elements, groupOrder, ...options } = merge(defaultOptions, controlOptions);
+      this.container = container;
+      this.groupOrder = unique(groupOrder.concat(["common", "html", "layout"]));
+      this.options = options;
+      const [layoutControls, formControls, htmlControls] = await Promise.all([
+        Promise.resolve().then(() => index$5),
+        Promise.resolve().then(() => index$3),
+        Promise.resolve().then(() => index$1)
+      ]);
+      const allControls = [layoutControls.default, formControls.default, htmlControls.default].flat();
+      return Promise.all(this.registerControls([...allControls, ...elements]));
+    });
+    this.data = /* @__PURE__ */ new Map();
+    this.buttonActions = {
+      // this is used for keyboard navigation. when tabbing through controls it
+      // will auto navigated between the groups
+      focus: ({ target }) => {
+        const group = target.closest(`.${CONTROL_GROUP_CLASSNAME}`);
+        return group && this.panels.nav.refresh(indexOfNode(group));
       },
-      meta: {
-        group: "common",
-        icon: "hash",
-        id: "number"
+      click: ({ target }) => {
+        this.addElement(target.parentElement.id);
       }
     };
-    super(numberInput);
   }
-}
-class TextAreaControl extends Control {
-  constructor() {
-    const textAreaConfig = {
-      tag: "textarea",
-      config: {
-        label: mi18n.get("controls.form.textarea")
-      },
-      // This is the beginning of actions being supported for render
-      // editor field actions should be in config.action
-      // action: {
-      //   mousedown: function(evt) {
-      //     let {target} = evt;
-      //     let startHeight = target.style.height;
-      //     const onMouseup = evt => {
-      //       let {target} = evt;
-      //       let endHeight = target.style.height;
-      //       if (startHeight !== endHeight) {
-      //         //eslint-disable-next-line
-      //         let fieldId = closest(target, '.stage-field').id;
-      //         const field = d.fields.get(fieldId).instance;
-      //         field.addAttribute('style', `height: ${endHeight}`);
-      //       }
-      //       target.removeEventListener('mouseup', onMouseup);
-      //     };
-      //     target.addEventListener('mouseup', onMouseup);
-      //   }
-      // },
-      meta: {
-        group: "common",
-        icon: "textarea",
-        id: "textarea"
-      },
-      attrs: {
-        required: false
-      }
-    };
-    super(textAreaConfig);
+  /**
+   * Methods to be called on initialization
+   * @param {Object} controlOptions
+   */
+  async init(controlOptions, sticky = false) {
+    await this.applyOptions(controlOptions);
+    this.buildDOM(sticky);
+    return this;
   }
-}
-class TextControl extends Control {
-  constructor() {
-    const textInput = {
-      tag: "input",
-      attrs: {
-        required: false,
-        type: "text",
-        className: ""
-      },
-      config: {
-        label: mi18n.get("controls.form.input.text")
-      },
-      meta: {
-        group: "common",
-        icon: "text-input",
-        id: "text-input"
+  /**
+   * Generate control config for UI and bind actions
+   * @return {Array} elementControls
+   */
+  registerControls(elements) {
+    this.controls = [];
+    return elements.map(async (Element) => {
+      const isControl = typeof Element === "function";
+      let control;
+      if (isControl) {
+        control = new Element();
+      } else {
+        control = new Control(Element);
       }
-    };
-    super(textInput);
+      this.add(control);
+      this.controls.push(control.dom);
+      return control.promise();
+    });
   }
-}
-class FileControl extends Control {
-  constructor() {
-    const fileInput = {
-      tag: "input",
-      attrs: {
-        type: "file",
-        required: false
-      },
-      config: {
-        label: mi18n.get("fileUpload")
-      },
-      meta: {
-        group: "common",
-        icon: "upload",
-        id: "upload"
+  /**
+   * Group elements into their respective control group
+   * @return {Array} allGroups
+   */
+  groupElements() {
+    let groups = this.options.groups.slice();
+    let elements = this.controls.slice();
+    let allGroups = [];
+    const usedElementIds = [];
+    groups = orderObjectsBy(groups, this.groupOrder, "id");
+    groups = groups.filter((group) => match(group.id, this.options.disable.groups));
+    allGroups = groups.map((group) => {
+      const groupConfig = {
+        tag: "ul",
+        attrs: {
+          className: CONTROL_GROUP_CLASSNAME,
+          id: `${group.id}-${CONTROL_GROUP_CLASSNAME}`
+        },
+        config: {
+          label: this.groupLabel(group.label)
+        }
+      };
+      if (this.options.elementOrder[group.id]) {
+        const userOrder = this.options.elementOrder[group.id];
+        const newOrder = unique(userOrder.concat(group.elementOrder));
+        group.elementOrder = newOrder;
       }
-    };
-    super(fileInput);
+      elements = orderObjectsBy(elements, group.elementOrder, "meta.id");
+      groupConfig.content = elements.filter((control) => {
+        const { controlData: field } = this.get(control.id);
+        const controlId = field.meta.id || "";
+        const filters = [
+          match(controlId, this.options.disable.elements),
+          field.meta.group === group.id,
+          !usedElementIds.includes(controlId)
+        ];
+        let shouldFilter = true;
+        shouldFilter = filters.every((val) => val === true);
+        if (shouldFilter) {
+          usedElementIds.push(controlId);
+        }
+        return shouldFilter;
+      });
+      return groupConfig;
+    });
+    return allGroups;
   }
-}
-const generateOptionConfig = (type2, count = 3) => Array.from({ length: count }, (v, k) => k + 1).map((i) => {
-  const selectedKey = type2 === "checkbox" ? "checked" : "selected";
-  return {
-    label: mi18n.get("labelCount", {
-      label: toTitleCase(type2),
-      count: i
-    }),
-    value: `${type2}-${i}`,
-    [selectedKey]: !i
-  };
-});
-class SelectControl extends Control {
-  constructor() {
-    const selectConfig = {
-      tag: "select",
-      config: {
-        label: mi18n.get("controls.form.select")
-      },
-      attrs: {
-        required: false,
-        className: ""
-      },
-      meta: {
-        group: "common",
-        icon: "select",
-        id: "select"
-      },
-      options: generateOptionConfig("option")
-    };
-    super(selectConfig);
-  }
-}
-class CheckboxGroupControl extends Control {
-  constructor() {
-    const checkboxGroup = {
-      tag: "input",
-      attrs: {
-        type: "checkbox",
-        required: false
-      },
-      config: {
-        label: mi18n.get("controls.form.checkbox-group"),
-        disabledAttrs: ["type"]
-      },
-      meta: {
-        group: "common",
-        icon: "checkbox",
-        id: "checkbox"
-      },
-      options: generateOptionConfig("checkbox", 1)
-    };
-    super(checkboxGroup);
+  add(control = /* @__PURE__ */ Object.create(null)) {
+    const controlConfig = clone$1(control);
+    this.data.set(controlConfig.id, controlConfig);
+    if (controlConfig.controlData.meta.id) {
+      this.data.set(controlConfig.controlData.meta.id, controlConfig.controlData);
+    }
+    return controlConfig;
   }
-}
-class RadioGroupControl extends Control {
-  constructor() {
-    const radioGroup = {
-      tag: "input",
-      attrs: {
-        type: "radio",
-        required: false
-      },
-      config: {
-        label: mi18n.get("controls.form.radio-group"),
-        disabledAttrs: ["type"]
-      },
-      meta: {
-        group: "common",
-        icon: "radio-group",
-        id: "radio"
-      },
-      options: generateOptionConfig("radio")
-    };
-    super(radioGroup);
+  get(controlId) {
+    return clone$1(this.data.get(controlId));
   }
-}
-class ButtonControl extends Control {
-  constructor() {
-    const buttonConfig = {
-      tag: "button",
-      attrs: {
-        className: [{ label: "grouped", value: "f-btn-group" }, { label: "ungrouped", value: "f-field-group" }]
-      },
-      config: {
-        label: mi18n.get("controls.form.button"),
-        hideLabel: true
-      },
-      meta: {
-        group: "common",
-        icon: "button",
-        id: "button"
-      },
-      options: [
-        {
-          label: mi18n.get("button"),
-          type: ["button", "submit", "reset"].map((buttonType) => ({
-            label: buttonType,
-            type: buttonType
-          })),
-          className: [
-            {
-              label: "default",
-              value: "",
-              selected: true
-            },
-            {
-              label: "primary",
-              value: "primary"
-            },
-            {
-              label: "danger",
-              value: "error"
-            },
-            {
-              label: "success",
-              value: "success"
-            },
-            {
-              label: "warning",
-              value: "warning"
-            }
-          ]
+  /**
+   * Generate the DOM config for form actions like settings, save and clear
+   * @return {Object} form action buttons config
+   */
+  formActions() {
+    if (this.options.disable.formActions === true) {
+      return null;
+    }
+    const clearBtn = {
+      ...dom.btnTemplate({ content: [dom.icon("bin"), mi18n.get("clear")], title: mi18n.get("clearAll") }),
+      className: ["clear-form"],
+      action: {
+        click: (evt) => {
+          if (Rows2.size) {
+            events.confirmClearAll = new window.CustomEvent("confirmClearAll", {
+              detail: {
+                confirmationMessage: mi18n.get("confirmClearAll"),
+                clearAllAction: () => {
+                  Stages2.clearAll().then(() => {
+                    const evtData = {
+                      src: evt.target
+                    };
+                    events.formeoCleared(evtData);
+                  });
+                },
+                btnCoords: dom.coords(evt.target)
+              }
+            });
+            document.dispatchEvent(events.confirmClearAll);
+          } else {
+            window.alert(mi18n.get("cannotClearFields"));
+          }
         }
-      ]
-    };
-    super(buttonConfig);
-  }
-}
-class DateControl extends Control {
-  constructor() {
-    const dateInput = {
-      tag: "input",
-      attrs: {
-        type: "date",
-        required: false,
-        className: ""
-      },
-      config: {
-        label: mi18n.get("controls.form.input.date")
-      },
-      meta: {
-        group: "common",
-        icon: "calendar",
-        id: "date-input"
       }
     };
-    super(dateInput);
-  }
-}
-const formControls = [
-  ButtonControl,
-  DateControl,
-  HiddenControl,
-  NumberControl,
-  TextAreaControl,
-  TextControl,
-  FileControl,
-  SelectControl,
-  CheckboxGroupControl,
-  RadioGroupControl
-];
-const headerTags = Array.from(Array(5).keys()).slice(1).map((key) => `h${key}`);
-const headerKey = "controls.html.header";
-class HeaderControl extends Control {
-  constructor() {
-    const header = {
-      tag: headerTags[0],
-      attrs: {
-        tag: headerTags.map((tag, index2) => ({
-          label: tag.toUpperCase(),
-          value: tag,
-          selected: !index2
-        })),
-        className: ""
-      },
-      config: {
-        label: mi18n.get(headerKey),
-        hideLabel: true,
-        editableContent: true
-      },
-      meta: {
-        group: "html",
-        icon: "header",
-        id: "html.header"
-      },
-      content: mi18n.get(headerKey),
+    const saveBtn = {
+      ...dom.btnTemplate({ content: [dom.icon("floppy-disk"), mi18n.get("save")], title: mi18n.get("save") }),
+      className: ["save-form"],
       action: {
-        // onRender: evt => {},
-        // click: evt => {},
+        click: ({ target }) => {
+          const { formData } = components;
+          const saveEvt = {
+            action: () => {
+            },
+            coords: dom.coords(target),
+            message: "",
+            button: target
+          };
+          actions.click.btn(saveEvt);
+          return actions.save.form(formData);
+        }
       }
     };
-    super(header);
-  }
-  /**
-   * class configuration
-   */
-  static get definition() {
-    return {
-      // i18n custom mappings (defaults to camelCase type)
-      i18n: {
-        "en-US": {
-          header: "Custom English Header"
+    const formActions = {
+      className: "form-actions f-btn-group",
+      content: Object.entries({ clearBtn, saveBtn }).reduce((acc, [key, value]) => {
+        if (!this.options.disable.formActions.includes(key)) {
+          acc.push(value);
         }
-      }
+        return acc;
+      }, [])
     };
+    return formActions;
   }
-  get content() {
-    return super.i18n(headerKey);
-  }
-}
-class ParagraphControl extends Control {
-  constructor() {
-    const paragraphConfig = {
-      tag: "p",
-      attrs: {
-        className: ""
-      },
-      config: {
-        label: mi18n.get("controls.html.paragraph"),
-        hideLabel: true,
-        editableContent: true
-      },
-      meta: {
-        group: "html",
-        icon: "paragraph",
-        id: "paragraph"
+  /**
+   * Returns the markup for the form controls/fields
+   * @return {DOM}
+   */
+  buildDOM(sticky) {
+    const groupedFields = this.groupElements();
+    const formActions = this.formActions();
+    const { displayType } = this.options.panels;
+    this.panels = new Panels({ panels: groupedFields, type: "controls", displayType });
+    const groupsWrapClasses = ["control-groups", "formeo-panels-wrap", `panel-count-${groupedFields.length}`];
+    const groupsWrap = dom.create({
+      className: groupsWrapClasses,
+      content: [this.panels.panelNav, this.panels.panelsWrap]
+    });
+    const controlClasses = ["formeo-controls"];
+    if (sticky) {
+      controlClasses.push("formeo-sticky");
+    }
+    const element = dom.create({
+      className: controlClasses,
+      content: [groupsWrap, formActions]
+    });
+    const groups = element.getElementsByClassName("control-group");
+    this.dom = element;
+    this.groups = groups;
+    const [firstGroup] = groups;
+    this.currentGroup = firstGroup;
+    this.actions = {
+      filter: (term) => {
+        const filtering = term !== "";
+        const fields2 = this.controls;
+        let filteredTerm = groupsWrap.querySelector(".filtered-term");
+        dom.toggleElementsByStr(fields2, term);
+        if (filtering) {
+          const filteredStr = mi18n.get("controls.filteringTerm", term);
+          element.classList.add("filtered");
+          if (filteredTerm) {
+            filteredTerm.textContent = filteredStr;
+          } else {
+            filteredTerm = dom.create({
+              tag: "h5",
+              className: "filtered-term",
+              content: filteredStr
+            });
+            groupsWrap.insertBefore(filteredTerm, groupsWrap.firstChild);
+          }
+        } else if (filteredTerm) {
+          element.classList.remove("filtered");
+          filteredTerm.remove();
+        }
       },
-      // eslint-disable-next-line
-      content: "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment."
+      addElement: this.addElement,
+      // @todo finish the addGroup method
+      addGroup: (group) => console.log(group)
     };
-    super(paragraphConfig);
-  }
-}
-class HRControl extends Control {
-  constructor() {
-    const hrConfig = {
-      tag: "hr",
-      config: {
-        label: mi18n.get("controls.html.divider"),
-        hideLabel: true
-      },
-      meta: {
-        group: "html",
-        icon: "divider",
-        id: "divider"
+    for (let i = groups.length - 1; i >= 0; i--) {
+      const storeID = `formeo-controls-${groups[i]}`;
+      if (!this.options.sortable) {
+        window.localStorage.removeItem(storeID);
       }
-    };
-    super(hrConfig);
-  }
-}
-class TinyMCEControl extends Control {
-  constructor(options) {
-    const textAreaConfig = {
-      tag: "textarea",
-      config: {
-        label: "WYSIWYG",
-        editableContent: true
-      },
-      meta: {
-        group: "html",
-        icon: "rich-text",
-        id: "tinymce"
-      },
-      attrs: {
-        required: false
-      },
-      dependencies: { js: "https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.11/tinymce.min.js" },
-      // this action is passed to the rendered control/element
-      // useful for actions and events on the control preview
-      action: {
-        onRender: (elem) => {
-          const selector = `#${elem.id}`;
-          window.tinymce.remove(selector);
-          window.tinymce.init({
-            selector
-          });
-        }
-      },
-      controlAction: {
-        // callback when control is clicked
-        click: () => {
+      Sortable.create(groups[i], {
+        animation: 150,
+        forceFallback: true,
+        fallbackClass: "control-moving",
+        fallbackOnBody: true,
+        group: {
+          name: "controls",
+          pull: "clone",
+          put: false
         },
-        // callback for when control is rendered
-        onRender: () => {
+        onStart: ({ item }) => {
+          const { controlData } = this.get(item.id);
+          if (this.options.ghostPreview) {
+            item.innerHTML = "";
+            item.appendChild(new Field(controlData).preview);
+          }
+        },
+        onEnd: ({ from, item, clone: clone2 }) => {
+          if (from.contains(clone2)) {
+            from.replaceChild(item, clone2);
+          }
+        },
+        sort: this.options.sortable,
+        store: {
+          /**
+           * Get the order of elements.
+           * @param   {Sortable}  sortable
+           * @return {Array}
+           */
+          get: () => {
+            const order = window.localStorage.getItem(storeID);
+            return order ? order.split("|") : [];
+          },
+          /**
+           * Save the order of elements.
+           * @param {Sortable}  sortable
+           */
+          set: (sortable) => {
+            const order = sortable.toArray();
+            window.localStorage.setItem(storeID, order.join("|"));
+          }
         }
-      }
-    };
-    const mergedOptions = merge(textAreaConfig, options);
-    super(mergedOptions);
-  }
-}
-const htmlControls = [HeaderControl, ParagraphControl, HRControl, TinyMCEControl];
-const defaultOptions = Object.freeze({
-  sortable: true,
-  elementOrder: {},
-  groupOrder: [],
-  groups: [
-    {
-      id: "layout",
-      label: "controls.groups.layout",
-      elementOrder: ["row", "column"]
-    },
-    {
-      id: "common",
-      label: "controls.groups.form",
-      elementOrder: ["button", "checkbox"]
-    },
-    {
-      id: "html",
-      label: "controls.groups.html",
-      elementOrder: ["header", "block-text"]
+      });
     }
-  ],
-  disable: {
-    groups: [],
-    elements: [],
-    formActions: []
-  },
-  elements: [],
-  container: null,
-  panels: { displayType: "slider" }
-});
-const defaultElements = [...formControls, ...htmlControls, ...layoutControls];
-let Controls$1 = class Controls {
+    return element;
+  }
+};
+const Controls$2 = new Controls$1();
+class ComponentData extends Data {
   constructor() {
-    __publicField(this, "groupLabel", (key) => mi18n.get(key) || key || "");
-    __publicField(this, "layoutTypes", {
-      row: () => Stages2.active.addChild(),
-      column: () => this.layoutTypes.row().addChild(),
-      field: (controlData) => this.layoutTypes.column().addChild(controlData)
+    super(...arguments);
+    __publicField(this, "load", (dataArg) => {
+      const data = parseData(dataArg);
+      this.empty();
+      for (const [key, val] of Object.entries(data)) {
+        this.add(key, val);
+      }
+      return this.data;
     });
     /**
-     * Append an element to the stage
-     * @param {String} id of elements
+     * Retrieves data from the specified path or adds new data if no path is provided.
+     *
+     * @param {string} [path] - The path to retrieve data from. If not provided, new data will be added.
+     * @returns {*} The data retrieved from the specified path or the result of adding new data.
      */
-    __publicField(this, "addElement", (id) => {
-      const {
-        meta: { group, id: metaId },
-        ...elementData
-      } = get(this.get(id), "controlData");
-      set(elementData, "config.controlId", metaId);
-      if (group === "layout") {
-        return this.layoutTypes[metaId.replace("layout-", "")]();
-      }
-      return this.layoutTypes.field(elementData);
+    __publicField(this, "get", (path) => path ? get(this.data, path) : this.add());
+    /**
+     * Adds a new component with the given id and data.
+     *
+     * @param {string} id - The unique identifier for the component. If not provided, a new UUID will be generated.
+     * @param {Object} [data=Object.create(null)] - The data to initialize the component with.
+     * @returns {Object} The newly created component.
+     */
+    __publicField(this, "add", (id, data = /* @__PURE__ */ Object.create(null)) => {
+      const elemId = id || uuid();
+      const component = this.Component({ ...data, id: elemId });
+      this.set(elemId, component);
+      this.active = component;
+      return component;
     });
-    __publicField(this, "applyOptions", async (controlOptions = {}) => {
-      const { container, elements, groupOrder, ...options } = merge(defaultOptions, controlOptions);
-      this.container = container;
-      this.groupOrder = unique(groupOrder.concat(["common", "html", "layout"]));
-      this.options = options;
-      return Promise.all(this.registerControls([...defaultElements, ...elements]));
-    });
-    this.data = /* @__PURE__ */ new Map();
-    this.buttonActions = {
-      // this is used for keyboard navigation. when tabbing through controls it
-      // will auto navigated between the groups
-      focus: ({ target }) => {
-        const group = target.closest(`.${CONTROL_GROUP_CLASSNAME}`);
-        return group && this.panels.nav.refresh(indexOfNode(group));
-      },
-      click: ({ target }) => {
-        this.addElement(target.parentElement.id);
+    /**
+     * removes a component form the index
+     * @param {String|Array} componentId
+     */
+    __publicField(this, "remove", (componentId) => {
+      if (Array.isArray(componentId)) {
+        for (const id of componentId) {
+          this.get(id).remove();
+        }
+      } else {
+        this.get(componentId).remove();
       }
-    };
+      return this.data;
+    });
+    /**
+     * Deletes a component from the data object.
+     *
+     * @param {string} componentId - The ID of the component to delete.
+     * @returns {string} The ID of the deleted component.
+     */
+    __publicField(this, "delete", (componentId) => {
+      delete this.data[componentId];
+      return componentId;
+    });
+    /**
+     * Clears all instances from the store
+     * @param {Object} evt
+     */
+    __publicField(this, "clearAll", (isAnimated = true) => {
+      const promises = Object.values(this.data).map((component) => component.empty(isAnimated));
+      return Promise.all(promises);
+    });
+    __publicField(this, "conditionMap", /* @__PURE__ */ new Map());
   }
   /**
-   * Methods to be called on initialization
-   * @param {Object} controlOptions
+   * Extends the configVal for a component type,
+   * eventually read by Component
+   * @return {Object} configVal
    */
-  async init(controlOptions, sticky = false) {
-    await this.applyOptions(controlOptions);
-    this.buildDOM(sticky);
-    return this;
+  set config(config2) {
+    this.configVal = merge(this.configVal, clone$1(config2));
   }
   /**
-   * Generate control config for UI and bind actions
-   * @return {Array} elementControls
+   * Reads configVal for a component type
+   * @return {Object} configVal
    */
-  registerControls(elements) {
-    this.controls = [];
-    return elements.map(async (Element) => {
-      const isControl = typeof Element === "function";
-      let control;
-      if (isControl) {
-        control = new Element();
-      } else {
-        control = new Control(Element);
-      }
-      this.add(control);
-      this.controls.push(control.dom);
-      return control.promise();
-    });
+  get config() {
+    return this.configVal;
   }
+}
+const DEFAULT_DATA$2 = () => Object.freeze({ children: [] });
+class Stage extends Component {
   /**
-   * Group elements into their respective control group
-   * @return {Array} allGroups
+   * Process options and load existing fields from data to the stage
+   * @param  {Object} formeoOptions
+   * @param  {String} stageData uuid
+   * @return {Object} DOM element
    */
-  groupElements() {
-    let groups = this.options.groups.slice();
-    let elements = this.controls.slice();
-    let allGroups = [];
-    const usedElementIds = [];
-    groups = orderObjectsBy(groups, this.groupOrder, "id");
-    groups = groups.filter((group) => match(group.id, this.options.disable.groups));
-    allGroups = groups.map((group) => {
-      const groupConfig = {
-        tag: "ul",
-        attrs: {
-          className: CONTROL_GROUP_CLASSNAME,
-          id: `${group.id}-${CONTROL_GROUP_CLASSNAME}`
-        },
-        config: {
-          label: this.groupLabel(group.label)
-        }
-      };
-      if (this.options.elementOrder[group.id]) {
-        const userOrder = this.options.elementOrder[group.id];
-        const newOrder = unique(userOrder.concat(group.elementOrder));
-        group.elementOrder = newOrder;
+  constructor(stageData, render) {
+    super("stage", { ...DEFAULT_DATA$2(), ...stageData }, render);
+    const children = this.createChildWrap();
+    this.dom = dom.create({
+      attrs: {
+        className: [STAGE_CLASSNAME, "empty"],
+        id: this.id
+      },
+      children
+    });
+    Sortable.create(children, {
+      animation: 150,
+      fallbackClass: "row-moving",
+      forceFallback: true,
+      group: {
+        name: "stage",
+        pull: true,
+        put: ["row", "column", "controls"]
+      },
+      sort: true,
+      disabled: false,
+      onAdd: this.onAdd.bind(this),
+      onRemove: this.onRemove.bind(this),
+      onStart: () => {
+        stages.active = this;
+      },
+      onSort: this.onSort.bind(this),
+      draggable: `.${ROW_CLASSNAME}`,
+      handle: ".item-move"
+    });
+  }
+  empty(isAnimated = true) {
+    return new Promise((resolve) => {
+      if (isAnimated) {
+        this.dom.classList.add("removing-all-fields");
+        animate.slideUp(this.dom, ANIMATION_SPEED_BASE, () => {
+          resolve(super.empty(isAnimated));
+          this.dom.classList.remove("removing-all-fields");
+          animate.slideDown(this.dom, ANIMATION_SPEED_BASE);
+        });
+      } else {
+        resolve(super.empty());
       }
-      elements = orderObjectsBy(elements, group.elementOrder, "meta.id");
-      groupConfig.content = elements.filter((control) => {
-        const { controlData: field } = this.get(control.id);
-        const controlId = field.meta.id || "";
-        const filters = [
-          match(controlId, this.options.disable.elements),
-          field.meta.group === group.id,
-          !usedElementIds.includes(controlId)
-        ];
-        let shouldFilter = true;
-        shouldFilter = filters.every((val) => val === true);
-        if (shouldFilter) {
-          usedElementIds.push(controlId);
-        }
-        return shouldFilter;
-      });
-      return groupConfig;
     });
-    return allGroups;
   }
-  add(control = /* @__PURE__ */ Object.create(null)) {
-    const controlConfig = clone$1(control);
-    this.data.set(controlConfig.id, controlConfig);
-    if (controlConfig.controlData.meta.id) {
-      this.data.set(controlConfig.controlData.meta.id, controlConfig.controlData);
+  onAdd(...args) {
+    const component = super.onAdd(...args);
+    if (component && component.name === "column") {
+      component.parent.autoColumnWidths();
     }
-    return controlConfig;
   }
-  get(controlId) {
-    return clone$1(this.data.get(controlId));
+}
+let Stages$1 = class Stages extends ComponentData {
+  constructor(stageData) {
+    super("stages", stageData);
+  }
+  Component(data) {
+    return new Stage(data);
   }
+};
+const stages = new Stages$1();
+const DEFAULT_DATA$1 = () => Object.freeze({
+  config: {
+    fieldset: false,
+    // wrap contents of row in fieldset
+    legend: "",
+    // Legend for fieldset
+    inputGroup: false
+    // is repeatable input-group?
+  },
+  children: [],
+  className: [ROW_CLASSNAME]
+});
+class Row extends Component {
   /**
-   * Generate the DOM config for form actions like settings, save and clear
-   * @return {Object} form action buttons config
+   * Set default and generate dom for row in editor
+   * @param  {String} dataID
+   * @return {Object}
    */
-  formActions() {
-    if (this.options.disable.formActions === true) {
-      return null;
-    }
-    const clearBtn = {
-      ...dom.btnTemplate({ content: [dom.icon("bin"), mi18n.get("clear")], title: mi18n.get("clearAll") }),
-      className: ["clear-form"],
-      action: {
-        click: (evt) => {
-          if (Rows2.size) {
-            events.confirmClearAll = new window.CustomEvent("confirmClearAll", {
-              detail: {
-                confirmationMessage: mi18n.get("confirmClearAll"),
-                clearAllAction: () => {
-                  Stages2.clearAll().then(() => {
-                    const evtData = {
-                      src: evt.target
-                    };
-                    events.formeoCleared(evtData);
-                  });
-                },
-                btnCoords: dom.coords(evt.target)
-              }
-            });
-            document.dispatchEvent(events.confirmClearAll);
-          } else {
-            window.alert(mi18n.get("cannotClearFields"));
-          }
-        }
+  constructor(rowData) {
+    super("row", { ...DEFAULT_DATA$1(), ...rowData });
+    /**
+     * Read columns and generate bootstrap cols
+     * @param {Object} row DOM element
+     */
+    __publicField(this, "autoColumnWidths", () => {
+      const columns2 = this.children;
+      if (!columns2.length) {
+        return;
       }
-    };
-    const saveBtn = {
-      ...dom.btnTemplate({ content: [dom.icon("floppy-disk"), mi18n.get("save")], title: mi18n.get("save") }),
-      className: ["save-form"],
-      action: {
-        click: ({ target }) => {
-          const { formData } = components;
-          const saveEvt = {
-            action: () => {
-            },
-            coords: dom.coords(target),
-            message: "",
-            button: target
-          };
-          actions.click.btn(saveEvt);
-          return actions.save.form(formData);
-        }
-      }
-    };
-    const formActions = {
-      className: "form-actions f-btn-group",
-      content: Object.entries({ clearBtn, saveBtn }).reduce((acc, [key, value]) => {
-        if (!this.options.disable.formActions.includes(key)) {
-          acc.push(value);
-        }
-        return acc;
-      }, [])
-    };
-    return formActions;
-  }
-  /**
-   * Returns the markup for the form controls/fields
-   * @return {DOM}
-   */
-  buildDOM(sticky) {
-    const groupedFields = this.groupElements();
-    const formActions = this.formActions();
-    const { displayType } = this.options.panels;
-    this.panels = new Panels({ panels: groupedFields, type: "controls", displayType });
-    const groupsWrapClasses = ["control-groups", "formeo-panels-wrap", `panel-count-${groupedFields.length}`];
-    const groupsWrap = dom.create({
-      className: groupsWrapClasses,
-      content: [this.panels.panelNav, this.panels.panelsWrap]
-    });
-    const controlClasses = ["formeo-controls"];
-    if (sticky) {
-      controlClasses.push("formeo-sticky");
-    }
-    const element = dom.create({
-      className: controlClasses,
-      content: [groupsWrap, formActions]
-    });
-    const groups = element.getElementsByClassName("control-group");
-    this.dom = element;
-    this.groups = groups;
-    const [firstGroup] = groups;
-    this.currentGroup = firstGroup;
-    this.actions = {
-      filter: (term) => {
-        const filtering = term !== "";
-        const fields2 = this.controls;
-        let filteredTerm = groupsWrap.querySelector(".filtered-term");
-        dom.toggleElementsByStr(fields2, term);
-        if (filtering) {
-          const filteredStr = mi18n.get("controls.filteringTerm", term);
-          element.classList.add("filtered");
-          if (filteredTerm) {
-            filteredTerm.textContent = filteredStr;
-          } else {
-            filteredTerm = dom.create({
-              tag: "h5",
-              className: "filtered-term",
-              content: filteredStr
-            });
-            groupsWrap.insertBefore(filteredTerm, groupsWrap.firstChild);
-          }
-        } else if (filteredTerm) {
-          element.classList.remove("filtered");
-          filteredTerm.remove();
-        }
-      },
-      addElement: this.addElement,
-      // @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]}`;
-      if (!this.options.sortable) {
-        window.localStorage.removeItem(storeID);
-      }
-      Sortable.create(groups[i], {
-        animation: 150,
-        forceFallback: true,
-        fallbackClass: "control-moving",
-        fallbackOnBody: true,
-        group: {
-          name: "controls",
-          pull: "clone",
-          put: false
-        },
-        onStart: ({ item }) => {
-          const { controlData } = this.get(item.id);
-          if (this.options.ghostPreview) {
-            item.innerHTML = "";
-            item.appendChild(new Field(controlData).preview);
-          }
-        },
-        onEnd: ({ from, item, clone: clone2 }) => {
-          if (from.contains(clone2)) {
-            from.replaceChild(item, clone2);
-          }
-        },
-        sort: this.options.sortable,
-        store: {
-          /**
-           * Get the order of elements.
-           * @param   {Sortable}  sortable
-           * @return {Array}
-           */
-          get: () => {
-            const order = window.localStorage.getItem(storeID);
-            return order ? order.split("|") : [];
-          },
-          /**
-           * Save the order of elements.
-           * @param {Sortable}  sortable
-           */
-          set: (sortable) => {
-            const order = sortable.toArray();
-            window.localStorage.setItem(storeID, order.join("|"));
-          }
-        }
-      });
-    }
-    return element;
-  }
-};
-const Controls$2 = new Controls$1();
-class ComponentData extends Data {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "load", (dataArg) => {
-      const data = parseData(dataArg);
-      this.empty();
-      for (const [key, val] of Object.entries(data)) {
-        this.add(key, val);
+      const width = Number.parseFloat((100 / columns2.length).toFixed(1)) / 1;
+      for (const column of columns2) {
+        column.removeClasses(bsColRegExp);
+        const colDom = column.dom;
+        const newColWidth = numToPercent(width);
+        column.set("config.width", newColWidth);
+        colDom.style.width = newColWidth;
+        colDom.dataset.colWidth = newColWidth;
+        const refreshTimeout = setTimeout(() => {
+          clearTimeout(refreshTimeout);
+          column.refreshFieldPanels();
+        }, ANIMATION_SPEED_FAST);
+        document.dispatchEvent(events.columnResized);
       }
-      return this.data;
+      this.updateColumnPreset();
     });
     /**
-     * Retrieves data from the specified path or adds new data if no path is provided.
-     *
-     * @param {string} [path] - The path to retrieve data from. If not provided, new data will be added.
-     * @returns {*} The data retrieved from the specified path or the result of adding new data.
-     */
-    __publicField(this, "get", (path) => path ? get(this.data, path) : this.add());
-    /**
-     * Adds a new component with the given id and data.
-     *
-     * @param {string} id - The unique identifier for the component. If not provided, a new UUID will be generated.
-     * @param {Object} [data=Object.create(null)] - The data to initialize the component with.
-     * @returns {Object} The newly created component.
+     * Updates the column preset <select>
+     * @return {Object} columnPresetConfig
      */
-    __publicField(this, "add", (id, data = /* @__PURE__ */ Object.create(null)) => {
-      const elemId = id || uuid();
-      const component = this.Component({ ...data, id: elemId });
-      this.set(elemId, component);
-      this.active = component;
-      return component;
+    __publicField(this, "updateColumnPreset", () => {
+      this.columnPresetControl.innerHTML = "";
+      const presetOptions = this.getColumnPresetOptions.map(
+        ({ label, ...attrs }) => dom.create({
+          tag: "option",
+          content: label,
+          attrs
+        })
+      );
+      this.columnPresetControl.append(...presetOptions);
     });
     /**
-     * removes a component form the index
-     * @param {String|Array} componentId
+     * Set the widths of columns in a row
+     * @param {Object} row DOM element
+     * @param {String} widths
      */
-    __publicField(this, "remove", (componentId) => {
-      if (Array.isArray(componentId)) {
-        for (const id of componentId) {
-          this.get(id).remove();
-        }
-      } else {
-        this.get(componentId).remove();
+    __publicField(this, "setColumnWidths", (widths) => {
+      if (typeof widths === "string") {
+        widths = widths.split(",");
       }
-      return this.data;
-    });
-    /**
-     * Deletes a component from the data object.
-     *
-     * @param {string} componentId - The ID of the component to delete.
-     * @returns {string} The ID of the deleted component.
-     */
-    __publicField(this, "delete", (componentId) => {
-      delete this.data[componentId];
-      return componentId;
-    });
-    /**
-     * Clears all instances from the store
-     * @param {Object} evt
-     */
-    __publicField(this, "clearAll", (isAnimated = true) => {
-      const promises = Object.values(this.data).map((component) => component.empty(isAnimated));
-      return Promise.all(promises);
+      this.children.forEach((column, i) => {
+        column.setWidth(`${widths[i]}%`);
+        column.refreshFieldPanels();
+      });
     });
-    __publicField(this, "conditionMap", /* @__PURE__ */ new Map());
-  }
-  /**
-   * Extends the configVal for a component type,
-   * eventually read by Component
-   * @return {Object} configVal
-   */
-  set config(config2) {
-    this.configVal = merge(this.configVal, clone$1(config2));
-  }
-  /**
-   * Reads configVal for a component type
-   * @return {Object} configVal
-   */
-  get config() {
-    return this.configVal;
-  }
-}
-const DEFAULT_DATA$2 = () => Object.freeze({ children: [] });
-class Stage extends Component {
-  /**
-   * Process options and load existing fields from data to the stage
-   * @param  {Object} formeoOptions
-   * @param  {String} stageData uuid
-   * @return {Object} DOM element
-   */
-  constructor(stageData, render) {
-    super("stage", { ...DEFAULT_DATA$2(), ...stageData }, render);
     const children = this.createChildWrap();
     this.dom = dom.create({
-      attrs: {
-        className: [STAGE_CLASSNAME, "empty"],
-        id: this.id
+      tag: "li",
+      className: [ROW_CLASSNAME, "empty"],
+      dataset: {
+        hoverTag: mi18n.get("row"),
+        editingHoverTag: mi18n.get("editing.row")
       },
-      children
-    });
-    Sortable.create(children, {
-      animation: 150,
-      fallbackClass: "row-moving",
-      forceFallback: true,
-      group: {
-        name: "stage",
-        pull: true,
-        put: ["row", "column", "controls"]
-      },
-      sort: true,
-      disabled: false,
-      onAdd: this.onAdd.bind(this),
-      onRemove: this.onRemove.bind(this),
-      onStart: () => {
-        stages.active = this;
-      },
-      onSort: this.onSort.bind(this),
-      draggable: `.${ROW_CLASSNAME}`,
-      handle: ".item-move"
-    });
-  }
-  empty(isAnimated = true) {
-    return new Promise((resolve) => {
-      if (isAnimated) {
-        this.dom.classList.add("removing-all-fields");
-        animate.slideUp(this.dom, ANIMATION_SPEED_BASE, () => {
-          resolve(super.empty(isAnimated));
-          this.dom.classList.remove("removing-all-fields");
-          animate.slideDown(this.dom, ANIMATION_SPEED_BASE);
-        });
-      } else {
-        resolve(super.empty());
-      }
-    });
-  }
-  onAdd(...args) {
-    const component = super.onAdd(...args);
-    if (component && component.name === "column") {
-      component.parent.autoColumnWidths();
-    }
-  }
-}
-let Stages$1 = class Stages extends ComponentData {
-  constructor(stageData) {
-    super("stages", stageData);
-  }
-  Component(data) {
-    return new Stage(data);
-  }
-};
-const stages = new Stages$1();
-const DEFAULT_DATA$1 = () => Object.freeze({
-  config: {
-    fieldset: false,
-    // wrap contents of row in fieldset
-    legend: "",
-    // Legend for fieldset
-    inputGroup: false
-    // is repeatable input-group?
-  },
-  children: [],
-  className: [ROW_CLASSNAME]
-});
-class Row extends Component {
-  /**
-   * Set default and generate dom for row in editor
-   * @param  {String} dataID
-   * @return {Object}
-   */
-  constructor(rowData) {
-    super("row", { ...DEFAULT_DATA$1(), ...rowData });
-    /**
-     * Read columns and generate bootstrap cols
-     * @param {Object} row DOM element
-     */
-    __publicField(this, "autoColumnWidths", () => {
-      const columns2 = this.children;
-      if (!columns2.length) {
-        return;
-      }
-      const width = Number.parseFloat((100 / columns2.length).toFixed(1)) / 1;
-      for (const column of columns2) {
-        column.removeClasses(bsColRegExp);
-        const colDom = column.dom;
-        const newColWidth = numToPercent(width);
-        column.set("config.width", newColWidth);
-        colDom.style.width = newColWidth;
-        colDom.dataset.colWidth = newColWidth;
-        const refreshTimeout = setTimeout(() => {
-          clearTimeout(refreshTimeout);
-          column.refreshFieldPanels();
-        }, ANIMATION_SPEED_FAST);
-        document.dispatchEvent(events.columnResized);
-      }
-      this.updateColumnPreset();
-    });
-    /**
-     * Updates the column preset <select>
-     * @return {Object} columnPresetConfig
-     */
-    __publicField(this, "updateColumnPreset", () => {
-      this.columnPresetControl.innerHTML = "";
-      const presetOptions = this.getColumnPresetOptions.map(
-        ({ label, ...attrs }) => dom.create({
-          tag: "option",
-          content: label,
-          attrs
-        })
-      );
-      this.columnPresetControl.append(...presetOptions);
-    });
-    /**
-     * Set the widths of columns in a row
-     * @param {Object} row DOM element
-     * @param {String} widths
-     */
-    __publicField(this, "setColumnWidths", (widths) => {
-      if (typeof widths === "string") {
-        widths = widths.split(",");
-      }
-      this.children.forEach((column, i) => {
-        column.setWidth(`${widths[i]}%`);
-        column.refreshFieldPanels();
-      });
-    });
-    const children = this.createChildWrap();
-    this.dom = dom.create({
-      tag: "li",
-      className: [ROW_CLASSNAME, "empty"],
-      dataset: {
-        hoverTag: mi18n.get("row"),
-        editingHoverTag: mi18n.get("editing.row")
-      },
-      id: this.id,
-      content: [this.getComponentTag(), this.getActionButtons(), this.editWindow, children]
+      id: this.id,
+      content: [this.getComponentTag(), this.getActionButtons(), this.editWindow, children]
     });
     Sortable.create(children, {
       animation: 150,
@@ -9713,7 +9289,7 @@ let FormeoEditor$1 = class FormeoEditor {
     this.opts = opts;
     dom.setOptions = opts;
     components.config = config2;
-    this.userFormData = cleanFormData(userFormData || formData);
+    this.userFormData = userFormData || formData;
     this.Components = components;
     this.dom = dom;
     events.init({ debug, ...events$1 });
@@ -9729,7 +9305,8 @@ let FormeoEditor$1 = class FormeoEditor {
     return this.Components.formData;
   }
   set formData(data = {}) {
-    this.load({ ...this.userFormData, ...data }, this.opts);
+    this.userFormData = cleanFormData(data);
+    this.load(this.userFormData, this.opts);
   }
   get json() {
     return this.Components.json;
@@ -9775,12 +9352,12 @@ let FormeoEditor$1 = class FormeoEditor {
           }, console.error);
         }
       };
-      this.render();
       (_b = (_a = this.opts).onLoad) == null ? void 0 : _b.call(_a, this);
     });
   }
   load(formData = this.userFormData, opts = this.opts) {
-    return this.Components.load(formData, opts);
+    this.Components.load(formData, opts);
+    this.render();
   }
   /**
    * Render the formeo sections
@@ -9943,164 +9520,598 @@ let FormeoRenderer$1 = class FormeoRenderer {
         className: "add-input-group btn pull-right",
         type: "button"
       },
-      children: "Add +",
+      children: "Add +",
+      action: {
+        click: (e) => {
+          const fInputGroup = e.target.parentElement;
+          const elem = dom.render(this.cloneComponentData(id));
+          fInputGroup.insertBefore(elem, fInputGroup.lastChild);
+          elem.appendChild(createRemoveButton());
+        }
+      }
+    }));
+    __publicField(this, "processColumns", (rowId) => {
+      return this.orderChildren("columns", this.form.rows[rowId].children).map(
+        (column) => this.cacheComponent(this.processColumn(column))
+      );
+    });
+    __publicField(this, "processFields", (fieldIds) => this.orderChildren("fields", fieldIds).map(({ id, ...field }) => {
+      var _a, _b;
+      const controlId = ((_a = field.config) == null ? void 0 : _a.controlId) || ((_b = field.meta) == null ? void 0 : _b.id);
+      const { action = {}, dependencies: dependencies2 = {} } = this.elements[controlId] || {};
+      if (dependencies2) {
+        fetchDependencies(dependencies2);
+      }
+      const mergedFieldData = merge({ action }, field);
+      return this.cacheComponent({ ...mergedFieldData, id: this.prefixId(id) });
+    }));
+    /**
+     * Evaulate and execute conditions for fields by creating listeners for input and changes
+     * @return {Array} flattened array of conditions
+     */
+    __publicField(this, "handleComponentCondition", (component, ifRest, thenConditions) => {
+      const listenerEvent = LISTEN_TYPE_MAP(component);
+      if (listenerEvent) {
+        component.addEventListener(
+          listenerEvent,
+          (evt) => {
+            if (this.evaluateCondition(ifRest, evt)) {
+              for (const thenCondition of thenConditions) {
+                this.execResult(thenCondition, evt);
+              }
+            }
+          },
+          false
+        );
+      }
+      const fakeEvt = { target: component };
+      if (this.evaluateCondition(ifRest, fakeEvt)) {
+        for (const thenCondition of thenConditions) {
+          this.execResult(thenCondition, fakeEvt);
+        }
+      }
+    });
+    __publicField(this, "applyConditions", () => {
+      for (const { conditions } of Object.values(this.components)) {
+        if (conditions) {
+          for (const condition of conditions) {
+            const { if: ifConditions, then: thenConditions } = condition;
+            for (const ifCondition of ifConditions) {
+              const { source, ...ifRest } = ifCondition;
+              if (isAddress(source)) {
+                const components2 = this.getComponents(source);
+                for (const component of components2) {
+                  this.handleComponentCondition(component, ifRest, thenConditions);
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    /**
+     * Evaulate conditions
+     */
+    __publicField(this, "evaluateCondition", ({ sourceProperty, targetProperty, comparison, target }, evt) => {
+      var _a;
+      const comparisonMap = {
+        equals: isEqual$1,
+        notEquals: (source, target2) => !isEqual$1(source, target2),
+        contains: (source, target2) => source.includes(target2),
+        notContains: (source, target2) => !source.includes(target2)
+      };
+      const sourceValue = String(evt.target[sourceProperty]);
+      const targetValue = String(isAddress(target) ? this.getComponent(target)[targetProperty] : target);
+      return (_a = comparisonMap[comparison]) == null ? void 0 : _a.call(comparisonMap, sourceValue, targetValue);
+    });
+    __publicField(this, "execResult", ({ assignment, target, targetProperty, value }) => {
+      var _a;
+      const assignMap = {
+        equals: (elem) => {
+          var _a2;
+          const propMap = {
+            value: () => {
+              elem[targetProperty] = value;
+            },
+            isNotVisible: () => {
+              elem.parentElement.setAttribute("hidden", true);
+              elem.required = false;
+            },
+            isVisible: () => {
+              elem.parentElement.removeAttribute("hidden");
+              elem.required = elem._required;
+            }
+          };
+          (_a2 = propMap[targetProperty]) == null ? void 0 : _a2.call(propMap);
+        }
+      };
+      if (isAddress(target)) {
+        const elem = this.getComponent(target);
+        if (elem && elem._required === void 0) {
+          elem._required = elem.required;
+        }
+        (_a = assignMap[assignment]) == null ? void 0 : _a.call(assignMap, elem);
+      }
+    });
+    __publicField(this, "getComponent", (address) => {
+      const componentId = address.slice(address.indexOf(".") + 1);
+      const component = isExternalAddress(address) ? this.external[componentId] : this.renderedForm.querySelector(`#f-${componentId}`);
+      return component;
+    });
+    __publicField(this, "getComponents", (address) => {
+      const components2 = [];
+      const componentId = address.slice(address.indexOf(".") + 1);
+      if (isExternalAddress(address)) {
+        components2.push(this.external[componentId]);
+      } else {
+        components2.push(...this.renderedForm.querySelectorAll(`[name=f-${componentId}]`));
+      }
+      return components2;
+    });
+    const { renderContainer, external, elements, formData } = processOptions(opts);
+    this.container = renderContainer;
+    this.form = cleanFormData(formDataArg || formData);
+    this.external = external;
+    this.dom = dom;
+    this.components = /* @__PURE__ */ Object.create(null);
+    this.elements = elements;
+  }
+  get processedData() {
+    return Object.values(this.form.stages).map((stage) => {
+      stage.children = this.processRows(stage.id);
+      stage.className = STAGE_CLASSNAME;
+      return dom.render(stage);
+    });
+  }
+};
+const LISTEN_TYPE_MAP = (component) => {
+  const typesMap = [
+    ["input", (c) => ["textarea", "text"].includes(c.type)],
+    ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
+  ];
+  const [listenerEvent] = typesMap.find((typeMap) => typeMap[1](component)) || [false];
+  return listenerEvent;
+};
+if (window !== void 0) {
+  window.FormeoEditor = FormeoEditor$1;
+  window.FormeoRenderer = FormeoRenderer$1;
+}
+const FormeoEditor2 = FormeoEditor$1;
+const FormeoRenderer2 = FormeoRenderer$1;
+const rowControl = {
+  config: {
+    label: "row"
+  },
+  meta: {
+    group: "layout",
+    icon: "rows",
+    id: "layout-row"
+  }
+};
+const columnControl = {
+  config: {
+    label: "column"
+  },
+  meta: {
+    group: "layout",
+    icon: "columns",
+    id: "layout-column"
+  }
+};
+const index$4 = [rowControl, columnControl];
+const index$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: index$4
+}, Symbol.toStringTag, { value: "Module" }));
+class HiddenControl extends Control {
+  constructor() {
+    const hiddenInput = {
+      tag: "input",
+      attrs: {
+        type: "hidden",
+        value: ""
+      },
+      config: {
+        label: mi18n.get("hidden"),
+        hideLabel: true
+      },
+      meta: {
+        group: "common",
+        icon: "hidden",
+        id: "hidden"
+      }
+    };
+    super(hiddenInput);
+  }
+}
+class NumberControl extends Control {
+  constructor() {
+    const numberInput = {
+      tag: "input",
+      attrs: {
+        type: "number",
+        required: false,
+        className: ""
+      },
+      config: {
+        label: mi18n.get("number")
+      },
+      meta: {
+        group: "common",
+        icon: "hash",
+        id: "number"
+      }
+    };
+    super(numberInput);
+  }
+}
+class TextAreaControl extends Control {
+  constructor() {
+    const textAreaConfig = {
+      tag: "textarea",
+      config: {
+        label: mi18n.get("controls.form.textarea")
+      },
+      // actions here will be applied to the preview in the editor
+      action: {
+        input: function({ target: { value } }) {
+          var _a;
+          (_a = this.setData) == null ? void 0 : _a.call(this, "value", value);
+        }
+      },
+      meta: {
+        group: "common",
+        icon: "textarea",
+        id: "textarea"
+      },
+      attrs: {
+        required: false
+      }
+    };
+    super(textAreaConfig);
+  }
+}
+class TextControl extends Control {
+  constructor() {
+    const textInput = {
+      tag: "input",
+      attrs: {
+        required: false,
+        type: "text",
+        className: ""
+      },
+      config: {
+        label: mi18n.get("controls.form.input.text")
+      },
+      meta: {
+        group: "common",
+        icon: "text-input",
+        id: "text-input"
+      }
+    };
+    super(textInput);
+  }
+}
+class FileControl extends Control {
+  constructor() {
+    const fileInput = {
+      tag: "input",
+      attrs: {
+        type: "file",
+        required: false
+      },
+      config: {
+        label: mi18n.get("fileUpload")
+      },
+      meta: {
+        group: "common",
+        icon: "upload",
+        id: "upload"
+      }
+    };
+    super(fileInput);
+  }
+}
+const generateOptionConfig = (type2, count = 3) => Array.from({ length: count }, (v, k) => k + 1).map((i) => {
+  const selectedKey = type2 === "checkbox" ? "checked" : "selected";
+  return {
+    label: mi18n.get("labelCount", {
+      label: toTitleCase(type2),
+      count: i
+    }),
+    value: `${type2}-${i}`,
+    [selectedKey]: !i
+  };
+});
+class SelectControl extends Control {
+  constructor() {
+    const selectConfig = {
+      tag: "select",
+      config: {
+        label: mi18n.get("controls.form.select")
+      },
+      attrs: {
+        required: false,
+        className: ""
+      },
+      meta: {
+        group: "common",
+        icon: "select",
+        id: "select"
+      },
+      options: generateOptionConfig("option")
+    };
+    super(selectConfig);
+  }
+}
+class CheckboxGroupControl extends Control {
+  constructor() {
+    const checkboxGroup = {
+      tag: "input",
+      attrs: {
+        type: "checkbox",
+        required: false
+      },
+      config: {
+        label: mi18n.get("controls.form.checkbox-group"),
+        disabledAttrs: ["type"]
+      },
+      meta: {
+        group: "common",
+        icon: "checkbox",
+        id: "checkbox"
+      },
+      options: generateOptionConfig("checkbox", 1)
+    };
+    super(checkboxGroup);
+  }
+}
+class RadioGroupControl extends Control {
+  constructor() {
+    const radioGroup = {
+      tag: "input",
+      attrs: {
+        type: "radio",
+        required: false
+      },
+      config: {
+        label: mi18n.get("controls.form.radio-group"),
+        disabledAttrs: ["type"]
+      },
+      meta: {
+        group: "common",
+        icon: "radio-group",
+        id: "radio"
+      },
+      options: generateOptionConfig("radio")
+    };
+    super(radioGroup);
+  }
+}
+class ButtonControl extends Control {
+  constructor() {
+    const buttonConfig = {
+      tag: "button",
+      attrs: {
+        className: [{ label: "grouped", value: "f-btn-group" }, { label: "ungrouped", value: "f-field-group" }]
+      },
+      config: {
+        label: mi18n.get("controls.form.button"),
+        hideLabel: true
+      },
+      meta: {
+        group: "common",
+        icon: "button",
+        id: "button"
+      },
+      options: [
+        {
+          label: mi18n.get("button"),
+          type: ["button", "submit", "reset"].map((buttonType) => ({
+            label: buttonType,
+            type: buttonType
+          })),
+          className: [
+            {
+              label: "default",
+              value: "",
+              selected: true
+            },
+            {
+              label: "primary",
+              value: "primary"
+            },
+            {
+              label: "danger",
+              value: "error"
+            },
+            {
+              label: "success",
+              value: "success"
+            },
+            {
+              label: "warning",
+              value: "warning"
+            }
+          ]
+        }
+      ]
+    };
+    super(buttonConfig);
+  }
+}
+class DateControl extends Control {
+  constructor() {
+    const dateInput = {
+      tag: "input",
+      attrs: {
+        type: "date",
+        required: false,
+        className: ""
+      },
+      config: {
+        label: mi18n.get("controls.form.input.date")
+      },
+      meta: {
+        group: "common",
+        icon: "calendar",
+        id: "date-input"
+      }
+    };
+    super(dateInput);
+  }
+}
+const index$2 = [
+  ButtonControl,
+  DateControl,
+  HiddenControl,
+  NumberControl,
+  TextAreaControl,
+  TextControl,
+  FileControl,
+  SelectControl,
+  CheckboxGroupControl,
+  RadioGroupControl
+];
+const index$3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: index$2
+}, Symbol.toStringTag, { value: "Module" }));
+const headerTags = Array.from(Array(5).keys()).slice(1).map((key) => `h${key}`);
+const headerKey = "controls.html.header";
+class HeaderControl extends Control {
+  constructor() {
+    const header = {
+      tag: headerTags[0],
+      attrs: {
+        tag: headerTags.map((tag, index2) => ({
+          label: tag.toUpperCase(),
+          value: tag,
+          selected: !index2
+        })),
+        className: ""
+      },
+      config: {
+        label: mi18n.get(headerKey),
+        hideLabel: true,
+        editableContent: true
+      },
+      meta: {
+        group: "html",
+        icon: "header",
+        id: "html.header"
+      },
+      content: mi18n.get(headerKey),
       action: {
-        click: (e) => {
-          const fInputGroup = e.target.parentElement;
-          const elem = dom.render(this.cloneComponentData(id));
-          fInputGroup.insertBefore(elem, fInputGroup.lastChild);
-          elem.appendChild(createRemoveButton());
-        }
-      }
-    }));
-    __publicField(this, "processColumns", (rowId) => {
-      return this.orderChildren("columns", this.form.rows[rowId].children).map(
-        (column) => this.cacheComponent(this.processColumn(column))
-      );
-    });
-    __publicField(this, "processFields", (fieldIds) => this.orderChildren("fields", fieldIds).map(({ id, ...field }) => {
-      var _a, _b;
-      const controlId = ((_a = field.config) == null ? void 0 : _a.controlId) || ((_b = field.meta) == null ? void 0 : _b.id);
-      const { action = {}, dependencies: dependencies2 = {} } = this.elements[controlId] || {};
-      if (dependencies2) {
-        fetchDependencies(dependencies2);
-      }
-      const mergedFieldData = merge({ action }, field);
-      return this.cacheComponent({ ...mergedFieldData, id: this.prefixId(id) });
-    }));
-    /**
-     * Evaulate and execute conditions for fields by creating listeners for input and changes
-     * @return {Array} flattened array of conditions
-     */
-    __publicField(this, "handleComponentCondition", (component, ifRest, thenConditions) => {
-      const listenerEvent = LISTEN_TYPE_MAP(component);
-      if (listenerEvent) {
-        component.addEventListener(
-          listenerEvent,
-          (evt) => {
-            if (this.evaluateCondition(ifRest, evt)) {
-              for (const thenCondition of thenConditions) {
-                this.execResult(thenCondition, evt);
-              }
-            }
-          },
-          false
-        );
+        // onRender: evt => {},
+        // click: evt => {},
       }
-      const fakeEvt = { target: component };
-      if (this.evaluateCondition(ifRest, fakeEvt)) {
-        for (const thenCondition of thenConditions) {
-          this.execResult(thenCondition, fakeEvt);
+    };
+    super(header);
+  }
+  /**
+   * class configuration
+   */
+  static get definition() {
+    return {
+      // i18n custom mappings (defaults to camelCase type)
+      i18n: {
+        "en-US": {
+          header: "Custom English Header"
         }
       }
-    });
-    __publicField(this, "applyConditions", () => {
-      for (const { conditions } of Object.values(this.components)) {
-        if (conditions) {
-          for (const condition of conditions) {
-            const { if: ifConditions, then: thenConditions } = condition;
-            for (const ifCondition of ifConditions) {
-              const { source, ...ifRest } = ifCondition;
-              if (isAddress(source)) {
-                const components2 = this.getComponents(source);
-                for (const component of components2) {
-                  this.handleComponentCondition(component, ifRest, thenConditions);
-                }
-              }
-            }
-          }
-        }
+    };
+  }
+  get content() {
+    return super.i18n(headerKey);
+  }
+}
+class ParagraphControl extends Control {
+  constructor() {
+    const paragraphConfig = {
+      tag: "p",
+      attrs: {
+        className: ""
+      },
+      config: {
+        label: mi18n.get("controls.html.paragraph"),
+        hideLabel: true,
+        editableContent: true
+      },
+      meta: {
+        group: "html",
+        icon: "paragraph",
+        id: "paragraph"
+      },
+      // eslint-disable-next-line
+      content: "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment."
+    };
+    super(paragraphConfig);
+  }
+}
+class HRControl extends Control {
+  constructor() {
+    const hrConfig = {
+      tag: "hr",
+      config: {
+        label: mi18n.get("controls.html.divider"),
+        hideLabel: true
+      },
+      meta: {
+        group: "html",
+        icon: "divider",
+        id: "divider"
       }
-    });
-    /**
-     * Evaulate conditions
-     */
-    __publicField(this, "evaluateCondition", ({ sourceProperty, targetProperty, comparison, target }, evt) => {
-      var _a;
-      const comparisonMap = {
-        equals: isEqual$1,
-        notEquals: (source, target2) => !isEqual$1(source, target2),
-        contains: (source, target2) => source.includes(target2),
-        notContains: (source, target2) => !source.includes(target2)
-      };
-      const sourceValue = String(evt.target[sourceProperty]);
-      const targetValue = String(isAddress(target) ? this.getComponent(target)[targetProperty] : target);
-      return (_a = comparisonMap[comparison]) == null ? void 0 : _a.call(comparisonMap, sourceValue, targetValue);
-    });
-    __publicField(this, "execResult", ({ assignment, target, targetProperty, value }) => {
-      var _a;
-      const assignMap = {
-        equals: (elem) => {
-          var _a2;
-          const propMap = {
-            value: () => {
-              elem[targetProperty] = value;
-            },
-            isNotVisible: () => {
-              elem.parentElement.setAttribute("hidden", true);
-              elem.required = false;
-            },
-            isVisible: () => {
-              elem.parentElement.removeAttribute("hidden");
-              elem.required = elem._required;
-            }
-          };
-          (_a2 = propMap[targetProperty]) == null ? void 0 : _a2.call(propMap);
+    };
+    super(hrConfig);
+  }
+}
+class TinyMCEControl extends Control {
+  constructor(options) {
+    const textAreaConfig = {
+      tag: "textarea",
+      config: {
+        label: "WYSIWYG",
+        editableContent: true
+      },
+      meta: {
+        group: "html",
+        icon: "rich-text",
+        id: "tinymce"
+      },
+      attrs: {
+        required: false
+      },
+      dependencies: { js: "https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.11/tinymce.min.js" },
+      // this action is passed to the rendered control/element
+      // useful for actions and events on the control preview
+      action: {
+        onRender: (elem) => {
+          const selector = `#${elem.id}`;
+          window.tinymce.remove(selector);
+          window.tinymce.init({
+            selector
+          });
         }
-      };
-      if (isAddress(target)) {
-        const elem = this.getComponent(target);
-        if (elem && elem._required === void 0) {
-          elem._required = elem.required;
+      },
+      controlAction: {
+        // callback when control is clicked
+        click: () => {
+        },
+        // callback for when control is rendered
+        onRender: () => {
         }
-        (_a = assignMap[assignment]) == null ? void 0 : _a.call(assignMap, elem);
-      }
-    });
-    __publicField(this, "getComponent", (address) => {
-      const componentId = address.slice(address.indexOf(".") + 1);
-      const component = isExternalAddress(address) ? this.external[componentId] : this.renderedForm.querySelector(`#f-${componentId}`);
-      return component;
-    });
-    __publicField(this, "getComponents", (address) => {
-      const components2 = [];
-      const componentId = address.slice(address.indexOf(".") + 1);
-      if (isExternalAddress(address)) {
-        components2.push(this.external[componentId]);
-      } else {
-        components2.push(...this.renderedForm.querySelectorAll(`[name=f-${componentId}]`));
       }
-      return components2;
-    });
-    const { renderContainer, external, elements, formData } = processOptions(opts);
-    this.container = renderContainer;
-    this.form = cleanFormData(formDataArg || formData);
-    this.external = external;
-    this.dom = dom;
-    this.components = /* @__PURE__ */ Object.create(null);
-    this.elements = elements;
-  }
-  get processedData() {
-    return Object.values(this.form.stages).map((stage) => {
-      stage.children = this.processRows(stage.id);
-      stage.className = STAGE_CLASSNAME;
-      return dom.render(stage);
-    });
+    };
+    const mergedOptions = merge(textAreaConfig, options);
+    super(mergedOptions);
   }
-};
-const LISTEN_TYPE_MAP = (component) => {
-  const typesMap = [
-    ["input", (c) => ["textarea", "text"].includes(c.type)],
-    ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]
-  ];
-  const [listenerEvent] = typesMap.find((typeMap) => typeMap[1](component)) || [false];
-  return listenerEvent;
-};
-if (window !== void 0) {
-  window.FormeoEditor = FormeoEditor$1;
-  window.FormeoRenderer = FormeoRenderer$1;
 }
-const FormeoEditor2 = FormeoEditor$1;
-const FormeoRenderer2 = FormeoRenderer$1;
+const index = [HeaderControl, ParagraphControl, HRControl, TinyMCEControl];
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
 export {
   FormeoEditor2 as FormeoEditor,
   FormeoRenderer2 as FormeoRenderer