@chayns-components/gallery 5.0.0-beta.106 → 5.0.0-beta.107

package/lib/components/gallery/Gallery.js

@@ -60,10 +60,12 @@ const Gallery = _ref => {
     newUploadedFiles = newUploadedFiles.concat(await Promise.all(imageResult));
     if (!uploadedFiles) {
       setUploadedFiles(newUploadedFiles);
+      onChange(newUploadedFiles);
       return;
     }
     setUploadedFiles((0, _file.filterDuplicateFiles)(uploadedFiles, newUploadedFiles));
-  }, [accessToken, personId, uploadedFiles]);
+    onChange((0, _file.filterDuplicateFiles)(uploadedFiles, newUploadedFiles));
+  }, [accessToken, onChange, personId, uploadedFiles]);
 
   /**
    * This function adds new data to the existing data list
@@ -73,8 +75,7 @@ const Gallery = _ref => {
       return;
     }
     void uploadFiles(filesAdd);
-    onChange(uploadedFiles !== null && uploadedFiles !== void 0 ? uploadedFiles : []);
-  }, [onChange, uploadFiles, uploadedFiles]);
+  }, [uploadFiles]);
 
   /**
    * Open a dialog to select files
@@ -123,7 +124,7 @@ const Gallery = _ref => {
       return file.key !== key;
     });
     setUploadedFiles(filteredFiles !== null && filteredFiles !== void 0 ? filteredFiles : []);
-    onChange(uploadedFiles !== null && uploadedFiles !== void 0 ? uploadedFiles : []);
+    onChange(filteredFiles !== null && filteredFiles !== void 0 ? filteredFiles : []);
   }, [onChange, uploadedFiles]);
 
   /**
@@ -170,11 +171,11 @@ const Gallery = _ref => {
     }, /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemAdd, {
       onClick: openSelectDialog
     }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
-      size: 50,
-      icons: ['ts-gallery']
+      size: 40,
+      icons: ['fa fa-plus']
     }))));
     return items;
-  }, [handleDelete, openSelectDialog, uploadedFiles]);
+  }, [handleDelete, openSelectDialog, showFile, uploadedFiles]);
   return /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, galleryItems);
 };
 Gallery.displayName = 'Gallery';

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_post","_post2","_file","_Gallery","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","onChange","personId","uploadedFiles","setUploadedFiles","useState","uploadFiles","useCallback","filesToUpload","videos","filter","_ref2","type","includes","images","_ref3","newUploadedFiles","videoResult","map","video","postVideo","file","concat","Promise","all","flat","imageResult","image","imageUpload","filterDuplicateFiles","handleAdd","filesAdd","openSelectDialog","selectFiles","multiple","then","selectedFiles","length","fileArray","convertFileListToArray","filteredFileArray","_ref4","size","sizeInMB","handleDelete","filteredFiles","id","showFile","chayns","openVideo","url","openImage","base","galleryItems","useMemo","items","forEach","push","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","onClick","Icon","icons","StyledGalleryItemVideo","poster","thumbnailUrl","src","StyledGalleryItemImage","draggable","StyledGalleryItemAdd","StyledGallery","displayName","_default","exports"],"sources":["../../../src/components/gallery/Gallery.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { imageUpload } from '../../api/image/post';\nimport { postVideo } from '../../api/video/post';\nimport { convertFileListToArray, filterDuplicateFiles, selectFiles } from '../../utils/file';\nimport {\n    StyledGallery,\n    StyledGalleryItem,\n    StyledGalleryItemAdd,\n    StyledGalleryItemDeleteButton,\n    StyledGalleryItemImage,\n    StyledGalleryItemVideo,\n} from './Gallery.styles';\n\n// Types\nimport { Icon } from '@chayns-components/core';\nimport type { Image, UploadedFile, Video } from '../../types/files';\n\nexport type GalleryProps = {\n    /**\n     * AccessToken of the user\n     */\n    accessToken: string;\n    /**\n     *  Function to be executed when files are added or removed\n     */\n    onChange: (files: UploadedFile[]) => void;\n    /**\n     * PersonId of the user\n     */\n    personId: string;\n};\n\nconst Gallery: FC<GalleryProps> = ({ accessToken, onChange, personId }) => {\n    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>();\n\n    /**\n     * Upload files\n     */\n    const uploadFiles = useCallback(\n        async (filesToUpload: File[]) => {\n            if (!filesToUpload) {\n                return;\n            }\n\n            const videos = filesToUpload.filter(({ type }) => type.includes('video/'));\n            const images = filesToUpload.filter(({ type }) => type.includes('image/'));\n            let newUploadedFiles: UploadedFile[] = [];\n\n            // Upload videos\n            const videoResult: Promise<Video>[] = videos.map((video) =>\n                postVideo({ accessToken, file: video })\n            );\n\n            newUploadedFiles = newUploadedFiles.concat(await Promise.all(videoResult));\n            newUploadedFiles = newUploadedFiles.flat();\n\n            // Upload images\n            const imageResult: Promise<Image>[] = images.map((image) =>\n                imageUpload({\n                    accessToken,\n                    file: image,\n                    personId,\n                })\n            );\n\n            newUploadedFiles = newUploadedFiles.concat(await Promise.all(imageResult));\n\n            if (!uploadedFiles) {\n                setUploadedFiles(newUploadedFiles);\n\n                return;\n            }\n\n            setUploadedFiles(filterDuplicateFiles(uploadedFiles, newUploadedFiles));\n        },\n        [accessToken, personId, uploadedFiles]\n    );\n\n    /**\n     * This function adds new data to the existing data list\n     */\n    const handleAdd = useCallback(\n        (filesAdd: File[]) => {\n            if (!filesAdd) {\n                return;\n            }\n\n            void uploadFiles(filesAdd);\n            onChange(uploadedFiles ?? []);\n        },\n        [onChange, uploadFiles, uploadedFiles]\n    );\n\n    /**\n     * Open a dialog to select files\n     */\n    const openSelectDialog = useCallback(() => {\n        void selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        }).then((selectedFiles) => {\n            if (selectedFiles && selectedFiles.length > 0) {\n                const fileArray = convertFileListToArray(selectedFiles);\n\n                // Filters files to use only under 64MB\n                const filteredFileArray = fileArray.filter(({ size, type }) => {\n                    const sizeInMB = size / 1024 / 1024;\n\n                    if (type.includes('video/') && sizeInMB > 500) {\n                        return false;\n                    }\n\n                    return !(type.includes('image/') && sizeInMB > 64);\n                });\n\n                if (fileArray.length !== filteredFileArray.length) {\n                    // ToDo show dialog that some files are to big\n                }\n\n                if (filteredFileArray.length === 0) {\n                    // ToDo show dialog that all files are to big\n\n                    return;\n                }\n\n                handleAdd(filteredFileArray);\n            }\n        });\n    }, [handleAdd]);\n\n    /**\n     * This function deletes a selected file from the data list\n     */\n    const handleDelete = useCallback(\n        (key: number | string) => {\n            const filteredFiles = uploadedFiles?.filter((file) => {\n                if ('thumbnailUrl' in file) {\n                    return file.id !== key;\n                }\n                return file.key !== key;\n            });\n\n            setUploadedFiles(filteredFiles ?? []);\n\n            onChange(uploadedFiles ?? []);\n        },\n        [onChange, uploadedFiles]\n    );\n\n    /**\n     * This function shows a selected file\n     */\n    const showFile = useCallback((file: UploadedFile) => {\n        if ('thumbnailUrl' in file) {\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n            void chayns.openVideo(file.url);\n\n            return;\n        }\n\n        // @ts-expect-error: Type is correct here\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n        void chayns.openImage([`${file.base}/${file.key}`], 0);\n    }, []);\n\n    const galleryItems = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (uploadedFiles) {\n            uploadedFiles.forEach((file) => {\n                items.push(\n                    <StyledGalleryItem key={'thumbnailUrl' in file ? file.id : file.key}>\n                        <StyledGalleryItemDeleteButton\n                            onClick={() =>\n                                handleDelete('thumbnailUrl' in file ? file.id : file.key)\n                            }\n                        >\n                            <Icon size={20} icons={['ts-wrong']} />\n                        </StyledGalleryItemDeleteButton>\n                        {'thumbnailUrl' in file ? (\n                            <StyledGalleryItemVideo\n                                onClick={() => showFile(file)}\n                                poster={file.thumbnailUrl}\n                            >\n                                <source src={file.url} type=\"video/mp4\" />\n                            </StyledGalleryItemVideo>\n                        ) : (\n                            <StyledGalleryItemImage\n                                onClick={() => showFile(file)}\n                                draggable={false}\n                                src={`${file.base}/${file.key}`}\n                            />\n                        )}\n                    </StyledGalleryItem>\n                );\n            });\n        }\n\n        items.push(\n            <StyledGalleryItem key=\"addButton\">\n                <StyledGalleryItemAdd onClick={openSelectDialog}>\n                    <Icon size={50} icons={['ts-gallery']} />\n                </StyledGalleryItemAdd>\n            </StyledGalleryItem>\n        );\n\n        return items;\n    }, [handleDelete, openSelectDialog, uploadedFiles]);\n\n    return <StyledGallery>{galleryItems}</StyledGallery>;\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}
+{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_post","_post2","_file","_Gallery","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","onChange","personId","uploadedFiles","setUploadedFiles","useState","uploadFiles","useCallback","filesToUpload","videos","filter","_ref2","type","includes","images","_ref3","newUploadedFiles","videoResult","map","video","postVideo","file","concat","Promise","all","flat","imageResult","image","imageUpload","filterDuplicateFiles","handleAdd","filesAdd","openSelectDialog","selectFiles","multiple","then","selectedFiles","length","fileArray","convertFileListToArray","filteredFileArray","_ref4","size","sizeInMB","handleDelete","filteredFiles","id","showFile","chayns","openVideo","url","openImage","base","galleryItems","useMemo","items","forEach","push","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","onClick","Icon","icons","StyledGalleryItemVideo","poster","thumbnailUrl","src","StyledGalleryItemImage","draggable","StyledGalleryItemAdd","StyledGallery","displayName","_default","exports"],"sources":["../../../src/components/gallery/Gallery.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { imageUpload } from '../../api/image/post';\nimport { postVideo } from '../../api/video/post';\nimport { convertFileListToArray, filterDuplicateFiles, selectFiles } from '../../utils/file';\nimport {\n    StyledGallery,\n    StyledGalleryItem,\n    StyledGalleryItemAdd,\n    StyledGalleryItemDeleteButton,\n    StyledGalleryItemImage,\n    StyledGalleryItemVideo,\n} from './Gallery.styles';\n\n// Types\nimport { Icon } from '@chayns-components/core';\nimport type { Image, UploadedFile, Video } from '../../types/files';\n\nexport type GalleryProps = {\n    /**\n     * AccessToken of the user\n     */\n    accessToken: string;\n    /**\n     *  Function to be executed when files are added or removed\n     */\n    onChange: (files: UploadedFile[]) => void;\n    /**\n     * PersonId of the user\n     */\n    personId: string;\n};\n\nconst Gallery: FC<GalleryProps> = ({ accessToken, onChange, personId }) => {\n    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>();\n\n    /**\n     * Upload files\n     */\n    const uploadFiles = useCallback(\n        async (filesToUpload: File[]) => {\n            if (!filesToUpload) {\n                return;\n            }\n\n            const videos = filesToUpload.filter(({ type }) => type.includes('video/'));\n            const images = filesToUpload.filter(({ type }) => type.includes('image/'));\n            let newUploadedFiles: UploadedFile[] = [];\n\n            // Upload videos\n            const videoResult: Promise<Video>[] = videos.map((video) =>\n                postVideo({ accessToken, file: video })\n            );\n\n            newUploadedFiles = newUploadedFiles.concat(await Promise.all(videoResult));\n            newUploadedFiles = newUploadedFiles.flat();\n\n            // Upload images\n            const imageResult: Promise<Image>[] = images.map((image) =>\n                imageUpload({\n                    accessToken,\n                    file: image,\n                    personId,\n                })\n            );\n\n            newUploadedFiles = newUploadedFiles.concat(await Promise.all(imageResult));\n\n            if (!uploadedFiles) {\n                setUploadedFiles(newUploadedFiles);\n\n                onChange(newUploadedFiles);\n\n                return;\n            }\n\n            setUploadedFiles(filterDuplicateFiles(uploadedFiles, newUploadedFiles));\n\n            onChange(filterDuplicateFiles(uploadedFiles, newUploadedFiles));\n        },\n        [accessToken, onChange, personId, uploadedFiles]\n    );\n\n    /**\n     * This function adds new data to the existing data list\n     */\n    const handleAdd = useCallback(\n        (filesAdd: File[]) => {\n            if (!filesAdd) {\n                return;\n            }\n\n            void uploadFiles(filesAdd);\n        },\n        [uploadFiles]\n    );\n\n    /**\n     * Open a dialog to select files\n     */\n    const openSelectDialog = useCallback(() => {\n        void selectFiles({\n            multiple: true,\n            type: 'image/*, video/*',\n        }).then((selectedFiles) => {\n            if (selectedFiles && selectedFiles.length > 0) {\n                const fileArray = convertFileListToArray(selectedFiles);\n\n                // Filters files to use only under 64MB\n                const filteredFileArray = fileArray.filter(({ size, type }) => {\n                    const sizeInMB = size / 1024 / 1024;\n\n                    if (type.includes('video/') && sizeInMB > 500) {\n                        return false;\n                    }\n\n                    return !(type.includes('image/') && sizeInMB > 64);\n                });\n\n                if (fileArray.length !== filteredFileArray.length) {\n                    // ToDo show dialog that some files are to big\n                }\n\n                if (filteredFileArray.length === 0) {\n                    // ToDo show dialog that all files are to big\n\n                    return;\n                }\n\n                handleAdd(filteredFileArray);\n            }\n        });\n    }, [handleAdd]);\n\n    /**\n     * This function deletes a selected file from the data list\n     */\n    const handleDelete = useCallback(\n        (key: number | string) => {\n            const filteredFiles = uploadedFiles?.filter((file) => {\n                if ('thumbnailUrl' in file) {\n                    return file.id !== key;\n                }\n                return file.key !== key;\n            });\n\n            setUploadedFiles(filteredFiles ?? []);\n\n            onChange(filteredFiles ?? []);\n        },\n        [onChange, uploadedFiles]\n    );\n\n    /**\n     * This function shows a selected file\n     */\n    const showFile = useCallback((file: UploadedFile) => {\n        if ('thumbnailUrl' in file) {\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n            void chayns.openVideo(file.url);\n\n            return;\n        }\n\n        // @ts-expect-error: Type is correct here\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n        void chayns.openImage([`${file.base}/${file.key}`], 0);\n    }, []);\n\n    const galleryItems = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (uploadedFiles) {\n            uploadedFiles.forEach((file) => {\n                items.push(\n                    <StyledGalleryItem key={'thumbnailUrl' in file ? file.id : file.key}>\n                        <StyledGalleryItemDeleteButton\n                            onClick={() =>\n                                handleDelete('thumbnailUrl' in file ? file.id : file.key)\n                            }\n                        >\n                            <Icon size={20} icons={['ts-wrong']} />\n                        </StyledGalleryItemDeleteButton>\n                        {'thumbnailUrl' in file ? (\n                            <StyledGalleryItemVideo\n                                onClick={() => showFile(file)}\n                                poster={file.thumbnailUrl}\n                            >\n                                <source src={file.url} type=\"video/mp4\" />\n                            </StyledGalleryItemVideo>\n                        ) : (\n                            <StyledGalleryItemImage\n                                onClick={() => showFile(file)}\n                                draggable={false}\n                                src={`${file.base}/${file.key}`}\n                            />\n                        )}\n                    </StyledGalleryItem>\n                );\n            });\n        }\n\n        items.push(\n            <StyledGalleryItem key=\"addButton\">\n                <StyledGalleryItemAdd onClick={openSelectDialog}>\n                    <Icon size={40} icons={['fa fa-plus']} />\n                </StyledGalleryItemAdd>\n            </StyledGalleryItem>\n        );\n\n        return items;\n    }, [handleDelete, openSelectDialog, showFile, uploadedFiles]);\n\n    return <StyledGallery>{galleryItems}</StyledGallery>;\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}

package/lib/components/gallery/Gallery.styles.js

@@ -12,6 +12,10 @@ const StyledGallery = _styledComponents.default.div`
     flex-wrap: wrap;
     gap: 10px;
     padding: 15px;
+
+    & > * {
+        flex-basis: calc(25% - 7.5px); /* 25% Breite, abzüglich des Lückenabstands */
+    }
 `;
 exports.StyledGallery = StyledGallery;
 const StyledGalleryItem = _styledComponents.default.div`
@@ -57,8 +61,8 @@ const StyledGalleryItemAdd = _styledComponents.default.button`
   } = _ref4;
   return theme['009-rgb'];
 }}, 0.08) inset;
