@bpmn-io/form-js-playground 0.9.7 → 0.9.9

package/dist/form-playground.umd.js

@@ -377,128 +377,45 @@
    */
 
   var proto = typeof Element !== 'undefined' ? Element.prototype : {};
-  var vendor = proto.matches || proto.matchesSelector || proto.webkitMatchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector;
-  var matchesSelector = match;
-  /**
-   * Match `el` to `selector`.
-   *
-   * @param {Element} el
-   * @param {String} selector
-   * @return {Boolean}
-   * @api public
-   */
-
-  function match(el, selector) {
-    if (!el || el.nodeType !== 1) return false;
-    if (vendor) return vendor.call(el, selector);
-    var nodes = el.parentNode.querySelectorAll(selector);
-
-    for (var i = 0; i < nodes.length; i++) {
-      if (nodes[i] == el) return true;
-    }
-
-    return false;
-  }
-  /**
-   * Closest
-   *
-   * @param {Element} el
-   * @param {String} selector
-   * @param {Boolean} checkYourSelf (optional)
-   */
-
-
-  function closest(element, selector, checkYourSelf) {
-    var currentElem = checkYourSelf ? element : element.parentNode;
-
-    while (currentElem && currentElem.nodeType !== document.DOCUMENT_NODE && currentElem.nodeType !== document.DOCUMENT_FRAGMENT_NODE) {
-      if (matchesSelector(currentElem, selector)) {
-        return currentElem;
-      }
-
-      currentElem = currentElem.parentNode;
-    }
-
-    return matchesSelector(currentElem, selector) ? currentElem : null;
-  }
-
-  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
-      unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
-      prefix = bind$1 !== 'addEventListener' ? 'on' : '';
-  /**
-   * Bind `el` event `type` to `fn`.
-   *
-   * @param {Element} el
-   * @param {String} type
-   * @param {Function} fn
-   * @param {Boolean} capture
-   * @return {Function}
-   * @api public
-   */
-
-  var bind_1 = function (el, type, fn, capture) {
-    el[bind$1](prefix + type, fn, capture || false);
-    return fn;
-  };
-  /**
-   * Unbind `el` event `type`'s callback `fn`.
-   *
-   * @param {Element} el
-   * @param {String} type
-   * @param {Function} fn
-   * @param {Boolean} capture
-   * @return {Function}
-   * @api public
-   */
-
-
-  var unbind_1 = function (el, type, fn, capture) {
-    el[unbind](prefix + type, fn, capture || false);
-    return fn;
-  };
-
-  var componentEvent = {
-    bind: bind_1,
-    unbind: unbind_1
-  };
+  proto.matches || proto.matchesSelector || proto.webkitMatchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector;
   /**
    * Expose `parse`.
    */
 
-  var domify = parse;
+  var domify$2 = parse$1;
   /**
    * Tests for browser support.
    */
 
-  var innerHTMLBug = false;
-  var bugTestDiv;
+  var innerHTMLBug$1 = false;
+  var bugTestDiv$1;
 
   if (typeof document !== 'undefined') {
-    bugTestDiv = document.createElement('div'); // Setup
+    bugTestDiv$1 = document.createElement('div'); // Setup
 
-    bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>'; // Make sure that link elements get serialized correctly by innerHTML
+    bugTestDiv$1.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>'; // Make sure that link elements get serialized correctly by innerHTML
     // This requires a wrapper element in IE
 
-    innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
-    bugTestDiv = undefined;
+    innerHTMLBug$1 = !bugTestDiv$1.getElementsByTagName('link').length;
+    bugTestDiv$1 = undefined;
   }
   /**
    * Wrap map from jquery.
    */
 
 
