@chayns-components/gallery 5.2.0 → 5.2.2

package/AGENTS.md

@@ -63,6 +63,17 @@ import { Gallery } from '@chayns-components/gallery';
 />
 ```
 
+#### Edit Mode Custom Add Icon
+
+```tsx
+<Gallery
+    files={galleryStoryFiles.slice(0, 3)}
+    isEditMode
+    maxFiles={6}
+    addFileIcon={'fa fa-image-circle-plus'}
+/>
+```
+
 ### Props
 
 No prop documentation available.
@@ -113,6 +124,18 @@ import { GalleryEditor } from '@chayns-components/gallery';
 />
 ```
 
+#### Custom Add Icon
+
+```tsx
+<GalleryEditor
+    allowDragAndDrop={false}
+    fileMinWidth={100}
+    files={galleryStoryFiles.slice(0, 3)}
+    maxFiles={6}
+    addFileIcon={'fa fa-image-circle-plus'}
+/>
+```
+
 ### Props
 
 No prop documentation available.

package/lib/cjs/components/Gallery.js

@@ -11,6 +11,7 @@ var _gallery = require("../types/gallery");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Gallery = ({
   allowDragAndDrop = false,
+  addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
   isEditMode = false,
   fileMinWidth = 100,
@@ -22,6 +23,7 @@ const Gallery = ({
   viewMode = _gallery.GalleryViewMode.GRID
 }) => isEditMode ? /*#__PURE__*/_react.default.createElement(_GalleryEditor.default, {
   allowDragAndDrop: allowDragAndDrop,
+  addFileIcon: addFileIcon,
   doubleFileDialogMessage: doubleFileDialogMessage,
   fileMinWidth: fileMinWidth,
   files: files,

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"Gallery.js","names":["_react","_interopRequireDefault","require","_GalleryEditor","_GalleryViewer","_gallery","e","__esModule","default","Gallery","allowDragAndDrop","addFileIcon","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    addFileIcon = 'fa fa-plus',\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            addFileIcon={addFileIcon}\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,WAAW,GAAG,YAAY;EAC1BC,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,gBACNb,MAAA,CAAAQ,OAAA,CAAAe,aAAA,CAACpB,cAAA,CAAAK,OAAa;EACVE,gBAAgB,EAAEA,gBAAiB;EACnCC,WAAW,EAAEA,WAAY;EACzBC,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,gBAEFnB,MAAA,CAAAQ,OAAA,CAAAe,aAAA,CAACnB,cAAA,CAAAI,OAAa;EAACO,KAAK,EAAEA,KAAM;EAACK,QAAQ,EAAEA;AAAS,CAAE,CACrD;AAELX,OAAO,CAACe,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlB,OAAA,GAEjBC,OAAO","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode 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 used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode 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 used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile in edit mode.\n     * @description\n     * The icon is forwarded to the editor and replaces the default plus icon on the add-tile.\n     * @default 'fa fa-plus'\n     * @example\n     * <Gallery addFileIcon=\"fa fa-image-circle-plus\" isEditMode files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -17,6 +17,7 @@ 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 GalleryEditor = ({
   allowDragAndDrop = false,
+  addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
   fileMinWidth = 100,
   files,
@@ -184,9 +185,10 @@ const GalleryEditor = ({
     }
     return [...items, /*#__PURE__*/_react.default.createElement(_AddFile.default, {
       key: "add_file",
+      addFileIcon: addFileIcon,
       onAdd: handleAddFiles
     })];
-  }, [fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
+  }, [addFileIcon, fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
   return /*#__PURE__*/_react.default.createElement(_GalleryEditor.StyledGalleryEditor, null, /*#__PURE__*/_react.default.createElement(_GalleryEditor.StyledGalleryEditorGrid, {
     $fileMinWidth: fileMinWidth,
     onDragOver: event => event.preventDefault(),

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryEditor.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_uuid","_file","_gallery","_AddFile","_interopRequireDefault","_GalleryEditorItem","_GalleryEditor","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryEditor","allowDragAndDrop","doubleFileDialogMessage","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","fileItems","setFileItems","useState","mapFilesToInternalItems","handlePreviewUrlCallback","useCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","createDialog","type","DialogType","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","_prevFile$uploadedFil","url","undefined","prevElement","find","nextUploadedFile","state","filter","Boolean","handleAddFiles","filesToAdd","newFileItems","forEach","filterDuplicateFile","newFile","push","uuidv4","limitedFileItems","slice","Math","max","length","handleDeleteFile","fileToDelete","filteredFiles","handleDrop","event","preventDefault","Array","from","dataTransfer","handleOpenFiles","openFiles","useEffect","filesToGeneratePreview","filesToUpload","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","externalFileItems","updatedItems","prevItem","matchingItem","item","concat","newItem","some","galleryItems","useMemo","items","createElement","key","fileItem","onClick","StyledGalleryEditor","StyledGalleryEditorGrid","$fileMinWidth","onDragOver","onDrop","displayName","_default","exports"],"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":[]}
+{"version":3,"file":"GalleryEditor.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_uuid","_file","_gallery","_AddFile","_interopRequireDefault","_GalleryEditorItem","_GalleryEditor","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryEditor","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","fileItems","setFileItems","useState","mapFilesToInternalItems","handlePreviewUrlCallback","useCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","createDialog","type","DialogType","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","_prevFile$uploadedFil","url","undefined","prevElement","find","nextUploadedFile","state","filter","Boolean","handleAddFiles","filesToAdd","newFileItems","forEach","filterDuplicateFile","newFile","push","uuidv4","limitedFileItems","slice","Math","max","length","handleDeleteFile","fileToDelete","filteredFiles","handleDrop","event","preventDefault","Array","from","dataTransfer","handleOpenFiles","openFiles","useEffect","filesToGeneratePreview","filesToUpload","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","externalFileItems","updatedItems","prevItem","matchingItem","item","concat","newItem","some","galleryItems","useMemo","items","createElement","key","fileItem","onClick","StyledGalleryEditor","StyledGalleryEditorGrid","$fileMinWidth","onDragOver","onDrop","displayName","_default","exports"],"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    addFileIcon = 'fa fa-plus',\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 [\n            ...items,\n            <AddFile key=\"add_file\" addFileIcon={addFileIcon} onAdd={handleAddFiles} />,\n        ];\n    }, [addFileIcon, 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/cjs/components/gallery-editor/GalleryEditor.types.js.map

@@ -1 +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":[]}
+{"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     * Defines the icon that is shown in the add-file tile.\n     * @description\n     * The editor renders this icon inside the tile that opens the file picker for adding more items.\n     * @default 'fa fa-plus'\n     * @example\n     * <GalleryEditor addFileIcon=\"fa fa-image-circle-plus\" files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\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/cjs/components/gallery-editor/add-file/AddFile.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _AddFile = require("./AddFile.styles");
 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 AddFile = ({
+  addFileIcon = 'fa fa-plus',
   onAdd
 }) => {
   const openSelectDialog = (0, _react.useCallback)(async () => {
@@ -24,7 +25,7 @@ const AddFile = ({
     onClick: () => void openSelectDialog()
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     size: 40,
-    icons: ['fa fa-plus']
+    icons: [addFileIcon]
   })));
 };
 AddFile.displayName = 'AddFile';

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

@@ -1 +1 @@
-{"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_AddFile","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AddFile","onAdd","openSelectDialog","useCallback","files","selectFiles","multiple","type","createElement","StyledAddFile","key","StyledAddFIleIconWrapper","onClick","Icon","size","icons","displayName","_default","exports"],"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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAG3E,MAAMkB,OAAyB,GAAGA,CAAC;EAAEC;AAAM,CAAC,KAAK;EAC7C,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,YAAY;IAC7C,MAAMC,KAAK,GAAG,MAAM,IAAAC,iBAAW,EAAC;MAC5BC,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFN,KAAK,CAACG,KAAK,CAAC;EAChB,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EAEX,oBACIvB,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAC5B,QAAA,CAAA6B,aAAa;IAACC,GAAG,EAAC;EAAW,gBAC1BhC,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAC5B,QAAA,CAAA+B,wBAAwB;IAACC,OAAO,EAAEA,CAAA,KAAM,KAAKV,gBAAgB,CAAC;EAAE,gBAC7DxB,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAChC,KAAA,CAAAqC,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDf,OAAO,CAACgB,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEjBS,OAAO","ignoreList":[]}
+{"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_AddFile","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AddFile","addFileIcon","onAdd","openSelectDialog","useCallback","files","selectFiles","multiple","type","createElement","StyledAddFile","key","StyledAddFIleIconWrapper","onClick","Icon","size","icons","displayName","_default","exports"],"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> = ({ addFileIcon = 'fa fa-plus', 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={[addFileIcon]} />\n            </StyledAddFIleIconWrapper>\n        </StyledAddFile>\n    );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAG3E,MAAMkB,OAAyB,GAAGA,CAAC;EAAEC,WAAW,GAAG,YAAY;EAAEC;AAAM,CAAC,KAAK;EACzE,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,YAAY;IAC7C,MAAMC,KAAK,GAAG,MAAM,IAAAC,iBAAW,EAAC;MAC5BC,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFN,KAAK,CAACG,KAAK,CAAC;EAChB,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EAEX,oBACIxB,MAAA,CAAAa,OAAA,CAAAkB,aAAA,CAAC7B,QAAA,CAAA8B,aAAa;IAACC,GAAG,EAAC;EAAW,gBAC1BjC,MAAA,CAAAa,OAAA,CAAAkB,aAAA,CAAC7B,QAAA,CAAAgC,wBAAwB;IAACC,OAAO,EAAEA,CAAA,KAAM,KAAKV,gBAAgB,CAAC;EAAE,gBAC7DzB,MAAA,CAAAa,OAAA,CAAAkB,aAAA,CAACjC,KAAA,CAAAsC,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAACf,WAAW;EAAE,CAAE,CACjB,CACf,CAAC;AAExB,CAAC;AAEDD,OAAO,CAACiB,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA5B,OAAA,GAEjBS,OAAO","ignoreList":[]}

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

@@ -1 +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":[]}
+{"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     * Defines the icon that is displayed inside the add-file tile.\n     * @description\n     * This icon is shown in the tile that opens the file picker for adding new items to the gallery.\n     * @default 'fa fa-plus'\n     * @example\n     * <AddFile addFileIcon=\"fa fa-image-circle-plus\" onAdd={(files) => console.log(files)} />\n     * @optional\n     */\n    addFileIcon?: string;\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.js

@@ -4,6 +4,7 @@ import GalleryViewer from './gallery-viewer/GalleryViewer';
 import { GalleryViewMode } from '../types/gallery';
 const Gallery = ({
   allowDragAndDrop = false,
+  addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
   isEditMode = false,
   fileMinWidth = 100,
@@ -15,6 +16,7 @@ const Gallery = ({
   viewMode = GalleryViewMode.GRID
 }) => isEditMode ? /*#__PURE__*/React.createElement(GalleryEditor, {
   allowDragAndDrop: allowDragAndDrop,
+  addFileIcon: addFileIcon,
   doubleFileDialogMessage: doubleFileDialogMessage,
   fileMinWidth: fileMinWidth,
   files: files,

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["React","GalleryEditor","GalleryViewer","GalleryViewMode","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GRID","createElement","displayName"],"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,OAAOA,KAAK,MAAc,OAAO;AACjC,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,SAASC,eAAe,QAAQ,kBAAkB;AAElD,MAAMC,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,GAAGX,eAAe,CAACY;AAC/B,CAAC,KACGR,UAAU,gBACNP,KAAA,CAAAgB,aAAA,CAACf,aAAa;EACVI,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,gBAEFb,KAAA,CAAAgB,aAAA,CAACd,aAAa;EAACO,KAAK,EAAEA,KAAM;EAACK,QAAQ,EAAEA;AAAS,CAAE,CACrD;AAELV,OAAO,CAACa,WAAW,GAAG,SAAS;AAE/B,eAAeb,OAAO","ignoreList":[]}
+{"version":3,"file":"Gallery.js","names":["React","GalleryEditor","GalleryViewer","GalleryViewMode","Gallery","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GRID","createElement","displayName"],"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    addFileIcon = 'fa fa-plus',\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            addFileIcon={addFileIcon}\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,OAAOA,KAAK,MAAc,OAAO;AACjC,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,SAASC,eAAe,QAAQ,kBAAkB;AAElD,MAAMC,OAAyB,GAAGA,CAAC;EAC/BC,gBAAgB,GAAG,KAAK;EACxBC,WAAW,GAAG,YAAY;EAC1BC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ,GAAGZ,eAAe,CAACa;AAC/B,CAAC,KACGR,UAAU,gBACNR,KAAA,CAAAiB,aAAA,CAAChB,aAAa;EACVI,gBAAgB,EAAEA,gBAAiB;EACnCC,WAAW,EAAEA,WAAY;EACzBC,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,gBAEFd,KAAA,CAAAiB,aAAA,CAACf,aAAa;EAACQ,KAAK,EAAEA,KAAM;EAACK,QAAQ,EAAEA;AAAS,CAAE,CACrD;AAELX,OAAO,CAACc,WAAW,GAAG,SAAS;AAE/B,eAAed,OAAO","ignoreList":[]}

package/lib/esm/components/Gallery.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode 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 used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode 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 used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile in edit mode.\n     * @description\n     * The icon is forwarded to the editor and replaces the default plus icon on the add-tile.\n     * @default 'fa fa-plus'\n     * @example\n     * <Gallery addFileIcon=\"fa fa-image-circle-plus\" isEditMode files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -9,6 +9,7 @@ import GalleryEditorItem from './gallery-editor-item/GalleryEditorItem';
 import { StyledGalleryEditor, StyledGalleryEditorGrid } from './GalleryEditor.styles';
 const GalleryEditor = ({
   allowDragAndDrop = false,
+  addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
   fileMinWidth = 100,
   files,
@@ -175,9 +176,10 @@ const GalleryEditor = ({
     }
     return [...items, /*#__PURE__*/React.createElement(AddFile, {
       key: "add_file",
+      addFileIcon: addFileIcon,
       onAdd: handleAddFiles
     })];
-  }, [fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
+  }, [addFileIcon, fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
   return /*#__PURE__*/React.createElement(StyledGalleryEditor, null, /*#__PURE__*/React.createElement(StyledGalleryEditorGrid, {
     $fileMinWidth: fileMinWidth,
     onDragOver: event => event.preventDefault(),

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

@@ -1 +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":[]}
+{"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","addFileIcon","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    addFileIcon = 'fa fa-plus',\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 [\n            ...items,\n            <AddFile key=\"add_file\" addFileIcon={addFileIcon} onAdd={handleAddFiles} />,\n        ];\n    }, [addFileIcon, 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.types.js.map

@@ -1 +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":[]}
+{"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     * Defines the icon that is shown in the add-file tile.\n     * @description\n     * The editor renders this icon inside the tile that opens the file picker for adding more items.\n     * @default 'fa fa-plus'\n     * @example\n     * <GalleryEditor addFileIcon=\"fa fa-image-circle-plus\" files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\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

@@ -2,6 +2,7 @@ import { Icon, selectFiles } from '@chayns-components/core';
 import React, { useCallback } from 'react';
 import { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';
 const AddFile = ({
+  addFileIcon = 'fa fa-plus',
   onAdd
 }) => {
   const openSelectDialog = useCallback(async () => {
@@ -17,7 +18,7 @@ const AddFile = ({
     onClick: () => void openSelectDialog()
   }, /*#__PURE__*/React.createElement(Icon, {
     size: 40,
-    icons: ['fa fa-plus']
+    icons: [addFileIcon]
   })));
 };
 AddFile.displayName = 'AddFile';

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

@@ -1 +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":[]}
+{"version":3,"file":"AddFile.js","names":["Icon","selectFiles","React","useCallback","StyledAddFile","StyledAddFIleIconWrapper","AddFile","addFileIcon","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> = ({ addFileIcon = 'fa fa-plus', 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={[addFileIcon]} />\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,WAAW,GAAG,YAAY;EAAEC;AAAM,CAAC,KAAK;EACzE,MAAMC,gBAAgB,GAAGN,WAAW,CAAC,YAAY;IAC7C,MAAMO,KAAK,GAAG,MAAMT,WAAW,CAAC;MAC5BU,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIN,KAAA,CAAAW,aAAA,CAACT,aAAa;IAACU,GAAG,EAAC;EAAW,gBAC1BZ,KAAA,CAAAW,aAAA,CAACR,wBAAwB;IAACU,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DP,KAAA,CAAAW,aAAA,CAACb,IAAI;IAACgB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAACV,WAAW;EAAE,CAAE,CACjB,CACf,CAAC;AAExB,CAAC;AAEDD,OAAO,CAACY,WAAW,GAAG,SAAS;AAE/B,eAAeZ,OAAO","ignoreList":[]}

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

@@ -1 +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":[]}
+{"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     * Defines the icon that is displayed inside the add-file tile.\n     * @description\n     * This icon is shown in the tile that opens the file picker for adding new items to the gallery.\n     * @default 'fa fa-plus'\n     * @example\n     * <AddFile addFileIcon=\"fa fa-image-circle-plus\" onAdd={(files) => console.log(files)} />\n     * @optional\n     */\n    addFileIcon?: string;\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/types/components/Gallery.types.d.ts

@@ -34,6 +34,16 @@ export interface GalleryProps {
      * @optional
      */
     fileMinWidth?: number;
+    /**
+     * Defines the icon that is shown in the add-file tile in edit mode.
+     * @description
+     * The icon is forwarded to the editor and replaces the default plus icon on the add-tile.
+     * @default 'fa fa-plus'
+     * @example
+     * <Gallery addFileIcon="fa fa-image-circle-plus" isEditMode files={files} />
+     * @optional
+     */
+    addFileIcon?: string;
     /**
      * Provides already known media items that should be rendered by the gallery.
      * @description

package/lib/types/components/gallery-editor/GalleryEditor.types.d.ts

@@ -33,6 +33,16 @@ export interface GalleryEditorProps {
      * @optional
      */
     fileMinWidth?: number;
+    /**
+     * Defines the icon that is shown in the add-file tile.
+     * @description
+     * The editor renders this icon inside the tile that opens the file picker for adding more items.
+     * @default 'fa fa-plus'
+     * @example
+     * <GalleryEditor addFileIcon="fa fa-image-circle-plus" files={files} />
+     * @optional
+     */
+    addFileIcon?: string;
     /**
      * Provides already uploaded media items that should be merged into the editor state.
      * @description

package/lib/types/components/gallery-editor/add-file/AddFile.types.d.ts

@@ -2,6 +2,16 @@
  * Props for the add-file tile inside the gallery editor.
  */
 export interface AddFileProps {
+    /**
+     * Defines the icon that is displayed inside the add-file tile.
+     * @description
+     * This icon is shown in the tile that opens the file picker for adding new items to the gallery.
+     * @default 'fa fa-plus'
+     * @example
+     * <AddFile addFileIcon="fa fa-image-circle-plus" onAdd={(files) => console.log(files)} />
+     * @optional
+     */
+    addFileIcon?: string;
     /**
      * Is called with the selected local files.
      * @description

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.2.0",
+    "version": "5.2.2",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "82de2d58db2a74db0a79e51bf153e49da5061fd4"
+    "gitHead": "0801bf44e4f8f0367d19363082d0288501e76b3b"
 }