@chayns-components/gallery 5.0.53 → 5.0.56

package/AGENTS.md

@@ -1,45 +1,29 @@
 # @chayns-components/gallery
 
-React component package providing `Gallery` for chayns applications.
+React component package providing 3 documented components for chayns applications.
 
-Documented components: `Gallery`.
+Documented components: `Gallery`, `GalleryEditor`, `GalleryViewer`.
 
 ## Import
 
 ```ts
-import { Gallery } from '@chayns-components/gallery';
+import { Gallery, GalleryEditor, GalleryViewer } from '@chayns-components/gallery';
 ```
 
 ## Typical Usage
 
 ```tsx
 <Gallery
-    files={[
-                {
-                    id: 'first-image',
-                    file: {
-                        id: '1',
-                        url: 'https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png',
-                    },
-                },
-                {
-                    id: 'second-image',
-                    file: {
-                        id: '2',
-                        url: 'https://tsimg.cloud/77896-21884/54a117f35e5fb57520e64471461af5491c0eff06.png',
-                    },
-                },
-                {
-                    id: 'third-image',
-                    file: {
-                        id: '3',
-                        url: 'https://tsimg.cloud/77896-21884/25399416f38c1d960f521a3530c8a2bc70a88bb9.png',
-                    },
-                },
-            ]}
+    files={galleryStoryFiles}
 />
 ```
 
+## Components
+
+- `Gallery`
+- `GalleryEditor`
+- `GalleryViewer`
+
 ## Gallery
 
 `Gallery` is exported by `@chayns-components/gallery` and should be imported from the public package entry point.
@@ -56,29 +40,7 @@ import { Gallery } from '@chayns-components/gallery';
 
 ```tsx
 <Gallery
-    files={[
-                {
-                    id: 'first-image',
-                    file: {
-                        id: '1',
-                        url: 'https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png',
-                    },
-                },
-                {
-                    id: 'second-image',
-                    file: {
-                        id: '2',
-                        url: 'https://tsimg.cloud/77896-21884/54a117f35e5fb57520e64471461af5491c0eff06.png',
-                    },
-                },
-                {
-                    id: 'third-image',
-                    file: {
-                        id: '3',
-                        url: 'https://tsimg.cloud/77896-21884/25399416f38c1d960f521a3530c8a2bc70a88bb9.png',
-                    },
-                },
-            ]}
+    files={galleryStoryFiles}
 />
 ```
 
@@ -86,30 +48,18 @@ import { Gallery } from '@chayns-components/gallery';
 
 ```tsx
 <Gallery
-    files={[
-                {
-                    id: 'first-image',
-                    file: {
-                        id: '1',
-                        url: 'https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png',
-                    },
-                },
-                {
-                    id: 'second-image',
-                    file: {
-                        id: '2',
-                        url: 'https://tsimg.cloud/77896-21884/54a117f35e5fb57520e64471461af5491c0eff06.png',
-                    },
-                },
-                {
-                    id: 'third-image',
-                    file: {
-                        id: '3',
-                        url: 'https://tsimg.cloud/77896-21884/25399416f38c1d960f521a3530c8a2bc70a88bb9.png',
-                    },
-                },
-            ]}
+    files={galleryStoryFiles.slice(0, 3)}
     isEditMode
+    maxFiles={6}
+/>
+```
+
+#### Wrapper Read Only Square
+
+```tsx
+<Gallery
+    files={galleryViewerSquareFiles}
+    viewMode={GalleryViewMode.SQUARE}
 />
 ```
 
@@ -129,3 +79,116 @@ No additional exported types documented.
 ### Anti Patterns
 
 - Avoid imports from internal paths such as `@chayns-components/gallery/src/...`; always use the public package export.
+## GalleryEditor
+
+`GalleryEditor` is exported by `@chayns-components/gallery` and should be imported from the public package entry point.
+
+### Import
+
+```ts
+import { GalleryEditor } from '@chayns-components/gallery';
+```
+
+### Examples
+
+#### General
+
+```tsx
+<GalleryEditor
+    allowDragAndDrop={false}
+    fileMinWidth={100}
+    files={galleryStoryFiles.slice(0, 3)}
+    maxFiles={6}
+/>
+```
+
+#### Reached Max Files
+
+```tsx
+<GalleryEditor
+    allowDragAndDrop={false}
+    fileMinWidth={100}
+    files={galleryStoryFiles.slice(0, 4)}
+    maxFiles={4}
+/>
+```
+
+### Props
+
+No prop documentation available.
+
+### Types
+
+No additional exported types documented.
+
+### Usage Notes
+
+- Import `GalleryEditor` directly from `@chayns-components/gallery` instead of internal source paths.
+- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
+
+### Anti Patterns
+
+- Avoid imports from internal paths such as `@chayns-components/gallery/src/...`; always use the public package export.
+## GalleryViewer
+
+`GalleryViewer` is exported by `@chayns-components/gallery` and should be imported from the public package entry point.
+
+### Import
+
+```ts
+import { GalleryViewer } from '@chayns-components/gallery';
+```
+
+### Examples
+
+#### General
+
+```tsx
+<GalleryViewer
+    files={galleryStoryFiles}
+    viewMode={GalleryViewMode.GRID}
+/>
+```
+
+#### Square Mode
+
+```tsx
+<GalleryViewer
+    files={galleryViewerSquareFiles}
+    viewMode={GalleryViewMode.SQUARE}
+/>
+```
+
+#### Single Item Fallback Ratio
+
+```tsx
+<GalleryViewer
+    files={[
+            {
+                id: 'single-fallback-image',
+                file: {
+                    id: 'fallback-1',
+                    url: 'https://picsum.photos/id/1025/1200/900',
+                },
+            },
+        ]}
+    viewMode={GalleryViewMode.GRID}
+/>
+```
+
+### Props
+
+No prop documentation available.
+
+### Types
+
+No additional exported types documented.
+
+### Usage Notes
+
+- Import `GalleryViewer` directly from `@chayns-components/gallery` instead of internal source paths.
+- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
+
+### Anti Patterns
+
+- Avoid imports from internal paths such as `@chayns-components/gallery/src/...`; always use the public package export.

package/lib/cjs/components/Gallery.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _core = require("@chayns-components/core");
-var _chaynsApi = require("chayns-api");
-var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("uuid");
+var _react = _interopRequireDefault(require("react"));
+var _GalleryEditor = _interopRequireDefault(require("./gallery-editor/GalleryEditor"));
+var _GalleryViewer = _interopRequireDefault(require("./gallery-viewer/GalleryViewer"));
 var _gallery = require("../types/gallery");
