@crystaldesign/diva-backoffice 24.10.0-beta.2 → 24.10.0-beta.20

package/build/esm/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { createElement, createContext, useState, useEffect, useRef, useMemo, useImperativeHandle, useCallback, createRef, useReducer, useContext, memo } from 'react';
 import 'antd/dist/reset.css';
-import { Select as Select$1, Spin, Button, Modal as Modal$2, Input, Popover, Typography, Divider, Avatar, Form as Form$1, Radio, DatePicker, Checkbox, InputNumber, Space, Cascader, Descriptions, Row, Col, Tooltip as Tooltip$1, Collapse, List as List$1, Skeleton, Alert, Card, Upload, Switch, Table as Table$1, Popconfirm, Tabs, Image, Progress, Slider, Breadcrumb, Result as Result$1, message, Layout, Drawer, ConfigProvider, theme } from 'antd';
+import { Form as Form$1, Button, Input, Popover, Typography, Divider, Select as Select$1, Avatar, Spin, Radio, DatePicker, Checkbox, InputNumber, Modal as Modal$2, Space, Cascader, Descriptions, Row, Col, Tooltip as Tooltip$1, Collapse, List as List$1, Skeleton, Alert, Card, Upload, Switch, Table as Table$1, Popconfirm, Tabs, Image, Progress, Slider, Breadcrumb, Result as Result$1, message, Layout, Drawer, ConfigProvider, theme } from 'antd';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { observer } from 'mobx-react-lite';
 import { getLogger, DivaError, useDivaCore, useTranslation as useTranslation$1, DivaUtils } from '@crystaldesign/diva-core';
@@ -65,14 +65,14 @@ import FolderOutlined from '@ant-design/icons/FolderOutlined';
 import SettingOutlined from '@ant-design/icons/SettingOutlined';
 import PieChartOutlined from '@ant-design/icons/PieChartOutlined';
 import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
-import debounce from 'lodash/debounce';
-import { isArray } from 'lodash';
 import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 import JSONEditor from 'jsoneditor';
 import 'jsoneditor/dist/jsoneditor.css';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { MinusCircleOutlined, PlusOutlined, DownloadOutlined as DownloadOutlined$1, PlusSquareOutlined, DeleteOutlined as DeleteOutlined$1, FullscreenOutlined, FileUnknownOutlined, CloseOutlined as CloseOutlined$1, PlusCircleOutlined as PlusCircleOutlined$1, HomeOutlined as HomeOutlined$1, InboxOutlined, PushpinOutlined, PushpinFilled, ReloadOutlined as ReloadOutlined$1 } from '@ant-design/icons';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Editor } from '@tinymce/tinymce-react';
+import debounce from 'lodash/debounce';
+import { isArray } from 'lodash';
 import { stringify } from 'csv';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
