@bpmn-io/form-js-editor 1.0.0-alpha.9 → 1.0.0

package/dist/index.cjs

@@ -15,6 +15,25 @@ var feelers = require('feelers');
 var FeelEditor = require('@bpmn-io/feel-editor');
 var Big = require('big.js');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY$2 = 1000;
 var slice = Array.prototype.slice;
@@ -515,10 +534,10 @@ function invokeFunction(fn, args) {
   return fn.apply(null, args);
 }
 
-/**
- * A factory to create a configurable debouncer.
- *
- * @param {number|boolean} [config=true]
+/**
+ * A factory to create a configurable debouncer.
+ *
+ * @param {number|boolean} [config=true]
  */
 function DebounceFactory(config = true) {
   const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -531,11 +550,11 @@ function DebounceFactory(config = true) {
 DebounceFactory.$inject = ['config.debounce'];
 
 class FieldFactory {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
-   * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+  /**
+   * @constructor
+   *
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
    */
   constructor(formFieldRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
@@ -598,11 +617,11 @@ class FieldFactory {
 FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
 
 class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
-  /**
-   * Updates a form fields id.
-   *
-   * @param {Object} formField
-   * @param {string} newId
+  /**
+   * Updates a form fields id.
+   *
+   * @param {Object} formField
+   * @param {string} newId
    */
   updateId(formField, newId) {
     this._validateId(newId);
@@ -623,13 +642,13 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
     }
   }
 
-  /**
-   * Validate the suitability of the given id and signals a problem
-   * with an exception.
-   *
-   * @param {string} id
-   *
-   * @throws {Error} if id is empty or already assigned
+  /**
+   * Validate the suitability of the given id and signals a problem
+   * with an exception.
+   *
+   * @param {string} id
+   *
+   * @throws {Error} if id is empty or already assigned
    */
   _validateId(id) {
     if (!id) {
@@ -646,11 +665,11 @@ const MAX_COLUMNS = 16;
 const MIN_COLUMNS = 2;
 const MAX_FIELDS_PER_ROW = 4;
 class FormLayoutValidator {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormLayouter').default } formLayouter
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   *
+   * @param { import('./FormLayouter').default } formLayouter
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formLayouter, formFieldRegistry) {
     this._formLayouter = formLayouter;
@@ -710,11 +729,11 @@ function calculateMaxColumnsWithAuto(autoCols) {
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../core/FieldFactory').default } fieldFactory
-   * @param { import('../core/FormLayouter').default } formLayouter
+  /**
+   * @constructor
+   * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../core/FieldFactory').default } fieldFactory
+   * @param { import('../core/FormLayouter').default } formLayouter
    */
   constructor(formFieldRegistry, fieldFactory, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -722,21 +741,21 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * Import schema creating rows, fields, attaching additional
-   * information to each field and adding fields to the
-   * field registry.
-   *
-   * Additional information attached:
-   *
-   *   * `id` (unless present)
-   *   * `_parent`
-   *   * `_path`
-   *
-   * @param {any} schema
-   *
-   * @typedef {{ warnings: Error[], schema: any }} ImportResult
-   * @returns {ImportResult}
+  /**
+   * Import schema creating rows, fields, attaching additional
+   * information to each field and adding fields to the
+   * field registry.
+   *
+   * Additional information attached:
+   *
+   *   * `id` (unless present)
+   *   * `_parent`
+   *   * `_path`
+   *
+   * @param {any} schema
+   *
+   * @typedef {{ warnings: Error[], schema: any }} ImportResult
+   * @returns {ImportResult}
    */
   importSchema(schema) {
     // TODO: Add warnings
@@ -754,12 +773,12 @@ class Importer {
     }
   }
 
-  /**
-   * @param {{[x: string]: any}} fieldAttrs
-   * @param {String} [parentId]
-   * @param {number} [index]
-   *
-   * @return {any} field
+  /**
+   * @param {{[x: string]: any}} fieldAttrs
+   * @param {String} [parentId]
+   * @param {number} [index]
+   *
+   * @return {any} field
    */
   importFormField(fieldAttrs, parentId, index) {
     const {
@@ -796,11 +815,11 @@ class Importer {
     return field;
   }
 
-  /**
-   * @param {Array<any>} components
-   * @param {string} parentId
-   *
-   * @return {Array<any>} imported components
+  /**
+   * @param {Array<any>} components
+   * @param {string} parentId
+   *
+   * @return {Array<any>} imported components
    */
   importFormFields(components, parentId) {
     return components.map((component, index) => {
@@ -825,22 +844,22 @@ function editorFormFieldClasses(type, {
   });
 }
 
-/**
- * Add a dragger that calls back the passed function with
- * { event, delta } on drag.
- *
- * @example
- *
- * function dragMove(event, delta) {
- *   // we are dragging (!!)
- * }
- *
- * domElement.addEventListener('dragstart', dragger(dragMove));
- *
- * @param {Function} fn
- * @param {Element} dragPreview
- *
- * @return {Function} drag start callback function
+/**
+ * Add a dragger that calls back the passed function with
+ * { event, delta } on drag.
+ *
+ * @example
+ *
+ * function dragMove(event, delta) {
+ *   // we are dragging (!!)
+ * }
+ *
+ * domElement.addEventListener('dragstart', dragger(dragMove));
+ *
+ * @param {Function} fn
+ * @param {Element} dragPreview
+ *
+ * @return {Function} drag start callback function
  */
 function createDragger(fn, dragPreview) {
   let self;
@@ -881,12 +900,12 @@ function createDragger(fn, dragPreview) {
   return onDragStart;
 }
 
-/**
- * Throttle function call according UI update cycle.
- *
- * @param  {Function} fn
- *
- * @return {Function} throttled fn
+/**
+ * Throttle function call according UI update cycle.
+ *
+ * @param  {Function} fn
+ *
+ * @return {Function} throttled fn
  */
 function throttle(fn) {
   let active = false;
@@ -915,11 +934,11 @@ const DragAndDropContext = preact.createContext({
 });
 var DragAndDropContext$1 = DragAndDropContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService$1(type, strict) {}
 const FormEditorContext = preact.createContext({
@@ -934,83 +953,91 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
+var _path$3;
 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 CloseIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$3({
-  width: "16",
-  height: "16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7z"
-})));
+var SvgClose = function SvgClose(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "currentColor"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+    clipRule: "evenodd"
+  })));
+};
+var CloseIcon = SvgClose;
 
+var _path$2, _path2;
 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 DeleteIcon$1 = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "none"
-}, props), /*#__PURE__*/React.createElement("rect", {
-  width: "16",
-  height: "16",
-  x: ".536",
-  fill: "#fff",
-  rx: "3",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "#fff",
-  d: "M.536 0h16v16h-16z",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
-})));
+var SvgDelete = function SvgDelete(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 16,
+    height: 16,
+    x: 0.536,
+    fill: "#fff",
+    rx: 3,
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v16H0z",
+    style: {
+      mixBlendMode: "multiply"
+    },
+    transform: "translate(.536)"
+  }), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentcolor",
+    d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentcolor",
+    d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
+  })));
+};
+var DeleteIcon$1 = SvgDelete;
 
+var _path$1;
 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 DraggableIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "currentcolor",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M0 0h32v32H0z",
-  fill: "none"
-})));
+var SvgDraggable = function SvgDraggable(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: 16,
+    height: 16,
+    fill: "currentcolor",
+    viewBox: "0 0 32 32"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 0h32v32H0z",
+    style: {
+      fill: "none"
+    }
+  }));
+};
+var DraggableIcon = SvgDraggable;
 
