@bpmn-io/form-js-editor 0.10.0-alpha.0 → 0.10.0-alpha.2

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { FormFieldRegistry as FormFieldRegistry$1, clone, FormContext, FormRenderContext, FormComponent, FormFields, Default, createFormContainer, createInjector, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, clone, FormContext, FormRenderContext, FormComponent, FormFields, getSchemaVariables, Default, createFormContainer, createInjector, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, set, isUndefined, without, has, isString } from 'min-dash';
@@ -11,6 +11,7 @@ import { matches, closest, event, domify, query } from 'min-dom';
 import { mutate } from 'array-move';
 import classnames from 'classnames';
 import FeelEditor from '@bpmn-io/feel-editor';
+import Big from 'big.js';
 
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY$2 = 1000;
@@ -692,11 +693,11 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : 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$c.apply(this, arguments); }
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : 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); }
 var ListDeleteIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$c({
+}) => /*#__PURE__*/React.createElement("svg", _extends$d({
   xmlns: "http://www.w3.org/2000/svg",
   width: "11",
   height: "14"
@@ -704,11 +705,11 @@ var ListDeleteIcon = (({
   d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
 })));
 
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : 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$b.apply(this, arguments); }
+function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : 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$c.apply(this, arguments); }
 var ButtonIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$b({
+}) => /*#__PURE__*/React.createElement("svg", _extends$c({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -717,11 +718,11 @@ var ButtonIcon = (({
   d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18V25.89z"
 })));
 
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : 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$a.apply(this, arguments); }
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : 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$b.apply(this, arguments); }
 var CheckboxIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$a({
+}) => /*#__PURE__*/React.createElement("svg", _extends$b({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -729,11 +730,11 @@ var CheckboxIcon = (({
   d: "M34 18H20a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V20a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
 })));
 
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : 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$9.apply(this, arguments); }
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : 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$a.apply(this, arguments); }
 var ChecklistIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$9({
+}) => /*#__PURE__*/React.createElement("svg", _extends$a({
   width: "54",
   height: "54",
   fill: "none",
@@ -748,11 +749,11 @@ var ChecklistIcon = (({
   fill: "#22242A"
 })));
 
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : 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$8.apply(this, arguments); }
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : 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$9.apply(this, arguments); }
 var TaglistIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$8({
+}) => /*#__PURE__*/React.createElement("svg", _extends$9({
   width: "54",
   height: "54",
   fill: "none",
@@ -767,11 +768,11 @@ var TaglistIcon = (({
   fill: "#505562"
 })));
 
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : 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$7.apply(this, arguments); }
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : 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$8.apply(this, arguments); }
 var FormIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$7({
+}) => /*#__PURE__*/React.createElement("svg", _extends$8({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -795,11 +796,11 @@ var FormIcon = (({
   rx: "1"
 })));
 
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : 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$6.apply(this, arguments); }
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : 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$7.apply(this, arguments); }
 var ColumnsIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$6({
+}) => /*#__PURE__*/React.createElement("svg", _extends$7({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -808,11 +809,11 @@ var ColumnsIcon = (({
   d: "M8 33v5a1 1 0 001 1h4v2H9a3 3 0 01-3-3v-5h2zm18 6v2H15v-2h11zm13 0v2H28v-2h11zm9-6v5a3 3 0 01-3 3h-4v-2h4a1 1 0 00.993-.883L46 38v-5h2zM8 22v9H6v-9h2zm40 0v9h-2v-9h2zm-35-9v2H9a1 1 0 00-.993.883L8 16v4H6v-4a3 3 0 013-3h4zm32 0a3 3 0 013 3v4h-2v-4a1 1 0 00-.883-.993L45 15h-4v-2h4zm-6 0v2H28v-2h11zm-13 0v2H15v-2h11z"
 })));
 
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : 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$5.apply(this, arguments); }
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : 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$6.apply(this, arguments); }
 var NumberIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$5({
+}) => /*#__PURE__*/React.createElement("svg", _extends$6({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -821,11 +822,11 @@ var NumberIcon = (({
   d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
 })));
 
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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$4.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : 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$5.apply(this, arguments); }
 var RadioIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$4({
+}) => /*#__PURE__*/React.createElement("svg", _extends$5({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -833,11 +834,11 @@ var RadioIcon = (({
   d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
 })));
 
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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$3.apply(this, arguments); }
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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$4.apply(this, arguments); }
 var SelectIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$3({
+}) => /*#__PURE__*/React.createElement("svg", _extends$4({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -846,11 +847,11 @@ var SelectIcon = (({
   d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-12 7h9l-4.5 6-4.5-6z"
 })));
 
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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$2.apply(this, arguments); }
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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$3.apply(this, arguments); }
 var TextIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$2({
+}) => /*#__PURE__*/React.createElement("svg", _extends$3({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -858,11 +859,11 @@ var TextIcon = (({
   d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zM44.35 28.79l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
 })));
 
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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$2.apply(this, arguments); }
 var TextfieldIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
+}) => /*#__PURE__*/React.createElement("svg", _extends$2({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -871,11 +872,11 @@ var TextfieldIcon = (({
   d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"
 })));
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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$1.apply(this, arguments); }
 var TextareaIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
+}) => /*#__PURE__*/React.createElement("svg", _extends$1({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -884,11 +885,33 @@ var TextareaIcon = (({
   d: "M45 13a3 3 0 013 3v22a3 3 0 01-3 3H9a3 3 0 01-3-3V16a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v22a1 1 0 001 1h36a1 1 0 001-1V16a1 1 0 00-1-1zm-1.136 15.5l.848.849-6.363 6.363-.849-.848 6.364-6.364zm.264 3.5l.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
 })));
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
+var ImageIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "54",
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M34.636 21.91A3.818 3.818 0 1127 21.908a3.818 3.818 0 017.636 0zm-2 0A1.818 1.818 0 1129 21.908a1.818 1.818 0 013.636 0z",
+  fill: "#000"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754c.06-.038.116-.083.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z",
+  fill: "#000"
+})));
+
 const iconsByType = {
   button: ButtonIcon,
   checkbox: CheckboxIcon,
   checklist: ChecklistIcon,
   columns: ColumnsIcon,
+  image: ImageIcon,
   number: NumberIcon,
   radio: RadioIcon,
   select: SelectIcon,
@@ -1528,14 +1551,10 @@ var EditorActionsModule = {
   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];
+var KEYS_COPY = ['c', 'C', 'KeyC'];
+var KEYS_PASTE = ['v', 'V', 'KeyV'];
+var KEYS_REDO$1 = ['y', 'Y', 'KeyY'];
+var KEYS_UNDO$1 = ['z', 'Z', 'KeyZ'];
 
 /**
  * Returns true if event was triggered with any modifier
@@ -1565,7 +1584,7 @@ function isCmd(event) {
  */
 function isKey(keys, event) {
   keys = isArray(keys) ? keys : [keys];
-  return keys.indexOf(event.key) !== -1 || keys.indexOf(event.keyCode) !== -1;
+  return keys.indexOf(event.key) !== -1 || keys.indexOf(event.code) !== -1;
 }
 
 /**
@@ -1594,7 +1613,7 @@ var DEFAULT_PRIORITY$1 = 1000;
 
 /**
  * A keyboard abstraction that may be activated and
- * deactivated by users at will, consuming key events
+ * deactivated by users at will, consuming global key events
  * and triggering diagram actions.
  *
  * For keys pressed down, keyboard fires `keyboard.keydown` event.
@@ -1661,6 +1680,9 @@ Keyboard.prototype._keyHandler = function (event, type) {
   }
 };
 Keyboard.prototype._isEventIgnored = function (event) {
+  if (event.defaultPrevented) {
+    return true;
+  }
   return isInput(event.target) && this._isModifiedKeyIgnored(event);
 };
 Keyboard.prototype._isModifiedKeyIgnored = function (event) {
@@ -1683,8 +1705,8 @@ Keyboard.prototype.bind = function (node) {
   this._node = node;
 
   // bind key events
-  event.bind(node, 'keydown', this._keydownHandler, true);
-  event.bind(node, 'keyup', this._keyupHandler, true);
+  event.bind(node, 'keydown', this._keydownHandler);
+  event.bind(node, 'keyup', this._keyupHandler);
   this._fire('bind');
 };
 Keyboard.prototype.getBinding = function () {
@@ -1696,8 +1718,8 @@ Keyboard.prototype.unbind = function () {
     this._fire('unbind');
 
     // unbind key events
-    event.unbind(node, 'keydown', this._keydownHandler, true);
-    event.unbind(node, 'keyup', this._keyupHandler, true);
+    event.unbind(node, 'keydown', this._keydownHandler);
+    event.unbind(node, 'keyup', this._keyupHandler);
   }
   this._node = null;
 };
@@ -1739,10 +1761,8 @@ function isInput(target) {
 }
 
 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];
+var KEYS_REDO = ['y', 'Y', 'KeyY'];
+var KEYS_UNDO = ['z', 'Z', 'KeyZ'];
 
 /**
  * Adds default keyboard bindings.
@@ -3092,6 +3112,9 @@ const types = [{
 }, {
   label: 'Text',
   type: 'text'
+}, {
+  label: 'Image view',
+  type: 'image'
 }, {
   label: 'Button',
   type: 'button'
@@ -3256,6 +3279,47 @@ ExternalLinkIcon.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
+var FeelRequiredIcon = function FeelRequiredIcon(props) {
+  return jsxs("svg", {
+    ...props,
+    children: [jsx("path", {
+      d: "M5.8 7.06V5.95h4.307v1.11H5.8Zm0 3.071v-1.11h4.307v1.11H5.8Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304Z",
+      fill: "currentColor"
+    })]
+  });
+};
+FeelRequiredIcon.defaultProps = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var FeelOptionalIcon = function FeelOptionalIcon(props) {
+  return jsxs("svg", {
+    ...props,
+    children: [jsx("path", {
+      d: "M5.845 7.04V5.93h4.307v1.11H5.845Zm0 3.07V9h4.307v1.11H5.845Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0ZM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z",
+      fill: "currentColor"
+    })]
+  });
+};
+FeelOptionalIcon.defaultProps = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 function Header(props) {
   const {
     element,
@@ -4274,7 +4338,7 @@ const useBufferedFocus = function (editor, ref) {
     }
   }, [editor, buffer]);
 };
-forwardRef((props, ref) => {
+const CodeEditor = forwardRef((props, ref) => {
   const {
     value,
     onInput,
@@ -4355,7 +4419,215 @@ forwardRef((props, ref) => {
     })
   });
 });
-forwardRef((props, ref) => {
+function FeelIndicator(props) {
+  const {
+    active
+  } = props;
+  if (!active) {
+    return null;
+  }
+  return jsx("span", {
+    class: "bio-properties-panel-feel-indicator",
+    children: "="
+  });
+}
+const noop$1 = () => {};
+
+/**
+ * @param {Object} props
+ * @param {Object} props.label
+ * @param {String} props.feel
+ */
+function FeelIcon(props) {
+  const {
+    label,
+    feel = false,
+    active,
+    disabled = false,
+    onClick = noop$1
+  } = props;
+  const feelRequiredLabel = ' must be a FEEL expression';
+  const feelOptionalLabel = ' can optionally be a FEEL expression';
+  const handleClick = e => {
+    onClick(e);
+
+    // when pointer event was created from keyboard, keep focus on button
+    if (!e.pointerType) {
+      e.stopPropagation();
+    }
+  };
+  return jsx("button", {
+    class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
+    onClick: handleClick,
+    disabled: feel === 'required' || disabled,
+    title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
+    children: feel === 'required' ? jsx(FeelRequiredIcon, {}) : jsx(FeelOptionalIcon, {})
+  });
+}
+const noop = () => {};
+function FeelTextfield(props) {
+  const {
+    debounce,
+    id,
+    label,
+    onInput,
+    onError,
+    feel,
+    value = '',
+    disabled = false,
+    variables,
+    tooltipContainer,
+    OptionalComponent = OptionalFeelInput
+  } = props;
+  const [localValue, _setLocalValue] = useState(value);
+  const editorRef = useShowEntryEvent(id);
+  const containerRef = useRef();
+  const feelActive = localValue.startsWith('=') || feel === 'required';
+  const feelOnlyValue = localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const [focus, _setFocus] = useState(undefined);
+  const setFocus = (offset = 0) => {
+    const hasFocus = containerRef.current.contains(document.activeElement);
+
+    // Keep caret position if it is already focused, otherwise focus at the end
+    const position = hasFocus ? document.activeElement.selectionStart : Infinity;
+    _setFocus(position + offset);
+  };
+  const handleInputCallback = useMemo(() => {
+    return debounce(newValue => {
+      onInput(newValue);
+    });
+  }, [onInput, debounce]);
+  const setLocalValue = newValue => {
+    _setLocalValue(newValue);
+    if (!newValue || newValue === '=') {
+      handleInputCallback(undefined);
+    } else {
+      handleInputCallback(newValue);
+    }
+  };
+  const handleFeelToggle = useStaticCallback(() => {
+    if (feel === 'required') {
+      return;
+    }
+    if (!feelActive) {
+      setLocalValue('=' + localValue);
+    } else {
+      setLocalValue(feelOnlyValue);
+    }
+  });
+  const handleLocalInput = newValue => {
+    if (feelActive) {
+      newValue = '=' + newValue;
+    }
+    if (newValue === localValue) {
+      return;
+    }
+    setLocalValue(newValue);
+    if (!feelActive && newValue.startsWith('=')) {
+      // focus is behind `=` sign that will be removed
+      setFocus(-1);
+    }
+  };
+  const handleLint = useStaticCallback(lint => {
+    if (!(lint && lint.length)) {
+      onError(undefined);
+      return;
+    }
+    const error = lint[0];
+    const message = `${error.source}: ${error.message}`;
+    onError(message);
+  });
+  useEffect(() => {
+    if (typeof focus !== 'undefined') {
+      editorRef.current.focus(focus);
+      _setFocus(undefined);
+    }
+  }, [focus]);
+  useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+
+    // External value change removed content => keep FEEL configuration
+    if (!value) {
+      setLocalValue(feelActive ? '=' : '');
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+
+  // copy-paste integration
+  useEffect(() => {
+    const copyHandler = event => {
+      if (!feelActive) {
+        return;
+      }
+      event.clipboardData.setData('application/FEEL', event.clipboardData.getData('text'));
+    };
+    const pasteHandler = event => {
+      if (feelActive) {
+        return;
+      }
+      const data = event.clipboardData.getData('application/FEEL');
+      if (data) {
+        setTimeout(() => {
+          handleFeelToggle();
+          setFocus();
+        });
+      }
+    };
+    containerRef.current.addEventListener('copy', copyHandler);
+    containerRef.current.addEventListener('cut', copyHandler);
+    containerRef.current.addEventListener('paste', pasteHandler);
+    return () => {
+      containerRef.current.removeEventListener('copy', copyHandler);
+      containerRef.current.removeEventListener('cut', copyHandler);
+      containerRef.current.removeEventListener('paste', pasteHandler);
+    };
+  }, [containerRef, feelActive, handleFeelToggle, setFocus]);
+  return jsxs("div", {
+    class: "bio-properties-panel-feel-entry",
+    children: [jsxs("label", {
+      for: prefixId$6(id),
+      class: "bio-properties-panel-label",
+      onClick: () => setFocus(),
+      children: [label, jsx(FeelIcon, {
+        label: label,
+        feel: feel,
+        onClick: handleFeelToggle,
+        active: feelActive
+      })]
+    }), jsxs("div", {
+      class: "bio-properties-panel-feel-container",
+      ref: containerRef,
+      children: [jsx(FeelIndicator, {
+        active: feelActive,
+        disabled: feel !== 'optional' || disabled,
+        onClick: handleFeelToggle
+      }), feelActive ? jsx(CodeEditor, {
+        id: prefixId$6(id),
+        name: id,
+        onInput: handleLocalInput,
+        disabled: disabled,
+        onFeelToggle: () => {
+          handleFeelToggle();
+          setFocus(true);
+        },
+        onLint: handleLint,
+        value: feelOnlyValue,
+        variables: variables,
+        ref: editorRef,
+        tooltipContainer: tooltipContainer
+      }) : jsx(OptionalComponent, {
+        ...props,
+        onInput: handleLocalInput,
+        value: localValue,
+        ref: editorRef
+      })]
+    })]
+  });
+}
+const OptionalFeelInput = forwardRef((props, ref) => {
   const {
     id,
     disabled,
@@ -4433,10 +4705,109 @@ forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
-    value: value || ''
+    value: value || '',
+    "data-gramm": "false"
   });
 });
 
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.validate
+ */
+function FeelEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    disabled,
+    feel,
+    label,
+    getValue,
+    setValue,
+    tooltipContainer,
+    validate,
+    show = noop,
+    example,
+    variables,
+    onFocus,
+    onBlur
+  } = props;
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const [validationError, setValidationError] = useState(null);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [value]);
+  const onInput = useStaticCallback(newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      // don't create multiple commandStack entries for the same value
+      if (newValue !== value) {
+        setValue(newValue);
+      }
+    }
+    setValidationError(newValidationError);
+  });
+  const onError = useCallback(err => {
+    setLocalError(err);
+  }, []);
+  if (previousValue === value && validationError) {
+    value = cachedInvalidValue;
+  }
+  const temporaryError = useError(id);
+  const error = localError || temporaryError || validationError;
+  return jsxs("div", {
+    class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(FeelTextfield, {
+      debounce: debounce,
+      disabled: disabled,
+      feel: feel,
+      id: id,
+      label: label,
+      onInput: onInput,
+      onError: onError,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      example: example,
+      show: show,
+      value: value,
+      variables: variables,
+      tooltipContainer: tooltipContainer,
+      OptionalComponent: props.OptionalComponent
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && (!!node.value || node.classList.contains('edited'));
+}
+
 // helpers /////////////////
 
 function prefixId$6(id) {
@@ -4729,7 +5100,8 @@ function TextArea(props) {
       onBlur: onBlur,
       rows: rows,
       value: localValue,
-      disabled: disabled
+      disabled: disabled,
+      "data-gramm": "false"
     })]
   });
 }
