@pinuts/bsr-uikit-relaunch 0.0.3

package/dist/items/Modal/Modal.js

@@ -0,0 +1,109 @@
+"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 _Modal = _interopRequireDefault(require("react-bootstrap/Modal"));
+var _reactI18next = require("react-i18next");
+var _Button = _interopRequireDefault(require("../Button/Button.jsx"));
+var _ModalModule = _interopRequireDefault(require("./Modal.module.scss"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon.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 {
+  getClassNames
+} = _formBuilder.utils;
+const {
+  useUniqueIds
+} = _formBuilder.hooks;
+const Modal = (_ref, props) => {
+  let {
+    isOpen,
+    isAlert = false,
+    onHide,
+    onSubmit,
+    submitButtonText,
+    closeButtonText,
+    headerProps,
+    bodyProps,
+    footerProps,
+    noClose = false
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const uniqueId = useUniqueIds('modal');
+  return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({}, props, {
+    show: isOpen,
+    size: "lg"
+  }, headerProps.title && {
+    'aria-labelledby': uniqueId.fieldId
+  }, {
+    centered: true,
+    onEscapeKeyDown: noClose ? undefined : onHide,
+    className: _ModalModule.default.modalOuter,
+    backdrop: "static",
+    role: isAlert ? '   ' : 'dialog'
+  }), /*#__PURE__*/_react.default.createElement("div", null, headerProps.title && /*#__PURE__*/_react.default.createElement(_Modal.default.Header, {
+    className: getClassNames([headerProps.className, noClose ? '' : 'd-flex ', 'p-relative w-100'])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _ModalModule.default.headerInnerWrap
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    id: uniqueId.fieldId,
+    className: "w-100"
+  }, headerProps.title), !noClose && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    ariaLabel: t('bsrModal.closeButton'),
+    onClick: onHide,
+    color: "hbs-white",
+    rounded: true
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    color: "white",
+    className: _ModalModule.default.closeButtonIcon,
+    icon: "x"
+  }))))), /*#__PURE__*/_react.default.createElement(_Modal.default.Body, {
+    className: getClassNames([bodyProps.className])
+  }, bodyProps.children), footerProps && /*#__PURE__*/_react.default.createElement(_Modal.default.Footer, {
+    className: getClassNames([footerProps.className])
+  }, footerProps.children ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "row justify-content-center w-100"
+  }, footerProps.children) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "row justify-content-center w-100"
+  }, closeButtonText && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "col-4 m-1",
+    color: "tuerkis-20",
+    onClick: onHide,
+    ariaLabel: t(closeButtonText)
+  }, t(closeButtonText)), submitButtonText && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "col-4 m-1",
+    color: "hbs-blau",
+    onClick: onSubmit || onHide,
+    ariaLabel: t(submitButtonText)
+  }, t(submitButtonText)))));
+};
+Modal.propTypes = {
+  noClose: _propTypes.default.bool,
+  closeButtonText: _propTypes.default.string,
+  submitButtonText: _propTypes.default.string,
+  headerProps: _propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    children: _propTypes.default.node,
+    className: _propTypes.default.string
+  }),
+  bodyProps: _propTypes.default.shape({
+    children: _propTypes.default.node,
+    className: _propTypes.default.string
+  }),
+  footerProps: _propTypes.default.shape({
+    children: _propTypes.default.node,
+    className: _propTypes.default.string
+  }),
+  isAlert: _propTypes.default.bool,
+  isOpen: _propTypes.default.bool,
+  onHide: _propTypes.default.func,
+  onSubmit: _propTypes.default.func
+};
+var _default = exports.default = Modal;

package/dist/items/NumberInputField/NumberInputField.js

