@bpmn-io/form-js-editor 0.8.0-alpha.0 → 0.8.0-alpha.1

package/dist/index.cjs

@@ -7,9 +7,9 @@ var Ids = require('ids');
 var minDash = require('min-dash');
 var preact = require('preact');
 var hooks$1 = require('preact/hooks');
+var classnames = require('classnames');
 var React = require('preact/compat');
 var jsxRuntime = require('preact/jsx-runtime');
-var classnames = require('classnames');
 var minDom = require('min-dom');
 var dragula = require('dragula');
 var arrayMove = require('array-move');
@@ -17,8 +17,8 @@ var arrayMove = require('array-move');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Ids__default = /*#__PURE__*/_interopDefaultLegacy(Ids);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var dragula__default = /*#__PURE__*/_interopDefaultLegacy(dragula);
 
 var FN_REF = '__fn';
@@ -776,251 +776,6 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
-var ButtonIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$b({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  fillRule: "evenodd",
-  d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18V25.89z"
-})));
-
-function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
-var CheckboxIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$a({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  d: "M34 18H20a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V20a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
-})));
-
-function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
-var ChecklistIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$9({
-  width: "54",
-  height: "54",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M19 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6 18h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6-30h-6v6h6V8zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V8a2 2 0 00-2-2h-6z",
-  fill: "#22242A"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
-  d: "M26 26a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0 16a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0-32a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2z",
-  fill: "#22242A"
-})));
-
-function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
-var TaglistIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$8({
-  width: "54",
-  height: "54",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1z",
-  fill: "#000"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
-  d: "M11 22a1 1 0 011-1h19a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1V22z",
-  fill: "#505562"
-})));
-
-function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
-var FormIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$7({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("rect", {
-  x: "15",
-  y: "17",
-  width: "24",
-  height: "4",
-  rx: "1"
-}), /*#__PURE__*/React__default['default'].createElement("rect", {
-  x: "15",
-  y: "25",
-  width: "24",
-  height: "4",
-  rx: "1"
-}), /*#__PURE__*/React__default['default'].createElement("rect", {
-  x: "15",
-  y: "33",
-  width: "13",
-  height: "4",
-  rx: "1"
-})));
-
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
-var ColumnsIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$6({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  fillRule: "evenodd",
-  d: "M8 33v5a1 1 0 001 1h4v2H9a3 3 0 01-3-3v-5h2zm18 6v2H15v-2h11zm13 0v2H28v-2h11zm9-6v5a3 3 0 01-3 3h-4v-2h4a1 1 0 00.993-.883L46 38v-5h2zM8 22v9H6v-9h2zm40 0v9h-2v-9h2zm-35-9v2H9a1 1 0 00-.993.883L8 16v4H6v-4a3 3 0 013-3h4zm32 0a3 3 0 013 3v4h-2v-4a1 1 0 00-.883-.993L45 15h-4v-2h4zm-6 0v2H28v-2h11zm-13 0v2H15v-2h11z"
-})));
-
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-var NumberIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$5({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  fillRule: "evenodd",
-  d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
-})));
-
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-var RadioIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$4({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-})));
-
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var SelectIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$3({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  fillRule: "evenodd",
-  d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-12 7h9l-4.5 6-4.5-6z"
-})));
-
-function _extends$2() { _extends$2 = Object.assign || 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 TextIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zM44.35 28.79l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
-})));
-
-function _extends$1() { _extends$1 = Object.assign || 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 TextfieldIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  fillRule: "evenodd",
-  d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"
-})));
-
-const iconsByType = {
-  button: ButtonIcon,
-  checkbox: CheckboxIcon,
-  checklist: ChecklistIcon,
-  columns: ColumnsIcon,
-  number: NumberIcon,
-  radio: RadioIcon,
-  select: SelectIcon,
-  taglist: TaglistIcon,
-  text: TextIcon,
-  textfield: TextfieldIcon,
-  default: FormIcon
-};
-
-const types = [{
-  label: 'Text Field',
-  type: 'textfield'
-}, {
-  label: 'Number',
-  type: 'number'
-}, {
-  label: 'Checkbox',
-  type: 'checkbox'
-}, {
-  label: 'Checklist',
-  type: 'checklist'
-}, {
-  label: 'Taglist',
-  type: 'taglist'
-}, {
-  label: 'Radio',
-  type: 'radio'
-}, {
-  label: 'Select',
-  type: 'select'
-}, {
-  label: 'Text',
-  type: 'text'
-}, {
-  label: 'Button',
-  type: 'button'
-}];
-function Palette(props) {
-  return jsxRuntime.jsxs("div", {
-    class: "fjs-palette",
-    children: [jsxRuntime.jsxs("div", {
-      class: "fjs-palette-header",
-      title: "Form elements library",
-      children: [jsxRuntime.jsx("span", {
-        class: "fjs-hide-compact",
-        children: "FORM ELEMENTS "
-      }), "LIBRARY"]
-    }), jsxRuntime.jsx("div", {
-      class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
-      children: types.map(({
-        label,
-        type
-      }) => {
-        const Icon = iconsByType[type];
-        return jsxRuntime.jsxs("div", {
-          class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
-          "data-field-type": type,
-          title: `Create a ${label} element`,
-          children: [Icon ? jsxRuntime.jsx(Icon, {
-            class: "fjs-palette-field-icon",
-            width: "36",
-            height: "36",
-            viewBox: "0 0 54 54"
-          }) : null, jsxRuntime.jsx("span", {
-            class: "fjs-palette-field-text fjs-hide-compact",
-            children: label
-          })]
-        });
-      })
-    })]
-  });
-}
-
 var ArrowIcon = function ArrowIcon(props) {
   return jsxRuntime.jsx("svg", { ...props,
     children: jsxRuntime.jsx("path", {
@@ -2604,58 +2359,239 @@ function TextfieldEntry(props) {
     setValidationError(newValidationError);
   };
 
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
+  if (previousValue === value && validationError) {
+    value = cachedInvalidValue;
+  }
+
+  const temporaryError = useShowErrorEvent(show);
+  const error = temporaryError || validationError;
+  return jsxRuntime.jsxs("div", {
+    class: classnames__default['default']('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsxRuntime.jsx(Textfield, {
+      debounce: debounce,
+      disabled: disabled,
+      feel: feel,
+      id: id,
+      label: label,
+      onInput: onInput,
+      show: show,
+      value: value
+    }), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
+function isEdited$1(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+
+function prefixId$1(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function arrayAdd$1(array, index, item) {
+  const copy = [...array];
+  copy.splice(index, 0, item);
+  return copy;
+}
+function textToLabel(text = '...') {
+  if (text.length > 10) {
+    return `${text.substring(0, 30)}...`;
+  }
+
+  return text;
+}
+const INPUTS = ['checkbox', 'checklist', 'number', 'radio', 'select', 'taglist', 'textfield'];
+const VALUES_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
+
+function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+var ButtonIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$b({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  fillRule: "evenodd",
+  d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18V25.89z"
+})));
+
+function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+var CheckboxIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$a({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  d: "M34 18H20a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V20a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
+})));
+
+function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+var ChecklistIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$9({
+  width: "54",
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M19 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6 18h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6-30h-6v6h6V8zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V8a2 2 0 00-2-2h-6z",
+  fill: "#22242A"
+}), /*#__PURE__*/React__default['default'].createElement("path", {
+  d: "M26 26a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0 16a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0-32a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2z",
+  fill: "#22242A"
+})));
+
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var TaglistIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$8({
+  width: "54",
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1z",
+  fill: "#000"
+}), /*#__PURE__*/React__default['default'].createElement("path", {
+  d: "M11 22a1 1 0 011-1h19a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1V22z",
+  fill: "#505562"
+})));
+
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var FormIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$7({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("rect", {
+  x: "15",
+  y: "17",
+  width: "24",
+  height: "4",
+  rx: "1"
+}), /*#__PURE__*/React__default['default'].createElement("rect", {
+  x: "15",
+  y: "25",
+  width: "24",
+  height: "4",
+  rx: "1"
+}), /*#__PURE__*/React__default['default'].createElement("rect", {
+  x: "15",
+  y: "33",
+  width: "13",
+  height: "4",
+  rx: "1"
+})));
+
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var ColumnsIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$6({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  fillRule: "evenodd",
+  d: "M8 33v5a1 1 0 001 1h4v2H9a3 3 0 01-3-3v-5h2zm18 6v2H15v-2h11zm13 0v2H28v-2h11zm9-6v5a3 3 0 01-3 3h-4v-2h4a1 1 0 00.993-.883L46 38v-5h2zM8 22v9H6v-9h2zm40 0v9h-2v-9h2zm-35-9v2H9a1 1 0 00-.993.883L8 16v4H6v-4a3 3 0 013-3h4zm32 0a3 3 0 013 3v4h-2v-4a1 1 0 00-.883-.993L45 15h-4v-2h4zm-6 0v2H28v-2h11zm-13 0v2H15v-2h11z"
+})));
 
