@chayns-components/gallery 5.0.53 → 5.0.56

package/lib/esm/components/gallery-editor/GalleryEditor.js

@@ -0,0 +1,189 @@
+import { uploadFile } from '@chayns-components/core';
+import { createDialog, DialogType } from 'chayns-api';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../../utils/file';
+import { openFiles, mapFilesToInternalItems } from '../../utils/gallery';
+import AddFile from './add-file/AddFile';
+import GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';
+import { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';
+const GalleryEditor = ({
+  allowDragAndDrop = false,
+  doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
+  fileMinWidth = 100,
+  files,
+  maxFiles,
+  onAdd,
+  onFileCountChange,
+  onRemove
+}) => {
+  const [fileItems, setFileItems] = useState(() => mapFilesToInternalItems(files));
+  const handlePreviewUrlCallback = useCallback((previewUrl, file) => {
+    setFileItems(prevState => prevState.map(prevFile => {
+      if (prevFile.id === file.id) {
+        return {
+          ...prevFile,
+          previewUrl
+        };
+      }
+      return prevFile;
+    }));
+  }, []);
+  const callDuplicateFileDialog = useCallback(() => {
+    createDialog({
+      type: DialogType.ALERT,
+      text: doubleFileDialogMessage
+    });
+  }, [doubleFileDialogMessage]);
+  const handleUploadFileCallback = useCallback((file, uploadedFile) => {
+    setFileItems(prevState => {
+      const updatedState = prevState.map(prevFile => {
+        if (prevFile.uploadedFile?.url === uploadedFile.url) {
+          callDuplicateFileDialog();
+          return undefined;
+        }
+        if (prevFile.id === file.id) {
+          if (typeof onAdd === 'function') {
+            const prevElement = prevState.find(({
+              uploadedFile: nextUploadedFile
+            }) => nextUploadedFile?.url === uploadedFile?.url);
+            if (!prevElement) {
+              onAdd({
+                file: uploadedFile,
+                id: file.id
+              });
+            }
+          }
+          return {
+            ...prevFile,
+            uploadedFile,
+            state: 'uploaded'
+          };
+        }
+        return prevFile;
+      });
+      return updatedState.filter(Boolean);
+    });
+  }, [callDuplicateFileDialog, onAdd]);
+  const handleAddFiles = useCallback(filesToAdd => {
+    const newFileItems = [];
+    filesToAdd.forEach(file => {
+      if (file && !filterDuplicateFile({
+        files: fileItems,
+        newFile: file
+      })) {
+        newFileItems.push({
+          id: uuidv4(),
+          file,
+          state: 'none'
+        });
+      }
+    });
+    let limitedFileItems = newFileItems;
+    if (maxFiles) {
+      limitedFileItems = newFileItems.slice(0, Math.max(maxFiles - fileItems.length, 0));
+    }
+    setFileItems(prevState => [...prevState, ...limitedFileItems]);
+  }, [fileItems, maxFiles]);
+  const handleDeleteFile = useCallback(id => {
+    let fileToDelete;
+    const filteredFiles = fileItems.filter(file => {
+      if (file.id === id && file.uploadedFile) {
+        fileToDelete = {
+          file: file.uploadedFile,
+          id
+        };
+      }
+      return file.id !== id;
+    });
+    setFileItems(filteredFiles);
+    if (!fileToDelete || typeof onRemove !== 'function') {
+      return;
+    }
+    onRemove(fileToDelete);
+  }, [fileItems, onRemove]);
+  const handleDrop = useCallback(event => {
+    if (!allowDragAndDrop) {
+      return;
+    }
+    event.preventDefault();
+    handleAddFiles(Array.from(event.dataTransfer.files));
+  }, [allowDragAndDrop, handleAddFiles]);
+  const handleOpenFiles = useCallback(file => {
+    openFiles(fileItems, file);
+  }, [fileItems]);
+  useEffect(() => {
+    if (typeof onFileCountChange === 'function') {
+      onFileCountChange(fileItems.length);
+    }
+  }, [fileItems.length, onFileCountChange]);
+  useEffect(() => {
+    const filesToGeneratePreview = fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
+    const filesToUpload = fileItems.filter(file => file.file && !file.uploadedFile && file.state !== 'uploading');
+    filesToGeneratePreview.forEach(file => {
+      if (!file.file) {
+        return;
+      }
+      if (file.file.type.includes('video/')) {
+        generateVideoThumbnail({
+          file: file.file,
+          callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
+        });
+        return;
+      }
+      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 uploadFile({
+        fileToUpload: file,
+        callback: uploadedFile => handleUploadFileCallback(file, uploadedFile)
+      });
+    });
+  }, [fileItems, handlePreviewUrlCallback, handleUploadFileCallback]);
+  useEffect(() => {
+    const externalFileItems = mapFilesToInternalItems(files);
+    setFileItems(prevState => {
+      // Keep local-only items such as pending uploads while refreshing known external media.
+      const updatedItems = prevState.map(prevItem => {
+        const matchingItem = externalFileItems.find(item => item.uploadedFile && item.uploadedFile.url === (prevItem.uploadedFile && prevItem.uploadedFile.url));
+        return matchingItem || prevItem;
+      });
+      return updatedItems.concat(externalFileItems.filter(newItem => !prevState.some(prevItem => prevItem.uploadedFile && newItem.uploadedFile && prevItem.uploadedFile.url === newItem.uploadedFile.url)));
+    });
+  }, [files]);
+  const galleryItems = useMemo(() => {
+    const items = fileItems.map(file => /*#__PURE__*/React.createElement(GalleryEditorItem, {
+      key: file.id,
+      fileItem: file,
+      onClick: handleOpenFiles,
+      handleDeleteFile: handleDeleteFile
+    }));
+    if (maxFiles && maxFiles <= fileItems.length) {
+      return items;
+    }
+    return [...items, /*#__PURE__*/React.createElement(AddFile, {
+      key: "add_file",
+      onAdd: handleAddFiles
+    })];
+  }, [fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
+  return /*#__PURE__*/React.createElement(StyledGalleryEditor, null, /*#__PURE__*/React.createElement(StyledGalleryEditorGrid, {
+    $fileMinWidth: fileMinWidth,
+    onDragOver: event => event.preventDefault(),
+    onDrop: event => void handleDrop(event)
+  }, galleryItems));
+};
+GalleryEditor.displayName = 'GalleryEditor';
+export default GalleryEditor;
+//# sourceMappingURL=GalleryEditor.js.map

package/lib/esm/components/gallery-editor/GalleryEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditor.js","names":["uploadFile","createDialog","DialogType","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","openFiles","mapFilesToInternalItems","AddFile","GalleryEditorItem","StyledGalleryEditor","StyledGalleryEditorGrid","GalleryEditor","allowDragAndDrop","doubleFileDialogMessage","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","prevElement","find","nextUploadedFile","state","filter","Boolean","handleAddFiles","filesToAdd","newFileItems","forEach","newFile","push","limitedFileItems","slice","Math","max","length","handleDeleteFile","fileToDelete","filteredFiles","handleDrop","event","preventDefault","Array","from","dataTransfer","handleOpenFiles","filesToGeneratePreview","filesToUpload","includes","callback","fileToUpload","externalFileItems","updatedItems","prevItem","matchingItem","item","concat","newItem","some","galleryItems","items","createElement","key","fileItem","onClick","$fileMinWidth","onDragOver","onDrop","displayName"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.tsx"],"sourcesContent":["import {\n    Image,\n    uploadFile,\n    Video,\n    type FileItem,\n    type InternalFileItem,\n} from '@chayns-components/core';\nimport { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../../utils/file';\nimport { openFiles, mapFilesToInternalItems } from '../../utils/gallery';\nimport AddFile from './add-file/AddFile';\nimport GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';\nimport { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';\nimport type { GalleryEditorProps } from './GalleryEditor.types';\n\nconst GalleryEditor: FC<GalleryEditorProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    fileMinWidth = 100,\n    files,\n    maxFiles,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n}) => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>(() =>\n        mapFilesToInternalItems(files),\n    );\n\n    const handlePreviewUrlCallback = useCallback((previewUrl: string, file: InternalFileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) => {\n                if (prevFile.id === file.id) {\n                    return { ...prevFile, previewUrl };\n                }\n\n                return prevFile;\n            }),\n        );\n    }, []);\n\n    const callDuplicateFileDialog = useCallback(() => {\n        createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n    }, [doubleFileDialogMessage]);\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: nextUploadedFile }) =>\n                                    nextUploadedFile?.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                return updatedState.filter(Boolean) as InternalFileItem[];\n            });\n        },\n        [callDuplicateFileDialog, onAdd],\n    );\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 limitedFileItems = newFileItems;\n\n            if (maxFiles) {\n                limitedFileItems = newFileItems.slice(0, Math.max(maxFiles - fileItems.length, 0));\n            }\n\n            setFileItems((prevState) => [...prevState, ...limitedFileItems]);\n        },\n        [fileItems, maxFiles],\n    );\n\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let fileToDelete: FileItem | undefined;\n\n            const filteredFiles = fileItems.filter((file) => {\n                if (file.id === id && file.uploadedFile) {\n                    fileToDelete = { file: file.uploadedFile, id };\n                }\n\n                return file.id !== 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    const handleDrop = useCallback(\n        (event: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            event.preventDefault();\n\n            handleAddFiles(Array.from(event.dataTransfer.files));\n        },\n        [allowDragAndDrop, handleAddFiles],\n    );\n\n    const handleOpenFiles = useCallback(\n        (file: InternalFileItem) => {\n            openFiles(fileItems, file);\n        },\n        [fileItems],\n    );\n\n    useEffect(() => {\n        if (typeof onFileCountChange === 'function') {\n            onFileCountChange(fileItems.length);\n        }\n    }, [fileItems.length, onFileCountChange]);\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.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\n                    return prevFile;\n                }),\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                callback: (uploadedFile) => handleUploadFileCallback(file, uploadedFile),\n            });\n        });\n    }, [fileItems, handlePreviewUrlCallback, handleUploadFileCallback]);\n\n    useEffect(() => {\n        const externalFileItems = mapFilesToInternalItems(files);\n\n        setFileItems((prevState) => {\n            // Keep local-only items such as pending uploads while refreshing known external media.\n            const updatedItems = prevState.map((prevItem) => {\n                const matchingItem = externalFileItems.find(\n                    (item) =>\n                        item.uploadedFile &&\n                        item.uploadedFile.url ===\n                            (prevItem.uploadedFile && prevItem.uploadedFile.url),\n                );\n\n                return matchingItem || prevItem;\n            });\n\n            return updatedItems.concat(\n                externalFileItems.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    }, [files]);\n\n    const galleryItems = useMemo(() => {\n        const items = fileItems.map((file) => (\n            <GalleryEditorItem\n                key={file.id}\n                fileItem={file}\n                onClick={handleOpenFiles}\n                handleDeleteFile={handleDeleteFile}\n            />\n        ));\n\n        if (maxFiles && maxFiles <= fileItems.length) {\n            return items;\n        }\n\n        return [...items, <AddFile key=\"add_file\" onAdd={handleAddFiles} />];\n    }, [fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);\n\n    return (\n        <StyledGalleryEditor>\n            <StyledGalleryEditorGrid\n                $fileMinWidth={fileMinWidth}\n                onDragOver={(event) => event.preventDefault()}\n                onDrop={(event) => void handleDrop(event)}\n            >\n                {galleryItems}\n            </StyledGalleryEditorGrid>\n        </StyledGalleryEditor>\n    );\n};\n\nGalleryEditor.displayName = 'GalleryEditor';\n\nexport default GalleryEditor;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/gallery-editor/GalleryEditor.styles.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+export const StyledGalleryEditor = styled.div`
+    width: 100%;
+`;
+export const StyledGalleryEditorGrid = styled.div`
+    display: grid;
+    grid-template-columns: ${({
+  $fileMinWidth
+}) => `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};
+    grid-auto-rows: 1fr;
+    gap: 6px;
+`;
+//# sourceMappingURL=GalleryEditor.styles.js.map

package/lib/esm/components/gallery-editor/GalleryEditor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditor.styles.js","names":["styled","StyledGalleryEditor","div","StyledGalleryEditorGrid","$fileMinWidth"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledGalleryEditor = styled.div`\n    width: 100%;\n`;\n\nexport const StyledGalleryEditorGrid = styled.div<{\n    $fileMinWidth: number;\n}>`\n    display: grid;\n    grid-template-columns: ${({ $fileMinWidth }) =>\n        `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};\n    grid-auto-rows: 1fr;\n    gap: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,mBAAmB,GAAGD,MAAM,CAACE,GAAG;AAC7C;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGH,MAAM,CAACE,GAE5C;AACF;AACA,6BAA6B,CAAC;EAAEE;AAAc,CAAC,KACvC,4BAA4BA,aAAa,WAAW;AAC5D;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/GalleryEditor.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GalleryEditor.types.js.map

package/lib/esm/components/gallery-editor/GalleryEditor.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditor.types.js","names":[],"sources":["../../../../src/components/gallery-editor/GalleryEditor.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for the editable gallery component.\n */\nexport interface GalleryEditorProps {\n    /**\n     * Enables drag and drop file selection inside the editor grid.\n     * @description\n     * When enabled, users can drop local image or video files onto the editor grid to start the upload flow.\n     * @default false\n     * @example\n     * <GalleryEditor allowDragAndDrop files={files} />\n     * @optional\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * Defines the dialog message that is shown when a duplicate upload is detected.\n     * @description\n     * The message is shown when a newly uploaded file resolves to a URL that already exists in the editor state.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <GalleryEditor doubleFileDialogMessage=\"This file already exists.\" files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in the editor grid.\n     * @description\n     * The editor uses this value to size the responsive grid columns that hold uploaded items and the add-tile.\n     * @default 100\n     * @example\n     * <GalleryEditor fileMinWidth={140} files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Provides already uploaded media items that should be merged into the editor state.\n     * @description\n     * These files represent the externally known uploaded baseline. The editor may additionally hold local pending uploads.\n     * @example\n     * <GalleryEditor files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Limits how many files can be managed by the editor.\n     * @description\n     * After the limit is reached, the add-tile is hidden and additional file selection is ignored.\n     * @example\n     * <GalleryEditor files={files} maxFiles={6} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully.\n     * @description\n     * The callback receives the uploaded file representation so the consuming state can persist it externally.\n     * @example\n     * <GalleryEditor onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes, including local pending uploads.\n     * @description\n     * Use this callback when surrounding UI needs to react to the number of currently managed items.\n     * @example\n     * <GalleryEditor onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it from its controlled `files` array.\n     * @example\n     * <GalleryEditor onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-editor/add-file/AddFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddFile.js","names":["Icon","selectFiles","React","useCallback","StyledAddFile","StyledAddFIleIconWrapper","AddFile","onAdd","openSelectDialog","files","multiple","type","createElement","key","onClick","size","icons","displayName"],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\nimport type { AddFileProps } from './AddFile.types';\n\nconst AddFile: FC<AddFileProps> = ({ onAdd }) => {\n    const openSelectDialog = useCallback(async () => {\n        const files = await selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        });\n\n        onAdd(files);\n    }, [onAdd]);\n\n    return (\n        <StyledAddFile key=\"addButton\">\n            <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n                <Icon size={40} icons={['fa fa-plus']} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,QAAQ,yBAAyB;AAC3D,OAAOC,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAC9C,SAASC,aAAa,EAAEC,wBAAwB,QAAQ,kBAAkB;AAG1E,MAAMC,OAAyB,GAAGA,CAAC;EAAEC;AAAM,CAAC,KAAK;EAC7C,MAAMC,gBAAgB,GAAGL,WAAW,CAAC,YAAY;IAC7C,MAAMM,KAAK,GAAG,MAAMR,WAAW,CAAC;MAC5BS,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIL,KAAA,CAAAU,aAAA,CAACR,aAAa;IAACS,GAAG,EAAC;EAAW,gBAC1BX,KAAA,CAAAU,aAAA,CAACP,wBAAwB;IAACS,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DN,KAAA,CAAAU,aAAA,CAACZ,IAAI;IAACe,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDV,OAAO,CAACW,WAAW,GAAG,SAAS;AAE/B,eAAeX,OAAO","ignoreList":[]}

package/lib/esm/components/gallery-editor/add-file/AddFile.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddFile.styles.js","names":["styled","StyledAddFile","div","StyledAddFIleIconWrapper","button","theme"],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledAddFile = styled.div`\n    position: relative;\n`;\n\ntype StyledAddFIleIconWrapperProps = WithTheme<unknown>;\n\nexport const StyledAddFIleIconWrapper = styled.button<StyledAddFIleIconWrapperProps>`\n    background-color: ${({ theme }: StyledAddFIleIconWrapperProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledAddFIleIconWrapperProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,GAAG;AACvC;AACA,CAAC;AAID,OAAO,MAAMC,wBAAwB,GAAGH,MAAM,CAACI,MAAqC;AACpF,wBAAwB,CAAC;EAAEC;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA,eAAe,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/add-file/AddFile.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AddFile.types.js.map

package/lib/esm/components/gallery-editor/add-file/AddFile.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddFile.types.js","names":[],"sources":["../../../../../src/components/gallery-editor/add-file/AddFile.types.ts"],"sourcesContent":["/**\n * Props for the add-file tile inside the gallery editor.\n */\nexport interface AddFileProps {\n    /**\n     * Is called with the selected local files.\n     * @description\n     * The editor add-tile uses this callback after the file picker resolves with the selected local image or video files.\n     * @example\n     * <AddFile onAdd={(files) => console.log(files)} />\n     */\n    onAdd: (files: File[]) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js

@@ -0,0 +1,34 @@
+import { Icon } from '@chayns-components/core';
+import { AnimatePresence } from 'motion/react';
+import React from 'react';
+import { StyledGalleryEditorItem, StyledGalleryEditorItemDeleteButton } from './GalleryEditorItem.styles';
+import GalleryEditorMediaItem from './gallery-editor-media-item/GalleryEditorMediaItem';
+import GalleryEditorPreviewItem from './gallery-editor-preview-item/GalleryEditorPreviewItem';
+const GalleryEditorItem = ({
+  fileItem,
+  handleDeleteFile,
+  ratio = 1,
+  onClick
+}) => {
+  const mediaContent = !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : fileItem.state === 'uploading' ? /*#__PURE__*/React.createElement(GalleryEditorPreviewItem, {
+    ratio: ratio,
+    key: `uploading_${fileItem.id ?? ''}`,
+    fileItem: fileItem
+  }) : /*#__PURE__*/React.createElement(GalleryEditorMediaItem, {
+    key: `uploaded_${fileItem.id ?? ''}`,
+    fileItem: fileItem,
+    ratio: ratio,
+    openSelectedFile: onClick
+  });
+  return /*#__PURE__*/React.createElement(StyledGalleryEditorItem, null, /*#__PURE__*/React.createElement(StyledGalleryEditorItemDeleteButton, {
+    onClick: () => handleDeleteFile(fileItem.id)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: 20,
+    icons: ['ts-wrong']
+  })), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, mediaContent));
+};
+GalleryEditorItem.displayName = 'GalleryEditorItem';
+export default GalleryEditorItem;
+//# sourceMappingURL=GalleryEditorItem.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorItem.js","names":["Icon","AnimatePresence","React","StyledGalleryEditorItem","StyledGalleryEditorItemDeleteButton","GalleryEditorMediaItem","GalleryEditorPreviewItem","GalleryEditorItem","fileItem","handleDeleteFile","ratio","onClick","mediaContent","state","previewUrl","uploadedFile","createElement","key","id","openSelectedFile","size","icons","initial","displayName"],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC } from 'react';\nimport {\n    StyledGalleryEditorItem,\n    StyledGalleryEditorItemDeleteButton,\n} from './GalleryEditorItem.styles';\nimport GalleryEditorMediaItem from './gallery-editor-media-item/GalleryEditorMediaItem';\nimport GalleryEditorPreviewItem from './gallery-editor-preview-item/GalleryEditorPreviewItem';\nimport type { GalleryEditorItemProps } from './GalleryEditorItem.types';\n\nconst GalleryEditorItem: FC<GalleryEditorItemProps> = ({\n    fileItem,\n    handleDeleteFile,\n    ratio = 1,\n    onClick,\n}) => {\n    const mediaContent =\n        !fileItem.state ||\n        fileItem.state === 'none' ||\n        (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : fileItem.state === 'uploading' ? (\n            <GalleryEditorPreviewItem\n                ratio={ratio}\n                key={`uploading_${fileItem.id ?? ''}`}\n                fileItem={fileItem}\n            />\n        ) : (\n            <GalleryEditorMediaItem\n                key={`uploaded_${fileItem.id ?? ''}`}\n                fileItem={fileItem}\n                ratio={ratio}\n                openSelectedFile={onClick}\n            />\n        );\n\n    return (\n        <StyledGalleryEditorItem>\n            <StyledGalleryEditorItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n                <Icon size={20} icons={['ts-wrong']} />\n            </StyledGalleryEditorItemDeleteButton>\n            <AnimatePresence initial={false}>{mediaContent}</AnimatePresence>\n        </StyledGalleryEditorItem>\n    );\n};\n\nGalleryEditorItem.displayName = 'GalleryEditorItem';\n\nexport default GalleryEditorItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,mCAAmC,QAChC,4BAA4B;AACnC,OAAOC,sBAAsB,MAAM,oDAAoD;AACvF,OAAOC,wBAAwB,MAAM,wDAAwD;AAG7F,MAAMC,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,gBAAgB;EAChBC,KAAK,GAAG,CAAC;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,YAAY,GACd,CAACJ,QAAQ,CAACK,KAAK,IACfL,QAAQ,CAACK,KAAK,KAAK,MAAM,IACxB,CAACL,QAAQ,CAACM,UAAU,IAAI,CAACN,QAAQ,CAACO,YAAa,GAAG,IAAI,GAAGP,QAAQ,CAACK,KAAK,KAAK,WAAW,gBACpFX,KAAA,CAAAc,aAAA,CAACV,wBAAwB;IACrBI,KAAK,EAAEA,KAAM;IACbO,GAAG,EAAE,aAAaT,QAAQ,CAACU,EAAE,IAAI,EAAE,EAAG;IACtCV,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFN,KAAA,CAAAc,aAAA,CAACX,sBAAsB;IACnBY,GAAG,EAAE,YAAYT,QAAQ,CAACU,EAAE,IAAI,EAAE,EAAG;IACrCV,QAAQ,EAAEA,QAAS;IACnBE,KAAK,EAAEA,KAAM;IACbS,gBAAgB,EAAER;EAAQ,CAC7B,CACJ;EAEL,oBACIT,KAAA,CAAAc,aAAA,CAACb,uBAAuB,qBACpBD,KAAA,CAAAc,aAAA,CAACZ,mCAAmC;IAACO,OAAO,EAAEA,CAAA,KAAMF,gBAAgB,CAACD,QAAQ,CAACU,EAAE;EAAE,gBAC9EhB,KAAA,CAAAc,aAAA,CAAChB,IAAI;IAACoB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACL,CAAC,eACtCnB,KAAA,CAAAc,aAAA,CAACf,eAAe;IAACqB,OAAO,EAAE;EAAM,GAAEV,YAA8B,CAC3C,CAAC;AAElC,CAAC;AAEDL,iBAAiB,CAACgB,WAAW,GAAG,mBAAmB;AAEnD,eAAehB,iBAAiB","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+export const StyledGalleryEditorItem = styled.div`
+    display: flex;
+    position: relative;
+    height: 100%;
+    width: 100%;
+`;
+export const StyledGalleryEditorItemDeleteButton = styled.button`
+    background-color: rgba(
+        ${({
+  theme
+}) => theme['000-rgb']},
+        0.75
+    );
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08)
+        inset;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    height: 30px;
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+//# sourceMappingURL=GalleryEditorItem.styles.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorItem.styles.js","names":["styled","StyledGalleryEditorItem","div","StyledGalleryEditorItemDeleteButton","button","theme"],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGalleryEditorItem = styled.div`\n    display: flex;\n    position: relative;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledGalleryEditorItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryEditorItemDeleteButton = styled.button<StyledGalleryEditorItemDeleteButtonProps>`\n    background-color: rgba(\n        ${({ theme }: StyledGalleryEditorItemDeleteButtonProps) => theme['000-rgb']},\n        0.75\n    );\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryEditorItemDeleteButtonProps) => theme['009-rgb']}, 0.08)\n        inset;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    height: 30px;\n    width: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGH,MAAM,CAACI,MAAgD;AAC1G;AACA,UAAU,CAAC;EAAEC;AAAgD,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACnF;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAAgD,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GalleryEditorItem.types.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorItem.types.js","names":[],"sources":["../../../../../src/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\n/**\n * Props for a single editable gallery tile.\n */\nexport interface GalleryEditorItemProps {\n    /**\n     * Provides the media item that should be rendered inside the tile.\n     * @description\n     * The item may represent a pending local upload or an already uploaded media file managed by the editor.\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />\n     */\n    fileItem: InternalFileItem;\n    /**\n     * Is called when the delete button is clicked in edit mode.\n     * @description\n     * The callback receives the internal item identifier so the editor can remove the item from its local state.\n     * @example\n     * <GalleryEditorItem handleDeleteFile={(id) => console.log(id)} fileItem={fileItem} onClick={handleOpen} />\n     */\n    handleDeleteFile: (id?: string) => void;\n    /**\n     * Defines the aspect ratio that should be reserved for the rendered media.\n     * @description\n     * Use this when the editor item should reserve a fixed tile ratio for uploaded previews.\n     * @default 1\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Is called when the tile is clicked.\n     * @description\n     * The editor uses this callback to open the currently selected media within the slideshow flow.\n     * @example\n     * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />\n     */\n    onClick: (file: InternalFileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import MediaContent from '../../../media-content/MediaContent';
+import { StyledMotionGalleryEditorMediaItem } from './GalleryEditorMediaItem.styles';
+const GalleryEditorMediaItem = ({
+  fileItem,
+  openSelectedFile,
+  ratio
+}) => /*#__PURE__*/React.createElement(StyledMotionGalleryEditorMediaItem, {
+  animate: {
+    opacity: 1
+  },
+  initial: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0
+  },
+  transition: {
+    duration: 3.2
+  }
+}, fileItem.uploadedFile && /*#__PURE__*/React.createElement(MediaContent, {
+  file: fileItem.uploadedFile,
+  onClick: () => openSelectedFile(fileItem),
+  playIconSize: 30,
+  ratio: ratio
+}));
+GalleryEditorMediaItem.displayName = 'GalleryEditorMediaItem';
+export default GalleryEditorMediaItem;
+//# sourceMappingURL=GalleryEditorMediaItem.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorMediaItem.js","names":["React","MediaContent","StyledMotionGalleryEditorMediaItem","GalleryEditorMediaItem","fileItem","openSelectedFile","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","file","onClick","playIconSize","displayName"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport MediaContent from '../../../media-content/MediaContent';\nimport { StyledMotionGalleryEditorMediaItem } from './GalleryEditorMediaItem.styles';\nimport type { GalleryEditorMediaItemProps } from './GalleryEditorMediaItem.types';\n\nconst GalleryEditorMediaItem: FC<GalleryEditorMediaItemProps> = ({\n    fileItem,\n    openSelectedFile,\n    ratio,\n}) => (\n    <StyledMotionGalleryEditorMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: 3.2 }}\n    >\n        {fileItem.uploadedFile && (\n            <MediaContent\n                file={fileItem.uploadedFile}\n                onClick={() => openSelectedFile(fileItem)}\n                playIconSize={30}\n                ratio={ratio}\n            />\n        )}\n    </StyledMotionGalleryEditorMediaItem>\n);\n\nGalleryEditorMediaItem.displayName = 'GalleryEditorMediaItem';\n\nexport default GalleryEditorMediaItem;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,OAAOC,YAAY,MAAM,qCAAqC;AAC9D,SAASC,kCAAkC,QAAQ,iCAAiC;AAGpF,MAAMC,sBAAuD,GAAGA,CAAC;EAC7DC,QAAQ;EACRC,gBAAgB;EAChBC;AACJ,CAAC,kBACGN,KAAA,CAAAO,aAAA,CAACL,kCAAkC;EAC/BM,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAE;EACrBG,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI;AAAE,GAE7BT,QAAQ,CAACU,YAAY,iBAClBd,KAAA,CAAAO,aAAA,CAACN,YAAY;EACTc,IAAI,EAAEX,QAAQ,CAACU,YAAa;EAC5BE,OAAO,EAAEA,CAAA,KAAMX,gBAAgB,CAACD,QAAQ,CAAE;EAC1Ca,YAAY,EAAE,EAAG;EACjBX,KAAK,EAAEA;AAAM,CAChB,CAE2B,CACvC;AAEDH,sBAAsB,CAACe,WAAW,GAAG,wBAAwB;AAE7D,eAAef,sBAAsB","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.js

@@ -0,0 +1,8 @@
+import { motion } from 'motion/react';
+import styled from 'styled-components';
+export const StyledMotionGalleryEditorMediaItem = styled(motion.div)`
+    display: flex;
+    width: 100%;
+    height: 100%;
+`;
+//# sourceMappingURL=GalleryEditorMediaItem.styles.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorMediaItem.styles.js","names":["motion","styled","StyledMotionGalleryEditorMediaItem","div"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionGalleryEditorMediaItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kCAAkC,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACpE;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GalleryEditorMediaItem.types.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorMediaItem.types.js","names":[],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\n/**\n * Props for a rendered uploaded media item.\n */\nexport interface GalleryEditorMediaItemProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This item is expected to contain an `uploadedFile` because pending uploads are rendered by the preview component instead.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} onClick={handleOpen} ratio={1} />\n     */\n    fileItem: InternalFileItem;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * The editor uses this callback to open the uploaded media in the slideshow flow.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1} />\n     */\n    openSelectedFile: (file: InternalFileItem) => void;\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The media tile keeps this ratio reserved so the editor grid remains visually stable.\n     * @example\n     * <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js

@@ -0,0 +1,38 @@
+import { SmallWaitCursor } from '@chayns-components/core';
+import React from 'react';
+import { StyledGalleryEditorPreviewItemImage, StyledGalleryEditorPreviewItemImageWrapper, StyledGalleryEditorPreviewItemLoadingIcon, StyledMotionGalleryEditorPreviewItem } from './GalleryEditorPreviewItem.styles';
+const GalleryEditorPreviewItem = ({
+  fileItem,
+  ratio
+}) => /*#__PURE__*/React.createElement(StyledMotionGalleryEditorPreviewItem, {
+  animate: {
+    opacity: 1
+  },
+  initial: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 3.2,
+      delay: 3.2
+    }
+  },
+  transition: {
+    duration: 3.2
+  },
+  style: {
+    position: 'absolute'
+  }
+}, /*#__PURE__*/React.createElement(StyledGalleryEditorPreviewItemImageWrapper, {
+  $ratio: ratio
+}, /*#__PURE__*/React.createElement(StyledGalleryEditorPreviewItemLoadingIcon, null, /*#__PURE__*/React.createElement(SmallWaitCursor, {
+  shouldHideWaitCursor: false,
+  shouldHideBackground: true
+})), /*#__PURE__*/React.createElement(StyledGalleryEditorPreviewItemImage, {
+  draggable: false,
+  src: fileItem.previewUrl
+})));
+GalleryEditorPreviewItem.displayName = 'GalleryEditorPreviewItem';
+export default GalleryEditorPreviewItem;
+//# sourceMappingURL=GalleryEditorPreviewItem.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorPreviewItem.js","names":["SmallWaitCursor","React","StyledGalleryEditorPreviewItemImage","StyledGalleryEditorPreviewItemImageWrapper","StyledGalleryEditorPreviewItemLoadingIcon","StyledMotionGalleryEditorPreviewItem","GalleryEditorPreviewItem","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","delay","style","position","$ratio","shouldHideWaitCursor","shouldHideBackground","draggable","src","previewUrl","displayName"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledGalleryEditorPreviewItemImage,\n    StyledGalleryEditorPreviewItemImageWrapper,\n    StyledGalleryEditorPreviewItemLoadingIcon,\n    StyledMotionGalleryEditorPreviewItem,\n} from './GalleryEditorPreviewItem.styles';\nimport type { GalleryEditorPreviewItemProps } from './GalleryEditorPreviewItem.types';\n\nconst GalleryEditorPreviewItem: FC<GalleryEditorPreviewItemProps> = ({ fileItem, ratio }) => (\n    <StyledMotionGalleryEditorPreviewItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{\n            opacity: 0,\n            transition: { duration: 3.2, delay: 3.2 },\n        }}\n        transition={{ duration: 3.2 }}\n        style={{ position: 'absolute' }}\n    >\n        <StyledGalleryEditorPreviewItemImageWrapper $ratio={ratio}>\n            <StyledGalleryEditorPreviewItemLoadingIcon>\n                <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n            </StyledGalleryEditorPreviewItemLoadingIcon>\n            <StyledGalleryEditorPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n        </StyledGalleryEditorPreviewItemImageWrapper>\n    </StyledMotionGalleryEditorPreviewItem>\n);\n\nGalleryEditorPreviewItem.displayName = 'GalleryEditorPreviewItem';\n\nexport default GalleryEditorPreviewItem;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,mCAAmC,EACnCC,0CAA0C,EAC1CC,yCAAyC,EACzCC,oCAAoC,QACjC,mCAAmC;AAG1C,MAAMC,wBAA2D,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAC,kBACpFP,KAAA,CAAAQ,aAAA,CAACJ,oCAAoC;EACjCK,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IACFF,OAAO,EAAE,CAAC;IACVG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAI;EAC5C,CAAE;EACFF,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI,CAAE;EAC9BE,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAW;AAAE,gBAEhCjB,KAAA,CAAAQ,aAAA,CAACN,0CAA0C;EAACgB,MAAM,EAAEX;AAAM,gBACtDP,KAAA,CAAAQ,aAAA,CAACL,yCAAyC,qBACtCH,KAAA,CAAAQ,aAAA,CAACT,eAAe;EAACoB,oBAAoB,EAAE,KAAM;EAACC,oBAAoB;AAAA,CAAE,CAC7B,CAAC,eAC5CpB,KAAA,CAAAQ,aAAA,CAACP,mCAAmC;EAACoB,SAAS,EAAE,KAAM;EAACC,GAAG,EAAEhB,QAAQ,CAACiB;AAAW,CAAE,CAC1C,CACV,CACzC;AAEDlB,wBAAwB,CAACmB,WAAW,GAAG,0BAA0B;AAEjE,eAAenB,wBAAwB","ignoreList":[]}

