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

package/dist/index.es.js

@@ -4,10 +4,10 @@ import Ids from 'ids';
 import { isArray, isFunction, isNumber, bind, assign, debounce, sortBy, find, get, set, isUndefined, without, has, forEach, isObject, uniqueBy, isString } from 'min-dash';
 import { createContext, createElement, render } from 'preact';
 import { useContext, useState, useEffect, useRef, useCallback, useMemo } from 'preact/hooks';
-import React from 'preact/compat';
-import { jsxs, jsx } from 'preact/jsx-runtime';
 import classnames from 'classnames';
-import { query, matches, closest, event } from 'min-dom';
+import React from 'preact/compat';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { query, matches, closest, event, domify } from 'min-dom';
 import dragula from 'dragula';
 import { mutate } from 'array-move';
 
@@ -766,251 +766,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.createElement("svg", _extends$b({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.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.createElement("svg", _extends$a({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.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.createElement("svg", _extends$9({
-  width: "54",
-  height: "54",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.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.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.createElement("svg", _extends$8({
-  width: "54",
-  height: "54",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.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.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.createElement("svg", _extends$7({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.createElement("rect", {
-  x: "15",
-  y: "17",
-  width: "24",
-  height: "4",
-  rx: "1"
-}), /*#__PURE__*/React.createElement("rect", {
-  x: "15",
-  y: "25",
-  width: "24",
-  height: "4",
-  rx: "1"
-}), /*#__PURE__*/React.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.createElement("svg", _extends$6({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.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.createElement("svg", _extends$5({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.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.createElement("svg", _extends$4({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.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.createElement("svg", _extends$3({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.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.createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.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.createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.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 jsxs("div", {
-    class: "fjs-palette",
-    children: [jsxs("div", {
-      class: "fjs-palette-header",
-      title: "Form elements library",
-      children: [jsx("span", {
-        class: "fjs-hide-compact",
-        children: "FORM ELEMENTS "
-      }), "LIBRARY"]
-    }), jsx("div", {
-      class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
-      children: types.map(({
-        label,
-        type
-      }) => {
-        const Icon = iconsByType[type];
-        return jsxs("div", {
-          class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
-          "data-field-type": type,
-          title: `Create a ${label} element`,
-          children: [Icon ? jsx(Icon, {
-            class: "fjs-palette-field-icon",
-            width: "36",
-            height: "36",
-            viewBox: "0 0 54 54"
-          }) : null, jsx("span", {
-            class: "fjs-palette-field-text fjs-hide-compact",
-            children: label
-          })]
-        });
-      })
-    })]
-  });
-}
-
 var ArrowIcon = function ArrowIcon(props) {
   return jsx("svg", { ...props,
     children: jsx("path", {
@@ -2594,58 +2349,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 jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(Textfield, {
+      debounce: debounce,
+      disabled: disabled,
+      feel: feel,
+      id: id,
+      label: label,
+      onInput: onInput,
+      show: show,
+      value: value
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), 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.createElement("svg", _extends$b({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.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.createElement("svg", _extends$a({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.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.createElement("svg", _extends$9({
+  width: "54",
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.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.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.createElement("svg", _extends$8({
+  width: "54",
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.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.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.createElement("svg", _extends$7({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.createElement("rect", {
+  x: "15",
+  y: "17",
+  width: "24",
+  height: "4",
+  rx: "1"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "15",
+  y: "25",
+  width: "24",
+  height: "4",
+  rx: "1"
+}), /*#__PURE__*/React.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.createElement("svg", _extends$6({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.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 jsxs("div", {
-    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [jsx(Textfield, {
-      debounce: debounce,
-      disabled: disabled,
-      feel: feel,
-      id: id,
-      label: label,
-      onInput: onInput,
-      show: show,
-      value: value
-    }), error && jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), 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.createElement("svg", _extends$5({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.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.createElement("svg", _extends$4({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.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.createElement("svg", _extends$3({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.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.createElement("svg", _extends$2({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.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.createElement("svg", _extends$1({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.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',
@@ -3282,7 +3218,7 @@ function Key$1(props) {
 
   return TextfieldEntry({
     debounce,
-    description: 'Maps to a process variable',
+    description: 'Binds to a form variable',
     element: field,
     getValue,
     id,
@@ -4043,7 +3979,7 @@ function ValuesGroups(field, editField) {
 
   const groups = [{
     id: valuesSourceId,
-    label: 'Values source',
+    label: 'Options source',
     component: Group,
     entries: ValuesSourceSelectEntry({ ...context,
       id: valuesSourceId
@@ -4055,7 +3991,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
@@ -4065,7 +4001,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
@@ -4328,12 +4264,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 = useRef(null);
   const [selectedFormField, setSelection] = useState(schema);
   useEffect(() => {
     function handleSelectionChanged(event) {
@@ -4417,6 +4356,10 @@ function FormEditor$1(props) {
       eventBus.off('attach', onAttach);
       eventBus.off('detach', onDetach);
     };
+  }, []); // fire event after first render to notify interested parties
+
+  useEffect(() => {
+    eventBus.fire('formEditor.rendered');
   }, []);
   const formRenderContext = {
     Children,
@@ -4451,14 +4394,21 @@ function FormEditor$1(props) {
   };
   const onSubmit = useCallback(() => {}, []);
   const onReset = useCallback(() => {}, []);
-  const editField = useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
+  const editField = useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]); // attach default palette
+
+  const hasDefaultPalette = defaultPalette(paletteConfig);
+  useEffect(() => {
+    if (hasDefaultPalette) {
+      palette.attachTo(paletteRef.current);
+    }
+  }, [palette, paletteRef, hasDefaultPalette]);
   return jsxs("div", {
     class: "fjs-form-editor",
     children: [jsxs(DragAndDropContext.Provider, {
       value: dragAndDropContext,
-      children: [jsx("div", {
-        class: "fjs-palette-container",
-        children: jsx(Palette, {})
+      children: [hasDefaultPalette && jsx("div", {
+        class: "fjs-editor-palette-container",
+        ref: paletteRef
       }), jsx("div", {
         class: "fjs-form-container",
         children: jsx(FormContext.Provider, {
@@ -4519,6 +4469,11 @@ function CreatePreview(props) {
     return () => drake.off('cloned', handleCloned);
   }, [drake]);
   return null;
+} // helper //////
+
+
+function defaultPalette(paletteConfig) {
+  return !(paletteConfig && paletteConfig.parent);
 }
 
 class Renderer {
@@ -6575,6 +6530,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 jsxs("div", {
+    class: "fjs-palette",
+    children: [jsxs("div", {
+      class: "fjs-palette-header",
+      title: "Form elements library",
+      children: [jsx("span", {
+        class: "fjs-hide-compact",
+        children: "FORM ELEMENTS "
+      }), "LIBRARY"]
+    }), jsx("div", {
+      class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
+      children: types.map(({
+        label,
+        type
+      }) => {
+        const Icon = iconsByType[type];
+        return jsxs("div", {
+          class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
+          "data-field-type": type,
+          title: `Create a ${label} element`,
+          children: [Icon ? jsx(Icon, {
+            class: "fjs-palette-field-icon",
+            width: "36",
+            height: "36",
+            viewBox: "0 0 54 54"
+          }) : null, 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 = 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 = 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() {
+    render(jsx(Palette, {}), this._container);
+
+    this._eventBus.fire('palette.rendered');
+  }
+
+  _destroy() {
+    if (this._container) {
+      render(null, this._container);
+
+      this._eventBus.fire('palette.destroyed');
+    }
+  }
+
+}
+PaletteRenderer.$inject = ['config.palette', 'eventBus'];
+
+var PaletteModule = {
+  palette: ['type', PaletteRenderer]
+};
+
 const ids = new Ids([32, 36, 1]);
 /**
  * @typedef { import('./types').Injector } Injector
@@ -6856,7 +6950,7 @@ class FormEditor {
 
 
   _getModules() {
-    return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule];
+    return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule, PaletteModule];
   }
   /**
    * @internal