-  const temporaryError = useShowErrorEvent(show);
-  const error = temporaryError || validationError;
-  return jsxRuntime.jsxs("div", {
-    class: classnames__default['default']('bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [jsxRuntime.jsx(Textfield, {
-      debounce: debounce,
-      disabled: disabled,
-      feel: feel,
-      id: id,
-      label: label,
-      onInput: onInput,
-      show: show,
-      value: value
-    }), error && jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), jsxRuntime.jsx(Description$1, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var NumberIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$5({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  fillRule: "evenodd",
+  d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
+})));
 
-function isEdited$1(node) {
-  return node && !!node.value;
-} // helpers /////////////////
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var RadioIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$4({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+})));
 
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var SelectIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$3({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  fillRule: "evenodd",
+  d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-12 7h9l-4.5 6-4.5-6z"
+})));
 
-function prefixId$1(id) {
-  return `bio-properties-panel-${id}`;
-}
+function _extends$2() { _extends$2 = Object.assign || 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 TextIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$2({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zM44.35 28.79l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
+})));
 
-function arrayAdd$1(array, index, item) {
-  const copy = [...array];
-  copy.splice(index, 0, item);
-  return copy;
-}
-function textToLabel(text = '...') {
-  if (text.length > 10) {
-    return `${text.substring(0, 30)}...`;
-  }
+function _extends$1() { _extends$1 = Object.assign || 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 TextfieldIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$1({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  fillRule: "evenodd",
+  d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"
+})));
 
