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

package/dist/form-playground.umd.js

@@ -50566,7 +50566,7 @@
     container.classList.add(`${prefix}-container`);
     return container;
   }
-  const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
+  const EXPRESSION_PROPERTIES = ['alt', 'source', 'readonly', 'text'];
   const TEMPLATE_PROPERTIES = ['text'];
   function findErrors(errors, path) {
     return errors[pathStringify(path)];
@@ -50797,14 +50797,16 @@
   };
   function formFieldClasses(type, {
     errors = [],
-    disabled = false
+    disabled = false,
+    readonly = false
   } = {}) {
     if (!type) {
       throw new Error('type required');
     }
     return classNames('fjs-form-field', `fjs-form-field-${type}`, {
       'fjs-has-errors': errors.length > 0,
-      'fjs-disabled': disabled
+      'fjs-disabled': disabled,
+      'fjs-readonly': readonly
     });
   }
   function gridColumnClasses(formField) {
@@ -50818,7 +50820,7 @@
     // always fall back to top-down on smallest screens
     'cds--col-sm-16', 'cds--col-md-16');
   }
-  function prefixId(id, formId) {
+  function prefixId$2(id, formId) {
     if (formId) {
       return `fjs-form-${formId}-${id}`;
     }
@@ -50956,6 +50958,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value = false
     } = props;
     const {
@@ -50978,23 +50981,25 @@
     const {
       formId
     } = F$1(FormContext$1);
-    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: classNames(formFieldClasses(type$a, {
         errors,
-        disabled
+        disabled,
+        readonly
       }), {
         'fjs-checked': value
       }),
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(id, formId),
         label: label,
         required: required,
         children: e$1("input", {
           checked: value,
           class: "fjs-input",
           disabled: disabled,
-          id: prefixId(id, formId),
+          readOnly: readonly,
+          id: prefixId$2(id, formId),
           type: "checkbox",
           onChange: onChange,
           "aria-describedby": errorMessageId
@@ -51351,6 +51356,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value = []
     } = props;
     const {
@@ -51381,18 +51387,19 @@
     const {
       formId
     } = F$1(FormContext$1);
-    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: classNames(formFieldClasses(type$9, {
         errors,
-        disabled
+        disabled,
+        readonly
       })),
       children: [e$1(Label$1, {
         label: label,
         required: required
       }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
         return e$1(Label$1, {
-          id: prefixId(`${id}-${index}`, formId),
+          id: prefixId$2(`${id}-${index}`, formId),
           label: v.label,
           class: classNames({
             'fjs-checked': value.includes(v.value)
@@ -51402,7 +51409,8 @@
             checked: value.includes(v.value),
             class: "fjs-input",
             disabled: disabled,
-            id: prefixId(`${id}-${index}`, formId),
+            readOnly: readonly,
+            id: prefixId$2(`${id}-${index}`, formId),
             type: "checkbox",
             onClick: () => toggleCheckbox(v.value),
             "aria-describedby": errorMessageId
@@ -51509,6 +51517,33 @@
     });
   }
 
+  /**
+   * Retrieve readonly value of a form field, given it can be an
+   * expression optionally or configured globally.
+   *
+   * @typedef { import('../../types').FormProperties } FormProperties
+   *
+   * @param {any} formField
+   * @param {FormProperties} properties
+   *
+   * @returns {boolean}
+   */
+  function useReadonly(formField, properties = {}) {
+    const expressionLanguage = useService$2('expressionLanguage');
+    const conditionChecker = useService$2('conditionChecker', false);
+    const filteredData = useFilteredFormData();
+    const {
+      readonly
+    } = formField;
+    if (properties.readOnly) {
+      return true;
+    }
+    if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
+      return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
+    }
+    return readonly || false;
+  }
+
   /**
    * Template a string reactively based on form data. If the string is not a template, it is returned as is.
    * Memoised to minimize re-renders
@@ -51554,7 +51589,10 @@
     }
     const value = get$1(data, field._path);
     const fieldErrors = findErrors(errors, field._path);
-    const disabled = properties.readOnly || field.disabled || false;
+    const readonly = useReadonly(field, properties);
+
+    // add precedence: global readonly > form field disabled
+    const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
     const hidden = useCondition(field.conditional && field.conditional.hide || null);
     if (hidden) {
       return e$1(Empty, {});
@@ -51569,7 +51607,8 @@
           ...props,
           disabled: disabled,
           errors: fieldErrors,
-          onChange: disabled ? noop$1$1 : onChange,
+          onChange: disabled || readonly ? noop$1$1 : onChange,
+          readonly: readonly,
           value: value
         })
       })
@@ -51666,12 +51705,14 @@
       inputRef,
       children,
       disabled,
+      readonly,
       hasErrors
     } = props;
     const onAdornmentClick = () => inputRef && inputRef.current && inputRef.current.focus();
     return e$1("div", {
       class: classNames('fjs-input-group', {
-        'fjs-disabled': disabled
+        'fjs-disabled': disabled,
+        'fjs-readonly': readonly
       }, {
         'hasErrors': hasErrors
       }),
@@ -51703,6 +51744,7 @@
       disabled,
       disallowPassedDates,
       date,
+      readonly,
       setDate
     } = props;
     const dateInputRef = s$1();
@@ -51782,9 +51824,9 @@
       }
     }, [flatpickrInstance, isInputDirty]);
     const onInputFocus = A$1(e => {
-      if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget)) return;
+      if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget) || readonly) return;
       flatpickrInstance.open();
-    }, [flatpickrInstance]);
+    }, [flatpickrInstance, readonly]);
 
     // simulate an enter press on blur to make sure the date value is submitted in all scenarios
     const onInputBlur = A$1(e => {
@@ -51792,7 +51834,7 @@
       dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
       setIsInputDirty(false);
     }, [isInputDirty]);
-    const fullId = `${prefixId(id, formId)}--date`;
+    const fullId = `${prefixId$2(id, formId)}--date`;
     return e$1("div", {
       class: "fjs-datetime-subsection",
       children: [e$1(Label$1, {
@@ -51803,6 +51845,7 @@
       }), e$1(InputAdorner, {
         pre: e$1(CalendarIcon, {}),
         disabled: disabled,
+        readonly: readonly,
         rootRef: focusScopeRef,
         inputRef: dateInputRef,
         children: e$1("div", {
@@ -51816,11 +51859,12 @@
             id: fullId,
             class: "fjs-input",
             disabled: disabled,
+            readOnly: readonly,
             placeholder: "mm/dd/yyyy",
             autoComplete: "off",
             onFocus: onInputFocus,
             onKeyDown: onInputKeyDown,
-            onMouseDown: () => !flatpickrInstance.isOpen && flatpickrInstance.open(),
+            onMouseDown: () => !flatpickrInstance.isOpen && !readonly && flatpickrInstance.open(),
             onBlur: onInputBlur,
             onInput: () => setIsInputDirty(true),
             "data-input": true,
@@ -51964,6 +52008,7 @@
       formId,
       required,
       disabled,
+      readonly,
       use24h = false,
       timeInterval,
       time,
@@ -52057,7 +52102,7 @@
       setDropdownIsOpen(false);
       propagateRawToMinute(value);
     };
-    const fullId = `${prefixId(id, formId)}--time`;
+    const fullId = `${prefixId$2(id, formId)}--time`;
     return e$1("div", {
       class: "fjs-datetime-subsection",
       children: [e$1(Label$1, {
@@ -52069,6 +52114,7 @@
         pre: e$1(ClockIcon, {}),
         inputRef: timeInputRef,
         disabled: disabled,
+        readonly: readonly,
         children: e$1("div", {
           class: "fjs-timepicker fjs-timepicker-anchor",
           children: [e$1("input", {
@@ -52078,10 +52124,11 @@
             class: "fjs-input",
             value: rawValue,
             disabled: disabled,
+            readOnly: readonly,
             placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
             autoComplete: "off",
-            onFocus: () => useDropdown && setDropdownIsOpen(true),
-            onClick: () => useDropdown && setDropdownIsOpen(true)
+            onFocus: () => !readonly && useDropdown && setDropdownIsOpen(true),
+            onClick: () => !readonly && useDropdown && setDropdownIsOpen(true)
 
             // @ts-ignore
             ,
@@ -52112,6 +52159,7 @@
       errors = [],
       field,
       onChange,
+      readonly,
       value = ''
     } = props;
     const {
@@ -52228,7 +52276,7 @@
         time
       });
     }, []);
-    const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const datePickerProps = {
       id,
       label: dateLabel,
@@ -52238,6 +52286,7 @@
       disabled,
       disallowPassedDates,
       date: dateTime.date,
+      readonly,
       setDate,
       'aria-describedby': errorMessageId
     };
@@ -52248,6 +52297,7 @@
       formId,
       required,
       disabled,
+      readonly,
       use24h,
       timeInterval,
       time: dateTime.time,
@@ -52257,7 +52307,8 @@
     return e$1("div", {
       class: formFieldClasses(type$8, {
         errors: allErrors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1("div", {
         class: classNames('fjs-vertical-group'),
@@ -52609,7 +52660,7 @@
           alt: altText,
           src: safeSource,
           class: "fjs-image",
-          id: prefixId(id, formId)
+          id: prefixId$2(id, formId)
         }), !safeSource && e$1("div", {
           class: "fjs-image-placeholder",
           children: e$1(ImagePlaceholder, {
@@ -52693,6 +52744,7 @@
       errors = [],
       field,
       value,
+      readonly,
       onChange
     } = props;
     const {
@@ -52765,6 +52817,9 @@
       });
     }, [field, onChange, serializeToString]);
     const increment = () => {
+      if (readonly) {
+        return;
+      }
       const base = isValidNumber$1(value) ? Big$1(value) : Big$1(0);
       const stepFlooredValue = base.minus(base.mod(arrowIncrementValue));
 
@@ -52772,6 +52827,9 @@
       setValue(stepFlooredValue.plus(arrowIncrementValue).toFixed());
     };
     const decrement = () => {
+      if (readonly) {
+        return;
+      }
       const base = isValidNumber$1(value) ? Big$1(value) : Big$1(0);
       const offset = base.mod(arrowIncrementValue);
       if (offset.cmp(0) === 0) {
@@ -52814,23 +52872,26 @@
     const {
       formId
     } = F$1(FormContext$1);
-    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$6, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(id, formId),
         label: label,
         required: required
       }), e$1(InputAdorner, {
         disabled: disabled,
+        readonly: readonly,
         pre: prefixAdorner,
         post: suffixAdorner,
         children: e$1("div", {
           class: classNames('fjs-vertical-group', {
-            'fjs-disabled': disabled
+            'fjs-disabled': disabled,
+            'fjs-readonly': readonly
           }, {
             'hasErrors': errors.length
           }),
@@ -52838,7 +52899,8 @@
             ref: inputRef,
             class: "fjs-input",
             disabled: disabled,
-            id: prefixId(id, formId),
+            readOnly: readonly,
+            id: prefixId$2(id, formId),
             onKeyDown: onKeyDown,
             onKeyPress: onKeyPress
 
@@ -52853,7 +52915,8 @@
             "aria-describedby": errorMessageId
           }), e$1("div", {
             class: classNames('fjs-number-arrow-container', {
-              'fjs-disabled': disabled
+              'fjs-disabled': disabled,
+              'fjs-readonly': readonly
             }),
             children: [e$1("button", {
               class: "fjs-number-arrow-up",
@@ -52911,6 +52974,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value
     } = props;
     const {
@@ -52935,18 +52999,19 @@
     const {
       formId
     } = F$1(FormContext$1);
-    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$5, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1(Label$1, {
         label: label,
         required: required
       }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
         return e$1(Label$1, {
-          id: prefixId(`${id}-${index}`, formId),
+          id: prefixId$2(`${id}-${index}`, formId),
           label: option.label,
           class: classNames({
             'fjs-checked': option.value === value
@@ -52956,7 +53021,8 @@
             checked: option.value === value,
             class: "fjs-input",
             disabled: disabled,
-            id: prefixId(`${id}-${index}`, formId),
+            readOnly: readonly,
+            id: prefixId$2(`${id}-${index}`, formId),
             type: "radio",
             onClick: () => onChange(option.value),
             "aria-describedby": errorMessageId
@@ -53028,6 +53094,7 @@
       disabled,
       errors,
       field,
+      readonly,
       value
     } = props;
     const {
@@ -53100,11 +53167,11 @@
     }, [isDropdownExpanded, isEscapeClosed]);
     const displayState = d(() => {
       const ds = {};
-      ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+      ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
       ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-      ds.displayDropdown = !disabled && isDropdownExpanded && !isEscapeClosed;
+      ds.displayDropdown = !disabled && !readonly && isDropdownExpanded && !isEscapeClosed;
       return ds;
-    }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, value]);
+    }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, readonly, value]);
     const onAngelMouseDown = A$1(e => {
       setIsEscapeClose(false);
       setIsDropdownExpanded(!isDropdownExpanded);
@@ -53114,17 +53181,19 @@
     }, [isDropdownExpanded]);
     return e$1(d$1, {
       children: [e$1("div", {
-        id: prefixId(`${id}`, formId),
+        id: prefixId$2(`${id}`, formId),
         class: classNames('fjs-input-group', {
-          'disabled': disabled
+          'disabled': disabled,
+          'readonly': readonly
         }, {
           'hasErrors': errors.length
         }),
         children: [e$1("input", {
           disabled: disabled,
+          readOnly: readonly,
           class: "fjs-input",
           ref: searchbarRef,
-          id: prefixId(`${id}-search`, formId),
+          id: prefixId$2(`${id}-search`, formId),
           onChange: onChange,
           type: "text",
           value: filter,
@@ -53177,6 +53246,7 @@
       disabled,
       errors,
       field,
+      readonly,
       value
     } = props;
     const {
@@ -53202,9 +53272,9 @@
     }, [field, props]);
     const displayState = d(() => {
       const ds = {};
-      ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+      ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
       ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-      ds.displayDropdown = !disabled && isDropdownExpanded;
+      ds.displayDropdown = !disabled && !readonly && isDropdownExpanded;
       return ds;
     }, [disabled, isDropdownExpanded, loadState, value]);
     const onMouseDown = A$1(e => {
@@ -53221,9 +53291,10 @@
     return e$1(d$1, {
       children: [e$1("div", {
         ref: selectRef,
-        id: prefixId(`${id}`, formId),
+        id: prefixId$2(`${id}`, formId),
         class: classNames('fjs-input-group', {
-          'disabled': disabled
+          disabled,
+          readonly
         }, {
           'hasErrors': errors.length
         }),
@@ -53234,14 +53305,14 @@
           class: classNames('fjs-select-display', {
             'fjs-select-placeholder': !value
           }),
-          id: prefixId(`${id}-display`, formId),
+          id: prefixId$2(`${id}-display`, formId),
           children: valueLabel || 'Select'
         }), !disabled && e$1("input", {
-          id: prefixId(`${id}-search`, formId),
+          id: prefixId$2(`${id}-search`, formId),
           class: "fjs-select-hidden-input",
           value: valueLabel,
-          onFocus: () => setIsDropdownExpanded(true),
-          onBlur: () => setIsDropdownExpanded(false),
+          onFocus: () => !readonly && setIsDropdownExpanded(true),
+          onBlur: () => !readonly && setIsDropdownExpanded(false),
           "aria-describedby": props['aria-describedby']
         }), displayState.displayCross && e$1("span", {
           class: "fjs-select-cross",
@@ -53276,6 +53347,7 @@
       errors = [],
       field,
       onChange,
+      readonly,
       value
     } = props;
     const {
@@ -53291,7 +53363,7 @@
     const {
       formId
     } = F$1(FormContext$1);
-    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const selectProps = d(() => ({
       id,
       disabled,
@@ -53299,12 +53371,14 @@
       field,
       value,
       onChange,
+      readonly,
       'aria-describedby': errorMessageId
-    }), [disabled, errors, field, id, value, onChange, errorMessageId]);
+    }), [disabled, errors, field, id, value, onChange, readonly, errorMessageId]);
     return e$1("div", {
       class: formFieldClasses(type$4, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       onKeyDown: event => {
         if (event.key === 'Enter') {
@@ -53313,7 +53387,7 @@
         }
       },
       children: [e$1(Label$1, {
-        id: prefixId(`${id}-search`, formId),
+        id: prefixId$2(`${id}-search`, formId),
         label: label,
         required: required
       }), searchable ? e$1(SearchableSelect, {
@@ -53357,6 +53431,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value: values = []
     } = props;
     const {
@@ -53371,7 +53446,7 @@
     const {
       formId
     } = F$1(FormContext$1);
-    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const [filter, setFilter] = l$2('');
     const [filteredOptions, setFilteredOptions] = l$2([]);
     const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
@@ -53447,6 +53522,10 @@
           break;
       }
     };
+    const onBlur = () => {
+      setIsDropdownExpanded(false);
+      setFilter('');
+    };
     const onTagRemoveClick = (event, value) => {
       const {
         target
@@ -53463,7 +53542,8 @@
     return e$1("div", {
       class: formFieldClasses(type$3, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       onKeyDown: event => {
         if (event.key === 'Enter') {
@@ -53474,23 +53554,25 @@
       children: [e$1(Label$1, {
         label: label,
         required: required,
-        id: prefixId(`${id}-search`, formId)
+        id: prefixId$2(`${id}-search`, formId)
       }), e$1("div", {
         class: classNames('fjs-taglist', {
-          'fjs-disabled': disabled
+          'fjs-disabled': disabled,
+          'fjs-readonly': readonly
         }),
         children: [loadState === LOAD_STATES.LOADED && e$1("div", {
           class: "fjs-taglist-tags",
           children: values.map(v => {
             return e$1("div", {
               class: classNames('fjs-taglist-tag', {
-                'fjs-disabled': disabled
+                'fjs-disabled': disabled,
+                'fjs-readonly': readonly
               }),
               onMouseDown: e => e.preventDefault(),
               children: [e$1("span", {
                 class: "fjs-taglist-tag-label",
                 children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-              }), !disabled && e$1("button", {
+              }), !disabled && !readonly && e$1("button", {
                 type: "button",
                 title: "Remove tag",
                 class: "fjs-taglist-tag-remove",
@@ -53501,20 +53583,20 @@
           })
         }), e$1("input", {
           disabled: disabled,
+          readOnly: readonly,
           class: "fjs-taglist-input",
           ref: searchbarRef,
-          id: prefixId(`${id}-search`, formId),
+          id: prefixId$2(`${id}-search`, formId),
           onChange: onFilterChange,
           type: "text",
           value: filter,
-          placeholder: disabled ? undefined : 'Search',
+          placeholder: disabled || readonly ? undefined : 'Search',
           autoComplete: "off",
           onKeyDown: onInputKeyDown,
           onMouseDown: () => setIsEscapeClose(false),
-          onFocus: () => setIsDropdownExpanded(true),
+          onFocus: () => !readonly && setIsDropdownExpanded(true),
           onBlur: () => {
-            setIsDropdownExpanded(false);
-            setFilter('');
+            !readonly && onBlur();
           },
           "aria-describedby": errorMessageId
         })]
@@ -53647,6 +53729,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value = ''
     } = props;
     const {
@@ -53674,24 +53757,27 @@
     const {
       formId
     } = F$1(FormContext$1);
-    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$1, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(id, formId),
         label: label,
         required: required
       }), e$1(InputAdorner, {
         disabled: disabled,
+        readonly: readonly,
         pre: prefixAdorner,
         post: suffixAdorner,
         children: e$1("input", {
           class: "fjs-input",
           disabled: disabled,
-          id: prefixId(id, formId),
+          readOnly: readonly,
+          id: prefixId$2(id, formId),
           onInput: onChange,
           type: "text",
           value: value,
@@ -53734,6 +53820,7 @@
       disabled,
       errors = [],
       field,
+      readonly,
       value = ''
     } = props;
     const {
@@ -53773,20 +53860,22 @@
     const {
       formId
     } = F$1(FormContext$1);
-    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type, {
         errors,
-        disabled
+        disabled,
+        readonly
       }),
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId$2(id, formId),
         label: label,
         required: required
       }), e$1("textarea", {
         class: "fjs-textarea",
         disabled: disabled,
-        id: prefixId(id, formId),
+        readonly: readonly,
+        id: prefixId$2(id, formId),
         onInput: onInput,
         value: value,
         ref: textareaRef,
@@ -54461,7 +54550,7 @@
       const {
         properties
       } = this._getState();
-      if (properties.readOnly) {
+      if (properties.readOnly || properties.disabled) {
         throw new Error('form is read-only');
       }
       const data = this._getSubmitData();
@@ -54689,7 +54778,7 @@
       return conditionChecker.applyConditions(toFilter, data);
     }
   }
-  const schemaVersion = 8;
+  const schemaVersion = 9;
 
   /**
    * Flatten array, one level deep.
@@ -56893,6 +56982,15 @@
     '&.cm-editor.cm-focused': {
       outline: 'none'
     },
+    '& .cm-completionInfo': {
+      whiteSpace: 'pre-wrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    // Don't wrap whitespace for custom HTML
+    '& .cm-completionInfo > *': {
+      whiteSpace: 'normal'
+    },
     '& .cm-completionInfo ul': {
       margin: 0,
       paddingLeft: '15px'
@@ -59738,9 +59836,17 @@
       eventBus.on('selection.changed', scrollIntoView);
       return () => eventBus.off('selection.changed', scrollIntoView);
     }, [id]);
+    h(() => {
+      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) {
@@ -59755,11 +59861,19 @@
       const index = getFormFieldIndex(parentField, field);
       modeling.removeFormField(field, parentField, index);
     };
+    const onKeyPress = event => {
+      if (event.key === 'Enter') {
+        event.stopPropagation();
+        selection.toggle(field);
+      }
+    };
     return e$1("div", {
       class: classes.join(' '),
       "data-id": id,
       "data-field-type": type,
+      tabIndex: type === 'default' ? -1 : 0,
       onClick: onClick,
+      onKeyPress: onKeyPress,
       ref: ref,
       children: [e$1(DebugColumns, {
         field: field
@@ -59952,7 +60066,7 @@
                 errors: {},
                 properties: {
                   ariaLabel,
-                  readOnly: true
+                  disabled: true
                 },
                 schema
               };
@@ -62316,44 +62430,18 @@
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  var FeelRequiredIcon = function FeelRequiredIcon(props) {
+  var FeelIcon$1 = function FeelIcon(props) {
     return e$1("svg", {
       ...props,
-      children: [e$1("path", {
-        d: "M5.8 7.06V5.95h4.307v1.11H5.8Zm0 3.071v-1.11h4.307v1.11H5.8Z",
-        fill: "currentColor"
-      }), e$1("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"
-      }), e$1("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 e$1("svg", {
-      ...props,
-      children: [e$1("path", {
-        d: "M5.845 7.04V5.93h4.307v1.11H5.845Zm0 3.07V9h4.307v1.11H5.845Z",
-        fill: "currentColor"
-      }), e$1("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: e$1("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"
   };
@@ -62593,6 +62681,18 @@
    * @param {setSticky} setSticky
    */
   function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
+    const [scrollContainer, setScrollContainer] = l$2(query(scrollContainerSelector));
+    const updateScrollContainer = A$1(() => {
+      const newScrollContainer = query(scrollContainerSelector);
+      if (newScrollContainer !== scrollContainer) {
+        setScrollContainer(newScrollContainer);
+      }
+    }, [scrollContainerSelector, scrollContainer]);
+    y(() => {
+      updateScrollContainer();
+    }, [updateScrollContainer]);
+    useEvent('propertiesPanel.attach', updateScrollContainer);
+    useEvent('propertiesPanel.detach', updateScrollContainer);
     y(() => {
       const Observer = IntersectionObserver;
 
@@ -62600,33 +62700,36 @@
       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]);
   }
 
   /**
@@ -62759,9 +62862,7 @@
       })
     });
   }
-  const DEFAULT_LAYOUT = {
-    open: true
-  };
+  const DEFAULT_LAYOUT = {};
   const DEFAULT_DESCRIPTION = {};
 
   /**
@@ -62848,7 +62949,7 @@
     const [layout, setLayout] = l$2(createLayout(layoutConfig));
 
     // react to external changes in the layout config
-    useUpdateEffect(() => {
+    useUpdateLayoutEffect(() => {
       const newLayout = createLayout(layoutConfig);
       setLayout(newLayout);
     }, [layoutConfig]);
@@ -62925,7 +63026,7 @@
             children: e$1(EventContext.Provider, {
               value: eventContext,
               children: e$1("div", {
-                class: classNames('bio-properties-panel', layout.open ? 'open' : ''),
+                class: "bio-properties-panel",
                 children: [e$1(Header, {
                   element: element,
                   headerProvider: headerProvider
@@ -62969,14 +63070,14 @@
   // 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 = s$1(false);
-    y(() => {
+    h(() => {
       if (isMounted.current) {
         return effect();
       } else {
@@ -63594,14 +63695,13 @@
    */
   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);
 
@@ -63614,10 +63714,124 @@
       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' ? e$1(FeelRequiredIcon, {}) : e$1(FeelOptionalIcon, {})
+      title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
+      children: e$1(FeelIcon$1, {})
     });
   }
+  function ToggleSwitch(props) {
+    const {
+      id,
+      label,
+      onInput,
+      value,
+      switcherLabel,
+      inline,
+      onFocus,
+      onBlur,
+      inputRef
+    } = props;
+    const [localValue, setLocalValue] = l$2(value);
+    const handleInputCallback = async () => {
+      onInput(!value);
+    };
+    const handleInput = e => {
+      handleInputCallback();
+      setLocalValue(e.target.value);
+    };
+    y(() => {
+      if (value === localValue) {
+        return;
+      }
+      setLocalValue(value);
+    }, [value]);
+    return e$1("div", {
+      class: classNames('bio-properties-panel-toggle-switch', {
+        inline
+      }),
+      children: [e$1("label", {
+        class: "bio-properties-panel-label",
+        for: prefixId$6(id),
+        children: label
+      }), e$1("div", {
+        class: "bio-properties-panel-field-wrapper",
+        children: [e$1("label", {
+          class: "bio-properties-panel-toggle-switch__switcher",
+          children: [e$1("input", {
+            ref: inputRef,
+            id: prefixId$6(id),
+            class: "bio-properties-panel-input",
+            type: "checkbox",
+            onFocus: onFocus,
+            onBlur: onBlur,
+            name: id,
+            onInput: handleInput,
+            checked: !!localValue
+          }), e$1("span", {
+            class: "bio-properties-panel-toggle-switch__slider"
+          })]
+        }), switcherLabel && e$1("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 e$1("div", {
+      class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
+      "data-entry-id": id,
+      children: [e$1(ToggleSwitch, {
+        id: id,
+        label: label,
+        value: value,
+        onInput: setValue,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        switcherLabel: switcherLabel,
+        inline: inline
+      }), e$1(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 {
@@ -63636,8 +63850,8 @@
     const [localValue, _setLocalValue] = l$2(value);
     const editorRef = useShowEntryEvent(id);
     const containerRef = s$1();
-    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] = l$2(undefined);
     const setFocus = (offset = 0) => {
       const hasFocus = containerRef.current.contains(document.activeElement);
@@ -63677,7 +63891,7 @@
         return;
       }
       setLocalValue(newValue);
-      if (!feelActive && newValue.startsWith('=')) {
+      if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
         // focus is behind `=` sign that will be removed
         setFocus(-1);
       }
@@ -63740,9 +63954,11 @@
       };
     }, [containerRef, feelActive, handleFeelToggle, setFocus]);
     return e$1("div", {
-      class: "bio-properties-panel-feel-entry",
+      class: classNames('bio-properties-panel-feel-entry', {
+        'feel-active': feelActive
+      }),
       children: [e$1("label", {
-        for: prefixId$6(id),
+        for: prefixId$5(id),
         class: "bio-properties-panel-label",
         onClick: () => setFocus(),
         children: [label, e$1(FeelIcon, {
@@ -63759,7 +63975,7 @@
           disabled: feel !== 'optional' || disabled,
           onClick: handleFeelToggle
         }), feelActive ? e$1(CodeEditor, {
-          id: prefixId$6(id),
+          id: prefixId$5(id),
           name: id,
           onInput: handleLocalInput,
           disabled: disabled,
@@ -63776,7 +63992,8 @@
           ...props,
           onInput: handleLocalInput,
           contentAttributes: {
-            'id': prefixId$6(id)
+            'id': prefixId$5(id),
+            'aria-label': label
           },
           value: localValue,
           ref: editorRef
@@ -63813,7 +64030,7 @@
       }
     };
     return e$1("input", {
-      id: prefixId$6(id),
+      id: prefixId$5(id),
       type: "text",
       ref: inputRef,
       name: id,
@@ -63851,7 +64068,7 @@
       }
     };
     return e$1("textarea", {
-      id: prefixId$6(id),
+      id: prefixId$5(id),
       type: "text",
       ref: inputRef,
       name: id,
@@ -63866,6 +64083,78 @@
       "data-gramm": "false"
     });
   });
+  const OptionalFeelToggleSwitch = x((props, ref) => {
+    const {
+      id,
+      onInput,
+      value,
+      onFocus,
+      onBlur,
+      switcherLabel
+    } = props;
+    const inputRef = s$1();
+
+    // 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 e$1(ToggleSwitch, {
+      id: id,
+      value: value,
+      inputRef: inputRef,
+      onInput: onInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      switcherLabel: switcherLabel
+    });
+  });
+  x((props, ref) => {
+    const {
+      id,
+      disabled,
+      onInput,
+      value,
+      onFocus,
+      onBlur
+    } = props;
+    const inputRef = s$1();
+    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 e$1("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
@@ -63973,6 +64262,33 @@
     });
   }
 
+  /**
+   * @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 e$1(FeelEntry, {
+      class: "bio-properties-panel-feel-toggle-switch",
+      OptionalComponent: OptionalFeelToggleSwitch,
+      ...props
+    });
+  }
+
   /**
    * @param {Object} props
    * @param {Object} props.element
@@ -64001,13 +64317,19 @@
       ...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) {
@@ -64049,11 +64371,11 @@
     return e$1("div", {
       class: "bio-properties-panel-numberfield",
       children: [e$1("label", {
-        for: prefixId$5(id),
+        for: prefixId$4(id),
         class: "bio-properties-panel-label",
         children: label
       }), e$1("input", {
-        id: prefixId$5(id),
+        id: prefixId$4(id),
         type: "number",
         name: id,
         spellCheck: "false",
@@ -64157,13 +64479,13 @@
       })]
     });
   }
-  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) {
@@ -64197,12 +64519,12 @@
     return e$1("div", {
       class: "bio-properties-panel-select",
       children: [e$1("label", {
-        for: prefixId$4(id),
+        for: prefixId$3(id),
         class: "bio-properties-panel-label",
         children: label
       }), e$1("select", {
         ref: ref,
-        id: prefixId$4(id),
+        id: prefixId$3(id),
         name: id,
         class: "bio-properties-panel-input",
         onInput: handleChange,
@@ -64309,13 +64631,13 @@
       })]
     });
   }
-  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) {
@@ -64363,12 +64685,12 @@
     return e$1("div", {
       class: "bio-properties-panel-textarea",
       children: [e$1("label", {
-        for: prefixId$2(id),
+        for: prefixId$1(id),
         class: "bio-properties-panel-label",
         children: label
       }), e$1("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' : ''),
@@ -64396,6 +64718,7 @@
    * @param {Function} props.onBlur
    * @param {number} props.rows
    * @param {boolean} props.monospace
+   * @param {Function} [props.validate]
    * @param {boolean} [props.disabled]
    */
   function TextAreaEntry(props) {
@@ -64410,12 +64733,38 @@
       rows,
       monospace,
       disabled,
+      validate,
       onFocus,
       onBlur,
       autoResize
     } = props;
-    const value = getValue(element);
-    const error = useError(id);
+    const [cachedInvalidValue, setCachedInvalidValue] = l$2(null);
+    const globalError = useError(id);
+    const [localError, setLocalError] = l$2(null);
+    let value = getValue(element);
+    const previousValue = usePrevious(value);
+    y(() => {
+      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 e$1("div", {
       class: classNames('bio-properties-panel-entry', error ? 'has-error' : ''),
       "data-entry-id": id,
@@ -64423,7 +64772,7 @@
         id: id,
         label: label,
         value: value,
-        onInput: setValue,
+        onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
         rows: rows,
@@ -64441,13 +64790,13 @@
       })]
     });
   }
-  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) {
@@ -64481,12 +64830,12 @@
     return e$1("div", {
       class: "bio-properties-panel-textfield",
       children: [e$1("label", {
-        for: prefixId$1(id),
+        for: prefixId(id),
         class: "bio-properties-panel-label",
         children: label
       }), e$1("input", {
         ref: ref,
-        id: prefixId$1(id),
+        id: prefixId(id),
         type: "text",
         name: id,
         spellCheck: "false",
@@ -64578,13 +64927,13 @@
       })]
     });
   }
-  function isEdited$1(node) {
+  function isEdited(node) {
     return node && !!node.value;
   }
 
   // helpers /////////////////
 
-  function prefixId$1(id) {
+  function prefixId(id) {
     return `bio-properties-panel-${id}`;
   }
 
@@ -64709,7 +65058,7 @@
         component: Action,
         editField: editField,
         field: field,
-        isEdited: isEdited$4
+        isEdited: isEdited$3
       });
     }
     return entries;
@@ -64775,7 +65124,7 @@
         component: AltText,
         editField: editField,
         field: field,
-        isEdited: isEdited$7
+        isEdited: isEdited$6
       });
     }
     return entries;
@@ -64819,7 +65168,7 @@
       component: Columns,
       field,
       editField,
-      isEdited: isEdited$4
+      isEdited: isEdited$3
     }];
     return entries;
   }
