@pinuts/bsr-uikit-relaunch 0.0.3

package/dist/items/Button/SubmitButton.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formBuilder = require("@pinuts/form-builder");
+var _Button = _interopRequireDefault(require("./Button.jsx"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const SubmitButton = _ref => {
+  let {
+    inputProps = {},
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, otherProps, {
+    inputProps: {
+      ...inputProps,
+      type: 'submit'
+    }
+  }));
+};
+SubmitButton.propTypes = {
+  inputProps: _propTypes.default.object
+};
+const FormBuilderSubmitButton = _ref2 => {
+  let {
+    config = {},
+    ...otherProps
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(SubmitButton, _extends({}, otherProps, config));
+};
+FormBuilderSubmitButton.propTypes = {
+  config: _propTypes.default.shape(SubmitButton.propTypes)
+};
+(0, _formBuilder.registerComponent)('SubmitButton', FormBuilderSubmitButton);
+var _default = exports.default = SubmitButton;

package/dist/items/DateInputField/DateInputField.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var dayjs = _interopRequireWildcard(require("dayjs"));
+var _formBuilder = require("@pinuts/form-builder");
+var _getUikitClassNames = require("../../utils/getUikitClassNames.js");
+var _FormFieldChildPropTypes = _interopRequireDefault(require("../FormFieldWrapper/FormFieldChildPropTypes.jsx"));
+var _FormFieldWrapper = _interopRequireDefault(require("../FormFieldWrapper/FormFieldWrapper.jsx"));
+var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // form-builder
+// Ansonsten setzt dateJs das Jahr auf 1900
+const isValidDate = value => value?.split('-')?.[0] > 1900 && dayjs(value).isValid();
+const getToday = () => dayjs().format('YYYY-MM-DD');
+const DateInputField = _ref => {
+  let {
+    minDate,
+    maxDate,
+    className,
+    readOnly,
+    inputProps,
+    onChange = () => {},
+    field = {},
+    value,
+    isRequired,
+    isInvalid,
+    ariaAttributes,
+    disabled,
+    viewMode,
+    dateFormat,
+    monthView = false,
+    dayOfMonth = 'first',
+    valueFormat = 'YYYY-MM-DD'
+  } = _ref;
+  const handleChange = event => {
+    if (monthView && isValidDate(event.target.value)) {
+      const selectedDate = dayjs(event.target.value);
+      onChange((dayOfMonth === 'first' ? selectedDate.startOf('month') : selectedDate.endOf('month')).format(valueFormat));
+    } else {
+      onChange(event.target.value);
+    }
+  };
+  const formControlClassNames = (0, _getUikitClassNames.getFormControlClassNames)(isInvalid, readOnly, disabled, className);
+  const usedValue = (0, _react.useMemo)(() => {
+    if (monthView && isValidDate(value)) {
+      return dayjs(value).format('YYYY-MM');
+    }
+    return value;
+  }, [value, monthView]);
+  if (viewMode) {
+    if (!value) {
+      return '';
+    }
+    return DateInputField.formFieldConfig.formatViewMode(value, dateFormat);
+  }
+  const maxDateToUse = maxDate === 'today' ? getToday() : maxDate;
+  const minDateToUse = minDate === 'today' ? getToday() : minDate;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-input-container"
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    type: monthView ? 'month' : 'date',
+    className: formControlClassNames,
+    required: isRequired,
+    pattern: monthView ? '' : '\\d{4}-\\d{2}-\\d{2}',
+    max: maxDateToUse,
+    min: minDateToUse
+  }, field, ariaAttributes, inputProps, {
+    value: usedValue || '',
+    onChange: handleChange
+  })));
+};
+DateInputField.propTypes = {
+  ..._FormFieldChildPropTypes.default,
+  minDate: _propTypes.default.string,
+  maxDate: _propTypes.default.string,
+  monthView: _propTypes.default.bool,
+  dayOfMonth: _propTypes.default.oneOf(['first', 'last']),
+  valueFormat: _propTypes.default.string,
+  className: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  key: _propTypes.default.string,
+  dateFormat: _propTypes.default.string
+};
+DateInputField.formFieldConfig = {
+  formatViewMode: function (value) {
+    let dateFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'DD.MM.YYYY';
+    return value ? dayjs(value).format(dateFormat) : '';
+  }
+};
+const HigherOrderDateInputField = (0, _withFieldGroup.default)(DateInputField);
+
+// wrap the field label, error message help text and more
+const WrappedDateInputField = props => {
+  return /*#__PURE__*/_react.default.createElement(_FormFieldWrapper.default, props, /*#__PURE__*/_react.default.createElement(HigherOrderDateInputField, props));
+};
+(0, _formBuilder.registerComponent)('DateInputField', WrappedDateInputField);
+(0, _formBuilder.registerComponent)('DateInputFieldbasic', HigherOrderDateInputField);
+var _default = exports.default = HigherOrderDateInputField;