@@ -4953,6 +5325,14 @@ function arrayAdd(array, index, item) {
   copy.splice(index, 0, item);
   return copy;
 }
+function countDecimals(number) {
+  const num = Big(number);
+  if (num.toString() === num.toFixed(0)) return 0;
+  return num.toFixed().split('.')[1].length || 0;
+}
+function isValidNumber(value) {
+  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
+}
 function textToLabel(text) {
   if (typeof text != 'string') return null;
   for (const line of text.split('\n')) {
@@ -4974,6 +5354,7 @@ const labelsByType = {
   checklist: 'CHECKLIST',
   columns: 'COLUMNS',
   default: 'FORM',
+  image: 'IMAGE',
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',
@@ -4990,6 +5371,9 @@ const PropertiesPanelHeaderProvider = {
     if (type === 'text') {
       return textToLabel(field.text);
     }
+    if (type === 'image') {
+      return field.alt;
+    }
     if (type === 'default') {
       return field.id;
     }
@@ -5089,6 +5473,66 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
+ */
+function useVariables() {
+  const form = useService('formEditor');
+  const schema = form.getSchema();
+  return getSchemaVariables(schema);
+}
+
+function AltTextEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+  if (type === 'image') {
+    entries.push({
+      id: 'alt',
+      component: AltText,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6
+    });
+  }
+  return entries;
+}
+function AltText(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['alt'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return FeelEntry({
+    debounce,
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'Alternative text',
+    setValue,
+    variables
+  });
+}
+
 function ColumnsEntry(props) {
   const {
     editField,
@@ -5217,7 +5661,7 @@ function DefaultOptionEntry(props) {
     entries.push({
       ...defaultOptions,
       component: DefaultValueNumber,
-      isEdited: isEdited$5
+      isEdited: isEdited$1
     });
   }
   if (type === 'radio' || type === 'select') {
@@ -5288,21 +5732,39 @@ function DefaultValueNumber(props) {
     id,
     label
   } = props;
+  const {
+    decimalDigits,
+    serializeToString = false
+  } = field;
   const debounce = useService('debounce');
   const path = ['defaultValue'];
-  const getValue = () => {
-    return get(field, path, '');
+  const getValue = e => {
+    let value = get(field, path);
+    if (!isValidNumber(value)) return;
+
+    // Enforces decimal notation so that we do not submit defaults in exponent form
+    return serializeToString ? Big(value).toFixed() : value;
   };
   const setValue = value => {
-    return editField(field, path, value);
+    let newValue;
+    if (isValidNumber(value)) {
+      newValue = serializeToString ? value : Number(value);
+    }
+    return editField(field, path, newValue);
   };
-  return NumberFieldEntry({
+  const decimalDigitsSet = decimalDigits || decimalDigits === 0;
+  return TextfieldEntry({
     debounce,
+    label,
     element: field,
     getValue,
     id,
-    label,
-    setValue
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (!isValidNumber(value)) return 'Should be a valid number';
+      if (decimalDigitsSet && countDecimals(value) > decimalDigits) return `Should not contain more than ${decimalDigits} decimal digits`;
+    }
   });
 }
 function DefaultValueSingleSelect(props) {
@@ -5624,6 +6086,56 @@ function Label$1(props) {
   });
 }
 
+function SourceEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+  if (type === 'image') {
+    entries.push({
+      id: 'source',
+      component: Source,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6
+    });
+  }
+  return entries;
+}
+function Source(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['source'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return FeelEntry({
+    debounce,
+    description: 'Expression or static value (link/data URI)',
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'Image source',
+    setValue,
+    variables
+  });
+}
+
 function TextEntry(props) {
   const {
     editField,
@@ -5670,6 +6182,144 @@ function Text(props) {
   });
 }
 
+function NumberEntries(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    type
+  } = field;
+  if (type !== 'number') {
+    return [];
+  }
+  const entries = [];
+  entries.push({
+    id: id + '-decimalDigits',
+    component: NumberDecimalDigits,
+    isEdited: isEdited$5,
+    editField,
+    field
+  });
+  entries.push({
+    id: id + '-step',
+    component: NumberArrowStep,
+    isEdited: isEdited$1,
+    editField,
+    field
+  });
+  return entries;
+}
+function NumberDecimalDigits(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = e => get(field, ['decimalDigits']);
+  const setValue = value => editField(field, ['decimalDigits'], value);
+  return NumberFieldEntry({
+    debounce,
+    label: 'Decimal digits',
+    element: field,
+    min: 0,
+    step: 1,
+    getValue,
+    id,
+    setValue
+  });
+}
+function NumberArrowStep(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    decimalDigits
+  } = field;
+  const debounce = useService('debounce');
+  const getValue = e => {
+    let value = get(field, ['increment']);
+    if (!isValidNumber(value)) return null;
+    return value;
+  };
+  const setValue = value => editField(field, ['increment'], value);
+  const decimalDigitsSet = decimalDigits || decimalDigits === 0;
+  return TextfieldEntry({
+    debounce,
+    label: 'Increment',
+    element: field,
+    getValue,
+    id,
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (!isValidNumber(value)) return 'Should be a valid number.';
+      if (Big(value).cmp(0) <= 0) return 'Should be greater than zero.';
+      if (decimalDigitsSet) {
+        const minimumValue = Big(`1e-${decimalDigits}`);
+        if (Big(value).cmp(minimumValue) < 0) return `Should be at least ${minimumValue.toString()}.`;
+        if (countDecimals(value) > decimalDigits) return `Should not contain more than ${decimalDigits} decimal digits.`;
+      }
+    }
+  });
+}
+
+function NumberSerializationEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    type
+  } = field;
+  if (type !== 'number') {
+    return [];
+  }
+  const entries = [];
+  entries.push({
+    id: id + '-serialize-to-string',
+    component: SerializeToString,
+    isEdited: isEdited$7,
+    editField,
+    field
+  });
+  return entries;
+}
+function SerializeToString(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    defaultValue
+  } = field;
+  const path = ['serializeToString'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    // Whenever changing the formatting, make sure to change the default value type along with it
+    if (defaultValue || defaultValue === 0) {
+      editField(field, ['defaultValue'], value ? Big(defaultValue).toFixed() : Number(defaultValue));
+    }
+    return editField(field, path, value);
+  };
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label: 'Serialize to string',
+    description: 'Allows arbitrary precision values',
+    setValue
+  });
+}
+
 function ValueEntry(props) {
   const {
     editField,
@@ -5978,6 +6628,15 @@ function InputValuesKey(props) {
   const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];
   const getValue = () => get(field, path, '');
   const setValue = value => editField(field, path, value || '');
+  const validate = value => {
+    if (isUndefined(value) || !value.length) {
+      return 'Must not be empty.';
+    }
+    if (/\s/.test(value)) {
+      return 'Must not contain spaces.';
+    }
+    return null;
+  };
   return TextfieldEntry({
     debounce,
     description,
@@ -5985,7 +6644,8 @@ function InputValuesKey(props) {
     getValue,
     id,
     label,
-    setValue
+    setValue,
+    validate
   });
 }
 
@@ -6058,6 +6718,54 @@ function getIndexedEntry(index) {
   return entry;
 }
 
+function ConditionEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  return [{
+    id: 'conditional-hide',
+    component: Condition,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6
+  }];
+}
+function Condition(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['conditional', 'hide'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    if (!value) {
+      return editField(field, 'conditional', undefined);
+    }
+    return editField(field, 'conditional', {
+      hide: value
+    });
+  };
+  return FeelEntry({
+    debounce,
+    description: 'Condition under which the field is hidden',
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Hide if',
+    setValue,
+    variables
+  });
+}
+
 function GeneralGroup(field, editField) {
   const entries = [...IdEntry({
     field,
@@ -6083,6 +6791,15 @@ function GeneralGroup(field, editField) {
   }), ...TextEntry({
     field,
     editField
+  }), ...NumberEntries({
+    field,
+    editField
+  }), ...SourceEntry({
+    field,
+    editField
+  }), ...AltTextEntry({
+    field,
+    editField
   }), ...DisabledEntry({
     field,
     editField
@@ -6094,6 +6811,21 @@ function GeneralGroup(field, editField) {
   };
 }
 
+function SerializationGroup(field, editField) {
+  const entries = [...NumberSerializationEntry({
+    field,
+    editField
+  })];
+  if (!entries.length) {
+    return null;
+  }
+  return {
+    id: 'serialization',
+    label: 'Serialization',
+    entries
+  };
+}
+
 const VALIDATION_TYPE_OPTIONS = {
   custom: {
     value: 'custom',
@@ -6458,11 +7190,29 @@ function removeKey(properties, oldKey) {
   }, {});
 }
 
+function ConditionGroup(field, editField) {
+  const {
+    type
+  } = field;
+  if (type === 'default') {
+    return null;
+  }
+  const entries = [...ConditionEntry({
+    field,
+    editField
+  })];
+  return {
+    id: 'condition',
+    label: 'Condition',
+    entries
+  };
+}
+
 function getGroups(field, editField) {
   if (!field) {
     return [];
   }
-  const groups = [GeneralGroup(field, editField), ...ValuesGroups(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
+  const groups = [GeneralGroup(field, editField), ConditionGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
 
   // contract: if a group returns null, it should not be displayed at all
   return groups.filter(group => group !== null);