@bpmn-io/form-js-editor 0.10.0-alpha.2 → 0.10.0

package/dist/index.cjs

@@ -8,8 +8,8 @@ var minDash = require('min-dash');
 var preact = require('preact');
 var hooks$1 = require('preact/hooks');
 var dragula = require('dragula');
-var React = require('preact/compat');
 var jsxRuntime = require('preact/jsx-runtime');
+var React = require('preact/compat');
 var minDom = require('min-dom');
 var arrayMove = require('array-move');
 var classnames = require('classnames');
@@ -705,11 +705,11 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var ListDeleteIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$d({
+}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "11",
   height: "14"
@@ -717,223 +717,6 @@ var ListDeleteIcon = (({
   d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
 })));
 
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
-var ButtonIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$c({
-  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$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
-var CheckboxIcon = (({
-  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", {
-  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$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
-var ChecklistIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$a({
-  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$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
-var TaglistIcon = (({
-  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: "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$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
-var FormIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$8({
-  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$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
-var ColumnsIcon = (({
-  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("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$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
-var NumberIcon = (({
-  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: "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$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-var RadioIcon = (({
-  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", {
-  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$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-var SelectIcon = (({
-  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", {
-  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$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var TextIcon = (({
-  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", {
-  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$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var TextfieldIcon = (({
-  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", {
-  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"
-})));
-
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var TextareaIcon = (({
-  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 13a3 3 0 013 3v22a3 3 0 01-3 3H9a3 3 0 01-3-3V16a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v22a1 1 0 001 1h36a1 1 0 001-1V16a1 1 0 00-1-1zm-1.136 15.5l.848.849-6.363 6.363-.849-.848 6.364-6.364zm.264 3.5l.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
-})));
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var ImageIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends({
-  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: "M34.636 21.91A3.818 3.818 0 1127 21.908a3.818 3.818 0 017.636 0zm-2 0A1.818 1.818 0 1129 21.908a1.818 1.818 0 013.636 0z",
-  fill: "#000"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754c.06-.038.116-.083.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z",
-  fill: "#000"
-})));
-
-const iconsByType = {
-  button: ButtonIcon,
-  checkbox: CheckboxIcon,
-  checklist: ChecklistIcon,
-  columns: ColumnsIcon,
-  image: ImageIcon,
-  number: NumberIcon,
-  radio: RadioIcon,
-  select: SelectIcon,
-  taglist: TaglistIcon,
-  text: TextIcon,
-  textfield: TextfieldIcon,
-  textarea: TextareaIcon,
-  default: FormIcon
-};
-
 function ContextPad(props) {
   if (!props.children) {
     return null;
@@ -1208,7 +991,7 @@ function CreatePreview(props) {
   } = hooks$1.useContext(DragAndDropContext);
   function handleCloned(clone, original, type) {
     const fieldType = clone.dataset.fieldType;
-    const Icon = iconsByType[fieldType];
+    const Icon = formJsViewer.iconsByType[fieldType];
     if (fieldType) {
       clone.innerHTML = '';
       clone.class = 'gu-mirror';
@@ -3106,6 +2889,9 @@ const types = [{
 }, {
   label: 'Number',
   type: 'number'
+}, {
+  label: 'Datetime',
+  type: 'datetime'
 }, {
   label: 'Checkbox',
   type: 'checkbox'
@@ -3122,7 +2908,7 @@ const types = [{
   label: 'Select',
   type: 'select'
 }, {
-  label: 'Text',
+  label: 'Text view',
   type: 'text'
 }, {
   label: 'Image view',
@@ -3147,7 +2933,7 @@ function Palette(props) {
         label,
         type
       }) => {
-        const Icon = iconsByType[type];
+        const Icon = formJsViewer.iconsByType[type];
         return jsxRuntime.jsxs("div", {
           class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
           "data-field-type": type,
@@ -4682,7 +4468,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     value: value || ''
   });
 });
-React.forwardRef((props, ref) => {
+const OptionalFeelTextArea = React.forwardRef((props, ref) => {
   const {
     id,
     disabled,
@@ -4816,6 +4602,28 @@ function FeelEntry(props) {
     })]
   });
 }
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Function} props.validate
+ */
+function FeelTextArea(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-textarea",
+    OptionalComponent: OptionalFeelTextArea,
+    ...props
+  });
+}
 function isEdited$6(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
@@ -5357,7 +5165,7 @@ function textToLabel(text) {
   }
   return null;
 }
-const INPUTS = ['checkbox', 'checklist', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
+const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
 const VALUES_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
 
 const labelsByType = {
@@ -5366,12 +5174,13 @@ const labelsByType = {
   checklist: 'CHECKLIST',
   columns: 'COLUMNS',
   default: 'FORM',
-  image: 'IMAGE',
+  datetime: 'DATETIME',
+  image: 'IMAGE VIEW',
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',
   taglist: 'TAGLIST',
-  text: 'TEXT',
+  text: 'TEXT VIEW',
   textfield: 'TEXT FIELD',
   textarea: 'TEXT AREA'
 };
@@ -5395,7 +5204,7 @@ const PropertiesPanelHeaderProvider = {
     const {
       type
     } = field;
-    const Icon = iconsByType[type];
+    const Icon = formJsViewer.iconsByType[type];
     if (Icon) {
       return () => jsxRuntime.jsx(Icon, {
         width: "36",
@@ -6054,48 +5863,83 @@ function Key$1(props) {
   });
 }
 
-function LabelEntry(props) {
+function simpleStringEntryFactory(options) {
+  const {
+    id,
+    label,
+    path,
+    props
+  } = options;
   const {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
-  const entries = [];
-  if (INPUTS.includes(type) || type === 'button') {
-    entries.push({
-      id: 'label',
-      component: Label$1,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$1
-    });
-  }
-  return entries;
+  return {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    component: SimpleStringComponent,
+    isEdited: isEdited$1
+  };
 }
-function Label$1(props) {
+const SimpleStringComponent = props => {
   const {
-    editField,
+    id,
+    label,
+    path,
     field,
-    id
+    editField
   } = props;
   const debounce = useService('debounce');
-  const path = ['label'];
-  const getValue = () => {
-    return minDash.get(field, path, '');
-  };
-  const setValue = value => {
-    return editField(field, path, value);
-  };
+  const getValue = () => minDash.get(field, path, '');
+  const setValue = value => editField(field, path, value);
   return TextfieldEntry({
     debounce,
     element: field,
     getValue,
     id,
-    label: 'Field label',
+    label,
     setValue
   });
+};
+
+function LabelEntry(props) {
+  const {
+    field
+  } = props;
+  const {
+    type,
+    subtype
+  } = field;
+  const entries = [];
+  if (type === 'datetime') {
+    if (subtype === formJsViewer.DATETIME_SUBTYPES.DATE || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
+      entries.push(simpleStringEntryFactory({
+        id: 'date-label',
+        path: formJsViewer.DATE_LABEL_PATH,
+        label: 'Date label',
+        props
+      }));
+    }
+    if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
+      entries.push(simpleStringEntryFactory({
+        id: 'time-label',
+        path: formJsViewer.TIME_LABEL_PATH,
+        label: 'Time label',
+        props
+      }));
+    }
+  } else if (INPUTS.includes(type) || type === 'button') {
+    entries.push(simpleStringEntryFactory({
+      id: 'label',
+      path: ['label'],
+      label: 'Field label',
+      props
+    }));
+  }
+  return entries;
 }
 
 function SourceEntry(props) {
@@ -6156,17 +6000,16 @@ function TextEntry(props) {
   const {
     type
   } = field;
-  const entries = [];
-  if (type === 'text') {
-    entries.push({
-      id: 'text',
-      component: Text,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$2
-    });
+  if (type !== 'text') {
+    return [];
   }
-  return entries;
+  return [{
+    id: 'text',
+    component: Text,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6
+  }];
 }
 function Text(props) {
   const {
@@ -6175,6 +6018,9 @@ function Text(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
   const path = ['text'];
   const getValue = () => {
     return minDash.get(field, path, '');
@@ -6182,15 +6028,17 @@ function Text(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return TextAreaEntry({
+  return FeelTextArea({
     debounce,
-    description: 'Use Markdown or basic HTML to format.',
+    description: 'Use an Expression, Markdown or basic HTML to format.',
     element: field,
+    feel: 'optional',
     getValue,
     id,
     label: 'Text',
     rows: 10,
-    setValue
+    setValue,
+    variables
   });
 }
 
@@ -6283,8 +6131,7 @@ function NumberArrowStep(props) {
 function NumberSerializationEntry(props) {
   const {
     editField,
-    field,
-    id
+    field
   } = props;
   const {
     type
@@ -6294,7 +6141,7 @@ function NumberSerializationEntry(props) {
   }
   const entries = [];
   entries.push({
-    id: id + '-serialize-to-string',
+    id: 'serialize-to-string',
     component: SerializeToString,
     isEdited: isEdited$7,
     editField,
@@ -6332,6 +6179,243 @@ function SerializeToString(props) {
   });
 }
 
+function DateTimeEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type,
+    subtype
+  } = field;
+  if (type !== 'datetime') {
+    return [];
+  }
+  const entries = [{
+    id: 'subtype',
+    component: DateTimeSubtypeSelect,
+    isEdited: isEdited$4,
+    editField,
+    field
+  }];
+  if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
+    entries.push({
+      id: 'use24h',
+      component: Use24h,
+      isEdited: isEdited$7,
+      editField,
+      field
+    });
+  }
+  return entries;
+}
+function DateTimeSubtypeSelect(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const getValue = e => minDash.get(field, formJsViewer.DATETIME_SUBTYPE_PATH);
+  const clearTimeConfig = () => {
+    const timeConfigPaths = [formJsViewer.TIME_LABEL_PATH, formJsViewer.TIME_USE24H_PATH, formJsViewer.TIME_INTERVAL_PATH, formJsViewer.TIME_SERIALISING_FORMAT_PATH];
+    for (const path of timeConfigPaths) {
+      editField(field, path, undefined);
+    }
+  };
+  const initTimeConfig = () => {
+    editField(field, formJsViewer.TIME_LABEL_PATH, 'Time');
+    editField(field, formJsViewer.TIME_SERIALISING_FORMAT_PATH, formJsViewer.TIME_SERIALISING_FORMATS.UTC_OFFSET);
+    editField(field, formJsViewer.TIME_INTERVAL_PATH, 15);
+  };
+  const clearDateConfig = () => {
+    const dateConfigPaths = [formJsViewer.DATE_LABEL_PATH, formJsViewer.DATE_DISALLOW_PAST_PATH];
+    for (const path of dateConfigPaths) {
+      editField(field, path, undefined);
+    }
+  };
+  const initDateConfig = () => {
+    editField(field, formJsViewer.DATE_LABEL_PATH, 'Date');
+  };
+  const setValue = value => {
+    const oldValue = getValue();
+    if (oldValue === value) return;
+    if (value === formJsViewer.DATETIME_SUBTYPES.DATE) {
+      clearTimeConfig();
+      oldValue === formJsViewer.DATETIME_SUBTYPES.TIME && initDateConfig();
+    } else if (value === formJsViewer.DATETIME_SUBTYPES.TIME) {
+      clearDateConfig();
+      oldValue === formJsViewer.DATETIME_SUBTYPES.DATE && initTimeConfig();
+    } else if (value === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
+      oldValue === formJsViewer.DATETIME_SUBTYPES.DATE && initTimeConfig();
+      oldValue === formJsViewer.DATETIME_SUBTYPES.TIME && initDateConfig();
+    }
+    return editField(field, formJsViewer.DATETIME_SUBTYPE_PATH, value);
+  };
+  const getDatetimeSubtypes = () => {
+    return Object.values(formJsViewer.DATETIME_SUBTYPES).map(subtype => ({
+      label: formJsViewer.DATETIME_SUBTYPES_LABELS[subtype],
+      value: subtype
+    }));
+  };
+  return SelectEntry({
+    label: 'Subtype',
+    element: field,
+    getOptions: getDatetimeSubtypes,
+    getValue,
+    id,
+    setValue
+  });
+}
+function Use24h(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const path = formJsViewer.TIME_USE24H_PATH;
+  const getValue = () => {
+    return minDash.get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label: 'Use 24h',
+    setValue
+  });
+}
+
+function DateTimeConstraintsEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    type,
+    subtype
+  } = field;
+  if (type !== 'datetime') {
+    return [];
+  }
+  const entries = [];
+  if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
+    entries.push({
+      id: id + '-timeInterval',
+      component: TimeIntervalSelect,
+      isEdited: isEdited$4,
+      editField,
+      field
+    });
+  }
+  if (subtype === formJsViewer.DATETIME_SUBTYPES.DATE || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
+    entries.push({
+      id: id + '-disallowPassedDates',
+      component: DisallowPassedDates,
+      isEdited: isEdited$7,
+      editField,
+      field
+    });
+  }
+  return entries;
+}
+function DisallowPassedDates(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const path = formJsViewer.DATE_DISALLOW_PAST_PATH;
+  const getValue = () => {
+    return minDash.get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label: 'Disallow past dates',
+    setValue
+  });
+}
+function TimeIntervalSelect(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const timeIntervals = [1, 5, 10, 15, 30, 60];
+  const getValue = e => minDash.get(field, formJsViewer.TIME_INTERVAL_PATH);
+  const setValue = value => editField(field, formJsViewer.TIME_INTERVAL_PATH, parseInt(value));
+  const getTimeIntervals = () => {
+    return timeIntervals.map(timeInterval => ({
+      label: timeInterval === 60 ? '1h' : timeInterval + 'm',
+      value: timeInterval
+    }));
+  };
+  return SelectEntry({
+    label: 'Time interval',
+    element: field,
+    getOptions: getTimeIntervals,
+    getValue,
+    id,
+    setValue
+  });
+}
+
+function DateTimeFormatEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type,
+    subtype
+  } = field;
+  if (type !== 'datetime') {
+    return [];
+  }
+  const entries = [];
+  if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
+    entries.push({
+      id: 'time-format',
+      component: TimeFormatSelect,
+      isEdited: isEdited$4,
+      editField,
+      field
+    });
+  }
+  return entries;
+}
+function TimeFormatSelect(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const getValue = e => minDash.get(field, formJsViewer.TIME_SERIALISING_FORMAT_PATH);
+  const setValue = value => editField(field, formJsViewer.TIME_SERIALISING_FORMAT_PATH, value);
+  const getTimeSerialisingFormats = () => {
+    return Object.values(formJsViewer.TIME_SERIALISING_FORMATS).map(format => ({
+      label: formJsViewer.TIME_SERIALISINGFORMAT_LABELS[format],
+      value: format
+    }));
+  };
+  return SelectEntry({
+    label: 'Time format',
+    element: field,
+    getOptions: getTimeSerialisingFormats,
+    getValue,
+    id,
+    setValue
+  });
+}
+
 function ValueEntry(props) {
   const {
     editField,
@@ -6533,37 +6617,6 @@ function updateKey(properties, oldKey, newKey) {
   }, {});
 }
 
-// config  ///////////////////
-
-const VALUES_SOURCES = {
-  STATIC: 'static',
-  INPUT: 'input'
-};
-const VALUES_SOURCE_DEFAULT = VALUES_SOURCES.STATIC;
-const VALUES_SOURCES_LABELS = {
-  [VALUES_SOURCES.STATIC]: 'Static',
-  [VALUES_SOURCES.INPUT]: 'Input data'
-};
-const VALUES_SOURCES_PATHS = {
-  [VALUES_SOURCES.STATIC]: ['values'],
-  [VALUES_SOURCES.INPUT]: ['valuesKey']
-};
-const VALUES_SOURCES_DEFAULTS = {
-  [VALUES_SOURCES.STATIC]: [],
-  [VALUES_SOURCES.INPUT]: ''
-};
-
-// helpers ///////////////////
-
-function getValuesSource(field) {
-  for (const source of Object.values(VALUES_SOURCES)) {
-    if (minDash.get(field, VALUES_SOURCES_PATHS[source]) !== undefined) {
-      return source;
-    }
-  }
-  return VALUES_SOURCE_DEFAULT;
-}
-
 function ValuesSourceSelectEntry(props) {
   const {
     editField,
@@ -6584,21 +6637,21 @@ function ValuesSourceSelect(props) {
     field,
     id
   } = props;
-  const getValue = getValuesSource;
+  const getValue = formJsViewer.getValuesSource;
   const setValue = value => {
     let newField = field;
     const newProperties = {};
-    Object.values(VALUES_SOURCES).forEach(source => {
+    Object.values(formJsViewer.VALUES_SOURCES).forEach(source => {
       // Clear all values source definitions and default the newly selected one
-      const newValue = value === source ? VALUES_SOURCES_DEFAULTS[source] : undefined;
-      newProperties[VALUES_SOURCES_PATHS[source]] = newValue;
+      const newValue = value === source ? formJsViewer.VALUES_SOURCES_DEFAULTS[source] : undefined;
+      newProperties[formJsViewer.VALUES_SOURCES_PATHS[source]] = newValue;
     });
     newField = editField(field, newProperties);
     return newField;
   };
   const getValuesSourceOptions = () => {
-    return Object.values(VALUES_SOURCES).map(valueSource => ({
-      label: VALUES_SOURCES_LABELS[valueSource],
+    return Object.values(formJsViewer.VALUES_SOURCES).map(valueSource => ({
+      label: formJsViewer.VALUES_SOURCES_LABELS[valueSource],
       value: valueSource
     }));
   };
@@ -6637,7 +6690,7 @@ function InputValuesKey(props) {
     description
   } = props;
   const debounce = useService('debounce');
-  const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];
+  const path = formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.INPUT];
   const getValue = () => minDash.get(field, path, '');
   const setValue = value => editField(field, path, value || '');
   const validate = value => {
@@ -6674,10 +6727,10 @@ function StaticValuesSourceEntry(props) {
     e.stopPropagation();
     const index = values.length + 1;
     const entry = getIndexedEntry(index);
-    editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
+    editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
   };
   const removeEntry = entry => {
-    editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], minDash.without(values, entry));
+    editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], minDash.without(values, entry));
   };
   const validateFactory = key => {
     return value => {
@@ -6730,6 +6783,83 @@ function getIndexedEntry(index) {
   return entry;
 }
 
+function AdornerEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+  const onChange = key => {
+    return value => {
+      const appearance = minDash.get(field, ['appearance'], {});
+      editField(field, ['appearance'], minDash.set(appearance, [key], value));
+    };
+  };
+  const getValue = key => {
+    return () => {
+      return minDash.get(field, ['appearance', key]);
+    };
+  };
+  if (['number', 'textfield'].includes(type)) {
+    entries.push({
+      id: 'prefix-adorner',
+      component: PrefixAdorner,
+      isEdited: isEdited$1,
+      editField,
+      field,
+      onChange,
+      getValue
+    });
+    entries.push({
+      id: 'suffix-adorner',
+      component: SuffixAdorner,
+      isEdited: isEdited$1,
+      editField,
+      field,
+      onChange,
+      getValue
+    });
+  }
+  return entries;
+}
+function PrefixAdorner(props) {
+  const {
+    field,
+    id,
+    onChange,
+    getValue
+  } = props;
+  const debounce = useService('debounce');
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue: getValue('prefixAdorner'),
+    id,
+    label: 'Prefix',
+    setValue: onChange('prefixAdorner')
+  });
+}
+function SuffixAdorner(props) {
+  const {
+    field,
+    id,
+    onChange,
+    getValue
+  } = props;
+  const debounce = useService('debounce');
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue: getValue('suffixAdorner'),
+    id,
+    label: 'Suffix',
+    setValue: onChange('suffixAdorner')
+  });
+}
+
 function ConditionEntry(props) {
   const {
     editField,
@@ -6800,6 +6930,9 @@ function GeneralGroup(field, editField) {
   }), ...ColumnsEntry({
     field,
     editField
+  }), ...DateTimeEntry({
+    field,
+    editField
   }), ...TextEntry({
     field,
     editField
@@ -6827,6 +6960,9 @@ function SerializationGroup(field, editField) {
   const entries = [...NumberSerializationEntry({
     field,
     editField
+  }), ...DateTimeFormatEntry({
+    field,
+    editField
   })];
   if (!entries.length) {
     return null;
@@ -6838,6 +6974,21 @@ function SerializationGroup(field, editField) {
   };
 }
 
+function ConstraintsGroup(field, editField) {
+  const entries = [...DateTimeConstraintsEntry({
+    field,
+    editField
+  })];
+  if (!entries.length) {
+    return null;
+  }
+  return {
+    id: 'constraints',
+    label: 'Constraints',
+    entries
+  };
+}
+
 const VALIDATION_TYPE_OPTIONS = {
   custom: {
     value: 'custom',
@@ -7091,8 +7242,8 @@ function ValuesGroups(field, editField) {
       id: valuesSourceId
     })
   }];
-  const valuesSource = getValuesSource(field);
-  if (valuesSource === VALUES_SOURCES.INPUT) {
+  const valuesSource = formJsViewer.getValuesSource(field);
+  if (valuesSource === formJsViewer.VALUES_SOURCES.INPUT) {
     const dynamicValuesId = `${fieldId}-dynamicValues`;
     groups.push({
       id: dynamicValuesId,
@@ -7103,7 +7254,7 @@ function ValuesGroups(field, editField) {
         id: dynamicValuesId
       })
     });
-  } else if (valuesSource === VALUES_SOURCES.STATIC) {
+  } else if (valuesSource === formJsViewer.VALUES_SOURCES.STATIC) {
     const staticValuesId = `${fieldId}-staticValues`;
     groups.push({
       id: staticValuesId,
@@ -7202,6 +7353,21 @@ function removeKey(properties, oldKey) {
   }, {});
 }
 
+function AppearanceGroup(field, editField) {
+  const entries = [...AdornerEntry({
+    field,
+    editField
+  })];
+  if (!entries.length) {
+    return null;
+  }
+  return {
+    id: 'appearance',
+    label: 'Appearance',
+    entries
+  };
+}
+
 function ConditionGroup(field, editField) {
   const {
     type
@@ -7224,7 +7390,7 @@ function getGroups(field, editField) {
   if (!field) {
     return [];
   }
-  const groups = [GeneralGroup(field, editField), ConditionGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
+  const groups = [GeneralGroup(field, editField), ConditionGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
 
   // contract: if a group returns null, it should not be displayed at all
   return groups.filter(group => group !== null);