@chayns-components/gallery 5.0.0-beta.98 → 5.0.0-beta.981

package/lib/esm/components/gallery-item/media-item/MediaItem.js

@@ -0,0 +1,45 @@
+import { Icon } from '@chayns-components/core';
+import React from 'react';
+import { StyledMediaItemImage, StyledMediaItemImageWrapper, StyledMediaItemPlayIcon, StyledMediaItemVideo, StyledMediaItemVideoWrapper, StyledMotionMediaItem } from './MediaItem.styles';
+const MediaItem = _ref => {
+  let {
+    fileItem,
+    isEditMode,
+    openSelectedFile,
+    ratio
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledMotionMediaItem, {
+    animate: {
+      opacity: 1
+    },
+    initial: {
+      opacity: 0
+    },
+    exit: {
+      opacity: 0
+    },
+    transition: {
+      duration: 3.2
+    }
+  }, fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? /*#__PURE__*/React.createElement(StyledMediaItemVideoWrapper, {
+    onClick: () => openSelectedFile(fileItem),
+    $ratio: ratio
+  }, /*#__PURE__*/React.createElement(StyledMediaItemPlayIcon, null, /*#__PURE__*/React.createElement(Icon, {
+    size: isEditMode ? 30 : 50,
+    icons: ['fa fa-play']
+  })), /*#__PURE__*/React.createElement(StyledMediaItemVideo, {
+    poster: fileItem.uploadedFile.thumbnailUrl
+  }, /*#__PURE__*/React.createElement("source", {
+    src: fileItem.uploadedFile.url,
+    type: "video/mp4"
+  }))) : /*#__PURE__*/React.createElement(StyledMediaItemImageWrapper, {
+    onClick: () => openSelectedFile(fileItem),
+    $ratio: ratio
+  }, /*#__PURE__*/React.createElement(StyledMediaItemImage, {
+    draggable: false,
+    src: fileItem.uploadedFile?.url
+  })));
+};
+MediaItem.displayName = 'MediaItem';
+export default MediaItem;
+//# sourceMappingURL=MediaItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaItem.js","names":["Icon","React","StyledMediaItemImage","StyledMediaItemImageWrapper","StyledMediaItemPlayIcon","StyledMediaItemVideo","StyledMediaItemVideoWrapper","StyledMotionMediaItem","MediaItem","_ref","fileItem","isEditMode","openSelectedFile","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","onClick","$ratio","size","icons","poster","thumbnailUrl","src","url","type","draggable","displayName"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledMediaItemImage,\n    StyledMediaItemImageWrapper,\n    StyledMediaItemPlayIcon,\n    StyledMediaItemVideo,\n    StyledMediaItemVideoWrapper,\n    StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: InternalFileItem;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode: boolean;\n    /**\n     *  Function to be executed when a file is selected\n     */\n    openSelectedFile: (file: InternalFileItem) => void;\n    /**\n     * The ratio of the image\n     */\n    ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n    <StyledMotionMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: 3.2 }}\n    >\n        {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n            <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n                <StyledMediaItemPlayIcon>\n                    <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n                </StyledMediaItemPlayIcon>\n                <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n                    <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n                </StyledMediaItemVideo>\n            </StyledMediaItemVideoWrapper>\n        ) : (\n            <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n                <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n            </StyledMediaItemImageWrapper>\n        )}\n    </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAA+B,yBAAyB;AACrE,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,oBAAoB,EACpBC,2BAA2B,EAC3BC,uBAAuB,EACvBC,oBAAoB,EACpBC,2BAA2B,EAC3BC,qBAAqB,QAClB,oBAAoB;AAqB3B,MAAMC,SAA6B,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;EAAM,CAAC,GAAAJ,IAAA;EAAA,oBACpFR,KAAA,CAAAa,aAAA,CAACP,qBAAqB;IAClBQ,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MAAEF,OAAO,EAAE;IAAE,CAAE;IACrBG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BV,QAAQ,CAACW,YAAY,IAAI,cAAc,IAAIX,QAAQ,CAACW,YAAY,gBAC7DpB,KAAA,CAAAa,aAAA,CAACR,2BAA2B;IAACgB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;IAACa,MAAM,EAAEV;EAAM,gBAClFZ,KAAA,CAAAa,aAAA,CAACV,uBAAuB,qBACpBH,KAAA,CAAAa,aAAA,CAACd,IAAI;IAACwB,IAAI,EAAEb,UAAU,GAAG,EAAE,GAAG,EAAG;IAACc,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CACrC,CAAC,eAC1BxB,KAAA,CAAAa,aAAA,CAACT,oBAAoB;IAACqB,MAAM,EAAEhB,QAAQ,CAACW,YAAY,CAACM;EAAa,gBAC7D1B,KAAA,CAAAa,aAAA;IAAQc,GAAG,EAAElB,QAAQ,CAACW,YAAY,CAACQ,GAAI;IAACC,IAAI,EAAC;EAAW,CAAE,CACxC,CACG,CAAC,gBAE9B7B,KAAA,CAAAa,aAAA,CAACX,2BAA2B;IAACmB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;IAACa,MAAM,EAAEV;EAAM,gBAClFZ,KAAA,CAAAa,aAAA,CAACZ,oBAAoB;IAAC6B,SAAS,EAAE,KAAM;IAACH,GAAG,EAAElB,QAAQ,CAACW,YAAY,EAAEQ;EAAI,CAAE,CACjD,CAEd,CAAC;AAAA,CAC3B;AAEDrB,SAAS,CAACwB,WAAW,GAAG,WAAW;AAEnC,eAAexB,SAAS","ignoreList":[]}

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