package/dist/items/DropDownButton/DropDownButton.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _formBuilder = require("@pinuts/form-builder");
+var _Icon = _interopRequireDefault(require("../Icon/Icon.jsx"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const DropDownButton = _ref => {
+  let {
+    id,
+    className = '',
+    icon,
+    label = '',
+    ariaLabel,
+    style,
+    inputProps,
+    options = [],
+    color = 'orange'
+  } = _ref;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  if (!options?.length) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: style,
+    role: "group"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "btn-group",
+    role: "group"
+  }, /*#__PURE__*/_react.default.createElement("button", _extends({
+    type: "button",
+    id: id,
+    "aria-label": ariaLabel || label,
+    onClick: () => setIsOpen(state => !state),
+    className: _formBuilder.utils.getClassNames(['drop-down-toggle btn', color && `btn-${color}`, className]),
+    "aria-expanded": isOpen ? 'true' : 'false',
+    "data-bs-toggle": 'dropdown',
+    "aria-haspopup": 'true'
+  }, inputProps), label && /*#__PURE__*/_react.default.createElement("span", null, label), icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    config: {
+      ...icon
+    }
+  }), icon && !label && !ariaLabel ? 'no aria-label provided' : ''), /*#__PURE__*/_react.default.createElement("ul", {
+    "aria-labelledby": id,
+    className: 'dropdown-menu'
+  }, options?.map(_ref2 => {
+    let {
+      label,
+      value,
+      className,
+      ...otherProps
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: "dropdown-item",
+      key: `${label}-dropdown-item`
+    }, /*#__PURE__*/_react.default.createElement("button", _extends({
+      type: "button",
+      id: `dropdown-btn-${value}`
+    }, otherProps, {
+      "aria-disabled": otherProps.disabled && 'true',
+      className: _formBuilder.utils.getClassNames(['dropdown-btn', className])
+    }), label));
+  }))));
+};
+DropDownButton.propTypes = {
+  onClick: _propTypes.default.func,
+  color: _propTypes.default.string,
+  ariaDisabled: _propTypes.default.bool,
+  ariaExpanded: _propTypes.default.string,
+  components: _propTypes.default.array,
+  children: _propTypes.default.node,
+  value: _propTypes.default.string,
+  ariaLabel: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  inputProps: _propTypes.default.object,
+  label: _propTypes.default.string,
+  icon: _propTypes.default.object,
+  id: _propTypes.default.string,
+  options: _propTypes.default.array,
+  defaultValue: _propTypes.default.string
+};
+const FormBuilderDropDownButton = _ref3 => {
+  let {
+    config = {},
+    ...otherProps
+  } = _ref3;
+  return /*#__PURE__*/_react.default.createElement(DropDownButton, _extends({}, otherProps, config));
+};
+FormBuilderDropDownButton.propTypes = {
+  config: _propTypes.default.shape(DropDownButton.propTypes)
+};
+(0, _formBuilder.registerComponent)('DropDownButton', FormBuilderDropDownButton);
+var _default = exports.default = DropDownButton;