-  return text;
-}
-const INPUTS = ['checkbox', 'checklist', 'number', 'radio', 'select', 'taglist', 'textfield'];
-const VALUES_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
+const iconsByType = {
+  button: ButtonIcon,
+  checkbox: CheckboxIcon,
+  checklist: ChecklistIcon,
+  columns: ColumnsIcon,
+  number: NumberIcon,
+  radio: RadioIcon,
+  select: SelectIcon,
+  taglist: TaglistIcon,
+  text: TextIcon,
+  textfield: TextfieldIcon,
+  default: FormIcon
+};
 
 const labelsByType = {
   button: 'BUTTON',
@@ -3292,7 +3228,7 @@ function Key$1(props) {
 
   return TextfieldEntry({
     debounce,
-    description: 'Maps to a process variable',
+    description: 'Binds to a form variable',
     element: field,
     getValue,
     id,
@@ -4053,7 +3989,7 @@ function ValuesGroups(field, editField) {
 
   const groups = [{
     id: valuesSourceId,
-    label: 'Values source',
+    label: 'Options source',
     component: Group,
     entries: ValuesSourceSelectEntry({ ...context,
       id: valuesSourceId
@@ -4065,7 +4001,7 @@ function ValuesGroups(field, editField) {
     const dynamicValuesId = `${fieldId}-dynamicValues`;
     groups.push({
       id: dynamicValuesId,
-      label: 'Dynamic values',
+      label: 'Dynamic options',
       component: Group,
       entries: InputKeyValuesSourceEntry({ ...context,
         id: dynamicValuesId
@@ -4075,7 +4011,7 @@ function ValuesGroups(field, editField) {
     const staticValuesId = `${fieldId}-staticValues`;
     groups.push({
       id: staticValuesId,
-      label: 'Static values',
+      label: 'Static options',
       component: ListGroup,
       ...StaticValuesSourceEntry({ ...context,
         id: staticValuesId
@@ -4338,12 +4274,15 @@ function FormEditor$1(props) {
         formFieldRegistry = useService('formFieldRegistry'),
         injector = useService('injector'),
         modeling = useService('modeling'),
-        selection = useService('selection');
+        selection = useService('selection'),
+        palette = useService('palette'),
+        paletteConfig = useService('config.palette');
 
   const {
     schema
   } = formEditor._getState();
 
+  const paletteRef = hooks$1.useRef(null);
   const [selectedFormField, setSelection] = hooks$1.useState(schema);
   hooks$1.useEffect(() => {
     function handleSelectionChanged(event) {
@@ -4427,6 +4366,10 @@ function FormEditor$1(props) {
       eventBus.off('attach', onAttach);
       eventBus.off('detach', onDetach);
     };
+  }, []); // fire event after first render to notify interested parties
+
+  hooks$1.useEffect(() => {
+    eventBus.fire('formEditor.rendered');
   }, []);
   const formRenderContext = {
     Children,
@@ -4461,14 +4404,21 @@ function FormEditor$1(props) {
   };
   const onSubmit = hooks$1.useCallback(() => {}, []);
   const onReset = hooks$1.useCallback(() => {}, []);
-  const editField = hooks$1.useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
+  const editField = hooks$1.useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]); // attach default palette
+
+  const hasDefaultPalette = defaultPalette(paletteConfig);
+  hooks$1.useEffect(() => {
+    if (hasDefaultPalette) {
+      palette.attachTo(paletteRef.current);
+    }
+  }, [palette, paletteRef, hasDefaultPalette]);
   return jsxRuntime.jsxs("div", {
     class: "fjs-form-editor",
     children: [jsxRuntime.jsxs(DragAndDropContext.Provider, {
       value: dragAndDropContext,
-      children: [jsxRuntime.jsx("div", {
-        class: "fjs-palette-container",
-        children: jsxRuntime.jsx(Palette, {})
+      children: [hasDefaultPalette && jsxRuntime.jsx("div", {
+        class: "fjs-editor-palette-container",
+        ref: paletteRef
       }), jsxRuntime.jsx("div", {
         class: "fjs-form-container",
         children: jsxRuntime.jsx(formJsViewer.FormContext.Provider, {
@@ -4529,6 +4479,11 @@ function CreatePreview(props) {
     return () => drake.off('cloned', handleCloned);
   }, [drake]);
   return null;
+} // helper //////
+
+
+function defaultPalette(paletteConfig) {
+  return !(paletteConfig && paletteConfig.parent);
 }
 
 class Renderer {
@@ -6585,6 +6540,145 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
+const types = [{
+  label: 'Text Field',
+  type: 'textfield'
+}, {
+  label: 'Number',
+  type: 'number'
+}, {
+  label: 'Checkbox',
+  type: 'checkbox'
+}, {
+  label: 'Checklist',
+  type: 'checklist'
+}, {
+  label: 'Taglist',
+  type: 'taglist'
+}, {
+  label: 'Radio',
+  type: 'radio'
+}, {
+  label: 'Select',
+  type: 'select'
+}, {
+  label: 'Text',
+  type: 'text'
+}, {
+  label: 'Button',
+  type: 'button'
+}];
+function Palette(props) {
+  return jsxRuntime.jsxs("div", {
+    class: "fjs-palette",
+    children: [jsxRuntime.jsxs("div", {
+      class: "fjs-palette-header",
+      title: "Form elements library",
+      children: [jsxRuntime.jsx("span", {
+        class: "fjs-hide-compact",
+        children: "FORM ELEMENTS "
+      }), "LIBRARY"]
+    }), jsxRuntime.jsx("div", {
+      class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
+      children: types.map(({
+        label,
+        type
+      }) => {
+        const Icon = iconsByType[type];
+        return jsxRuntime.jsxs("div", {
+          class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
+          "data-field-type": type,
+          title: `Create a ${label} element`,
+          children: [Icon ? jsxRuntime.jsx(Icon, {
+            class: "fjs-palette-field-icon",
+            width: "36",
+            height: "36",
+            viewBox: "0 0 54 54"
+          }) : null, jsxRuntime.jsx("span", {
+            class: "fjs-palette-field-text fjs-hide-compact",
+            children: label
+          })]
+        });
+      })
+    })]
+  });
+}
+
+class PaletteRenderer {
+  constructor(paletteConfig, eventBus) {
+    const {
+      parent
+    } = paletteConfig || {};
+    this._eventBus = eventBus;
+    this._container = minDom.domify('<div class="fjs-palette-container"></div>');
+
+    if (parent) {
+      this.attachTo(parent);
+    }
+
+    this._eventBus.once('formEditor.rendered', 500, () => {
+      this._render();
+    });
+  }
+  /**
+   * Attach the palette to a parent node.
+   *
+   * @param {HTMLElement} container
+   */
+
+
+  attachTo(container) {
+    if (!container) {
+      throw new Error('container required');
+    }
+
+    if (typeof container === 'string') {
+      container = minDom.query(container);
+    } // (1) detach from old parent
+
+
+    this.detach(); // (2) append to parent container
+
+    container.appendChild(this._container); // (3) notify interested parties
+
+    this._eventBus.fire('palette.attach');
+  }
+  /**
+   * Detach the palette from its parent node.
+   */
+
+
+  detach() {
+    const parentNode = this._container.parentNode;
+
+    if (parentNode) {
+      parentNode.removeChild(this._container);
+
+      this._eventBus.fire('palette.detach');
+    }
+  }
+
+  _render() {
+    preact.render(jsxRuntime.jsx(Palette, {}), this._container);
+
+    this._eventBus.fire('palette.rendered');
+  }
+
+  _destroy() {
+    if (this._container) {
+      preact.render(null, this._container);
+
+      this._eventBus.fire('palette.destroyed');
+    }
+  }
+
+}
+PaletteRenderer.$inject = ['config.palette', 'eventBus'];
+
+var PaletteModule = {
+  palette: ['type', PaletteRenderer]
+};
+
 const ids = new Ids__default['default']([32, 36, 1]);
 /**
  * @typedef { import('./types').Injector } Injector
@@ -6866,7 +6960,7 @@ class FormEditor {
 
 
   _getModules() {
-    return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule];
+    return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule, PaletteModule];
   }
   /**
    * @internal