@@ -0,0 +1,73 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledMotionMediaItem = styled(motion.div)`
+    display: flex;
+    width: 100%;
+    height: 100%;
+`;
+export const StyledMediaItemVideoWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${_ref => {
+  let {
+    $ratio
+  } = _ref;
+  return $ratio;
+}};
+`;
+export const StyledMediaItemImageWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${_ref2 => {
+  let {
+    $ratio
+  } = _ref2;
+  return $ratio;
+}};
+`;
+export const StyledMediaItemImage = styled.img`
+    background-color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['101'];
+}};
+    box-shadow: 0 0 0 1px rgba(${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['009-rgb'];
+}}, 0.08)
+        inset;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+`;
+export const StyledMediaItemVideo = styled.video`
+    background-color: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['101'];
+}};
+    box-shadow: 0 0 0 1px rgba(${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme['009-rgb'];
+}}, 0.08)
+        inset;
+    width: 100%;
+    object-fit: cover;
+`;
+export const StyledMediaItemPlayIcon = styled.div`
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
+//# sourceMappingURL=MediaItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaItem.styles.js","names":["motion","styled","StyledMotionMediaItem","div","StyledMediaItemVideoWrapper","_ref","$ratio","StyledMediaItemImageWrapper","_ref2","StyledMediaItemImage","img","_ref3","theme","_ref4","StyledMediaItemVideo","video","_ref5","_ref6","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n    background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n        inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n    background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n        inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA;AAC1C,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGN,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoBK,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA;AAC1C,CAAC;AAMD,OAAO,MAAMG,oBAAoB,GAAGR,MAAM,CAACS,GAA8B;AACzE,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC9E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,oBAAoB,GAAGb,MAAM,CAACc,KAAgC;AAC3E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA;AAC9E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGjB,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-item/preview-item/PreviewItem.js

@@ -0,0 +1,41 @@
+import { SmallWaitCursor } from '@chayns-components/core';
+import React from 'react';
+import { StyledMotionPreviewItem, StyledPreviewItemImage, StyledPreviewItemImageWrapper, StyledPreviewItemLoadingIcon } from './PreviewItem.styles';
+const PreviewItem = _ref => {
+  let {
+    fileItem,
+    ratio
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledMotionPreviewItem, {
+    animate: {
+      opacity: 1
+    },
+    initial: {
+      opacity: 0
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        duration: 3.2,
+        delay: 3.2
+      }
+    },
+    transition: {
+      duration: 3.2
+    },
+    style: {
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/React.createElement(StyledPreviewItemImageWrapper, {
+    $ratio: ratio
+  }, /*#__PURE__*/React.createElement(StyledPreviewItemLoadingIcon, null, /*#__PURE__*/React.createElement(SmallWaitCursor, {
+    shouldHideWaitCursor: false,
+    shouldHideBackground: true
+  })), /*#__PURE__*/React.createElement(StyledPreviewItemImage, {
+    draggable: false,
+    src: fileItem.previewUrl
+  })));
+};
+PreviewItem.displayName = 'PreviewItem';
+export default PreviewItem;
+//# sourceMappingURL=PreviewItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewItem.js","names":["SmallWaitCursor","React","StyledMotionPreviewItem","StyledPreviewItemImage","StyledPreviewItemImageWrapper","StyledPreviewItemLoadingIcon","PreviewItem","_ref","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","delay","style","position","$ratio","shouldHideWaitCursor","shouldHideBackground","draggable","src","previewUrl","displayName"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { InternalFileItem, SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledMotionPreviewItem,\n    StyledPreviewItemImage,\n    StyledPreviewItemImageWrapper,\n    StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: InternalFileItem;\n    /**\n     * The ratio of the image\n     */\n    ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n    <StyledMotionPreviewItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{\n            opacity: 0,\n            transition: { duration: 3.2, delay: 3.2 },\n        }}\n        transition={{ duration: 3.2 }}\n        style={{ position: 'absolute' }}\n    >\n        <StyledPreviewItemImageWrapper $ratio={ratio}>\n            <StyledPreviewItemLoadingIcon>\n                <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n            </StyledPreviewItemLoadingIcon>\n            <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n        </StyledPreviewItemImageWrapper>\n    </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":"AAAA,SAA2BA,eAAe,QAAQ,yBAAyB;AAC3E,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,4BAA4B,QACzB,sBAAsB;AAa7B,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,oBAC1DN,KAAA,CAAAS,aAAA,CAACR,uBAAuB;IACpBS,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MACFF,OAAO,EAAE,CAAC;MACVG,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAI;IAC5C,CAAE;IACFF,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI,CAAE;IAC9BE,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAW;EAAE,gBAEhClB,KAAA,CAAAS,aAAA,CAACN,6BAA6B;IAACgB,MAAM,EAAEX;EAAM,gBACzCR,KAAA,CAAAS,aAAA,CAACL,4BAA4B,qBACzBJ,KAAA,CAAAS,aAAA,CAACV,eAAe;IAACqB,oBAAoB,EAAE,KAAM;IAACC,oBAAoB;EAAA,CAAE,CAC1C,CAAC,eAC/BrB,KAAA,CAAAS,aAAA,CAACP,sBAAsB;IAACoB,SAAS,EAAE,KAAM;IAACC,GAAG,EAAEhB,QAAQ,CAACiB;EAAW,CAAE,CAC1C,CACV,CAAC;AAAA,CAC7B;AAEDnB,WAAW,CAACoB,WAAW,GAAG,aAAa;AAEvC,eAAepB,WAAW","ignoreList":[]}

package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewItem.styles.js","names":["motion","styled","StyledMotionPreviewItem","div","StyledPreviewItemImageWrapper","_ref","$ratio","StyledPreviewItemImage","img","_ref2","theme","_ref3","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n    background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC7E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA;AAC1C,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACO,GAAgC;AAC7E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAChF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,4BAA4B,GAAGX,MAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/index.js

@@ -0,0 +1,5 @@
+// noinspection JSUnusedGlobalSymbols
+
+export { default as Gallery } from './components/Gallery';
+export { GalleryViewMode } from './types/gallery';
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Gallery","GalleryViewMode"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASC,eAAe,QAAQ,iBAAiB","ignoreList":[]}

package/lib/esm/types/gallery.js

@@ -0,0 +1,6 @@
+export let GalleryViewMode = /*#__PURE__*/function (GalleryViewMode) {
+  GalleryViewMode[GalleryViewMode["SQUARE"] = 0] = "SQUARE";
+  GalleryViewMode[GalleryViewMode["GRID"] = 1] = "GRID";
+  return GalleryViewMode;
+}({});
+//# sourceMappingURL=gallery.js.map

package/lib/esm/types/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":["GalleryViewMode"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n    SQUARE,\n    GRID,\n}\n"],"mappings":"AAAA,WAAYA,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}

package/lib/esm/utils/file.js

@@ -0,0 +1,47 @@
+export const filterDuplicateFile = _ref => {
+  let {
+    newFile,
+    files
+  } = _ref;
+  const duplicates = files.filter(_ref2 => {
+    let {
+      file
+    } = _ref2;
+    return file && file.name === newFile.name && file.size === newFile.size;
+  });
+  return duplicates.length > 0;
+};
+export const generatePreviewUrl = _ref3 => {
+  let {
+    callback,
+    file
+  } = _ref3;
+  const reader = new FileReader();
+  reader.onload = event => {
+    const previewUrl = event.target?.result;
+    callback(previewUrl);
+  };
+  reader.readAsDataURL(file);
+};
+export const generateVideoThumbnail = _ref4 => {
+  let {
+    file,
+    callback
+  } = _ref4;
+  const canvas = document.createElement('canvas');
+  const video = document.createElement('video');
+
+  // this is important
+  video.autoplay = true;
+  video.muted = true;
+  video.src = URL.createObjectURL(file);
+  video.onloadeddata = () => {
+    const ctx = canvas.getContext('2d');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+    video.pause();
+    callback(canvas.toDataURL('image/png'));
+  };
+};
+//# sourceMappingURL=file.js.map

package/lib/esm/utils/file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.js","names":["filterDuplicateFile","_ref","newFile","files","duplicates","filter","_ref2","file","name","size","length","generatePreviewUrl","_ref3","callback","reader","FileReader","onload","event","previewUrl","target","result","readAsDataURL","generateVideoThumbnail","_ref4","canvas","document","createElement","video","autoplay","muted","src","URL","createObjectURL","onloadeddata","ctx","getContext","width","videoWidth","height","videoHeight","drawImage","pause","toDataURL"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\ninterface FilerDuplicateFileOptions {\n    files: InternalFileItem[];\n    newFile: File;\n}\n\nexport const filterDuplicateFile = ({ newFile, files }: FilerDuplicateFileOptions) => {\n    const duplicates = files.filter(\n        ({ file }) => file && file.name === newFile.name && file.size === newFile.size,\n    );\n\n    return duplicates.length > 0;\n};\n\ninterface GeneratePreviewUrlOptions {\n    file: File;\n    callback: (previewUrl: string) => void;\n}\n\nexport const generatePreviewUrl = ({ callback, file }: GeneratePreviewUrlOptions): void => {\n    const reader = new FileReader();\n\n    reader.onload = (event) => {\n        const previewUrl = event.target?.result as string;\n\n        callback(previewUrl);\n    };\n\n    reader.readAsDataURL(file);\n};\n\ninterface GenerateVideoThumbnailOptions {\n    file: File;\n    callback: (previewUrl: string) => void;\n}\n\nexport const generateVideoThumbnail = ({ file, callback }: GenerateVideoThumbnailOptions) => {\n    const canvas = document.createElement('canvas');\n    const video = document.createElement('video');\n\n    // this is important\n    video.autoplay = true;\n    video.muted = true;\n    video.src = URL.createObjectURL(file);\n\n    video.onloadeddata = () => {\n        const ctx = canvas.getContext('2d');\n\n        canvas.width = video.videoWidth;\n        canvas.height = video.videoHeight;\n\n        ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n        video.pause();\n\n        callback(canvas.toDataURL('image/png'));\n    };\n};\n"],"mappings":"AAOA,OAAO,MAAMA,mBAAmB,GAAGC,IAAA,IAAmD;EAAA,IAAlD;IAAEC,OAAO;IAAEC;EAAiC,CAAC,GAAAF,IAAA;EAC7E,MAAMG,UAAU,GAAGD,KAAK,CAACE,MAAM,CAC3BC,KAAA;IAAA,IAAC;MAAEC;IAAK,CAAC,GAAAD,KAAA;IAAA,OAAKC,IAAI,IAAIA,IAAI,CAACC,IAAI,KAAKN,OAAO,CAACM,IAAI,IAAID,IAAI,CAACE,IAAI,KAAKP,OAAO,CAACO,IAAI;EAAA,CAClF,CAAC;EAED,OAAOL,UAAU,CAACM,MAAM,GAAG,CAAC;AAChC,CAAC;AAOD,OAAO,MAAMC,kBAAkB,GAAGC,KAAA,IAAyD;EAAA,IAAxD;IAAEC,QAAQ;IAAEN;EAAgC,CAAC,GAAAK,KAAA;EAC5E,MAAME,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,KAAK,IAAK;IACvB,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,EAAEC,MAAgB;IAEjDP,QAAQ,CAACK,UAAU,CAAC;EACxB,CAAC;EAEDJ,MAAM,CAACO,aAAa,CAACd,IAAI,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAMe,sBAAsB,GAAGC,KAAA,IAAuD;EAAA,IAAtD;IAAEhB,IAAI;IAAEM;EAAwC,CAAC,GAAAU,KAAA;EACpF,MAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;EAC/C,MAAMC,KAAK,GAAGF,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;;EAE7C;EACAC,KAAK,CAACC,QAAQ,GAAG,IAAI;EACrBD,KAAK,CAACE,KAAK,GAAG,IAAI;EAClBF,KAAK,CAACG,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACzB,IAAI,CAAC;EAErCoB,KAAK,CAACM,YAAY,GAAG,MAAM;IACvB,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IAEnCX,MAAM,CAACY,KAAK,GAAGT,KAAK,CAACU,UAAU;IAC/Bb,MAAM,CAACc,MAAM,GAAGX,KAAK,CAACY,WAAW;IAEjCL,GAAG,EAAEM,SAAS,CAACb,KAAK,EAAE,CAAC,EAAE,CAAC,EAAEA,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACY,WAAW,CAAC;IAChEZ,KAAK,CAACc,KAAK,CAAC,CAAC;IAEb5B,QAAQ,CAACW,MAAM,CAACkB,SAAS,CAAC,WAAW,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/types/components/Gallery.d.ts

@@ -0,0 +1,47 @@
+import { type FileItem } from '@chayns-components/core';
+import { FC } from 'react';
+import { GalleryViewMode } from '../types/gallery';
+export type GalleryProps = {
+    /**
+     * Whether drag and drop is allowed or not
+     */
+    allowDragAndDrop?: boolean;
+    /**
+     * The message that should be displayed if a File is already given.
+     */
+    doubleFileDialogMessage?: string;
+    /**
+     * The minimum width of a file in the edit mode
+     */
+    fileMinWidth?: number;
+    /**
+     *  Images and videos which should be displayed
+     */
+    files?: FileItem[];
+    /**
+     *  Whether images and videos can be edited
+     */
+    isEditMode?: boolean;
+    /**
+     * The maximum amount of images and videos that can be uploaded.
+     */
+    maxFiles?: number;
+    /**
+     *  Function to be executed when files are added and uploaded
+     */
+    onAdd?: (file: FileItem) => void;
+    /**
+     * Function to be executed when the count of files are changed. Needed to check if all files are uploaded
+     */
+    onFileCountChange?: (fileCount: number) => void;
+    /**
+     *  Function to be executed when a file is removed
+     */
+    onRemove?: (file: FileItem) => void;
+    /**
+     * The mode how the images should be displayed.
+     */
+    viewMode?: GalleryViewMode;
+};
+declare const Gallery: FC<GalleryProps>;
+export default Gallery;

package/lib/types/components/Gallery.styles.d.ts

@@ -0,0 +1,10 @@
+import { GalleryViewMode } from '../types/gallery';
+export declare const StyledGallery: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGalleryItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $uploadedFileLength: number;
+    $ratio: number;
+    $viewMode: GalleryViewMode;
+}>> & string;
+export declare const StyledGalleryEditModeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fileMinWidth: number;
+}>> & string;

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export type AddFileProps = {
+    /**
+     *  Function to be executed when files are added
+     */
+    onAdd: (files: File[]) => void;
+};
+declare const AddFile: FC<AddFileProps>;
+export default AddFile;

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

@@ -0,0 +1,4 @@
+export declare const StyledAddFile: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAddFIleIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string;

package/lib/types/components/gallery-item/GalleryItem.d.ts

@@ -0,0 +1,30 @@
+import { type InternalFileItem } from '@chayns-components/core';
+import { FC } from 'react';
+export type GalleryItemProps = {
+    /**
+     *  Images and videos which should be displayed
+     */
+    fileItem: InternalFileItem;
+    /**
+     *  Whether images and videos can be edited
+     */
+    isEditMode: boolean;
+    /**
+     *  Function to be executed when a file is deleted
+     */
+    handleDeleteFile: (id?: string) => void;
+    /**
+     * The ratio of the image
+     */
+    ratio?: number;
+    /**
+     *  Length of the uploaded files
+     */
+    remainingItemsLength?: number;
+    /**
+     * Function to be executed if a file should be opened
+     */
+    onClick: (file: InternalFileItem) => void;
+};
+declare const GalleryItem: FC<GalleryItemProps>;
+export default GalleryItem;

package/lib/types/components/gallery-item/GalleryItem.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledGalleryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGalleryItemDeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string;
+export declare const StyledGalleryItemMoreItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/gallery-item/media-item/MediaItem.d.ts

@@ -0,0 +1,22 @@
+import { type InternalFileItem } from '@chayns-components/core';
+import { FC } from 'react';
+export type MediaItemProps = {
+    /**
+     *  Images and videos which should be displayed
+     */
+    fileItem: InternalFileItem;
+    /**
+     *  Whether images and videos can be edited
+     */
+    isEditMode: boolean;
+    /**
+     *  Function to be executed when a file is selected
+     */
+    openSelectedFile: (file: InternalFileItem) => void;
+    /**
+     * The ratio of the image
+     */
+    ratio: number;
+};
+declare const MediaItem: FC<MediaItemProps>;
+export default MediaItem;