-var _file = require("../utils/file");
-var _AddFile = _interopRequireDefault(require("./add-file/AddFile"));
-var _GalleryItem = _interopRequireDefault(require("./gallery-item/GalleryItem"));
-var _Gallery = require("./Gallery.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Gallery = ({
   allowDragAndDrop = false,
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
@@ -26,326 +20,19 @@ const Gallery = ({
   onFileCountChange,
   onRemove,
   viewMode = _gallery.GalleryViewMode.GRID
-}) => {
-  const [fileItems, setFileItems] = (0, _react.useState)([]);
-
-  /**
-   * This function adds a previewUrl to fileItems
-   */
-  const handlePreviewUrlCallback = (previewUrl, file) => {
-    setFileItems(prevState => prevState.map(prevFile => {
-      if (prevFile.id === file.id) {
-        return {
-          ...prevFile,
-          previewUrl
-        };
-      }
-      return prevFile;
-    }));
-  };
-  const callDuplicateFileDialog = (0, _react.useCallback)(() => {
-    (0, _chaynsApi.createDialog)({
-      type: _chaynsApi.DialogType.ALERT,
-      text: doubleFileDialogMessage
-    });
-  }, [doubleFileDialogMessage]);
-
-  /**
-   * This function adds uploaded files to fileItems
-   */
-  const handleUploadFileCallback = (0, _react.useCallback)((file, uploadedFile) => {
-    setFileItems(prevState => {
-      const updatedState = prevState.map(prevFile => {
-        var _prevFile$uploadedFil;
-        if (((_prevFile$uploadedFil = prevFile.uploadedFile) === null || _prevFile$uploadedFil === void 0 ? void 0 : _prevFile$uploadedFil.url) === uploadedFile.url) {
-          callDuplicateFileDialog();
-          return undefined;
-        }
-        if (prevFile.id === file.id) {
-          if (typeof onAdd === 'function') {
-            const prevElement = prevState.find(({
-              uploadedFile: newUploadedFile
-            }) => (newUploadedFile === null || newUploadedFile === void 0 ? void 0 : newUploadedFile.url) === (uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.url));
-            if (!prevElement) {
-              onAdd({
-                file: uploadedFile,
-                id: file.id
-              });
-            }
-          }
-          return {
-            ...prevFile,
-            uploadedFile,
-            state: 'uploaded'
-          };
-        }
-        return prevFile;
-      });
-      const tmp = [];
-      updatedState.forEach(updatedFile => {
-        if (updatedFile !== undefined) {
-          tmp.push(updatedFile);
-        }
-      });
-      return tmp ?? [];
-    });
-  }, [callDuplicateFileDialog, onAdd]);
-
-  /**
-   * Returns the current count to check if all files are uploaded
-   */
-  (0, _react.useEffect)(() => {
-    if (typeof onFileCountChange === 'function') {
-      onFileCountChange(fileItems.length);
-    }
-  }, [fileItems.length, onFileCountChange]);
-
-  /**
-   * Prepares files for previewUrl and upload
-   */
-  (0, _react.useEffect)(() => {
-    const filesToGeneratePreview = fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
-    const filesToUpload = fileItems.filter(file => !file.uploadedFile && file.state !== 'uploading');
-    filesToGeneratePreview.forEach(file => {
-      if (!file.file) {
-        return;
-      }
-      if (file.file.type.includes('video/')) {
-        (0, _file.generateVideoThumbnail)({
-          file: file.file,
-          callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
-        });
-        return;
-      }
-      (0, _file.generatePreviewUrl)({
-        file: file.file,
-        callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
-      });
-    });
-    filesToUpload.forEach(file => {
-      setFileItems(prevState => prevState.map(prevFile => {
-        if (prevFile.id === file.id) {
-          return {
-            ...prevFile,
-            state: 'uploading'
-          };
-        }
-        return prevFile;
-      }));
-      void (0, _core.uploadFile)({
-        fileToUpload: file,
-        callback: UploadedFile => handleUploadFileCallback(file, UploadedFile)
-      });
-    });
-  }, [fileItems, handleUploadFileCallback]);
-
-  /**
-   * This function formats and adds files to fileItems
-   */
-  const handleAddFiles = (0, _react.useCallback)(filesToAdd => {
-    const newFileItems = [];
-    filesToAdd.forEach(file => {
-      if (file && !(0, _file.filterDuplicateFile)({
-        files: fileItems,
-        newFile: file
-      })) {
-        newFileItems.push({
-          id: (0, _uuid.v4)(),
-          file,
-          state: 'none'
-        });
-      }
-    });
-    let tmp = newFileItems;
-    if (maxFiles) {
-      tmp = newFileItems.slice(0, maxFiles - (fileItems.length + filesToAdd.length - 1));
-    }
-    setFileItems(prevState => [...prevState, ...tmp]);
-  }, [fileItems, maxFiles]);
-
-  /**
-   * This function adds external files to fileItems
-   */
-  (0, _react.useEffect)(() => {
-    if (files) {
-      const newFileItems = [];
-      files.forEach(file => {
-        newFileItems.push({
-          id: file.id ?? (0, _uuid.v4)(),
-          uploadedFile: file.file,
-          file: undefined,
-          state: 'uploaded',
-          previewUrl: undefined
-        });
-      });
-      setFileItems(prevState => {
-        const updatedItems = prevState.map(prevItem => {
-          const newItem = newFileItems.find(item => item.uploadedFile && item.uploadedFile.url === (prevItem.uploadedFile && prevItem.uploadedFile.url));
-          return newItem || prevItem;
-        });
-        return updatedItems.concat(newFileItems.filter(newItem => !prevState.some(prevItem => prevItem.uploadedFile && newItem.uploadedFile && prevItem.uploadedFile.url === newItem.uploadedFile.url)));
-      });
-    }
-  }, [files]);
-
-  /**
-   * This function deletes a selected file from the file list
-   */
-  const handleDeleteFile = (0, _react.useCallback)(id => {
-    let fileToDelete;
-    const filteredFiles = fileItems.filter(file => {
-      const fileId = file.id;
-      if (fileId === id && file.uploadedFile) {
-        fileToDelete = {
-          file: file.uploadedFile,
-          id
-        };
-      }
-      return fileId !== id;
-    });
-    setFileItems(filteredFiles);
-    if (!fileToDelete || typeof onRemove !== 'function') {
-      return;
-    }
-    onRemove(fileToDelete);
-  }, [fileItems, onRemove]);
-
-  /**
-   * This function handles the drag and drop
-   */
-  const handleDrop = (0, _react.useCallback)(e => {
-    if (!allowDragAndDrop) {
-      return;
-    }
-    e.preventDefault();
-    const draggedFiles = Array.from(e.dataTransfer.files);
-    handleAddFiles(draggedFiles);
-  }, [allowDragAndDrop, handleAddFiles]);
-
-  /**
-   * Opens the files in a slideShow
-   */
-  const openFiles = (0, _react.useCallback)(file => {
-    let startIndex = 0;
-    try {
-      startIndex = fileItems.findIndex(item => item.id === file.id);
-      const items = fileItems.map(item => {
-        var _item$uploadedFile;
-        return {
-          url: ((_item$uploadedFile = item.uploadedFile) === null || _item$uploadedFile === void 0 ? void 0 : _item$uploadedFile.url.replace('_0.mp4', '.mp4')) ?? '',
-          mediaType: item.uploadedFile && 'thumbnailUrl' in item.uploadedFile ? _chaynsApi.MediaType.VIDEO : _chaynsApi.MediaType.IMAGE
-        };
-      });
-
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      void (0, _chaynsApi.openMedia)({
-        items,
-        startIndex
-      });
-    } catch (_) {
-      if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {
-        void (0, _chaynsApi.openVideo)({
-          url: file.uploadedFile.url
-        });
-      } else {
-        const imageFiles = [];
-        fileItems.forEach(({
-          uploadedFile
-        }) => {
-          if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {
-            imageFiles.push({
-              url: uploadedFile.url
-            });
-          }
-        });
-        startIndex = imageFiles.findIndex(item => {
-          var _file$uploadedFile;
-          return item.url === ((_file$uploadedFile = file.uploadedFile) === null || _file$uploadedFile === void 0 ? void 0 : _file$uploadedFile.url);
-        });
-        const startFile = imageFiles.shift();
-        if (!startFile) {
-          return;
-        }
-        void (0, _chaynsApi.openImage)({
-          items: [startFile, ...imageFiles],
-          startIndex
-        });
-      }
-    }
-  }, [fileItems]);
-
-  /**
-   * Returns the ratio of the single file
-   */
-  const ratio = (0, _react.useMemo)(() => {
-    var _fileItems$;
-    switch (fileItems.length) {
-      case 0:
-        return 0;
-      case 1:
-        return Math.max(((_fileItems$ = fileItems[0]) === null || _fileItems$ === void 0 || (_fileItems$ = _fileItems$.uploadedFile) === null || _fileItems$ === void 0 ? void 0 : _fileItems$.ratio) ?? 1, 1);
-      case 2:
-        return 2;
-      case 3:
-        return 3;
-      default:
-        return 1;
-    }
-  }, [fileItems]);
-  const galleryContent = (0, _react.useMemo)(() => {
-    const combinedFilesLength = fileItems.length;
-    if (isEditMode) {
-      const items = fileItems.map(file => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
-        key: file.id,
-        fileItem: file,
-        isEditMode: true,
-        onClick: openFiles,
-        handleDeleteFile: handleDeleteFile
-      }));
-      if (maxFiles && maxFiles <= combinedFilesLength) {
-        return items;
-      }
-      items.push(/*#__PURE__*/_react.default.createElement(_AddFile.default, {
-        key: "add_file",
-        onAdd: handleAddFiles
-      }));
-      return items;
-    }
-    const shortedFiles = fileItems.slice(0, 4);
-    return shortedFiles.map((file, index) => {
-      let imageRatio = 1;
-      if (viewMode === _gallery.GalleryViewMode.GRID) {
-        if (combinedFilesLength === 1) {
-          var _fileItems$2;
-          imageRatio = ((_fileItems$2 = fileItems[0]) === null || _fileItems$2 === void 0 || (_fileItems$2 = _fileItems$2.uploadedFile) === null || _fileItems$2 === void 0 ? void 0 : _fileItems$2.ratio) ?? 1;
-        } else if (combinedFilesLength === 2 && (index === 0 || index === 1)) {
-          imageRatio = 0.5;
-        } else if (index === 0 && combinedFilesLength > 2 || combinedFilesLength === 3 && (index === 1 || index === 2)) {
-          imageRatio = 1.5;
-        }
-      }
-      return /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
-        key: file.id,
-        fileItem: file,
-        isEditMode: false,
-        handleDeleteFile: handleDeleteFile,
-        onClick: openFiles,
-        ratio: imageRatio,
-        remainingItemsLength: combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined
-      });
-    });
-  }, [fileItems, isEditMode, maxFiles, handleAddFiles, openFiles, handleDeleteFile, viewMode]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, isEditMode ? /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryEditModeWrapper, {
-    $fileMinWidth: fileMinWidth,
-    onDragOver: e => e.preventDefault(),
-    onDrop: e => void handleDrop(e)
-  }, galleryContent) : /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemWrapper, {
-    $ratio: ratio,
-    $uploadedFileLength: fileItems.length,
-    $viewMode: viewMode
-  }, galleryContent)), [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop]);
-};
+}) => isEditMode ? /*#__PURE__*/_react.default.createElement(_GalleryEditor.default, {
+  allowDragAndDrop: allowDragAndDrop,
+  doubleFileDialogMessage: doubleFileDialogMessage,
+  fileMinWidth: fileMinWidth,
+  files: files,
+  maxFiles: maxFiles,
+  onAdd: onAdd,
+  onFileCountChange: onFileCountChange,
+  onRemove: onRemove
+}) : /*#__PURE__*/_react.default.createElement(_GalleryViewer.default, {
+  files: files,
+  viewMode: viewMode
+});
 Gallery.displayName = 'Gallery';
 var _default = exports.default = Gallery;
 //# sourceMappingURL=Gallery.js.map