package/dist/items/DropzoneUploadField/DropzoneUploadField.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactDropzone = require("react-dropzone");
+var _formBuilder = require("@pinuts/form-builder");
+var _reactBootstrap = require("react-bootstrap");
+var _FormFieldChildPropTypes = _interopRequireDefault(require("../FormFieldWrapper/FormFieldChildPropTypes.jsx"));
+var _FormFieldWrapper = _interopRequireDefault(require("../FormFieldWrapper/FormFieldWrapper.jsx"));
+var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon.jsx"));
+var _DropzoneUploadFieldModule = _interopRequireDefault(require("./DropzoneUploadField.module.scss"));
+var _acceptedUploadTypeMapping = require("./acceptedUploadTypeMapping.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // form-builder
+const {
+  useField,
+  useFormikContext
+} = _formBuilder.formik;
+const {
+  getClassNames
+} = _formBuilder.utils;
+//accept-prop needs an object mit mimeType as keys and an array of file extensions as values
+const getFormattedAcceptesFileTypes = acceptedFileTypes => acceptedFileTypes?.reduce((newObj, type) => _acceptedUploadTypeMapping.ACCEPTED_UPLOAD_TYPE_MAPPING?.[type] ? {
+  ...newObj,
+  [type]: _acceptedUploadTypeMapping.ACCEPTED_UPLOAD_TYPE_MAPPING[type] || []
+} : newObj, {});
+const DropzoneUploadField = _ref => {
+  let {
+    viewMode,
+    field,
+    onChange = () => {},
+    ariaAttributes,
+    isInvalid,
+    readOnly,
+    disabled,
+    fieldIds,
+    label,
+    localeRejected,
+    acceptedFileTypes
+  } = _ref;
+  const [t] = (0, _reactI18next.useTranslation)();
+  // eslint-disable-next-line no-unused-vars
+  const [formikField, _meta, helpers] = useField(field.name);
+  const usedViewMode = (0, _react.useMemo)(() => readOnly || disabled || viewMode, [readOnly, disabled, viewMode]);
+  const {
+    status,
+    setStatus
+  } = useFormikContext();
+  const onDrop = (0, _react.useCallback)(acceptedFiles => {
+    helpers.setTouched(true);
+    helpers.setValue('');
+    setStatus({
+      ...status,
+      [formikField.name]: {
+        file: acceptedFiles[0]
+      }
+    });
+    onChange(acceptedFiles[0]);
+  }, [status, formikField.name, helpers, onChange, setStatus]);
+  const {
+    fileRejections,
+    getRootProps,
+    getInputProps
+  } = (0, _reactDropzone.useDropzone)({
+    onDrop: !usedViewMode ? onDrop : () => {},
+    noClick: usedViewMode,
+    noKeyboard: usedViewMode,
+    accept: getFormattedAcceptesFileTypes(acceptedFileTypes || []) || {}
+  });
+  const removeFile = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    helpers.setTouched(true);
+    if (status[formikField.name]) {
+      setStatus({
+        ...status,
+        [formikField.name]: null
+      });
+    } else {
+      helpers.setValue('');
+    }
+    onChange('');
+  };
+  return /*#__PURE__*/_react.default.createElement("section", {
+    className: getClassNames([!usedViewMode && 'container-fluid', _DropzoneUploadFieldModule.default.dropZoneWrapper, isInvalid && _DropzoneUploadFieldModule.default.isInvalid, usedViewMode && _DropzoneUploadFieldModule.default.disabled]),
+    "aria-labelledby": fieldIds.label
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, /*#__PURE__*/_react.default.createElement("div", getRootProps({
+    onDrop,
+    className: getClassNames(['dropzone', 'flex-fill', _DropzoneUploadFieldModule.default.fakeButton]),
+    role: 'button',
+    'aria-disabled': usedViewMode,
+    tabIndex: usedViewMode ? '-1' : '0',
+    ...ariaAttributes,
+    'aria-controls': fieldIds.fieldId,
+    'aria-labelledby': ''
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", _extends({}, getInputProps({
+    id: fieldIds.fieldId
+  }), {
+    accept: acceptedFileTypes?.join(',')
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: getClassNames([_DropzoneUploadFieldModule.default.insideDropzone, usedViewMode && _DropzoneUploadFieldModule.default.disabled, 'flex-fill', (status[formikField.name] || formikField.value || usedViewMode) && 'd-flex justify-content-start'])
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, label), !status[formikField.name] && !formikField.value ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-hbs-schwarz-60"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-center align-items-center text-gray"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: usedViewMode ? 'lock' : 'circlePlus',
+    height: "32",
+    width: "32",
+    className: "me-2"
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, usedViewMode ? 'Kein Dokument hochgeladen' : 'Datei auswählen oder in dieses Feld ziehen'), localeRejected && fileRejections.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-danger"
+  }, t(`${localeRejected}.${fileRejections[0]?.errors[0].code}`, {
+    filename: fileRejections[0]?.file.path
+  }))))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex mw-100 align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: getClassNames(['flex-shrink-0 flex-grow-0 align-items center me-0 pe-2', usedViewMode && 'ps-0'])
+  }, status[formikField.name] ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Spinner, {
+    animation: "grow",
+    role: "status",
+    variant: "secondary",
+    style: {
+      width: '48px',
+      height: '48px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, t(label), "...")) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: "fileText",
+    height: "48",
+    width: "48"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-fill"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-fill text-truncate",
+    title: status[formikField.name]?.file?.name || formikField?.value?.name
+  }, status[formikField.name]?.file?.name || formikField?.value?.name)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-gray"
+  }, [(status[formikField.name]?.file?.size || formikField?.value?.size) && `${(parseInt(status[formikField.name]?.file?.size || formikField?.value?.size, 10) / (1024 * 1024)).toFixed(2)}MB`, status[formikField.name]?.file?.type || formikField?.value?.type].filter(Boolean).join(', '))))))), !usedViewMode && (status[formikField.name] || formikField?.value) && /*#__PURE__*/_react.default.createElement("aside", {
+    className: "flex-shrink-0 flex-grow-0 d-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-1"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-label": 'Ausgewählte Datei entfernen',
+    className: "btn btn-tuerkis-20 btn-circular",
+    onClick: removeFile
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: "trash",
+    height: "16",
+    width: "16"
+  }))))));
+};
+DropzoneUploadField.propTypes = {
+  ..._FormFieldChildPropTypes.default,
+  acceptedFileTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+  localeRejected: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  key: _propTypes.default.string
+};
+DropzoneUploadField.formFieldConfig = {
+  labelIsLegend: true,
+  isFieldset: true
+};
+const HigherOrderDropzoneUploadField = (0, _withFieldGroup.default)(DropzoneUploadField);
+
+// wrap the field label, error message help text and more
+const WrappedDropzoneUploadField = props => {
+  return /*#__PURE__*/_react.default.createElement(_FormFieldWrapper.default, props, /*#__PURE__*/_react.default.createElement(HigherOrderDropzoneUploadField, props));
+};
+(0, _formBuilder.registerComponent)('DropzoneUploadField', WrappedDropzoneUploadField);
+(0, _formBuilder.registerComponent)('DropzoneUploadFieldBasic', HigherOrderDropzoneUploadField);
+var _default = exports.default = HigherOrderDropzoneUploadField;