-  var map$1 = {
+  var map$1$1 = {
     legend: [1, '<fieldset>', '</fieldset>'],
     tr: [2, '<table><tbody>', '</tbody></table>'],
     col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
     // for script/link/style tags to work in IE6-8, you have to wrap
     // in a div with a non-whitespace character in front, ha!
-    _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+    _default: innerHTMLBug$1 ? [1, 'X<div>', '</div>'] : [0, '', '']
   };
-  map$1.td = map$1.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
-  map$1.option = map$1.optgroup = [1, '<select multiple="multiple">', '</select>'];
-  map$1.thead = map$1.tbody = map$1.colgroup = map$1.caption = map$1.tfoot = [1, '<table>', '</table>'];
-  map$1.polyline = map$1.ellipse = map$1.polygon = map$1.circle = map$1.text = map$1.line = map$1.path = map$1.rect = map$1.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">', '</svg>'];
+  map$1$1.td = map$1$1.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+  map$1$1.option = map$1$1.optgroup = [1, '<select multiple="multiple">', '</select>'];
+  map$1$1.thead = map$1$1.tbody = map$1$1.colgroup = map$1$1.caption = map$1$1.tfoot = [1, '<table>', '</table>'];
+  map$1$1.polyline = map$1$1.ellipse = map$1$1.polygon = map$1$1.circle = map$1$1.text = map$1$1.line = map$1$1.path = map$1$1.rect = map$1$1.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">', '</svg>'];
   /**
    * Parse `html` and return a DOM Node instance, which could be a TextNode,
    * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
@@ -510,7 +427,7 @@
    * @api private
    */
 
-  function parse(html, doc) {
+  function parse$1(html, doc) {
     if ('string' != typeof html) throw new TypeError('String expected'); // default to the global `document` object
 
     if (!doc) doc = document; // tag name
@@ -528,7 +445,7 @@
     } // wrap map
 
 
-    var wrap = map$1[tag] || map$1._default;
+    var wrap = map$1$1[tag] || map$1$1._default;
     var depth = wrap[0];
     var prefix = wrap[1];
     var suffix = wrap[2];
@@ -552,11 +469,6 @@
     return fragment;
   }
 
-  function query(selector, el) {
-    el = el || document;
-    return el.querySelector(selector);
-  }
-
   var OVERLAY_HTML = '<div class="drop-overlay">' + '<div class="box">' + '<div class="label">{label}</div>' + '</div>' + '</div>';
   /**
    * Add file drop functionality to the given element,
@@ -736,7 +648,7 @@
 
   function createOverlay(label) {
     var markup = OVERLAY_HTML.replace('{label}', label);
-    return domify(markup);
+    return domify$2(markup);
   }
 
   function preventDrop(event) {
@@ -1349,54 +1261,40 @@
    * @return {Array<?>}
    */
 
-  var nativeToString = Object.prototype.toString;
-  var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+  const nativeToString$1 = Object.prototype.toString;
+  const nativeHasOwnProperty$1 = Object.prototype.hasOwnProperty;
 
-  function isUndefined(obj) {
+  function isUndefined$1(obj) {
     return obj === undefined;
   }
 
-  function isDefined(obj) {
+  function isDefined$1(obj) {
     return obj !== undefined;
   }
 
-  function isNil(obj) {
+  function isNil$1(obj) {
     return obj == null;
   }
 
-  function isArray$1(obj) {
-    return nativeToString.call(obj) === '[object Array]';
+  function isArray$2(obj) {
+    return nativeToString$1.call(obj) === '[object Array]';
   }
 
-  function isObject(obj) {
-    return nativeToString.call(obj) === '[object Object]';
+  function isObject$1(obj) {
+    return nativeToString$1.call(obj) === '[object Object]';
   }
 
-  function isNumber(obj) {
-    return nativeToString.call(obj) === '[object Number]';
+  function isNumber$1(obj) {
+    return nativeToString$1.call(obj) === '[object Number]';
   }
 
-  function isFunction(obj) {
-    var tag = nativeToString.call(obj);
+  function isFunction$1(obj) {
+    const tag = nativeToString$1.call(obj);
     return tag === '[object Function]' || tag === '[object AsyncFunction]' || tag === '[object GeneratorFunction]' || tag === '[object AsyncGeneratorFunction]' || tag === '[object Proxy]';
   }
 
-  function isString(obj) {
-    return nativeToString.call(obj) === '[object String]';
-  }
-  /**
-   * Ensure collection is an array.
-   *
-   * @param {Object} obj
-   */
-
-
-  function ensureArray(obj) {
-    if (isArray$1(obj)) {
-      return;
-    }
-
-    throw new Error('must supply array');
+  function isString$1(obj) {
+    return nativeToString$1.call(obj) === '[object String]';
   }
   /**
    * Return true, if target owns a property with the given key.
@@ -1408,29 +1306,8 @@
    */
 
 
-  function has(target, key) {
-    return nativeHasOwnProperty.call(target, key);
-  }
-  /**
-   * Find element in collection.
-   *
-   * @param  {Array|Object} collection
-   * @param  {Function|Object} matcher
-   *
-   * @return {Object}
-   */
-
-
-  function find$3(collection, matcher) {
-    matcher = toMatcher(matcher);
-    var match;
-    forEach(collection, function (val, key) {
-      if (matcher(val, key)) {
-        match = val;
-        return false;
-      }
-    });
-    return match;
+  function has$1(target, key) {
+    return nativeHasOwnProperty$1.call(target, key);
   }
   /**
    * Iterate over collection; returning something
@@ -1443,17 +1320,17 @@
    */
 
 
-  function forEach(collection, iterator) {
-    var val, result;
+  function forEach$1(collection, iterator) {
+    let val, result;
 
-    if (isUndefined(collection)) {
+    if (isUndefined$1(collection)) {
       return;
     }
 
-    var convertKey = isArray$1(collection) ? toNum : identity;
+    const convertKey = isArray$2(collection) ? toNum$1 : identity$1;
 
-    for (var key in collection) {
-      if (has(collection, key)) {
+    for (let key in collection) {
+      if (has$1(collection, key)) {
         val = collection[key];
         result = iterator(val, convertKey(key));
 
@@ -1463,213 +1340,14 @@
       }
     }
   }
-  /**
-   * Return collection without element.
-   *
-   * @param  {Array} arr
-   * @param  {Function} matcher
-   *
-   * @return {Array}
-   */
-
-
-  function without(arr, matcher) {
-    if (isUndefined(arr)) {
-      return [];
-    }
-
-    ensureArray(arr);
-    matcher = toMatcher(matcher);
-    return arr.filter(function (el, idx) {
-      return !matcher(el, idx);
-    });
-  }
-  /**
-   * Transform a collection into another collection
-   * by piping each member through the given fn.
-   *
-   * @param  {Object|Array}   collection
-   * @param  {Function} fn
-   *
-   * @return {Array} transformed collection
-   */
-
 
-  function map(collection, fn) {
-    var result = [];
-    forEach(collection, function (val, key) {
-      result.push(fn(val, key));
-    });
-    return result;
-  }
-  /**
-   * Group collection members by attribute.
-   *
-   * @param  {Object|Array} collection
-   * @param  {Function} extractor
-   *
-   * @return {Object} map with { attrValue => [ a, b, c ] }
-   */
-
-
-  function groupBy(collection, extractor) {
-    var grouped = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    extractor = toExtractor(extractor);
-    forEach(collection, function (val) {
-      var discriminator = extractor(val) || '_';
-      var group = grouped[discriminator];
-
-      if (!group) {
-        group = grouped[discriminator] = [];
-      }
-
-      group.push(val);
-    });
-    return grouped;
-  }
-
-  function uniqueBy(extractor) {
-    extractor = toExtractor(extractor);
-    var grouped = {};
-
-    for (var _len = arguments.length, collections = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      collections[_key - 1] = arguments[_key];
-    }
-
-    forEach(collections, function (c) {
-      return groupBy(c, extractor, grouped);
-    });
-    var result = map(grouped, function (val, key) {
-      return val[0];
-    });
-    return result;
-  }
-  /**
-   * Sort collection by criteria.
-   *
-   * @param  {Object|Array} collection
-   * @param  {String|Function} extractor
-   *
-   * @return {Array}
-   */
-
-  function sortBy(collection, extractor) {
-    extractor = toExtractor(extractor);
-    var sorted = [];
-    forEach(collection, function (value, key) {
-      var disc = extractor(value, key);
-      var entry = {
-        d: disc,
-        v: value
-      };
-
-      for (var idx = 0; idx < sorted.length; idx++) {
-        var d = sorted[idx].d;
-
-        if (disc < d) {
-          sorted.splice(idx, 0, entry);
-          return;
-        }
-      } // not inserted, append (!)
-
-
-      sorted.push(entry);
-    });
-    return map(sorted, function (e) {
-      return e.v;
-    });
-  }
-
-  function toExtractor(extractor) {
-    return isFunction(extractor) ? extractor : function (e) {
-      return e[extractor];
-    };
-  }
-
-  function toMatcher(matcher) {
-    return isFunction(matcher) ? matcher : function (e) {
-      return e === matcher;
-    };
-  }
-
-  function identity(arg) {
+  function identity$1(arg) {
     return arg;
   }
 
-  function toNum(arg) {
+  function toNum$1(arg) {
     return Number(arg);
   }
-  /**
-   * Debounce fn, calling it only once if the given time
-   * elapsed between calls.
-   *
-   * Lodash-style the function exposes methods to `#clear`
-   * and `#flush` to control internal behavior.
-   *
-   * @param  {Function} fn
-   * @param  {Number} timeout
-   *
-   * @return {Function} debounced function
-   */
-
-
-  function debounce$2(fn, timeout) {
-    var timer;
-    var lastArgs;
-    var lastThis;
-    var lastNow;
-
-    function fire(force) {
-      var now = Date.now();
-      var scheduledDiff = force ? 0 : lastNow + timeout - now;
-
-      if (scheduledDiff > 0) {
-        return schedule(scheduledDiff);
-      }
-
-      fn.apply(lastThis, lastArgs);
-      clear();
-    }
-
-    function schedule(timeout) {
-      timer = setTimeout(fire, timeout);
-    }
-
-    function clear() {
-      if (timer) {
-        clearTimeout(timer);
-      }
-
-      timer = lastNow = lastArgs = lastThis = undefined;
-    }
-
-    function flush() {
-      if (timer) {
-        fire(true);
-      }
-
-      clear();
-    }
-
-    function callback() {
-      lastNow = Date.now();
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      lastArgs = args;
-      lastThis = this; // ensure an execution is scheduled
-
-      if (!timer) {
-        schedule(timeout);
-      }
-    }
-
-    callback.flush = flush;
-    callback.cancel = clear;
-    return callback;
-  }
   /**
    * Bind function against target <this>.
    *
@@ -1680,43 +1358,9 @@
    */
 
 
-  function bind(fn, target) {
+  function bind$2(fn, target) {
     return fn.bind(target);
   }
-
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
-  }
-
-  function _extends$d() {
-    _extends$d = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-    return _extends$d.apply(this, arguments);
-  }
   /**
    * Convenience wrapper for `Object.assign`.
    *
@@ -1727,12 +1371,8 @@
    */
 
 
-  function assign(target) {
-    for (var _len = arguments.length, others = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      others[_key - 1] = arguments[_key];
-    }
-
-    return _extends$d.apply(void 0, [target].concat(others));
+  function assign$1(target, ...others) {
+    return Object.assign(target, ...others);
   }
   /**
    * Sets a nested property of a given object to the specified value.
@@ -1745,11 +1385,11 @@
    */
 
 
-  function set(target, path, value) {
-    var currentTarget = target;
-    forEach(path, function (key, idx) {
+  function set$1(target, path, value) {
+    let currentTarget = target;
+    forEach$1(path, function (key, idx) {
       if (typeof key !== 'number' && typeof key !== 'string') {
-        throw new Error('illegal key type: ' + _typeof(key) + '. Key should be of type number or string.');
+        throw new Error('illegal key type: ' + typeof key + '. Key should be of type number or string.');
       }
 
       if (key === 'constructor') {
@@ -1760,15 +1400,15 @@
         throw new Error('illegal key: __proto__');
       }
 
-      var nextKey = path[idx + 1];
-      var nextTarget = currentTarget[key];
+      let nextKey = path[idx + 1];
+      let nextTarget = currentTarget[key];
 
-      if (isDefined(nextKey) && isNil(nextTarget)) {
+      if (isDefined$1(nextKey) && isNil$1(nextTarget)) {
         nextTarget = currentTarget[key] = isNaN(+nextKey) ? {} : [];
       }
 
-      if (isUndefined(nextKey)) {
-        if (isUndefined(value)) {
+      if (isUndefined$1(nextKey)) {
+        if (isUndefined$1(value)) {
           delete currentTarget[key];
         } else {
           currentTarget[key] = value;
@@ -1788,18 +1428,18 @@
    */
 
 
-  function get(target, path, defaultValue) {
-    var currentTarget = target;
-    forEach(path, function (key) {
+  function get$1(target, path, defaultValue) {
+    let currentTarget = target;
+    forEach$1(path, function (key) {
       // accessing nil property yields <undefined>
-      if (isNil(currentTarget)) {
+      if (isNil$1(currentTarget)) {
         currentTarget = undefined;
         return false;
       }
 
       currentTarget = currentTarget[key];
     });
-    return isUndefined(currentTarget) ? defaultValue : currentTarget;
+    return isUndefined$1(currentTarget) ? defaultValue : currentTarget;
   }
 
   var e$2 = {
@@ -2442,7 +2082,7 @@
    */
 
 
-  function isArray(obj) {
+  function isArray$1(obj) {
     return Array.isArray(obj);
   }
   /**
@@ -2470,7 +2110,7 @@
 
 
   function annotate(...args) {
-    if (args.length === 1 && isArray(args[0])) {
+    if (args.length === 1 && isArray$1(args[0])) {
       args = args[0];
     }
 
@@ -2601,7 +2241,7 @@
       }
 
       if (typeof fn !== 'function') {
-        if (isArray(fn)) {
+        if (isArray$1(fn)) {
           fn = annotate(fn.slice());
         } else {
           throw error(`Cannot invoke "${fn}". Expected a function!`);
@@ -2845,7 +2485,7 @@
 
 
   function arrayUnwrap(type, value) {
-    if (type !== 'value' && isArray(value)) {
+    if (type !== 'value' && isArray$1(value)) {
       value = annotate(value.slice());
     }
 
@@ -2965,22 +2605,22 @@
 
 
   EventBus$1.prototype.on = function (events, priority, callback, that) {
-    events = isArray$1(events) ? events : [events];
+    events = isArray$2(events) ? events : [events];
 
-    if (isFunction(priority)) {
+    if (isFunction$1(priority)) {
       that = callback;
       callback = priority;
       priority = DEFAULT_PRIORITY$3;
     }
 
-    if (!isNumber(priority)) {
+    if (!isNumber$1(priority)) {
       throw new Error('priority must be a number');
     }
 
     var actualCallback = callback;
 
     if (that) {
-      actualCallback = bind(callback, that); // make sure we remember and are able to remove
+      actualCallback = bind$2(callback, that); // make sure we remember and are able to remove
       // bound callbacks via {@link #off} using the original
       // callback
 
@@ -3009,13 +2649,13 @@
   EventBus$1.prototype.once = function (event, priority, callback, that) {
     var self = this;
 
-    if (isFunction(priority)) {
+    if (isFunction$1(priority)) {
       that = callback;
       callback = priority;
       priority = DEFAULT_PRIORITY$3;
     }
 
-    if (!isNumber(priority)) {
+    if (!isNumber$1(priority)) {
       throw new Error('priority must be a number');
     }
 
@@ -3043,7 +2683,7 @@
 
 
   EventBus$1.prototype.off = function (events, callback) {
-    events = isArray$1(events) ? events : [events];
+    events = isArray$2(events) ? events : [events];
     var self = this;
     events.forEach(function (event) {
       self._removeListener(event, callback);
@@ -3311,7 +2951,7 @@
   };
 
   InternalEvent$1.prototype.init = function (data) {
-    assign(this, data || {});
+    assign$1(this, data || {});
   };
   /**
    * Invoke function. Be fast...
@@ -3342,7 +2982,7 @@
         errors = [...errors, `Field must match pattern ${validate.pattern}.`];
       }
 
-      if (validate.required && (isNil(value) || value === '')) {
+      if (validate.required && (isNil$1(value) || value === '')) {
         errors = [...errors, 'Field is required.'];
       }
 
@@ -3614,7 +3254,7 @@
 
         if (valuesKey) {
           importedData = { ...importedData,
-            [valuesKey]: get(data, [valuesKey])
+            [valuesKey]: get$1(data, [valuesKey])
           };
         } // try to get value from data
         // if unavailable - try to get default value from form field
@@ -3624,9 +3264,9 @@
         if (_path) {
           const fieldImplementation = this._formFields.get(type);
 
-          let valueData = get(data, _path);
+          let valueData = get$1(data, _path);
 
-          if (!isUndefined(valueData) && fieldImplementation.sanitizeValue) {
+          if (!isUndefined$1(valueData) && fieldImplementation.sanitizeValue) {
             valueData = fieldImplementation.sanitizeValue({
               formField,
               data,
@@ -3634,7 +3274,7 @@
             });
           }
 
-          const initialFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
+          const initialFieldValue = !isUndefined$1(valueData) ? valueData : !isUndefined$1(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
           importedData = { ...importedData,
             [_path[0]]: initialFieldValue
           };
@@ -3816,7 +3456,7 @@
     } = formField;
 
     try {
-      const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
+      const validValues = (valuesKey ? get$1(data, [valuesKey]) : values).map(v => v.value) || [];
       return validValues.includes(value) ? value : null;
     } catch (error) {
       // use default value in case of formatting error
@@ -3837,7 +3477,7 @@
     } = formField;
 
     try {
-      const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
+      const validValues = (valuesKey ? get$1(data, [valuesKey]) : values).map(v => v.value) || [];
       return value.filter(v => validValues.includes(v));
     } catch (error) {
       // use default value in case of formatting error
@@ -4200,7 +3840,7 @@
       throw new Error(`cannot render field <${field.type}>`);
     }
 
-    const value = get(data, _path);
+    const value = get$1(data, _path);
     const fieldErrors = findErrors(errors, _path);
     const disabled = properties.readOnly || field.disabled || false;
     return e$1(Element, {
@@ -5018,7 +4658,7 @@
 
   Textfield$1.sanitizeValue = ({
     value
-  }) => isArray$1(value) || isObject(value) ? null : String(value);
+  }) => isArray$2(value) || isObject$1(value) ? null : String(value);
 
   const formFields = [Button, Checkbox$1, Checklist, Default, Number$1, Radio, Select$1, Taglist, Text$3, Textfield$1];
 
@@ -5268,22 +4908,8 @@
         throw new Error('form is read-only');
       }
 
-      const formFieldRegistry = this.get('formFieldRegistry');
-      const data = formFieldRegistry.getAll().reduce((data, field) => {
-        const {
-          disabled,
-          _path
-        } = field; // do not submit disabled form fields
-
-        if (disabled || !_path) {
-          return data;
-        }
+      const data = this._getSubmitData();
 
-        const value = get(this._getState().data, _path);
-        return { ...data,
-          [_path[0]]: value
-        };
-      }, {});
       const errors = this.validate();
 
       this._emit('submit', {
@@ -5328,9 +4954,9 @@
           return errors;
         }
 
-        const value = get(data, _path);
+        const value = get$1(data, _path);
         const fieldErrors = validator.validateField(field, value);
-        return set(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
+        return set$1(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
       },
       /** @type {Errors} */
       {});
@@ -5353,7 +4979,7 @@
 
       this.detach();
 
-      if (isString(parentNode)) {
+      if (isString$1(parentNode)) {
         parentNode = document.querySelector(parentNode);
       }
 
@@ -5394,7 +5020,7 @@
 
 
     setProperty(property, value) {
-      const properties = set(this._getState().properties, [property], value);
+      const properties = set$1(this._getState().properties, [property], value);
 
       this._setState({
         properties
@@ -5466,8 +5092,8 @@
 
       const validator = this.get('validator');
       const fieldErrors = validator.validateField(field, value);
-      set(data, _path, value);
-      set(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
+      set$1(data, _path, value);
+      set$1(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
 
       this._setState({
         data: clone(data),
@@ -5502,11 +5128,444 @@
     _onEvent(type, priority, handler) {
       this.get('eventBus').on(type, priority, handler);
     }
+    /**
+     * @internal
+     */
+
+
+    _getSubmitData() {
+      const formFieldRegistry = this.get('formFieldRegistry');
+      return formFieldRegistry.getAll().reduce((data, field) => {
+        const {
+          disabled,
+          _path
+        } = field; // do not submit disabled form fields
+
+        if (disabled || !_path) {
+          return data;
+        }
+
+        const value = get$1(this._getState().data, _path);
+        return { ...data,
+          [_path[0]]: value
+        };
+      }, {});
+    }
 
   }
 
   const schemaVersion = 5;
 
+  /**
+   * Flatten array, one level deep.
+   *
+   * @param {Array<?>} arr
+   *
+   * @return {Array<?>}
+   */
+
+  const nativeToString = Object.prototype.toString;
+  const nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+
+  function isUndefined(obj) {
+    return obj === undefined;
+  }
+
+  function isDefined(obj) {
+    return obj !== undefined;
+  }
+
+  function isNil(obj) {
+    return obj == null;
+  }
+
+  function isArray(obj) {
+    return nativeToString.call(obj) === '[object Array]';
+  }
+
+  function isObject(obj) {
+    return nativeToString.call(obj) === '[object Object]';
+  }
+
+  function isNumber(obj) {
+    return nativeToString.call(obj) === '[object Number]';
+  }
+
+  function isFunction(obj) {
+    const tag = nativeToString.call(obj);
+    return tag === '[object Function]' || tag === '[object AsyncFunction]' || tag === '[object GeneratorFunction]' || tag === '[object AsyncGeneratorFunction]' || tag === '[object Proxy]';
+  }
+
+  function isString(obj) {
+    return nativeToString.call(obj) === '[object String]';
+  }
+  /**
+   * Ensure collection is an array.
+   *
+   * @param {Object} obj
+   */
+
+
+  function ensureArray(obj) {
+    if (isArray(obj)) {
+      return;
+    }
+
+    throw new Error('must supply array');
+  }
+  /**
+   * Return true, if target owns a property with the given key.
+   *
+   * @param {Object} target
+   * @param {String} key
+   *
+   * @return {Boolean}
+   */
+
+
+  function has(target, key) {
+    return nativeHasOwnProperty.call(target, key);
+  }
+  /**
+   * Find element in collection.
+   *
+   * @param  {Array|Object} collection
+   * @param  {Function|Object} matcher
+   *
+   * @return {Object}
+   */
+
+
+  function find$3(collection, matcher) {
+    matcher = toMatcher(matcher);
+    let match;
+    forEach(collection, function (val, key) {
+      if (matcher(val, key)) {
+        match = val;
+        return false;
+      }
+    });
+    return match;
+  }
+  /**
+   * Iterate over collection; returning something
+   * (non-undefined) will stop iteration.
+   *
+   * @param  {Array|Object} collection
+   * @param  {Function} iterator
+   *
+   * @return {Object} return result that stopped the iteration
+   */
+
+
+  function forEach(collection, iterator) {
+    let val, result;
+
+    if (isUndefined(collection)) {
+      return;
+    }
+
+    const convertKey = isArray(collection) ? toNum : identity;
+
+    for (let key in collection) {
+      if (has(collection, key)) {
+        val = collection[key];
+        result = iterator(val, convertKey(key));
+
+        if (result === false) {
+          return val;
+        }
+      }
+    }
+  }
+  /**
+   * Return collection without element.
+   *
+   * @param  {Array} arr
+   * @param  {Function} matcher
+   *
+   * @return {Array}
+   */
+
+
+  function without(arr, matcher) {
+    if (isUndefined(arr)) {
+      return [];
+    }
+
+    ensureArray(arr);
+    matcher = toMatcher(matcher);
+    return arr.filter(function (el, idx) {
+      return !matcher(el, idx);
+    });
+  }
+  /**
+   * Transform a collection into another collection
+   * by piping each member through the given fn.
+   *
+   * @param  {Object|Array}   collection
+   * @param  {Function} fn
+   *
+   * @return {Array} transformed collection
+   */
+
+
+  function map$1(collection, fn) {
+    let result = [];
+    forEach(collection, function (val, key) {
+      result.push(fn(val, key));
+    });
+    return result;
+  }
+  /**
+   * Group collection members by attribute.
+   *
+   * @param  {Object|Array} collection
+   * @param  {Function} extractor
+   *
+   * @return {Object} map with { attrValue => [ a, b, c ] }
+   */
+
+
+  function groupBy(collection, extractor, grouped = {}) {
+    extractor = toExtractor(extractor);
+    forEach(collection, function (val) {
+      let discriminator = extractor(val) || '_';
+      let group = grouped[discriminator];
+
+      if (!group) {
+        group = grouped[discriminator] = [];
+      }
+
+      group.push(val);
+    });
+    return grouped;
+  }
+
+  function uniqueBy(extractor, ...collections) {
+    extractor = toExtractor(extractor);
+    let grouped = {};
+    forEach(collections, c => groupBy(c, extractor, grouped));
+    let result = map$1(grouped, function (val, key) {
+      return val[0];
+    });
+    return result;
+  }
+  /**
+   * Sort collection by criteria.
+   *
+   * @param  {Object|Array} collection
+   * @param  {String|Function} extractor
+   *
+   * @return {Array}
+   */
+
+  function sortBy(collection, extractor) {
+    extractor = toExtractor(extractor);
+    let sorted = [];
+    forEach(collection, function (value, key) {
+      let disc = extractor(value, key);
+      let entry = {
+        d: disc,
+        v: value
+      };
+
+      for (var idx = 0; idx < sorted.length; idx++) {
+        let {
+          d
+        } = sorted[idx];
+
+        if (disc < d) {
+          sorted.splice(idx, 0, entry);
+          return;
+        }
+      } // not inserted, append (!)
+
+
+      sorted.push(entry);
+    });
+    return map$1(sorted, e => e.v);
+  }
+
+  function toExtractor(extractor) {
+    return isFunction(extractor) ? extractor : e => {
+      return e[extractor];
+    };
+  }
+
+  function toMatcher(matcher) {
+    return isFunction(matcher) ? matcher : e => {
+      return e === matcher;
+    };
+  }
+
+  function identity(arg) {
+    return arg;
+  }
+
+  function toNum(arg) {
+    return Number(arg);
+  }
+  /**
+   * Debounce fn, calling it only once if the given time
+   * elapsed between calls.
+   *
+   * Lodash-style the function exposes methods to `#clear`
+   * and `#flush` to control internal behavior.
+   *
+   * @param  {Function} fn
+   * @param  {Number} timeout
+   *
+   * @return {Function} debounced function
+   */
+
+
+  function debounce$2(fn, timeout) {
+    let timer;
+    let lastArgs;
+    let lastThis;
+    let lastNow;
+
+    function fire(force) {
+      let now = Date.now();
+      let scheduledDiff = force ? 0 : lastNow + timeout - now;
+
+      if (scheduledDiff > 0) {
+        return schedule(scheduledDiff);
+      }
+
+      fn.apply(lastThis, lastArgs);
+      clear();
+    }
+
+    function schedule(timeout) {
+      timer = setTimeout(fire, timeout);
+    }
+
+    function clear() {
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      timer = lastNow = lastArgs = lastThis = undefined;
+    }
+
+    function flush() {
+      if (timer) {
+        fire(true);
+      }
+
+      clear();
+    }
+
+    function callback(...args) {
+      lastNow = Date.now();
+      lastArgs = args;
+      lastThis = this; // ensure an execution is scheduled
+
+      if (!timer) {
+        schedule(timeout);
+      }
+    }
+
+    callback.flush = flush;
+    callback.cancel = clear;
+    return callback;
+  }
+  /**
+   * Bind function against target <this>.
+   *
+   * @param  {Function} fn
+   * @param  {Object}   target
+   *
+   * @return {Function} bound function
+   */
+
+
+  function bind(fn, target) {
+    return fn.bind(target);
+  }
+  /**
+   * Convenience wrapper for `Object.assign`.
+   *
+   * @param {Object} target
+   * @param {...Object} others
+   *
+   * @return {Object} the target
+   */
+
+
+  function assign(target, ...others) {
+    return Object.assign(target, ...others);
+  }
+  /**
+   * Sets a nested property of a given object to the specified value.
+   *
+   * This mutates the object and returns it.
+   *
+   * @param {Object} target The target of the set operation.
+   * @param {(string|number)[]} path The path to the nested value.
+   * @param {any} value The value to set.
+   */
+
+
+  function set(target, path, value) {
+    let currentTarget = target;
+    forEach(path, function (key, idx) {
+      if (typeof key !== 'number' && typeof key !== 'string') {
+        throw new Error('illegal key type: ' + typeof key + '. Key should be of type number or string.');
+      }
+
+      if (key === 'constructor') {
+        throw new Error('illegal key: constructor');
+      }
+
+      if (key === '__proto__') {
+        throw new Error('illegal key: __proto__');
+      }
+
+      let nextKey = path[idx + 1];
+      let nextTarget = currentTarget[key];
+
+      if (isDefined(nextKey) && isNil(nextTarget)) {
+        nextTarget = currentTarget[key] = isNaN(+nextKey) ? {} : [];
+      }
+
+      if (isUndefined(nextKey)) {
+        if (isUndefined(value)) {
+          delete currentTarget[key];
+        } else {
+          currentTarget[key] = value;
+        }
+      } else {
+        currentTarget = nextTarget;
+      }
+    });
+    return target;
+  }
+  /**
+   * Gets a nested property of a given object.
+   *
+   * @param {Object} target The target of the get operation.
+   * @param {(string|number)[]} path The path to the nested value.
+   * @param {any} [defaultValue] The value to return if no value exists.
+   */
+
+
+  function get(target, path, defaultValue) {
+    let currentTarget = target;
+    forEach(path, function (key) {
+      // accessing nil property yields <undefined>
+      if (isNil(currentTarget)) {
+        currentTarget = undefined;
+        return false;
+      }
+
+      currentTarget = currentTarget[key];
+    });
+    return isUndefined(currentTarget) ? defaultValue : currentTarget;
+  }
+
   var atoa$1 = function atoa(a, n) {
     return Array.prototype.slice.call(a, n);
   };
@@ -6644,6 +6703,196 @@
 
   var dragula_1 = dragula;
 
+  function _mergeNamespaces(n, m) {
+    m.forEach(function (e) {
+      e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+        if (k !== 'default' && !(k in n)) {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () {
+              return e[k];
+            }
+          });
+        }
+      });
+    });
+    return Object.freeze(n);
+  }
+  /**
+   * @param { HTMLElement } element
+   * @param { String } selector
+   *
+   * @return { boolean }
+   */
+
+
+  function matches(element, selector) {
+    return element && typeof element.matches === 'function' && element.matches(selector);
+  }
+  /**
+   * Closest
+   *
+   * @param {Element} el
+   * @param {String} selector
+   * @param {Boolean} checkYourSelf (optional)
+   */
+
+
+  function closest(element, selector, checkYourSelf) {
+    var currentElem = checkYourSelf ? element : element.parentNode;
+
+    while (currentElem && currentElem.nodeType !== document.DOCUMENT_NODE && currentElem.nodeType !== document.DOCUMENT_FRAGMENT_NODE) {
+      if (matches(currentElem, selector)) {
+        return currentElem;
+      }
+
+      currentElem = currentElem.parentNode;
+    }
+
+    return matches(currentElem, selector) ? currentElem : null;
+  }
+
+  var componentEvent = {};
+  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
+      unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
+      prefix = bind$1 !== 'addEventListener' ? 'on' : '';
+  /**
+   * Bind `el` event `type` to `fn`.
+   *
+   * @param {Element} el
+   * @param {String} type
+   * @param {Function} fn
+   * @param {Boolean} capture
+   * @return {Function}
+   * @api public
+   */
+
+  var bind_1 = componentEvent.bind = function (el, type, fn, capture) {
+    el[bind$1](prefix + type, fn, capture || false);
+    return fn;
+  };
+  /**
+   * Unbind `el` event `type`'s callback `fn`.
+   *
+   * @param {Element} el
+   * @param {String} type
+   * @param {Function} fn
+   * @param {Boolean} capture
+   * @return {Function}
+   * @api public
+   */
+
+
+  var unbind_1 = componentEvent.unbind = function (el, type, fn, capture) {
+    el[unbind$1](prefix + type, fn, capture || false);
+    return fn;
+  };
+
+  var event = /*#__PURE__*/_mergeNamespaces({
+    __proto__: null,
+    bind: bind_1,
+    unbind: unbind_1,
+    'default': componentEvent
+  }, [componentEvent]);
+  /**
+   * Expose `parse`.
+   */
+
+  var domify = parse;
+  /**
+   * Tests for browser support.
+   */
+
+  var innerHTMLBug = false;
+  var bugTestDiv;
+
+  if (typeof document !== 'undefined') {
+    bugTestDiv = document.createElement('div'); // Setup
+
+    bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>'; // Make sure that link elements get serialized correctly by innerHTML
+    // This requires a wrapper element in IE
+
+    innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
+    bugTestDiv = undefined;
+  }
+  /**
+   * Wrap map from jquery.
+   */
+
+
+  var map = {
+    legend: [1, '<fieldset>', '</fieldset>'],
+    tr: [2, '<table><tbody>', '</tbody></table>'],
+    col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+    // for script/link/style tags to work in IE6-8, you have to wrap
+    // in a div with a non-whitespace character in front, ha!
+    _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+  };
+  map.td = map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+  map.option = map.optgroup = [1, '<select multiple="multiple">', '</select>'];
+  map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '<table>', '</table>'];
+  map.polyline = map.ellipse = map.polygon = map.circle = map.text = map.line = map.path = map.rect = map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">', '</svg>'];
+  /**
+   * Parse `html` and return a DOM Node instance, which could be a TextNode,
+   * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
+   * instance, depending on the contents of the `html` string.
+   *
+   * @param {String} html - HTML string to "domify"
+   * @param {Document} doc - The `document` instance to create the Node for
+   * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
+   * @api private
+   */
+
+  function parse(html, doc) {
+    if ('string' != typeof html) throw new TypeError('String expected'); // default to the global `document` object
+
+    if (!doc) doc = document; // tag name
+
+    var m = /<([\w:]+)/.exec(html);
+    if (!m) return doc.createTextNode(html);
+    html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
+
+    var tag = m[1]; // body support
+
+    if (tag == 'body') {
+      var el = doc.createElement('html');
+      el.innerHTML = html;
+      return el.removeChild(el.lastChild);
+    } // wrap map
+
+
+    var wrap = Object.prototype.hasOwnProperty.call(map, tag) ? map[tag] : map._default;
+    var depth = wrap[0];
+    var prefix = wrap[1];
+    var suffix = wrap[2];
+    var el = doc.createElement('div');
+    el.innerHTML = prefix + html + suffix;
+
+    while (depth--) el = el.lastChild; // one element
+
+
+    if (el.firstChild == el.lastChild) {
+      return el.removeChild(el.firstChild);
+    } // several elements
+
+
+    var fragment = doc.createDocumentFragment();
+
+    while (el.firstChild) {
+      fragment.appendChild(el.removeChild(el.firstChild));
+    }
+
+    return fragment;
+  }
+
+  var domify$1 = domify;
+
+  function query(selector, el) {
+    el = el || document;
+    return el.querySelector(selector);
+  }
+
   var arrayMove$1 = {exports: {}};
 
   const arrayMoveMutate = (array, from, to) => {
@@ -6765,7 +7014,7 @@
    * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
    * @param {Function} callback
    * @param {Object} [that] Pass context (`this`) to the callback
-   */EventBus.prototype.on=function(events,priority,callback,that){events=isArray$1(events)?events:[events];if(isFunction(priority)){that=callback;callback=priority;priority=DEFAULT_PRIORITY$2;}if(!isNumber(priority)){throw new Error('priority must be a number');}var actualCallback=callback;if(that){actualCallback=bind(callback,that);// make sure we remember and are able to remove
+   */EventBus.prototype.on=function(events,priority,callback,that){events=isArray(events)?events:[events];if(isFunction(priority)){that=callback;callback=priority;priority=DEFAULT_PRIORITY$2;}if(!isNumber(priority)){throw new Error('priority must be a number');}var actualCallback=callback;if(that){actualCallback=bind(callback,that);// make sure we remember and are able to remove
   // bound callbacks via {@link #off} using the original
   // callback
   actualCallback[FN_REF]=callback[FN_REF]||callback;}var self=this;events.forEach(function(e){self._addListener(e,{priority:priority,callback:actualCallback,next:null});});};/**
@@ -6785,7 +7034,7 @@
    *
    * @param {string|Array<string>} events
    * @param {Function} [callback]
-   */EventBus.prototype.off=function(events,callback){events=isArray$1(events)?events:[events];var self=this;events.forEach(function(event){self._removeListener(event,callback);});};/**
+   */EventBus.prototype.off=function(events,callback){events=isArray(events)?events:[events];var self=this;events.forEach(function(event){self._removeListener(event,callback);});};/**
    * Create an EventBus event.
    *
    * @param {Object} data
@@ -6960,7 +7209,7 @@
    * @param {Injector} injector
    */EditorActions.prototype._registerDefaultActions=function(injector){// (1) retrieve optional components to integrate with
   var commandStack=injector.get('commandStack',false);var modeling=injector.get('modeling',false);var selection=injector.get('selection',false);var zoomScroll=injector.get('zoomScroll',false);var copyPaste=injector.get('copyPaste',false);var canvas=injector.get('canvas',false);var rules=injector.get('rules',false);var keyboardMove=injector.get('keyboardMove',false);var keyboardMoveSelection=injector.get('keyboardMoveSelection',false);// (2) check components and register actions
-  if(commandStack){this.register('undo',function(){commandStack.undo();});this.register('redo',function(){commandStack.redo();});}if(copyPaste&&selection){this.register('copy',function(){var selectedElements=selection.get();copyPaste.copy(selectedElements);});}if(copyPaste){this.register('paste',function(){copyPaste.paste();});}if(zoomScroll){this.register('stepZoom',function(opts){zoomScroll.stepZoom(opts.value);});}if(canvas){this.register('zoom',function(opts){canvas.zoom(opts.value);});}if(modeling&&selection&&rules){this.register('removeSelection',function(){var selectedElements=selection.get();if(!selectedElements.length){return;}var allowed=rules.allowed('elements.delete',{elements:selectedElements}),removableElements;if(allowed===false){return;}else if(isArray$1(allowed)){removableElements=allowed;}else {removableElements=selectedElements;}if(removableElements.length){modeling.removeElements(removableElements.slice());}});}if(keyboardMove){this.register('moveCanvas',function(opts){keyboardMove.moveCanvas(opts);});}if(keyboardMoveSelection){this.register('moveSelection',function(opts){keyboardMoveSelection.moveSelection(opts.direction,opts.accelerated);});}};/**
+  if(commandStack){this.register('undo',function(){commandStack.undo();});this.register('redo',function(){commandStack.redo();});}if(copyPaste&&selection){this.register('copy',function(){var selectedElements=selection.get();if(selectedElements.length){return copyPaste.copy(selectedElements);}});}if(copyPaste){this.register('paste',function(){copyPaste.paste();});}if(zoomScroll){this.register('stepZoom',function(opts){zoomScroll.stepZoom(opts.value);});}if(canvas){this.register('zoom',function(opts){canvas.zoom(opts.value);});}if(modeling&&selection&&rules){this.register('removeSelection',function(){var selectedElements=selection.get();if(!selectedElements.length){return;}var allowed=rules.allowed('elements.delete',{elements:selectedElements}),removableElements;if(allowed===false){return;}else if(isArray(allowed)){removableElements=allowed;}else {removableElements=selectedElements;}if(removableElements.length){modeling.removeElements(removableElements.slice());}});}if(keyboardMove){this.register('moveCanvas',function(opts){keyboardMove.moveCanvas(opts);});}if(keyboardMoveSelection){this.register('moveSelection',function(opts){keyboardMoveSelection.moveSelection(opts.direction,opts.accelerated);});}};/**
    * Triggers a registered action
    *
    * @param  {string} action
@@ -7010,7 +7259,7 @@
    */EditorActions.prototype.isRegistered=function(action){return !!this._actions[action];};function error(action,message){return new Error(action+' '+message);}var EditorActionsModule$1={__init__:['editorActions'],editorActions:['type',EditorActions]};class FormEditorActions extends EditorActions{constructor(eventBus,injector){super(eventBus,injector);eventBus.on('form.init',()=>{this._registerDefaultActions(injector);eventBus.fire('editorActions.init',{editorActions:this});});}_registerDefaultActions(injector){const commandStack=injector.get('commandStack',false),formFieldRegistry=injector.get('formFieldRegistry',false),selection=injector.get('selection',false);if(commandStack){// @ts-ignore
   this.register('undo',()=>{commandStack.undo();});// @ts-ignore
   this.register('redo',()=>{commandStack.redo();});}if(formFieldRegistry&&selection){// @ts-ignore
-  this.register('selectFormField',(options={})=>{const{id}=options;if(!id){return;}const formField=formFieldRegistry.get(id);if(formField){selection.set(formField);}});}}}FormEditorActions.$inject=['eventBus','injector'];var EditorActionsModule={__depends__:[EditorActionsModule$1],editorActions:['type',FormEditorActions]};/**
+  this.register('selectFormField',(options={})=>{const{id}=options;if(!id){return;}const formField=formFieldRegistry.get(id);if(formField){selection.set(formField);}});}}}FormEditorActions.$inject=['eventBus','injector'];var EditorActionsModule={__depends__:[EditorActionsModule$1],editorActions:['type',FormEditorActions]};var KEYCODE_C=67;var KEYCODE_V=86;var KEYCODE_Y$1=89;var KEYCODE_Z$1=90;var KEYS_COPY=['c','C',KEYCODE_C];var KEYS_PASTE=['v','V',KEYCODE_V];var KEYS_REDO$1=['y','Y',KEYCODE_Y$1];var KEYS_UNDO$1=['z','Z',KEYCODE_Z$1];/**
    * Returns true if event was triggered with any modifier
    * @param {KeyboardEvent} event
    */function hasModifier(event){return event.ctrlKey||event.metaKey||event.shiftKey||event.altKey;}/**
@@ -7022,9 +7271,9 @@
    *
    * @param {string|Array<string>} keys
    * @param {KeyboardEvent} event
-   */function isKey(keys,event){keys=isArray$1(keys)?keys:[keys];return keys.indexOf(event.key)!==-1||keys.indexOf(event.keyCode)!==-1;}/**
+   */function isKey(keys,event){keys=isArray(keys)?keys:[keys];return keys.indexOf(event.key)!==-1||keys.indexOf(event.keyCode)!==-1;}/**
    * @param {KeyboardEvent} event
-   */function isShift(event){return event.shiftKey;}var KEYDOWN_EVENT='keyboard.keydown',KEYUP_EVENT='keyboard.keyup';var HANDLE_MODIFIER_ATTRIBUTE='input-handle-modified-keys';var DEFAULT_PRIORITY$1=1000;/**
+   */function isShift(event){return event.shiftKey;}function isCopy(event){return isCmd(event)&&isKey(KEYS_COPY,event);}function isPaste(event){return isCmd(event)&&isKey(KEYS_PASTE,event);}function isUndo(event){return isCmd(event)&&!isShift(event)&&isKey(KEYS_UNDO$1,event);}function isRedo(event){return isCmd(event)&&(isKey(KEYS_REDO$1,event)||isKey(KEYS_UNDO$1,event)&&isShift(event));}var KEYDOWN_EVENT='keyboard.keydown',KEYUP_EVENT='keyboard.keyup';var HANDLE_MODIFIER_ATTRIBUTE='input-handle-modified-keys';var DEFAULT_PRIORITY$1=1000;/**
    * A keyboard abstraction that may be activated and
    * deactivated by users at will, consuming key events
    * and triggering diagram actions.
@@ -7048,10 +7297,10 @@
    * @param {Config} config
    * @param {EventBus} eventBus
    */function Keyboard(config,eventBus){var self=this;this._config=config||{};this._eventBus=eventBus;this._keydownHandler=this._keydownHandler.bind(this);this._keyupHandler=this._keyupHandler.bind(this);// properly clean dom registrations
-  eventBus.on('diagram.destroy',function(){self._fire('destroy');self.unbind();});eventBus.on('diagram.init',function(){self._fire('init');});eventBus.on('attach',function(){if(config&&config.bindTo){self.bind(config.bindTo);}});eventBus.on('detach',function(){self.unbind();});}Keyboard.$inject=['config.keyboard','eventBus'];Keyboard.prototype._keydownHandler=function(event){this._keyHandler(event,KEYDOWN_EVENT);};Keyboard.prototype._keyupHandler=function(event){this._keyHandler(event,KEYUP_EVENT);};Keyboard.prototype._keyHandler=function(event,type){var eventBusResult;if(this._isEventIgnored(event)){return;}var context={keyEvent:event};eventBusResult=this._eventBus.fire(type||KEYDOWN_EVENT,context);if(eventBusResult){event.preventDefault();}};Keyboard.prototype._isEventIgnored=function(event){return isInput(event.target)&&this._isModifiedKeyIgnored(event);};Keyboard.prototype._isModifiedKeyIgnored=function(event){if(!isCmd(event)){return true;}var allowedModifiers=this._getAllowedModifiers(event.target);return !allowedModifiers.includes(event.key);};Keyboard.prototype._getAllowedModifiers=function(element){var modifierContainer=closest(element,'['+HANDLE_MODIFIER_ATTRIBUTE+']',true);if(!modifierContainer||this._node&&!this._node.contains(modifierContainer)){return [];}return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');};Keyboard.prototype.bind=function(node){// make sure that the keyboard is only bound once to the DOM
+  eventBus.on('diagram.destroy',function(){self._fire('destroy');self.unbind();});eventBus.on('diagram.init',function(){self._fire('init');});eventBus.on('attach',function(){if(config&&config.bindTo){self.bind(config.bindTo);}});eventBus.on('detach',function(){self.unbind();});}Keyboard.$inject=['config.keyboard','eventBus'];Keyboard.prototype._keydownHandler=function(event){this._keyHandler(event,KEYDOWN_EVENT);};Keyboard.prototype._keyupHandler=function(event){this._keyHandler(event,KEYUP_EVENT);};Keyboard.prototype._keyHandler=function(event,type){var eventBusResult;if(this._isEventIgnored(event)){return;}var context={keyEvent:event};eventBusResult=this._eventBus.fire(type||KEYDOWN_EVENT,context);if(eventBusResult){event.preventDefault();}};Keyboard.prototype._isEventIgnored=function(event){return isInput(event.target)&&this._isModifiedKeyIgnored(event);};Keyboard.prototype._isModifiedKeyIgnored=function(event){if(!isCmd(event)){return true;}var allowedModifiers=this._getAllowedModifiers(event.target);return allowedModifiers.indexOf(event.key)===-1;};Keyboard.prototype._getAllowedModifiers=function(element){var modifierContainer=closest(element,'['+HANDLE_MODIFIER_ATTRIBUTE+']',true);if(!modifierContainer||this._node&&!this._node.contains(modifierContainer)){return [];}return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');};Keyboard.prototype.bind=function(node){// make sure that the keyboard is only bound once to the DOM
   this.unbind();this._node=node;// bind key events
-  componentEvent.bind(node,'keydown',this._keydownHandler,true);componentEvent.bind(node,'keyup',this._keyupHandler,true);this._fire('bind');};Keyboard.prototype.getBinding=function(){return this._node;};Keyboard.prototype.unbind=function(){var node=this._node;if(node){this._fire('unbind');// unbind key events
-  componentEvent.unbind(node,'keydown',this._keydownHandler,true);componentEvent.unbind(node,'keyup',this._keyupHandler,true);}this._node=null;};Keyboard.prototype._fire=function(event){this._eventBus.fire('keyboard.'+event,{node:this._node});};/**
+  event.bind(node,'keydown',this._keydownHandler,true);event.bind(node,'keyup',this._keyupHandler,true);this._fire('bind');};Keyboard.prototype.getBinding=function(){return this._node;};Keyboard.prototype.unbind=function(){var node=this._node;if(node){this._fire('unbind');// unbind key events
+  event.unbind(node,'keydown',this._keydownHandler,true);event.unbind(node,'keyup',this._keyupHandler,true);}this._node=null;};Keyboard.prototype._fire=function(event){this._eventBus.fire('keyboard.'+event,{node:this._node});};/**
    * Add a listener function that is notified with `KeyboardEvent` whenever
    * the keyboard is bound and the user presses a key. If no priority is
    * provided, the default value of 1000 is used.
@@ -7060,7 +7309,7 @@
    * @param {Function} listener
    * @param {string} type
    */Keyboard.prototype.addListener=function(priority,listener,type){if(isFunction(priority)){type=listener;listener=priority;priority=DEFAULT_PRIORITY$1;}this._eventBus.on(type||KEYDOWN_EVENT,priority,listener);};Keyboard.prototype.removeListener=function(listener,type){this._eventBus.off(type||KEYDOWN_EVENT,listener);};Keyboard.prototype.hasModifier=hasModifier;Keyboard.prototype.isCmd=isCmd;Keyboard.prototype.isShift=isShift;Keyboard.prototype.isKey=isKey;// helpers ///////
-  function isInput(target){return target&&(matchesSelector(target,'input, textarea')||target.contentEditable==='true');}var LOW_PRIORITY$1=500;var KEYCODE_C=67;var KEYCODE_V=86;var KEYCODE_Y=89;var KEYCODE_Z=90;var KEYS_COPY=['c','C',KEYCODE_C];var KEYS_PASTE=['v','V',KEYCODE_V];var KEYS_REDO=['y','Y',KEYCODE_Y];var KEYS_UNDO=['z','Z',KEYCODE_Z];/**
+  function isInput(target){return target&&(matches(target,'input, textarea')||target.contentEditable==='true');}var LOW_PRIORITY$1=500;var KEYCODE_Y=89;var KEYCODE_Z=90;var KEYS_REDO=['y','Y',KEYCODE_Y];var KEYS_UNDO=['z','Z',KEYCODE_Z];/**
    * Adds default keyboard bindings.
    *
    * This does not pull in any features will bind only actions that
@@ -7081,14 +7330,14 @@
      * @param {Function} fn that implements the key binding
      */function addListener(action,fn){if(editorActions.isRegistered(action)){keyboard.addListener(fn);}}// undo
   // (CTRL|CMD) + Z
-  addListener('undo',function(context){var event=context.keyEvent;if(isCmd(event)&&!isShift(event)&&isKey(KEYS_UNDO,event)){editorActions.trigger('undo');return true;}});// redo
+  addListener('undo',function(context){var event=context.keyEvent;if(isUndo(event)){editorActions.trigger('undo');return true;}});// redo
   // CTRL + Y
   // CMD + SHIFT + Z
-  addListener('redo',function(context){var event=context.keyEvent;if(isCmd(event)&&(isKey(KEYS_REDO,event)||isKey(KEYS_UNDO,event)&&isShift(event))){editorActions.trigger('redo');return true;}});// copy
+  addListener('redo',function(context){var event=context.keyEvent;if(isRedo(event)){editorActions.trigger('redo');return true;}});// copy
   // CTRL/CMD + C
-  addListener('copy',function(context){var event=context.keyEvent;if(isCmd(event)&&isKey(KEYS_COPY,event)){editorActions.trigger('copy');return true;}});// paste
+  addListener('copy',function(context){var event=context.keyEvent;if(isCopy(event)){editorActions.trigger('copy');return true;}});// paste
   // CTRL/CMD + V
-  addListener('paste',function(context){var event=context.keyEvent;if(isCmd(event)&&isKey(KEYS_PASTE,event)){editorActions.trigger('paste');return true;}});// zoom in one step
+  addListener('paste',function(context){var event=context.keyEvent;if(isPaste(event)){editorActions.trigger('paste');return true;}});// zoom in one step
   // CTRL/CMD + +
   addListener('stepZoom',function(context){var event=context.keyEvent;// quirk: it has to be triggered by `=` as well to work on international keyboard layout
   // cf: https://github.com/bpmn-io/bpmn-js/issues/1362#issuecomment-722989754
@@ -7158,7 +7407,7 @@
    *
    * @example
    *
-   * import inherits from 'inherits';
+   * import inherits from 'inherits-browser';
    *
    * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
    *
@@ -7182,7 +7431,7 @@
    * @param {boolean} unwrap if true, unwrap the event and pass (context, command, event) to the
    *                          listener instead
    * @param {Object} [that] Pass context (`this`) to the handler function
-   */CommandInterceptor.prototype.on=function(events,hook,priority,handlerFn,unwrap,that){if(isFunction(hook)||isNumber(hook)){that=unwrap;unwrap=handlerFn;handlerFn=priority;priority=hook;hook=null;}if(isFunction(priority)){that=unwrap;unwrap=handlerFn;handlerFn=priority;priority=DEFAULT_PRIORITY;}if(isObject(unwrap)){that=unwrap;unwrap=false;}if(!isFunction(handlerFn)){throw new Error('handlerFn must be a function');}if(!isArray$1(events)){events=[events];}var eventBus=this._eventBus;forEach(events,function(event){// concat commandStack(.event)?(.hook)?
+   */CommandInterceptor.prototype.on=function(events,hook,priority,handlerFn,unwrap,that){if(isFunction(hook)||isNumber(hook)){that=unwrap;unwrap=handlerFn;handlerFn=priority;priority=hook;hook=null;}if(isFunction(priority)){that=unwrap;unwrap=handlerFn;handlerFn=priority;priority=DEFAULT_PRIORITY;}if(isObject(unwrap)){that=unwrap;unwrap=false;}if(!isFunction(handlerFn)){throw new Error('handlerFn must be a function');}if(!isArray(events)){events=[events];}var eventBus=this._eventBus;forEach(events,function(event){// concat commandStack(.event)?(.hook)?
   var fullEvent=['commandStack',event,hook].filter(function(e){return e;}).join('.');eventBus.on(fullEvent,priority,unwrap?unwrapEvent(handlerFn,that):handlerFn,that);});};var hooks=['canExecute','preExecute','preExecuted','execute','executed','postExecute','postExecuted','revert','reverted'];/*
    * Install hook shortcuts
    *
@@ -7302,7 +7551,7 @@
    *
    * @param {string} command the command to execute
    * @param {Object} context the environment to execute the command in
-   */CommandStack.prototype.execute=function(command,context){if(!command){throw new Error('command required');}this._currentExecution.trigger='execute';var action={command:command,context:context};this._pushAction(action);this._internalExecute(action);this._popAction(action);};/**
+   */CommandStack.prototype.execute=function(command,context){if(!command){throw new Error('command required');}this._currentExecution.trigger='execute';const action={command:command,context:context};this._pushAction(action);this._internalExecute(action);this._popAction(action);};/**
    * Ask whether a given command can be executed.
    *
    * Implementors may hook into the mechanism on two ways:
@@ -7321,15 +7570,15 @@
    * @param  {Object} context the environment to execute the command in
    *
    * @return {boolean} true if the command can be executed
-   */CommandStack.prototype.canExecute=function(command,context){var action={command:command,context:context};var handler=this._getHandler(command);var result=this._fire(command,'canExecute',action);// handler#canExecute will only be called if no listener
+   */CommandStack.prototype.canExecute=function(command,context){const action={command:command,context:context};const handler=this._getHandler(command);let result=this._fire(command,'canExecute',action);// handler#canExecute will only be called if no listener
   // decided on a result already
   if(result===undefined){if(!handler){return false;}if(handler.canExecute){result=handler.canExecute(context);}}return result;};/**
    * Clear the command stack, erasing all undo / redo history
    */CommandStack.prototype.clear=function(emit){this._stack.length=0;this._stackIdx=-1;if(emit!==false){this._fire('changed',{trigger:'clear'});}};/**
    * Undo last command(s)
-   */CommandStack.prototype.undo=function(){var action=this._getUndoAction(),next;if(action){this._currentExecution.trigger='undo';this._pushAction(action);while(action){this._internalUndo(action);next=this._getUndoAction();if(!next||next.id!==action.id){break;}action=next;}this._popAction();}};/**
+   */CommandStack.prototype.undo=function(){let action=this._getUndoAction(),next;if(action){this._currentExecution.trigger='undo';this._pushAction(action);while(action){this._internalUndo(action);next=this._getUndoAction();if(!next||next.id!==action.id){break;}action=next;}this._popAction();}};/**
    * Redo last command(s)
-   */CommandStack.prototype.redo=function(){var action=this._getRedoAction(),next;if(action){this._currentExecution.trigger='redo';this._pushAction(action);while(action){this._internalExecute(action,true);next=this._getRedoAction();if(!next||next.id!==action.id){break;}action=next;}this._popAction();}};/**
+   */CommandStack.prototype.redo=function(){let action=this._getRedoAction(),next;if(action){this._currentExecution.trigger='redo';this._pushAction(action);while(action){this._internalExecute(action,true);next=this._getRedoAction();if(!next||next.id!==action.id){break;}action=next;}this._popAction();}};/**
    * Register a handler instance with the command stack
    *
    * @param {string} command
@@ -7340,13 +7589,13 @@
    *
    * @param {string} command
    * @param {Function} a constructor for a {@link CommandHandler}
-   */CommandStack.prototype.registerHandler=function(command,handlerCls){if(!command||!handlerCls){throw new Error('command and handlerCls must be defined');}var handler=this._injector.instantiate(handlerCls);this.register(command,handler);};CommandStack.prototype.canUndo=function(){return !!this._getUndoAction();};CommandStack.prototype.canRedo=function(){return !!this._getRedoAction();};// stack access  //////////////////////
+   */CommandStack.prototype.registerHandler=function(command,handlerCls){if(!command||!handlerCls){throw new Error('command and handlerCls must be defined');}const handler=this._injector.instantiate(handlerCls);this.register(command,handler);};CommandStack.prototype.canUndo=function(){return !!this._getUndoAction();};CommandStack.prototype.canRedo=function(){return !!this._getRedoAction();};// stack access  //////////////////////
   CommandStack.prototype._getRedoAction=function(){return this._stack[this._stackIdx+1];};CommandStack.prototype._getUndoAction=function(){return this._stack[this._stackIdx];};// internal functionality //////////////////////
-  CommandStack.prototype._internalUndo=function(action){var self=this;var command=action.command,context=action.context;var handler=this._getHandler(command);// guard against illegal nested command stack invocations
-  this._atomicDo(function(){self._fire(command,'revert',action);if(handler.revert){self._markDirty(handler.revert(context));}self._revertedAction(action);self._fire(command,'reverted',action);});};CommandStack.prototype._fire=function(command,qualifier,event){if(arguments.length<3){event=qualifier;qualifier=null;}var names=qualifier?[command+'.'+qualifier,qualifier]:[command],i,name,result;event=this._eventBus.createEvent(event);for(i=0;name=names[i];i++){result=this._eventBus.fire('commandStack.'+name,event);if(event.cancelBubble){break;}}return result;};CommandStack.prototype._createId=function(){return this._uid++;};CommandStack.prototype._atomicDo=function(fn){var execution=this._currentExecution;execution.atomic=true;try{fn();}finally{execution.atomic=false;}};CommandStack.prototype._internalExecute=function(action,redo){var self=this;var command=action.command,context=action.context;var handler=this._getHandler(command);if(!handler){throw new Error('no command handler registered for <'+command+'>');}this._pushAction(action);if(!redo){this._fire(command,'preExecute',action);if(handler.preExecute){handler.preExecute(context);}this._fire(command,'preExecuted',action);}// guard against illegal nested command stack invocations
-  this._atomicDo(function(){self._fire(command,'execute',action);if(handler.execute){// actual execute + mark return results as dirty
-  self._markDirty(handler.execute(context));}// log to stack
-  self._executedAction(action,redo);self._fire(command,'executed',action);});if(!redo){this._fire(command,'postExecute',action);if(handler.postExecute){handler.postExecute(context);}this._fire(command,'postExecuted',action);}this._popAction(action);};CommandStack.prototype._pushAction=function(action){var execution=this._currentExecution,actions=execution.actions;var baseAction=actions[0];if(execution.atomic){throw new Error('illegal invocation in <execute> or <revert> phase (action: '+action.command+')');}if(!action.id){action.id=baseAction&&baseAction.id||this._createId();}actions.push(action);};CommandStack.prototype._popAction=function(){var execution=this._currentExecution,trigger=execution.trigger,actions=execution.actions,dirty=execution.dirty;actions.pop();if(!actions.length){this._eventBus.fire('elements.changed',{elements:uniqueBy('id',dirty.reverse())});dirty.length=0;this._fire('changed',{trigger:trigger});execution.trigger=null;}};CommandStack.prototype._markDirty=function(elements){var execution=this._currentExecution;if(!elements){return;}elements=isArray$1(elements)?elements:[elements];execution.dirty=execution.dirty.concat(elements);};CommandStack.prototype._executedAction=function(action,redo){var stackIdx=++this._stackIdx;if(!redo){this._stack.splice(stackIdx,this._stack.length,action);}};CommandStack.prototype._revertedAction=function(action){this._stackIdx--;};CommandStack.prototype._getHandler=function(command){return this._handlerMap[command];};CommandStack.prototype._setHandler=function(command,handler){if(!command||!handler){throw new Error('command and handler required');}if(this._handlerMap[command]){throw new Error('overriding handler for command <'+command+'>');}this._handlerMap[command]=handler;};var commandModule={commandStack:['type',CommandStack]};var ModelingModule={__depends__:[behaviorModule,commandModule],__init__:['modeling'],modeling:['type',Modeling]};class Selection{constructor(eventBus){this._eventBus=eventBus;this._selection=null;}get(){return this._selection;}set(selection){if(this._selection===selection){return;}this._selection=selection;this._eventBus.fire('selection.changed',{selection:this._selection});}toggle(selection){const newSelection=this._selection===selection?null:selection;this.set(newSelection);}clear(){this.set(null);}isSelected(formField){return this._selection===formField;}}Selection.$inject=['eventBus'];class SelectionBehavior{constructor(eventBus,selection){eventBus.on(['commandStack.formField.add.postExecuted','commandStack.formField.move.postExecuted'],({context})=>{const{formField}=context;selection.set(formField);});eventBus.on('commandStack.formField.remove.postExecuted',({context})=>{const{sourceFormField,sourceIndex}=context;const formField=sourceFormField.components[sourceIndex]||sourceFormField.components[sourceIndex-1];if(formField){selection.set(formField);}else {selection.clear();}});eventBus.on('formField.remove',({formField})=>{if(selection.isSelected(formField)){selection.clear();}});}}SelectionBehavior.$inject=['eventBus','selection'];var SelectionModule={__init__:['selection','selectionBehavior'],selection:['type',Selection],selectionBehavior:['type',SelectionBehavior]};const types$1=[{label:'Text Field',type:'textfield'},{label:'Number',type:'number'},{label:'Checkbox',type:'checkbox'},{label:'Checklist',type:'checklist'},{label:'Taglist',type:'taglist'},{label:'Radio',type:'radio'},{label:'Select',type:'select'},{label:'Text',type:'text'},{label:'Button',type:'button'}];function Palette(props){return e$1("div",{class:"fjs-palette",children:[e$1("div",{class:"fjs-palette-header",title:"Form elements library",children:[e$1("span",{class:"fjs-hide-compact",children:"FORM ELEMENTS "}),"LIBRARY"]}),e$1("div",{class:"fjs-palette-fields fjs-drag-container fjs-no-drop",children:types$1.map(({label,type})=>{const Icon=iconsByType[type];return e$1("div",{class:"fjs-palette-field fjs-drag-copy fjs-no-drop","data-field-type":type,title:`Create a ${label} element`,children:[Icon?e$1(Icon,{class:"fjs-palette-field-icon",width:"36",height:"36",viewBox:"0 0 54 54"}):null,e$1("span",{class:"fjs-palette-field-text",children:label})]});})})]});}class PaletteRenderer{constructor(paletteConfig,eventBus){const{parent}=paletteConfig||{};this._eventBus=eventBus;this._container=domify('<div class="fjs-palette-container"></div>');if(parent){this.attachTo(parent);}this._eventBus.once('formEditor.rendered',500,()=>{this._render();});}/**
+  CommandStack.prototype._internalUndo=function(action){const command=action.command,context=action.context;const handler=this._getHandler(command);// guard against illegal nested command stack invocations
+  this._atomicDo(()=>{this._fire(command,'revert',action);if(handler.revert){this._markDirty(handler.revert(context));}this._revertedAction(action);this._fire(command,'reverted',action);});};CommandStack.prototype._fire=function(command,qualifier,event){if(arguments.length<3){event=qualifier;qualifier=null;}const names=qualifier?[command+'.'+qualifier,qualifier]:[command];let result;event=this._eventBus.createEvent(event);for(const name of names){result=this._eventBus.fire('commandStack.'+name,event);if(event.cancelBubble){break;}}return result;};CommandStack.prototype._createId=function(){return this._uid++;};CommandStack.prototype._atomicDo=function(fn){const execution=this._currentExecution;execution.atomic=true;try{fn();}finally{execution.atomic=false;}};CommandStack.prototype._internalExecute=function(action,redo){const command=action.command,context=action.context;const handler=this._getHandler(command);if(!handler){throw new Error('no command handler registered for <'+command+'>');}this._pushAction(action);if(!redo){this._fire(command,'preExecute',action);if(handler.preExecute){handler.preExecute(context);}this._fire(command,'preExecuted',action);}// guard against illegal nested command stack invocations
+  this._atomicDo(()=>{this._fire(command,'execute',action);if(handler.execute){// actual execute + mark return results as dirty
+  this._markDirty(handler.execute(context));}// log to stack
+  this._executedAction(action,redo);this._fire(command,'executed',action);});if(!redo){this._fire(command,'postExecute',action);if(handler.postExecute){handler.postExecute(context);}this._fire(command,'postExecuted',action);}this._popAction(action);};CommandStack.prototype._pushAction=function(action){const execution=this._currentExecution,actions=execution.actions;const baseAction=actions[0];if(execution.atomic){throw new Error('illegal invocation in <execute> or <revert> phase (action: '+action.command+')');}if(!action.id){action.id=baseAction&&baseAction.id||this._createId();}actions.push(action);};CommandStack.prototype._popAction=function(){const execution=this._currentExecution,trigger=execution.trigger,actions=execution.actions,dirty=execution.dirty;actions.pop();if(!actions.length){this._eventBus.fire('elements.changed',{elements:uniqueBy('id',dirty.reverse())});dirty.length=0;this._fire('changed',{trigger:trigger});execution.trigger=null;}};CommandStack.prototype._markDirty=function(elements){const execution=this._currentExecution;if(!elements){return;}elements=isArray(elements)?elements:[elements];execution.dirty=execution.dirty.concat(elements);};CommandStack.prototype._executedAction=function(action,redo){const stackIdx=++this._stackIdx;if(!redo){this._stack.splice(stackIdx,this._stack.length,action);}};CommandStack.prototype._revertedAction=function(action){this._stackIdx--;};CommandStack.prototype._getHandler=function(command){return this._handlerMap[command];};CommandStack.prototype._setHandler=function(command,handler){if(!command||!handler){throw new Error('command and handler required');}if(this._handlerMap[command]){throw new Error('overriding handler for command <'+command+'>');}this._handlerMap[command]=handler;};var commandModule={commandStack:['type',CommandStack]};var ModelingModule={__depends__:[behaviorModule,commandModule],__init__:['modeling'],modeling:['type',Modeling]};class Selection{constructor(eventBus){this._eventBus=eventBus;this._selection=null;}get(){return this._selection;}set(selection){if(this._selection===selection){return;}this._selection=selection;this._eventBus.fire('selection.changed',{selection:this._selection});}toggle(selection){const newSelection=this._selection===selection?null:selection;this.set(newSelection);}clear(){this.set(null);}isSelected(formField){return this._selection===formField;}}Selection.$inject=['eventBus'];class SelectionBehavior{constructor(eventBus,selection){eventBus.on(['commandStack.formField.add.postExecuted','commandStack.formField.move.postExecuted'],({context})=>{const{formField}=context;selection.set(formField);});eventBus.on('commandStack.formField.remove.postExecuted',({context})=>{const{sourceFormField,sourceIndex}=context;const formField=sourceFormField.components[sourceIndex]||sourceFormField.components[sourceIndex-1];if(formField){selection.set(formField);}else {selection.clear();}});eventBus.on('formField.remove',({formField})=>{if(selection.isSelected(formField)){selection.clear();}});}}SelectionBehavior.$inject=['eventBus','selection'];var SelectionModule={__init__:['selection','selectionBehavior'],selection:['type',Selection],selectionBehavior:['type',SelectionBehavior]};const types$1=[{label:'Text Field',type:'textfield'},{label:'Number',type:'number'},{label:'Checkbox',type:'checkbox'},{label:'Checklist',type:'checklist'},{label:'Taglist',type:'taglist'},{label:'Radio',type:'radio'},{label:'Select',type:'select'},{label:'Text',type:'text'},{label:'Button',type:'button'}];function Palette(props){return e$1("div",{class:"fjs-palette",children:[e$1("div",{class:"fjs-palette-header",title:"Form elements library",children:[e$1("span",{class:"fjs-hide-compact",children:"FORM ELEMENTS "}),"LIBRARY"]}),e$1("div",{class:"fjs-palette-fields fjs-drag-container fjs-no-drop",children:types$1.map(({label,type})=>{const Icon=iconsByType[type];return e$1("div",{class:"fjs-palette-field fjs-drag-copy fjs-no-drop","data-field-type":type,title:`Create a ${label} element`,children:[Icon?e$1(Icon,{class:"fjs-palette-field-icon",width:"36",height:"36",viewBox:"0 0 54 54"}):null,e$1("span",{class:"fjs-palette-field-text",children:label})]});})})]});}class PaletteRenderer{constructor(paletteConfig,eventBus){const{parent}=paletteConfig||{};this._eventBus=eventBus;this._container=domify$1('<div class="fjs-palette-container"></div>');if(parent){this.attachTo(parent);}this._eventBus.once('formEditor.rendered',500,()=>{this._render();});}/**
      * Attach the palette to a parent node.
      *
      * @param {HTMLElement} container
@@ -7521,7 +7770,7 @@
   const[layout,setLayout]=l$1(createLayout(layoutConfig));y(()=>{if(typeof layoutChanged==='function'){layoutChanged(layout);}},[layout,layoutChanged]);const getLayoutForKey=(key,defaultValue)=>{return get(layout,key,defaultValue);};const setLayoutForKey=(key,config)=>{const newLayout=assign({},layout);set(newLayout,key,config);setLayout(newLayout);};const layoutContext={layout,setLayout,getLayoutForKey,setLayoutForKey};// set-up description context
   const description=createDescriptionContext(descriptionConfig);if(typeof descriptionLoaded==='function'){descriptionLoaded(description);}const getDescriptionForId=(id,element)=>{return description[id]&&description[id](element);};const descriptionContext={description,getDescriptionForId};const[errors,setErrors]=l$1({});const onSetErrors=({errors})=>setErrors(errors);useEvent('propertiesPanel.setErrors',onSetErrors,eventBus);const errorsContext={errors};const eventContext={eventBus};const propertiesPanelContext={element};// empty state
   if(placeholderProvider&&!element){return e$1(Placeholder,{...placeholderProvider.getEmpty()});}// multiple state
-  if(placeholderProvider&&isArray$1(element)){return e$1(Placeholder,{...placeholderProvider.getMultiple()});}return e$1(LayoutContext.Provider,{value:propertiesPanelContext,children:e$1(ErrorsContext.Provider,{value:errorsContext,children:e$1(DescriptionContext.Provider,{value:descriptionContext,children:e$1(LayoutContext.Provider,{value:layoutContext,children:e$1(EventContext.Provider,{value:eventContext,children:e$1("div",{class:classNames('bio-properties-panel',layout.open?'open':''),children:[e$1(Header,{element:element,headerProvider:headerProvider}),e$1("div",{class:"bio-properties-panel-scroll-container",children:groups.map(group=>{const{component:Component=Group,id}=group;return v$1(Component,{...group,key:id,element:element});})})]})})})})})});}// helpers //////////////////
+  if(placeholderProvider&&isArray(element)){return e$1(Placeholder,{...placeholderProvider.getMultiple()});}return e$1(LayoutContext.Provider,{value:propertiesPanelContext,children:e$1(ErrorsContext.Provider,{value:errorsContext,children:e$1(DescriptionContext.Provider,{value:descriptionContext,children:e$1(LayoutContext.Provider,{value:layoutContext,children:e$1(EventContext.Provider,{value:eventContext,children:e$1("div",{class:classNames('bio-properties-panel',layout.open?'open':''),children:[e$1(Header,{element:element,headerProvider:headerProvider}),e$1("div",{class:"bio-properties-panel-scroll-container",children:groups.map(group=>{const{component:Component=Group,id}=group;return v$1(Component,{...group,key:id,element:element});})})]})})})})})});}// helpers //////////////////
   function createLayout(overrides){return {...DEFAULT_LAYOUT,...overrides};}function createDescriptionContext(overrides){return {...DEFAULT_DESCRIPTION,...overrides};}function CollapsibleEntry(props){const{element,entries=[],id,label,open:shouldOpen,remove}=props;const[open,setOpen]=l$1(shouldOpen);const toggleOpen=()=>setOpen(!open);const{onShow}=F$1(LayoutContext);const propertiesPanelContext={...F$1(LayoutContext),onShow:A$1(()=>{setOpen(true);if(isFunction(onShow)){onShow();}},[onShow,setOpen])};// todo(pinussilvestrus): translate once we have a translate mechanism for the core
   const placeholderLabel='<empty>';return e$1("div",{"data-entry-id":id,class:classNames('bio-properties-panel-collapsible-entry',open?'open':''),children:[e$1("div",{class:"bio-properties-panel-collapsible-entry-header",onClick:toggleOpen,children:[e$1("div",{title:label||placeholderLabel,class:classNames('bio-properties-panel-collapsible-entry-header-title',!label&&'empty'),children:label||placeholderLabel}),e$1("button",{title:"Toggle list item",class:"bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",children:e$1(ArrowIcon,{class:open?'bio-properties-panel-arrow-down':'bio-properties-panel-arrow-right'})}),remove?e$1("button",{title:"Delete item",class:"bio-properties-panel-remove-entry",onClick:remove,children:e$1(DeleteIcon,{})}):null]}),e$1("div",{class:classNames('bio-properties-panel-collapsible-entry-entries',open?'open':''),children:e$1(LayoutContext.Provider,{value:propertiesPanelContext,children:entries.map(entry=>{const{component:Component,id}=entry;return v$1(Component,{...entry,element:element,key:id});})})})]});}function ListItem(props){const{autoFocusEntry,autoOpen}=props;// focus specified entry on auto open
   y(()=>{if(autoOpen&&autoFocusEntry){const entry=query(`[data-entry-id="${autoFocusEntry}"]`);const focusableInput=query('.bio-properties-panel-input',entry);if(focusableInput){if(isFunction(focusableInput.select)){focusableInput.select();}else if(isFunction(focusableInput.focus)){focusableInput.focus();}}}},[autoOpen,autoFocusEntry]);return e$1("div",{class:"bio-properties-panel-list-item",children:e$1(CollapsibleEntry,{...props,open:autoOpen})});}const noop$2=()=>{};/**
@@ -11250,7 +11499,8 @@ meta:   meta$1,/// [Metadata](#highlight.tags.meta) that applies to the entire
    * @returns {Object}
    */function updateKey(properties,oldKey,newKey){return Object.entries(properties).reduce((newProperties,entry)=>{const[key,value]=entry;return {...newProperties,[key===oldKey?newKey:key]:value};},{});}const VALUES_SOURCES={STATIC:'static',INPUT:'input'};const VALUES_SOURCE_DEFAULT=VALUES_SOURCES.STATIC;const VALUES_SOURCES_LABELS={[VALUES_SOURCES.STATIC]:'Static',[VALUES_SOURCES.INPUT]:'Input data'};const VALUES_SOURCES_PATHS={[VALUES_SOURCES.STATIC]:['values'],[VALUES_SOURCES.INPUT]:['valuesKey']};const VALUES_SOURCES_DEFAULTS={[VALUES_SOURCES.STATIC]:[],[VALUES_SOURCES.INPUT]:''};// helpers ///////////////////
   function getValuesSource(field){for(const source of Object.values(VALUES_SOURCES)){if(get(field,VALUES_SOURCES_PATHS[source])!==undefined){return source;}}return VALUES_SOURCE_DEFAULT;}function ValuesSourceSelectEntry(props){const{editField,field,id}=props;return [{id:id+'-select',component:ValuesSourceSelect,isEdited:isEdited$4,editField,field}];}function ValuesSourceSelect(props){const{editField,field,id}=props;const getValue=getValuesSource;const setValue=value=>{let newField=field;const newProperties={};Object.values(VALUES_SOURCES).forEach(source=>{// Clear all values source definitions and default the newly selected one
-  const newValue=value===source?VALUES_SOURCES_DEFAULTS[source]:undefined;newProperties[VALUES_SOURCES_PATHS[source]]=newValue;});newField=editField(field,newProperties);return newField;};const getValuesSourceOptions=()=>{return Object.values(VALUES_SOURCES).map(valueSource=>({label:VALUES_SOURCES_LABELS[valueSource],value:valueSource}));};return SelectEntry({label:'Type',element:field,getOptions:getValuesSourceOptions,getValue,id,setValue});}function InputKeyValuesSourceEntry(props){const{editField,field,id}=props;return [{id:id+'-key',component:InputValuesKey,label:'Input values key',description:'Define which input property to populate the values from',isEdited:isEdited$1,editField,field}];}function InputValuesKey(props){const{editField,field,id,label,description}=props;const debounce=useService('debounce');const path=VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];const getValue=()=>get(field,path,'');const setValue=value=>editField(field,path,value||'');return TextfieldEntry({debounce,description,element:field,getValue,id,label,setValue});}function StaticValuesSourceEntry(props){const{editField,field,id:idPrefix}=props;const{values}=field;const addEntry=e=>{e.stopPropagation();const index=values.length+1;const entry={label:`Value ${index}`,value:`value${index}`};editField(field,VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC],arrayAdd(values,values.length,entry));};const removeEntry=entry=>{editField(field,VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC],without(values,entry));};const validateFactory=key=>{return value=>{if(value===key){return;}if(isUndefined(value)||!value.length){return 'Must not be empty.';}const isValueAssigned=values.find(entry=>entry.value===value);if(isValueAssigned){return 'Must be unique.';}};};const items=values.map((entry,index)=>{const id=idPrefix+'-'+index;return {id,label:entry.label,entries:ValueEntry({editField,field,idPrefix:id,index,validateFactory}),autoFocusEntry:id+'-label',remove:()=>removeEntry(entry)};});return {items,add:addEntry,shouldSort:false};}function GeneralGroup(field,editField){const entries=[...IdEntry({field,editField}),...LabelEntry({field,editField}),...DescriptionEntry({field,editField}),...KeyEntry({field,editField}),...DefaultOptionEntry({field,editField}),...ActionEntry({field,editField}),...ColumnsEntry({field,editField}),...TextEntry({field,editField}),...DisabledEntry({field,editField})];return {id:'general',label:'General',entries};}function ValidationGroup(field,editField){const{type}=field;if(!(INPUTS.includes(type)&&type!=='checkbox'&&type!=='checklist'&&type!=='taglist')){return null;}const onChange=key=>{return value=>{const validate=get(field,['validate'],{});editField(field,['validate'],set(validate,[key],value));};};const getValue=key=>{return ()=>{return get(field,['validate',key]);};};let entries=[{id:'required',component:Required,getValue,field,isEdited:isEdited$7,onChange}];if(type==='textfield'){entries.push({id:'minLength',component:MinLength,getValue,field,isEdited:isEdited$5,onChange},{id:'maxLength',component:MaxLength,getValue,field,isEdited:isEdited$5,onChange},{id:'pattern',component:Pattern,getValue,field,isEdited:isEdited$1,onChange});}if(type==='number'){entries.push({id:'min',component:Min,getValue,field,isEdited:isEdited$5,onChange},{id:'max',component:Max,getValue,field,isEdited:isEdited$5,onChange});}return {id:'validation',label:'Validation',entries};}function Required(props){const{field,getValue,id,onChange}=props;return CheckboxEntry({element:field,getValue:getValue('required'),id,label:'Required',setValue:onChange('required')});}function MinLength(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('minLength'),id,label:'Minimum length',min:0,setValue:onChange('minLength')});}function MaxLength(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('maxLength'),id,label:'Maximum length',min:0,setValue:onChange('maxLength')});}function Pattern(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return TextfieldEntry({debounce,element:field,getValue:getValue('pattern'),id,label:'Regular expression pattern',setValue:onChange('pattern')});}function Min(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('min'),id,label:'Minimum',min:0,setValue:onChange('min')});}function Max(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('max'),id,label:'Maximum',min:0,setValue:onChange('max')});}function ValuesGroups(field,editField){const{type,id:fieldId}=field;if(!VALUES_INPUTS.includes(type)){return [];}const context={editField,field};const valuesSourceId=`${fieldId}-valuesSource`;/**
+  const newValue=value===source?VALUES_SOURCES_DEFAULTS[source]:undefined;newProperties[VALUES_SOURCES_PATHS[source]]=newValue;});newField=editField(field,newProperties);return newField;};const getValuesSourceOptions=()=>{return Object.values(VALUES_SOURCES).map(valueSource=>({label:VALUES_SOURCES_LABELS[valueSource],value:valueSource}));};return SelectEntry({label:'Type',element:field,getOptions:getValuesSourceOptions,getValue,id,setValue});}function InputKeyValuesSourceEntry(props){const{editField,field,id}=props;return [{id:id+'-key',component:InputValuesKey,label:'Input values key',description:'Define which input property to populate the values from',isEdited:isEdited$1,editField,field}];}function InputValuesKey(props){const{editField,field,id,label,description}=props;const debounce=useService('debounce');const path=VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];const getValue=()=>get(field,path,'');const setValue=value=>editField(field,path,value||'');return TextfieldEntry({debounce,description,element:field,getValue,id,label,setValue});}function StaticValuesSourceEntry(props){const{editField,field,id:idPrefix}=props;const{values}=field;const addEntry=e=>{e.stopPropagation();const index=values.length+1;const entry=getIndexedEntry(index);editField(field,VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC],arrayAdd(values,values.length,entry));};const removeEntry=entry=>{editField(field,VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC],without(values,entry));};const validateFactory=key=>{return value=>{if(value===key){return;}if(isUndefined(value)||!value.length){return 'Must not be empty.';}const isValueAssigned=values.find(entry=>entry.value===value);if(isValueAssigned){return 'Must be unique.';}};};const items=values.map((entry,index)=>{const id=idPrefix+'-'+index;return {id,label:entry.label,entries:ValueEntry({editField,field,idPrefix:id,index,validateFactory}),autoFocusEntry:id+'-label',remove:()=>removeEntry(entry)};});return {items,add:addEntry,shouldSort:false};}// helper
+  function getIndexedEntry(index){const entry={label:'Value',value:'value'};if(index>1){entry.label+=` ${index}`;entry.value+=`${index}`;}return entry;}function GeneralGroup(field,editField){const entries=[...IdEntry({field,editField}),...LabelEntry({field,editField}),...DescriptionEntry({field,editField}),...KeyEntry({field,editField}),...DefaultOptionEntry({field,editField}),...ActionEntry({field,editField}),...ColumnsEntry({field,editField}),...TextEntry({field,editField}),...DisabledEntry({field,editField})];return {id:'general',label:'General',entries};}function ValidationGroup(field,editField){const{type}=field;if(!(INPUTS.includes(type)&&type!=='checkbox'&&type!=='checklist'&&type!=='taglist')){return null;}const onChange=key=>{return value=>{const validate=get(field,['validate'],{});editField(field,['validate'],set(validate,[key],value));};};const getValue=key=>{return ()=>{return get(field,['validate',key]);};};let entries=[{id:'required',component:Required,getValue,field,isEdited:isEdited$7,onChange}];if(type==='textfield'){entries.push({id:'minLength',component:MinLength,getValue,field,isEdited:isEdited$5,onChange},{id:'maxLength',component:MaxLength,getValue,field,isEdited:isEdited$5,onChange},{id:'pattern',component:Pattern,getValue,field,isEdited:isEdited$1,onChange});}if(type==='number'){entries.push({id:'min',component:Min,getValue,field,isEdited:isEdited$5,onChange},{id:'max',component:Max,getValue,field,isEdited:isEdited$5,onChange});}return {id:'validation',label:'Validation',entries};}function Required(props){const{field,getValue,id,onChange}=props;return CheckboxEntry({element:field,getValue:getValue('required'),id,label:'Required',setValue:onChange('required')});}function MinLength(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('minLength'),id,label:'Minimum length',min:0,setValue:onChange('minLength')});}function MaxLength(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('maxLength'),id,label:'Maximum length',min:0,setValue:onChange('maxLength')});}function Pattern(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return TextfieldEntry({debounce,element:field,getValue:getValue('pattern'),id,label:'Regular expression pattern',setValue:onChange('pattern')});}function Min(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('min'),id,label:'Minimum',min:0,setValue:onChange('min')});}function Max(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('max'),id,label:'Maximum',min:0,setValue:onChange('max')});}function ValuesGroups(field,editField){const{type,id:fieldId}=field;if(!VALUES_INPUTS.includes(type)){return [];}const context={editField,field};const valuesSourceId=`${fieldId}-valuesSource`;/**
      * @type {Array<Group|ListGroup>}
      */const groups=[{id:valuesSourceId,label:'Options source',component:Group,entries:ValuesSourceSelectEntry({...context,id:valuesSourceId})}];const valuesSource=getValuesSource(field);if(valuesSource===VALUES_SOURCES.INPUT){const dynamicValuesId=`${fieldId}-dynamicValues`;groups.push({id:dynamicValuesId,label:'Dynamic options',component:Group,entries:InputKeyValuesSourceEntry({...context,id:dynamicValuesId})});}else if(valuesSource===VALUES_SOURCES.STATIC){const staticValuesId=`${fieldId}-staticValues`;groups.push({id:staticValuesId,label:'Static options',component:ListGroup,...StaticValuesSourceEntry({...context,id:staticValuesId})});}return groups;}function CustomValuesGroup(field,editField){const{properties={},type}=field;if(type==='default'){return null;}const addEntry=event=>{event.stopPropagation();const index=Object.keys(properties).length+1;const key=`key${index}`,value='value';editField(field,['properties'],{...properties,[key]:value});};const validateFactory=key=>{return value=>{if(value===key){return;}if(isUndefined(value)||!value.length){return 'Must not be empty.';}if(has(properties,value)){return 'Must be unique.';}};};const items=Object.keys(properties).map((key,index)=>{const removeEntry=event=>{event.stopPropagation();return editField(field,['properties'],removeKey(properties,key));};const id=`${field.id}-property-${index}`;return {autoFocusEntry:id+'-key',entries:CustomValueEntry({editField,field,idPrefix:id,index,validateFactory}),id,label:key||'',remove:removeEntry};});return {add:addEntry,component:ListGroup,id:'custom-values',items,label:'Custom properties',shouldSort:false};}// helpers //////////
   /**
@@ -11265,7 +11515,7 @@ meta:   meta$1,/// [Metadata](#highlight.tags.meta) that applies to the entire
   eventBus.fire('propertiesPanel.updated',{formField:field});};h(()=>{function onSelectionChange(event){_update(event.selection||schema);}eventBus.on('selection.changed',onSelectionChange);return ()=>{eventBus.off('selection.changed',onSelectionChange);};},[]);h(()=>{const onFieldChanged=()=>{/**
          * TODO(pinussilvestrus): update with actual updated element,
          * once we have a proper updater/change support
-         */_update(selection.get()||schema);};eventBus.on('changed',onFieldChanged);return ()=>{eventBus.off('changed',onFieldChanged);};},[]);const selectedFormField=state.selectedFormField;const propertiesPanelContext={getService(type,strict=true){return injector.get(type,strict);}};const onFocus=()=>eventBus.fire('propertiesPanel.focusin');const onBlur=()=>eventBus.fire('propertiesPanel.focusout');const editField=A$1((formField,key,value)=>modeling.editFormField(formField,key,value),[modeling]);return e$1("div",{class:"fjs-properties-panel","data-field":selectedFormField&&selectedFormField.id,onFocusCapture:onFocus,onBlurCapture:onBlur,children:e$1(PropertiesPanelContext.Provider,{value:propertiesPanelContext,children:e$1(PropertiesPanel,{element:selectedFormField,eventBus:eventBus,groups:getGroups(selectedFormField,editField),headerProvider:PropertiesPanelHeaderProvider,placeholderProvider:PropertiesPanelPlaceholderProvider})})});}class PropertiesPanelRenderer{constructor(propertiesPanelConfig,injector,eventBus){const{parent}=propertiesPanelConfig||{};this._eventBus=eventBus;this._injector=injector;this._container=domify('<div class="fjs-properties-container" input-handle-modified-keys="y,z"></div>');if(parent){this.attachTo(parent);}this._eventBus.once('formEditor.rendered',500,()=>{this._render();});}/**
+         */_update(selection.get()||schema);};eventBus.on('changed',onFieldChanged);return ()=>{eventBus.off('changed',onFieldChanged);};},[]);const selectedFormField=state.selectedFormField;const propertiesPanelContext={getService(type,strict=true){return injector.get(type,strict);}};const onFocus=()=>eventBus.fire('propertiesPanel.focusin');const onBlur=()=>eventBus.fire('propertiesPanel.focusout');const editField=A$1((formField,key,value)=>modeling.editFormField(formField,key,value),[modeling]);return e$1("div",{class:"fjs-properties-panel","data-field":selectedFormField&&selectedFormField.id,onFocusCapture:onFocus,onBlurCapture:onBlur,children:e$1(PropertiesPanelContext.Provider,{value:propertiesPanelContext,children:e$1(PropertiesPanel,{element:selectedFormField,eventBus:eventBus,groups:getGroups(selectedFormField,editField),headerProvider:PropertiesPanelHeaderProvider,placeholderProvider:PropertiesPanelPlaceholderProvider})})});}class PropertiesPanelRenderer{constructor(propertiesPanelConfig,injector,eventBus){const{parent}=propertiesPanelConfig||{};this._eventBus=eventBus;this._injector=injector;this._container=domify$1('<div class="fjs-properties-container" input-handle-modified-keys="y,z"></div>');if(parent){this.attachTo(parent);}this._eventBus.once('formEditor.rendered',500,()=>{this._render();});}/**
      * Attach the properties panel to a parent node.
      *
      * @param {HTMLElement} container
@@ -40134,7 +40384,7 @@ meta:   meta$1,/// [Metadata](#highlight.tags.meta) that applies to the entire
     const [initialSchema, setInitialSchema] = l$1(props.schema);
     const [data, setData] = l$1(props.data || {});
     const [schema, setSchema] = l$1(props.schema);
-    const [resultData, setResultData] = l$1(props.data || {}); // pipe to playground API
+    const [resultData, setResultData] = l$1({}); // pipe to playground API
 
     y(() => {
       props.onInit({
@@ -40145,7 +40395,10 @@ meta:   meta$1,/// [Metadata](#highlight.tags.meta) that applies to the entire
         attachPropertiesPanelContainer: node => propertiesPanelRef.current.attachTo(node),
         attachResultContainer: node => resultViewRef.current.attachTo(node),
         get: (name, strict) => formEditorRef.current.get(name, strict),
+        getDataEditor: () => dataEditorRef.current,
         getEditor: () => formEditorRef.current,
+        getForm: () => formRef.current,
+        getResultView: () => resultViewRef.current,
         getSchema: () => formEditorRef.current.getSchema(),
         setSchema: setInitialSchema,
         saveSchema: () => formEditorRef.current.saveSchema()
@@ -40184,8 +40437,8 @@ meta:   meta$1,/// [Metadata](#highlight.tags.meta) that applies to the entire
         // notifiy interested parties after render
         emit('formPlayground.rendered');
       });
-      form.on('changed', event => {
-        setResultData(event.data);
+      form.on('changed', () => {
+        setResultData(form._getSubmitData());
       });
       dataEditor.on('changed', event => {
         try {
@@ -40369,44 +40622,25 @@ meta:   meta$1,/// [Metadata](#highlight.tags.meta) that applies to the entire
       return state;
     };
 
-    this.getSchema = withRef(function () {
-      return ref.getSchema();
-    });
-    this.setSchema = withRef(function (schema) {
-      return ref.setSchema(schema);
-    });
-    this.saveSchema = withRef(function () {
-      return ref.saveSchema();
-    });
-    this.get = withRef(function (name, strict) {
-      return ref.get(name, strict);
-    });
-    this.getEditor = withRef(function () {
-      return ref.getEditor();
-    });
+    this.getSchema = withRef(() => ref.getSchema());
+    this.setSchema = withRef(schema => ref.setSchema(schema));
+    this.saveSchema = withRef(() => ref.saveSchema());
+    this.get = withRef((name, strict) => ref.get(name, strict));
+    this.getDataEditor = withRef(() => ref.getDataEditor());
+    this.getEditor = withRef(() => ref.getEditor());
+    this.getForm = withRef((name, strict) => ref.getForm(name, strict));
+    this.getResultView = withRef(() => ref.getResultView());
 
     this.destroy = function () {
       this.emit('destroy');
     };
 
-    this.attachEditorContainer = withRef(function (node) {
-      return ref.attachEditorContainer(node);
-    });
-    this.attachPreviewContainer = withRef(function (node) {
-      return ref.attachFormContainer(node);
-    });
-    this.attachDataContainer = withRef(function (node) {
-      return ref.attachDataContainer(node);
-    });
-    this.attachResultContainer = withRef(function (node) {
-      return ref.attachResultContainer(node);
-    });
-    this.attachPaletteContainer = withRef(function (node) {
-      return ref.attachPaletteContainer(node);
-    });
-    this.attachPropertiesPanelContainer = withRef(function (node) {
-      return ref.attachPropertiesPanelContainer(node);
-    });
+    this.attachEditorContainer = withRef(node => ref.attachEditorContainer(node));
+    this.attachPreviewContainer = withRef(node => ref.attachFormContainer(node));
+    this.attachDataContainer = withRef(node => ref.attachDataContainer(node));
+    this.attachResultContainer = withRef(node => ref.attachResultContainer(node));
+    this.attachPaletteContainer = withRef(node => ref.attachPaletteContainer(node));
+    this.attachPropertiesPanelContainer = withRef(node => ref.attachPropertiesPanelContainer(node));
   }
 
   exports.Playground = Playground;