+var _path;
 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 SearchIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "15",
-  height: "15",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M14.5 13.793l-3.776-3.776a5.508 5.508 0 10-.707.707l3.776 3.776.707-.707zM2 6.5a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z",
-  fill: "currentColor"
-})));
+var SvgSearch = function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 15,
+    height: 15,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
+  })));
+};
+var SearchIcon = SvgSearch;
 
 function EditorText(props) {
   const {
@@ -1206,23 +1233,23 @@ var Slot = (props => {
   return fillsAndSeparators;
 });
 
-/**
- * Creates a Fragment for a fill.
- *
- * @param {Object} fill Fill to be rendered
- * @returns {Object} Preact Fragment containing fill's children
+/**
+ * Creates a Fragment for a fill.
+ *
+ * @param {Object} fill Fill to be rendered
+ * @returns {Object} Preact Fragment containing fill's children
  */
 const FillFragment = fill => jsxRuntime.jsx(preact.Fragment, {
   children: fill.children
 }, fill.id);
 
-/**
- * Creates an array of fills, with separators inserted between groups.
- *
- * @param {Array} groups Groups of fills
- * @param {Function} fillRenderer Function to create a fill
- * @param {Function} separatorRenderer Function to create a separator
- * @returns {Array} Array of fills and separators
+/**
+ * Creates an array of fills, with separators inserted between groups.
+ *
+ * @param {Array} groups Groups of fills
+ * @param {Function} fillRenderer Function to create a fill
+ * @param {Function} separatorRenderer Function to create a separator
+ * @returns {Array} Array of fills and separators
  */
 const buildFills = (groups, fillRenderer, separatorRenderer) => {
   const result = [];
@@ -1240,8 +1267,8 @@ const buildFills = (groups, fillRenderer, separatorRenderer) => {
   return result;
 };
 
-/**
- * Groups fills by group name property.
+/**
+ * Groups fills by group name property.
  */
 const _groupByGroupName = fills => {
   const groups = [];
@@ -1261,8 +1288,8 @@ const _groupByGroupName = fills => {
   return Object.keys(groupsById).sort().map(id => groupsById[id]);
 };
 
-/**
- * Compares fills by priority.
+/**
+ * Compares fills by priority.
  */
 const _comparePriority = (a, b) => {
   return (b.priority || 0) - (a.priority || 0);
@@ -1490,19 +1517,19 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
 const DRAG_NO_MOVE_CLS = 'fjs-no-move';
 const ERROR_DROP_CLS = 'fjs-error-drop';
 
-/**
- * @typedef { { id: String, components: Array<any> } } FormRow
+/**
+ * @typedef { { id: String, components: Array<any> } } FormRow
  */
 
 class Dragging {
-  /**
-   * @constructor
-   *
-   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../../core/FormLayouter').default } formLayouter
-   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
-   * @param { import('../../core/EventBus').default } eventBus
-   * @param { import('../modeling/Modeling').default } modeling
+  /**
+   * @constructor
+   *
+   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../../core/FormLayouter').default } formLayouter
+   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+   * @param { import('../../core/EventBus').default } eventBus
+   * @param { import('../modeling/Modeling').default } modeling
    */
   constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1512,13 +1539,13 @@ class Dragging {
     this._modeling = modeling;
   }
 
-  /**
-   * Calculcates position in form schema given the dropped place.
-   *
-   * @param { FormRow } targetRow
-   * @param { any } targetFormField
-   * @param { HTMLElement } sibling
-   * @returns { number }
+  /**
+   * Calculcates position in form schema given the dropped place.
+   *
+   * @param { FormRow } targetRow
+   * @param { any } targetFormField
+   * @param { HTMLElement } sibling
+   * @returns { number }
    */
   getTargetIndex(targetRow, targetFormField, sibling) {
     /** @type HTMLElement */
@@ -1620,8 +1647,8 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
@@ -2018,7 +2045,7 @@ function DebugColumns(props) {
     return null;
   }
   return jsxRuntime.jsx("div", {
-    style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
+    style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
     class: "fjs-debug-columns",
     children: (field.layout || {}).columns || 'auto'
   });
@@ -3077,10 +3104,10 @@ function updateRow(formField, rowId) {
 }
 
 class AddFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3141,10 +3168,10 @@ class AddFormFieldHandler {
 AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class EditFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3207,10 +3234,10 @@ class EditFormFieldHandler {
 EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class MoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3299,10 +3326,10 @@ class MoveFormFieldHandler {
 MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class RemoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3362,9 +3389,9 @@ class RemoveFormFieldHandler {
 RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class UpdateIdClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3397,9 +3424,9 @@ class UpdateIdClaimHandler {
 UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
 class UpdateKeyClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3865,8 +3892,8 @@ class ValidateBehavior extends CommandInterceptor {
   constructor(eventBus) {
     super(eventBus);
 
-    /**
-     * Remove custom validation if <validationType> is about to be added.
+    /**
+     * Remove custom validation if <validationType> is about to be added.
      */
     // @ts-ignore-next-line
     this.preExecute('formField.edit', function (context) {
@@ -4446,22 +4473,22 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
-/**
- * Base class for sectionable UI modules.
- *
- * @property {EventBus} _eventBus - EventBus instance used for event handling.
- * @property {string} managerType - Type of the render manager. Used to form event names.
- *
- * @class SectionModuleBase
+/**
+ * Base class for sectionable UI modules.
+ *
+ * @property {EventBus} _eventBus - EventBus instance used for event handling.
+ * @property {string} managerType - Type of the render manager. Used to form event names.
+ *
+ * @class SectionModuleBase
  */
 class SectionModuleBase {
-  /**
-   * Create a SectionModuleBase instance.
-   *
-   * @param {any} eventBus - The EventBus instance used for event handling.
-   * @param {string} sectionKey - The type of render manager. Used to form event names.
-   *
-   * @constructor
+  /**
+   * Create a SectionModuleBase instance.
+   *
+   * @param {any} eventBus - The EventBus instance used for event handling.
+   * @param {string} sectionKey - The type of render manager. Used to form event names.
+   *
+   * @constructor
    */
   constructor(eventBus, sectionKey) {
     this._eventBus = eventBus;
@@ -4474,10 +4501,10 @@ class SectionModuleBase {
     });
   }
 
-  /**
-   * Attach the managed section to a parent node.
-   *
-   * @param {HTMLElement} container - The parent node to attach to.
+  /**
+   * Attach the managed section to a parent node.
+   *
+   * @param {HTMLElement} container - The parent node to attach to.
    */
   attachTo(container) {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
@@ -4485,22 +4512,22 @@ class SectionModuleBase {
     }));
   }
 
-  /**
-   * Detach the managed section from its parent node.
+  /**
+   * Detach the managed section from its parent node.
    */
   detach() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
   }
 
-  /**
-   * Reset the managed section to its initial state.
+  /**
+   * Reset the managed section to its initial state.
    */
   reset() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
   }
 
-  /**
-   * Circumvents timing issues.
+  /**
+   * Circumvents timing issues.
    */
   _onceSectionRendered(callback) {
     if (this.isSectionRendered) {
@@ -5983,150 +6010,309 @@ function isEdited$7(node) {
 function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
-const noop$1 = () => {};
-function FeelTextfield(props) {
+function NumberField(props) {
   const {
     debounce,
+    disabled,
+    displayLabel = true,
     id,
+    inputRef,
     label,
+    max,
+    min,
     onInput,
-    onError,
-    feel,
+    step,
     value = '',
-    disabled = false,
-    variables,
-    tooltipContainer,
-    OptionalComponent = OptionalFeelInput
+    onFocus,
+    onBlur
   } = props;
-  const [localValue, _setLocalValue] = hooks.useState(value);
-  const editorRef = useShowEntryEvent(id);
-  const containerRef = hooks.useRef();
-  const feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = minDash.isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
-  const [focus, _setFocus] = hooks.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 [localValue, setLocalValue] = hooks.useState(value);
   const handleInputCallback = hooks.useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
     });
   }, [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 && minDash.isString(newValue) && newValue.startsWith('=')) {
-      // focus is behind `=` sign that will be removed
-      setFocus(-1);
-    }
+  const handleInput = e => {
+    handleInputCallback(e);
+    setLocalValue(e.target.value);
   };
-  const handleLint = useStaticCallback(lint => {
-    if (!(lint && lint.length)) {
-      onError(undefined);
-      return;
-    }
-    const error = lint[0];
-    const message = `${error.source}: ${error.message}`;
-    onError(message);
-  });
-  hooks.useEffect(() => {
-    if (typeof focus !== 'undefined') {
-      editorRef.current.focus(focus);
-      _setFocus(undefined);
-    }
-  }, [focus]);
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
-    // External value change removed content => keep FEEL configuration
-    if (!value) {
-      setLocalValue(feelActive ? '=' : '');
-      return;
-    }
     setLocalValue(value);
   }, [value]);
-
-  // copy-paste integration
-  hooks.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 jsxRuntime.jsxs("div", {
-    class: classnames('bio-properties-panel-feel-entry', {
-      'feel-active': feelActive
-    }),
-    children: [jsxRuntime.jsxs("label", {
+    class: "bio-properties-panel-numberfield",
+    children: [displayLabel && jsxRuntime.jsx("label", {
       for: prefixId$5(id),
       class: "bio-properties-panel-label",
-      onClick: () => setFocus(),
-      children: [label, jsxRuntime.jsx(FeelIcon, {
-        label: label,
-        feel: feel,
-        onClick: handleFeelToggle,
-        active: feelActive
-      })]
-    }), jsxRuntime.jsxs("div", {
-      class: "bio-properties-panel-feel-container",
-      ref: containerRef,
-      children: [jsxRuntime.jsx(FeelIndicator, {
-        active: feelActive,
-        disabled: feel !== 'optional' || disabled,
+      children: label
+    }), jsxRuntime.jsx("input", {
+      id: prefixId$5(id),
+      ref: inputRef,
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      step: step,
+      value: localValue
+    })]
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {String} props.step
+ * @param {Function} props.validate
+ */
+function NumberFieldEntry(props) {
+  const {
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
+    id,
+    label,
+    max,
+    min,
+    setValue,
+    step,
+    onFocus,
+    onBlur,
+    validate
+  } = props;
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = hooks.useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  hooks.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (minDash.isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
+  return jsxRuntime.jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsxRuntime.jsx(NumberField, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onInput: onInput,
+      max: max,
+      min: min,
+      step: step,
+      value: value
+    }, element), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && !!node.value;
+}
+
+// helpers /////////////////
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
+const noop$1 = () => {};
+function FeelTextfield(props) {
+  const {
+    debounce,
+    id,
+    label,
+    onInput,
+    onError,
+    feel,
+    value = '',
+    disabled = false,
+    variables,
+    tooltipContainer,
+    OptionalComponent = OptionalFeelInput
+  } = props;
+  const [localValue, _setLocalValue] = hooks.useState(value);
+  const editorRef = useShowEntryEvent(id);
+  const containerRef = hooks.useRef();
+  const feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
+  const feelOnlyValue = minDash.isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const [focus, _setFocus] = hooks.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 = hooks.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 && minDash.isString(newValue) && 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);
+  });
+  hooks.useEffect(() => {
+    if (typeof focus !== 'undefined') {
+      editorRef.current.focus(focus);
+      _setFocus(undefined);
+    }
+  }, [focus]);
+  hooks.useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+
+    // External value change removed content => keep FEEL configuration
+    if (!value) {
+      setLocalValue(feelActive ? '=' : '');
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+
+  // copy-paste integration
+  hooks.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 jsxRuntime.jsxs("div", {
+    class: classnames('bio-properties-panel-feel-entry', {
+      'feel-active': feelActive
+    }),
+    children: [jsxRuntime.jsxs("label", {
+      for: prefixId$4(id),
+      class: "bio-properties-panel-label",
+      onClick: () => setFocus(),
+      children: [label, jsxRuntime.jsx(FeelIcon, {
+        label: label,
+        feel: feel,
+        onClick: handleFeelToggle,
+        active: feelActive
+      })]
+    }), jsxRuntime.jsxs("div", {
+      class: "bio-properties-panel-feel-container",
+      ref: containerRef,
+      children: [jsxRuntime.jsx(FeelIndicator, {
+        active: feelActive,
+        disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsxRuntime.jsx(CodeEditor, {
-        id: prefixId$5(id),
+        id: prefixId$4(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
@@ -6143,7 +6329,7 @@ function FeelTextfield(props) {
         ...props,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$5(id),
+          'id': prefixId$4(id),
           'aria-label': label
         },
         value: localValue,
@@ -6181,7 +6367,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     }
   };
   return jsxRuntime.jsx("input", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6195,6 +6381,53 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     value: value || ''
   });
 });
+const OptionalFeelNumberField = React.forwardRef((props, ref) => {
+  const {
+    id,
+    debounce,
+    disabled,
+    onInput,
+    value,
+    min,
+    max,
+    step,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = hooks.useRef();
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: position => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+      if (typeof position === 'number' && position !== Infinity) {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+    }
+  };
+  return jsxRuntime.jsx(NumberField, {
+    id: id,
+    debounce: debounce,
+    disabled: disabled,
+    displayLabel: false,
+    inputRef: inputRef,
+    max: max,
+    min: min,
+    onInput: onInput,
+    step: step,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
+});
 React.forwardRef((props, ref) => {
   const {
     id,
@@ -6219,7 +6452,7 @@ React.forwardRef((props, ref) => {
     }
   };
   return jsxRuntime.jsx("textarea", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6295,7 +6528,7 @@ React.forwardRef((props, ref) => {
   };
   return jsxRuntime.jsx("input", {
     ref: inputRef,
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     name: id,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -6384,11 +6617,13 @@ function FeelEntry(props) {
   return jsxRuntime.jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsxRuntime.jsx(FeelTextfield, {
+    children: [preact.createElement(FeelTextfield, {
+      ...props,
       debounce: debounce,
       disabled: disabled,
       feel: feel,
       id: id,
+      key: element,
       label: label,
       onInput: onInput,
       onError: onError,
@@ -6402,7 +6637,7 @@ function FeelEntry(props) {
       variables: variables,
       tooltipContainer: tooltipContainer,
       OptionalComponent: props.OptionalComponent
-    }, element), error && jsxRuntime.jsx("div", {
+    }), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description$1, {
@@ -6420,218 +6655,92 @@ function FeelEntry(props) {
  * @param {String} props.description
  * @param {Boolean} props.debounce
  * @param {Boolean} props.disabled
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
  * @param {Boolean} props.feel
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
  * @param {Function} props.tooltipContainer
  * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- */
-function FeelToggleSwitchEntry(props) {
-  return jsxRuntime.jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-toggle-switch",
-    OptionalComponent: OptionalFeelToggleSwitch,
-    ...props
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.hostLanguage
- * @param {Boolean} props.singleLine
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- */
-function FeelTemplatingEntry(props) {
-  return jsxRuntime.jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-templating",
-    OptionalComponent: CodeEditor$1,
-    ...props
-  });
-}
-function isEdited$6(node) {
-  if (!node) {
-    return false;
-  }
-  if (node.type === 'checkbox') {
-    return !!node.checked || node.classList.contains('edited');
-  }
-  return !!node.value || node.classList.contains('edited');
-}
-
-// helpers /////////////////
-
-function prefixId$5(id) {
-  return `bio-properties-panel-${id}`;
-}
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    id,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = '',
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = hooks.useState(value);
-  const handleInputCallback = hooks.useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
-      }
-    });
-  }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e);
-    setLocalValue(e.target.value);
-  };
-  hooks.useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [jsxRuntime.jsx("label", {
-      for: prefixId$4(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), jsxRuntime.jsx("input", {
-      id: prefixId$4(id),
-      type: "number",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: handleInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      step: step,
-      value: localValue
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
- * @param {Function} props.validate
- */
-function NumberFieldEntry(props) {
-  const {
-    debounce,
-    description,
-    disabled,
-    element,
-    getValue,
-    id,
-    label,
-    max,
-    min,
-    setValue,
-    step,
-    onFocus,
-    onBlur,
-    validate
-  } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
-  const globalError = useError(id);
-  const [localError, setLocalError] = hooks.useState(null);
-  let value = getValue(element);
-  const previousValue = usePrevious(value);
-  hooks.useEffect(() => {
-    if (minDash.isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setLocalError(newValidationError);
-    }
-  }, [value]);
-  const onInput = newValue => {
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
-    setLocalError(newValidationError);
-  };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
-  const error = globalError || localError;
-  return jsxRuntime.jsxs("div", {
-    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [jsxRuntime.jsx(NumberField, {
-      debounce: debounce,
-      disabled: disabled,
-      id: id,
-      label: label,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onInput: onInput,
-      max: max,
-      min: min,
-      step: step,
-      value: value
-    }, element), error && jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), jsxRuntime.jsx(Description$1, {
-      forId: id,
-      element: element,
-      value: description
-    })]
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelNumberEntry(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-number",
+    OptionalComponent: OptionalFeelNumberField,
+    ...props
   });
 }
-function isEdited$4(node) {
-  return node && !!node.value;
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelToggleSwitchEntry(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-toggle-switch",
+    OptionalComponent: OptionalFeelToggleSwitch,
+    ...props
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.hostLanguage
+ * @param {Boolean} props.singleLine
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelTemplatingEntry(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-templating",
+    OptionalComponent: CodeEditor$1,
+    ...props
+  });
+}
+function isEdited$5(node) {
+  if (!node) {
+    return false;
+  }
+  if (node.type === 'checkbox') {
+    return !!node.checked || node.classList.contains('edited');
+  }
+  return !!node.value || node.classList.contains('edited');
 }
 
 // helpers /////////////////
@@ -7088,11 +7197,11 @@ function prefixId(id) {
   return `bio-properties-panel-${id}`;
 }
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const PropertiesPanelContext = preact.createContext({
@@ -7181,8 +7290,8 @@ const PropertiesPanelHeaderProvider = {
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -7254,10 +7363,10 @@ 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
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
  */
 function useVariables() {
   const form = useService('formEditor');
@@ -7280,7 +7389,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7302,7 +7411,7 @@ function AltText(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     feel: 'optional',
@@ -7310,6 +7419,7 @@ function AltText(props) {
     id,
     label: 'Alternative text',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -7398,7 +7508,7 @@ function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7864,7 +7974,7 @@ function LabelEntry(props) {
         component: DateLabel,
         editField,
         field,
-        isEdited: isEdited$6
+        isEdited: isEdited$5
       });
     }
     if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
@@ -7873,7 +7983,7 @@ function LabelEntry(props) {
         component: TimeLabel,
         editField,
         field,
-        isEdited: isEdited$6
+        isEdited: isEdited$5
       });
     }
   } else if (INPUTS.includes(type) || type === 'button') {
@@ -7882,7 +7992,7 @@ function LabelEntry(props) {
       component: Label$1,
       editField,
       field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7987,7 +8097,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -8009,7 +8119,7 @@ function Source(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     description: 'Expression or static value (link/data URI)',
     element: field,
@@ -8018,6 +8128,7 @@ function Source(props) {
     id,
     label: 'Image source',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -8042,7 +8153,7 @@ function TextEntry(props) {
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 
   // todo: skipped to make the release without too much risk
@@ -8111,7 +8222,7 @@ function NumberEntries(props) {
   entries.push({
     id: id + '-decimalDigits',
     component: NumberDecimalDigits,
-    isEdited: isEdited$4,
+    isEdited: isEdited$6,
     editField,
     field
   });
@@ -8707,14 +8818,14 @@ function Value(props) {
 
 // helpers //////////
 
-/**
- * Returns copy of object with updated value.
- *
- * @param {Object} properties
- * @param {string} key
- * @param {string} value
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated value.
+ *
+ * @param {Object} properties
+ * @param {string} key
+ * @param {string} value
+ *
+ * @returns {Object}
  */
 function updateValue(properties, key, value) {
   return {
@@ -8723,14 +8834,14 @@ function updateValue(properties, key, value) {
   };
 }
 
-/**
- * Returns copy of object with updated key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- * @param {string} newKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ * @param {string} newKey
+ *
+ * @returns {Object}
  */
 function updateKey(properties, oldKey, newKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -8742,6 +8853,34 @@ function updateKey(properties, oldKey, newKey) {
   }, {});
 }
 
+function AutoFocusSelectEntry(props) {
+  const {
+    autoFocusEntry,
+    element,
+    getValue
+  } = props;
+  const value = getValue(element);
+  const prevValue = usePrevious(value);
+  const eventBus = useService('eventBus');
+
+  // auto focus specifc other entry when selected value changed
+  hooks.useEffect(() => {
+    if (autoFocusEntry && prevValue && value !== prevValue) {
+      // @Note(pinussilvestrus): There is an issue in the properties
+      // panel so we have to wait a bit before showing the entry.
+      // Cf. https://github.com/camunda/linting/blob/4f5328e2722f73ae60ae584c5f576eaec3999cb2/lib/modeler/Linting.js#L37
+      setTimeout(() => {
+        eventBus.fire('propertiesPanel.showEntry', {
+          id: autoFocusEntry
+        });
+      });
+    }
+  }, [value, autoFocusEntry, prevValue, eventBus]);
+  return jsxRuntime.jsx(SelectEntry, {
+    ...props
+  });
+}
+
 function ValuesSourceSelectEntry(props) {
   const {
     editField,
@@ -8780,7 +8919,8 @@ function ValuesSourceSelect(props) {
       value: valueSource
     }));
   };
-  return SelectEntry({
+  return AutoFocusSelectEntry({
+    autoFocusEntry: getAutoFocusEntryId(field),
     label: 'Type',
     element: field,
     getOptions: getValuesSourceOptions,
@@ -8790,6 +8930,20 @@ function ValuesSourceSelect(props) {
   });
 }
 
+// helpers //////////
+
+function getAutoFocusEntryId(field) {
+  const valuesSource = formJsViewer.getValuesSource(field);
+  if (valuesSource === formJsViewer.VALUES_SOURCES.EXPRESSION) {
+    return `${field.id}-valuesExpression-expression`;
+  } else if (valuesSource === formJsViewer.VALUES_SOURCES.INPUT) {
+    return `${field.id}-dynamicValues-key`;
+  } else if (valuesSource === formJsViewer.VALUES_SOURCES.STATIC) {
+    return `${field.id}-staticValues-0-label`;
+  }
+  return null;
+}
+
 function InputKeyValuesSourceEntry(props) {
   const {
     editField,
@@ -8946,7 +9100,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8955,7 +9109,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8972,13 +9126,19 @@ function PrefixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('prefixAdorner'),
     id,
     label: 'Prefix',
-    setValue: onChange('prefixAdorner')
+    setValue: onChange('prefixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 function SuffixAdorner(props) {
@@ -8989,13 +9149,18 @@ function SuffixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue: getValue('suffixAdorner'),
     id,
     label: 'Suffix',
-    setValue: onChange('suffixAdorner')
+    setValue: onChange('suffixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 
@@ -9014,7 +9179,7 @@ function ReadonlyEntry(props) {
       component: Readonly,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -9058,7 +9223,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 }
 function Condition(props) {
@@ -9096,6 +9261,55 @@ function Condition(props) {
   });
 }
 
+function ValuesExpressionEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  return [{
+    id: id + '-expression',
+    component: ValuesExpression,
+    label: 'Values expression',
+    isEdited: isEdited$5,
+    editField,
+    field
+  }];
+}
+function ValuesExpression(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.EXPRESSION];
+  const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
+  const description = jsxRuntime.jsxs("div", {
+    children: ["Define an expression to populate the options from.", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("br", {}), "The expression may result in an array of simple values or alternatively follow this schema:", jsxRuntime.jsx("pre", {
+      children: jsxRuntime.jsx("code", {
+        children: schema
+      })
+    })]
+  });
+  const getValue = () => minDash.get(field, path, '');
+  const setValue = value => editField(field, path, value || '');
+  return FeelEntry({
+    debounce,
+    description,
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Options expression',
+    setValue,
+    variables
+  });
+}
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -9240,14 +9454,14 @@ function ValidationGroup(field, editField) {
       component: MinLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'maxLength',
       component: MaxLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9267,14 +9481,14 @@ function ValidationGroup(field, editField) {
       component: Min,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'max',
       component: Max,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9307,14 +9521,19 @@ function MinLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('minLength'),
     id,
     label: 'Minimum length',
     min: 0,
-    setValue: onChange('minLength')
+    setValue: onChange('minLength'),
+    variables
   });
 }
 function MaxLength(props) {
@@ -9325,14 +9544,19 @@ function MaxLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('maxLength'),
     id,
     label: 'Maximum length',
     min: 0,
-    setValue: onChange('maxLength')
+    setValue: onChange('maxLength'),
+    variables
   });
 }
 function Pattern(props) {
@@ -9360,14 +9584,19 @@ function Min(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Minimum',
     step: 'any',
     getValue: getValue('min'),
-    setValue: onChange('min')
+    setValue: onChange('min'),
+    variables
   });
 }
 function Max(props) {
@@ -9378,14 +9607,19 @@ function Max(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Maximum',
     step: 'any',
     getValue: getValue('max'),
-    setValue: onChange('max')
+    setValue: onChange('max'),
+    variables
   });
 }
 function ValidationType(props) {
@@ -9424,8 +9658,8 @@ function ValuesGroups(field, editField) {
   };
   const valuesSourceId = `${fieldId}-valuesSource`;
 
-  /**
-   * @type {Array<Group|ListGroup>}
+  /**
+   * @type {Array<Group|ListGroup>}
    */
   const groups = [{
     id: valuesSourceId,
@@ -9459,6 +9693,17 @@ function ValuesGroups(field, editField) {
         id: staticValuesId
       })
     });
+  } else if (valuesSource === formJsViewer.VALUES_SOURCES.EXPRESSION) {
+    const valuesExpressionId = `${fieldId}-valuesExpression`;
+    groups.push({
+      id: valuesExpressionId,
+      label: 'Options expression',
+      component: Group,
+      entries: ValuesExpressionEntry({
+        ...context,
+        id: valuesExpressionId
+      })
+    });
   }
   return groups;
 }
@@ -9527,13 +9772,13 @@ function CustomValuesGroup(field, editField) {
 
 // helpers //////////
 
-/**
- * Returns copy of object without key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object without key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ *
+ * @returns {Object}
  */
 function removeKey(properties, oldKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -9636,9 +9881,9 @@ function FormPropertiesPanel(props) {
     });
   }, [eventBus, formEditor, selectionModule]);
   hooks.useLayoutEffect(() => {
-    /**
-     * TODO(pinussilvestrus): update with actual updated element,
-     * once we have a proper updater/change support
+    /**
+     * TODO(pinussilvestrus): update with actual updated element,
+     * once we have a proper updater/change support
      */
     eventBus.on('changed', refresh);
     eventBus.on('import.done', refresh);
@@ -9690,10 +9935,10 @@ class PropertiesPanelRenderer {
     });
   }
 
-  /**
-   * Attach the properties panel to a parent node.
-   *
-   * @param {HTMLElement} container
+  /**
+   * Attach the properties panel to a parent node.
+   *
+   * @param {HTMLElement} container
    */
   attachTo(container) {
     if (!container) {
@@ -9713,8 +9958,8 @@ class PropertiesPanelRenderer {
     this._eventBus.fire('propertiesPanel.attach');
   }
 
-  /**
-   * Detach the properties panel from its parent node.
+  /**
+   * Detach the properties panel from its parent node.
    */
   detach() {
     const parentNode = this._container.parentNode;
@@ -9744,10 +9989,10 @@ var PropertiesPanelModule = {
   propertiesPanel: ['type', PropertiesPanelRenderer]
 };
 
-/**
- * Manages the rendering of visual plugins.
- * @constructor
- * @param {Object} eventBus - Event bus for the application.
+/**
+ * Manages the rendering of visual plugins.
+ * @constructor
+ * @param {Object} eventBus - Event bus for the application.
  */
 class RenderInjector extends SectionModuleBase {
   constructor(eventBus) {
@@ -9756,10 +10001,10 @@ class RenderInjector extends SectionModuleBase {
     this.registeredRenderers = [];
   }
 
-  /**
-   * Inject a new renderer into the injector.
-   * @param {string} identifier - Identifier for the renderer.
-   * @param {Function} Renderer - The renderer function.
+  /**
+   * Inject a new renderer into the injector.
+   * @param {string} identifier - Identifier for the renderer.
+   * @param {Function} Renderer - The renderer function.
    */
   attachRenderer(identifier, Renderer) {
     this.registeredRenderers = [...this.registeredRenderers, {
@@ -9768,17 +10013,17 @@ class RenderInjector extends SectionModuleBase {
     }];
   }
 
-  /**
-   * Detach a renderer from the by key injector.
-   * @param {string} identifier - Identifier for the renderer.
+  /**
+   * Detach a renderer from the by key injector.
+   * @param {string} identifier - Identifier for the renderer.
    */
   detachRenderer(identifier) {
     this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
   }
 
-  /**
-   * Returns the registered renderers.
-   * @returns {Array} Array of registered renderers.
+  /**
+   * Returns the registered renderers.
+   * @returns {Array} Array of registered renderers.
    */
   fetchRenderers() {
     return this.registeredRenderers;
@@ -9812,48 +10057,48 @@ var ExpressionLanguageModule = {
 
 const ids = new Ids([32, 36, 1]);
 
-/**
- * @typedef { import('./types').Injector } Injector
- * @typedef { import('./types').Module } Module
- * @typedef { import('./types').Schema } Schema
- *
- * @typedef { import('./types').FormEditorOptions } FormEditorOptions
- * @typedef { import('./types').FormEditorProperties } FormEditorProperties
- *
- * @typedef { {
- *   properties: FormEditorProperties,
- *   schema: Schema
- * } } State
- *
- * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
- * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+/**
+ * @typedef { import('./types').Injector } Injector
+ * @typedef { import('./types').Module } Module
+ * @typedef { import('./types').Schema } Schema
+ *
+ * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+ * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+ *
+ * @typedef { {
+ *   properties: FormEditorProperties,
+ *   schema: Schema
+ * } } State
+ *
+ * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
-/**
- * The form editor.
+/**
+ * The form editor.
  */
 class FormEditor {
-  /**
-   * @constructor
-   * @param {FormEditorOptions} options
+  /**
+   * @constructor
+   * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
-    /**
-     * @public
-     * @type {OnEventType}
+    /**
+     * @public
+     * @type {OnEventType}
      */
     this.on = this._onEvent;
 
-    /**
-     * @public
-     * @type {String}
+    /**
+     * @public
+     * @type {String}
      */
     this._id = ids.next();
 
-    /**
-     * @private
-     * @type {Element}
+    /**
+     * @private
+     * @type {Element}
      */
     this._container = formJsViewer.createFormContainer();
     this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -9864,15 +10109,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -9901,10 +10146,10 @@ class FormEditor {
     this._detach(false);
   }
 
-  /**
-   * @param {Schema} schema
-   *
-   * @return {Promise<{ warnings: Array<any> }>}
+  /**
+   * @param {Schema} schema
+   *
+   * @return {Promise<{ warnings: Array<any> }>}
    */
   importSchema(schema) {
     return new Promise((resolve, reject) => {
@@ -9933,15 +10178,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -9950,8 +10195,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, formJsViewer.schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -9969,10 +10214,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -9986,9 +10231,9 @@ class FormEditor {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {any} property
-   * @param {any} value
+  /**
+   * @param {any} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = minDash.set(this._getState().properties, [property], value);
@@ -9997,21 +10242,21 @@ class FormEditor {
     });
   }
 
-  /**
-   * @param {string} type
-   * @param {Function} handler
+  /**
+   * @param {string} type
+   * @param {Function} handler
    */
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
 
-  /**
-   * @internal
-   *
-   * @param {FormEditorOptions} options
-   * @param {Element} container
-   *
-   * @returns {Injector}
+  /**
+   * @internal
+   *
+   * @param {FormEditorOptions} options
+   * @param {Element} container
+   *
+   * @returns {Injector}
    */
   _createInjector(options, container) {
     const {
@@ -10033,22 +10278,22 @@ class FormEditor {
     }, core, ...modules, ...additionalModules]);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getState() {
     return this._state;
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _setState(state) {
     this._state = {
@@ -10058,15 +10303,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);