package/lib/esm/components/{gallery-item/preview-item/PreviewItem.styles.js → gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.js}

@@ -1,11 +1,11 @@
 import { motion } from 'motion/react';
 import styled from 'styled-components';
-export const StyledMotionPreviewItem = styled(motion.div)`
+export const StyledMotionGalleryEditorPreviewItem = styled(motion.div)`
     display: flex;
     width: 100%;
     height: 100%;
 `;
-export const StyledPreviewItemImageWrapper = styled.div`
+export const StyledGalleryEditorPreviewItemImageWrapper = styled.div`
     display: flex;
     width: 100%;
     height: 100%;
@@ -13,24 +13,25 @@ export const StyledPreviewItemImageWrapper = styled.div`
   $ratio
 }) => $ratio};
 `;
-export const StyledPreviewItemImage = styled.img`
+export const StyledGalleryEditorPreviewItemImage = styled.img`
     background-color: ${({
   theme
 }) => theme['101']};
     box-shadow: 0 0 0 1px
         rgba(${({
   theme
-}) => theme['009-rgb']}, 0.08) inset;
+}) => theme['009-rgb']}, 0.08)
+        inset;
     z-index: 1;
     width: 100%;
     height: 100%;
     object-fit: cover;
 `;
-export const StyledPreviewItemLoadingIcon = styled.div`
+export const StyledGalleryEditorPreviewItemLoadingIcon = styled.div`
     position: absolute;
     z-index: 2;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 `;
-//# sourceMappingURL=PreviewItem.styles.js.map
+//# sourceMappingURL=GalleryEditorPreviewItem.styles.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorPreviewItem.styles.js","names":["motion","styled","StyledMotionGalleryEditorPreviewItem","div","StyledGalleryEditorPreviewItemImageWrapper","$ratio","StyledGalleryEditorPreviewItemImage","img","theme","StyledGalleryEditorPreviewItemLoadingIcon"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionGalleryEditorPreviewItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledGalleryEditorPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledGalleryEditorPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledGalleryEditorPreviewItemImage = styled.img<StyledGalleryEditorPreviewItemImageProps>`\n    background-color: ${({ theme }: StyledGalleryEditorPreviewItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryEditorPreviewItemImageProps) => theme['009-rgb']}, 0.08)\n        inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledGalleryEditorPreviewItemLoadingIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,oCAAoC,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACtE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0CAA0C,GAAGH,MAAM,CAACE,GAAuB;AACxF;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGL,MAAM,CAACM,GAA6C;AACvG,wBAAwB,CAAC;EAAEC;AAAgD,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7F;AACA,eAAe,CAAC;EAAEA;AAAgD,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACxF;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,yCAAyC,GAAGR,MAAM,CAACE,GAAG;AACnE;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GalleryEditorPreviewItem.types.js.map