-    width: 150px;
-    height: 150px;
+    width: 100%;
+    aspect-ratio: 1 / 1;
 `;
 exports.StyledGalleryItemAdd = StyledGalleryItemAdd;
 const StyledGalleryItemImage = _styledComponents.default.img`
@@ -76,7 +80,7 @@ const StyledGalleryItemImage = _styledComponents.default.img`
   return theme['009-rgb'];
 }}, 0.08) inset;
     z-index: 1;
-    width: 150px;
+    width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
 `;
@@ -95,7 +99,7 @@ const StyledGalleryItemVideo = _styledComponents.default.video`
   } = _ref8;
   return theme['009-rgb'];
 }}, 0.08) inset;
-    width: 150px;
+    width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
 `;

package/lib/components/gallery/Gallery.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGallery","styled","div","exports","StyledGalleryItem","StyledGalleryItemDeleteButton","button","_ref","theme","_ref2","StyledGalleryItemAdd","_ref3","_ref4","StyledGalleryItemImage","img","_ref5","_ref6","StyledGalleryItemVideo","video","_ref7","_ref8"],"sources":["../../../src/components/gallery/Gallery.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGallery = styled.div`\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 10px;\n    padding: 15px;\n`;\n\nexport const StyledGalleryItem = styled.div`\n    position: relative;\n`;\n\ntype StyledGalleryItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemDeleteButton = styled.button<StyledGalleryItemDeleteButtonProps>`\n    background-color: rgba(\n        ${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['000-rgb']},\n        0.75\n    );\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    height: 30px;\n    width: 30px;\n`;\n\ntype StyledGalleryItemAddProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemAdd = styled.button<StyledGalleryItemAddProps>`\n    background-color: ${({ theme }: StyledGalleryItemAddProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    width: 150px;\n    height: 150px;\n`;\n\ntype StyledGalleryItemImageProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemImage = styled.img<StyledGalleryItemImageProps>`\n    background-color: ${({ theme }: StyledGalleryItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 150px;\n    aspect-ratio: 1 / 1;\n    object-fit: cover;\n`;\n\ntype StyledGalleryItemVideoProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemVideo = styled.video<StyledGalleryItemVideoProps>`\n    background-color: ${({ theme }: StyledGalleryItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    width: 150px;\n    aspect-ratio: 1 / 1;\n    object-fit: cover;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,aAAa,GAAGC,yBAAM,CAACC,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAEK,MAAMI,iBAAiB,GAAGH,yBAAM,CAACC,GAAI;AAC5C;AACA,CAAC;AAACC,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAIK,MAAMC,6BAA6B,GAAGJ,yBAAM,CAACK,MAA2C;AAC/F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAE,6BAAA,GAAAA,6BAAA;AAIK,MAAMK,oBAAoB,GAAGT,yBAAM,CAACK,MAAkC;AAC7E,wBAAwBK,KAAA;EAAA,IAAC;IAAEH;EAAiC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E;AACA,eAAeI,KAAA;EAAA,IAAC;IAAEJ;EAAmC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA,CAAC;AAACL,OAAA,CAAAO,oBAAA,GAAAA,oBAAA;AAIK,MAAMG,sBAAsB,GAAGZ,yBAAM,CAACa,GAAiC;AAC9E,wBAAwBC,KAAA;EAAA,IAAC;IAAEP;EAAmC,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeQ,KAAA;EAAA,IAAC;IAAER;EAAmC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAU,sBAAA,GAAAA,sBAAA;AAIK,MAAMI,sBAAsB,GAAGhB,yBAAM,CAACiB,KAAmC;AAChF,wBAAwBC,KAAA;EAAA,IAAC;IAAEX;EAAmC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeY,KAAA;EAAA,IAAC;IAAEZ;EAAmC,CAAC,GAAAY,KAAA;EAAA,OAAKZ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAc,sBAAA,GAAAA,sBAAA"}
+{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGallery","styled","div","exports","StyledGalleryItem","StyledGalleryItemDeleteButton","button","_ref","theme","_ref2","StyledGalleryItemAdd","_ref3","_ref4","StyledGalleryItemImage","img","_ref5","_ref6","StyledGalleryItemVideo","video","_ref7","_ref8"],"sources":["../../../src/components/gallery/Gallery.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGallery = styled.div`\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 10px;\n    padding: 15px;\n\n    & > * {\n        flex-basis: calc(25% - 7.5px); /* 25% Breite, abzüglich des Lückenabstands */\n    }\n`;\n\nexport const StyledGalleryItem = styled.div`\n    position: relative;\n`;\n\ntype StyledGalleryItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemDeleteButton = styled.button<StyledGalleryItemDeleteButtonProps>`\n    background-color: rgba(\n        ${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['000-rgb']},\n        0.75\n    );\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    height: 30px;\n    width: 30px;\n`;\n\ntype StyledGalleryItemAddProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemAdd = styled.button<StyledGalleryItemAddProps>`\n    background-color: ${({ theme }: StyledGalleryItemAddProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n`;\n\ntype StyledGalleryItemImageProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemImage = styled.img<StyledGalleryItemImageProps>`\n    background-color: ${({ theme }: StyledGalleryItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n    object-fit: cover;\n`;\n\ntype StyledGalleryItemVideoProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemVideo = styled.video<StyledGalleryItemVideoProps>`\n    background-color: ${({ theme }: StyledGalleryItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n    object-fit: cover;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,aAAa,GAAGC,yBAAM,CAACC,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAEK,MAAMI,iBAAiB,GAAGH,yBAAM,CAACC,GAAI;AAC5C;AACA,CAAC;AAACC,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAIK,MAAMC,6BAA6B,GAAGJ,yBAAM,CAACK,MAA2C;AAC/F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAE,6BAAA,GAAAA,6BAAA;AAIK,MAAMK,oBAAoB,GAAGT,yBAAM,CAACK,MAAkC;AAC7E,wBAAwBK,KAAA;EAAA,IAAC;IAAEH;EAAiC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E;AACA,eAAeI,KAAA;EAAA,IAAC;IAAEJ;EAAmC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA,CAAC;AAACL,OAAA,CAAAO,oBAAA,GAAAA,oBAAA;AAIK,MAAMG,sBAAsB,GAAGZ,yBAAM,CAACa,GAAiC;AAC9E,wBAAwBC,KAAA;EAAA,IAAC;IAAEP;EAAmC,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeQ,KAAA;EAAA,IAAC;IAAER;EAAmC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAU,sBAAA,GAAAA,sBAAA;AAIK,MAAMI,sBAAsB,GAAGhB,yBAAM,CAACiB,KAAmC;AAChF,wBAAwBC,KAAA;EAAA,IAAC;IAAEX;EAAmC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeY,KAAA;EAAA,IAAC;IAAEZ;EAAmC,CAAC,GAAAY,KAAA;EAAA,OAAKZ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAc,sBAAA,GAAAA,sBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.0.0-beta.106",
+    "version": "5.0.0-beta.107",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e22fc61291eefa6633fb92097194be11baf60e71"
+    "gitHead": "7198903cf93e5e131f71f6d8cfe0f77ab133e504"
 }