@@ -64891,7 +65240,7 @@
         component: Description,
         editField: editField,
         field: field,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     return entries;
@@ -64944,21 +65293,21 @@
       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
       });
     }
 
@@ -64968,14 +65317,14 @@
       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;
@@ -65168,7 +65517,7 @@
         component: Disabled,
         editField: editField,
         field: field,
-        isEdited: isEdited$8
+        isEdited: isEdited$7
       });
     }
     return entries;
@@ -65186,11 +65535,12 @@
     const setValue = value => {
       return editField(field, path, value);
     };
-    return CheckboxEntry({
+    return ToggleSwitchEntry({
       element: field,
       getValue,
       id,
       label: 'Disabled',
+      inline: true,
       setValue
     });
   }
@@ -65206,7 +65556,7 @@
         component: Id,
         editField: editField,
         field: field,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     return entries;
@@ -65285,7 +65635,7 @@
         component: Key$1,
         editField: editField,
         field: field,
-        isEdited: isEdited$1
+        isEdited: isEdited
       });
     }
     return entries;
@@ -65347,7 +65697,7 @@
       field,
       editField,
       component: SimpleStringComponent,
-      isEdited: isEdited$1
+      isEdited: isEdited
     };
   }
   const SimpleStringComponent = props => {
@@ -65464,7 +65814,7 @@
         component: Source,
         editField: editField,
         field: field,
-        isEdited: isEdited$7
+        isEdited: isEdited$6
       });
     }
     return entries;