package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorPreviewItem.types.js","names":[],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.types.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\n/**\n * Props for a preview tile while a file is uploading.\n */\nexport interface GalleryEditorPreviewItemProps {\n    /**\n     * Provides the internal file item that contains the preview URL.\n     * @description\n     * This item is expected to describe a local upload that already has a generated preview image.\n     * @example\n     * <GalleryEditorPreviewItem fileItem={fileItem} ratio={1} />\n     */\n    fileItem: InternalFileItem;\n    /**\n     * Defines the aspect ratio that should be reserved for the preview.\n     * @description\n     * The preview keeps this ratio reserved while the upload is still in progress.\n     * @example\n     * <GalleryEditorPreviewItem fileItem={fileItem} ratio={1.5} />\n     */\n    ratio: number;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/gallery-viewer/GalleryViewer.js

@@ -0,0 +1,34 @@
+import React, { useCallback, useMemo } from 'react';
+import GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';
+import { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';
+import { getGalleryRatio, getGalleryViewerKey, getReadOnlyItemRatio, openKnownFiles } from '../../utils/gallery';
+import { GalleryViewMode } from '../../types/gallery';
+const GalleryViewer = ({
+  files,
+  viewMode = GalleryViewMode.GRID
+}) => {
+  const fileItems = files ?? [];
+  const ratio = useMemo(() => getGalleryRatio(fileItems), [fileItems]);
+  const handleOpenFiles = useCallback(file => {
+    openKnownFiles(fileItems, file);
+  }, [fileItems]);
+  const visibleItems = fileItems.slice(0, 4);
+  return /*#__PURE__*/React.createElement(StyledGalleryViewer, null, /*#__PURE__*/React.createElement(StyledGalleryViewerItemWrapper, {
+    $ratio: ratio,
+    $itemCount: fileItems.length,
+    $viewMode: viewMode
+  }, visibleItems.map((file, index) => /*#__PURE__*/React.createElement(GalleryViewerItem, {
+    key: getGalleryViewerKey(file, index),
+    fileItem: file,
+    onClick: handleOpenFiles,
+    ratio: getReadOnlyItemRatio({
+      fileItems,
+      index,
+      viewMode
+    }),
+    remainingItemsLength: fileItems.length > 4 && index === 3 ? fileItems.length : undefined
+  }))));
+};
+GalleryViewer.displayName = 'GalleryViewer';
+export default GalleryViewer;
+//# sourceMappingURL=GalleryViewer.js.map

package/lib/esm/components/gallery-viewer/GalleryViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.js","names":["React","useCallback","useMemo","GalleryViewerItem","StyledGalleryViewer","StyledGalleryViewerItemWrapper","getGalleryRatio","getGalleryViewerKey","getReadOnlyItemRatio","openKnownFiles","GalleryViewMode","GalleryViewer","files","viewMode","GRID","fileItems","ratio","handleOpenFiles","file","visibleItems","slice","createElement","$ratio","$itemCount","length","$viewMode","map","index","key","fileItem","onClick","remainingItemsLength","undefined","displayName"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.tsx"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';\nimport { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';\nimport type { GalleryViewerProps } from './GalleryViewer.types';\nimport {\n    getGalleryRatio,\n    getGalleryViewerKey,\n    getReadOnlyItemRatio,\n    openKnownFiles,\n} from '../../utils/gallery';\nimport { GalleryViewMode } from '../../types/gallery';\n\nconst GalleryViewer: FC<GalleryViewerProps> = ({ files, viewMode = GalleryViewMode.GRID }) => {\n    const fileItems = files ?? [];\n\n    const ratio = useMemo(() => getGalleryRatio(fileItems), [fileItems]);\n\n    const handleOpenFiles = useCallback(\n        (file: FileItem) => {\n            openKnownFiles(fileItems, file);\n        },\n        [fileItems],\n    );\n\n    const visibleItems = fileItems.slice(0, 4);\n\n    return (\n        <StyledGalleryViewer>\n            <StyledGalleryViewerItemWrapper\n                $ratio={ratio}\n                $itemCount={fileItems.length}\n                $viewMode={viewMode}\n            >\n                {visibleItems.map((file, index) => (\n                    <GalleryViewerItem\n                        key={getGalleryViewerKey(file, index)}\n                        fileItem={file}\n                        onClick={handleOpenFiles}\n                        ratio={getReadOnlyItemRatio({ fileItems, index, viewMode })}\n                        remainingItemsLength={\n                            fileItems.length > 4 && index === 3 ? fileItems.length : undefined\n                        }\n                    />\n                ))}\n            </StyledGalleryViewerItemWrapper>\n        </StyledGalleryViewer>\n    );\n};\n\nGalleryViewer.displayName = 'GalleryViewer';\n\nexport default GalleryViewer;\n"],"mappings":"AACA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,mBAAmB,EAAEC,8BAA8B,QAAQ,wBAAwB;AAE5F,SACIC,eAAe,EACfC,mBAAmB,EACnBC,oBAAoB,EACpBC,cAAc,QACX,qBAAqB;AAC5B,SAASC,eAAe,QAAQ,qBAAqB;AAErD,MAAMC,aAAqC,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ,GAAGH,eAAe,CAACI;AAAK,CAAC,KAAK;EAC1F,MAAMC,SAAS,GAAGH,KAAK,IAAI,EAAE;EAE7B,MAAMI,KAAK,GAAGd,OAAO,CAAC,MAAMI,eAAe,CAACS,SAAS,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEpE,MAAME,eAAe,GAAGhB,WAAW,CAC9BiB,IAAc,IAAK;IAChBT,cAAc,CAACM,SAAS,EAAEG,IAAI,CAAC;EACnC,CAAC,EACD,CAACH,SAAS,CACd,CAAC;EAED,MAAMI,YAAY,GAAGJ,SAAS,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;EAE1C,oBACIpB,KAAA,CAAAqB,aAAA,CAACjB,mBAAmB,qBAChBJ,KAAA,CAAAqB,aAAA,CAAChB,8BAA8B;IAC3BiB,MAAM,EAAEN,KAAM;IACdO,UAAU,EAAER,SAAS,CAACS,MAAO;IAC7BC,SAAS,EAAEZ;EAAS,GAEnBM,YAAY,CAACO,GAAG,CAAC,CAACR,IAAI,EAAES,KAAK,kBAC1B3B,KAAA,CAAAqB,aAAA,CAAClB,iBAAiB;IACdyB,GAAG,EAAErB,mBAAmB,CAACW,IAAI,EAAES,KAAK,CAAE;IACtCE,QAAQ,EAAEX,IAAK;IACfY,OAAO,EAAEb,eAAgB;IACzBD,KAAK,EAAER,oBAAoB,CAAC;MAAEO,SAAS;MAAEY,KAAK;MAAEd;IAAS,CAAC,CAAE;IAC5DkB,oBAAoB,EAChBhB,SAAS,CAACS,MAAM,GAAG,CAAC,IAAIG,KAAK,KAAK,CAAC,GAAGZ,SAAS,CAACS,MAAM,GAAGQ;EAC5D,CACJ,CACJ,CAC2B,CACf,CAAC;AAE9B,CAAC;AAEDrB,aAAa,CAACsB,WAAW,GAAG,eAAe;AAE3C,eAAetB,aAAa","ignoreList":[]}