@blateral/b.kit 2.3.0-beta.1.3 → 2.3.0-beta.1.4

package/esm/sections_forms.js

@@ -0,0 +1,1405 @@
+import { _ as __assign, f as __awaiter, g as __generator, a as __makeTemplateObject } from './ClockFilled-6bae80dc.js';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { s as spacings, m as mq, g as getColors } from './styles-f6c54818.js';
+import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-a38c5bf1.js';
+import { S as Section, m as mapToBgMode, W as Wrapper } from './Wrapper-29347885.js';
+import { useFormik } from 'formik';
+import { A as Actions } from './Actions-3f06c2e9.js';
+import { B as Button } from './Button-ab1a4e79.js';
+import { L as LocationField, D as DatepickerCmp, F as FieldWrapper, R as RadioButton, T as Textarea, a as Textfield, S as SelectDropdown, b as FileUploadCmp } from './FileUpload-4ba0a672.js';
+import { B as ButtonGhost } from './ButtonGhost-5b498dba.js';
+import { C as Checkbox } from './Checkbox-957d8f33.js';
+import { C as Copy } from './Copy-fb124972.js';
+import 'react-dom/server';
+import './concat-ab3c66f2.js';
+import './arrays-65b644ef.js';
+import './hexRgbConverter-edb91624.js';
+import './clamp-12d37b65.js';
+import './useLeafletMap-6dea7a8e.js';
+import './useLazyInput-e66fc5be.js';
+import './useUpdateEffect-824c0c84.js';
+import './useGeolocation-f9f073cc.js';
+import 'react-datepicker';
+import './useMounted-1e4cc87b.js';
+
+var renderLocationField = function (_a) {
+  var _b, _c;
+
+  var key = _a.key,
+      field = _a.field,
+      value = _a.value,
+      error = _a.error,
+      isTouched = _a.isTouched,
+      isInverted = _a.isInverted,
+      setField = _a.setField;
+  var locationData = value;
+
+  var mappedData = __assign(__assign({}, locationData), {
+    position: !((_b = locationData === null || locationData === void 0 ? void 0 : locationData.position) === null || _b === void 0 ? void 0 : _b[0]) && !((_c = locationData === null || locationData === void 0 ? void 0 : locationData.position) === null || _c === void 0 ? void 0 : _c[1]) ? undefined : locationData.position
+  });
+
+  var handleChange = function (location) {
+    setField({
+      key: key,
+      value: __assign({}, location),
+      shouldValidate: true
+    });
+  };
+
+  return React__default.createElement(LocationField, {
+    key: key,
+    enableMemo: true,
+    name: "['".concat(key, "']"),
+    label: "".concat(key).concat(field.isRequired ? ' *' : ''),
+    placeholder: field.placeholder,
+    initialMapCenter: field.initialMapCenter,
+    zoom: field.zoom,
+    isInverted: isInverted,
+    infoMessage: field.info,
+    errorMessage: error && isTouched ? error : undefined,
+    value: mappedData,
+    onChange: handleChange,
+    customLocationControl: field.customLocationControl,
+    customToggle: field.customToggle,
+    customResetControl: field.customResetControl,
+    toggleLabel: field.toggleLabel,
+    trackLocationLabel: field.trackLocationLabel
+  });
+};
+
+var renderDatepickerField = function (_a) {
+  var key = _a.key,
+      field = _a.field,
+      value = _a.value,
+      error = _a.error,
+      isTouched = _a.isTouched,
+      isInverted = _a.isInverted,
+      setField = _a.setField,
+      setTouched = _a.setTouched,
+      validateField = _a.validateField;
+  var dates = value;
+
+  var handleSubmit = function (start, end) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4
+            /*yield*/
+            , setTouched(key, true)];
+
+          case 1:
+            _a.sent();
+
+            return [4
+            /*yield*/
+            , setField({
+              key: key,
+              value: [start || null, end || null]
+            })];
+
+          case 2:
+            _a.sent();
+
+            validateField(key);
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
+  return React__default.createElement(DatepickerCmp, {
+    key: key,
+    enableMemo: true,
+    onSubmit: handleSubmit,
+    onDataChange: handleSubmit,
+    values: [dates === null || dates === void 0 ? void 0 : dates[0], dates === null || dates === void 0 ? void 0 : dates[1]],
+    label: "".concat(key).concat(field.isRequired ? ' *' : ''),
+    placeholder: field.placeholder,
+    singleSelect: field.singleSelect,
+    infoMessage: field.info,
+    errorMessage: error && isTouched ? error : undefined,
+    name: key,
+    customIcon: field === null || field === void 0 ? void 0 : field.customIcon,
+    isInverted: isInverted,
+    minDate: field.minDate,
+    maxDate: field.maxDate,
+    deleteAction: function (handleReset) {
+      return (field === null || field === void 0 ? void 0 : field.deleteAction) ? field.deleteAction(handleReset) : React__default.createElement(ButtonGhost.View, {
+        onClick: handleReset
+      }, "delete");
+    },
+    submitAction: function (handleSubmit) {
+      return (field === null || field === void 0 ? void 0 : field.submitAction) ? field.submitAction(handleSubmit) : React__default.createElement(Button.View, {
+        onClick: handleSubmit
+      }, "submit");
+    },
+    nextCtrlUrl: field.nextCtrlUrl,
+    prevCtrlUrl: field.prevCtrlUrl
+  });
+};
+
+var FieldSet = styled.fieldset.withConfig({
+  displayName: "fieldGroupRenderer__FieldSet",
+  componentId: "sc-1c0l16c-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: block;\n    border: none;\n    background: none;\n    outline: none;\n    padding: 0;\n    margin-left: 0;\n    margin-right: 0;\n    text-align: left;\n"], ["\n    display: block;\n    border: none;\n    background: none;\n    outline: none;\n    padding: 0;\n    margin-left: 0;\n    margin-right: 0;\n    text-align: left;\n"])));
+var Fields = styled.div.withConfig({
+  displayName: "fieldGroupRenderer__Fields",
+  componentId: "sc-1c0l16c-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
+var renderRadioGroupField = function (_a) {
+  var _b;
+
+  var key = _a.key,
+      field = _a.field,
+      value = _a.value,
+      error = _a.error,
+      isTouched = _a.isTouched,
+      isInverted = _a.isInverted,
+      info = _a.info,
+      setField = _a.setField;
+  var group = field;
+  var groupData = value;
+  return React__default.createElement(FieldSet, {
+    key: key
+  }, key && React__default.createElement(FieldWrapper.Head, {
+    isInverted: isInverted,
+    label: key,
+    isRequired: field.isRequired
+  }), React__default.createElement(Fields, null, (_b = group === null || group === void 0 ? void 0 : group.fields) === null || _b === void 0 ? void 0 : _b.map(function (field, fi) {
+    return React__default.createElement(RadioButton, {
+      key: fi,
+      enableMemo: true,
+      name: key,
+      value: field.text,
+      label: field.text,
+      isInverted: isInverted,
+      isSelected: field.text ? groupData === field.text : false,
+      onChange: function (e) {
+        if (field.text) {
+          setField({
+            key: key,
+            value: e.currentTarget.value
+          });
+        }
+      }
+    });
+  })), isTouched && error && React__default.createElement(FieldWrapper.Messages, {
+    errorMessage: error,
+    infoMessage: info
+  }));
+};
+var renderCheckboxGroupField = function (_a) {
+  var _b;
+
+  var field = _a.field,
+      key = _a.key,
+      isInverted = _a.isInverted,
+      value = _a.value,
+      isTouched = _a.isTouched,
+      error = _a.error,
+      info = _a.info,
+      setTouched = _a.setTouched,
+      validateField = _a.validateField,
+      setField = _a.setField;
+  var group = field;
+  var groupData = value;
+  return React__default.createElement(FieldSet, {
+    key: key
+  }, key && React__default.createElement(FieldWrapper.Head, {
+    isInverted: isInverted,
+    label: key,
+    isRequired: field.isRequired
+  }), React__default.createElement(Fields, null, (_b = group === null || group === void 0 ? void 0 : group.fields) === null || _b === void 0 ? void 0 : _b.map(function (field, ci) {
+    return React__default.createElement(Checkbox, {
+      key: ci,
+      enableMemo: true,
+      isInverted: isInverted,
+      onChange: function (ev) {
+        var value = ev.currentTarget.value; // add key to form data array if not exists. Otherwise remove it
+
+        if (value) {
+          var cIndex = groupData.indexOf(value);
+
+          if (cIndex === -1) {
+            groupData.push(value);
+          } else {
+            groupData.splice(cIndex, 1);
+          } // set formik values
+
+
+          setField({
+            key: key,
+            value: groupData
+          });
+          setTouched(key, true);
+          validateField(key);
+        }
+      },
+      isSelected: field.text ? groupData.indexOf(field.text) !== -1 : false,
+      name: key,
+      value: field.text,
+      label: field.text
+    });
+  })), isTouched && error && React__default.createElement(FieldWrapper.Messages, {
+    errorMessage: error,
+    infoMessage: info
+  }));
+};
+var templateObject_1$2, templateObject_2$2;
+
+var renderAreaField = function (_a) {
+  var field = _a.field,
+      key = _a.key,
+      value = _a.value,
+      error = _a.error,
+      isTouched = _a.isTouched,
+      isInverted = _a.isInverted,
+      handleChange = _a.handleChange,
+      handleBlur = _a.handleBlur;
+  return React__default.createElement(Textarea, {
+    key: key,
+    enableMemo: true,
+    label: "".concat(key).concat(field.isRequired ? ' *' : ''),
+    placeholder: field.placeholder,
+    name: "['".concat(key, "']"),
+    value: value,
+    isInverted: isInverted,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    infoMessage: field.info,
+    errorMessage: error && isTouched ? error : undefined
+  });
+};
+
+var renderField = function (_a) {
+  var field = _a.field,
+      key = _a.key,
+      value = _a.value,
+      error = _a.error,
+      isTouched = _a.isTouched,
+      handleChange = _a.handleChange,
+      handleBlur = _a.handleBlur,
+      isInverted = _a.isInverted;
+  return React__default.createElement(Textfield, {
+    key: key,
+    enableMemo: true,
+    label: "".concat(key).concat(field.isRequired ? ' *' : ''),
+    placeholder: field.placeholder,
+    name: "['".concat(key, "']"),
+    type: field.inputType,
+    isInverted: isInverted,
+    value: value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    infoMessage: field.info,
+    errorMessage: error && isTouched ? error : undefined
+  });
+};
+
+var renderSelectField = function (_a) {
+  var _b, _c;
+
+  var field = _a.field,
+      key = _a.key,
+      value = _a.value,
+      error = _a.error,
+      isTouched = _a.isTouched,
+      isInverted = _a.isInverted,
+      setField = _a.setField,
+      setTouched = _a.setTouched,
+      validateField = _a.validateField,
+      validateOnChange = _a.validateOnChange,
+      validateOnBlur = _a.validateOnBlur;
+  var selectedItem = value;
+  return React__default.createElement(SelectDropdown, {
+    key: key,
+    enableMemo: true,
+    label: "".concat(key).concat(field.isRequired ? ' *' : ''),
+    name: key,
+    placeholder: field.placeholder,
+    errorMessage: error && isTouched ? error : undefined,
+    items: (_c = (_b = field.dropdownItems) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
+      return item.label;
+    })) === null || _c === void 0 ? void 0 : _c.map(function (item) {
+      return {
+        label: item.label || '',
+        value: item.value || {}
+      };
+    }),
+    selectedItem: selectedItem,
+    onChange: function (selectedOption) {
+      return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              setField({
+                key: key,
+                value: selectedOption
+              });
+              return [4
+              /*yield*/
+              , setTouched(key, true)];
+
+            case 1:
+              _a.sent();
+
+              if (validateOnChange) validateField(key);
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    },
+    onBlur: function () {
+      return setTouched(key, true, validateOnBlur);
+    },
+    indicator: field.indicator,
+    isInverted: isInverted
+  });
+};
+
+var renderUploadField = function (_a) {
+  var field = _a.field,
+      key = _a.key,
+      error = _a.error,
+      isTouched = _a.isTouched,
+      isInverted = _a.isInverted,
+      setField = _a.setField;
+  return React__default.createElement(FileUploadCmp, {
+    key: key,
+    enableMemo: true,
+    label: "".concat(key).concat(field.isRequired ? ' *' : ''),
+    name: key,
+    infoMessage: field.info,
+    uploadLabel: field.addBtnLabel,
+    errorMessage: error && isTouched ? error : undefined,
+    acceptedFormats: field.acceptedFormats,
+    onUploadFiles: function (files) {
+      setField({
+        key: key,
+        value: files
+      });
+    },
+    customUploadIcon: field.customUploadIcon,
+    customDeleteIcon: field.customDeleteIcon,
+    isInverted: isInverted
+  });
+};
+
+var fieldValidator = function (key, value, config) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var inputType, error;
+    return __generator(this, function (_a) {
+      inputType = config.inputType;
+      error = '';
+
+      if (config.isRequired && !value) {
+        error = config.errorMsg || 'Required field';
+      }
+
+      switch (inputType) {
+        case 'email':
+          if (value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
+            error = config.errorMsg || 'Invalid Mail format';
+          }
+
+          break;
+
+        case 'tel':
+          if (value && /[A-Z]/gi.test(value)) {
+            error = config.errorMsg || 'Ungültige Telefonnummer';
+          }
+
+          break;
+
+        case 'number':
+          if (value && !/^[+]?\d+([.]\d+)?$/gm.test(value)) {
+            error = config.errorMsg || 'Zahlenformat ungültig';
+          }
+
+          break;
+      }
+
+      return [2
+      /*return*/
+      , error];
+    });
+  });
+};
+
+var areaValidator = function (key, value, config) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var error;
+    return __generator(this, function (_a) {
+      error = '';
+
+      if (config.isRequired && !value) {
+        error = config.errorMsg || 'Required field';
+      }
+
+      return [2
+      /*return*/
+      , error];
+    });
+  });
+};
+
+var selectValidator = function (key, selectedItem, config) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var error;
+    return __generator(this, function (_a) {
+      error = '';
+
+      if (config.isRequired && !selectedItem) {
+        error = config.errorMsg || 'Required field';
+      }
+
+      return [2
+      /*return*/
+      , error];
+    });
+  });
+};
+
+var datepickerValidator = function (key, value, config) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var error, single;
+    return __generator(this, function (_a) {
+      error = '';
+      single = config.singleSelect;
+
+      if (config.isRequired && !value) {
+        error = single ? config.singleDateError || 'Please submit date!' : config.multiDateError || 'Please submit start- and enddate!';
+      } else if (config.isRequired && single && !value[0]) {
+        error = config.singleDateError || 'Please submit date!';
+      } else if (config.isRequired && !single && (!value[0] || !value[1])) {
+        error = config.multiDateError || 'Please submit start- and enddate!';
+      }
+
+      return [2
+      /*return*/
+      , error];
+    });
+  });
+};
+
+var locationValidator = function (key, value, config) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var error;
+
+    var _a, _b;
+
+    return __generator(this, function (_c) {
+      error = '';
+
+      if (config.isRequired && !value.description && !((_a = value.position) === null || _a === void 0 ? void 0 : _a[0]) && !((_b = value.position) === null || _b === void 0 ? void 0 : _b[1])) {
+        error = config.errorMsg || 'Please submit location info!';
+      }
+
+      return [2
+      /*return*/
+      , error];
+    });
+  });
+};
+
+var fieldGroupValidator = function (key, value, config) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var type, error, selectValues;
+    return __generator(this, function (_a) {
+      type = config.groupType;
+      error = '';
+
+      if (type === 'Checkbox') {
+        selectValues = value;
+
+        if (config.isRequired && (!selectValues || (selectValues === null || selectValues === void 0 ? void 0 : selectValues.length) < 1)) {
+          error = config.errorMsg || 'Please select at least one item!';
+        }
+      } else if (type === 'Radio') {
+        if (config.isRequired && !value) {
+          error = config.errorMsg || 'Selection required';
+        }
+      }
+
+      return [2
+      /*return*/
+      , error];
+    });
+  });
+};
+
+var uploadValidator = function (key, files, config) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var error;
+    return __generator(this, function (_a) {
+      error = '';
+
+      if (config.isRequired && (!files || (files === null || files === void 0 ? void 0 : files.length) < 1)) {
+        error = config.errorMsg || 'Please submit at least one file!';
+      }
+
+      return [2
+      /*return*/
+      , error];
+    });
+  });
+};
+
+var StyledSection = styled(Section).withConfig({
+  displayName: "DynamicForm__StyledSection",
+  componentId: "sc-1v8xcyg-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    overflow: visible;\n"], ["\n    overflow: visible;\n"])));
+var Form$1 = styled.form.withConfig({
+  displayName: "DynamicForm__Form",
+  componentId: "sc-1v8xcyg-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    @media ", " {\n        flex-direction: row;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    @media ", " {\n        flex-direction: row;\n    }\n"])), mq.semilarge);
+var FieldContainer$1 = styled.div.withConfig({
+  displayName: "DynamicForm__FieldContainer",
+  componentId: "sc-1v8xcyg-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    flex: 1 1 0;\n    text-align: center;\n\n    & + & {\n        margin-top: ", "px;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 610px;\n    }\n"], ["\n    flex: 1 1 0;\n    text-align: center;\n\n    & + & {\n        margin-top: ", "px;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 610px;\n    }\n"])), spacings.nudge * 3, spacings.nudge * 3, mq.semilarge);
+var FormFooter = styled.div.withConfig({
+  displayName: "DynamicForm__FormFooter",
+  componentId: "sc-1v8xcyg-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", "px;\n"], ["\n    margin-top: ", "px;\n"])), spacings.spacer);
+var Status = styled(Copy).withConfig({
+  displayName: "DynamicForm__Status",
+  componentId: "sc-1v8xcyg-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    text-align: left;\n    margin: 0 auto;\n\n    @media ", " {\n        max-width: 610px;\n    }\n"], ["\n    text-align: left;\n    margin: 0 auto;\n\n    @media ", " {\n        max-width: 610px;\n    }\n"])), mq.semilarge);
+var ActionContainer$1 = styled.div.withConfig({
+  displayName: "DynamicForm__ActionContainer",
+  componentId: "sc-1v8xcyg-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 100%;\n    margin: 0 auto;\n    margin-top: ", "px;\n    text-align: right;\n\n    @media ", " {\n        max-width: 610px;\n    }\n"], ["\n    width: 100%;\n    margin: 0 auto;\n    margin-top: ", "px;\n    text-align: right;\n\n    @media ", " {\n        max-width: 610px;\n    }\n"])), spacings.spacer * 1.5, mq.semilarge);
+
+var DynamicForm = function (_a) {
+  var anchorId = _a.anchorId,
+      fields = _a.fields,
+      onSubmit = _a.onSubmit,
+      submitAction = _a.submitAction,
+      definitions = _a.definitions,
+      subjectLine = _a.subjectLine,
+      targetEmails = _a.targetEmails,
+      bgMode = _a.bgMode;
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full' || isInverted;
+
+  var _b = useState(),
+      submitReponse = _b[0],
+      setSubmitResponse = _b[1]; // generate initial data and setup yup validation definition
+
+
+  var initalData = {};
+
+  var _loop_1 = function (key) {
+    switch (fields[key].type) {
+      case 'Field':
+        initalData[key] = fields[key].initialValue || '';
+        break;
+
+      case 'Area':
+        initalData[key] = fields[key].initialValue || '';
+        break;
+
+      case 'Select':
+        initalData[key] = fields[key].initialOption || '';
+        break;
+
+      case 'Datepicker':
+        initalData[key] = fields[key].initialDates || [null, null];
+        break;
+
+      case 'Location':
+        {
+          initalData[key] = {
+            description: '',
+            position: [0, 0]
+          };
+          break;
+        }
+
+      case 'Upload':
+        initalData[key] = [];
+        break;
+
+      case 'FieldGroup':
+        {
+          var group = fields[key];
+          var type = fields[key].groupType;
+
+          if (type === 'Checkbox') {
+            var initalArray_1 = [];
+            group.fields.forEach(function (field) {
+              if (field.initialChecked && field.text) initalArray_1.push(field.text);
+            });
+            initalData[key] = initalArray_1;
+          } else if (type === 'Radio') {
+            initalData[key] = '';
+            group.fields.every(function (field) {
+              if (field.initialChecked && field.text) {
+                initalData[key] = field.text;
+                return false;
+              }
+
+              return true;
+            });
+          }
+
+          break;
+        }
+    }
+  };
+
+  for (var key in fields) {
+    _loop_1(key);
+  }
+
+  var validation = function (values) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var errors, _a, _b, _i, key, _c, config, value, error_1, error, config, value, error_2, error, config, value, error_3, error, config, value, error_4, error, config, value, error_5, error, config, value, error_6, error, config, files, error_7, error;
+
+      return __generator(this, function (_d) {
+        switch (_d.label) {
+          case 0:
+            errors = {};
+            _a = [];
+
+            for (_b in fields) _a.push(_b);
+
+            _i = 0;
+            _d.label = 1;
+
+          case 1:
+            if (!(_i < _a.length)) return [3
+            /*break*/
+            , 31];
+            key = _a[_i];
+            _c = fields[key].type;
+
+            switch (_c) {
+              case 'Field':
+                return [3
+                /*break*/
+                , 2];
+
+              case 'Area':
+                return [3
+                /*break*/
+                , 6];
+
+              case 'Select':
+                return [3
+                /*break*/
+                , 10];
+
+              case 'Datepicker':
+                return [3
+                /*break*/
+                , 14];
+
+              case 'Location':
+                return [3
+                /*break*/
+                , 18];
+
+              case 'FieldGroup':
+                return [3
+                /*break*/
+                , 22];
+
+              case 'Upload':
+                return [3
+                /*break*/
+                , 26];
+            }
+
+            return [3
+            /*break*/
+            , 30];
+
+          case 2:
+            config = fields[key];
+            value = values[key];
+            if (!config.validate) return [3
+            /*break*/
+            , 4];
+            return [4
+            /*yield*/
+            , config.validate(key, value, config)];
+
+          case 3:
+            error_1 = _d.sent();
+            if (error_1) errors[key] = error_1;
+            return [3
+            /*break*/
+            , 30];
+
+          case 4:
+            return [4
+            /*yield*/
+            , fieldValidator(key, value, config)];
+
+          case 5:
+            error = _d.sent();
+            if (error) errors[key] = error;
+            return [3
+            /*break*/
+            , 30];
+
+          case 6:
+            config = fields[key];
+            value = values[key];
+            if (!config.validate) return [3
+            /*break*/
+            , 8];
+            return [4
+            /*yield*/
+            , config.validate(key, value, config)];
+
+          case 7:
+            error_2 = _d.sent();
+            if (error_2) errors[key] = error_2;
+            return [3
+            /*break*/
+            , 30];
+
+          case 8:
+            return [4
+            /*yield*/
+            , areaValidator(key, value, config)];
+
+          case 9:
+            error = _d.sent();
+            if (error) errors[key] = error;
+            return [3
+            /*break*/
+            , 30];
+
+          case 10:
+            config = fields[key];
+            value = values[key];
+            if (!config.validate) return [3
+            /*break*/
+            , 12];
+            return [4
+            /*yield*/
+            , config.validate(key, value, config)];
+
+          case 11:
+            error_3 = _d.sent();
+            if (error_3) errors[key] = error_3;
+            return [3
+            /*break*/
+            , 30];
+
+          case 12:
+            return [4
+            /*yield*/
+            , selectValidator(key, value, config)];
+
+          case 13:
+            error = _d.sent();
+            if (error) errors[key] = error;
+            return [3
+            /*break*/
+            , 30];
+
+          case 14:
+            config = fields[key];
+            value = values[key];
+            if (!config.validate) return [3
+            /*break*/
+            , 16];
+            return [4
+            /*yield*/
+            , config.validate(key, value, config)];
+
+          case 15:
+            error_4 = _d.sent();
+            if (error_4) errors[key] = error_4;
+            return [3
+            /*break*/
+            , 30];
+
+          case 16:
+            return [4
+            /*yield*/
+            , datepickerValidator(key, value, config)];
+
+          case 17:
+            error = _d.sent();
+            if (error) errors[key] = error;
+            return [3
+            /*break*/
+            , 30];
+
+          case 18:
+            config = fields[key];
+            value = values[key];
+            if (!config.validate) return [3
+            /*break*/
+            , 20];
+            return [4
+            /*yield*/
+            , config.validate(key, value, config)];
+
+          case 19:
+            error_5 = _d.sent();
+            if (error_5) errors[key] = error_5;
+            return [3
+            /*break*/
+            , 30];
+
+          case 20:
+            return [4
+            /*yield*/
+            , locationValidator(key, value, config)];
+
+          case 21:
+            error = _d.sent();
+            if (error) errors[key] = error;
+            return [3
+            /*break*/
+            , 30];
+
+          case 22:
+            config = fields[key];
+            value = values[key];
+            if (!config.validate) return [3
+            /*break*/
+            , 24];
+            return [4
+            /*yield*/
+            , config.validate(key, value, config)];
+
+          case 23:
+            error_6 = _d.sent();
+            if (error_6) errors[key] = error_6;
+            return [3
+            /*break*/
+            , 30];
+
+          case 24:
+            return [4
+            /*yield*/
+            , fieldGroupValidator(key, value, config)];
+
+          case 25:
+            error = _d.sent();
+            if (error) errors[key] = error;
+            return [3
+            /*break*/
+            , 30];
+
+          case 26:
+            config = fields[key];
+            files = values[key];
+            if (!config.validate) return [3
+            /*break*/
+            , 28];
+            return [4
+            /*yield*/
+            , config.validate(key, files, config)];
+
+          case 27:
+            error_7 = _d.sent();
+            if (error_7) errors[key] = error_7;
+            return [3
+            /*break*/
+            , 30];
+
+          case 28:
+            return [4
+            /*yield*/
+            , uploadValidator(key, files, config)];
+
+          case 29:
+            error = _d.sent();
+            if (error) errors[key] = error;
+            return [3
+            /*break*/
+            , 30];
+
+          case 30:
+            _i++;
+            return [3
+            /*break*/
+            , 1];
+
+          case 31:
+            return [2
+            /*return*/
+            , errors];
+        }
+      });
+    });
+  }; // formik hook
+
+
+  var _c = useFormik({
+    initialValues: __assign({}, initalData),
+    onSubmit: function (values, helpers) {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var valuesAndMails, response;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              valuesAndMails = __assign(__assign({}, values), {
+                targetEmails: targetEmails || [],
+                subjectLine: subjectLine || ''
+              });
+
+              if (!onSubmit) {
+                setSubmitting(false);
+                return [2
+                /*return*/
+                ];
+              }
+
+              return [4
+              /*yield*/
+              , onSubmit(valuesAndMails)];
+
+            case 1:
+              response = _a.sent();
+              helpers.resetForm({
+                values: values
+              });
+              setSubmitResponse(response);
+
+              if (response.isError) {
+                setSubmitting(false);
+              }
+
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    },
+    validateOnBlur: true,
+    validateOnChange: true,
+    validate: validation
+  }),
+      handleSubmit = _c.handleSubmit,
+      handleChange = _c.handleChange,
+      handleBlur = _c.handleBlur,
+      setFieldTouched = _c.setFieldTouched,
+      setSubmitting = _c.setSubmitting,
+      validateField = _c.validateField,
+      submitForm = _c.submitForm,
+      setValues = _c.setValues,
+      isSubmitting = _c.isSubmitting,
+      touched = _c.touched,
+      values = _c.values,
+      errors = _c.errors,
+      dirty = _c.dirty,
+      validateOnBlur = _c.validateOnBlur,
+      validateOnChange = _c.validateOnChange; // save last react state
+
+
+  var latestValuesRef = useRef(__assign({}, initalData));
+  var theme = useLibTheme().theme; // rewrite setFieldValue to prevent loadash feature of Formik: https://github.com/jaredpalmer/formik/issues/2262
+
+  var setField = useCallback(function (props) {
+    var _a;
+
+    return setValues(__assign(__assign({}, latestValuesRef.current), (_a = {}, _a[props.key] = props.value, _a)), props.shouldValidate);
+  }, [setValues]);
+  var fieldKeys = fields && Object.keys(fields);
+  useEffect(function () {
+    latestValuesRef.current = __assign({}, values);
+  }, [values]);
+  return React__default.createElement(StyledSection, {
+    addSeperation: true,
+    anchorId: anchorId,
+    bgColor: isInverted ? getColors(theme).sectionBg.dark : bgMode ? getColors(theme).sectionBg.medium : getColors(theme).sectionBg.light,
+    bgMode: mapToBgMode(bgMode, true)
+  }, React__default.createElement(Wrapper, {
+    addWhitespace: true
+  }, React__default.createElement(Form$1, {
+    noValidate: true,
+    onSubmit: handleSubmit
+  }, React__default.createElement(FieldContainer$1, null, fields && (fieldKeys === null || fieldKeys === void 0 ? void 0 : fieldKeys.map(function (label, i) {
+    var props = {
+      index: i,
+      field: fields[label],
+      key: label,
+      value: values[label],
+      error: errors[label],
+      isTouched: touched[label] || false,
+      isInverted: isInverted,
+      hasBg: hasBg,
+      setField: setField,
+      setTouched: setFieldTouched,
+      validateField: validateField,
+      handleChange: handleChange,
+      handleBlur: handleBlur,
+      validateOnBlur: validateOnBlur,
+      validateOnChange: validateOnChange,
+      theme: theme
+    };
+
+    switch (fields[label].type) {
+      case 'Field':
+        {
+          if (definitions === null || definitions === void 0 ? void 0 : definitions.field) {
+            return definitions.field(props);
+          } else {
+            return renderField(props);
+          }
+        }
+
+      case 'Area':
+        {
+          if (definitions === null || definitions === void 0 ? void 0 : definitions.area) {
+            return definitions.area(props);
+          } else {
+            return renderAreaField(props);
+          }
+        }
+
+      case 'Datepicker':
+        {
+          if (definitions === null || definitions === void 0 ? void 0 : definitions.datepicker) {
+            return definitions.datepicker(props);
+          } else {
+            return renderDatepickerField(props);
+          }
+        }
+
+      case 'Location':
+        {
+          if (definitions === null || definitions === void 0 ? void 0 : definitions.location) {
+            return definitions.location(props);
+          } else {
+            return renderLocationField(props);
+          }
+        }
+
+      case 'FieldGroup':
+        {
+          if (fields[label].groupType === 'Checkbox') {
+            if (definitions === null || definitions === void 0 ? void 0 : definitions.checkbox) {
+              return definitions.checkbox(props);
+            } else {
+              return renderCheckboxGroupField(props);
+            }
+          } else {
+            if (definitions === null || definitions === void 0 ? void 0 : definitions.radio) {
+              return definitions.radio(props);
+            } else {
+              return renderRadioGroupField(props);
+            }
+          }
+        }
+
+      case 'Select':
+        {
+          if (definitions === null || definitions === void 0 ? void 0 : definitions.select) {
+            return definitions.select(props);
+          } else {
+            return renderSelectField(props);
+          }
+        }
+
+      case 'Upload':
+        {
+          if (definitions === null || definitions === void 0 ? void 0 : definitions.upload) {
+            return definitions.upload(props);
+          } else {
+            return renderUploadField(props);
+          }
+        }
+
+      default:
+        return null;
+    }
+  })))), (fields || (submitReponse === null || submitReponse === void 0 ? void 0 : submitReponse.message)) && React__default.createElement(FormFooter, null, (submitReponse === null || submitReponse === void 0 ? void 0 : submitReponse.message) && !dirty && React__default.createElement(Status, {
+    textColor: (submitReponse === null || submitReponse === void 0 ? void 0 : submitReponse.isError) ? getColors(theme).error : isInverted ? getColors(theme).text.copyInverted : getColors(theme).text.copy
+  }, submitReponse.message || ''), fields && React__default.createElement(ActionContainer$1, null, React__default.createElement(Actions, {
+    primary: submitAction ? submitAction({
+      isInverted: isInverted,
+      isSubmitting: isSubmitting,
+      handleSubmit: submitForm
+    }) : React__default.createElement(Button.View, __assign({
+      as: "button",
+      onClick: submitForm
+    }, {
+      type: 'submit'
+    }), React__default.createElement(Button.Label, null, "Send mail"))
+  })))));
+};
+var DynamicForm$1 = withLibTheme(DynamicForm);
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
+
+var Form = styled.form.withConfig({
+  displayName: "NewsletterForm__Form",
+  componentId: "sc-1pmvhu2-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    @media ", " {\n        flex-direction: row;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    @media ", " {\n        flex-direction: row;\n    }\n"])), mq.semilarge);
+var FieldContainer = styled.div.withConfig({
+  displayName: "NewsletterForm__FieldContainer",
+  componentId: "sc-1pmvhu2-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1 1 0;\n    text-align: center;\n\n    & + & {\n        margin-top: ", "px;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 590px;\n\n        & + & {\n            margin-top: 0;\n        }\n\n        &:first-child {\n            padding-right: ", "px;\n        }\n\n        &:last-child {\n            padding-left: ", "px;\n        }\n    }\n"], ["\n    flex: 1 1 0;\n    text-align: center;\n\n    & + & {\n        margin-top: ", "px;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 590px;\n\n        & + & {\n            margin-top: 0;\n        }\n\n        &:first-child {\n            padding-right: ", "px;\n        }\n\n        &:last-child {\n            padding-left: ", "px;\n        }\n    }\n"])), spacings.nudge * 3, spacings.nudge * 3, mq.semilarge, spacings.nudge * 3, spacings.nudge * 3);
+var ActionContainer = styled.div.withConfig({
+  displayName: "NewsletterForm__ActionContainer",
+  componentId: "sc-1pmvhu2-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 100%;\n    max-width: 590px;\n\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    text-align: center;\n"], ["\n    width: 100%;\n    max-width: 590px;\n\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    text-align: center;\n"])), spacings.spacer * 2);
+
+var NewsletterForm = function (_a) {
+  var anchorId = _a.anchorId,
+      bgMode = _a.bgMode,
+      fields = _a.fields,
+      customField = _a.customField,
+      action = _a.action,
+      method = _a.method,
+      submitAction = _a.submitAction,
+      onSubmit = _a.onSubmit;
+  var theme = useLibTheme().theme;
+  var formRef = useRef(null);
+  var isInverted = bgMode === 'inverted'; // generate initial data and setup yup validation definition
+
+  var initialData = {};
+
+  for (var key in fields) {
+    initialData[key] = fields[key].initialValue || '';
+  }
+
+  var validation = function (values) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var errors, _a, _b, _i, key, config, inputType, error;
+
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            errors = {};
+            _a = [];
+
+            for (_b in fields) _a.push(_b);
+
+            _i = 0;
+            _c.label = 1;
+
+          case 1:
+            if (!(_i < _a.length)) return [3
+            /*break*/
+            , 5];
+            key = _a[_i];
+            config = fields[key];
+            inputType = config.inputType; // default
+
+            if (fields[key].isRequired && !values[key]) {
+              errors[key] = fields[key].errorMsg || 'Required field';
+            }
+
+            if (!config.validate) return [3
+            /*break*/
+            , 3];
+            return [4
+            /*yield*/
+            , config.validate(key, values[key], config)];
+
+          case 2:
+            error = _c.sent();
+            if (error) errors[key] = error;
+            return [3
+            /*break*/
+            , 5];
+
+          case 3:
+            switch (inputType) {
+              case 'email':
+                if (values[key] && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values[key])) {
+                  errors[key] = fields[key].errorMsg || 'Invalid Mail format';
+                }
+
+                break;
+
+              case 'tel':
+                if (values[key] && /[A-Z]/gi.test(values[key])) {
+                  errors[key] = fields[key].errorMsg || 'Ungültige Telefonnummer';
+                }
+
+                break;
+
+              case 'number':
+                if (values[key] && !/^[+]?\d+([.]\d+)?$/gm.test(values[key])) {
+                  errors[key] = fields[key].errorMsg || 'Zahlenformat ungültig';
+                }
+
+                break;
+            }
+
+            _c.label = 4;
+
+          case 4:
+            _i++;
+            return [3
+            /*break*/
+            , 1];
+
+          case 5:
+            return [2
+            /*return*/
+            , errors];
+        }
+      });
+    });
+  }; // formik hook
+
+
+  var _b = useFormik({
+    initialValues: __assign({}, initialData),
+    onSubmit: function (values) {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              if (!formRef.current) return [2
+              /*return*/
+              ];
+              if (!(action && method)) return [3
+              /*break*/
+              , 1];
+              formRef.current.submit();
+              return [3
+              /*break*/
+              , 4];
+
+            case 1:
+              _a = onSubmit;
+              if (!_a) return [3
+              /*break*/
+              , 3];
+              return [4
+              /*yield*/
+              , onSubmit(values, formRef.current)];
+
+            case 2:
+              _a = _b.sent();
+              _b.label = 3;
+
+            case 3:
+              _b.label = 4;
+
+            case 4:
+              setSubmitting(false);
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    },
+    validateOnBlur: true,
+    validateOnChange: true,
+    validate: validation
+  }),
+      handleSubmit = _b.handleSubmit,
+      handleChange = _b.handleChange,
+      handleBlur = _b.handleBlur,
+      setFieldTouched = _b.setFieldTouched,
+      setSubmitting = _b.setSubmitting,
+      validateField = _b.validateField,
+      submitForm = _b.submitForm,
+      setValues = _b.setValues,
+      isSubmitting = _b.isSubmitting,
+      touched = _b.touched,
+      values = _b.values,
+      errors = _b.errors,
+      dirty = _b.dirty,
+      validateOnBlur = _b.validateOnBlur,
+      validateOnChange = _b.validateOnChange; // rewrite setFieldValue to prevent loadash feature of Formik: https://github.com/jaredpalmer/formik/issues/2262
+
+
+  var setField = useCallback(function (key, value, shouldValidate) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var _a;
+
+      return __generator(this, function (_b) {
+        return [2
+        /*return*/
+        , setValues(__assign(__assign({}, values), (_a = {}, _a[key] = value, _a)), shouldValidate)];
+      });
+    });
+  }, [setValues, values]);
+  return React__default.createElement(Section, {
+    addSeperation: true,
+    anchorId: anchorId,
+    bgColor: isInverted ? getColors(theme).sectionBg.dark : bgMode ? getColors(theme).sectionBg.medium : getColors(theme).sectionBg.light,
+    bgMode: mapToBgMode(bgMode, true)
+  }, React__default.createElement(Wrapper, {
+    addWhitespace: true
+  }, React__default.createElement(Form, {
+    ref: formRef,
+    action: action,
+    method: method,
+    onSubmit: handleSubmit
+  }, React__default.createElement(FieldContainer, null, fields && Object.keys(fields).map(function (key, i) {
+    var generationProps = {
+      index: i,
+      field: fields[key],
+      key: key,
+      value: values[key],
+      error: errors[key],
+      isTouched: touched[key] || false,
+      isInverted: isInverted,
+      setField: setField,
+      setTouched: setFieldTouched,
+      validateField: validateField,
+      handleChange: handleChange,
+      handleBlur: handleBlur,
+      validateOnBlur: validateOnBlur,
+      validateOnChange: validateOnChange,
+      theme: theme
+    };
+    return customField ? customField(generationProps) : generateTextField(generationProps);
+  }))), fields && React__default.createElement(ActionContainer, null, React__default.createElement(Actions, {
+    primary: submitAction ? submitAction({
+      isInverted: isInverted,
+      isDisabled: isSubmitting || !dirty,
+      handleSubmit: submitForm
+    }) : React__default.createElement(Button.View, __assign({
+      as: "button",
+      onClick: submitForm,
+      isDisabled: isSubmitting || !dirty
+    }, {
+      type: 'submit'
+    }), React__default.createElement(Button.Label, null, "send"))
+  }))));
+};
+
+var generateTextField = function (_a) {
+  var key = _a.key,
+      field = _a.field,
+      isInverted = _a.isInverted,
+      value = _a.value,
+      handleChange = _a.handleChange,
+      handleBlur = _a.handleBlur,
+      error = _a.error,
+      isTouched = _a.isTouched;
+  return React__default.createElement(Textfield, {
+    key: key,
+    label: "".concat(field.label || key).concat(field.isRequired ? '*' : ''),
+    placeholder: field.placeholder,
+    name: "".concat(key),
+    isInverted: isInverted,
+    value: value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    infoMessage: field.info,
+    errorMessage: error && isTouched ? error : undefined
+  });
+};
+var NewsletterForm$1 = withLibTheme(NewsletterForm);
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { DynamicForm$1 as DynamicForm, NewsletterForm$1 as NewsletterForm };
+//# sourceMappingURL=sections_forms.js.map