@@ -65518,7 +65868,7 @@
       component: Text,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$6
     }];
 
     // todo: skipped to make the release without too much risk
@@ -65586,14 +65936,14 @@
     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
     });
@@ -65729,7 +66079,7 @@
     const entries = [{
       id: 'subtype',
       component: DateTimeSubtypeSelect,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       editField,
       field
     }];
@@ -65840,7 +66190,7 @@
       entries.push({
         id: id + '-timeInterval',
         component: TimeIntervalSelect,
-        isEdited: isEdited$4,
+        isEdited: isEdited$3,
         editField,
         field
       });
@@ -65918,7 +66268,7 @@
       entries.push({
         id: 'time-format',
         component: TimeFormatSelect,
-        isEdited: isEdited$4,
+        isEdited: isEdited$3,
         editField,
         field
       });
@@ -66174,7 +66524,7 @@
     return [{
       id: id + '-select',
       component: ValuesSourceSelect,
-      isEdited: isEdited$4,
+      isEdited: isEdited$3,
       editField,
       field
     }];
@@ -66231,7 +66581,7 @@
       component: InputValuesKey,
       label: 'Input values key',
       description,
-      isEdited: isEdited$1,
+      isEdited: isEdited,
       editField,
       field
     }];
@@ -66366,7 +66716,7 @@
       entries.push({
         id: 'prefix-adorner',
         component: PrefixAdorner,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         editField,
         field,
         onChange,
@@ -66375,7 +66725,7 @@
       entries.push({
         id: 'suffix-adorner',
         component: SuffixAdorner,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         editField,
         field,
         onChange,
@@ -66418,6 +66768,54 @@
       setValue: onChange('suffixAdorner')
     });
   }
+  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,
@@ -66428,7 +66826,7 @@
       component: Condition,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$6
     }];
   }
   function Condition(props) {
@@ -66506,6 +66904,9 @@
     }), ...DisabledEntry({
       field,
       editField
+    }), ...ReadonlyEntry({
+      field,
+      editField
     })];
     return {
       id: 'general',
@@ -66593,7 +66994,7 @@
         getValue,
         field,
         editField,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         onChange
       });
     }