@@ -4512,6 +4512,10 @@ function loadConfiguration(t, root, config, lang) {
         type: 'unixTimeStamp',
         sorter: 8,
         width: 150
+      }, {
+        title: 'variants',
+        field: 'variants',
+        hidden: true
       }],
       apiInterface: {
         read: {
@@ -4521,6 +4525,12 @@ function loadConfiguration(t, root, config, lang) {
         "delete": '${mediaService}/rooms/${id}'
       },
       rowAction: [{
+        actionType: 'Detail',
+        type: 'Form',
+        id: 'FormRoom',
+        title: t('backoffice.table.rooms.rowAction.editRoom'),
+        label: t('backoffice.table.rooms.rowAction.editRoom')
+      }, {
         actionType: 'Detail',
         type: 'Form',
         id: 'FormMergeRoom',
@@ -4538,6 +4548,12 @@ function loadConfiguration(t, root, config, lang) {
         id: 'RoomVariantList',
         title: t('backoffice.table.apikeys.rowAction.showRoomVariants'),
         label: t('backoffice.table.apikeys.rowAction.showRoomVariants')
+      }, {
+        actionType: 'Detail',
+        type: 'Form',
+        id: 'FormRoomViewpoints',
+        title: t('backoffice.table.rooms.rowAction.viewpoints'),
+        label: t('backoffice.table.rooms.rowAction.viewpoints')
       }]
     },
     TableRenderjobs: {
@@ -4622,13 +4638,6 @@ function loadConfiguration(t, root, config, lang) {
         width: 200,
         translationPrefix: 'renderjob.state',
         type: 'string'
-      }, {
-        title: t('backoffice.table.renderjobs.columns.cachedRefs'),
-        field: 'cachedRefs',
-        type: 'boolean',
-        sorter: 2,
-        width: 100,
-        align: 'center'
       }, {
         title: t('backoffice.table.renderjobs.columns.priority'),
         sorter: 2,
@@ -4903,46 +4912,6 @@ function loadConfiguration(t, root, config, lang) {
             setType: 'addToSourceValue'
           }]
         }
-      }, {
-        actionType: 'Modal',
-        id: 'CacheModal',
-        title: t('backoffice.table.renderjobs.bulkActions.CacheModal.title'),
-        label: t('backoffice.table.renderjobs.bulkActions.CacheModal.title'),
-        rule: [{
-          match: {
-            sourceField: 'state',
-            value: 12
-          }
-        }, {
-          match: {
-            sourceField: 'cachedRefs',
-            value: []
-          }
-        }],
-        errorText: t('backoffice.table.renderjobs.bulkActions.CacheModal.errorText'),
-        apiInterface: {
-          create: '${mediaService}/renderjobs/{_id}/cache'
-        }
-      }, {
-        actionType: 'Modal',
-        id: 'ClearCacheModal',
-        title: t('backoffice.table.renderjobs.bulkActions.ClearCacheModal.title'),
-        label: t('backoffice.table.renderjobs.bulkActions.ClearCacheModal.label'),
-        rule: [{
-          match: {
-            sourceField: 'state',
-            value: 12
-          }
-        }, {
-          match: {
-            sourceField: 'cachedRefs',
-            value: '$length'
-          }
-        }],
-        errorText: t('backoffice.table.renderjobs.bulkActions.ClearCacheModal.errorText'),
-        apiInterface: {
-          "delete": '${mediaService}/renderjobs/${id}/cache'
-        }
       }],
       deselectOnUpdate: false,
       copyAction: {
@@ -5032,6 +5001,12 @@ function loadConfiguration(t, root, config, lang) {
         field: '_id',
         sorter: 1,
         filter: 'advanced'
+      }, {
+        title: t('backoffice.table.renderpackages.columns.position'),
+        field: 'position',
+        sorter: 3,
+        filter: 'advanced',
+        width: 100
       }, {
         title: t('backoffice.table.renderpackages.columns.name'),
         field: 'name',
@@ -7738,6 +7713,11 @@ function loadConfiguration(t, root, config, lang) {
         label: t('backoffice.form.createorupdaterenderpackages.items.category'),
         type: 'input',
         required: true
+      }, {
+        name: 'position',
+        label: t('backoffice.form.createorupdaterenderpackages.items.position'),
+        type: 'number',
+        required: false
       }, {
         type: 'subTitle',
         name: 'Presets'
@@ -7975,6 +7955,13 @@ function loadConfiguration(t, root, config, lang) {
         label: t('backoffice.form.renderjob.items.productName'),
         type: 'input',
         readonly: true
+      }, {
+        name: 'functionType',
+        label: t('backoffice.form.renderjob.items.functionType'),
+        type: 'select',
+        mode: 'single',
+        allowClear: true,
+        values: ['PROD', 'PROD_SEC', 'PROD_CLOSE', 'PROD_MILIEU', 'SHO', 'CONFIG_INFO', 'AR_INFO', 'PROD_DETAIL', 'CAT', 'PLN', 'LOG', 'FUNC', 'COMMERCIAL', 'TPL', 'ASI', 'PLT', 'CAI', 'BAN', 'INF', 'OTH', 'ART', 'OPV']
       }, {
         name: 'priority',
         label: t('backoffice.form.renderjob.items.priority'),
@@ -8223,6 +8210,13 @@ function loadConfiguration(t, root, config, lang) {
         label: t('backoffice.form.renderjob.items.productName'),
         type: 'input',
         readonly: true
+      }, {
+        name: 'functionType',
+        label: t('backoffice.form.renderjob.items.functionType'),
+        type: 'select',
+        mode: 'single',
+        allowClear: true,
+        values: ['PROD', 'PROD_SEC', 'PROD_CLOSE', 'PROD_MILIEU', 'SHO', 'CONFIG_INFO', 'AR_INFO', 'PROD_DETAIL', 'CAT', 'PLN', 'LOG', 'FUNC', 'COMMERCIAL', 'TPL', 'ASI', 'PLT', 'CAI', 'BAN', 'INF', 'OTH', 'ART', 'OPV']
       }, {
         name: 'priority',
         label: t('backoffice.form.renderjob.items.priority'),
@@ -8375,6 +8369,13 @@ function loadConfiguration(t, root, config, lang) {
         label: t('backoffice.form.renderjob.items.productName'),
         type: 'input',
         readonly: true
+      }, {
+        name: 'functionType',
+        label: t('backoffice.form.renderjob.items.functionType'),
+        type: 'select',
+        mode: 'single',
+        allowClear: true,
+        values: ['PROD', 'PROD_SEC', 'PROD_CLOSE', 'PROD_MILIEU', 'SHO', 'CONFIG_INFO', 'AR_INFO', 'PROD_DETAIL', 'CAT', 'PLN', 'LOG', 'FUNC', 'COMMERCIAL', 'TPL', 'ASI', 'PLT', 'CAI', 'BAN', 'INF', 'OTH', 'ART', 'OPV']
       }, {
         name: 'priority',
         label: t('backoffice.form.renderjob.items.priority'),
@@ -9270,6 +9271,95 @@ function loadConfiguration(t, root, config, lang) {
         type: 'input'
       }]
     },
+    FormRoom: {
+      type: 'Form',
+      title: 'Renderjob',
+      apiInterface: {
+        update: {
+          url: '${mediaService}/rooms/{_id}/',
+          method: 'PATCH',
+          jsonPatch: true
+        }
+      },
+      items: [{
+        name: '_id',
+        label: 'ID',
+        type: 'input',
+        readonly: true
+      }, {
+        name: 'blenderVersion',
+        label: 'Blender Version',
+        type: 'input',
+        readonly: true
+      }, {
+        name: 'mainCategory',
+        label: 'Haupt Kategorie',
+        type: 'input'
+      }, {
+        name: 'name',
+        label: 'Name',
+        type: 'input'
+      }, {
+        name: 'variants',
+        label: 'variants',
+        value: 'variants',
+        type: 'array',
+        disablePushOrPop: true,
+        items: [{
+          type: 'subTitle',
+          name: 'Variante'
+        }, {
+          type: 'input',
+          name: 'name'
+        }, {
+          type: 'input',
+          name: 'description'
+        }, {
+          type: 'select',
+          name: 'compatibleColors',
+          mode: 'multiple',
+          allowClear: true,
+          values: ['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua']
+        }, {
+          type: 'checkbox',
+          name: 'default',
+          readonly: true
+        }, {
+          type: 'input',
+          name: 'sceneName'
+        }, {
+          type: 'select',
+          name: 'style',
+          mode: 'multiple',
+          allowCreate: true
+        }]
+      }]
+    },
+    FormRoomViewpoints: {
+      type: 'Form',
+      title: 'Renderjob',
+      items: [{
+        name: 'variants',
+        label: 'variants',
+        value: 'variants',
+        type: 'array',
+        disablePushOrPop: true,
+        items: [{
+          type: 'input',
+          name: 'name',
+          readonly: true
+        }, {
+          type: 'array',
+          name: 'viewpoints',
+          items: [{
+            type: 'input',
+            name: 'name',
+            readonly: true
+          }],
+          disablePushOrPop: true
+        }]
+      }]
+    },
     OrgTree: {
       type: 'OrgTree',
       expandAll: true,
@@ -13345,6 +13435,28 @@ function useFormData (_ref) {
     }));
     return _setDynamicFields.apply(this, arguments);
   }
+  function getRules(item, data) {
+    var _item$rules;
+    var rules = [];
+    if (item.required != undefined) {
+      var _hiddenRequiredDisabl;
+      rules.push({
+        required: (_hiddenRequiredDisabl = hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _hiddenRequiredDisabl === void 0 ? void 0 : _hiddenRequiredDisabl.required
+      });
+    }
+    if (((_item$rules = item.rules) === null || _item$rules === void 0 ? void 0 : _item$rules.type) == 'condition') {
+      var condition = item.rules;
+      var flatData = flatten(data);
+      if (!condition.match.op && flatData[condition.match.field] == condition.match.value) {
+        rules.push.apply(rules, _toConsumableArray(condition.rules));
+      } else if (condition.match.op == 'gt' && flatData[condition.match.field] > condition.match.value) {
+        rules.push.apply(rules, _toConsumableArray(condition.rules));
+      }
+    } else if (item.rules) {
+      rules.push.apply(rules, _toConsumableArray(item.rules));
+    }
+    return rules;
+  }
   return _objectSpread$E(_objectSpread$E({}, state), {}, {
     setUsedPreset: setUsedPreset,
     configuration: configuration,
@@ -13363,7 +13475,8 @@ function useFormData (_ref) {
     fieldErrors: fieldErrors,
     hiddenRequiredDisabled: hiddenRequiredDisabled,
     getData: getData,
-    updateHiddenRequiredDisabled: updateHiddenRequiredDisabled
+    updateHiddenRequiredDisabled: updateHiddenRequiredDisabled,
+    getRules: getRules
   });
 }
 function setFieldInObject(id, data, value) {
@@ -13403,730 +13516,139 @@ function getData(id, data) {
   }
 }
 
-function _createForOfIteratorHelper$i(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$i(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray$i(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$i(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$i(r, a) : void 0; } }
-function _arrayLikeToArray$i(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function getCombinedValues(data, pattern) {
-  if (!pattern || !data) {
-    return data;
-  }
-  var value = pattern;
-  var _iterator = _createForOfIteratorHelper$i(pattern.matchAll(/\$\{(.*?)\}/g)),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var _flatten$match$;
-      var match = _step.value;
-      value = value.replace(match[0], (_flatten$match$ = flat(data)[match[1]]) !== null && _flatten$match$ !== void 0 ? _flatten$match$ : '');
+var JsonEditor$2 = function JsonEditor(_ref) {
+  var value = _ref.value,
+    _onChange = _ref.onChange,
+    setCanSave = _ref.setCanSave,
+    data = _ref.data,
+    height = _ref.height,
+    savable = _ref.savable;
+  var container = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    counter = _useState2[0],
+    setCounter = _useState2[1];
+  var jsonEditor = useRef(null);
+  var options = {
+    mode: 'code',
+    onChange: function onChange() {
+      try {
+        var e = jsonEditor.current.get();
+        jsonEditor.current.validate();
+        _onChange === null || _onChange === void 0 || _onChange(e);
+        setCanSave(savable);
+      } catch (_unused) {
+        setCanSave(false);
+        return;
+      }
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return value;
-}
+  };
+  useEffect(function () {
+    jsonEditor.current = new JSONEditor(container.current, options);
+  }, []);
+  useEffect(function () {
+    setCanSave(savable);
+    // antd sets value after initiating once as undefined, the jsoneditor should only be set once with the initial value that gets set by antd
+    if (counter == 2) {
+      return;
+    }
+    if (!value) {
+      jsonEditor.current.set(data !== null && data !== void 0 ? data : {});
+    } else {
+      jsonEditor.current.set(value);
+    }
+    setCounter(counter + 1);
+  }, [value]);
+  return /*#__PURE__*/jsx("div", {
+    ref: container,
+    id: "jsoneditor",
+    style: {
+      height: height !== null && height !== void 0 ? height : 600
+    }
+  });
+};
 
-function _createForOfIteratorHelper$h(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$h(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray$h(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$h(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$h(r, a) : void 0; } }
-function _arrayLikeToArray$h(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function useSelectData (_ref) {
-  var data = _ref.data,
-    onChange = _ref.onChange,
+var FormList$2 = function FormList(_ref) {
+  var _item$initialValue;
+  var value = _ref.value,
+    item = _ref.item,
+    state = _ref.state,
+    data = _ref.data,
+    setCanSave = _ref.setCanSave,
     onError = _ref.onError,
-    apiInterface = _ref.apiInterface,
-    selectMapping = _ref.selectMapping,
-    mapping = _ref.mapping,
-    mode = _ref.mode,
-    allowCreate = _ref.allowCreate,
-    flow = _ref.flow,
-    translationPrefix = _ref.translationPrefix,
-    values = _ref.values,
-    wholeData = _ref.wholeData,
-    disabledConfig = _ref.disabledConfig,
-    hardOptions = _ref.hardOptions,
-    _ref$applyDefaultValu = _ref.applyDefaultValue,
-    applyDefaultValue = _ref$applyDefaultValu === void 0 ? true : _ref$applyDefaultValu,
-    defaultValue = _ref.defaultValue,
-    useFirstValueAsDefault = _ref.useFirstValueAsDefault,
-    canSetToUndefined = _ref.canSetToUndefined;
-  var root = useStore();
-  var _useTranslation = useTranslation$1(),
+    form = _ref.form,
+    root = _ref.root;
+  var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var filterServerSide = _typeof(apiInterface) == 'object' && _typeof(apiInterface.read) == 'object' && apiInterface.read.filterServerSide;
-  var _useMemo = useMemo(function () {
-      return {
-        apiHandler: new _default$d({
-          type: 'SelectOrCreate',
-          apiInterface: apiInterface
-        }, root)
-      };
-    }, []),
-    apiHandler = _useMemo.apiHandler;
-  var fetchRef = React.useRef(0);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    fetching = _React$useState2[0],
-    setFetching = _React$useState2[1];
-  var _React$useState3 = React.useState([]),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    initOptions = _React$useState4[0],
-    setInitOptions = _React$useState4[1];
-  var _React$useState5 = React.useState([]),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    options = _React$useState6[0],
-    setOptions = _React$useState6[1];
-  var _React$useState7 = React.useState([]),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    selected = _React$useState8[0],
-    setSelected = _React$useState8[1];
-  var _React$useState9 = React.useState(data),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    initalValue = _React$useState10[0],
-    setInitValue = _React$useState10[1];
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    gettingDefaultValue = _useState2[0],
-    setGettingDefaultValue = _useState2[1];
-  useEffect(function () {
-    if (!filterServerSide && apiHandler.canReadList) {
-      setFetching(true);
-      apiHandler.readList(mapping, wholeData).then(function (body) {
-        var result = body === null || body === void 0 ? void 0 : body.data.map(function (d) {
-          return {
-            label: selectMapping !== null && selectMapping !== void 0 && selectMapping.label ? getCombinedValues(d, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.label) : _typeof(d) == 'object' ? d._id : d,
-            value: selectMapping !== null && selectMapping !== void 0 && selectMapping.value ? d[selectMapping.value] : _typeof(d) == 'object' ? d._id : d,
-            data: d
-          };
-        });
-        var opts = result.sort(function (a, b) {
-          return a.label.localeCompare(b.label);
-        });
-        setOptions(opts);
-        setInitOptions(opts);
-        setFetching(false);
-      });
-    } else if (values) {
-      setOptions(_toConsumableArray(values.map(function (v) {
-        return {
-          label: v,
-          value: v,
-          data: v,
-          disabled: false
-        };
-      })));
-    } else if (hardOptions) {
-      setOptions(_toConsumableArray(hardOptions.map(function (v) {
-        return {
-          label: v.lable,
-          value: v.value,
-          data: v.data,
-          disabled: v.disabled
-        };
-      })));
-    }
-  }, [wholeData]);
-  useEffect(function () {
-    if (!canSetToUndefined && (selected == undefined || selected.length == 0)) {
-      doSetOptions();
-    }
-  }, [data]);
-  useEffect(function () {
-    if (!(selected !== null && selected !== void 0 && selected.length) && defaultValue && applyDefaultValue !== false) {
-      setSelected([defaultValue]);
-    }
-  }, [defaultValue]);
-  function doSetOptions() {
-    var newData = data !== null && data !== void 0 ? data : defaultValue;
-    if (newData != undefined && (!Array.isArray(newData) || newData.length != 0)) {
-      if (initalValue == undefined) {
-        setInitValue(newData);
-      }
-      var initData = isArray(newData) ? newData : [newData];
-      var value = initData.map(function (d) {
-        var _d$data, _d$_id, _d$selectMapping$valu, _d$data2, _ref2, _d$value, _d$data3;
-        return {
-          label: selectMapping !== null && selectMapping !== void 0 && selectMapping.label ? getCombinedValues((_d$data = d === null || d === void 0 ? void 0 : d.data) !== null && _d$data !== void 0 ? _d$data : d, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.label) : _typeof(d) == 'object' ? (_d$_id = d._id) !== null && _d$_id !== void 0 ? _d$_id : d.label : translationPrefix ? t(translationPrefix + '.' + d) : d,
-          value: selectMapping !== null && selectMapping !== void 0 && selectMapping.value ? (_d$selectMapping$valu = d === null || d === void 0 ? void 0 : d[selectMapping.value]) !== null && _d$selectMapping$valu !== void 0 ? _d$selectMapping$valu : d === null || d === void 0 || (_d$data2 = d.data) === null || _d$data2 === void 0 ? void 0 : _d$data2[selectMapping.value] : _typeof(d) == 'object' ? (_ref2 = (_d$value = d === null || d === void 0 ? void 0 : d.value) !== null && _d$value !== void 0 ? _d$value : d === null || d === void 0 || (_d$data3 = d.data) === null || _d$data3 === void 0 ? void 0 : _d$data3.value) !== null && _ref2 !== void 0 ? _ref2 : d === null || d === void 0 ? void 0 : d._id : d,
-          data: d,
-          disabled: false
-        };
-      });
-      var val = value.length == 1 ? value[0].data : value;
-      if (Array.isArray(val) && val.length) {
-        val = val.map(function (v) {
-          return v.data;
-        });
-      } else if (Array.isArray(val)) {
-        val = initData;
-      }
-      if (flow && initData.length) {
-        var _value$, _flow$value$0$value, _value$2;
-        if (mode != 'single') {
-          throw new Error('Flow is only implemented for single mode');
-        }
-        var missingFields = verifySelection((_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.value);
-        if (missingFields.length) {
-          onError === null || onError === void 0 || onError((missingFields === null || missingFields === void 0 ? void 0 : missingFields.join(', ')) + ' not set or wrong value');
-          return;
-        } else {
-          onError === null || onError === void 0 || onError('');
-        }
-        var flowData = (flow === null || flow === void 0 || (_flow$value$0$value = flow[(_value$2 = value[0]) === null || _value$2 === void 0 ? void 0 : _value$2.value]) === null || _flow$value$0$value === void 0 ? void 0 : _flow$value$0$value.map(function (opt) {
-          return {
-            label: translationPrefix ? t(translationPrefix + '.' + opt) : opt.toString(),
-            value: opt,
-            data: opt
-          };
-        })) || [];
-        var _defaultValue = initalValue !== null && initalValue !== void 0 ? initalValue : data;
-        if (!flowData.find(function (fd) {
-          return fd.value == _defaultValue;
-        })) {
-          flowData.push({
-            label: translationPrefix ? t(translationPrefix + '.' + _defaultValue) : _defaultValue.toString(),
-            value: _defaultValue,
-            data: _defaultValue
-          });
-        }
-        setOptions(_toConsumableArray(flowData));
-      }
-      onChange === null || onChange === void 0 || onChange(val, applyDefaultValue, defaultValue);
-      setSelected(value);
-    }
-  }
-  var loadOptions = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
-      var fetchId, newOptions, serverSideParams;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            fetchRef.current += 1;
-            fetchId = fetchRef.current;
-            if (!filterServerSide) {
-              _context.next = 10;
-              break;
-            }
-            setFetching(true);
-            serverSideParams = {
-              filters: selectMapping !== null && selectMapping !== void 0 && selectMapping.searchField ? selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.searchField.reduce(function (filter, field) {
-                return _objectSpread$D(_objectSpread$D({}, filter), value !== undefined ? _defineProperty({}, field.field, [value, field.filter, true]) : {});
-              }, {}) : {
-                _id: [value, 'contains']
-              },
-              pagination: {
-                pageSize: 100
-              }
-            };
-            _context.next = 7;
-            return apiHandler.readList(selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.prefilterMapping, wholeData, serverSideParams, undefined, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.prefilter).then(function (body) {
-              return (body === null || body === void 0 ? void 0 : body.data.map(function (data) {
-                return {
-                  label: selectMapping !== null && selectMapping !== void 0 && selectMapping.label ? getCombinedValues(data, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.label) : data._id,
-                  value: selectMapping !== null && selectMapping !== void 0 && selectMapping.value ? data[selectMapping.value] : data._id,
-                  disabled: false,
-                  data: data
-                };
-              })) || [];
-            });
-          case 7:
-            newOptions = _context.sent;
-            _context.next = 12;
-            break;
-          case 10:
-            newOptions = initOptions.filter(function (opt) {
-              var _value$toLocaleLowerC;
-              return opt.label.toLocaleLowerCase().includes((_value$toLocaleLowerC = value === null || value === void 0 ? void 0 : value.toLocaleLowerCase()) !== null && _value$toLocaleLowerC !== void 0 ? _value$toLocaleLowerC : '');
-            });
-            if (allowCreate && !newOptions.length) {
-              newOptions = [{
-                data: value,
-                label: value,
-                disabled: false,
-                value: value
-              }];
-            }
-          case 12:
-            if (!(fetchId !== fetchRef.current)) {
-              _context.next = 14;
-              break;
-            }
-            return _context.abrupt("return");
-          case 14:
-            setOptions(newOptions);
-            setFetching(false);
-          case 16:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function loadOptions(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  var fetch = React.useMemo(function () {
-    return debounce(loadOptions, 800);
-  }, [selectMapping, initOptions, wholeData]);
-  var verifySelection = function verifySelection(opt) {
-    if (disabledConfig == undefined) return [];
-    var _missingFields = [];
-    var _iterator = _createForOfIteratorHelper$h(disabledConfig),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var disabled = _step.value;
-        if (opt == (disabled === null || disabled === void 0 ? void 0 : disabled.value) && wholeData[disabled.onField.field] == disabled.onField.value) {
-          if (!disabled.requiredFields) {
-            return ['Job HQ', 'Job AR'];
-          }
-          disabled.requiredFields.forEach(function (fd) {
-            if (typeof fd === 'string' && (wholeData[fd] === '' || wholeData[fd] === undefined)) {
-              _missingFields.push(fd);
-            } else if (_typeof(fd) == 'object') {
-              if (!fd.value.some(function (v) {
-                return v == wholeData[fd.field];
-              })) {
-                _missingFields.push(fd.field);
-              }
-            }
-          });
-          return _missingFields;
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    return [];
-  };
-
-  //state.configuration.dependencyRule.
-  var onSelect = function onSelect(data) {
-    //! tags works without labelInValue; data = string; get's converted to option afterwards in useeffect
-    //because of a error in the typedefinition we have to cast it here
-    var newSelected = data;
-    var sel = selected;
-    var option = options.find(function (o) {
-      return o.value == newSelected.value;
-    });
-    if (option) {
-      if (mode == 'tags') {
-        throw new Error('select with options is not yet supported for mode tags');
-      }
-      if (mode == 'single') {
-        var _option$data;
-        if (flow) {
-          var _flow$option$value;
-          var missingFields = verifySelection(option.value);
-          if (missingFields.length) {
-            onError === null || onError === void 0 || onError((missingFields === null || missingFields === void 0 ? void 0 : missingFields.join(', ')) + ' not set or wrong value');
-            return;
-          } else {
-            onError === null || onError === void 0 || onError('');
-          }
-          var flowData = (flow === null || flow === void 0 || (_flow$option$value = flow[option.value]) === null || _flow$option$value === void 0 ? void 0 : _flow$option$value.map(function (opt) {
-            return {
-              label: translationPrefix ? t(translationPrefix + '.' + opt) : opt.toString(),
-              value: opt,
-              data: opt
-            };
-          })) || [];
-          var _defaultValue2 = initalValue !== null && initalValue !== void 0 ? initalValue : data;
-          if (!flowData.find(function (fd) {
-            return fd.value == _defaultValue2;
-          })) {
-            flowData.push({
-              label: translationPrefix ? t(translationPrefix + '.' + _defaultValue2) : _defaultValue2.toString(),
-              value: _defaultValue2,
-              data: _defaultValue2
-            });
-          }
-          setOptions(_toConsumableArray(flowData));
-        }
-        //if it is single mode there can always only be one selected or one new entry
-        onChange === null || onChange === void 0 || onChange((_option$data = option === null || option === void 0 ? void 0 : option.data) !== null && _option$data !== void 0 ? _option$data : option, applyDefaultValue, defaultValue);
-        setSelected([option]);
-      } else {
-        var selectedList = [].concat(_toConsumableArray(sel), [option]);
-        setSelected(selectedList);
-        onChange === null || onChange === void 0 || onChange(selectedList.map(function (s) {
-          return s.data;
-        }), applyDefaultValue, defaultValue);
-      }
-    } else {
-      if (mode == 'tags' && typeof data === 'string') {
-        onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(sel.map(function (s) {
-          return s.data;
-        })), [data]), applyDefaultValue, defaultValue);
-        setSelected([].concat(_toConsumableArray(sel), [data]));
-      } else {
-        throw new Error('select without options is not yet supported for modes other than tags');
-      }
-    }
-  };
-
-  // if useFirstValueAsDefault is true we load the options and trigger an update with setGettingDefaultValue
-  // at the 2. useEffect the options are loaded and set in state so we can set the first option
-  useEffect(function () {
-    if (useFirstValueAsDefault && !selected.length) {
-      loadOptions(undefined).then(function () {
-        return setGettingDefaultValue(true);
-      });
-    }
-  }, []);
-  useEffect(function () {
-    if (gettingDefaultValue) onSelect(options[0]);
-  }, [gettingDefaultValue]);
-  var onFocus = function onFocus() {
-    loadOptions(undefined);
-  };
-  var onRemove = function onRemove(data) {
-    //because of a error in the typedefinition we have to cast it here
-    var removed = data;
-    var sel = selected;
-    var newSelected;
-    if (removed) {
-      var index = sel.findIndex(function (s) {
-        return s.value == removed.value;
-      });
-      newSelected = _toConsumableArray(sel);
-      newSelected.splice(index, 1);
-    } else {
-      newSelected = [];
-    }
-    setSelected(newSelected);
-    if (mode == 'single') {
-      onChange === null || onChange === void 0 || onChange(undefined, applyDefaultValue, defaultValue);
-    } else {
-      onChange === null || onChange === void 0 || onChange(newSelected.map(function (s) {
-        return s.data;
-      }), applyDefaultValue, defaultValue);
-    }
-  };
-  return {
-    fetching: fetching,
-    options: options,
-    selected: selected,
-    fetch: fetch,
-    onRemove: onRemove,
-    onFocus: onFocus,
-    onSelect: onSelect
-  };
-}
-
-var css_248z$m = ".darkmode .ant-select-selection-search-input {\n  color: #fff;\n}\n";
-styleInject(css_248z$m);
-
-var SelectWrapper$1 = function SelectWrapper(_ref) {
-  var onChange = _ref.onChange,
-    onError = _ref.onError,
-    value = _ref.value,
-    apiInterface = _ref.apiInterface,
-    selectMapping = _ref.selectMapping,
-    mapping = _ref.mapping,
-    mode = _ref.mode,
-    initialValue = _ref.initialValue,
-    minWidth = _ref.minWidth,
-    allowCreate = _ref.allowCreate,
-    allowClear = _ref.allowClear,
-    search = _ref.search,
-    flow = _ref.flow,
-    translationPrefix = _ref.translationPrefix,
-    values = _ref.values,
-    disabled = _ref.disabled,
-    wholeData = _ref.wholeData,
-    disabledConfig = _ref.disabledConfig,
-    placeholder = _ref.placeholder,
-    options = _ref.options,
-    applyDefaultValue = _ref.applyDefaultValue,
-    useFirstValueAsDefault = _ref.useFirstValueAsDefault,
-    canSetToUndefined = _ref.canSetToUndefined;
-  var state = useSelectData({
-    onChange: onChange,
-    onError: onError,
-    data: value,
-    apiInterface: apiInterface,
-    selectMapping: selectMapping,
-    mapping: mapping,
-    mode: mode,
-    allowCreate: allowCreate,
-    defaultValue: initialValue,
-    flow: flow,
-    translationPrefix: translationPrefix,
-    values: values,
-    wholeData: wholeData,
-    disabledConfig: disabledConfig,
-    hardOptions: options,
-    applyDefaultValue: applyDefaultValue,
-    useFirstValueAsDefault: useFirstValueAsDefault,
-    canSetToUndefined: canSetToUndefined
-  });
-  var _useTranslation = useTranslation$1(),
-    t = _useTranslation.t;
-  var filterServerSide = _typeof(apiInterface) == 'object' && _typeof(apiInterface.read) == 'object' && apiInterface.read.filterServerSide;
-  var selected = state.selected;
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsx(Select$1, {
-      labelInValue: mode === 'tags' ? false : true,
-      style: {
-        width: '100%',
-        minWidth: minWidth
-      },
-      filterOption: false,
-      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('filter.global'),
-      allowClear: allowClear !== null && allowClear !== void 0 ? allowClear : filterServerSide,
-      showArrow: !filterServerSide || allowCreate || search,
-      mode: mode == 'single' ? undefined : mode,
-      showSearch: filterServerSide || allowCreate || search,
-      onSearch: filterServerSide || allowCreate || search ? state.fetch : undefined,
-      notFoundContent: state.fetching ? /*#__PURE__*/jsx(Spin, {
-        size: "small"
-      }) : null,
-      options: state.options,
-      onSelect: state.onSelect,
-      disabled: disabled,
-      onDeselect: state.onRemove,
-      onFocus: filterServerSide || allowCreate || search ? state.onFocus : undefined,
-      onClear: state.onRemove,
-      value: selected
-    })
-  });
-};
-var Select = observer(SelectWrapper$1, {
-  forwardRef: true
-});
-
-function ownKeys$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createForOfIteratorHelper$g(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$g(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray$g(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$g(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$g(r, a) : void 0; } }
-function _arrayLikeToArray$g(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-var Presets = function Presets(_ref) {
-  var state = _ref.state,
-    apiHandler = _ref.apiHandler,
-    form = _ref.form,
-    root = _ref.root,
-    setUsedPreset = _ref.setUsedPreset,
-    presets = _ref.presets,
-    setPresets = _ref.setPresets;
-  var Option = Select$1.Option;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isModalVisible = _useState2[0],
-    setIsModalVisible = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    newPresetName = _useState4[0],
-    setNewPresetName = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    value = _useState6[0],
-    setValue = _useState6[1];
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    presetIds = _useState8[0],
-    setPresetIds = _useState8[1];
-  var _useTranslation = useTranslation$1(),
-    t = _useTranslation.t;
-  useEffect(function () {
-    getPresets();
-  }, []);
-  var savePreset = function savePreset() {
-    if (state.selectedItems == undefined) return;
-    setIsModalVisible(false);
-    var names = [];
-    var _iterator = _createForOfIteratorHelper$g(state.selectedItems),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var item = _step.value;
-        names.push(item.name);
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    var data = _objectSpread$C(_objectSpread$C({}, form.getFieldsValue(names)), {}, {
-      newPresetName: newPresetName
-    });
-    data.dpi = parseInt(data.dpi);
-    data.organization = root.getGlobalValue('organizationId');
-    apiHandler.create({}, state.configuration.createPresetMapping, data);
-    var dt = _objectSpread$C(_objectSpread$C({}, form.getFieldsValue(names)), {}, {
-      name: newPresetName
-    });
-    setPresets({
-      data: [dt].concat(_toConsumableArray(presets.data)),
-      total: presets.total
-    });
-  };
-  var getPresets = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var res, ids, preset;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return apiHandler.readList();
-          case 2:
-            res = _context.sent;
-            ids = [];
-            for (preset in res.data) {
-              ids.push(res.data[preset]._id);
-              delete res.data[preset]._id;
-            }
-            setPresetIds(ids);
-            setPresets(res);
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function getPresets() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var onPresetSelect = function onPresetSelect(index) {
-    var preset = presets.data[index];
-    if (!state.selectedItems) return;
-    state.selectedItems.map(function (item) {
-      if (isReadonly(item, form.getFieldsValue())) {
-        delete preset[item.name];
-      }
-    });
-    form.setFieldsValue(presets.data[index]);
-    setUsedPreset({
-      used: true,
-      index: index
-    });
-  };
-  var deletePreset = function deletePreset(index) {
-    apiHandler["delete"](presetIds[index]);
-    var data = presets.data;
-    data.splice(index, 1);
-    setPresets({
-      data: data,
-      total: presets.total
-    });
-    setValue(undefined);
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Select$1, {
-      showSearch: true,
-      value: value,
-      placeholder: t('backoffice.form.presets.placeholder'),
-      optionFilterProp: "children",
-      style: {
-        width: '94%',
-        paddingLeft: 0,
-        marginBottom: 30
-      },
-      onChange: function onChange(index) {
-        setValue(index);
-        onPresetSelect(index);
-      },
-      children: presets === null || presets === void 0 ? void 0 : presets.data.map(function (dt, idx) {
-        return /*#__PURE__*/jsx(Fragment, {
-          children: /*#__PURE__*/jsxs(Option, {
-            value: idx,
-            children: [dt.name, /*#__PURE__*/jsx(Button, {
-              icon: /*#__PURE__*/jsx(DeleteOutlined, {}),
-              style: {
-                "float": 'right'
-              },
-              onClick: function onClick() {
-                return deletePreset(idx);
-              }
-            })]
-          }, idx)
-        });
-      })
-    }), /*#__PURE__*/jsx(Button, {
-      type: "primary",
-      onClick: function onClick() {
-        return setIsModalVisible(true);
-      },
-      children: "Create"
-    }), /*#__PURE__*/jsx(Modal$2, {
-      title: "Create Preset",
-      visible: isModalVisible,
-      onOk: function onOk(e) {
-        return savePreset();
-      },
-      onCancel: function onCancel() {
-        return setIsModalVisible(false);
-      },
-      children: /*#__PURE__*/jsx(Input, {
-        value: newPresetName,
-        placeholder: "Preset Name",
-        onChange: function onChange(e) {
-          setNewPresetName(e.target.value);
-        },
-        style: {
-          marginBottom: 15
-        }
-      })
-    })]
-  });
-};
-
-var JsonEditor$2 = function JsonEditor(_ref) {
-  var value = _ref.value,
-    _onChange = _ref.onChange,
-    setCanSave = _ref.setCanSave,
-    data = _ref.data,
-    height = _ref.height,
-    savable = _ref.savable;
-  var container = useRef(null);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    counter = _useState2[0],
-    setCounter = _useState2[1];
-  var jsonEditor = useRef(null);
-  var options = {
-    mode: 'code',
-    onChange: function onChange() {
-      try {
-        var e = jsonEditor.current.get();
-        jsonEditor.current.validate();
-        _onChange === null || _onChange === void 0 || _onChange(e);
-        setCanSave(savable);
-      } catch (_unused) {
-        setCanSave(false);
-        return;
-      }
-    }
-  };
-  useEffect(function () {
-    jsonEditor.current = new JSONEditor(container.current, options);
-  }, []);
-  useEffect(function () {
-    setCanSave(savable);
-    // antd sets value after initiating once as undefined, the jsoneditor should only be set once with the initial value that gets set by antd
-    if (counter == 2) {
-      return;
-    }
-    if (!value) {
-      jsonEditor.current.set(data !== null && data !== void 0 ? data : {});
-    } else {
-      jsonEditor.current.set(value);
-    }
-    setCounter(counter + 1);
-  }, [value]);
-  return /*#__PURE__*/jsx("div", {
-    ref: container,
-    id: "jsoneditor",
-    style: {
-      height: height !== null && height !== void 0 ? height : 600
+  return /*#__PURE__*/jsx(Form$1.List, {
+    name: item.name,
+    initialValue: (_item$initialValue = item.initialValue) !== null && _item$initialValue !== void 0 ? _item$initialValue : value,
+    children: function children(fields, _ref2) {
+      var add = _ref2.add,
+        remove = _ref2.remove;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [fields.map(function (field, idx) {
+          return /*#__PURE__*/jsxs("div", {
+            id: field.key.toString(),
+            style: {
+              display: 'flex'
+            },
+            children: [!item.disablePushOrPop && /*#__PURE__*/jsx(MinusCircleOutlined, {
+              onClick: function onClick() {
+                return remove(field.name);
+              }
+            }), /*#__PURE__*/jsx("div", {
+              style: {
+                flexGrow: 1
+              },
+              children: item.items.map(function (i, idx) {
+                var _state$hiddenRequired;
+                var n = [field.name].concat(_toConsumableArray(Array.isArray(i.name) ? i.name : [i.name]));
+                var hidden = !!i.hidden;
+                if (i.hidden && data) {
+                  if (typeof i.hidden === 'function') {
+                    var _data;
+                    if ((_data = data[item.name]) !== null && _data !== void 0 && _data[n[0]]) {
+                      hidden = i.hidden(data[item.name][n[0]]);
+                    } else hidden = false;
+                  }
+                }
+                if (!hidden) hidden = (_state$hiddenRequired = state.hiddenRequiredDisabled[typeof n == 'string' ? n : n.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.hidden;
+                var pathName = [].concat(_toConsumableArray(Array.isArray(item.name) ? item.name : [item.name]), _toConsumableArray(Array.isArray(n) ? n : [n]));
+                return /*#__PURE__*/jsx(Form$1.Item, {
+                  id: idx.toString(),
+                  name: n,
+                  rules: state.getRules(i, state.data),
+                  label: getLabel(i, t),
+                  valuePropName: i.type == 'checkbox' ? 'checked' : 'value',
+                  initialValue: i === null || i === void 0 ? void 0 : i.defaultValue,
+                  hasFeedback: !!state.fieldErrors[n.toString()],
+                  validateStatus: !!state.fieldErrors[n.toString()] ? 'error' : undefined,
+                  help: state.fieldErrors[n.toString()],
+                  hidden: hidden,
+                  children: getElement(i, state.data, setCanSave, state, state.onInputChanged, onError, root, form, hidden, pathName)
+                }, idx);
+              })
+            })]
+          }, field.key);
+        }), !item.disablePushOrPop && /*#__PURE__*/jsx(Form$1.Item, {
+          children: /*#__PURE__*/jsx(Button, {
+            type: "dashed",
+            onClick: function onClick() {
+              return add();
+            },
+            block: true,
+            icon: /*#__PURE__*/jsx(PlusOutlined, {}),
+            children: t('backoffice.add_field')
+          })
+        })]
+      });
     }
   });
 };
+var FormList$3 = observer(FormList$2, {
+  forwardRef: true
+});
 
 var ApiKey = function ApiKey(_ref) {
   var value = _ref.value,
@@ -14270,8 +13792,8 @@ var Result = function Result(_ref) {
 
 var success = "success-tRJ7j";
 var error = "error-MtAFB";
-var css_248z$l = ".success-tRJ7j {\n  color: #fff !important;\n  background-color: #449d44 !important;\n  border-color: #398439 !important;\n}\n\n.error-MtAFB {\n  color: #fff !important;\n  background-color: #c9302c !important;\n  border-color: #ac2925 !important;\n}\n";
-styleInject(css_248z$l);
+var css_248z$m = ".success-tRJ7j {\n  color: #fff !important;\n  background-color: #449d44 !important;\n  border-color: #398439 !important;\n}\n\n.error-MtAFB {\n  color: #fff !important;\n  background-color: #c9302c !important;\n  border-color: #ac2925 !important;\n}\n";
+styleInject(css_248z$m);
 
 var azureIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248px%22%20height%3D%2248px%22%3E%20%3ClinearGradient%20id%3D%22k8yl7~hDat~FaoWq8WjN6a%22%20x1%3D%22-1254.397%22%20x2%3D%22-1261.911%22%20y1%3D%22877.268%22%20y2%3D%22899.466%22%20gradientTransform%3D%22translate%281981.75%20-1362.063%29%20scale%281.5625%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23114a8b%22%2F%3E%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230669bc%22%2F%3E%20%3C%2FlinearGradient%3E%20%3Cpath%20fill%3D%22url%28%23k8yl7~hDat~FaoWq8WjN6a%29%22%20d%3D%22M17.634%2C6h11.305L17.203%2C40.773c-0.247%2C0.733-0.934%2C1.226-1.708%2C1.226H6.697%20c-0.994%2C0-1.8-0.806-1.8-1.8c0-0.196%2C0.032-0.39%2C0.094-0.576L15.926%2C7.227C16.173%2C6.494%2C16.86%2C6%2C17.634%2C6L17.634%2C6z%22%2F%3E%20%3Cpath%20fill%3D%22%230078d4%22%20d%3D%22M34.062%2C29.324H16.135c-0.458-0.001-0.83%2C0.371-0.831%2C0.829c0%2C0.231%2C0.095%2C0.451%2C0.264%2C0.608%20l11.52%2C10.752C27.423%2C41.826%2C27.865%2C42%2C28.324%2C42h10.151L34.062%2C29.324z%22%2F%3E%20%3ClinearGradient%20id%3D%22k8yl7~hDat~FaoWq8WjN6b%22%20x1%3D%22-1252.05%22%20x2%3D%22-1253.788%22%20y1%3D%22887.612%22%20y2%3D%22888.2%22%20gradientTransform%3D%22translate%281981.75%20-1362.063%29%20scale%281.5625%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%20%3Cstop%20offset%3D%220%22%20stop-opacity%3D%22.3%22%2F%3E%20%20%3Cstop%20offset%3D%22.071%22%20stop-opacity%3D%22.2%22%2F%3E%20%20%3Cstop%20offset%3D%22.321%22%20stop-opacity%3D%22.1%22%2F%3E%20%20%3Cstop%20offset%3D%22.623%22%20stop-opacity%3D%22.05%22%2F%3E%20%20%3Cstop%20offset%3D%221%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FlinearGradient%3E%20%3Cpath%20fill%3D%22url%28%23k8yl7~hDat~FaoWq8WjN6b%29%22%20d%3D%22M17.634%2C6c-0.783-0.003-1.476%2C0.504-1.712%2C1.25L5.005%2C39.595%20c-0.335%2C0.934%2C0.151%2C1.964%2C1.085%2C2.299C6.286%2C41.964%2C6.493%2C42%2C6.702%2C42h9.026c0.684-0.122%2C1.25-0.603%2C1.481-1.259l2.177-6.416%20l7.776%2C7.253c0.326%2C0.27%2C0.735%2C0.419%2C1.158%2C0.422h10.114l-4.436-12.676l-12.931%2C0.003L28.98%2C6H17.634z%22%2F%3E%20%3ClinearGradient%20id%3D%22k8yl7~hDat~FaoWq8WjN6c%22%20x1%3D%22-1252.952%22%20x2%3D%22-1244.704%22%20y1%3D%22876.6%22%20y2%3D%22898.575%22%20gradientTransform%3D%22translate%281981.75%20-1362.063%29%20scale%281.5625%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233ccbf4%22%2F%3E%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232892df%22%2F%3E%20%3C%2FlinearGradient%3E%20%3Cpath%20fill%3D%22url%28%23k8yl7~hDat~FaoWq8WjN6c%29%22%20d%3D%22M32.074%2C7.225C31.827%2C6.493%2C31.141%2C6%2C30.368%2C6h-12.6c0.772%2C0%2C1.459%2C0.493%2C1.705%2C1.224%20l10.935%2C32.399c0.318%2C0.942-0.188%2C1.963-1.13%2C2.281C29.093%2C41.968%2C28.899%2C42%2C28.703%2C42h12.6c0.994%2C0%2C1.8-0.806%2C1.8-1.801%20c0-0.196-0.032-0.39-0.095-0.575L32.074%2C7.225z%22%2F%3E%3C%2Fsvg%3E";
 
@@ -14337,11 +13859,11 @@ var CustomButton$1 = observer(CustomButton, {
 
 var wrapper$3 = "wrapper-GVe2h";
 var buttonGroup = "button-group-GYt-T";
-var css_248z$k = ".wrapper-GVe2h {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n\n.button-group-GYt-T {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n  margin: 0 12px;\n}\n";
-styleInject(css_248z$k);
+var css_248z$l = ".wrapper-GVe2h {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n\n.button-group-GYt-T {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n  margin: 0 12px;\n}\n";
+styleInject(css_248z$l);
 
-function ownKeys$B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SubTitle = function SubTitle(_ref) {
   var _item$orientation, _item$buttonIds;
   var item = _ref.item,
@@ -14350,7 +13872,7 @@ var SubTitle = function SubTitle(_ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsx(Divider, {
     orientation: (_item$orientation = item.orientation) !== null && _item$orientation !== void 0 ? _item$orientation : 'left',
-    style: _objectSpread$B({}, item.style),
+    style: _objectSpread$D({}, item.style),
     children: /*#__PURE__*/jsxs("div", {
       className: wrapper$3,
       children: [Array.isArray(item.name) ? t(item.name[0].toString()) : t(item.name), ((_item$buttonIds = item.buttonIds) === null || _item$buttonIds === void 0 ? void 0 : _item$buttonIds.length) && item.buttonIds.map(function (b) {
@@ -14430,9 +13952,224 @@ var InputComponent = function InputComponent(_ref) {
     }
   });
 };
-var InputComponent$1 = observer(InputComponent, {
-  forwardRef: true
-});
+var InputComponent$1 = observer(InputComponent, {
+  forwardRef: true
+});
+
+function _createForOfIteratorHelper$i(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$i(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray$i(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$i(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$i(r, a) : void 0; } }
+function _arrayLikeToArray$i(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function getCombinedValues(data, pattern) {
+  if (!pattern || !data) {
+    return data;
+  }
+  var value = pattern;
+  var _iterator = _createForOfIteratorHelper$i(pattern.matchAll(/\$\{(.*?)\}/g)),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _flatten$match$;
+      var match = _step.value;
+      value = value.replace(match[0], (_flatten$match$ = flat(data)[match[1]]) !== null && _flatten$match$ !== void 0 ? _flatten$match$ : '');
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return value;
+}
+
+var LOG$8 = getLogger('Backoffice', 'SelectSimple');
+function useSelectSimpleData (_ref) {
+  var apiInterface = _ref.apiInterface,
+    selectMapping = _ref.selectMapping,
+    apiMapping = _ref.apiMapping,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    configuredOptions = _ref.options;
+  var root = useStore();
+  var _useMemo = useMemo(function () {
+      return {
+        apiHandler: new _default$d({
+          type: 'SelectSimple',
+          apiInterface: apiInterface
+        }, root)
+      };
+    }, []),
+    apiHandler = _useMemo.apiHandler;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selected = _useState6[0],
+    setSelected = _useState6[1];
+  var currentValue = useMemo(function () {
+    if (!selected) return undefined;
+    if (Array.isArray(selected)) return selected.map(function (item) {
+      return item.value;
+    });
+    return selected.value;
+  }, [selected]);
+  useEffect(function () {
+    if (configuredOptions) {
+      if (apiHandler.canReadList) LOG$8.warn('If options are provided, apiInterface will not be used');
+      setOptions(configuredOptions);
+      setLoading(false);
+      return;
+    }
+    if (!apiHandler.canReadList) throw Error('SelectSimple: apiInterface must have readList method');
+    setLoading(true);
+    apiHandler.readList(apiMapping).then(function (data) {
+      var _data$data;
+      if (_typeof((_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data[0]) == 'object' && !selectMapping) throw Error('SelectSimple: selectMapping is required when data is an object');
+      var options = data.data.map(function (item) {
+        return parseDataEntry(item, selectMapping);
+      });
+      setOptions(options);
+    })["finally"](function () {
+      setLoading(false);
+    });
+  }, []);
+  useEffect(function () {
+    // set the selected option only after the options are loaded
+    if (value && options) {
+      LOG$8.debug('value changed', value);
+      setSelected(findByValue(value, options, selectMapping));
+    }
+  }, [value, options]);
+  var onSelectionChanged = function onSelectionChanged(value, option) {
+    setSelected(option);
+    onChange === null || onChange === void 0 || onChange(parseReturnData(option, selectMapping));
+  };
+  var onClear = function onClear() {
+    setSelected(undefined);
+    onChange === null || onChange === void 0 || onChange(undefined);
+  };
+  return {
+    loading: loading,
+    options: options,
+    value: currentValue,
+    onChange: onSelectionChanged,
+    onClear: onClear
+  };
+}
+
+/**
+ * Returns the option(s) that match the given external value
+ */
+function findByValue(value, options, selectMapping) {
+  if (!value) return undefined;
+  if (Array.isArray(value)) return value.map(function (item) {
+    return findByValue(item, options, selectMapping);
+  });
+  // if the externalValue is value we can compare it directly, otherwise we have to parse both option.data and value with the selectMapping.value
+  var option = options.find(function (option) {
+    return (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? option.value == value : getCombinedValues(option.data, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.value) == getCombinedValues(value, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.value);
+  });
+  if (!option) {
+    LOG$8.debug('findByValue: option not found, add dummy option for current value', value, options);
+    //TODO: if we and server side filtering, the dummy option must be handled differently
+    option = {
+      label: (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? value : getCombinedValues(value, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.label),
+      value: (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? value : getCombinedValues(value, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.value),
+      data: value,
+      isDummy: true
+    };
+  }
+  return option;
+}
+
+/**
+ * Returns an option entry based on the selectMapping configuration
+ */
+function parseDataEntry(item, selectMapping) {
+  return {
+    label: selectMapping ? getCombinedValues(item, selectMapping.label) : item,
+    value: selectMapping ? getCombinedValues(item, selectMapping.value) : item,
+    data: item
+  };
+}
+
+/**
+ * Returns the data of the selected option(s) based on the selectMapping configuration
+ */
+function parseReturnData(options, selectMapping) {
+  if (Array.isArray(options)) return options.map(function (option) {
+    return parseReturnData(option, selectMapping);
+  });
+  return (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? options.value : options.data;
+}
+
+var _excluded$3 = ["apiInterface", "selectMapping", "apiMapping", "onChange", "value", "search", "options"];
+function ownKeys$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SelectWrapper$1 = function SelectWrapper(_ref) {
+  var apiInterface = _ref.apiInterface,
+    selectMapping = _ref.selectMapping,
+    apiMapping = _ref.apiMapping,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    search = _ref.search,
+    options = _ref.options,
+    selectProps = _objectWithoutProperties(_ref, _excluded$3);
+  var state = useSelectSimpleData({
+    apiInterface: apiInterface,
+    selectMapping: selectMapping,
+    apiMapping: apiMapping,
+    onChange: onChange,
+    value: value,
+    type: 'SelectSimple',
+    options: options
+  });
+  return /*#__PURE__*/jsx(Select$1, _objectSpread$C(_objectSpread$C({}, selectProps), {}, {
+    showSearch: search,
+    loading: state.loading,
+    options: state.options,
+    value: state.value,
+    onChange: state.onChange,
+    onClear: state.onClear,
+    filterOption: filterOption
+  }));
+};
+var SimpleSelect = observer(SelectWrapper$1, {
+  forwardRef: true
+});
+var filterOption = function filterOption(input, option) {
+  var _option$label;
+  return ((_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : '').toLowerCase().includes(input.toLowerCase());
+};
+
+var RichTextEditor = function RichTextEditor(_ref) {
+  var initValue = _ref.initValue,
+    onChange = _ref.onChange,
+    name = _ref.name;
+  var val = useRef(initValue);
+  return /*#__PURE__*/jsx(Editor, {
+    apiKey: "m7260i0wfvki2sqkam6mfogklidxr229sk7499yjty92q8ww",
+    onEditorChange: function onEditorChange(val, e) {
+      onChange === null || onChange === void 0 || onChange(name, val);
+    },
+    initialValue: val.current,
+    textareaName: "text",
+    init: {
+      height: 500,
+      menubar: false,
+      plugins: ['advlist autolink lists link table paste'],
+      contextmenu: '',
+      resize: false,
+      statusbar: false,
+      toolbar: 'undo redo | formatselect | ' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | table ',
+      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+    }
+  });
+};
 
 function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -15019,8 +14756,8 @@ var _default = /*#__PURE__*/function (_ApiHandler) {
   }]);
 }(_default$d);
 
-function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 getLogger('Backoffice', 'SelectClientRelationCatalog');
 function useSelectClientRelationCatalog (_ref) {
   var onSelectedCatalog = _ref.onSelectedCatalog,
@@ -15189,7 +14926,7 @@ function useSelectClientRelationCatalog (_ref) {
           case 22:
             supplierData = _context2.sent;
           case 23:
-            onSelectedSupplier === null || onSelectedSupplier === void 0 || onSelectedSupplier(_objectSpread$A(_objectSpread$A({}, _selectedSupplier), {}, {
+            onSelectedSupplier === null || onSelectedSupplier === void 0 || onSelectedSupplier(_objectSpread$B(_objectSpread$B({}, _selectedSupplier), {}, {
               supplierGuid: catalogList === null || catalogList === void 0 || (_catalogList$ = catalogList[0]) === null || _catalogList$ === void 0 ? void 0 : _catalogList$.Subfolder
             }), supplierData);
             if (catalogId && catalogList.find(function (c) {
@@ -15255,8 +14992,8 @@ var customSelect = "custom-select-ESUJX";
 var customSelectOption = "custom-select-option-dUA7N";
 var avatarWrapper = "avatar-wrapper-Vg-xe";
 var selectTextWrapper = "select-text-wrapper-hPSZW";
-var css_248z$j = ".custom-select-ESUJX {\n  width: 300px;\n}\n\n.custom-select-option-dUA7N {\n  margin: 0px 12px;\n  padding: 5px 0px;\n  border-bottom: 1px solid #ddd;\n}\n\n.avatar-wrapper-Vg-xe {\n  margin-right: 5px;\n  height: 100%;\n  width: 24px;\n  float: left;\n  position: relative;\n}\n\n.avatar-wrapper-Vg-xe > span {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.select-text-wrapper-hPSZW {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: normal;\n  width: calc(100% - 29px);\n}\n";
-styleInject(css_248z$j);
+var css_248z$k = ".custom-select-ESUJX {\n  width: 300px;\n}\n\n.custom-select-option-dUA7N {\n  margin: 0px 12px;\n  padding: 5px 0px;\n  border-bottom: 1px solid #ddd;\n}\n\n.avatar-wrapper-Vg-xe {\n  margin-right: 5px;\n  height: 100%;\n  width: 24px;\n  float: left;\n  position: relative;\n}\n\n.avatar-wrapper-Vg-xe > span {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.select-text-wrapper-hPSZW {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: normal;\n  width: calc(100% - 29px);\n}\n";
+styleInject(css_248z$k);
 
 var Selector = function Selector(_ref) {
   var items = _ref.items,
@@ -15407,202 +15144,915 @@ function SelectClientRelationCatalog (_ref) {
   });
 }
 
-var LOG$8 = getLogger('Backoffice', 'SelectSimple');
-function useSelectSimpleData (_ref) {
-  var apiInterface = _ref.apiInterface,
-    selectMapping = _ref.selectMapping,
-    apiMapping = _ref.apiMapping,
-    onChange = _ref.onChange,
-    value = _ref.value,
-    configuredOptions = _ref.options;
-  var root = useStore();
-  var _useMemo = useMemo(function () {
-      return {
-        apiHandler: new _default$d({
-          type: 'SelectSimple',
-          apiInterface: apiInterface
-        }, root)
-      };
-    }, []),
-    apiHandler = _useMemo.apiHandler;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    options = _useState4[0],
-    setOptions = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selected = _useState6[0],
-    setSelected = _useState6[1];
-  var currentValue = useMemo(function () {
-    if (!selected) return undefined;
-    if (Array.isArray(selected)) return selected.map(function (item) {
-      return item.value;
+function _createForOfIteratorHelper$h(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$h(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray$h(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$h(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$h(r, a) : void 0; } }
+function _arrayLikeToArray$h(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function useSelectData (_ref) {
+  var data = _ref.data,
+    onChange = _ref.onChange,
+    onError = _ref.onError,
+    apiInterface = _ref.apiInterface,
+    selectMapping = _ref.selectMapping,
+    mapping = _ref.mapping,
+    mode = _ref.mode,
+    allowCreate = _ref.allowCreate,
+    flow = _ref.flow,
+    translationPrefix = _ref.translationPrefix,
+    values = _ref.values,
+    wholeData = _ref.wholeData,
+    disabledConfig = _ref.disabledConfig,
+    hardOptions = _ref.hardOptions,
+    _ref$applyDefaultValu = _ref.applyDefaultValue,
+    applyDefaultValue = _ref$applyDefaultValu === void 0 ? true : _ref$applyDefaultValu,
+    defaultValue = _ref.defaultValue,
+    useFirstValueAsDefault = _ref.useFirstValueAsDefault,
+    canSetToUndefined = _ref.canSetToUndefined;
+  var root = useStore();
+  var _useTranslation = useTranslation$1(),
+    t = _useTranslation.t;
+  var filterServerSide = _typeof(apiInterface) == 'object' && _typeof(apiInterface.read) == 'object' && apiInterface.read.filterServerSide;
+  var _useMemo = useMemo(function () {
+      return {
+        apiHandler: new _default$d({
+          type: 'SelectOrCreate',
+          apiInterface: apiInterface
+        }, root)
+      };
+    }, []),
+    apiHandler = _useMemo.apiHandler;
+  var fetchRef = React.useRef(0);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    fetching = _React$useState2[0],
+    setFetching = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    initOptions = _React$useState4[0],
+    setInitOptions = _React$useState4[1];
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    options = _React$useState6[0],
+    setOptions = _React$useState6[1];
+  var _React$useState7 = React.useState([]),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    selected = _React$useState8[0],
+    setSelected = _React$useState8[1];
+  var _React$useState9 = React.useState(data),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    initalValue = _React$useState10[0],
+    setInitValue = _React$useState10[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    gettingDefaultValue = _useState2[0],
+    setGettingDefaultValue = _useState2[1];
+  useEffect(function () {
+    if (!filterServerSide && apiHandler.canReadList) {
+      setFetching(true);
+      apiHandler.readList(mapping, wholeData).then(function (body) {
+        var result = body === null || body === void 0 ? void 0 : body.data.map(function (d) {
+          return {
+            label: selectMapping !== null && selectMapping !== void 0 && selectMapping.label ? getCombinedValues(d, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.label) : _typeof(d) == 'object' ? d._id : d,
+            value: selectMapping !== null && selectMapping !== void 0 && selectMapping.value ? d[selectMapping.value] : _typeof(d) == 'object' ? d._id : d,
+            data: d
+          };
+        });
+        var opts = result.sort(function (a, b) {
+          return a.label.localeCompare(b.label);
+        });
+        setOptions(opts);
+        setInitOptions(opts);
+        setFetching(false);
+      });
+    } else if (values) {
+      setOptions(_toConsumableArray(values.map(function (v) {
+        return {
+          label: v,
+          value: v,
+          data: v,
+          disabled: false
+        };
+      })));
+    } else if (hardOptions) {
+      setOptions(_toConsumableArray(hardOptions.map(function (v) {
+        return {
+          label: v.lable,
+          value: v.value,
+          data: v.data,
+          disabled: v.disabled
+        };
+      })));
+    }
+  }, [wholeData]);
+  useEffect(function () {
+    if (!canSetToUndefined && (selected == undefined || selected.length == 0)) {
+      doSetOptions();
+    }
+  }, [data]);
+  useEffect(function () {
+    if (!(selected !== null && selected !== void 0 && selected.length) && defaultValue && applyDefaultValue !== false) {
+      setSelected([defaultValue]);
+    }
+  }, [defaultValue]);
+  function doSetOptions() {
+    var newData = data !== null && data !== void 0 ? data : defaultValue;
+    if (newData != undefined && (!Array.isArray(newData) || newData.length != 0)) {
+      if (initalValue == undefined) {
+        setInitValue(newData);
+      }
+      var initData = isArray(newData) ? newData : [newData];
+      var value = initData.map(function (d) {
+        var _d$data, _d$_id, _d$selectMapping$valu, _d$data2, _ref2, _d$value, _d$data3;
+        return {
+          label: selectMapping !== null && selectMapping !== void 0 && selectMapping.label ? getCombinedValues((_d$data = d === null || d === void 0 ? void 0 : d.data) !== null && _d$data !== void 0 ? _d$data : d, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.label) : _typeof(d) == 'object' ? (_d$_id = d._id) !== null && _d$_id !== void 0 ? _d$_id : d.label : translationPrefix ? t(translationPrefix + '.' + d) : d,
+          value: selectMapping !== null && selectMapping !== void 0 && selectMapping.value ? (_d$selectMapping$valu = d === null || d === void 0 ? void 0 : d[selectMapping.value]) !== null && _d$selectMapping$valu !== void 0 ? _d$selectMapping$valu : d === null || d === void 0 || (_d$data2 = d.data) === null || _d$data2 === void 0 ? void 0 : _d$data2[selectMapping.value] : _typeof(d) == 'object' ? (_ref2 = (_d$value = d === null || d === void 0 ? void 0 : d.value) !== null && _d$value !== void 0 ? _d$value : d === null || d === void 0 || (_d$data3 = d.data) === null || _d$data3 === void 0 ? void 0 : _d$data3.value) !== null && _ref2 !== void 0 ? _ref2 : d === null || d === void 0 ? void 0 : d._id : d,
+          data: d,
+          disabled: false
+        };
+      });
+      var val = value.length == 1 ? value[0].data : value;
+      if (Array.isArray(val) && val.length) {
+        val = val.map(function (v) {
+          return v.data;
+        });
+      } else if (Array.isArray(val)) {
+        val = initData;
+      }
+      if (flow && initData.length) {
+        var _value$, _flow$value$0$value, _value$2;
+        if (mode != 'single') {
+          throw new Error('Flow is only implemented for single mode');
+        }
+        var missingFields = verifySelection((_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.value);
+        if (missingFields.length) {
+          onError === null || onError === void 0 || onError((missingFields === null || missingFields === void 0 ? void 0 : missingFields.join(', ')) + ' not set or wrong value');
+          return;
+        } else {
+          onError === null || onError === void 0 || onError('');
+        }
+        var flowData = (flow === null || flow === void 0 || (_flow$value$0$value = flow[(_value$2 = value[0]) === null || _value$2 === void 0 ? void 0 : _value$2.value]) === null || _flow$value$0$value === void 0 ? void 0 : _flow$value$0$value.map(function (opt) {
+          return {
+            label: translationPrefix ? t(translationPrefix + '.' + opt) : opt.toString(),
+            value: opt,
+            data: opt
+          };
+        })) || [];
+        var _defaultValue = initalValue !== null && initalValue !== void 0 ? initalValue : data;
+        if (!flowData.find(function (fd) {
+          return fd.value == _defaultValue;
+        })) {
+          flowData.push({
+            label: translationPrefix ? t(translationPrefix + '.' + _defaultValue) : _defaultValue.toString(),
+            value: _defaultValue,
+            data: _defaultValue
+          });
+        }
+        setOptions(_toConsumableArray(flowData));
+      }
+      onChange === null || onChange === void 0 || onChange(val, applyDefaultValue, defaultValue);
+      setSelected(value);
+    }
+  }
+  var loadOptions = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
+      var fetchId, newOptions, serverSideParams;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            fetchRef.current += 1;
+            fetchId = fetchRef.current;
+            if (!filterServerSide) {
+              _context.next = 10;
+              break;
+            }
+            setFetching(true);
+            serverSideParams = {
+              filters: selectMapping !== null && selectMapping !== void 0 && selectMapping.searchField ? selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.searchField.reduce(function (filter, field) {
+                return _objectSpread$A(_objectSpread$A({}, filter), value !== undefined ? _defineProperty({}, field.field, [value, field.filter, true]) : {});
+              }, {}) : {
+                _id: [value, 'contains']
+              },
+              pagination: {
+                pageSize: 100
+              }
+            };
+            _context.next = 7;
+            return apiHandler.readList(selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.prefilterMapping, wholeData, serverSideParams, undefined, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.prefilter).then(function (body) {
+              return (body === null || body === void 0 ? void 0 : body.data.map(function (data) {
+                return {
+                  label: selectMapping !== null && selectMapping !== void 0 && selectMapping.label ? getCombinedValues(data, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.label) : data._id,
+                  value: selectMapping !== null && selectMapping !== void 0 && selectMapping.value ? data[selectMapping.value] : data._id,
+                  disabled: false,
+                  data: data
+                };
+              })) || [];
+            });
+          case 7:
+            newOptions = _context.sent;
+            _context.next = 12;
+            break;
+          case 10:
+            newOptions = initOptions.filter(function (opt) {
+              var _value$toLocaleLowerC;
+              return opt.label.toLocaleLowerCase().includes((_value$toLocaleLowerC = value === null || value === void 0 ? void 0 : value.toLocaleLowerCase()) !== null && _value$toLocaleLowerC !== void 0 ? _value$toLocaleLowerC : '');
+            });
+            if (allowCreate && !newOptions.length) {
+              newOptions = [{
+                data: value,
+                label: value,
+                disabled: false,
+                value: value
+              }];
+            }
+          case 12:
+            if (!(fetchId !== fetchRef.current)) {
+              _context.next = 14;
+              break;
+            }
+            return _context.abrupt("return");
+          case 14:
+            setOptions(newOptions);
+            setFetching(false);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function loadOptions(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var fetch = React.useMemo(function () {
+    return debounce(loadOptions, 800);
+  }, [selectMapping, initOptions, wholeData]);
+  var verifySelection = function verifySelection(opt) {
+    if (disabledConfig == undefined) return [];
+    var _missingFields = [];
+    var _iterator = _createForOfIteratorHelper$h(disabledConfig),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var disabled = _step.value;
+        if (opt == (disabled === null || disabled === void 0 ? void 0 : disabled.value) && wholeData[disabled.onField.field] == disabled.onField.value) {
+          if (!disabled.requiredFields) {
+            return ['Job HQ', 'Job AR'];
+          }
+          disabled.requiredFields.forEach(function (fd) {
+            if (typeof fd === 'string' && (wholeData[fd] === '' || wholeData[fd] === undefined)) {
+              _missingFields.push(fd);
+            } else if (_typeof(fd) == 'object') {
+              if (!fd.value.some(function (v) {
+                return v == wholeData[fd.field];
+              })) {
+                _missingFields.push(fd.field);
+              }
+            }
+          });
+          return _missingFields;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return [];
+  };
+
+  //state.configuration.dependencyRule.
+  var onSelect = function onSelect(data) {
+    //! tags works without labelInValue; data = string; get's converted to option afterwards in useeffect
+    //because of a error in the typedefinition we have to cast it here
+    var newSelected = data;
+    var sel = selected;
+    var option = options.find(function (o) {
+      return o.value == newSelected.value;
     });
-    return selected.value;
-  }, [selected]);
-  useEffect(function () {
-    if (configuredOptions) {
-      if (apiHandler.canReadList) LOG$8.warn('If options are provided, apiInterface will not be used');
-      setOptions(configuredOptions);
-      setLoading(false);
-      return;
+    if (option) {
+      if (mode == 'tags') {
+        throw new Error('select with options is not yet supported for mode tags');
+      }
+      if (mode == 'single') {
+        var _option$data;
+        if (flow) {
+          var _flow$option$value;
+          var missingFields = verifySelection(option.value);
+          if (missingFields.length) {
+            onError === null || onError === void 0 || onError((missingFields === null || missingFields === void 0 ? void 0 : missingFields.join(', ')) + ' not set or wrong value');
+            return;
+          } else {
+            onError === null || onError === void 0 || onError('');
+          }
+          var flowData = (flow === null || flow === void 0 || (_flow$option$value = flow[option.value]) === null || _flow$option$value === void 0 ? void 0 : _flow$option$value.map(function (opt) {
+            return {
+              label: translationPrefix ? t(translationPrefix + '.' + opt) : opt.toString(),
+              value: opt,
+              data: opt
+            };
+          })) || [];
+          var _defaultValue2 = initalValue !== null && initalValue !== void 0 ? initalValue : data;
+          if (!flowData.find(function (fd) {
+            return fd.value == _defaultValue2;
+          })) {
+            flowData.push({
+              label: translationPrefix ? t(translationPrefix + '.' + _defaultValue2) : _defaultValue2.toString(),
+              value: _defaultValue2,
+              data: _defaultValue2
+            });
+          }
+          setOptions(_toConsumableArray(flowData));
+        }
+        //if it is single mode there can always only be one selected or one new entry
+        onChange === null || onChange === void 0 || onChange((_option$data = option === null || option === void 0 ? void 0 : option.data) !== null && _option$data !== void 0 ? _option$data : option, applyDefaultValue, defaultValue);
+        setSelected([option]);
+      } else {
+        var selectedList = [].concat(_toConsumableArray(sel), [option]);
+        setSelected(selectedList);
+        onChange === null || onChange === void 0 || onChange(selectedList.map(function (s) {
+          return s.data;
+        }), applyDefaultValue, defaultValue);
+      }
+    } else {
+      if (mode == 'tags' && typeof data === 'string') {
+        onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(sel.map(function (s) {
+          return s.data;
+        })), [data]), applyDefaultValue, defaultValue);
+        setSelected([].concat(_toConsumableArray(sel), [data]));
+      } else {
+        throw new Error('select without options is not yet supported for modes other than tags');
+      }
     }
-    if (!apiHandler.canReadList) throw Error('SelectSimple: apiInterface must have readList method');
-    setLoading(true);
-    apiHandler.readList(apiMapping).then(function (data) {
-      var _data$data;
-      if (_typeof((_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data[0]) == 'object' && !selectMapping) throw Error('SelectSimple: selectMapping is required when data is an object');
-      var options = data.data.map(function (item) {
-        return parseDataEntry(item, selectMapping);
+  };
+
+  // if useFirstValueAsDefault is true we load the options and trigger an update with setGettingDefaultValue
+  // at the 2. useEffect the options are loaded and set in state so we can set the first option
+  useEffect(function () {
+    if (useFirstValueAsDefault && !selected.length) {
+      loadOptions(undefined).then(function () {
+        return setGettingDefaultValue(true);
       });
-      setOptions(options);
-    })["finally"](function () {
-      setLoading(false);
-    });
+    }
   }, []);
   useEffect(function () {
-    // set the selected option only after the options are loaded
-    if (value && options) {
-      LOG$8.debug('value changed', value);
-      setSelected(findByValue(value, options, selectMapping));
-    }
-  }, [value, options]);
-  var onSelectionChanged = function onSelectionChanged(value, option) {
-    setSelected(option);
-    onChange === null || onChange === void 0 || onChange(parseReturnData(option, selectMapping));
+    if (gettingDefaultValue) onSelect(options[0]);
+  }, [gettingDefaultValue]);
+  var onFocus = function onFocus() {
+    loadOptions(undefined);
   };
-  var onClear = function onClear() {
-    setSelected(undefined);
-    onChange === null || onChange === void 0 || onChange(undefined);
+  var onRemove = function onRemove(data) {
+    //because of a error in the typedefinition we have to cast it here
+    var removed = data;
+    var sel = selected;
+    var newSelected;
+    if (removed) {
+      var index = sel.findIndex(function (s) {
+        return s.value == removed.value;
+      });
+      newSelected = _toConsumableArray(sel);
+      newSelected.splice(index, 1);
+    } else {
+      newSelected = [];
+    }
+    setSelected(newSelected);
+    if (mode == 'single') {
+      onChange === null || onChange === void 0 || onChange(undefined, applyDefaultValue, defaultValue);
+    } else {
+      onChange === null || onChange === void 0 || onChange(newSelected.map(function (s) {
+        return s.data;
+      }), applyDefaultValue, defaultValue);
+    }
   };
   return {
-    loading: loading,
+    fetching: fetching,
     options: options,
-    value: currentValue,
-    onChange: onSelectionChanged,
-    onClear: onClear
-  };
-}
-
-/**
- * Returns the option(s) that match the given external value
- */
-function findByValue(value, options, selectMapping) {
-  if (!value) return undefined;
-  if (Array.isArray(value)) return value.map(function (item) {
-    return findByValue(item, options, selectMapping);
-  });
-  // if the externalValue is value we can compare it directly, otherwise we have to parse both option.data and value with the selectMapping.value
-  var option = options.find(function (option) {
-    return (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? option.value == value : getCombinedValues(option.data, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.value) == getCombinedValues(value, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.value);
-  });
-  if (!option) {
-    LOG$8.debug('findByValue: option not found, add dummy option for current value', value, options);
-    //TODO: if we and server side filtering, the dummy option must be handled differently
-    option = {
-      label: (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? value : getCombinedValues(value, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.label),
-      value: (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? value : getCombinedValues(value, selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.value),
-      data: value,
-      isDummy: true
-    };
-  }
-  return option;
-}
-
-/**
- * Returns an option entry based on the selectMapping configuration
- */
-function parseDataEntry(item, selectMapping) {
-  return {
-    label: selectMapping ? getCombinedValues(item, selectMapping.label) : item,
-    value: selectMapping ? getCombinedValues(item, selectMapping.value) : item,
-    data: item
+    selected: selected,
+    fetch: fetch,
+    onRemove: onRemove,
+    onFocus: onFocus,
+    onSelect: onSelect
   };
 }
 
-/**
- * Returns the data of the selected option(s) based on the selectMapping configuration
- */
-function parseReturnData(options, selectMapping) {
-  if (Array.isArray(options)) return options.map(function (option) {
-    return parseReturnData(option, selectMapping);
-  });
-  return (selectMapping === null || selectMapping === void 0 ? void 0 : selectMapping.externalValue) == 'value' ? options.value : options.data;
-}
+var css_248z$j = ".darkmode .ant-select-selection-search-input {\n  color: #fff;\n}\n";
+styleInject(css_248z$j);
 
-var _excluded$3 = ["apiInterface", "selectMapping", "apiMapping", "onChange", "value", "search", "options"];
-function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SelectWrapper = function SelectWrapper(_ref) {
-  var apiInterface = _ref.apiInterface,
-    selectMapping = _ref.selectMapping,
-    apiMapping = _ref.apiMapping,
-    onChange = _ref.onChange,
+  var onChange = _ref.onChange,
+    onError = _ref.onError,
     value = _ref.value,
+    apiInterface = _ref.apiInterface,
+    selectMapping = _ref.selectMapping,
+    mapping = _ref.mapping,
+    mode = _ref.mode,
+    initialValue = _ref.initialValue,
+    minWidth = _ref.minWidth,
+    allowCreate = _ref.allowCreate,
+    allowClear = _ref.allowClear,
     search = _ref.search,
+    flow = _ref.flow,
+    translationPrefix = _ref.translationPrefix,
+    values = _ref.values,
+    disabled = _ref.disabled,
+    wholeData = _ref.wholeData,
+    disabledConfig = _ref.disabledConfig,
+    placeholder = _ref.placeholder,
     options = _ref.options,
-    selectProps = _objectWithoutProperties(_ref, _excluded$3);
-  var state = useSelectSimpleData({
+    applyDefaultValue = _ref.applyDefaultValue,
+    useFirstValueAsDefault = _ref.useFirstValueAsDefault,
+    canSetToUndefined = _ref.canSetToUndefined;
+  var state = useSelectData({
+    onChange: onChange,
+    onError: onError,
+    data: value,
     apiInterface: apiInterface,
     selectMapping: selectMapping,
-    apiMapping: apiMapping,
-    onChange: onChange,
-    value: value,
-    type: 'SelectSimple',
-    options: options
+    mapping: mapping,
+    mode: mode,
+    allowCreate: allowCreate,
+    defaultValue: initialValue,
+    flow: flow,
+    translationPrefix: translationPrefix,
+    values: values,
+    wholeData: wholeData,
+    disabledConfig: disabledConfig,
+    hardOptions: options,
+    applyDefaultValue: applyDefaultValue,
+    useFirstValueAsDefault: useFirstValueAsDefault,
+    canSetToUndefined: canSetToUndefined
   });
-  return /*#__PURE__*/jsx(Select$1, _objectSpread$z(_objectSpread$z({}, selectProps), {}, {
-    showSearch: search,
-    loading: state.loading,
+  var _useTranslation = useTranslation$1(),
+    t = _useTranslation.t;
+  var filterServerSide = _typeof(apiInterface) == 'object' && _typeof(apiInterface.read) == 'object' && apiInterface.read.filterServerSide;
+  var selected = state.selected;
+  return /*#__PURE__*/jsx(Select$1, {
+    labelInValue: mode === 'tags' ? false : true,
+    style: {
+      width: '100%',
+      minWidth: minWidth
+    },
+    filterOption: false,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('filter.global'),
+    allowClear: allowClear !== null && allowClear !== void 0 ? allowClear : filterServerSide,
+    showArrow: !filterServerSide || allowCreate || search,
+    mode: mode == 'single' ? undefined : mode,
+    showSearch: filterServerSide || allowCreate || search,
+    onSearch: filterServerSide || allowCreate || search ? state.fetch : undefined,
+    notFoundContent: state.fetching ? /*#__PURE__*/jsx(Spin, {
+      size: "small"
+    }) : null,
     options: state.options,
-    value: state.value,
-    onChange: state.onChange,
-    onClear: state.onClear,
-    filterOption: filterOption
-  }));
+    onSelect: state.onSelect,
+    disabled: disabled,
+    onDeselect: state.onRemove,
+    onFocus: filterServerSide || allowCreate || search ? state.onFocus : undefined,
+    onClear: state.onRemove,
+    value: selected
+  });
 };
-var SimpleSelect = observer(SelectWrapper, {
+var Select = observer(SelectWrapper, {
   forwardRef: true
 });
-var filterOption = function filterOption(input, option) {
-  var _option$label;
-  return ((_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : '').toLowerCase().includes(input.toLowerCase());
-};
 
-var RichTextEditor = function RichTextEditor(_ref) {
-  var initValue = _ref.initValue,
-    onChange = _ref.onChange,
-    name = _ref.name;
-  var val = useRef(initValue);
-  return /*#__PURE__*/jsx(Editor, {
-    apiKey: "m7260i0wfvki2sqkam6mfogklidxr229sk7499yjty92q8ww",
-    onEditorChange: function onEditorChange(val, e) {
-      onChange === null || onChange === void 0 || onChange(name, val);
-    },
-    initialValue: val.current,
-    textareaName: "text",
-    init: {
-      height: 500,
-      menubar: false,
-      plugins: ['advlist autolink lists link table paste'],
-      contextmenu: '',
-      resize: false,
-      statusbar: false,
-      toolbar: 'undo redo | formatselect | ' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | table ',
-      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+function _createForOfIteratorHelper$g(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$g(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray$g(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$g(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$g(r, a) : void 0; } }
+function _arrayLikeToArray$g(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function getElement(item, data, setCanSave, state, _onChange, _onError, root, form, hidden, overwrittenName) {
+  var _isReadonly, _state$hiddenRequired;
+  if (hidden) return /*#__PURE__*/jsx(Fragment, {});
+  var name = overwrittenName || item.name;
+  var disabled = (_isReadonly = isReadonly(item, data)) !== null && _isReadonly !== void 0 ? _isReadonly : (_state$hiddenRequired = state.hiddenRequiredDisabled[typeof name == 'string' ? name : name.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.disabled;
+  switch (item.type) {
+    case 'select':
+      return /*#__PURE__*/jsx(Select, {
+        initialValue: item.defaultValue,
+        apiInterface: item.apiInterface,
+        mode: item.mode,
+        useFirstValueAsDefault: item.useFirstValueAsDefault,
+        canSetToUndefined: item.canSetToUndefined,
+        selectMapping: item.selectMapping,
+        mapping: item.mapping,
+        allowCreate: item.allowCreate,
+        flow: item.flow,
+        translationPrefix: item.translationPrefix,
+        values: item.values,
+        search: item.search,
+        disabled: disabled,
+        wholeData: state.data,
+        disabledConfig: item === null || item === void 0 ? void 0 : item['disabledSelection'],
+        onChange: function onChange(value) {
+          _onChange(name, item.valueField ? value[item.valueField] : value);
+        },
+        allowClear: item.allowClear,
+        placeholder: item.placeholder,
+        onError: function onError(text) {
+          return _onError(text, text);
+        }
+      });
+    case 'selectSimple':
+      return /*#__PURE__*/jsx(SimpleSelect, _objectSpread$z(_objectSpread$z({}, item), {}, {
+        disabled: disabled,
+        onChange: function onChange(value) {
+          _onChange(name, value);
+        }
+      }));
+    case 'textarea':
+      return /*#__PURE__*/jsx(Input.TextArea, {
+        disabled: disabled,
+        autoSize: {
+          minRows: 2,
+          maxRows: 5
+        },
+        defaultValue: item.value,
+        placeholder: item.placeholder,
+        onChange: function onChange(e) {
+          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(name, e.target.value);
+        }
+      });
+    case 'input':
+    case 'password':
+    case undefined:
+      if (item.syncDataWithUserInput) {
+        return /*#__PURE__*/jsx(InputComponent$1, {
+          item: item,
+          data: data,
+          value: item.value,
+          onChange: state.onInputChanged
+        });
+      }
+      if (item.type == 'password') return /*#__PURE__*/jsx(Input.Password, {
+        addonBefore: item.prefix,
+        addonAfter: item.suffix,
+        disabled: disabled,
+        value: item.value,
+        placeholder: item.placeholder,
+        autoComplete: "new-password"
+      });
+      return /*#__PURE__*/jsx(Input, {
+        addonBefore: item.prefix,
+        addonAfter: item.suffix,
+        disabled: disabled,
+        value: item.value,
+        placeholder: item.placeholder
+      });
+    case 'detailaction':
+      return /*#__PURE__*/jsx(Button, {
+        onClick: function onClick() {
+          var _root$detailStore$ope, _root$detailStore;
+          return root === null || root === void 0 || (_root$detailStore$ope = (_root$detailStore = root.detailStore).openLeftDetail) === null || _root$detailStore$ope === void 0 ? void 0 : _root$detailStore$ope.call(_root$detailStore, {
+            configurationId: item.action.id,
+            data: data,
+            mappingData: data,
+            callback: function callback(data) {
+              if (!item.callbackMapping) return;
+              var _iterator = _createForOfIteratorHelper$g(item.callbackMapping),
+                _step;
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  var map = _step.value;
+                  form === null || form === void 0 || form.setFieldValue(map.sourceField, data[map.targetField]);
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+            },
+            title: item.action.label,
+            type: item.action.type,
+            description: item.action.description,
+            footer: item.action.footer,
+            width: item.action.width
+          });
+        },
+        style: {
+          width: '40%',
+          marginLeft: '25%'
+        },
+        disabled: disabled,
+        children: item.label
+      });
+    case 'richText':
+      return /*#__PURE__*/jsx(RichTextEditor, {
+        initValue: state.getData(name, data),
+        name: name,
+        onChange: _onChange
+      });
+    case 'number':
+      return /*#__PURE__*/jsx(InputNumber, {
+        disabled: disabled,
+        value: item.value
+      });
+    case 'checkbox':
+      return /*#__PURE__*/jsx(Checkbox, {
+        disabled: disabled,
+        value: item.value,
+        onChange: function onChange(e) {
+          var value = e.target.checked;
+          var cbItem = item;
+          if (value && cbItem !== null && cbItem !== void 0 && cbItem.valueOnEnabled) {
+            value = root === null || root === void 0 ? void 0 : root.getGlobalValue(cbItem.valueOnEnabled.globalValue);
+          }
+          _onChange(name, value);
+        }
+      });
+    case 'display':
+      return /*#__PURE__*/jsx(DisplayInput, {
+        translationPrefix: item.translationPrefix
+      });
+    case 'array':
+      return /*#__PURE__*/jsx(FormList$3, {
+        item: item,
+        data: data,
+        state: state,
+        onError: _onError,
+        root: root,
+        setCanSave: setCanSave,
+        form: form
+      });
+    case 'object':
+      return /*#__PURE__*/jsx(JsonEditor$2, {
+        setCanSave: setCanSave,
+        data: data,
+        height: item.height,
+        savable: true
+      });
+    case 'date':
+      return /*#__PURE__*/jsx(DatePicker, {
+        disabled: disabled
+      });
+    case 'subTitle':
+      return /*#__PURE__*/jsx(SubTitle$1, {
+        item: item,
+        data: data
+      });
+    case 'apiKey':
+      return /*#__PURE__*/jsx(ApiKey, {
+        value: item.value,
+        placeholder: item.placeholder
+      });
+    case 'selectClientRelationCatalog':
+      return /*#__PURE__*/jsx("div", {
+        style: {
+          display: 'flex',
+          gap: 16
+        },
+        children: /*#__PURE__*/jsx(SelectClientRelationCatalog, {
+          dontLoadCatalogData: true,
+          onSelectedSupplier: function onSelectedSupplier(supplier) {
+            if (item.accountName) {
+              var newData = state.onInputChanged(item.accountName, supplier === null || supplier === void 0 ? void 0 : supplier._id);
+              if (!supplier) {
+                newData = state.onInputChanged(name, undefined, newData);
+                if (item.catalogCodex) state.onInputChanged(item.catalogCodex, undefined, newData);
+              }
+            }
+          },
+          initAccountId: item.accountName ? state.getData(item.accountName, data) : undefined,
+          initCatalogId: state.getData(name, data),
+          currentOrganizationId: data._id,
+          onSelectedCatalog: function onSelectedCatalog(catalogItem) {
+            var newData = state.onInputChanged(name, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem._id);
+            if (item.catalogCodex) state.onInputChanged(item.catalogCodex, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem.codex, newData);
+          },
+          onError: function onError(text) {
+            return _onError(text, text);
+          },
+          apiInterface: item.apiInterface
+        })
+      });
+    case 'radio':
+      return /*#__PURE__*/jsx(Radio.Group, {
+        value: item.value,
+        options: item.options.map(function (o) {
+          var _o$disabled;
+          return _objectSpread$z(_objectSpread$z({}, o), {}, {
+            disabled: (_o$disabled = o.disabled) === null || _o$disabled === void 0 ? void 0 : _o$disabled.call(o, data)
+          });
+        }),
+        buttonStyle: item.buttonStyle,
+        optionType: item.optionType,
+        defaultValue: item.defaultValue,
+        onChange: function onChange(_ref) {
+          var value = _ref.target.value;
+          _onChange(name, value);
+        }
+      });
+    case 'button':
+      return /*#__PURE__*/jsx(CustomButton$1, {
+        id: item.buttonId,
+        data: data,
+        useActionResult: {
+          styles: true,
+          message: true
+        },
+        icon: item.icon,
+        callback: function callback(data) {
+          return form === null || form === void 0 ? void 0 : form.setFieldsValue(_objectSpread$z(_objectSpread$z({}, state.data), data));
+        }
+      });
+    default:
+      return /*#__PURE__*/jsx(Fragment, {});
+  }
+}
+function DisplayInput(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(Input, _objectSpread$z(_objectSpread$z({}, props), {}, {
+    disabled: true,
+    value: t(props.translationPrefix + '.' + props.value)
+  }));
+}
+function isReadonly(item, data) {
+  if (_typeof(item.readonly) != 'object') {
+    return item.readonly;
+  }
+  var flatData = flatten(data);
+  if (!item.readonly.op && flatData[item.readonly.field] == item.readonly.value) {
+    return true;
+  } else if (item.readonly.op == 'gt' && flatData[item.readonly.field] > item.readonly.value) {
+    return true;
+  }
+  return false;
+}
+
+function ownKeys$y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper$f(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$f(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray$f(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$f(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$f(r, a) : void 0; } }
+function _arrayLikeToArray$f(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var Presets = function Presets(_ref) {
+  var state = _ref.state,
+    apiHandler = _ref.apiHandler,
+    form = _ref.form,
+    root = _ref.root,
+    setUsedPreset = _ref.setUsedPreset,
+    presets = _ref.presets,
+    setPresets = _ref.setPresets;
+  var Option = Select$1.Option;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalVisible = _useState2[0],
+    setIsModalVisible = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    newPresetName = _useState4[0],
+    setNewPresetName = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    value = _useState6[0],
+    setValue = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    presetIds = _useState8[0],
+    setPresetIds = _useState8[1];
+  var _useTranslation = useTranslation$1(),
+    t = _useTranslation.t;
+  useEffect(function () {
+    getPresets();
+  }, []);
+  var savePreset = function savePreset() {
+    if (state.selectedItems == undefined) return;
+    setIsModalVisible(false);
+    var names = [];
+    var _iterator = _createForOfIteratorHelper$f(state.selectedItems),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        names.push(item.name);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
+    var data = _objectSpread$y(_objectSpread$y({}, form.getFieldsValue(names)), {}, {
+      newPresetName: newPresetName
+    });
+    data.dpi = parseInt(data.dpi);
+    data.organization = root.getGlobalValue('organizationId');
+    apiHandler.create({}, state.configuration.createPresetMapping, data);
+    var dt = _objectSpread$y(_objectSpread$y({}, form.getFieldsValue(names)), {}, {
+      name: newPresetName
+    });
+    setPresets({
+      data: [dt].concat(_toConsumableArray(presets.data)),
+      total: presets.total
+    });
+  };
+  var getPresets = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var res, ids, preset;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return apiHandler.readList();
+          case 2:
+            res = _context.sent;
+            ids = [];
+            for (preset in res.data) {
+              ids.push(res.data[preset]._id);
+              delete res.data[preset]._id;
+            }
+            setPresetIds(ids);
+            setPresets(res);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getPresets() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onPresetSelect = function onPresetSelect(index) {
+    var preset = presets.data[index];
+    if (!state.selectedItems) return;
+    state.selectedItems.map(function (item) {
+      if (isReadonly(item, form.getFieldsValue())) {
+        delete preset[item.name];
+      }
+    });
+    form.setFieldsValue(presets.data[index]);
+    setUsedPreset({
+      used: true,
+      index: index
+    });
+  };
+  var deletePreset = function deletePreset(index) {
+    apiHandler["delete"](presetIds[index]);
+    var data = presets.data;
+    data.splice(index, 1);
+    setPresets({
+      data: data,
+      total: presets.total
+    });
+    setValue(undefined);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Select$1, {
+      showSearch: true,
+      value: value,
+      placeholder: t('backoffice.form.presets.placeholder'),
+      optionFilterProp: "children",
+      style: {
+        width: '94%',
+        paddingLeft: 0,
+        marginBottom: 30
+      },
+      onChange: function onChange(index) {
+        setValue(index);
+        onPresetSelect(index);
+      },
+      children: presets === null || presets === void 0 ? void 0 : presets.data.map(function (dt, idx) {
+        return /*#__PURE__*/jsxs(Option, {
+          value: idx,
+          children: [dt.name, /*#__PURE__*/jsx(Button, {
+            icon: /*#__PURE__*/jsx(DeleteOutlined, {}),
+            style: {
+              "float": 'right'
+            },
+            onClick: function onClick() {
+              return deletePreset(idx);
+            }
+          })]
+        }, idx);
+      })
+    }), /*#__PURE__*/jsx(Button, {
+      type: "primary",
+      onClick: function onClick() {
+        return setIsModalVisible(true);
+      },
+      children: "Create"
+    }), /*#__PURE__*/jsx(Modal$2, {
+      title: "Create Preset",
+      visible: isModalVisible,
+      onOk: function onOk(e) {
+        return savePreset();
+      },
+      onCancel: function onCancel() {
+        return setIsModalVisible(false);
+      },
+      children: /*#__PURE__*/jsx(Input, {
+        value: newPresetName,
+        placeholder: "Preset Name",
+        onChange: function onChange(e) {
+          setNewPresetName(e.target.value);
+        },
+        style: {
+          marginBottom: 15
+        }
+      })
+    })]
   });
 };
 
-function _createForOfIteratorHelper$f(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$f(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray$f(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$f(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$f(r, a) : void 0; } }
-function _arrayLikeToArray$f(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys$y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$7 = getLogger('Backoffice', 'Form');
 var FormWrapper$1 = function FormWrapper(_ref, ref) {
   var _state$selectedItems2;
@@ -15717,9 +16167,6 @@ var FormWrapper$1 = function FormWrapper(_ref, ref) {
       return _ref4.apply(this, arguments);
     };
   }();
-  var updateFormData = function updateFormData(data) {
-    form.setFieldsValue(_objectSpread$y(_objectSpread$y({}, state.data), data));
-  };
   var onErrorInternal = function onErrorInternal(err, errorText) {
     if (err instanceof DivaError && err.name) {
       var _state$configuration$;
@@ -15750,263 +16197,6 @@ var FormWrapper$1 = function FormWrapper(_ref, ref) {
       onErrorInternal('An unexpected error prevented finishing');
     }
   };
-  function getRules(item, data) {
-    var _item$rules;
-    var rules = [];
-    if (item.required != undefined) {
-      var _state$hiddenRequired;
-      rules.push({
-        required: (_state$hiddenRequired = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.required
-      });
-    }
-    if (((_item$rules = item.rules) === null || _item$rules === void 0 ? void 0 : _item$rules.type) == 'condition') {
-      var condition = item.rules;
-      var flatData = flatten(data);
-      if (!condition.match.op && flatData[condition.match.field] == condition.match.value) {
-        rules.push.apply(rules, _toConsumableArray(condition.rules));
-      } else if (condition.match.op == 'gt' && flatData[condition.match.field] > condition.match.value) {
-        rules.push.apply(rules, _toConsumableArray(condition.rules));
-      }
-    } else if (item.rules) {
-      rules.push.apply(rules, _toConsumableArray(item.rules));
-    }
-    return rules;
-  }
-  function getLabel(item) {
-    if (!item.label && item.type === 'button') return undefined;
-    return item.label ? t(item.label, item.label) : item.name;
-  }
-  function getElement(item, data, setCanSave, state, _onChange, root, form, hidden, overwrittenName) {
-    var _isReadonly, _state$hiddenRequired2;
-    if (hidden) return /*#__PURE__*/jsx(Fragment, {});
-    var name = overwrittenName || item.name;
-    var disabled = (_isReadonly = isReadonly(item, data)) !== null && _isReadonly !== void 0 ? _isReadonly : (_state$hiddenRequired2 = state.hiddenRequiredDisabled[typeof name == 'string' ? name : name.join('.')]) === null || _state$hiddenRequired2 === void 0 ? void 0 : _state$hiddenRequired2.disabled;
-    switch (item.type) {
-      case 'select':
-        return /*#__PURE__*/jsx(Select, {
-          initialValue: item.defaultValue,
-          apiInterface: item.apiInterface,
-          mode: item.mode,
-          useFirstValueAsDefault: item.useFirstValueAsDefault,
-          canSetToUndefined: item.canSetToUndefined,
-          selectMapping: item.selectMapping,
-          mapping: item.mapping,
-          allowCreate: item.allowCreate,
-          flow: item.flow,
-          translationPrefix: item.translationPrefix,
-          values: item.values,
-          search: item.search,
-          disabled: disabled,
-          wholeData: state.data,
-          disabledConfig: item === null || item === void 0 ? void 0 : item['disabledSelection'],
-          onChange: function onChange(value) {
-            _onChange(name, item.valueField ? value[item.valueField] : value);
-          },
-          allowClear: item.allowClear,
-          placeholder: item.placeholder,
-          onError: function onError(text) {
-            return onErrorInternal(text, text);
-          }
-        }, state.selectedItemsIndex);
-      case 'selectSimple':
-        return /*#__PURE__*/jsx(SimpleSelect, _objectSpread$y(_objectSpread$y({}, item), {}, {
-          disabled: disabled,
-          onChange: function onChange(value) {
-            _onChange(name, value);
-          }
-        }));
-      case 'textarea':
-        return /*#__PURE__*/jsx(Input.TextArea, {
-          disabled: disabled,
-          autoSize: {
-            minRows: 2,
-            maxRows: 5
-          },
-          defaultValue: item.value,
-          placeholder: item.placeholder,
-          onChange: function onChange(e) {
-            return _onChange === null || _onChange === void 0 ? void 0 : _onChange(name, e.target.value);
-          }
-        });
-      case 'input':
-      case 'password':
-      case undefined:
-        if (item.syncDataWithUserInput) {
-          return /*#__PURE__*/jsx(InputComponent$1, {
-            item: item,
-            data: data,
-            value: item.value,
-            onChange: state.onInputChanged
-          });
-        }
-        if (item.type == 'password') return /*#__PURE__*/jsx(Input.Password, {
-          addonBefore: item.prefix,
-          addonAfter: item.suffix,
-          disabled: disabled,
-          value: item.value,
-          placeholder: item.placeholder,
-          autoComplete: "new-password"
-        });
-        return /*#__PURE__*/jsx(Input, {
-          addonBefore: item.prefix,
-          addonAfter: item.suffix,
-          disabled: disabled,
-          value: item.value,
-          placeholder: item.placeholder
-        });
-      case 'detailaction':
-        return /*#__PURE__*/jsx(Button, {
-          onClick: function onClick() {
-            var _root$detailStore$ope, _root$detailStore;
-            return root === null || root === void 0 || (_root$detailStore$ope = (_root$detailStore = root.detailStore).openLeftDetail) === null || _root$detailStore$ope === void 0 ? void 0 : _root$detailStore$ope.call(_root$detailStore, {
-              configurationId: item.action.id,
-              data: data,
-              mappingData: data,
-              callback: function callback(data) {
-                if (!item.callbackMapping) return;
-                var _iterator = _createForOfIteratorHelper$f(item.callbackMapping),
-                  _step;
-                try {
-                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                    var map = _step.value;
-                    form === null || form === void 0 || form.setFieldValue(map.sourceField, data[map.targetField]);
-                  }
-                } catch (err) {
-                  _iterator.e(err);
-                } finally {
-                  _iterator.f();
-                }
-              },
-              title: item.action.label,
-              type: item.action.type,
-              description: item.action.description,
-              footer: item.action.footer,
-              width: item.action.width
-            });
-          },
-          style: {
-            width: '40%',
-            marginLeft: '25%'
-          },
-          disabled: disabled,
-          children: item.label
-        });
-      case 'richText':
-        return /*#__PURE__*/jsx(RichTextEditor, {
-          initValue: state.getData(name, data),
-          name: name,
-          onChange: _onChange
-        });
-      case 'number':
-        return /*#__PURE__*/jsx(InputNumber, {
-          disabled: disabled,
-          value: item.value
-        });
-      case 'checkbox':
-        return /*#__PURE__*/jsx(Checkbox, {
-          disabled: disabled,
-          value: item.value,
-          onChange: function onChange(e) {
-            var value = e.target.checked;
-            var cbItem = item;
-            if (value && cbItem !== null && cbItem !== void 0 && cbItem.valueOnEnabled) {
-              value = root === null || root === void 0 ? void 0 : root.getGlobalValue(cbItem.valueOnEnabled.globalValue);
-            }
-            _onChange(name, value);
-          }
-        });
-      case 'display':
-        return /*#__PURE__*/jsx(DisplayInput, {
-          translationPrefix: item.translationPrefix
-        });
-      case 'array':
-        return /*#__PURE__*/jsx(FormList, {
-          item: item,
-          data: data
-        });
-      case 'object':
-        return /*#__PURE__*/jsx(JsonEditor$2, {
-          setCanSave: setCanSave,
-          data: data,
-          height: item.height,
-          savable: true
-        });
-      case 'date':
-        return /*#__PURE__*/jsx(DatePicker, {
-          disabled: disabled
-        });
-      case 'subTitle':
-        return /*#__PURE__*/jsx(SubTitle$1, {
-          item: item,
-          data: data
-        });
-      case 'apiKey':
-        return /*#__PURE__*/jsx(ApiKey, {
-          value: item.value,
-          placeholder: item.placeholder
-        });
-      case 'selectClientRelationCatalog':
-        return /*#__PURE__*/jsx("div", {
-          style: {
-            display: 'flex',
-            gap: 16
-          },
-          children: /*#__PURE__*/jsx(SelectClientRelationCatalog, {
-            dontLoadCatalogData: true,
-            onSelectedSupplier: function onSelectedSupplier(supplier) {
-              if (item.accountName) {
-                var newData = state.onInputChanged(item.accountName, supplier === null || supplier === void 0 ? void 0 : supplier._id);
-                if (!supplier) {
-                  newData = state.onInputChanged(name, undefined, newData);
-                  if (item.catalogCodex) state.onInputChanged(item.catalogCodex, undefined, newData);
-                }
-              }
-            },
-            initAccountId: item.accountName ? state.getData(item.accountName, data) : undefined,
-            initCatalogId: state.getData(name, data),
-            currentOrganizationId: data._id,
-            onSelectedCatalog: function onSelectedCatalog(catalogItem) {
-              var newData = state.onInputChanged(name, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem._id);
-              if (item.catalogCodex) state.onInputChanged(item.catalogCodex, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem.codex, newData);
-            },
-            onError: function onError(text) {
-              return onErrorInternal(text, text);
-            },
-            apiInterface: item.apiInterface
-          })
-        });
-      case 'radio':
-        return /*#__PURE__*/jsx(Radio.Group, {
-          value: item.value,
-          options: item.options.map(function (o) {
-            var _o$disabled;
-            return _objectSpread$y(_objectSpread$y({}, o), {}, {
-              disabled: (_o$disabled = o.disabled) === null || _o$disabled === void 0 ? void 0 : _o$disabled.call(o, data)
-            });
-          }),
-          buttonStyle: item.buttonStyle,
-          optionType: item.optionType,
-          defaultValue: item.defaultValue,
-          onChange: function onChange(_ref7) {
-            var value = _ref7.target.value;
-            _onChange(name, value);
-          }
-        });
-      case 'button':
-        return /*#__PURE__*/jsx(CustomButton$1, {
-          id: item.buttonId,
-          data: data,
-          useActionResult: {
-            styles: true,
-            message: true
-          },
-          icon: item.icon,
-          callback: updateFormData
-        });
-      default:
-        return /*#__PURE__*/jsx(Fragment, {});
-    }
-  }
   return /*#__PURE__*/jsxs(Spin, {
     spinning: state.loading,
     children: [state.configuration.presetApiInterface && /*#__PURE__*/jsx(Presets, {
@@ -16035,125 +16225,37 @@ var FormWrapper$1 = function FormWrapper(_ref, ref) {
       },
       children: [state.configuration.itemSelector && /*#__PURE__*/jsx(Form$1.Item, {
         name: state.configuration.itemSelector.name,
-        rules: getRules(state.configuration.itemSelector, state.data),
+        rules: state.getRules(state.configuration.itemSelector, state.data),
         label: state.configuration.itemSelector.label ? t(state.configuration.itemSelector.label, state.configuration.itemSelector.label) : state.configuration.itemSelector.name,
         valuePropName: state.configuration.itemSelector.type == 'checkbox' ? 'checked' : 'value',
-        children: getElement(state.configuration.itemSelector, state.data, setCanSave, state, state.onItemSelectorChanged)
+        children: getElement(state.configuration.itemSelector, state.data, setCanSave, state, state.onItemSelectorChanged, onErrorInternal)
       }, state.configuration.itemSelector.name.toString()), (_state$selectedItems2 = state.selectedItems) === null || _state$selectedItems2 === void 0 ? void 0 : _state$selectedItems2.map(function (item) {
-        var _state$hiddenRequired3, _state$hiddenRequired4, _state$hiddenRequired5;
+        var _state$hiddenRequired, _state$hiddenRequired2, _state$hiddenRequired3;
         return /*#__PURE__*/jsxs("div", {
-          children: [item.marker && /*#__PURE__*/jsx(InfoCircleOutlined, {}), ['subTitle', 'array'].includes(item.type) ? getElement(item, state.data, setCanSave, state, state.onInputChanged, undefined, undefined, (_state$hiddenRequired3 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired3 === void 0 ? void 0 : _state$hiddenRequired3.hidden) : /*#__PURE__*/jsx(Form$1.Item, {
+          children: [item.marker && /*#__PURE__*/jsx(InfoCircleOutlined, {}), ['subTitle', 'array'].includes(item.type) ? getElement(item, state.data, setCanSave, state, state.onInputChanged, onErrorInternal, undefined, undefined, (_state$hiddenRequired = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.hidden) : /*#__PURE__*/jsx(Form$1.Item, {
             name: item.name,
-            rules: getRules(item, state.data),
-            label: getLabel(item),
+            rules: state.getRules(item, state.data),
+            label: getLabel(item, t),
             valuePropName: item.type == 'checkbox' ? 'checked' : 'value',
             initialValue: item === null || item === void 0 ? void 0 : item.defaultValue,
             hasFeedback: !!state.fieldErrors[item.name.toString()],
             validateStatus: !!state.fieldErrors[item.name.toString()] ? 'error' : undefined,
             help: state.fieldErrors[item.name.toString()],
-            hidden: (_state$hiddenRequired4 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired4 === void 0 ? void 0 : _state$hiddenRequired4.hidden,
-            children: getElement(item, state.data, setCanSave, state, state.onInputChanged, root, form, (_state$hiddenRequired5 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired5 === void 0 ? void 0 : _state$hiddenRequired5.hidden)
+            hidden: (_state$hiddenRequired2 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired2 === void 0 ? void 0 : _state$hiddenRequired2.hidden,
+            children: getElement(item, state.data, setCanSave, state, state.onInputChanged, onErrorInternal, root, form, (_state$hiddenRequired3 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired3 === void 0 ? void 0 : _state$hiddenRequired3.hidden)
           }, Array.isArray(item.name) ? item.name.join('.') : item.name)]
         }, item.name.toString());
       })]
     })]
   });
-  function FormList(_ref8) {
-    var item = _ref8.item,
-      data = _ref8.data;
-    return /*#__PURE__*/jsx(Form$1.List, {
-      name: item.name,
-      initialValue: item.initialValue,
-      children: function children(fields, _ref9) {
-        var add = _ref9.add,
-          remove = _ref9.remove;
-        return /*#__PURE__*/jsxs(Fragment, {
-          children: [fields.map(function (_ref10) {
-            var key = _ref10.key,
-              name = _ref10.name;
-            return /*#__PURE__*/jsx(Fragment, {
-              children: /*#__PURE__*/jsxs("div", {
-                style: {
-                  display: 'flex'
-                },
-                children: [/*#__PURE__*/jsx(MinusCircleOutlined, {
-                  onClick: function onClick() {
-                    return remove(name);
-                  }
-                }), /*#__PURE__*/jsx("div", {
-                  style: {
-                    flexGrow: 1
-                  },
-                  children: item.items.map(function (i) {
-                    var _state$hiddenRequired6;
-                    var n = [name].concat(_toConsumableArray(Array.isArray(i.name) ? i.name : [i.name]));
-                    var hidden = !!i.hidden;
-                    if (i.hidden && data) {
-                      if (typeof i.hidden === 'function') {
-                        var _data;
-                        if ((_data = data[item.name]) !== null && _data !== void 0 && _data[n[0]]) {
-                          hidden = i.hidden(data[item.name][n[0]]);
-                        } else hidden = false;
-                      }
-                    }
-                    if (!hidden) hidden = (_state$hiddenRequired6 = state.hiddenRequiredDisabled[typeof n == 'string' ? n : n.join('.')]) === null || _state$hiddenRequired6 === void 0 ? void 0 : _state$hiddenRequired6.hidden;
-                    return /*#__PURE__*/jsx(Fragment, {
-                      children: /*#__PURE__*/jsx(Form$1.Item, {
-                        name: n,
-                        rules: getRules(i, state.data),
-                        label: getLabel(i),
-                        valuePropName: i.type == 'checkbox' ? 'checked' : 'value',
-                        initialValue: i === null || i === void 0 ? void 0 : i.defaultValue,
-                        hasFeedback: !!state.fieldErrors[n.toString()],
-                        validateStatus: !!state.fieldErrors[n.toString()] ? 'error' : undefined,
-                        help: state.fieldErrors[n.toString()],
-                        hidden: hidden,
-                        children: getElement(i, state.data, setCanSave, state, state.onInputChanged, root, form, hidden, [].concat(_toConsumableArray(item.name), _toConsumableArray(Array.isArray(n) ? n : [n])))
-                      }, key)
-                    });
-                  })
-                })]
-              })
-            });
-          }), /*#__PURE__*/jsx(Form$1.Item, {
-            children: /*#__PURE__*/jsx(Button, {
-              type: "dashed",
-              onClick: function onClick() {
-                return add();
-              },
-              block: true,
-              icon: /*#__PURE__*/jsx(PlusOutlined, {}),
-              children: t('backoffice.add_field')
-            })
-          })]
-        });
-      }
-    });
-  }
 };
+function getLabel(item, t) {
+  if (!item.label && item.type === 'button') return undefined;
+  return item.label ? t(item.label, item.label) : item.name;
+}
 var Form = observer(FormWrapper$1, {
   forwardRef: true
 });
-function DisplayInput(props) {
-  var _useTranslation2 = useTranslation$1(),
-    t = _useTranslation2.t;
-  return /*#__PURE__*/jsx(Input, _objectSpread$y(_objectSpread$y({}, props), {}, {
-    disabled: true,
-    value: t(props.translationPrefix + '.' + props.value)
-  }));
-}
-function isReadonly(item, data) {
-  if (_typeof(item.readonly) != 'object') {
-    return item.readonly;
-  }
-  var flatData = flatten(data);
-  if (!item.readonly.op && flatData[item.readonly.field] == item.readonly.value) {
-    return true;
-  } else if (item.readonly.op == 'gt' && flatData[item.readonly.field] > item.readonly.value) {
-    return true;
-  }
-  return false;
-}
 
 function ownKeys$x(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -20111,7 +20213,7 @@ function _createForOfIteratorHelper$8(r, e) { var t = "undefined" != typeof Symb
 function _unsupportedIterableToArray$8(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$8(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$8(r, a) : void 0; } }
 function _arrayLikeToArray$8(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var FileUploadWrapper = function FileUploadWrapper(_ref) {
-  _ref.id;
+  var id = _ref.id;
   var _useDivaCore = useDivaCore(),
     apiConfig = _useDivaCore.state.apiConfig;
   var root = useStore();
@@ -20250,7 +20352,7 @@ var FileUploadWrapper = function FileUploadWrapper(_ref) {
                 return dt._id;
               }));
             }
-          })
+          }, id)
         }), /*#__PURE__*/jsx(Button, {
           htmlType: "submit",
           type: "primary",
@@ -20591,7 +20693,8 @@ function getExpandedRowRenderer (config, root) {
 var editableRow = "editable-row-9BEHi";
 var checkbox = "checkbox-H7R-w";
 var editableCellValueWrap = "editable-cell-value-wrap-ugTs4";
-var css_248z$c = ".checkbox-readonly-0-bzT {\n  cursor: default;\n}\n\n.checkbox-readonly-0-bzT .ant-checkbox-input {\n  cursor: default;\n}\n\n.checkbox-readonly-0-bzT .ant-checkbox {\n  cursor: default;\n}\n\n.editable-row-9BEHi:hover .checkbox-H7R-w .ant-checkbox {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);\n}\n\n.editable-cell-value-wrap-ugTs4 {\n  padding: 5px 12px;\n  cursor: pointer;\n}\n\n.editable-row-9BEHi:hover .editable-cell-value-wrap-ugTs4 {\n  padding: 4px 11px;\n  border: 1px solid #d9d9d9;\n  border-radius: 4px;\n}\n";
+var contentWidth = "content-width-hGyVI";
+var css_248z$c = ".checkbox-readonly-0-bzT {\n  cursor: default;\n}\n\n.checkbox-readonly-0-bzT .ant-checkbox-input {\n  cursor: default;\n}\n\n.checkbox-readonly-0-bzT .ant-checkbox {\n  cursor: default;\n}\n\n.editable-row-9BEHi:hover .checkbox-H7R-w .ant-checkbox {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);\n}\n\n.editable-cell-value-wrap-ugTs4 {\n  padding: 5px 12px;\n  cursor: pointer;\n}\n\n.editable-row-9BEHi:hover .editable-cell-value-wrap-ugTs4 {\n  padding: 4px 11px;\n  border: 1px solid #d9d9d9;\n  border-radius: 4px;\n}\n\n.content-width-hGyVI .ant-modal-confirm-content {\n  width: 100%;\n}\n";
 styleInject(css_248z$c);
 
 function BooleanCell (_ref) {
@@ -20812,6 +20915,7 @@ function TextCell (_ref) {
         onCancel: function onCancel() {
           return setShowModal(false);
         },
+        className: contentWidth,
         icon: /*#__PURE__*/jsx(Fragment, {}),
         content: /*#__PURE__*/jsx(Form$1, {
           form: form,
@@ -20824,7 +20928,7 @@ function TextCell (_ref) {
             }] : [],
             children: /*#__PURE__*/jsx(Input.TextArea, {
               autoSize: {
-                minRows: 2,
+                minRows: 6,
                 maxRows: 6
               },
               ref: inputRef
@@ -24920,7 +25024,7 @@ var FilterBox = /*#__PURE__*/memo(function (_ref) {
                 value: getLabelByValue((_value2 = data.value) !== null && _value2 !== void 0 ? _value2 : data, filter.options)
               }]);
             }
-          })]
+          }, id)]
         }, filter.type + filter.title);
       case 'slider':
         //Masse
@@ -30055,7 +30159,7 @@ styleInject(css_248z$3);
 var wrapper = "wrapper-wuBie";
 var select = "select-w181d";
 var button = "button-g8Tp4";
-var css_248z$2 = ".wrapper-wuBie {\n  display: flex;\n  gap: 16px;\n  margin: 8px;\n  justify-content: start;\n}\n\n.select-w181d {\n  z-index: 1000;\n  margin: 8px;\n  flex-grow: 0.8;\n  min-width: 100px;\n}\n.select-w181d div {\n  border-color: grey !important;\n}\n.select-w181d div {\n  box-shadow: none;\n  box-shadow: initial;\n}\n\n.button-g8Tp4 {\n  width: 40px;\n  justify-content: center;\n}\n";
+var css_248z$2 = ".wrapper-wuBie {\n  display: flex;\n  gap: 16px;\n  margin: 8px;\n  justify-content: flex-start;\n}\n\n.select-w181d {\n  z-index: 1000;\n  margin: 8px;\n  flex-grow: 0.8;\n  min-width: 100px;\n}\n.select-w181d div {\n  border-color: grey !important;\n}\n.select-w181d div {\n  box-shadow: none;\n  box-shadow: initial;\n}\n\n.button-g8Tp4 {\n  width: 40px;\n  justify-content: center;\n}\n";
 styleInject(css_248z$2);
 
 var ArticleSelection = function ArticleSelection(_ref) {
@@ -30275,11 +30379,12 @@ function useWysiwyg(_ref) {
     return function () {
       return unSubscribeEvents(onEventCalled);
     };
-  }, []);
+  }, [articleCodex]);
   var settings = useMemo(function () {
     return {
       language: 'DE',
       showSelectionModeZero: true,
+      dontLoadAdditionalModelInfos: true,
       onErrorHandling: {
         hideErrorMsg: false,
         errorMsg: 'WYSIWYG currently not working for this mask'