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

package/dist/index.es.js

@@ -1,10 +1,10 @@
 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, useCallback, useEffect, 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';
@@ -1701,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) {
@@ -1718,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
@@ -1915,7 +1931,7 @@ function FormEditor$1(props) {
               errors: {},
               properties: {
                 ariaLabel,
-                readOnly: true
+                disabled: true
               },
               schema
             };
@@ -4309,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"
 };
@@ -4586,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;
 
@@ -4593,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]);
 }
 
 /**
@@ -4752,9 +4757,7 @@ function Placeholder(props) {
     })
   });
 }
-const DEFAULT_LAYOUT = {
-  open: true
-};
+const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
 
 /**
@@ -4841,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]);
@@ -4918,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
@@ -4962,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 {
@@ -5587,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);
 
@@ -5607,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 {
@@ -5629,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);
@@ -5670,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);
     }
@@ -5733,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, {
@@ -5752,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,
@@ -5769,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
@@ -5806,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,
@@ -5844,7 +5963,7 @@ forwardRef((props, ref) => {
     }
   };
   return jsx("textarea", {
-    id: prefixId$6(id),
+    id: prefixId$5(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -5859,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
@@ -5966,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
@@ -5994,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) {
@@ -6042,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",
@@ -6150,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) {
@@ -6190,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,
@@ -6302,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) {
@@ -6356,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' : ''),
@@ -6389,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) {
@@ -6403,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,
@@ -6416,7 +6667,7 @@ function TextAreaEntry(props) {
       id: id,
       label: label,
       value: value,
-      onInput: setValue,
+      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       rows: rows,
@@ -6434,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) {
@@ -6474,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",
@@ -6571,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}`;
 }
 
@@ -6705,7 +6956,7 @@ function ActionEntry(props) {
       component: Action,
       editField: editField,
       field: field,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     });
   }
   return entries;
@@ -6773,7 +7024,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -6818,7 +7069,7 @@ function ColumnsEntry(props) {
     component: Columns,
     field,
     editField,
-    isEdited: isEdited$4
+    isEdited: isEdited$3
   }];
   return entries;
 }
@@ -6891,7 +7142,7 @@ function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isEdited$1
+      isEdited: isEdited
     });
   }
   return entries;
@@ -6945,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
     });
   }
 
@@ -6969,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;
@@ -7170,7 +7421,7 @@ function DisabledEntry(props) {
       component: Disabled,
       editField: editField,
       field: field,
-      isEdited: isEdited$8
+      isEdited: isEdited$7
     });
   }
   return entries;
@@ -7188,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
   });
 }
@@ -7209,7 +7461,7 @@ function IdEntry(props) {
       component: Id,
       editField: editField,
       field: field,
-      isEdited: isEdited$1
+      isEdited: isEdited
     });
   }
   return entries;
@@ -7289,7 +7541,7 @@ function KeyEntry(props) {
       component: Key$1,
       editField: editField,
       field: field,
-      isEdited: isEdited$1
+      isEdited: isEdited
     });
   }
   return entries;
@@ -7352,7 +7604,7 @@ function simpleStringEntryFactory(options) {
     field,
     editField,
     component: SimpleStringComponent,
-    isEdited: isEdited$1
+    isEdited: isEdited
   };
 }
 const SimpleStringComponent = props => {
@@ -7472,7 +7724,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -7527,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
@@ -7596,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
   });
@@ -7741,7 +7993,7 @@ function DateTimeEntry(props) {
   const entries = [{
     id: 'subtype',
     component: DateTimeSubtypeSelect,
-    isEdited: isEdited$4,
+    isEdited: isEdited$3,
     editField,
     field
   }];
@@ -7853,7 +8105,7 @@ function DateTimeConstraintsEntry(props) {
     entries.push({
       id: id + '-timeInterval',
       component: TimeIntervalSelect,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       editField,
       field
     });
@@ -7932,7 +8184,7 @@ function DateTimeFormatEntry(props) {
     entries.push({
       id: 'time-format',
       component: TimeFormatSelect,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       editField,
       field
     });
@@ -8192,7 +8444,7 @@ function ValuesSourceSelectEntry(props) {
   return [{
     id: id + '-select',
     component: ValuesSourceSelect,
-    isEdited: isEdited$4,
+    isEdited: isEdited$3,
     editField,
     field
   }];
@@ -8250,7 +8502,7 @@ function InputKeyValuesSourceEntry(props) {
     component: InputValuesKey,
     label: 'Input values key',
     description,
-    isEdited: isEdited$1,
+    isEdited: isEdited,
     editField,
     field
   }];
@@ -8387,7 +8639,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       editField,
       field,
       onChange,
@@ -8396,7 +8648,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       editField,
       field,
       onChange,
@@ -8440,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,
@@ -8450,7 +8751,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$7
+    isEdited: isEdited$6
   }];
 }
 function Condition(props) {
@@ -8529,6 +8830,9 @@ function GeneralGroup(field, editField, getService) {
   }), ...DisabledEntry({
     field,
     editField
+  }), ...ReadonlyEntry({
+    field,
+    editField
   })];
   return {
     id: 'general',
@@ -8619,7 +8923,7 @@ function ValidationGroup(field, editField) {
       getValue,
       field,
       editField,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       onChange
     });
   }
@@ -8629,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
     });
   }
@@ -8646,7 +8950,7 @@ function ValidationGroup(field, editField) {
       component: Pattern,
       getValue,
       field,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       onChange
     });
   }
@@ -8656,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
     });
   }