@@ -66603,14 +67004,14 @@
         component: MinLength,
         getValue,
         field,
-        isEdited: isEdited$5,
+        isEdited: isEdited$4,
         onChange
       }, {
         id: 'maxLength',
         component: MaxLength,
         getValue,
         field,
-        isEdited: isEdited$5,
+        isEdited: isEdited$4,
         onChange
       });
     }
@@ -66620,7 +67021,7 @@
         component: Pattern,
         getValue,
         field,
-        isEdited: isEdited$1,
+        isEdited: isEdited,
         onChange
       });
     }
@@ -66630,14 +67031,14 @@
         component: Min,
         getValue,
         field,
-        isEdited: isEdited$5,
+        isEdited: isEdited$4,
         onChange
       }, {
         id: 'max',
         component: Max,
         getValue,
         field,
-        isEdited: isEdited$5,
+        isEdited: isEdited$4,
         onChange
       });
     }
@@ -69011,7 +69412,9 @@
       emit,
       exporter: exporterConfig = {},
       viewerProperties = {},
-      editorProperties = {}
+      editorProperties = {},
+      viewerAdditionalModules = [],
+      editorAdditionalModules = []
     } = props;
     const {
       display: displayActions = true
@@ -69072,6 +69475,7 @@
         }
       });
       const form = formRef.current = new Form({
+        additionalModules: viewerAdditionalModules,
         properties: {
           ...viewerProperties,
           'ariaLabel': 'Form Preview'
@@ -69091,7 +69495,8 @@
         properties: {
           ...editorProperties,
           'ariaLabel': 'Form Definition'
-        }
+        },
+        additionalModules: editorAdditionalModules
       });
       paletteRef.current = formEditor.get('palette');
       propertiesPanelRef.current = formEditor.get('propertiesPanel');