@@ -0,0 +1,142 @@
+"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 _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"));
+var _Button = _interopRequireDefault(require("../Button/Button.jsx"));
+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); } // form-builder
+const {
+  getClassNames
+} = _formBuilder.utils;
+const countDecimalPlaces = number => {
+  if (Math.floor(number) === number) return 0; // Wenn die Zahl eine ganze Zahl ist, gibt es keine Nachkommastellen
+
+  // Konvertiere die Zahl in einen String und finde die Stelle des Dezimaltrennzeichens
+  const decimalString = number.toString();
+  const decimalIndex = decimalString.indexOf('.');
+
+  // Wenn das Dezimaltrennzeichen nicht gefunden wurde, gibt es keine Nachkommastellen
+  if (decimalIndex === -1) return 0;
+
+  // Ansonsten berechne die Anzahl der Nachkommastellen
+  return decimalString.length - decimalIndex - 1;
+};
+const getCorrectNumberWithStep = (newValue, step) => Number.isInteger(step) ? newValue : newValue.toFixed(countDecimalPlaces(step));
+const NumberInputField = _ref => {
+  let {
+    className,
+    inputProps = {},
+    value,
+    field,
+    onChange = () => {},
+    ariaAttributes,
+    isInvalid,
+    readOnly,
+    disabled,
+    viewMode,
+    step = 1,
+    min = 0,
+    max = 1000
+  } = _ref;
+  const [numberValue, setNumberValue] = (0, _react.useState)(() => parseFloat(value || 0, 10));
+  (0, _react.useEffect)(() => setNumberValue(parseFloat(value || 0, 10)), [value]);
+  const usedChangeHandler = (0, _react.useMemo)(() => readOnly || disabled ? () => {} : newValue => {
+    const usedNewValue = getCorrectNumberWithStep(parseFloat(newValue, 10), step);
+    if (newValue >= parseFloat(min, 10) && newValue <= parseFloat(max, 10)) {
+      // Wenn value nicht rein gereicht wird, müssen wir den State selbst setzen, ansonsten übernimmt dies der useEffect
+      if (value === undefined) {
+        setNumberValue(usedNewValue);
+      }
+      onChange(usedNewValue);
+    }
+  }, [readOnly, disabled, onChange, value, step, min, max]);
+  const increment = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    usedChangeHandler(parseFloat(numberValue, 10) + parseFloat(step, 10));
+  }, [numberValue, usedChangeHandler, step]);
+  const decrement = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    usedChangeHandler(parseFloat(numberValue, 10) - parseFloat(step, 10));
+  }, [numberValue, usedChangeHandler, step]);
+  const handleInputChange = event => usedChangeHandler(event.target.value);
+  if (viewMode) {
+    return numberValue;
+  }
+  const formControlClassNames = (0, _getUikitClassNames.getFormControlClassNames)(isInvalid, readOnly, disabled, className);
+  const buttonInputProps = {
+    tabIndex: -1,
+    'aria-hidden': true,
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    disabled,
+    'aria-disabled': disabled,
+    readOnly,
+    'aria-readonly': readOnly
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex flex-row"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    color: "tuerkis-20",
+    circular: true,
+    onClick: decrement,
+    ariaLabel: "" // Button is hidden from screenreaders
+    ,
+    inputProps: buttonInputProps
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: "minus",
+    height: "16",
+    width: "16"
+  })), /*#__PURE__*/_react.default.createElement("input", _extends({
+    className: getClassNames(['mx-2 ps-4', formControlClassNames]),
+    type: "number",
+    step: step
+  }, field, ariaAttributes, inputProps, {
+    value: value === '' ? '' : numberValue,
+    min: min,
+    max: max,
+    onChange: handleInputChange,
+    inputMode: "numeric"
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    color: "tuerkis-20",
+    circular: true,
+    onClick: increment,
+    ariaLabel: "" // Button is hidden from screenreaders
+    ,
+    inputProps: buttonInputProps
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: "plus",
+    height: "16",
+    width: "16"
+  })));
+};
+NumberInputField.propTypes = {
+  ..._FormFieldChildPropTypes.default,
+  step: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  max: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  min: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+const HigherOrderNumberInputField = (0, _withFieldGroup.default)(NumberInputField);
+
+// wrap the field label, error message help text and more
+const WrappedNumberInputField = props => {
+  return /*#__PURE__*/_react.default.createElement(_FormFieldWrapper.default, props, /*#__PURE__*/_react.default.createElement(HigherOrderNumberInputField, props));
+};
+(0, _formBuilder.registerComponent)('NumberInputField', WrappedNumberInputField);
+(0, _formBuilder.registerComponent)('NumberInputFieldBasic', HigherOrderNumberInputField);
+var _default = exports.default = HigherOrderNumberInputField;

package/dist/items/PictureUploadRowField/PictureUploadRowField.js

@@ -0,0 +1,280 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDropzone = require("react-dropzone");
+var _formBuilder = require("@pinuts/form-builder");
+var _reactI18next = require("react-i18next");
+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 _PictureUploadRowFieldModule = _interopRequireDefault(require("./PictureUploadRowField.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 PictureUploadRowField = _ref => {
+  let {
+    viewMode,
+    field,
+    ariaAttributes,
+    isInvalid,
+    readOnly,
+    disabled,
+    fieldIds,
+    uploadConfig
+  } = _ref;
+  // eslint-disable-next-line no-unused-vars
+  const [formikField, _meta, helpers] = useField(field.name);
+  const [t] = (0, _reactI18next.useTranslation)();
+  const usedViewMode = (0, _react.useMemo)(() => readOnly || disabled || viewMode, [readOnly, disabled, viewMode]);
+  const {
+    status,
+    setStatus
+  } = useFormikContext();
+  const [previewFiles, setPreviewFiles] = (0, _react.useState)([]); // State to hold the files and previews
+
+  (0, _react.useEffect)(() => {
+    if (formikField.value && formikField.value.length > 0 && previewFiles.length === 0) {
+      const initFiles = formikField.value.map(file => Object.assign(file, {
+        preview: URL.createObjectURL(file)
+      }));
+      setPreviewFiles(initFiles);
+    }
+  }, [formikField.value, previewFiles.length]);
+  const uploadFilesToUM = (0, _react.useCallback)(async uploadFiles => {
+    const successfulUploads = [];
+    for (const file of uploadFiles) {
+      const formData = new FormData();
+      formData.append(file.name, file);
+      if (uploadConfig) {
+        formData.append('uploadConfig', JSON.stringify(uploadConfig));
+      }
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        const response = await fetch(uploadConfig.uploadPath, {
+          method: 'POST',
+          body: formData,
+          headers: {
+            'X-CSRF-Safe': 'Yes'
+          }
+        });
+        if (response.ok) {
+          // eslint-disable-next-line no-await-in-loop
+          const data = await response.json();
+          if (data && data.success && data.files && data.files.length > 0) {
+            successfulUploads.push(...data.files);
+          }
+        }
+      } catch (error) {
+        console.error('Upload error for file:', file.name, error);
+      }
+    }
+    return successfulUploads;
+  }, [uploadConfig]);
+  const onChange = (0, _react.useCallback)(async acceptedFiles => {
+    const uploadableFiles = [...previewFiles, ...acceptedFiles.map(file => Object.assign(file, {
+      preview: URL.createObjectURL(file)
+    }))];
+    const uploadedFiles = await uploadFilesToUM(uploadableFiles);
+    if (uploadedFiles) {
+      const filteredUploadableFiles = uploadableFiles.map(uploadableFile => {
+        const found = uploadedFiles.find(uploadedFile => uploadedFile.name === uploadableFile.name);
+        if (found) {
+          const mergedObject = uploadableFile;
+          mergedObject.uuid = found.uuid;
+          return mergedObject;
+        }
+        return uploadableFile;
+      }).filter(uploadableFile => {
+        return uploadedFiles.some(uploadedFile => uploadedFile.name === uploadableFile.name);
+      });
+      setPreviewFiles(filteredUploadableFiles);
+      helpers.setTouched(true);
+      helpers.setValue(filteredUploadableFiles);
+      setStatus({
+        ...status,
+        [formikField.name]: uploadedFiles
+      });
+    }
+  }, [previewFiles, formikField.name, helpers, setStatus, status, uploadFilesToUM]);
+  const onDrop = (0, _react.useCallback)(acceptedFiles => {
+    onChange(acceptedFiles);
+  }, [onChange]);
+  const {
+    fileRejections,
+    getRootProps,
+    getInputProps
+  } = (0, _reactDropzone.useDropzone)({
+    onDrop: !usedViewMode ? onDrop : () => {},
+    noClick: usedViewMode || previewFiles.length >= uploadConfig.maxFiles,
+    // Disable click if view mode is used or maxFiles limit is reached
+    noKeyboard: usedViewMode,
+    accept: getFormattedAcceptesFileTypes(uploadConfig.acceptedFileTypes || []) || {},
+    maxFiles: uploadConfig.maxFiles,
+    maxSize: uploadConfig.maxSize
+  });
+  const removeFile = async (e, index, uuid) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const response = await fetch(`${uploadConfig.deletePath}/${uuid}`, {
+        method: 'DELETE',
+        headers: {
+          'X-CSRF-Safe': 'Yes'
+        }
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data && data.success) {
+          setPreviewFiles(previewFiles.filter((file, i) => i !== index));
+          helpers.setTouched(true);
+          if (status[formikField.name]) {
+            setStatus({
+              ...status,
+              [formikField.name]: null
+            });
+          } else {
+            helpers.setValue('');
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error removing file by uuid:', uuid, error);
+    }
+  };
+  const fileRejectionItems = fileRejections.map(_ref2 => {
+    let {
+      file,
+      errors
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: file.path,
+      className: 'filename'
+    }, file.name, ' ', "-", Math.floor(file.size / 1024), ' ', "kb", /*#__PURE__*/_react.default.createElement("ul", null, errors.map(e => /*#__PURE__*/_react.default.createElement("li", {
+      key: e.code,
+      className: 'errorMsg'
+    }, t(`bsrItems.DropzoneUploadField.${e.code}`, {
+      maxFiles: uploadConfig.maxFiles,
+      maxFileSize: uploadConfig.maxSize / 1000000
+    })))));
+  });
+  const createThumbs = () => {
+    if (viewMode && field.value.length > 0) {
+      const uuids = field.value.map(file => file.uuid);
+      return uuids.map(uuid => {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: _PictureUploadRowFieldModule.default.thumb,
+          key: uuid
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: _PictureUploadRowFieldModule.default.thumbInner
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          src: uploadConfig.previewPath.replace(':uuid', uuid),
+          alt: '',
+          className: _PictureUploadRowFieldModule.default.img
+        })));
+      });
+    }
+    return previewFiles.map((file, index) => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _PictureUploadRowFieldModule.default.thumb,
+        key: file.name
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _PictureUploadRowFieldModule.default.thumbInner
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: file.preview,
+        alt: '',
+        className: _PictureUploadRowFieldModule.default.img,
+        onLoad: () => {
+          URL.revokeObjectURL(file.preview);
+        }
+      }), /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        "aria-label": 'Ausgewählte Datei entfernen',
+        className: `${_PictureUploadRowFieldModule.default.deleteBtn}`,
+        onClick: e => removeFile(e, index, file.uuid)
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icon: "trash",
+        height: "12",
+        width: "12",
+        stroke: '#fff'
+      }))));
+    });
+  };
+
+  // Cleanup previews on unmount
+  (0, _react.useEffect)(() => {
+    return () => previewFiles.forEach(file => URL.revokeObjectURL(file.preview));
+  }, [previewFiles]);
+  return /*#__PURE__*/_react.default.createElement("section", {
+    className: getClassNames(['container-fluid', _PictureUploadRowFieldModule.default.dropZoneWrapper, isInvalid && _PictureUploadRowFieldModule.default.isInvalid
+    // usedViewMode && styles.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', _PictureUploadRowFieldModule.default.fakeButton]),
+    role: 'button',
+    'aria-disabled': usedViewMode || previewFiles.length >= uploadConfig.maxFiles,
+    // Reflect disabled state in ARIA attributes
+    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: uploadConfig.acceptedFileTypes?.join(',')
+  })), /*#__PURE__*/_react.default.createElement("aside", {
+    className: `${_PictureUploadRowFieldModule.default.thumbsContainer} d-flex`
+  }, createThumbs(), previewFiles.length < uploadConfig.maxFiles && /*#__PURE__*/_react.default.createElement("div", {
+    className: _PictureUploadRowFieldModule.default.addBtnContainer
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: usedViewMode ? 'lock' : 'circlePlus',
+    height: "24",
+    width: "24",
+    className: ""
+  }))))))), /*#__PURE__*/_react.default.createElement("ul", null, fileRejectionItems));
+};
+PictureUploadRowField.propTypes = {
+  ..._FormFieldChildPropTypes.default,
+  acceptedFileTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+  localeRejected: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  key: _propTypes.default.string,
+  maxFiles: _propTypes.default.number
+};
+PictureUploadRowField.formFieldConfig = {
+  labelIsLegend: true,
+  isFieldset: true
+};
+const HigherOrderDropzoneUploadField = (0, _withFieldGroup.default)(PictureUploadRowField);
+
+// wrap the field label, error message help text and more
+const WrappedPictureUploadRowField = props => {
+  return /*#__PURE__*/_react.default.createElement(_FormFieldWrapper.default, props, /*#__PURE__*/_react.default.createElement(HigherOrderDropzoneUploadField, props));
+};
+(0, _formBuilder.registerComponent)('PictureUploadRowField', WrappedPictureUploadRowField);
+(0, _formBuilder.registerComponent)('PictureUploadRowFieldBasic', HigherOrderDropzoneUploadField);
+var _default = exports.default = HigherOrderDropzoneUploadField;

package/dist/items/PictureUploadRowField/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/SectionSpinner/SectionSpinner.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Spinner = _interopRequireDefault(require("react-bootstrap/Spinner"));
+var _formBuilder = require("@pinuts/form-builder");
+var _reactI18next = require("react-i18next");
+var _FormFieldChildPropTypes = _interopRequireDefault(require("../FormFieldWrapper/FormFieldChildPropTypes.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 SectionSpinner = _ref => {
+  let {
+    className,
+    inputProps = {},
+    label = 'Lädt gerade',
+    variant = 'primary',
+    animation = 'grow',
+    size = ''
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: _formBuilder.utils.getClassNames(['container', className])
+  }, inputProps), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row justify-content-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-auto"
+  }, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    animation: animation,
+    variant: variant,
+    role: "status",
+    size: size
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, t(label), "...")))));
+};
+SectionSpinner.propTypes = {
+  ..._FormFieldChildPropTypes.default,
+  variant: _propTypes.default.string,
+  animation: _propTypes.default.string,
+  size: _propTypes.default.string
+};
+(0, _formBuilder.registerComponent)('SectionSpinner', SectionSpinner);
+var _default = exports.default = SectionSpinner;