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

package/dist/index.es.js

@@ -1,14 +1,14 @@
 import { FormFieldRegistry as FormFieldRegistry$1, clone, iconsByType, Text as Text$1, FormFields, formFields, FormContext, FormRenderContext, FormComponent, FormLayouter, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, FeelersTemplating, createFormContainer, createInjector, MarkdownModule, 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 as set$1, isUndefined, without, has, isString } from 'min-dash';
+import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, set as set$1, isString, isUndefined, without, has } from 'min-dash';
 import classnames from 'classnames';
 import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
-import { useContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'preact/hooks';
+import { useContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from 'preact/hooks';
 import { createContext, render, createElement } from 'preact';
 import React, { forwardRef } from 'preact/compat';
 import dragula from 'dragula';
-import { classes, closest, event, matches, domify, query } from 'min-dom';
+import { classes, query, closest, event, matches, domify } from 'min-dom';
 import { mutate } from 'array-move';
 import { FeelersEditor } from 'feelers';
 import FeelEditor from '@bpmn-io/feel-editor';
@@ -18,6 +18,30 @@ var FN_REF = '__fn';
 var DEFAULT_PRIORITY$2 = 1000;
 var slice = Array.prototype.slice;
 
+/**
+ * @typedef { {
+ *   stopPropagation(): void;
+ *   preventDefault(): void;
+ *   cancelBubble: boolean;
+ *   defaultPrevented: boolean;
+ *   returnValue: any;
+ * } } Event
+ */
+
+/**
+ * @template E
+ *
+ * @typedef { (event: E & Event, ...any) => any } EventBusEventCallback
+ */
+
+/**
+ * @typedef { {
+ *  priority: number;
+ *  next: EventBusListener | null;
+ *  callback: EventBusEventCallback<any>;
+ * } } EventBusListener
+ */
+
 /**
  * A general purpose event bus.
  *
@@ -102,6 +126,9 @@ var slice = Array.prototype.slice;
  * ```
  */
 function EventBus() {
+  /**
+   * @type { Record<string, EventBusListener> }
+   */
   this._listeners = {};
 
   // cleanup on destroy on lowest priority to allow
@@ -121,10 +148,12 @@ function EventBus() {
  *
  * Returning anything but `undefined` from a listener will stop the listener propagation.
  *
- * @param {string|Array<string>} events
- * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
- * @param {Function} callback
- * @param {Object} [that] Pass context (`this`) to the callback
+ * @template T
+ *
+ * @param {string|string[]} events to subscribe to
+ * @param {number} [priority=1000] listen priority
+ * @param {EventBusEventCallback<T>} callback
+ * @param {any} [that] callback context
  */
 EventBus.prototype.on = function (events, priority, callback, that) {
   events = isArray(events) ? events : [events];
@@ -156,14 +185,16 @@ EventBus.prototype.on = function (events, priority, callback, that) {
 };
 
 /**
- * Register an event listener that is executed only once.
+ * Register an event listener that is called only once.
  *
- * @param {string} event the event name to register for
- * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
- * @param {Function} callback the callback to execute
- * @param {Object} [that] Pass context (`this`) to the callback
+ * @template T
+ *
+ * @param {string|string[]} events to subscribe to
+ * @param {number} [priority=1000] the listen priority
+ * @param {EventBusEventCallback<T>} callback
+ * @param {any} [that] callback context
  */
-EventBus.prototype.once = function (event, priority, callback, that) {
+EventBus.prototype.once = function (events, priority, callback, that) {
   var self = this;
   if (isFunction(priority)) {
     that = callback;
@@ -176,7 +207,7 @@ EventBus.prototype.once = function (event, priority, callback, that) {
   function wrappedCallback() {
     wrappedCallback.__isTomb = true;
     var result = callback.apply(that, arguments);
-    self.off(event, wrappedCallback);
+    self.off(events, wrappedCallback);
     return result;
   }
 
@@ -184,7 +215,7 @@ EventBus.prototype.once = function (event, priority, callback, that) {
   // bound callbacks via {@link #off} using the original
   // callback
   wrappedCallback[FN_REF] = callback;
-  this.on(event, priority, wrappedCallback);
+  this.on(events, priority, wrappedCallback);
 };
 
 /**
@@ -192,8 +223,8 @@ EventBus.prototype.once = function (event, priority, callback, that) {
  *
  * If no callback is given, all listeners for a given event name are being removed.
  *
- * @param {string|Array<string>} events
- * @param {Function} [callback]
+ * @param {string|string[]} events
+ * @param {EventBusEventCallback} [callback]
  */
 EventBus.prototype.off = function (events, callback) {
   events = isArray(events) ? events : [events];
@@ -204,11 +235,11 @@ EventBus.prototype.off = function (events, callback) {
 };
 
 /**
- * Create an EventBus event.
+ * Create an event recognized be the event bus.
  *
- * @param {Object} data
+ * @param {Object} data Event data.
  *
- * @return {Object} event, recognized by the eventBus
+ * @return {Event} An event that will be recognized by the event bus.
  */
 EventBus.prototype.createEvent = function (data) {
   var event = new InternalEvent();
@@ -217,10 +248,11 @@ EventBus.prototype.createEvent = function (data) {
 };
 
 /**
- * Fires a named event.
+ * Fires an event.
  *
  * @example
  *
+ * ```javascript
  * // fire event by name
  * events.fire('foo');
  *
@@ -238,13 +270,13 @@ EventBus.prototype.createEvent = function (data) {
  * });
  *
  * events.fire({ type: 'foo' }, 'I am bar!');
+ * ```
  *
- * @param {string} [name] the optional event name
- * @param {Object} [event] the event object
- * @param {...Object} additional arguments to be passed to the callback functions
+ * @param {string} [type] event type
+ * @param {Object} [data] event or event data
+ * @param {...any} [args] additional arguments the callback will be called with.
  *
- * @return {boolean} the events return value, if specified or false if the
- *                   default action was prevented by listeners
+ * @return {any} The return value. Will be set to `false` if the default was prevented.
  */
 EventBus.prototype.fire = function (type, data) {
   var event, firstListener, returnValue, args;
@@ -296,6 +328,14 @@ EventBus.prototype.fire = function (type, data) {
   }
   return returnValue;
 };
+
+/**
+ * Handle an error by firing an event.
+ *
+ * @param {Error} error The error to be handled.
+ *
+ * @return {boolean} Whether the error was handled.
+ */
 EventBus.prototype.handleError = function (error) {
   return this.fire('error', {
     error: error
@@ -304,6 +344,14 @@ EventBus.prototype.handleError = function (error) {
 EventBus.prototype._destroy = function () {
   this._listeners = {};
 };
+
+/**
+ * @param {Event} event
+ * @param {any[]} args
+ * @param {EventBusListener} listener
+ *
+ * @return {any}
+ */
 EventBus.prototype._invokeListeners = function (event, args, listener) {
   var returnValue;
   while (listener) {
@@ -316,6 +364,14 @@ EventBus.prototype._invokeListeners = function (event, args, listener) {
   }
   return returnValue;
 };
+
+/**
+ * @param {Event} event
+ * @param {any[]} args
+ * @param {EventBusListener} listener
+ *
+ * @return {any}
+ */
 EventBus.prototype._invokeListener = function (event, args, listener) {
   var returnValue;
   if (listener.callback.__isTomb) {
@@ -344,7 +400,7 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
   return returnValue;
 };
 
-/*
+/**
  * Add new listener with a certain priority to the list
  * of listeners (for the given event).
  *
@@ -358,7 +414,7 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
  *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
  *
  * @param {string} event
- * @param {Object} listener { priority, callback }
+ * @param {EventBusListener} listener
  */
 EventBus.prototype._addListener = function (event, newListener) {
   var listener = this._getListeners(event),
@@ -389,9 +445,20 @@ EventBus.prototype._addListener = function (event, newListener) {
   // add new listener to back
   previousListener.next = newListener;
 };
+
+/**
+ * @param {string} name
+ *
+ * @return {EventBusListener}
+ */
 EventBus.prototype._getListeners = function (name) {
   return this._listeners[name];
 };
+
+/**
+ * @param {string} name
+ * @param {EventBusListener} listener
+ */
 EventBus.prototype._setListeners = function (name, listener) {
   this._listeners[name] = listener;
 };
@@ -439,9 +506,9 @@ InternalEvent.prototype.init = function (data) {
  * Invoke function. Be fast...
  *
  * @param {Function} fn
- * @param {Array<Object>} args
+ * @param {any[]} args
  *
- * @return {Any}
+ * @return {any}
  */
 function invokeFunction(fn, args) {
   return fn.apply(null, args);
@@ -483,21 +550,24 @@ class FieldFactory {
     if (!fieldDefinition) {
       throw new Error(`form field of type <${type}> not supported`);
     }
+    const {
+      config
+    } = fieldDefinition;
     if (id && this._formFieldRegistry._ids.assigned(id)) {
       throw new Error(`ID <${id}> already assigned`);
     }
     if (key && this._formFieldRegistry._keys.assigned(key)) {
       throw new Error(`key <${key}> already assigned`);
     }
-    const labelAttrs = applyDefaults && fieldDefinition.label ? {
-      label: fieldDefinition.label
+    const labelAttrs = applyDefaults && config.label ? {
+      label: config.label
     } : {};
-    const field = fieldDefinition.create({
+    const field = config.create({
       ...labelAttrs,
       ...attrs
     });
     this._ensureId(field);
-    if (fieldDefinition.keyed) {
+    if (config.keyed) {
       this._ensureKey(field, applyDefaults);
     }
     return field;
@@ -570,6 +640,10 @@ class FormFieldRegistry extends FormFieldRegistry$1 {
   }
 }
 
+const MAX_COLUMNS_PER_ROW = 16;
+const MAX_COLUMNS = 16;
+const MIN_COLUMNS = 2;
+const MAX_FIELDS_PER_ROW = 4;
 class FormLayoutValidator {
   /**
    * @constructor
@@ -583,15 +657,15 @@ class FormLayoutValidator {
   }
   validateField(field = {}, columns, row) {
     // allow empty (auto columns)
-    if (columns) {
-      // allow minimum 2 cols
-      if (columns < 2) {
-        return 'Minimum 2 columns are allowed';
+    if (Number.isInteger(columns)) {
+      // allow minimum cols
+      if (columns < MIN_COLUMNS) {
+        return `Minimum ${MIN_COLUMNS} columns are allowed`;
       }
 
-      // allow maximum 16 cols
-      if (columns > 16) {
-        return 'Maximum 16 columns are allowed';
+      // allow maximum cols
+      if (columns > MAX_COLUMNS) {
+        return `Maximum ${MAX_COLUMNS} columns are allowed`;
       }
     }
     if (!row) {
@@ -616,17 +690,24 @@ class FormLayoutValidator {
     });
 
     // do not allow overflows
-    if (sumColumns > 16 || sumColumns === 16 && sumAutoCols > 0 || columns === 16 && sumFields > 1) {
-      return 'New value exceeds the maximum of 16 columns per row';
+    if (sumColumns > MAX_COLUMNS_PER_ROW || sumAutoCols > 0 && sumColumns > calculateMaxColumnsWithAuto(sumAutoCols) || columns === MAX_COLUMNS_PER_ROW && sumFields > 1) {
+      return `New value exceeds the maximum of ${MAX_COLUMNS_PER_ROW} columns per row`;
     }
-    if (sumFields > 4) {
-      return 'Maximum 4 fields per row are allowed';
+    if (sumFields > MAX_FIELDS_PER_ROW) {
+      return `Maximum ${MAX_FIELDS_PER_ROW} fields per row are allowed`;
     }
     return null;
   }
 }
 FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
 
+// helper //////////////////////
+
+// on normal screen sizes, auto columns take minimum 2 columns
+function calculateMaxColumnsWithAuto(autoCols) {
+  return MAX_COLUMNS_PER_ROW - autoCols * 2;
+}
+
 class Importer {
   /**
    * @constructor
@@ -743,6 +824,91 @@ 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
+ */
+function createDragger(fn, dragPreview) {
+  let self;
+  let startX, startY;
+
+  /** drag start */
+  function onDragStart(event) {
+    self = this;
+    startX = event.clientX;
+    startY = event.clientY;
+
+    // (1) prevent preview image
+    if (event.dataTransfer) {
+      event.dataTransfer.setDragImage(dragPreview, 0, 0);
+    }
+
+    // (2) setup drag listeners
+
+    // attach drag + cleanup event
+    document.addEventListener('dragover', onDrag);
+    document.addEventListener('dragend', onEnd);
+    document.addEventListener('drop', preventDefault);
+  }
+  function onDrag(event) {
+    const delta = {
+      x: event.clientX - startX,
+      y: event.clientY - startY
+    };
+
+    // call provided fn with event, delta
+    return fn.call(self, event, delta);
+  }
+  function onEnd() {
+    document.removeEventListener('dragover', onDrag);
+    document.removeEventListener('dragend', onEnd);
+    document.removeEventListener('drop', preventDefault);
+  }
+  return onDragStart;
+}
+
+/**
+ * Throttle function call according UI update cycle.
+ *
+ * @param  {Function} fn
+ *
+ * @return {Function} throttled fn
+ */
+function throttle(fn) {
+  let active = false;
+  let lastArgs = [];
+  let lastThis = undefined;
+  return function (...args) {
+    lastArgs = args;
+    lastThis = this;
+    if (active) {
+      return;
+    }
+    active = true;
+    fn.apply(lastThis, lastArgs);
+    window.requestAnimationFrame(function () {
+      lastArgs = lastThis = active = undefined;
+    });
+  };
+}
+function preventDefault(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
 const DragAndDropContext = createContext({
   drake: null
 });
@@ -783,10 +949,42 @@ var CloseIcon = (({
 })));
 
 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 DraggableIcon = (({
+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"
+})));
+
+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",
@@ -799,11 +997,11 @@ var DraggableIcon = (({
   fill: "none"
 })));
 
-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() { _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$1({
+}) => /*#__PURE__*/React.createElement("svg", _extends({
   width: "15",
   height: "15",
   fill: "none",
@@ -859,9 +1057,7 @@ function EditorText(props) {
     disableLinks: true
   });
 }
-EditorText.create = Text$1.create;
-EditorText.type = Text$1.type;
-EditorText.keyed = Text$1.keyed;
+EditorText.config = Text$1.config;
 
 const editorFormFields = [EditorText];
 
@@ -869,28 +1065,20 @@ class EditorFormFields extends FormFields {
   constructor() {
     super();
     editorFormFields.forEach(formField => {
-      this.register(formField.type, formField);
+      this.register(formField.config.type, formField);
     });
   }
 }
 
-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 ListDeleteIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "11",
-  height: "14"
-}, props), /*#__PURE__*/React.createElement("path", {
-  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"
-})));
-
-const PALETTE_ENTRIES = formFields.filter(f => f.type !== 'default').map(f => {
+const PALETTE_ENTRIES = formFields.filter(({
+  config: fieldConfig
+}) => fieldConfig.type !== 'default').map(({
+  config: fieldConfig
+}) => {
   return {
-    label: f.label,
-    type: f.type,
-    group: f.group
+    label: fieldConfig.label,
+    type: fieldConfig.type,
+    group: fieldConfig.group
   };
 });
 const PALETTE_GROUPS = [{
@@ -911,19 +1099,24 @@ function Palette(props) {
   const [searchTerm, setSearchTerm] = useState('');
   const inputRef = useRef();
   const groups = groupEntries(entries);
+  const simplifyString = useCallback(str => {
+    return str.toLowerCase().replace(/\s+/g, '');
+  }, []);
+  const filter = useCallback(entry => {
+    const simplifiedSearchTerm = simplifyString(searchTerm);
+    if (!simplifiedSearchTerm) {
+      return true;
+    }
+    const simplifiedEntryLabel = simplifyString(entry.label);
+    const simplifiedEntryType = simplifyString(entry.type);
+    return simplifiedEntryLabel.includes(simplifiedSearchTerm) || simplifiedEntryType.includes(simplifiedSearchTerm);
+  }, [searchTerm, simplifyString]);
 
   // filter entries on search change
   useEffect(() => {
-    const filter = entry => {
-      if (!searchTerm) {
-        return true;
-      }
-      const search = entry.label.toLowerCase();
-      return searchTerm.toLowerCase().split(/\s/g).every(term => search.includes(term));
-    };
     const entries = PALETTE_ENTRIES.filter(filter);
     setEntries(entries);
-  }, [searchTerm]);
+  }, [filter, searchTerm]);
   const handleInput = useCallback(event => {
     setSearchTerm(() => event.target.value);
   }, [setSearchTerm]);
@@ -1336,6 +1529,136 @@ function FieldDragPreview(props) {
   });
 }
 
+const COLUMNS_REGEX = /^cds--col(-lg)?/;
+const ELEMENT_RESIZING_CLS = 'fjs-element-resizing';
+const RESIZE_DRAG_PREVIEW_CLS = 'fjs-resize-drag-preview';
+const GRID_OFFSET_PX = 16;
+function FieldResizer(props) {
+  const {
+    field,
+    position
+  } = props;
+  const ref = useRef(null);
+  const formLayoutValidator = useService$1('formLayoutValidator');
+  const modeling = useService$1('modeling');
+
+  // we can't use state as we need to
+  // manipulate this inside dragging events
+  const context = useRef({
+    startColumns: 0,
+    newColumns: 0
+  });
+  const onResize = throttle((_, delta) => {
+    const {
+      x: dx
+    } = delta;
+    const {
+      layout = {}
+    } = field;
+    const newColumns = calculateNewColumns(ref.current, layout.columns || context.current.startColumns, dx, position);
+    const errorMessage = formLayoutValidator.validateField(field, newColumns);
+    if (!errorMessage) {
+      context.current.newColumns = newColumns;
+
+      // make visual updates to preview change
+      const columnNode = ref.current.closest('.fjs-layout-column');
+      removeMatching(columnNode, COLUMNS_REGEX);
+      columnNode.classList.add(`cds--col-lg-${newColumns}`);
+    }
+  });
+  const onResizeStart = event => {
+    const target = getElementNode(field);
+    const parent = getParent(target);
+
+    // create a blank element to use as drag preview
+    // ensure it was only created once
+    let blankPreview = getDragPreviewImage(parent);
+    if (!blankPreview) {
+      blankPreview = document.createElement('div');
+      blankPreview.classList.add(RESIZE_DRAG_PREVIEW_CLS);
+      parent.appendChild(blankPreview);
+    }
+
+    // initialize drag handler
+    const onDragStart = createDragger(onResize, blankPreview);
+    onDragStart(event);
+
+    // mitigate auto columns on the grid that
+    // has a offset of 16px (1rem) to both side
+    const columnNode = getColumnNode(target);
+    const startWidth = columnNode.getBoundingClientRect().width + GRID_OFFSET_PX;
+    context.current.startColumns = asColumns(startWidth, parent);
+    setResizing(target, position);
+  };
+  const onResizeEnd = () => {
+    const {
+      layout = {}
+    } = field;
+    if (context.current.newColumns) {
+      modeling.editFormField(field, 'layout', {
+        ...layout,
+        columns: context.current.newColumns
+      });
+    }
+    const target = getElementNode(field);
+    unsetResizing(target, position);
+    context.current.newColumns = null;
+
+    // remove blank preview
+    const blankPreview = getDragPreviewImage(getParent(target));
+    blankPreview.remove();
+  };
+  if (field.type === 'default') {
+    return null;
+  }
+  return jsx("div", {
+    ref: ref,
+    class: classnames('fjs-field-resize-handle', 'fjs-field-resize-handle-' + position, DRAG_NO_MOVE_CLS),
+    draggable: true,
+    onDragStart: onResizeStart,
+    onDragEnd: onResizeEnd
+  });
+}
+
+// helper //////
+
+function asColumns(width, parent) {
+  const totalWidth = parent.getBoundingClientRect().width;
+  const oneColumn = 1 / 16 * totalWidth;
+  return Math.round(width / oneColumn);
+}
+function calculateNewColumns(node, currentColumns, deltaX, position) {
+  const parent = getParent(node);
+
+  // invert delta if we are resizing from the left
+  if (position === 'left') {
+    deltaX = deltaX * -1;
+  }
+  const deltaColumns = asColumns(deltaX, parent);
+  return currentColumns + deltaColumns;
+}
+function getParent(node) {
+  return node.closest('.fjs-layout-row');
+}
+function removeMatching(node, regex) {
+  return classes(node).removeMatching(regex);
+}
+function getColumnNode(node) {
+  return node.closest('.fjs-layout-column');
+}
+function getElementNode(field) {
+  return query('.fjs-element[data-id="' + field.id + '"]');
+}
+function getDragPreviewImage(node) {
+  return query('.fjs-resize-drag-preview', node);
+}
+function setResizing(node, position) {
+  classes(node).add(ELEMENT_RESIZING_CLS + '-' + position);
+}
+function unsetResizing(node, position) {
+  classes(node).remove(ELEMENT_RESIZING_CLS + '-' + position);
+}
+
 function ContextPad(props) {
   if (!props.children) {
     return null;
@@ -1378,9 +1701,17 @@ function Element(props) {
     eventBus.on('selection.changed', scrollIntoView);
     return () => eventBus.off('selection.changed', scrollIntoView);
   }, [id]);
+  useLayoutEffect(() => {
+    if (selection.isSelected(field)) {
+      ref.current.focus();
+    }
+  }, [selection, field]);
   function onClick(event) {
     event.stopPropagation();
     selection.toggle(field);
+
+    // properly focus on field
+    ref.current.focus();
   }
   const classes = [];
   if (props.class) {
@@ -1395,11 +1726,19 @@ function Element(props) {
     const index = getFormFieldIndex(parentField, field);
     modeling.removeFormField(field, parentField, index);
   };
+  const onKeyPress = event => {
+    if (event.key === 'Enter') {
+      event.stopPropagation();
+      selection.toggle(field);
+    }
+  };
   return jsxs("div", {
     class: classes.join(' '),
     "data-id": id,
     "data-field-type": type,
+    tabIndex: type === 'default' ? -1 : 0,
     onClick: onClick,
+    onKeyPress: onKeyPress,
     ref: ref,
     children: [jsx(DebugColumns, {
       field: field
@@ -1407,9 +1746,15 @@ function Element(props) {
       children: selection.isSelected(field) && field.type !== 'default' ? jsx("button", {
         class: "fjs-context-pad-item",
         onClick: onRemove,
-        children: jsx(ListDeleteIcon, {})
+        children: jsx(DeleteIcon$1, {})
       }) : null
-    }), props.children]
+    }), props.children, jsx(FieldResizer, {
+      position: "left",
+      field: field
+    }), jsx(FieldResizer, {
+      position: "right",
+      field: field
+    })]
   });
 }
 function DebugColumns(props) {
@@ -1494,8 +1839,12 @@ function FormEditor$1(props) {
     propertiesPanel = useService$1('propertiesPanel'),
     propertiesPanelConfig = useService$1('config.propertiesPanel');
   const {
-    schema
+    schema,
+    properties
   } = formEditor._getState();
+  const {
+    ariaLabel
+  } = properties;
   const formContainerRef = useRef(null);
   const paletteRef = useRef(null);
   const propertiesPanelRef = useRef(null);
@@ -1581,7 +1930,8 @@ function FormEditor$1(props) {
               data: {},
               errors: {},
               properties: {
-                readOnly: true
+                ariaLabel,
+                disabled: true
               },
               schema
             };
@@ -1767,6 +2117,12 @@ var core = {
   fieldFactory: ['type', FieldFactory]
 };
 
+/**
+ * @typedef {import('didi').Injector} Injector
+ *
+ * @typedef {import('../../core/EventBus').default} EventBus
+ */
+
 var NOT_REGISTERED_ERROR = 'is not a registered action',
   IS_REGISTERED_ERROR = 'is already registered';
 
@@ -1896,10 +2252,10 @@ EditorActions.prototype._registerDefaultActions = function (injector) {
 /**
  * Triggers a registered action
  *
- * @param  {string} action
- * @param  {Object} opts
+ * @param {string} action
+ * @param {Object} opts
  *
- * @return {Unknown} Returns what the registered listener returns
+ * @return {unknown} Returns what the registered listener returns
  */
 EditorActions.prototype.trigger = function (action, opts) {
   if (!this._actions[action]) {
@@ -1928,7 +2284,7 @@ EditorActions.prototype.trigger = function (action, opts) {
  * editorActions.isRegistered('spaceTool'); // true
  * ´´´
  *
- * @param  {Object} actions
+ * @param {Object} actions
  */
 EditorActions.prototype.register = function (actions, listener) {
   var self = this;
@@ -1943,8 +2299,8 @@ EditorActions.prototype.register = function (actions, listener) {
 /**
  * Registers a listener to an action key
  *
- * @param  {string} action
- * @param  {Function} listener
+ * @param {string} action
+ * @param {Function} listener
  */
 EditorActions.prototype._registerAction = function (action, listener) {
   if (this.isRegistered(action)) {
@@ -1988,6 +2344,9 @@ function error(action, message) {
   return new Error(action + ' ' + message);
 }
 
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
 var EditorActionsModule$1 = {
   __init__: ['editorActions'],
   editorActions: ['type', EditorActions]
@@ -2047,10 +2406,10 @@ var DraggingModule = {
   dragging: ['type', Dragging]
 };
 
-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'];
+var KEYS_COPY = ['c', 'C'];
+var KEYS_PASTE = ['v', 'V'];
+var KEYS_REDO = ['y', 'Y'];
+var KEYS_UNDO = ['z', 'Z'];
 
 /**
  * Returns true if event was triggered with any modifier
@@ -2075,7 +2434,7 @@ function isCmd(event) {
 /**
  * Checks if key pressed is one of provided keys.
  *
- * @param {string|Array<string>} keys
+ * @param {string|string[]} keys
  * @param {KeyboardEvent} event
  */
 function isKey(keys, event) {
@@ -2096,12 +2455,16 @@ function isPaste(event) {
   return isCmd(event) && isKey(KEYS_PASTE, event);
 }
 function isUndo(event) {
-  return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO$1, event);
+  return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
 }
 function isRedo(event) {
-  return isCmd(event) && (isKey(KEYS_REDO$1, event) || isKey(KEYS_UNDO$1, event) && isShift(event));
+  return isCmd(event) && (isKey(KEYS_REDO, event) || isKey(KEYS_UNDO, event) && isShift(event));
 }
 
+/**
+ * @typedef {import('../../core/EventBus').default} EventBus
+ */
+
 var KEYDOWN_EVENT = 'keyboard.keydown',
   KEYUP_EVENT = 'keyboard.keyup';
 var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
@@ -2128,7 +2491,7 @@ var DEFAULT_PRIORITY$1 = 1000;
  * A default binding for the keyboard may be specified via the
  * `keyboard.bindTo` configuration option.
  *
- * @param {Config} config
+ * @param {Object} config
  * @param {EventBus} eventBus
  */
 function Keyboard(config, eventBus) {
@@ -2257,8 +2620,6 @@ function isInput(target) {
 }
 
 var LOW_PRIORITY$1 = 500;
-var KEYS_REDO = ['y', 'Y', 'KeyY'];
-var KEYS_UNDO = ['z', 'Z', 'KeyZ'];
 
 /**
  * Adds default keyboard bindings.
@@ -2389,6 +2750,9 @@ KeyboardBindings.prototype.registerBindings = function (keyboard, editorActions)
   });
 };
 
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
 var KeyboardModule$1 = {
   __init__: ['keyboard', 'keyboardBindings'],
   keyboard: ['type', Keyboard],
@@ -2924,32 +3288,46 @@ class Modeling {
 }
 Modeling.$inject = ['commandStack', 'eventBus', 'formEditor', 'formFieldRegistry', 'fieldFactory'];
 
+/**
+ * @typedef {import('../core/Types').ElementLike} ElementLike
+ * @typedef {import('../core/EventBus').default} EventBus
+ * @typedef {import('./CommandStack').CommandContext} CommandContext
+ *
+ * @typedef {string|string[]} Events
+ * @typedef { (context: CommandContext) => ElementLike[] | void } HandlerFunction
+ * @typedef { (context: CommandContext) => void } ComposeHandlerFunction
+ */
+
 var DEFAULT_PRIORITY = 1000;
 
 /**
- * A utility that can be used to plug-in into the command execution for
+ * A utility that can be used to plug into the command execution for
  * extension and/or validation.
  *
- * @param {EventBus} eventBus
+ * @class
+ * @constructor
  *
  * @example
  *
- * import inherits from 'inherits-browser';
- *
+ * ```javascript
  * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
  *
- * function CommandLogger(eventBus) {
- *   CommandInterceptor.call(this, eventBus);
+ * class CommandLogger extends CommandInterceptor {
+ *   constructor(eventBus) {
+ *     super(eventBus);
  *
- *   this.preExecute(function(event) {
- *     console.log('command pre-execute', event);
+ *   this.preExecute('shape.create', (event) => {
+ *     console.log('commandStack.shape-create.preExecute', event);
  *   });
  * }
+ * ```
  *
- * inherits(CommandLogger, CommandInterceptor);
- *
+ * @param {EventBus} eventBus
  */
 function CommandInterceptor(eventBus) {
+  /**
+   * @type {EventBus}
+   */
   this._eventBus = eventBus;
 }
 CommandInterceptor.$inject = ['eventBus'];
@@ -2960,15 +3338,14 @@ function unwrapEvent(fn, that) {
 }
 
 /**
- * Register an interceptor for a command execution
- *
- * @param {string|Array<string>} [events] list of commands to register on
- * @param {string} [hook] command hook, i.e. preExecute, executed to listen on
- * @param {number} [priority] the priority on which to hook into the execution
- * @param {Function} handlerFn interceptor to be invoked with (event)
- * @param {boolean} unwrap if true, unwrap the event and pass (context, command, event) to the
- *                          listener instead
- * @param {Object} [that] Pass context (`this`) to the handler function
+ * Intercept a command during one of the phases.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {string} [hook] phase to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
  */
 CommandInterceptor.prototype.on = function (events, hook, priority, handlerFn, unwrap, that) {
   if (isFunction(hook) || isNumber(hook)) {
@@ -3003,28 +3380,130 @@ CommandInterceptor.prototype.on = function (events, hook, priority, handlerFn, u
     eventBus.on(fullEvent, priority, unwrap ? unwrapEvent(handlerFn, that) : handlerFn, that);
   });
 };
-var hooks = ['canExecute', 'preExecute', 'preExecuted', 'execute', 'executed', 'postExecute', 'postExecuted', 'revert', 'reverted'];
+
+/**
+ * Add a <canExecute> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.canExecute = createHook('canExecute');
+
+/**
+ * Add a <preExecute> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.preExecute = createHook('preExecute');
+
+/**
+ * Add a <preExecuted> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.preExecuted = createHook('preExecuted');
+
+/**
+ * Add a <execute> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.execute = createHook('execute');
+
+/**
+ * Add a <executed> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.executed = createHook('executed');
+
+/**
+ * Add a <postExecute> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.postExecute = createHook('postExecute');
+
+/**
+ * Add a <postExecuted> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.postExecuted = createHook('postExecuted');
+
+/**
+ * Add a <revert> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.revert = createHook('revert');
+
+/**
+ * Add a <reverted> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.reverted = createHook('reverted');
 
 /*
- * Install hook shortcuts
+ * Add prototype methods for each phase of command execution (e.g. execute,
+ * revert).
+ *
+ * @param {string} hook
  *
- * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
- * which will in term forward to CommandInterceptor#on.
+ * @return { (
+ *   events?: Events,
+ *   priority?: number,
+ *   handlerFn: ComposeHandlerFunction|HandlerFunction,
+ *   unwrap?: boolean
+ * ) => any }
  */
-forEach(hooks, function (hook) {
+function createHook(hook) {
   /**
-   * {canExecute|preExecute|preExecuted|execute|executed|postExecute|postExecuted|revert|reverted}
+   * @this {CommandInterceptor}
    *
-   * A named hook for plugging into the command execution
-   *
-   * @param {string|Array<string>} [events] list of commands to register on
-   * @param {number} [priority] the priority on which to hook into the execution
-   * @param {Function} handlerFn interceptor to be invoked with (event)
-   * @param {boolean} [unwrap=false] if true, unwrap the event and pass (context, command, event) to the
-   *                          listener instead
-   * @param {Object} [that] Pass context (`this`) to the handler function
+   * @param {Events} [events]
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap]
+   * @param {any} [that]
    */
-  CommandInterceptor.prototype[hook] = function (events, priority, handlerFn, unwrap, that) {
+  const hookFn = function (events, priority, handlerFn, unwrap, that) {
     if (isFunction(events) || isNumber(events)) {
       that = unwrap;
       unwrap = handlerFn;
@@ -3034,7 +3513,8 @@ forEach(hooks, function (hook) {
     }
     this.on(events, hook, priority, handlerFn, unwrap, that);
   };
-});
+  return hookFn;
+}
 
 class FormLayoutUpdater extends CommandInterceptor {
   constructor(eventBus, formLayouter, modeling, formEditor) {
@@ -3172,6 +3652,34 @@ var behaviorModule = {
   validateBehavior: ['type', ValidateBehavior]
 };
 
+/**
+ * @typedef {import('didi').Injector} Injector
+ *
+ * @typedef {import('../core/Types').ElementLike} ElementLike
+ *
+ * @typedef {import('../core/EventBus').default} EventBus
+ * @typedef {import('./CommandHandler').default} CommandHandler
+ *
+ * @typedef { any } CommandContext
+ * @typedef { {
+ *   new (...args: any[]) : CommandHandler
+ * } } CommandHandlerConstructor
+ * @typedef { {
+ *   [key: string]: CommandHandler;
+ * } } CommandHandlerMap
+ * @typedef { {
+ *   command: string;
+ *   context: any;
+ *   id?: any;
+ * } } CommandStackAction
+ * @typedef { {
+ *   actions: CommandStackAction[];
+ *   dirty: ElementLike[];
+ *   trigger: 'execute' | 'undo' | 'redo' | 'clear' | null;
+ *   atomic?: boolean;
+ * } } CurrentExecution
+ */
+
 /**
  * A service that offers un- and redoable execution of commands.
  *
@@ -3222,7 +3730,7 @@ var behaviorModule = {
  * got changed during the `execute` and `revert` operations.
  *
  * Command handlers may execute other modeling operations (and thus
- * commands) in their `preExecute` and `postExecute` phases. The command
+ * commands) in their `preExecute(d)` and `postExecute(d)` phases. The command
  * stack will properly group all commands together into a logical unit
  * that may be re- and undone atomically.
  *
@@ -3252,14 +3760,14 @@ function CommandStack(eventBus, injector) {
   /**
    * A map of all registered command handlers.
    *
-   * @type {Object}
+   * @type {CommandHandlerMap}
    */
   this._handlerMap = {};
 
   /**
    * A stack containing all re/undoable actions on the diagram
    *
-   * @type {Array<Object>}
+   * @type {CommandStackAction[]}
    */
   this._stack = [];
 
@@ -3273,18 +3781,27 @@ function CommandStack(eventBus, injector) {
   /**
    * Current active commandStack execution
    *
-   * @type {Object}
-   * @property {Object[]} actions
-   * @property {Object[]} dirty
-   * @property { 'undo' | 'redo' | 'clear' | 'execute' | null } trigger the cause of the current excecution
+   * @type {CurrentExecution}
    */
   this._currentExecution = {
     actions: [],
     dirty: [],
     trigger: null
   };
-  this._injector = injector;
+
+  /**
+   * @type {Injector}
+   */
+  this._injector = injector;
+
+  /**
+   * @type EventBus
+   */
   this._eventBus = eventBus;
+
+  /**
+   * @type { number }
+   */
   this._uid = 1;
   eventBus.on(['diagram.destroy', 'diagram.clear'], function () {
     this.clear(false);
@@ -3293,10 +3810,10 @@ function CommandStack(eventBus, injector) {
 CommandStack.$inject = ['eventBus', 'injector'];
 
 /**
- * Execute a command
+ * Execute a command.
  *
- * @param {string} command the command to execute
- * @param {Object} context the environment to execute the command in
+ * @param {string} command The command to execute.
+ * @param {CommandContext} context The context with which to execute the command.
  */
 CommandStack.prototype.execute = function (command, context) {
   if (!command) {
@@ -3309,11 +3826,11 @@ CommandStack.prototype.execute = function (command, context) {
   };
   this._pushAction(action);
   this._internalExecute(action);
-  this._popAction(action);
+  this._popAction();
 };
 
 /**
- * Ask whether a given command can be executed.
+ * Check whether a command can be executed.
  *
  * Implementors may hook into the mechanism on two ways:
  *
@@ -3327,10 +3844,10 @@ CommandStack.prototype.execute = function (command, context) {
  *     If the method {@link CommandHandler#canExecute} is implemented in a handler
  *     it will be called to figure out whether the execution is allowed.
  *
- * @param  {string} command the command to execute
- * @param  {Object} context the environment to execute the command in
+ * @param {string} command The command to execute.
+ * @param {CommandContext} context The context with which to execute the command.
  *
- * @return {boolean} true if the command can be executed
+ * @return {boolean} Whether the command can be executed with the given context.
  */
 CommandStack.prototype.canExecute = function (command, context) {
   const action = {
@@ -3354,7 +3871,9 @@ CommandStack.prototype.canExecute = function (command, context) {
 };
 
 /**
- * Clear the command stack, erasing all undo / redo history
+ * Clear the command stack, erasing all undo / redo history.
+ *
+ * @param {boolean} [emit=true] Whether to fire an event. Defaults to `true`.
  */
 CommandStack.prototype.clear = function (emit) {
   this._stack.length = 0;
@@ -3409,21 +3928,21 @@ CommandStack.prototype.redo = function () {
 };
 
 /**
- * Register a handler instance with the command stack
+ * Register a handler instance with the command stack.
  *
- * @param {string} command
- * @param {CommandHandler} handler
+ * @param {string} command Command to be executed.
+ * @param {CommandHandler} handler Handler to execute the command.
  */
 CommandStack.prototype.register = function (command, handler) {
   this._setHandler(command, handler);
 };
 
 /**
- * Register a handler type with the command stack
- * by instantiating it and injecting its dependencies.
+ * Register a handler type with the command stack  by instantiating it and
+ * injecting its dependencies.
  *
- * @param {string} command
- * @param {Function} a constructor for a {@link CommandHandler}
+ * @param {string} command Command to be executed.
+ * @param {CommandHandlerConstructor} handlerCls Constructor to instantiate a {@link CommandHandler}.
  */
 CommandStack.prototype.registerHandler = function (command, handlerCls) {
   if (!command || !handlerCls) {
@@ -3432,9 +3951,17 @@ CommandStack.prototype.registerHandler = function (command, handlerCls) {
   const handler = this._injector.instantiate(handlerCls);
   this.register(command, handler);
 };
+
+/**
+ * @return {boolean}
+ */
 CommandStack.prototype.canUndo = function () {
   return !!this._getUndoAction();
 };
+
+/**
+ * @return {boolean}
+ */
 CommandStack.prototype.canRedo = function () {
   return !!this._getRedoAction();
 };
@@ -3528,7 +4055,7 @@ CommandStack.prototype._internalExecute = function (action, redo) {
     }
     this._fire(command, 'postExecuted', action);
   }
-  this._popAction(action);
+  this._popAction();
 };
 CommandStack.prototype._pushAction = function (action) {
   const execution = this._currentExecution,
@@ -3589,6 +4116,9 @@ CommandStack.prototype._setHandler = function (command, handler) {
   this._handlerMap[command] = handler;
 };
 
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
 var commandModule = {
   commandStack: ['type', CommandStack]
 };
@@ -3795,44 +4325,18 @@ 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", {
+var FeelIcon$1 = function FeelIcon(props) {
+  return jsx("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"
-    })]
+    children: jsx("path", {
+      d: "M3.617 11.99c-.137.684-.392 1.19-.765 1.518-.362.328-.882.492-1.558.492H0l.309-1.579h1.264l1.515-7.64h-.912l.309-1.579h.911l.236-1.191c.137-.685.387-1.192.75-1.52C4.753.164 5.277 0 5.953 0h1.294L6.94 1.579H5.675l-.323 1.623h1.264l-.309 1.579H5.043l-1.426 7.208ZM5.605 11.021l3.029-4.155L7.28 3.202h2.073l.706 2.547h.176l1.691-2.547H14l-3.014 4.051 1.338 3.768H10.25l-.706-2.606H9.37L7.678 11.02H5.605Z",
+      fill: "currentcolor"
+    })
   });
 };
-FeelOptionalIcon.defaultProps = {
-  viewBox: "0 0 16 16",
+FeelIcon$1.defaultProps = {
+  width: "14",
+  height: "14",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
@@ -4072,6 +4576,18 @@ function useShowEntryEvent(id) {
  * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
+  const [scrollContainer, setScrollContainer] = useState(query(scrollContainerSelector));
+  const updateScrollContainer = useCallback(() => {
+    const newScrollContainer = query(scrollContainerSelector);
+    if (newScrollContainer !== scrollContainer) {
+      setScrollContainer(newScrollContainer);
+    }
+  }, [scrollContainerSelector, scrollContainer]);
+  useEffect(() => {
+    updateScrollContainer();
+  }, [updateScrollContainer]);
+  useEvent('propertiesPanel.attach', updateScrollContainer);
+  useEvent('propertiesPanel.detach', updateScrollContainer);
   useEffect(() => {
     const Observer = IntersectionObserver;
 
@@ -4079,33 +4595,36 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
     if (!Observer) {
       return;
     }
-    let observer;
-    if (ref.current) {
-      const scrollContainer = query(scrollContainerSelector);
-      observer = new Observer(entries => {
-        entries.forEach(entry => {
-          if (entry.intersectionRatio < 1) {
-            setSticky(true);
-          } else if (entry.intersectionRatio === 1) {
-            setSticky(false);
-          }
-        });
-      }, {
-        root: scrollContainer,
-        rootMargin: '0px 0px 999999% 0px',
-        // Use bottom margin to avoid stickyness when scrolling out to bottom
-        threshold: [1]
-      });
-      observer.observe(ref.current);
+
+    // TODO(@barmac): test this
+    if (!ref.current || !scrollContainer) {
+      return;
     }
+    const observer = new Observer(entries => {
+      // scroll container is unmounted, do not update sticky state
+      if (scrollContainer.scrollHeight === 0) {
+        return;
+      }
+      entries.forEach(entry => {
+        if (entry.intersectionRatio < 1) {
+          setSticky(true);
+        } else if (entry.intersectionRatio === 1) {
+          setSticky(false);
+        }
+      });
+    }, {
+      root: scrollContainer,
+      rootMargin: '0px 0px 999999% 0px',
+      // Use bottom margin to avoid stickyness when scrolling out to bottom
+      threshold: [1]
+    });
+    observer.observe(ref.current);
 
     // Unobserve if unmounted
     return () => {
-      if (ref.current && observer) {
-        observer.unobserve(ref.current);
-      }
+      observer.unobserve(ref.current);
     };
-  }, [ref, scrollContainerSelector, setSticky]);
+  }, [ref.current, scrollContainer, setSticky]);
 }
 
 /**
@@ -4238,9 +4757,7 @@ function Placeholder(props) {
     })
   });
 }
-const DEFAULT_LAYOUT = {
-  open: true
-};
+const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
 
 /**
@@ -4327,7 +4844,7 @@ function PropertiesPanel(props) {
   const [layout, setLayout] = useState(createLayout(layoutConfig));
 
   // react to external changes in the layout config
-  useUpdateEffect(() => {
+  useUpdateLayoutEffect(() => {
     const newLayout = createLayout(layoutConfig);
     setLayout(newLayout);
   }, [layoutConfig]);
@@ -4404,7 +4921,7 @@ function PropertiesPanel(props) {
           children: jsx(EventContext.Provider, {
             value: eventContext,
             children: jsxs("div", {
-              class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
+              class: "bio-properties-panel",
               children: [jsx(Header, {
                 element: element,
                 headerProvider: headerProvider
@@ -4448,14 +4965,14 @@ function createDescriptionContext(overrides = {}) {
 // hooks //////////////////
 
 /**
- * This hook behaves like useEffect, but does not trigger on the first render.
+ * This hook behaves like useLayoutEffect, but does not trigger on the first render.
  *
  * @param {Function} effect
  * @param {Array} deps
  */
-function useUpdateEffect(effect, deps) {
+function useUpdateLayoutEffect(effect, deps) {
   const isMounted = useRef(false);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isMounted.current) {
       return effect();
     } else {
@@ -5073,14 +5590,13 @@ const noop$2 = () => {};
  */
 function FeelIcon(props) {
   const {
-    label,
     feel = false,
     active,
     disabled = false,
     onClick = noop$2
   } = props;
-  const feelRequiredLabel = ' must be a FEEL expression';
-  const feelOptionalLabel = ' can optionally be a FEEL expression';
+  const feelRequiredLabel = 'FEEL expression is mandatory';
+  const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
   const handleClick = e => {
     onClick(e);
 
@@ -5093,10 +5609,124 @@ function FeelIcon(props) {
     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, {})
+    title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
+    children: jsx(FeelIcon$1, {})
+  });
+}
+function ToggleSwitch(props) {
+  const {
+    id,
+    label,
+    onInput,
+    value,
+    switcherLabel,
+    inline,
+    onFocus,
+    onBlur,
+    inputRef
+  } = props;
+  const [localValue, setLocalValue] = useState(value);
+  const handleInputCallback = async () => {
+    onInput(!value);
+  };
+  const handleInput = e => {
+    handleInputCallback();
+    setLocalValue(e.target.value);
+  };
+  useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-toggle-switch', {
+      inline
+    }),
+    children: [jsx("label", {
+      class: "bio-properties-panel-label",
+      for: prefixId$6(id),
+      children: label
+    }), jsxs("div", {
+      class: "bio-properties-panel-field-wrapper",
+      children: [jsxs("label", {
+        class: "bio-properties-panel-toggle-switch__switcher",
+        children: [jsx("input", {
+          ref: inputRef,
+          id: prefixId$6(id),
+          class: "bio-properties-panel-input",
+          type: "checkbox",
+          onFocus: onFocus,
+          onBlur: onBlur,
+          name: id,
+          onInput: handleInput,
+          checked: !!localValue
+        }), jsx("span", {
+          class: "bio-properties-panel-toggle-switch__slider"
+        })]
+      }), switcherLabel && jsx("p", {
+        class: "bio-properties-panel-toggle-switch__label",
+        children: switcherLabel
+      })]
+    })]
   });
 }
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {String} props.switcherLabel
+ * @param {Boolean} props.inline
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function ToggleSwitchEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    label,
+    switcherLabel,
+    inline,
+    getValue,
+    setValue,
+    onFocus,
+    onBlur
+  } = props;
+  const value = getValue(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
+    "data-entry-id": id,
+    children: [jsx(ToggleSwitch, {
+      id: id,
+      label: label,
+      value: value,
+      onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      switcherLabel: switcherLabel,
+      inline: inline
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$7(node) {
+  return node && !!node.checked;
+}
+
+// helpers /////////////////
+
+function prefixId$6(id) {
+  return `bio-properties-panel-${id}`;
+}
 const noop$1 = () => {};
 function FeelTextfield(props) {
   const {
@@ -5115,8 +5745,8 @@ function FeelTextfield(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 feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
+  const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const [focus, _setFocus] = useState(undefined);
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
@@ -5156,7 +5786,7 @@ function FeelTextfield(props) {
       return;
     }
     setLocalValue(newValue);
-    if (!feelActive && newValue.startsWith('=')) {
+    if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
       // focus is behind `=` sign that will be removed
       setFocus(-1);
     }
@@ -5219,9 +5849,11 @@ function FeelTextfield(props) {
     };
   }, [containerRef, feelActive, handleFeelToggle, setFocus]);
   return jsxs("div", {
-    class: "bio-properties-panel-feel-entry",
+    class: classnames('bio-properties-panel-feel-entry', {
+      'feel-active': feelActive
+    }),
     children: [jsxs("label", {
-      for: prefixId$6(id),
+      for: prefixId$5(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
       children: [label, jsx(FeelIcon, {
@@ -5238,7 +5870,7 @@ function FeelTextfield(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(CodeEditor, {
-        id: prefixId$6(id),
+        id: prefixId$5(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
@@ -5255,7 +5887,8 @@ function FeelTextfield(props) {
         ...props,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$6(id)
+          'id': prefixId$5(id),
+          'aria-label': label
         },
         value: localValue,
         ref: editorRef
@@ -5292,7 +5925,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     }
   };
   return jsx("input", {
-    id: prefixId$6(id),
+    id: prefixId$5(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -5330,7 +5963,7 @@ forwardRef((props, ref) => {
     }
   };
   return jsx("textarea", {
-    id: prefixId$6(id),
+    id: prefixId$5(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -5345,6 +5978,78 @@ forwardRef((props, ref) => {
     "data-gramm": "false"
   });
 });
+const OptionalFeelToggleSwitch = forwardRef((props, ref) => {
+  const {
+    id,
+    onInput,
+    value,
+    onFocus,
+    onBlur,
+    switcherLabel
+  } = props;
+  const inputRef = 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: () => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+    }
+  };
+  return jsx(ToggleSwitch, {
+    id: id,
+    value: value,
+    inputRef: inputRef,
+    onInput: onInput,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    switcherLabel: switcherLabel
+  });
+});
+forwardRef((props, ref) => {
+  const {
+    id,
+    disabled,
+    onInput,
+    value,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = useRef();
+  const handleChange = ({
+    target
+  }) => {
+    onInput(target.checked);
+  };
+
+  // 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: () => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+    }
+  };
+  return jsx("input", {
+    ref: inputRef,
+    id: prefixId$5(id),
+    name: id,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    type: "checkbox",
+    class: "bio-properties-panel-input",
+    onChange: handleChange,
+    checked: value,
+    disabled: disabled
+  });
+});
 
 /**
  * @param {Object} props
@@ -5452,6 +6157,33 @@ function FeelEntry(props) {
   });
 }
 
+/**
+ * @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 jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-toggle-switch",
+    OptionalComponent: OptionalFeelToggleSwitch,
+    ...props
+  });
+}
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -5480,13 +6212,19 @@ function FeelTemplatingEntry(props) {
     ...props
   });
 }
-function isEdited$7(node) {
-  return node && (!!node.value || node.classList.contains('edited'));
+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$6(id) {
+function prefixId$5(id) {
   return `bio-properties-panel-${id}`;
 }
 function NumberField(props) {
@@ -5528,11 +6266,11 @@ function NumberField(props) {
   return jsxs("div", {
     class: "bio-properties-panel-numberfield",
     children: [jsx("label", {
-      for: prefixId$5(id),
+      for: prefixId$4(id),
       class: "bio-properties-panel-label",
       children: label
     }), jsx("input", {
-      id: prefixId$5(id),
+      id: prefixId$4(id),
       type: "number",
       name: id,
       spellCheck: "false",
@@ -5636,13 +6374,13 @@ function NumberFieldEntry(props) {
     })]
   });
 }
-function isEdited$5(node) {
+function isEdited$4(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$5(id) {
+function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
 function Select(props) {
@@ -5676,12 +6414,12 @@ function Select(props) {
   return jsxs("div", {
     class: "bio-properties-panel-select",
     children: [jsx("label", {
-      for: prefixId$4(id),
+      for: prefixId$3(id),
       class: "bio-properties-panel-label",
       children: label
     }), jsx("select", {
       ref: ref,
-      id: prefixId$4(id),
+      id: prefixId$3(id),
       name: id,
       class: "bio-properties-panel-input",
       onInput: handleChange,
@@ -5788,13 +6526,13 @@ function SelectEntry(props) {
     })]
   });
 }
-function isEdited$4(node) {
+function isEdited$3(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$4(id) {
+function prefixId$3(id) {
   return `bio-properties-panel-${id}`;
 }
 function resizeToContents(element) {
@@ -5842,12 +6580,12 @@ function TextArea(props) {
   return jsxs("div", {
     class: "bio-properties-panel-textarea",
     children: [jsx("label", {
-      for: prefixId$2(id),
+      for: prefixId$1(id),
       class: "bio-properties-panel-label",
       children: label
     }), jsx("textarea", {
       ref: ref,
-      id: prefixId$2(id),
+      id: prefixId$1(id),
       name: id,
       spellCheck: "false",
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
@@ -5875,6 +6613,7 @@ function TextArea(props) {
  * @param {Function} props.onBlur
  * @param {number} props.rows
  * @param {boolean} props.monospace
+ * @param {Function} [props.validate]
  * @param {boolean} [props.disabled]
  */
 function TextAreaEntry(props) {
@@ -5889,12 +6628,38 @@ function TextAreaEntry(props) {
     rows,
     monospace,
     disabled,
+    validate,
     onFocus,
     onBlur,
     autoResize
   } = props;
-  const value = getValue(element);
-  const error = useError(id);
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (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 jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -5902,7 +6667,7 @@ function TextAreaEntry(props) {
       id: id,
       label: label,
       value: value,
-      onInput: setValue,
+      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       rows: rows,
@@ -5920,13 +6685,13 @@ function TextAreaEntry(props) {
     })]
   });
 }
-function isEdited$2(node) {
+function isEdited$1(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$2(id) {
+function prefixId$1(id) {
   return `bio-properties-panel-${id}`;
 }
 function Textfield(props) {
@@ -5960,12 +6725,12 @@ function Textfield(props) {
   return jsxs("div", {
     class: "bio-properties-panel-textfield",
     children: [jsx("label", {
-      for: prefixId$1(id),
+      for: prefixId(id),
       class: "bio-properties-panel-label",
       children: label
     }), jsx("input", {
       ref: ref,
-      id: prefixId$1(id),
+      id: prefixId(id),
       type: "text",
       name: id,
       spellCheck: "false",
@@ -6057,13 +6822,13 @@ function TextfieldEntry(props) {
     })]
   });
 }
-function isEdited$1(node) {
+function isEdited(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$1(id) {
+function prefixId(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -6191,7 +6956,7 @@ function ActionEntry(props) {
       component: Action,
       editField: editField,
       field: field,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     });
   }
   return entries;
@@ -6259,7 +7024,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -6304,7 +7069,7 @@ function ColumnsEntry(props) {
     component: Columns,
     field,
     editField,
-    isEdited: isEdited$4
+    isEdited: isEdited$3
   }];
   return entries;
 }
@@ -6334,7 +7099,7 @@ function Columns(props) {
     },
     // todo(pinussilvestrus): make options dependant on field type
     // cf. https://github.com/bpmn-io/form-js/issues/575
-    ...[2, 4, 6, 8, 10, 12, 14, 16].map(asOption)];
+    ...asArray(16).filter(i => i >= MIN_COLUMNS).map(asOption)];
   };
   return SelectEntry({
     debounce,
@@ -6356,6 +7121,11 @@ function asOption(number) {
     label: number.toString()
   };
 }
+function asArray(length) {
+  return Array.from({
+    length
+  }).map((_, i) => i + 1);
+}
 
 function DescriptionEntry(props) {
   const {
@@ -6372,7 +7142,7 @@ function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isEdited$1
+      isEdited: isEdited
     });
   }
   return entries;
@@ -6426,21 +7196,21 @@ function DefaultOptionEntry(props) {
     entries.push({
       ...defaultOptions,
       component: DefaultValueCheckbox,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     });
   }
   if (type === 'number') {
     entries.push({
       ...defaultOptions,
       component: DefaultValueNumber,
-      isEdited: isEdited$1
+      isEdited: isEdited
     });
   }
   if (type === 'radio' || type === 'select') {
     entries.push({
       ...defaultOptions,
       component: DefaultValueSingleSelect,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     });
   }
 
@@ -6450,14 +7220,14 @@ function DefaultOptionEntry(props) {
     entries.push({
       ...defaultOptions,
       component: DefaultValueTextfield,
-      isEdited: isEdited$1
+      isEdited: isEdited
     });
   }
   if (type === 'textarea') {
     entries.push({
       ...defaultOptions,
       component: DefaultValueTextarea,
-      isEdited: isEdited$2
+      isEdited: isEdited$1
     });
   }
   return entries;
@@ -6651,7 +7421,7 @@ function DisabledEntry(props) {
       component: Disabled,
       editField: editField,
       field: field,
-      isEdited: isEdited$8
+      isEdited: isEdited$7
     });
   }
   return entries;
@@ -6669,11 +7439,12 @@ function Disabled(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return CheckboxEntry({
+  return ToggleSwitchEntry({
     element: field,
     getValue,
     id,
     label: 'Disabled',
+    inline: true,
     setValue
   });
 }
@@ -6690,7 +7461,7 @@ function IdEntry(props) {
       component: Id,
       editField: editField,
       field: field,
-      isEdited: isEdited$1
+      isEdited: isEdited
     });
   }
   return entries;
@@ -6770,7 +7541,7 @@ function KeyEntry(props) {
       component: Key$1,
       editField: editField,
       field: field,
-      isEdited: isEdited$1
+      isEdited: isEdited
     });
   }
   return entries;
@@ -6833,7 +7604,7 @@ function simpleStringEntryFactory(options) {
     field,
     editField,
     component: SimpleStringComponent,
-    isEdited: isEdited$1
+    isEdited: isEdited
   };
 }
 const SimpleStringComponent = props => {
@@ -6953,7 +7724,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -7008,7 +7779,7 @@ function TextEntry(props) {
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$7
+    isEdited: isEdited$6
   }];
 
   // todo: skipped to make the release without too much risk
@@ -7077,14 +7848,14 @@ function NumberEntries(props) {
   entries.push({
     id: id + '-decimalDigits',
     component: NumberDecimalDigits,
-    isEdited: isEdited$5,
+    isEdited: isEdited$4,
     editField,
     field
   });
   entries.push({
     id: id + '-step',
     component: NumberArrowStep,
-    isEdited: isEdited$1,
+    isEdited: isEdited,
     editField,
     field
   });
@@ -7222,7 +7993,7 @@ function DateTimeEntry(props) {
   const entries = [{
     id: 'subtype',
     component: DateTimeSubtypeSelect,
-    isEdited: isEdited$4,
+    isEdited: isEdited$3,
     editField,
     field
   }];
@@ -7334,7 +8105,7 @@ function DateTimeConstraintsEntry(props) {
     entries.push({
       id: id + '-timeInterval',
       component: TimeIntervalSelect,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       editField,
       field
     });
@@ -7413,7 +8184,7 @@ function DateTimeFormatEntry(props) {
     entries.push({
       id: 'time-format',
       component: TimeFormatSelect,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       editField,
       field
     });
@@ -7673,7 +8444,7 @@ function ValuesSourceSelectEntry(props) {
   return [{
     id: id + '-select',
     component: ValuesSourceSelect,
-    isEdited: isEdited$4,
+    isEdited: isEdited$3,
     editField,
     field
   }];
@@ -7731,7 +8502,7 @@ function InputKeyValuesSourceEntry(props) {
     component: InputValuesKey,
     label: 'Input values key',
     description,
-    isEdited: isEdited$1,
+    isEdited: isEdited,
     editField,
     field
   }];
@@ -7868,7 +8639,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       editField,
       field,
       onChange,
@@ -7877,7 +8648,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       editField,
       field,
       onChange,
@@ -7921,6 +8692,55 @@ function SuffixAdorner(props) {
   });
 }
 
+function ReadonlyEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+  if (INPUTS.includes(type)) {
+    entries.push({
+      id: 'readonly',
+      component: Readonly,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6
+    });
+  }
+  return entries;
+}
+function Readonly(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['readonly'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value || false);
+  };
+  return FeelToggleSwitchEntry({
+    debounce,
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'Read only',
+    setValue,
+    variables
+  });
+}
+
 function ConditionEntry(props) {
   const {
     editField,
@@ -7931,7 +8751,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$7
+    isEdited: isEdited$6
   }];
 }
 function Condition(props) {
@@ -8010,6 +8830,9 @@ function GeneralGroup(field, editField, getService) {
   }), ...DisabledEntry({
     field,
     editField
+  }), ...ReadonlyEntry({
+    field,
+    editField
   })];
   return {
     id: 'general',
@@ -8100,7 +8923,7 @@ function ValidationGroup(field, editField) {
       getValue,
       field,
       editField,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       onChange
     });
   }
@@ -8110,14 +8933,14 @@ function ValidationGroup(field, editField) {
       component: MinLength,
       getValue,
       field,
-      isEdited: isEdited$5,
+      isEdited: isEdited$4,
       onChange
     }, {
       id: 'maxLength',
       component: MaxLength,
       getValue,
       field,
-      isEdited: isEdited$5,
+      isEdited: isEdited$4,
       onChange
     });
   }
@@ -8127,7 +8950,7 @@ function ValidationGroup(field, editField) {
       component: Pattern,
       getValue,
       field,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       onChange
     });
   }
@@ -8137,14 +8960,14 @@ function ValidationGroup(field, editField) {
       component: Min,
       getValue,
       field,
-      isEdited: isEdited$5,
+      isEdited: isEdited$4,
       onChange
     }, {
       id: 'max',
       component: Max,
       getValue,
       field,
-      isEdited: isEdited$5,
+      isEdited: isEdited$4,
       onChange
     });
   }