package/dist/items/DropzoneUploadField/acceptedUploadTypeMapping.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ACCEPTED_UPLOAD_TYPE_MAPPING = void 0;
+const ACCEPTED_UPLOAD_TYPE_MAPPING = exports.ACCEPTED_UPLOAD_TYPE_MAPPING = {
+  // General file formats
+  'text/plain': ['.txt', '.text', '.log'],
+  'text/html': ['.html', '.htm'],
+  'text/css': ['.css'],
+  'text/csv': ['.csv'],
+  'application/pdf': ['.pdf'],
+  'application/rtf': ['.rtf'],
+  'application/xml': ['.xml'],
+  'application/json': ['.json'],
+  'application/zip': ['.zip'],
+  'application/x-7z-compressed': ['.7z'],
+  'application/x-rar-compressed': ['.rar'],
+  'application/msword': ['.doc'],
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx', '.docm'],
+  'application/vnd.ms-excel': ['.xls'],
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx', '.xlsm'],
+  'application/vnd.ms-powerpoint': ['.ppt'],
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.pptx', '.pptm'],
+  'application/vnd.oasis.opendocument.text': ['.odt'],
+  'application/vnd.oasis.opendocument.spreadsheet': ['.ods'],
+  'application/vnd.oasis.opendocument.presentation': ['.odp'],
+  'application/vnd.ms-outlook': ['.msg'],
+  'message/rfc822': ['.eml'],
+  // Image formats
+  'image/png': ['.png'],
+  'image/jpeg': ['.jpeg', '.jpg'],
+  'image/gif': ['.gif'],
+  'image/webp': ['.webp'],
+  'image/bmp': ['.bmp'],
+  'image/svg+xml': ['.svg'],
+  'image/tiff': ['.tiff', '.tif'],
+  // Audio formats
+  'audio/mpeg': ['.mp3'],
+  'audio/wav': ['.wav'],
+  'audio/ogg': ['.ogg'],
+  'audio/flac': ['.flac'],
+  'audio/aac': ['.aac'],
+  'audio/x-ms-wma': ['.wma'],
+  // Video formats
+  'video/mp4': ['.mp4'],
+  'video/x-msvideo': ['.avi'],
+  'video/x-matroska': ['.mkv'],
+  'video/quicktime': ['.mov'],
+  'video/webm': ['.webm'],
+  'video/x-flv': ['.flv'],
+  'video/x-ms-wmv': ['.wmv']
+};
+var _default = exports.default = ACCEPTED_UPLOAD_TYPE_MAPPING;