package/lib/cjs/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_uuid","_gallery","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GalleryViewMode","GRID","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","useCallback","createDialog","type","DialogType","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","_prevFile$uploadedFil","url","undefined","prevElement","find","newUploadedFile","state","tmp","forEach","updatedFile","push","useEffect","length","filesToGeneratePreview","filter","filesToUpload","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","filterDuplicateFile","newFile","uuidv4","slice","updatedItems","prevItem","newItem","item","concat","some","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","items","_item$uploadedFile","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","_","openVideo","imageFiles","_file$uploadedFile","startFile","shift","openImage","ratio","useMemo","_fileItems$","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","index","imageRatio","_fileItems$2","remainingItemsLength","StyledGallery","StyledGalleryEditModeWrapper","$fileMinWidth","onDragOver","onDrop","StyledGalleryItemWrapper","$ratio","$uploadedFileLength","$viewMode","displayName","_default","exports"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import {\n    Image,\n    uploadFile,\n    Video,\n    type FileItem,\n    type InternalFileItem,\n} from '@chayns-components/core';\nimport {\n    createDialog,\n    DialogType,\n    MediaType,\n    openImage,\n    OpenImageItem,\n    openMedia,\n    OpenMediaItem,\n    openVideo,\n} from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { GalleryViewMode } from '../types/gallery';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n    StyledGallery,\n    StyledGalleryEditModeWrapper,\n    StyledGalleryItemWrapper,\n} from './Gallery.styles';\n\nexport type GalleryProps = {\n    /**\n     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * The message that should be displayed if a File is already given.\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * The minimum width of a file in the edit mode\n     */\n    fileMinWidth?: number;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: FileItem[];\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode?: boolean;\n    /**\n     * The maximum amount of images and videos that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     *  Function to be executed when files are added and uploaded\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Function to be executed when the count of files are changed. Needed to check if all files are uploaded\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * The mode how the images should be displayed.\n     */\n    viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: InternalFileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) => {\n                if (prevFile.id === file.id) {\n                    return { ...prevFile, previewUrl };\n                }\n                return prevFile;\n            }),\n        );\n    };\n\n    const callDuplicateFileDialog = useCallback(() => {\n        createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n    }, [doubleFileDialogMessage]);\n\n    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = useCallback(\n        (file: InternalFileItem, uploadedFile: Video | Image) => {\n            setFileItems((prevState) => {\n                const updatedState = prevState.map((prevFile) => {\n                    if (prevFile.uploadedFile?.url === uploadedFile.url) {\n                        callDuplicateFileDialog();\n\n                        return undefined;\n                    }\n\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            const prevElement = prevState.find(\n                                ({ uploadedFile: newUploadedFile }) =>\n                                    newUploadedFile?.url === uploadedFile?.url,\n                            );\n\n                            if (!prevElement) {\n                                onAdd({\n                                    file: uploadedFile,\n                                    id: file.id,\n                                });\n                            }\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n\n                    return prevFile;\n                });\n\n                const tmp: InternalFileItem[] = [];\n\n                updatedState.forEach((updatedFile) => {\n                    if (updatedFile !== undefined) {\n                        tmp.push(updatedFile as InternalFileItem);\n                    }\n                });\n\n                return tmp ?? [];\n            });\n        },\n        [callDuplicateFileDialog, onAdd],\n    );\n\n    /**\n     * Returns the current count to check if all files are uploaded\n     */\n    useEffect(() => {\n        if (typeof onFileCountChange === 'function') {\n            onFileCountChange(fileItems.length);\n        }\n    }, [fileItems.length, onFileCountChange]);\n\n    /**\n     * Prepares files for previewUrl and upload\n     */\n    useEffect(() => {\n        const filesToGeneratePreview = fileItems.filter(\n            (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state),\n        );\n\n        const filesToUpload = fileItems.filter(\n            (file) => !file.uploadedFile && file.state !== 'uploading',\n        );\n\n        filesToGeneratePreview.forEach((file) => {\n            if (!file.file) {\n                return;\n            }\n\n            if (file.file.type.includes('video/')) {\n                generateVideoThumbnail({\n                    file: file.file,\n                    callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                });\n\n                return;\n            }\n\n            generatePreviewUrl({\n                file: file.file,\n                callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n            });\n        });\n\n        filesToUpload.forEach((file) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        return { ...prevFile, state: 'uploading' };\n                    }\n                    return prevFile;\n                }),\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n            });\n        });\n    }, [fileItems, handleUploadFileCallback]);\n\n    /**\n     * This function formats and adds files to fileItems\n     */\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            const newFileItems: InternalFileItem[] = [];\n\n            filesToAdd.forEach((file) => {\n                if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n                    newFileItems.push({\n                        id: uuidv4(),\n                        file,\n                        state: 'none',\n                    });\n                }\n            });\n\n            let tmp = newFileItems;\n\n            if (maxFiles) {\n                tmp = newFileItems.slice(0, maxFiles - (fileItems.length + filesToAdd.length - 1));\n            }\n\n            setFileItems((prevState) => [...prevState, ...tmp]);\n        },\n        [fileItems, maxFiles],\n    );\n\n    /**\n     * This function adds external files to fileItems\n     */\n    useEffect(() => {\n        if (files) {\n            const newFileItems: InternalFileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: file.id ?? uuidv4(),\n                    uploadedFile: file.file,\n                    file: undefined,\n                    state: 'uploaded',\n                    previewUrl: undefined,\n                });\n            });\n\n            setFileItems((prevState) => {\n                const updatedItems = prevState.map((prevItem) => {\n                    const newItem = newFileItems.find(\n                        (item) =>\n                            item.uploadedFile &&\n                            item.uploadedFile.url ===\n                                (prevItem.uploadedFile && prevItem.uploadedFile.url),\n                    );\n                    return newItem || prevItem;\n                });\n\n                return updatedItems.concat(\n                    newFileItems.filter(\n                        (newItem) =>\n                            !prevState.some(\n                                (prevItem) =>\n                                    prevItem.uploadedFile &&\n                                    newItem.uploadedFile &&\n                                    prevItem.uploadedFile.url === newItem.uploadedFile.url,\n                            ),\n                    ),\n                );\n            });\n        }\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let fileToDelete: FileItem | undefined;\n\n            const filteredFiles = fileItems.filter((file) => {\n                const fileId = file.id;\n\n                if (fileId === id && file.uploadedFile) {\n                    fileToDelete = { file: file.uploadedFile, id };\n                }\n\n                return fileId !== id;\n            });\n\n            setFileItems(filteredFiles);\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [fileItems, onRemove],\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [allowDragAndDrop, handleAddFiles],\n    );\n\n    /**\n     * Opens the files in a slideShow\n     */\n    const openFiles = useCallback(\n        (file: InternalFileItem) => {\n            let startIndex = 0;\n\n            try {\n                startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n                const items: OpenMediaItem[] = fileItems.map((item) => ({\n                    url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n                    mediaType:\n                        item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n                            ? MediaType.VIDEO\n                            : MediaType.IMAGE,\n                }));\n\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                void openMedia({ items, startIndex });\n            } catch (_) {\n                if (file.uploadedFile && 'thumbnailUrl' in file.uploadedFile) {\n                    void openVideo({ url: file.uploadedFile.url });\n                } else {\n                    const imageFiles: OpenImageItem[] = [];\n\n                    fileItems.forEach(({ uploadedFile }) => {\n                        if (uploadedFile && !('thumbnailUrl' in uploadedFile)) {\n                            imageFiles.push({ url: uploadedFile.url });\n                        }\n                    });\n\n                    startIndex = imageFiles.findIndex(\n                        (item) => item.url === file.uploadedFile?.url,\n                    );\n\n                    const startFile = imageFiles.shift();\n\n                    if (!startFile) {\n                        return;\n                    }\n\n                    void openImage({ items: [startFile, ...imageFiles], startIndex });\n                }\n            }\n        },\n        [fileItems],\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(() => {\n        switch (fileItems.length) {\n            case 0:\n                return 0;\n            case 1:\n                return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);\n            case 2:\n                return 2;\n            case 3:\n                return 3;\n            default:\n                return 1;\n        }\n    }, [fileItems]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (isEditMode) {\n            const items = fileItems.map((file) => (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode\n                    onClick={openFiles}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            if (maxFiles && maxFiles <= combinedFilesLength) {\n                return items;\n            }\n\n            items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n            return items;\n        }\n\n        const shortedFiles = fileItems.slice(0, 4);\n\n        return shortedFiles.map((file, index) => {\n            let imageRatio = 1;\n\n            if (viewMode === GalleryViewMode.GRID) {\n                if (combinedFilesLength === 1) {\n                    imageRatio = fileItems[0]?.uploadedFile?.ratio ?? 1;\n                } else if (combinedFilesLength === 2 && (index === 0 || index === 1)) {\n                    imageRatio = 0.5;\n                } else if (\n                    (index === 0 && combinedFilesLength > 2) ||\n                    (combinedFilesLength === 3 && (index === 1 || index === 2))\n                ) {\n                    imageRatio = 1.5;\n                }\n            }\n\n            return (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode={false}\n                    handleDeleteFile={handleDeleteFile}\n                    onClick={openFiles}\n                    ratio={imageRatio}\n                    remainingItemsLength={\n                        combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                    }\n                />\n            );\n        });\n    }, [fileItems, isEditMode, maxFiles, handleAddFiles, openFiles, handleDeleteFile, viewMode]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        $fileMinWidth={fileMinWidth}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        $ratio={ratio}\n                        $uploadedFileLength={fileItems.length}\n                        $viewMode={viewMode}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop],\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAOA,IAAAC,UAAA,GAAAD,OAAA;AAUA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,YAAA,GAAAD,sBAAA,CAAAR,OAAA;AACA,IAAAU,QAAA,GAAAV,OAAA;AAI0B,SAAAQ,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAZ,uBAAA,YAAAA,CAAAQ,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AA6C1B,MAAMgB,OAAyB,GAAGA,CAAC;EAC/BC,gBAAgB,GAAG,KAAK;EACxBC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ,GAAGC,wBAAe,CAACC;AAC/B,CAAC,KAAK;EACF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAqB,EAAE,CAAC;;EAElE;AACJ;AACA;EACI,MAAMC,wBAAwB,GAAGA,CAACC,UAAkB,EAAEC,IAAsB,KAAK;IAC7EJ,YAAY,CAAEK,SAAS,IACnBA,SAAS,CAACC,GAAG,CAAEC,QAAQ,IAAK;MACxB,IAAIA,QAAQ,CAACC,EAAE,KAAKJ,IAAI,CAACI,EAAE,EAAE;QACzB,OAAO;UAAE,GAAGD,QAAQ;UAAEJ;QAAW,CAAC;MACtC;MACA,OAAOI,QAAQ;IACnB,CAAC,CACL,CAAC;EACL,CAAC;EAED,MAAME,uBAAuB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC9C,IAAAC,uBAAY,EAAC;MAAEC,IAAI,EAAEC,qBAAU,CAACC,KAAK;MAAEC,IAAI,EAAE3B;IAAwB,CAAC,CAAC;EAC3E,CAAC,EAAE,CAACA,uBAAuB,CAAC,CAAC;;EAE7B;AACJ;AACA;EACI,MAAM4B,wBAAwB,GAAG,IAAAN,kBAAW,EACxC,CAACN,IAAsB,EAAEa,YAA2B,KAAK;IACrDjB,YAAY,CAAEK,SAAS,IAAK;MACxB,MAAMa,YAAY,GAAGb,SAAS,CAACC,GAAG,CAAEC,QAAQ,IAAK;QAAA,IAAAY,qBAAA;QAC7C,IAAI,EAAAA,qBAAA,GAAAZ,QAAQ,CAACU,YAAY,cAAAE,qBAAA,uBAArBA,qBAAA,CAAuBC,GAAG,MAAKH,YAAY,CAACG,GAAG,EAAE;UACjDX,uBAAuB,CAAC,CAAC;UAEzB,OAAOY,SAAS;QACpB;QAEA,IAAId,QAAQ,CAACC,EAAE,KAAKJ,IAAI,CAACI,EAAE,EAAE;UACzB,IAAI,OAAOf,KAAK,KAAK,UAAU,EAAE;YAC7B,MAAM6B,WAAW,GAAGjB,SAAS,CAACkB,IAAI,CAC9B,CAAC;cAAEN,YAAY,EAAEO;YAAgB,CAAC,KAC9B,CAAAA,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEJ,GAAG,OAAKH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEG,GAAG,CAClD,CAAC;YAED,IAAI,CAACE,WAAW,EAAE;cACd7B,KAAK,CAAC;gBACFW,IAAI,EAAEa,YAAY;gBAClBT,EAAE,EAAEJ,IAAI,CAACI;cACb,CAAC,CAAC;YACN;UACJ;UAEA,OAAO;YACH,GAAGD,QAAQ;YACXU,YAAY;YACZQ,KAAK,EAAE;UACX,CAAC;QACL;QAEA,OAAOlB,QAAQ;MACnB,CAAC,CAAC;MAEF,MAAMmB,GAAuB,GAAG,EAAE;MAElCR,YAAY,CAACS,OAAO,CAAEC,WAAW,IAAK;QAClC,IAAIA,WAAW,KAAKP,SAAS,EAAE;UAC3BK,GAAG,CAACG,IAAI,CAACD,WAA+B,CAAC;QAC7C;MACJ,CAAC,CAAC;MAEF,OAAOF,GAAG,IAAI,EAAE;IACpB,CAAC,CAAC;EACN,CAAC,EACD,CAACjB,uBAAuB,EAAEhB,KAAK,CACnC,CAAC;;EAED;AACJ;AACA;EACI,IAAAqC,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOpC,iBAAiB,KAAK,UAAU,EAAE;MACzCA,iBAAiB,CAACK,SAAS,CAACgC,MAAM,CAAC;IACvC;EACJ,CAAC,EAAE,CAAChC,SAAS,CAACgC,MAAM,EAAErC,iBAAiB,CAAC,CAAC;;EAEzC;AACJ;AACA;EACI,IAAAoC,gBAAS,EAAC,MAAM;IACZ,MAAME,sBAAsB,GAAGjC,SAAS,CAACkC,MAAM,CAC1C7B,IAAI,IAAKA,IAAI,CAACA,IAAI,IAAI,CAACA,IAAI,CAACD,UAAU,KAAKC,IAAI,CAACqB,KAAK,KAAK,MAAM,IAAI,CAACrB,IAAI,CAACqB,KAAK,CACpF,CAAC;IAED,MAAMS,aAAa,GAAGnC,SAAS,CAACkC,MAAM,CACjC7B,IAAI,IAAK,CAACA,IAAI,CAACa,YAAY,IAAIb,IAAI,CAACqB,KAAK,KAAK,WACnD,CAAC;IAEDO,sBAAsB,CAACL,OAAO,CAAEvB,IAAI,IAAK;MACrC,IAAI,CAACA,IAAI,CAACA,IAAI,EAAE;QACZ;MACJ;MAEA,IAAIA,IAAI,CAACA,IAAI,CAACQ,IAAI,CAACuB,QAAQ,CAAC,QAAQ,CAAC,EAAE;QACnC,IAAAC,4BAAsB,EAAC;UACnBhC,IAAI,EAAEA,IAAI,CAACA,IAAI;UACfiC,QAAQ,EAAGlC,UAAU,IAAKD,wBAAwB,CAACC,UAAU,EAAEC,IAAI;QACvE,CAAC,CAAC;QAEF;MACJ;MAEA,IAAAkC,wBAAkB,EAAC;QACflC,IAAI,EAAEA,IAAI,CAACA,IAAI;QACfiC,QAAQ,EAAGlC,UAAU,IAAKD,wBAAwB,CAACC,UAAU,EAAEC,IAAI;MACvE,CAAC,CAAC;IACN,CAAC,CAAC;IAEF8B,aAAa,CAACP,OAAO,CAAEvB,IAAI,IAAK;MAC5BJ,YAAY,CAAEK,SAAS,IACnBA,SAAS,CAACC,GAAG,CAAEC,QAAQ,IAAK;QACxB,IAAIA,QAAQ,CAACC,EAAE,KAAKJ,IAAI,CAACI,EAAE,EAAE;UACzB,OAAO;YAAE,GAAGD,QAAQ;YAAEkB,KAAK,EAAE;UAAY,CAAC;QAC9C;QACA,OAAOlB,QAAQ;MACnB,CAAC,CACL,CAAC;MAED,KAAK,IAAAgC,gBAAU,EAAC;QACZC,YAAY,EAAEpC,IAAI;QAClBiC,QAAQ,EAAGI,YAAY,IAAKzB,wBAAwB,CAACZ,IAAI,EAAEqC,YAAY;MAC3E,CAAC,CAAC;IACN,CAAC,CAAC;EACN,CAAC,EAAE,CAAC1C,SAAS,EAAEiB,wBAAwB,CAAC,CAAC;;EAEzC;AACJ;AACA;EACI,MAAM0B,cAAc,GAAG,IAAAhC,kBAAW,EAC7BiC,UAAkB,IAAK;IACpB,MAAMC,YAAgC,GAAG,EAAE;IAE3CD,UAAU,CAAChB,OAAO,CAAEvB,IAAI,IAAK;MACzB,IAAIA,IAAI,IAAI,CAAC,IAAAyC,yBAAmB,EAAC;QAAEtD,KAAK,EAAEQ,SAAS;QAAE+C,OAAO,EAAE1C;MAAK,CAAC,CAAC,EAAE;QACnEwC,YAAY,CAACf,IAAI,CAAC;UACdrB,EAAE,EAAE,IAAAuC,QAAM,EAAC,CAAC;UACZ3C,IAAI;UACJqB,KAAK,EAAE;QACX,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAIC,GAAG,GAAGkB,YAAY;IAEtB,IAAIpD,QAAQ,EAAE;MACVkC,GAAG,GAAGkB,YAAY,CAACI,KAAK,CAAC,CAAC,EAAExD,QAAQ,IAAIO,SAAS,CAACgC,MAAM,GAAGY,UAAU,CAACZ,MAAM,GAAG,CAAC,CAAC,CAAC;IACtF;IAEA/B,YAAY,CAAEK,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGqB,GAAG,CAAC,CAAC;EACvD,CAAC,EACD,CAAC3B,SAAS,EAAEP,QAAQ,CACxB,CAAC;;EAED;AACJ;AACA;EACI,IAAAsC,gBAAS,EAAC,MAAM;IACZ,IAAIvC,KAAK,EAAE;MACP,MAAMqD,YAAgC,GAAG,EAAE;MAE3CrD,KAAK,CAACoC,OAAO,CAAEvB,IAAI,IAAK;QACpBwC,YAAY,CAACf,IAAI,CAAC;UACdrB,EAAE,EAAEJ,IAAI,CAACI,EAAE,IAAI,IAAAuC,QAAM,EAAC,CAAC;UACvB9B,YAAY,EAAEb,IAAI,CAACA,IAAI;UACvBA,IAAI,EAAEiB,SAAS;UACfI,KAAK,EAAE,UAAU;UACjBtB,UAAU,EAAEkB;QAChB,CAAC,CAAC;MACN,CAAC,CAAC;MAEFrB,YAAY,CAAEK,SAAS,IAAK;QACxB,MAAM4C,YAAY,GAAG5C,SAAS,CAACC,GAAG,CAAE4C,QAAQ,IAAK;UAC7C,MAAMC,OAAO,GAAGP,YAAY,CAACrB,IAAI,CAC5B6B,IAAI,IACDA,IAAI,CAACnC,YAAY,IACjBmC,IAAI,CAACnC,YAAY,CAACG,GAAG,MAChB8B,QAAQ,CAACjC,YAAY,IAAIiC,QAAQ,CAACjC,YAAY,CAACG,GAAG,CAC/D,CAAC;UACD,OAAO+B,OAAO,IAAID,QAAQ;QAC9B,CAAC,CAAC;QAEF,OAAOD,YAAY,CAACI,MAAM,CACtBT,YAAY,CAACX,MAAM,CACdkB,OAAO,IACJ,CAAC9C,SAAS,CAACiD,IAAI,CACVJ,QAAQ,IACLA,QAAQ,CAACjC,YAAY,IACrBkC,OAAO,CAAClC,YAAY,IACpBiC,QAAQ,CAACjC,YAAY,CAACG,GAAG,KAAK+B,OAAO,CAAClC,YAAY,CAACG,GAC3D,CACR,CACJ,CAAC;MACL,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAAC7B,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAMgE,gBAAgB,GAAG,IAAA7C,kBAAW,EAC/BF,EAAW,IAAK;IACb,IAAIgD,YAAkC;IAEtC,MAAMC,aAAa,GAAG1D,SAAS,CAACkC,MAAM,CAAE7B,IAAI,IAAK;MAC7C,MAAMsD,MAAM,GAAGtD,IAAI,CAACI,EAAE;MAEtB,IAAIkD,MAAM,KAAKlD,EAAE,IAAIJ,IAAI,CAACa,YAAY,EAAE;QACpCuC,YAAY,GAAG;UAAEpD,IAAI,EAAEA,IAAI,CAACa,YAAY;UAAET;QAAG,CAAC;MAClD;MAEA,OAAOkD,MAAM,KAAKlD,EAAE;IACxB,CAAC,CAAC;IAEFR,YAAY,CAACyD,aAAa,CAAC;IAE3B,IAAI,CAACD,YAAY,IAAI,OAAO7D,QAAQ,KAAK,UAAU,EAAE;MACjD;IACJ;IAEAA,QAAQ,CAAC6D,YAAY,CAAC;EAC1B,CAAC,EACD,CAACzD,SAAS,EAAEJ,QAAQ,CACxB,CAAC;;EAED;AACJ;AACA;EACI,MAAMgE,UAAU,GAAG,IAAAjD,kBAAW,EACzB3C,CAA4B,IAAK;IAC9B,IAAI,CAACoB,gBAAgB,EAAE;MACnB;IACJ;IAEApB,CAAC,CAAC6F,cAAc,CAAC,CAAC;IAClB,MAAMC,YAAY,GAAGC,KAAK,CAACC,IAAI,CAAChG,CAAC,CAACiG,YAAY,CAACzE,KAAK,CAAC;IAErDmD,cAAc,CAACmB,YAAY,CAAC;EAChC,CAAC,EACD,CAAC1E,gBAAgB,EAAEuD,cAAc,CACrC,CAAC;;EAED;AACJ;AACA;EACI,MAAMuB,SAAS,GAAG,IAAAvD,kBAAW,EACxBN,IAAsB,IAAK;IACxB,IAAI8D,UAAU,GAAG,CAAC;IAElB,IAAI;MACAA,UAAU,GAAGnE,SAAS,CAACoE,SAAS,CAAEf,IAAI,IAAKA,IAAI,CAAC5C,EAAE,KAAKJ,IAAI,CAACI,EAAE,CAAC;MAE/D,MAAM4D,KAAsB,GAAGrE,SAAS,CAACO,GAAG,CAAE8C,IAAI;QAAA,IAAAiB,kBAAA;QAAA,OAAM;UACpDjD,GAAG,EAAE,EAAAiD,kBAAA,GAAAjB,IAAI,CAACnC,YAAY,cAAAoD,kBAAA,uBAAjBA,kBAAA,CAAmBjD,GAAG,CAACkD,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAI,EAAE;UAC3DC,SAAS,EACLnB,IAAI,CAACnC,YAAY,IAAI,cAAc,IAAImC,IAAI,CAACnC,YAAY,GAClDuD,oBAAS,CAACC,KAAK,GACfD,oBAAS,CAACE;QACxB,CAAC;MAAA,CAAC,CAAC;;MAEH;MACA;MACA,KAAK,IAAAC,oBAAS,EAAC;QAAEP,KAAK;QAAEF;MAAW,CAAC,CAAC;IACzC,CAAC,CAAC,OAAOU,CAAC,EAAE;MACR,IAAIxE,IAAI,CAACa,YAAY,IAAI,cAAc,IAAIb,IAAI,CAACa,YAAY,EAAE;QAC1D,KAAK,IAAA4D,oBAAS,EAAC;UAAEzD,GAAG,EAAEhB,IAAI,CAACa,YAAY,CAACG;QAAI,CAAC,CAAC;MAClD,CAAC,MAAM;QACH,MAAM0D,UAA2B,GAAG,EAAE;QAEtC/E,SAAS,CAAC4B,OAAO,CAAC,CAAC;UAAEV;QAAa,CAAC,KAAK;UACpC,IAAIA,YAAY,IAAI,EAAE,cAAc,IAAIA,YAAY,CAAC,EAAE;YACnD6D,UAAU,CAACjD,IAAI,CAAC;cAAET,GAAG,EAAEH,YAAY,CAACG;YAAI,CAAC,CAAC;UAC9C;QACJ,CAAC,CAAC;QAEF8C,UAAU,GAAGY,UAAU,CAACX,SAAS,CAC5Bf,IAAI;UAAA,IAAA2B,kBAAA;UAAA,OAAK3B,IAAI,CAAChC,GAAG,OAAA2D,kBAAA,GAAK3E,IAAI,CAACa,YAAY,cAAA8D,kBAAA,uBAAjBA,kBAAA,CAAmB3D,GAAG;QAAA,CACjD,CAAC;QAED,MAAM4D,SAAS,GAAGF,UAAU,CAACG,KAAK,CAAC,CAAC;QAEpC,IAAI,CAACD,SAAS,EAAE;UACZ;QACJ;QAEA,KAAK,IAAAE,oBAAS,EAAC;UAAEd,KAAK,EAAE,CAACY,SAAS,EAAE,GAAGF,UAAU,CAAC;UAAEZ;QAAW,CAAC,CAAC;MACrE;IACJ;EACJ,CAAC,EACD,CAACnE,SAAS,CACd,CAAC;;EAED;AACJ;AACA;EACI,MAAMoF,KAAK,GAAG,IAAAC,cAAO,EAAC,MAAM;IAAA,IAAAC,WAAA;IACxB,QAAQtF,SAAS,CAACgC,MAAM;MACpB,KAAK,CAAC;QACF,OAAO,CAAC;MACZ,KAAK,CAAC;QACF,OAAOuD,IAAI,CAACC,GAAG,CAAC,EAAAF,WAAA,GAAAtF,SAAS,CAAC,CAAC,CAAC,cAAAsF,WAAA,gBAAAA,WAAA,GAAZA,WAAA,CAAcpE,YAAY,cAAAoE,WAAA,uBAA1BA,WAAA,CAA4BF,KAAK,KAAI,CAAC,EAAE,CAAC,CAAC;MAC9D,KAAK,CAAC;QACF,OAAO,CAAC;MACZ,KAAK,CAAC;QACF,OAAO,CAAC;MACZ;QACI,OAAO,CAAC;IAChB;EACJ,CAAC,EAAE,CAACpF,SAAS,CAAC,CAAC;EAEf,MAAMyF,cAAc,GAAG,IAAAJ,cAAO,EAAC,MAAM;IACjC,MAAMK,mBAAmB,GAAG1F,SAAS,CAACgC,MAAM;IAE5C,IAAI1C,UAAU,EAAE;MACZ,MAAM+E,KAAK,GAAGrE,SAAS,CAACO,GAAG,CAAEF,IAAI,iBAC7B9C,MAAA,CAAAW,OAAA,CAAAyH,aAAA,CAAC7H,YAAA,CAAAI,OAAW;QACR0H,GAAG,EAAEvF,IAAI,CAACI,EAAG;QACboF,QAAQ,EAAExF,IAAK;QACff,UAAU;QACVwG,OAAO,EAAE5B,SAAU;QACnBV,gBAAgB,EAAEA;MAAiB,CACtC,CACJ,CAAC;MAEF,IAAI/D,QAAQ,IAAIA,QAAQ,IAAIiG,mBAAmB,EAAE;QAC7C,OAAOrB,KAAK;MAChB;MAEAA,KAAK,CAACvC,IAAI,cAACvE,MAAA,CAAAW,OAAA,CAAAyH,aAAA,CAAC/H,QAAA,CAAAM,OAAO;QAAC0H,GAAG,EAAC,UAAU;QAAClG,KAAK,EAAEiD;MAAe,CAAE,CAAC,CAAC;MAE7D,OAAO0B,KAAK;IAChB;IAEA,MAAM0B,YAAY,GAAG/F,SAAS,CAACiD,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1C,OAAO8C,YAAY,CAACxF,GAAG,CAAC,CAACF,IAAI,EAAE2F,KAAK,KAAK;MACrC,IAAIC,UAAU,GAAG,CAAC;MAElB,IAAIpG,QAAQ,KAAKC,wBAAe,CAACC,IAAI,EAAE;QACnC,IAAI2F,mBAAmB,KAAK,CAAC,EAAE;UAAA,IAAAQ,YAAA;UAC3BD,UAAU,GAAG,EAAAC,YAAA,GAAAlG,SAAS,CAAC,CAAC,CAAC,cAAAkG,YAAA,gBAAAA,YAAA,GAAZA,YAAA,CAAchF,YAAY,cAAAgF,YAAA,uBAA1BA,YAAA,CAA4Bd,KAAK,KAAI,CAAC;QACvD,CAAC,MAAM,IAAIM,mBAAmB,KAAK,CAAC,KAAKM,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,CAAC,EAAE;UAClEC,UAAU,GAAG,GAAG;QACpB,CAAC,MAAM,IACFD,KAAK,KAAK,CAAC,IAAIN,mBAAmB,GAAG,CAAC,IACtCA,mBAAmB,KAAK,CAAC,KAAKM,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,CAAC,CAAE,EAC7D;UACEC,UAAU,GAAG,GAAG;QACpB;MACJ;MAEA,oBACI1I,MAAA,CAAAW,OAAA,CAAAyH,aAAA,CAAC7H,YAAA,CAAAI,OAAW;QACR0H,GAAG,EAAEvF,IAAI,CAACI,EAAG;QACboF,QAAQ,EAAExF,IAAK;QACff,UAAU,EAAE,KAAM;QAClBkE,gBAAgB,EAAEA,gBAAiB;QACnCsC,OAAO,EAAE5B,SAAU;QACnBkB,KAAK,EAAEa,UAAW;QAClBE,oBAAoB,EAChBT,mBAAmB,GAAG,CAAC,IAAIM,KAAK,KAAK,CAAC,GAAGN,mBAAmB,GAAGpE;MAClE,CACJ,CAAC;IAEV,CAAC,CAAC;EACN,CAAC,EAAE,CAACtB,SAAS,EAAEV,UAAU,EAAEG,QAAQ,EAAEkD,cAAc,EAAEuB,SAAS,EAAEV,gBAAgB,EAAE3D,QAAQ,CAAC,CAAC;EAE5F,OAAO,IAAAwF,cAAO,EACV,mBACI9H,MAAA,CAAAW,OAAA,CAAAyH,aAAA,CAAC5H,QAAA,CAAAqI,aAAa,QACT9G,UAAU,gBACP/B,MAAA,CAAAW,OAAA,CAAAyH,aAAA,CAAC5H,QAAA,CAAAsI,4BAA4B;IACzBC,aAAa,EAAE/G,YAAa;IAC5BgH,UAAU,EAAGvI,CAAC,IAAKA,CAAC,CAAC6F,cAAc,CAAC,CAAE;IACtC2C,MAAM,EAAGxI,CAAC,IAAK,KAAK4F,UAAU,CAAC5F,CAAC;EAAE,GAEjCyH,cACyB,CAAC,gBAE/BlI,MAAA,CAAAW,OAAA,CAAAyH,aAAA,CAAC5H,QAAA,CAAA0I,wBAAwB;IACrBC,MAAM,EAAEtB,KAAM;IACduB,mBAAmB,EAAE3G,SAAS,CAACgC,MAAO;IACtC4E,SAAS,EAAE/G;EAAS,GAEnB4F,cACqB,CAEnB,CAClB,EACD,CAACnG,UAAU,EAAEC,YAAY,EAAEkG,cAAc,EAAEL,KAAK,EAAEpF,SAAS,CAACgC,MAAM,EAAEnC,QAAQ,EAAE+D,UAAU,CAC5F,CAAC;AACL,CAAC;AAEDzE,OAAO,CAAC0H,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7I,OAAA,GAEjBiB,OAAO","ignoreList":[]}
+{"version":3,"file":"Gallery.js","names":["_react","_interopRequireDefault","require","_GalleryEditor","_GalleryViewer","_gallery","e","__esModule","default","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GalleryViewMode","GRID","createElement","displayName","_default","exports"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport GalleryEditor from './gallery-editor/GalleryEditor';\nimport GalleryViewer from './gallery-viewer/GalleryViewer';\nimport type { GalleryProps } from './Gallery.types';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst Gallery: FC<GalleryProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    viewMode = GalleryViewMode.GRID,\n}) =>\n    isEditMode ? (\n        <GalleryEditor\n            allowDragAndDrop={allowDragAndDrop}\n            doubleFileDialogMessage={doubleFileDialogMessage}\n            fileMinWidth={fileMinWidth}\n            files={files}\n            maxFiles={maxFiles}\n            onAdd={onAdd}\n            onFileCountChange={onFileCountChange}\n            onRemove={onRemove}\n        />\n    ) : (\n        <GalleryViewer files={files} viewMode={viewMode} />\n    );\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AAAmD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnD,MAAMG,OAAyB,GAAGA,CAAC;EAC/BC,gBAAgB,GAAG,KAAK;EACxBC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ,GAAGC,wBAAe,CAACC;AAC/B,CAAC,KACGT,UAAU,gBACNZ,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAACnB,cAAA,CAAAK,OAAa;EACVE,gBAAgB,EAAEA,gBAAiB;EACnCC,uBAAuB,EAAEA,uBAAwB;EACjDE,YAAY,EAAEA,YAAa;EAC3BC,KAAK,EAAEA,KAAM;EACbC,QAAQ,EAAEA,QAAS;EACnBC,KAAK,EAAEA,KAAM;EACbC,iBAAiB,EAAEA,iBAAkB;EACrCC,QAAQ,EAAEA;AAAS,CACtB,CAAC,gBAEFlB,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAAClB,cAAA,CAAAI,OAAa;EAACM,KAAK,EAAEA,KAAM;EAACK,QAAQ,EAAEA;AAAS,CAAE,CACrD;AAELV,OAAO,CAACc,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEjBC,OAAO","ignoreList":[]}