@blateral/b.kit 2.3.2-beta.1.0 → 2.4.0

package/esm/sections_forms.js

@@ -1,1405 +0,0 @@
-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-c387bdc6.js';
-import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-acf2e2bb.js';
-import { S as Section, m as mapToBgMode, W as Wrapper } from './Wrapper-1cac758b.js';
-import { useFormik } from 'formik';
-import { A as Actions } from './Actions-8b4a4d2f.js';
-import { B as Button } from './Button-71376927.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-851d473a.js';
-import { B as ButtonGhost } from './ButtonGhost-6876b67f.js';
-import { C as Checkbox } from './Checkbox-4daef7a4.js';
-import { C as Copy } from './Copy-bca0854c.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