package/dist/items/FieldLabel/FieldLabel.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formBuilder = require("@pinuts/form-builder");
+var _reactI18next = require("react-i18next");
+var _reactRouterDom = require("react-router-dom");
+var _Icon = _interopRequireDefault(require("../../assets/Icon.jsx"));
+var _HTMLParserSanitized = require("../HTMLParserSanitized/HTMLParserSanitized.jsx");
+var _formModule = _interopRequireDefault(require("../../styles/form.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const FieldLabel = _ref => {
+  let {
+    id,
+    targetId,
+    labelText,
+    isRequired,
+    isInvalid,
+    isLegend,
+    isFocused,
+    viewMode,
+    stepId
+  } = _ref;
+  const [t] = (0, _reactI18next.useTranslation)();
+  // Doppelpunkte und HTML-Tags zerstören das i18n?
+  const usedLabelText = labelText && !labelText.includes(':') && !labelText.includes('<') ? t(labelText) : labelText;
+  const children = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, usedLabelText), isRequired && /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
+    className: _formBuilder.utils.getClassNames([_formModule.default.required, isInvalid && 'is-invalid'])
+  }, "*"));
+  if (viewMode) {
+    const ErrorTag = stepId ? _reactRouterDom.Link : 'div';
+    return !isInvalid ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "form-label"
+    }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, usedLabelText)) : /*#__PURE__*/_react.default.createElement(ErrorTag, _extends({
+      className: "form-label"
+    }, stepId ? {
+      to: `../${stepId}`
+    } : {}), usedLabelText, stepId && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: "chevronRight",
+      className: "my-1",
+      height: "16",
+      width: "16"
+    }));
+  }
+  const labelClassNames = _formBuilder.utils.getClassNames([_formModule.default.label, isFocused && _formModule.default.labelFocused]);
+  const outerComponentProps = {
+    id,
+    className: labelClassNames,
+    children
+  };
+  if (isLegend) {
+    return /*#__PURE__*/_react.default.createElement("legend", outerComponentProps);
+  }
+  return /*#__PURE__*/_react.default.createElement("label", _extends({}, outerComponentProps, {
+    htmlFor: targetId
+  }));
+};
+FieldLabel.propTypes = {
+  id: _propTypes.default.string,
+  targetId: _propTypes.default.string.isRequired,
+  isRequired: _propTypes.default.bool,
+  isFocused: _propTypes.default.bool,
+  isInvalid: _propTypes.default.bool,
+  labelText: _propTypes.default.string.isRequired,
+  isLegend: _propTypes.default.bool,
+  viewMode: _propTypes.default.bool,
+  stepId: _propTypes.default.string
+};
+var _default = exports.default = FieldLabel;

package/dist/items/FieldsetWrapper/FieldsetWrapper.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _uuid = require("uuid");
+var _reactI18next = require("react-i18next");
+var _formBuilder = require("@pinuts/form-builder");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// FormBuilder
+
+const FieldsetWrapper = _ref => {
+  let {
+    config,
+    components
+  } = _ref;
+  const {
+    label,
+    helpText,
+    headingLevel = '2'
+  } = config;
+  const [t] = (0, _reactI18next.useTranslation)();
+  const formId = (0, _react.useMemo)(() => (0, _uuid.v4)().slice(0, 6), []);
+  const HeadingTag = `h${headingLevel}`;
+  // Doppelpunkte und HTML-Tags zerstören das i18n?
+  const usedLabel = label && !label.includes(':') && !label.includes('<') ? t(label) : label;
+  const usedHelpText = helpText && !helpText.includes(':') && !helpText.includes('<') ? t(helpText) : helpText;
+  return /*#__PURE__*/_react.default.createElement("fieldset", {
+    className: "mb-4"
+  }, /*#__PURE__*/_react.default.createElement("legend", null, /*#__PURE__*/_react.default.createElement(HeadingTag, null, usedLabel), helpText && /*#__PURE__*/_react.default.createElement("p", {
+    className: "helper-text"
+  }, usedHelpText)), /*#__PURE__*/_react.default.createElement(_formBuilder.ComponentPopulator, {
+    formId: `${formId}-${label.replaceAll(' ', '')}-fieldset-wrapper`,
+    components: components
+  }));
+};
+FieldsetWrapper.propTypes = {
+  components: _propTypes.default.instanceOf(Array).isRequired,
+  config: _propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    helpText: _propTypes.default.string,
+    headingLevel: _propTypes.default.string
+  }).isRequired
+};
+(0, _formBuilder.registerComponent)('FieldsetWrapper', FieldsetWrapper);
+var _default = exports.default = FieldsetWrapper;