@chayns-components/gallery 5.0.53 → 5.0.56

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionGalleryEditorPreviewItem = exports.StyledGalleryEditorPreviewItemLoadingIcon = exports.StyledGalleryEditorPreviewItemImageWrapper = exports.StyledGalleryEditorPreviewItemImage = void 0;
+var _react = require("motion/react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledMotionGalleryEditorPreviewItem = exports.StyledMotionGalleryEditorPreviewItem = (0, _styledComponents.default)(_react.motion.div)`
+    display: flex;
+    width: 100%;
+    height: 100%;
+`;
+const StyledGalleryEditorPreviewItemImageWrapper = exports.StyledGalleryEditorPreviewItemImageWrapper = _styledComponents.default.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${({
+  $ratio
+}) => $ratio};
+`;
+const StyledGalleryEditorPreviewItemImage = exports.StyledGalleryEditorPreviewItemImage = _styledComponents.default.img`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08)
+        inset;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+`;
+const StyledGalleryEditorPreviewItemLoadingIcon = exports.StyledGalleryEditorPreviewItemLoadingIcon = _styledComponents.default.div`
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
+//# sourceMappingURL=GalleryEditorPreviewItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditorPreviewItem.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionGalleryEditorPreviewItem","exports","styled","motion","div","StyledGalleryEditorPreviewItemImageWrapper","$ratio","StyledGalleryEditorPreviewItemImage","img","theme","StyledGalleryEditorPreviewItemLoadingIcon"],"sources":["../../../../../../src/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionGalleryEditorPreviewItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledGalleryEditorPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledGalleryEditorPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledGalleryEditorPreviewItemImage = styled.img<StyledGalleryEditorPreviewItemImageProps>`\n    background-color: ${({ theme }: StyledGalleryEditorPreviewItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledGalleryEditorPreviewItemImageProps) => theme['009-rgb']}, 0.08)\n        inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledGalleryEditorPreviewItemLoadingIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,oCAAoC,GAAAC,OAAA,CAAAD,oCAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACtE;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0CAA0C,GAAAJ,OAAA,CAAAI,0CAAA,GAAGH,yBAAM,CAACE,GAAuB;AACxF;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAIM,MAAMC,mCAAmC,GAAAN,OAAA,CAAAM,mCAAA,GAAGL,yBAAM,CAACM,GAA6C;AACvG,wBAAwB,CAAC;EAAEC;AAAgD,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7F;AACA,eAAe,CAAC;EAAEA;AAAgD,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACxF;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,yCAAyC,GAAAT,OAAA,CAAAS,yCAAA,GAAGR,yBAAM,CAACE,GAAG;AACnE;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=GalleryEditorPreviewItem.types.js.map

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

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

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _GalleryViewerItem = _interopRequireDefault(require("./gallery-viewer-item/GalleryViewerItem"));
+var _GalleryViewer = require("./GalleryViewer.styles");
+var _gallery = require("../../utils/gallery");
+var _gallery2 = require("../../types/gallery");
+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 GalleryViewer = ({
+  files,
+  viewMode = _gallery2.GalleryViewMode.GRID
+}) => {
+  const fileItems = files ?? [];
+  const ratio = (0, _react.useMemo)(() => (0, _gallery.getGalleryRatio)(fileItems), [fileItems]);
+  const handleOpenFiles = (0, _react.useCallback)(file => {
+    (0, _gallery.openKnownFiles)(fileItems, file);
+  }, [fileItems]);
+  const visibleItems = fileItems.slice(0, 4);
+  return /*#__PURE__*/_react.default.createElement(_GalleryViewer.StyledGalleryViewer, null, /*#__PURE__*/_react.default.createElement(_GalleryViewer.StyledGalleryViewerItemWrapper, {
+    $ratio: ratio,
+    $itemCount: fileItems.length,
+    $viewMode: viewMode
+  }, visibleItems.map((file, index) => /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.default, {
+    key: (0, _gallery.getGalleryViewerKey)(file, index),
+    fileItem: file,
+    onClick: handleOpenFiles,
+    ratio: (0, _gallery.getReadOnlyItemRatio)({
+      fileItems,
+      index,
+      viewMode
+    }),
+    remainingItemsLength: fileItems.length > 4 && index === 3 ? fileItems.length : undefined
+  }))));
+};
+GalleryViewer.displayName = 'GalleryViewer';
+var _default = exports.default = GalleryViewer;
+//# sourceMappingURL=GalleryViewer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.js","names":["_react","_interopRequireWildcard","require","_GalleryViewerItem","_interopRequireDefault","_GalleryViewer","_gallery","_gallery2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GalleryViewer","files","viewMode","GalleryViewMode","GRID","fileItems","ratio","useMemo","getGalleryRatio","handleOpenFiles","useCallback","file","openKnownFiles","visibleItems","slice","createElement","StyledGalleryViewer","StyledGalleryViewerItemWrapper","$ratio","$itemCount","length","$viewMode","map","index","key","getGalleryViewerKey","fileItem","onClick","getReadOnlyItemRatio","remainingItemsLength","undefined","displayName","_default","exports"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.tsx"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport GalleryViewerItem from './gallery-viewer-item/GalleryViewerItem';\nimport { StyledGalleryViewer, StyledGalleryViewerItemWrapper } from './GalleryViewer.styles';\nimport type { GalleryViewerProps } from './GalleryViewer.types';\nimport {\n    getGalleryRatio,\n    getGalleryViewerKey,\n    getReadOnlyItemRatio,\n    openKnownFiles,\n} from '../../utils/gallery';\nimport { GalleryViewMode } from '../../types/gallery';\n\nconst GalleryViewer: FC<GalleryViewerProps> = ({ files, viewMode = GalleryViewMode.GRID }) => {\n    const fileItems = files ?? [];\n\n    const ratio = useMemo(() => getGalleryRatio(fileItems), [fileItems]);\n\n    const handleOpenFiles = useCallback(\n        (file: FileItem) => {\n            openKnownFiles(fileItems, file);\n        },\n        [fileItems],\n    );\n\n    const visibleItems = fileItems.slice(0, 4);\n\n    return (\n        <StyledGalleryViewer>\n            <StyledGalleryViewerItemWrapper\n                $ratio={ratio}\n                $itemCount={fileItems.length}\n                $viewMode={viewMode}\n            >\n                {visibleItems.map((file, index) => (\n                    <GalleryViewerItem\n                        key={getGalleryViewerKey(file, index)}\n                        fileItem={file}\n                        onClick={handleOpenFiles}\n                        ratio={getReadOnlyItemRatio({ fileItems, index, viewMode })}\n                        remainingItemsLength={\n                            fileItems.length > 4 && index === 3 ? fileItems.length : undefined\n                        }\n                    />\n                ))}\n            </StyledGalleryViewerItemWrapper>\n        </StyledGalleryViewer>\n    );\n};\n\nGalleryViewer.displayName = 'GalleryViewer';\n\nexport default GalleryViewer;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/{Gallery.styles.js → gallery-viewer/GalleryViewer.styles.js}

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledGalleryItemWrapper = exports.StyledGalleryEditModeWrapper = exports.StyledGallery = void 0;
+exports.StyledGalleryViewerItemWrapper = exports.StyledGalleryViewer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _gallery = require("../types/gallery");
+var _gallery = require("../../types/gallery");
 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 StyledGallery = exports.StyledGallery = _styledComponents.default.div`
+const StyledGalleryViewer = exports.StyledGalleryViewer = _styledComponents.default.div`
     width: 100%;
 `;
-const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledComponents.default.div`
+const StyledGalleryViewerItemWrapper = exports.StyledGalleryViewerItemWrapper = _styledComponents.default.div`
     display: grid;
     gap: 5px;
 
     ${({
   $viewMode,
-  $uploadedFileLength
+  $itemCount
 }) => {
   if ($viewMode === _gallery.GalleryViewMode.GRID) {
     return (0, _styledComponents.css)`
@@ -25,7 +25,7 @@ const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledCompo
                 }
 
                 ${() => {
-      switch ($uploadedFileLength) {
+      switch ($itemCount) {
         case 1:
           return (0, _styledComponents.css)`
                                 grid-template-columns: 1fr;
@@ -55,7 +55,7 @@ const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledCompo
     }}
             `;
   }
-  switch ($uploadedFileLength) {
+  switch ($itemCount) {
     case 1:
       return (0, _styledComponents.css)`
                     grid-template-columns: 1fr;
@@ -78,16 +78,11 @@ const StyledGalleryItemWrapper = exports.StyledGalleryItemWrapper = _styledCompo
   }
 }}
 
-    aspect-ratio: ${({
+    ${({
+  $itemCount,
   $ratio
-}) => $ratio};
-`;
-const StyledGalleryEditModeWrapper = exports.StyledGalleryEditModeWrapper = _styledComponents.default.div`
-    display: grid;
-    grid-template-columns: ${({
-  $fileMinWidth
-}) => `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};
-    grid-auto-rows: 1fr;
-    gap: 6px;
+}) => $itemCount > 0 ? (0, _styledComponents.css)`
+                  aspect-ratio: ${$ratio};
+              ` : ''}
 `;
-//# sourceMappingURL=Gallery.styles.js.map
+//# sourceMappingURL=GalleryViewer.styles.js.map

package/lib/cjs/components/gallery-viewer/GalleryViewer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_gallery","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGalleryViewer","exports","styled","div","StyledGalleryViewerItemWrapper","$viewMode","$itemCount","GalleryViewMode","GRID","css","$ratio"],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { GalleryViewMode } from '../../types/gallery';\n\nexport const StyledGalleryViewer = styled.div`\n    width: 100%;\n`;\n\nexport const StyledGalleryViewerItemWrapper = styled.div<{\n    $itemCount: number;\n    $ratio: number;\n    $viewMode: GalleryViewMode;\n}>`\n    display: grid;\n    gap: 5px;\n\n    ${({ $viewMode, $itemCount }) => {\n        if ($viewMode === GalleryViewMode.GRID) {\n            return css`\n                > div:first-child {\n                    grid-column: 1 / -1;\n                }\n\n                ${() => {\n                    switch ($itemCount) {\n                        case 1:\n                            return css`\n                                grid-template-columns: 1fr;\n                            `;\n                        case 2:\n                            return css`\n                                grid-template-columns: repeat(2, 1fr);\n                                > div:first-child {\n                                    grid-column: span 1;\n                                }\n                            `;\n                        case 3:\n                            return css`\n                                grid-template-columns: repeat(2, 1fr);\n                                > div:first-child {\n                                    grid-column: span 2;\n                                }\n                            `;\n                        default:\n                            return css`\n                                grid-template-columns: repeat(3, minmax(0, 1fr));\n                                > div:not(:first-child) {\n                                    grid-column: span 1;\n                                }\n                            `;\n                    }\n                }}\n            `;\n        }\n\n        switch ($itemCount) {\n            case 1:\n                return css`\n                    grid-template-columns: 1fr;\n                `;\n            case 2:\n                return css`\n                    grid-template-columns: repeat(2, 1fr);\n                `;\n            case 3:\n                return css`\n                    grid-template-columns: repeat(3, 1fr);\n                `;\n            default:\n                return css`\n                    grid-template-columns: repeat(2, 1fr);\n                    > div:nth-child(-n + 2) {\n                        grid-row: 1;\n                    }\n                `;\n        }\n    }}\n\n    ${({ $itemCount, $ratio }) =>\n        $itemCount > 0\n            ? css`\n                  aspect-ratio: ${$ratio};\n              `\n            : ''}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAsD,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,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;AAE/C,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC7C;AACA,CAAC;AAEM,MAAMC,8BAA8B,GAAAH,OAAA,CAAAG,8BAAA,GAAGF,yBAAM,CAACC,GAInD;AACF;AACA;AACA;AACA,MAAM,CAAC;EAAEE,SAAS;EAAEC;AAAW,CAAC,KAAK;EAC7B,IAAID,SAAS,KAAKE,wBAAe,CAACC,IAAI,EAAE;IACpC,OAAO,IAAAC,qBAAG;AACtB;AACA;AACA;AACA;AACA,kBAAkB,MAAM;MACJ,QAAQH,UAAU;QACd,KAAK,CAAC;UACF,OAAO,IAAAG,qBAAG;AACtC;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAO,IAAAA,qBAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAO,IAAAA,qBAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;QACL;UACI,OAAO,IAAAA,qBAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;MACT;IACJ,CAAC;AACjB,aAAa;EACL;EAEA,QAAQH,UAAU;IACd,KAAK,CAAC;MACF,OAAO,IAAAG,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA;AACA;AACA;AACA,iBAAiB;EACT;AACJ,CAAC;AACL;AACA,MAAM,CAAC;EAAEH,UAAU;EAAEI;AAAO,CAAC,KACrBJ,UAAU,GAAG,CAAC,GACR,IAAAG,qBAAG;AACjB,kCAAkCC,MAAM;AACxC,eAAe,GACD,EAAE;AAChB,CAAC","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/GalleryViewer.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=GalleryViewer.types.js.map

package/lib/cjs/components/gallery-viewer/GalleryViewer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.types.js","names":[],"sources":["../../../../src/components/gallery-viewer/GalleryViewer.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../../types/gallery';\n\n/**\n * Props for the prop-driven read-only gallery viewer.\n */\nexport interface GalleryViewerProps {\n    /**\n     * Provides the already known media items that should be rendered without local upload state.\n     * @description\n     * The viewer renders these files directly from props and does not mirror them into local component state.\n     * @example\n     * <GalleryViewer files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Defines how the media tiles are arranged in read-only mode.\n     * @description\n     * Use this prop to switch between the supported viewer layouts for known media.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <GalleryViewer files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MediaContent = _interopRequireDefault(require("../../media-content/MediaContent"));
+var _GalleryViewerItem = require("./GalleryViewerItem.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GalleryViewerItem = ({
+  fileItem,
+  ratio = 1,
+  remainingItemsLength,
+  onClick
+}) => /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerItem, null, /*#__PURE__*/_react.default.createElement(_MediaContent.default, {
+  file: fileItem.file,
+  onClick: () => onClick(fileItem),
+  ratio: ratio
+}), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryViewerItem.StyledGalleryViewerMoreItemsIndicator, {
+  onClick: () => onClick(fileItem)
+}, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
+GalleryViewerItem.displayName = 'GalleryViewerItem';
+var _default = exports.default = GalleryViewerItem;
+//# sourceMappingURL=GalleryViewerItem.js.map

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewerItem.js","names":["_react","_interopRequireDefault","require","_MediaContent","_GalleryViewerItem","e","__esModule","default","GalleryViewerItem","fileItem","ratio","remainingItemsLength","onClick","createElement","StyledGalleryViewerItem","file","StyledGalleryViewerMoreItemsIndicator","displayName","_default","exports"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport MediaContent from '../../media-content/MediaContent';\nimport {\n    StyledGalleryViewerItem,\n    StyledGalleryViewerMoreItemsIndicator,\n} from './GalleryViewerItem.styles';\nimport type { GalleryViewerItemProps } from './GalleryViewerItem.types';\n\nconst GalleryViewerItem: FC<GalleryViewerItemProps> = ({\n    fileItem,\n    ratio = 1,\n    remainingItemsLength,\n    onClick,\n}) => (\n    <StyledGalleryViewerItem>\n        <MediaContent file={fileItem.file} onClick={() => onClick(fileItem)} ratio={ratio} />\n        {remainingItemsLength && (\n            <StyledGalleryViewerMoreItemsIndicator onClick={() => onClick(fileItem)}>\n                <p>{`+ ${remainingItemsLength - 3}`}</p>\n            </StyledGalleryViewerMoreItemsIndicator>\n        )}\n    </StyledGalleryViewerItem>\n);\n\nGalleryViewerItem.displayName = 'GalleryViewerItem';\n\nexport default GalleryViewerItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AAGoC,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGpC,MAAMG,iBAA6C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC;AACJ,CAAC,kBACGZ,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACT,kBAAA,CAAAU,uBAAuB,qBACpBd,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACV,aAAA,CAAAI,OAAY;EAACQ,IAAI,EAAEN,QAAQ,CAACM,IAAK;EAACH,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACH,QAAQ,CAAE;EAACC,KAAK,EAAEA;AAAM,CAAE,CAAC,EACpFC,oBAAoB,iBACjBX,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACT,kBAAA,CAAAY,qCAAqC;EAACJ,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACH,QAAQ;AAAE,gBACpET,MAAA,CAAAO,OAAA,CAAAM,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACJ,CAEtB,CAC5B;AAEDH,iBAAiB,CAACS,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAErCC,iBAAiB","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledGalleryViewerMoreItemsIndicator = exports.StyledGalleryViewerItem = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledGalleryViewerItem = exports.StyledGalleryViewerItem = _styledComponents.default.div`
+    display: flex;
+    position: relative;
+    height: 100%;
+    width: 100%;
+`;
+const StyledGalleryViewerMoreItemsIndicator = exports.StyledGalleryViewerMoreItemsIndicator = _styledComponents.default.div`
+    position: absolute;
+    z-index: 2;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: brightness(40%);
+
+    p {
+        font-size: 40px;
+        color: white;
+    }
+`;
+//# sourceMappingURL=GalleryViewerItem.styles.js.map

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewerItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGalleryViewerItem","exports","styled","div","StyledGalleryViewerMoreItemsIndicator"],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledGalleryViewerItem = styled.div`\n    display: flex;\n    position: relative;\n    height: 100%;\n    width: 100%;\n`;\n\nexport const StyledGalleryViewerMoreItemsIndicator = styled.div`\n    position: absolute;\n    z-index: 2;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    backdrop-filter: brightness(40%);\n\n    p {\n        font-size: 40px;\n        color: white;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAH,OAAA,CAAAG,qCAAA,GAAGF,yBAAM,CAACC,GAAG;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=GalleryViewerItem.types.js.map

package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewerItem.types.js","names":[],"sources":["../../../../../src/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for a dedicated read-only gallery tile.\n */\nexport interface GalleryViewerItemProps {\n    /**\n     * Provides the uploaded media that should be rendered.\n     * @description\n     * The viewer item renders only already known media and never deals with upload-specific transient state.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    fileItem: FileItem;\n    /**\n     * Defines the aspect ratio that should be reserved for the tile.\n     * @description\n     * Use this prop to reserve a deterministic tile height for stable read-only rendering.\n     * @default 1\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} ratio={1.5} />\n     * @optional\n     */\n    ratio?: number;\n    /**\n     * Provides the total item count when the last visible tile should show a remaining-items overlay.\n     * @description\n     * When this prop is set on the last visible viewer tile, the tile displays the `+n` overlay for hidden items.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} remainingItemsLength={5} />\n     * @optional\n     */\n    remainingItemsLength?: number;\n    /**\n     * Is called when the tile is selected.\n     * @description\n     * The viewer uses this callback to open the selected file inside the slideshow flow.\n     * @example\n     * <GalleryViewerItem fileItem={file} onClick={handleOpen} />\n     */\n    onClick: (file: FileItem) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/media-content/MediaContent.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@chayns-components/core");
+var _react = _interopRequireDefault(require("react"));
+var _MediaContent = require("./MediaContent.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MediaContent = ({
+  file,
+  ratio,
+  onClick,
+  playIconSize = 50
+}) => 'thumbnailUrl' in file ? /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentVideoWrapper, {
+  onClick: onClick,
+  $ratio: ratio
+}, /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentPlayIcon, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+  size: playIconSize,
+  icons: ['fa fa-play']
+})), /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentVideo, {
+  poster: file.thumbnailUrl
+}, /*#__PURE__*/_react.default.createElement("source", {
+  src: file.url,
+  type: "video/mp4"
+}))) : /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentImageWrapper, {
+  onClick: onClick,
+  $ratio: ratio
+}, /*#__PURE__*/_react.default.createElement(_MediaContent.StyledMediaContentImage, {
+  draggable: false,
+  src: file.url
+}));
+MediaContent.displayName = 'MediaContent';
+var _default = exports.default = MediaContent;
+//# sourceMappingURL=MediaContent.js.map

package/lib/cjs/components/media-content/MediaContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.js","names":["_core","require","_react","_interopRequireDefault","_MediaContent","e","__esModule","default","MediaContent","file","ratio","onClick","playIconSize","createElement","StyledMediaContentVideoWrapper","$ratio","StyledMediaContentPlayIcon","Icon","size","icons","StyledMediaContentVideo","poster","thumbnailUrl","src","url","type","StyledMediaContentImageWrapper","StyledMediaContentImage","draggable","displayName","_default","exports"],"sources":["../../../../src/components/media-content/MediaContent.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledMediaContentImage,\n    StyledMediaContentImageWrapper,\n    StyledMediaContentPlayIcon,\n    StyledMediaContentVideo,\n    StyledMediaContentVideoWrapper,\n} from './MediaContent.styles';\nimport type { MediaContentProps } from './MediaContent.types';\n\nconst MediaContent: FC<MediaContentProps> = ({ file, ratio, onClick, playIconSize = 50 }) =>\n    'thumbnailUrl' in file ? (\n        <StyledMediaContentVideoWrapper onClick={onClick} $ratio={ratio}>\n            <StyledMediaContentPlayIcon>\n                <Icon size={playIconSize} icons={['fa fa-play']} />\n            </StyledMediaContentPlayIcon>\n            <StyledMediaContentVideo poster={file.thumbnailUrl}>\n                <source src={file.url} type=\"video/mp4\" />\n            </StyledMediaContentVideo>\n        </StyledMediaContentVideoWrapper>\n    ) : (\n        <StyledMediaContentImageWrapper onClick={onClick} $ratio={ratio}>\n            <StyledMediaContentImage draggable={false} src={file.url} />\n        </StyledMediaContentImageWrapper>\n    );\n\nMediaContent.displayName = 'MediaContent';\n\nexport default MediaContent;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAM+B,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAG/B,MAAMG,YAAmC,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAEC,YAAY,GAAG;AAAG,CAAC,KACpF,cAAc,IAAIH,IAAI,gBAClBP,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAU,8BAA8B;EAACH,OAAO,EAAEA,OAAQ;EAACI,MAAM,EAAEL;AAAM,gBAC5DR,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAY,0BAA0B,qBACvBd,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACb,KAAA,CAAAiB,IAAI;EAACC,IAAI,EAAEN,YAAa;EAACO,KAAK,EAAE,CAAC,YAAY;AAAE,CAAE,CAC1B,CAAC,eAC7BjB,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAgB,uBAAuB;EAACC,MAAM,EAAEZ,IAAI,CAACa;AAAa,gBAC/CpB,MAAA,CAAAK,OAAA,CAAAM,aAAA;EAAQU,GAAG,EAAEd,IAAI,CAACe,GAAI;EAACC,IAAI,EAAC;AAAW,CAAE,CACpB,CACG,CAAC,gBAEjCvB,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAsB,8BAA8B;EAACf,OAAO,EAAEA,OAAQ;EAACI,MAAM,EAAEL;AAAM,gBAC5DR,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACT,aAAA,CAAAuB,uBAAuB;EAACC,SAAS,EAAE,KAAM;EAACL,GAAG,EAAEd,IAAI,CAACe;AAAI,CAAE,CAC/B,CACnC;AAELhB,YAAY,CAACqB,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxB,OAAA,GAE3BC,YAAY","ignoreList":[]}

package/lib/cjs/components/media-content/MediaContent.styles.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMediaContentVideoWrapper = exports.StyledMediaContentVideo = exports.StyledMediaContentPlayIcon = exports.StyledMediaContentImageWrapper = exports.StyledMediaContentImage = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledMediaContentVideoWrapper = exports.StyledMediaContentVideoWrapper = _styledComponents.default.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${({
+  $ratio
+}) => $ratio};
+`;
+const StyledMediaContentImageWrapper = exports.StyledMediaContentImageWrapper = _styledComponents.default.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${({
+  $ratio
+}) => $ratio};
+`;
+const StyledMediaContentImage = exports.StyledMediaContentImage = _styledComponents.default.img`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+`;
+const StyledMediaContentVideo = exports.StyledMediaContentVideo = _styledComponents.default.video`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    width: 100%;
+    object-fit: cover;
+`;
+const StyledMediaContentPlayIcon = exports.StyledMediaContentPlayIcon = _styledComponents.default.div`
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
+//# sourceMappingURL=MediaContent.styles.js.map

package/lib/cjs/components/media-content/MediaContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledMediaContentVideoWrapper","exports","styled","div","$ratio","StyledMediaContentImageWrapper","StyledMediaContentImage","img","theme","StyledMediaContentVideo","video","StyledMediaContentPlayIcon"],"sources":["../../../../src/components/media-content/MediaContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledMediaContentVideoWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaContentImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaContentVideoProps = WithTheme<unknown>;\n\ntype StyledMediaContentImageProps = WithTheme<unknown>;\n\nexport const StyledMediaContentImage = styled.img<StyledMediaContentImageProps>`\n    background-color: ${({ theme }: StyledMediaContentImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaContentVideo = styled.video<StyledMediaContentVideoProps>`\n    background-color: ${({ theme }: StyledMediaContentVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMediaContentVideoProps) => theme['009-rgb']}, 0.08) inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaContentPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,8BAA8B,GAAAJ,OAAA,CAAAI,8BAAA,GAAGH,yBAAM,CAACC,GAAuB;AAC5E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMM,MAAME,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACK,GAAiC;AAC/E,wBAAwB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACQ,KAAmC;AACjF,wBAAwB,CAAC;EAAEF;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACjF;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA,CAAC;AAEM,MAAMG,0BAA0B,GAAAV,OAAA,CAAAU,0BAAA,GAAGT,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/media-content/MediaContent.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=MediaContent.types.js.map

package/lib/cjs/components/media-content/MediaContent.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.types.js","names":[],"sources":["../../../../src/components/media-content/MediaContent.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\n\n/**\n * Props for the low-level uploaded media renderer shared by viewer and editor.\n */\nexport interface MediaContentProps {\n    /**\n     * Provides the uploaded media item that should be rendered.\n     * @description\n     * This low-level renderer accepts already known image or video data and does not handle upload-specific state.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1} />\n     */\n    file: FileItem['file'];\n    /**\n     * Defines the aspect ratio that should be reserved for the media.\n     * @description\n     * The surrounding tile uses this value to reserve a deterministic media height before the asset finishes loading.\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />\n     */\n    ratio: number;\n    /**\n     * Is called when the media tile is selected.\n     * @description\n     * Use this callback to react to clicks on the rendered image or video tile.\n     * @example\n     * <MediaContent file={file.file} onClick={() => console.log('open')} ratio={1} />\n     */\n    onClick: () => void;\n    /**\n     * Defines the size of the video play icon.\n     * @description\n     * This prop only affects rendered videos. Image tiles ignore it.\n     * @default 50\n     * @example\n     * <MediaContent file={file.file} onClick={handleOpen} playIconSize={30} ratio={1} />\n     * @optional\n     */\n    playIconSize?: number;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/index.js

@@ -9,13 +9,27 @@ Object.defineProperty(exports, "Gallery", {
     return _Gallery.default;
   }
 });
+Object.defineProperty(exports, "GalleryEditor", {
+  enumerable: true,
+  get: function () {
+    return _GalleryEditor.default;
+  }
+});
 Object.defineProperty(exports, "GalleryViewMode", {
   enumerable: true,
   get: function () {
     return _gallery.GalleryViewMode;
   }
 });
+Object.defineProperty(exports, "GalleryViewer", {
+  enumerable: true,
+  get: function () {
+    return _GalleryViewer.default;
+  }
+});
 var _Gallery = _interopRequireDefault(require("./components/Gallery"));
+var _GalleryEditor = _interopRequireDefault(require("./components/gallery-editor/GalleryEditor"));
+var _GalleryViewer = _interopRequireDefault(require("./components/gallery-viewer/GalleryViewer"));
 var _gallery = require("./types/gallery");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","_gallery","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAkD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","_GalleryEditor","_GalleryViewer","_gallery","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';\nexport { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';\nexport type { GalleryProps } from './components/Gallery.types';\nexport type { GalleryEditorProps } from './components/gallery-editor/GalleryEditor.types';\nexport type { GalleryViewerProps } from './components/gallery-viewer/GalleryViewer.types';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AAIA,IAAAG,QAAA,GAAAH,OAAA;AAAkD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/cjs/types/gallery.js

@@ -4,8 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GalleryViewMode = void 0;
+/**
+ * Defines the available gallery layouts for read-only rendering.
+ */
 let GalleryViewMode = exports.GalleryViewMode = /*#__PURE__*/function (GalleryViewMode) {
+  /**
+   * Arranges visible items in a square-first layout.
+   */
   GalleryViewMode[GalleryViewMode["SQUARE"] = 0] = "SQUARE";
+  /**
+   * Arranges visible items in the gallery grid layout.
+   */
   GalleryViewMode[GalleryViewMode["GRID"] = 1] = "GRID";
   return GalleryViewMode;
 }({});

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

@@ -1 +1 @@
-{"version":3,"file":"gallery.js","names":["GalleryViewMode","exports"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n    SQUARE,\n    GRID,\n}\n"],"mappings":";;;;;;IAAYA,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}
+{"version":3,"file":"gallery.js","names":["GalleryViewMode","exports"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["/**\n * Defines the available gallery layouts for read-only rendering.\n */\nexport enum GalleryViewMode {\n    /**\n     * Arranges visible items in a square-first layout.\n     */\n    SQUARE,\n    /**\n     * Arranges visible items in the gallery grid layout.\n     */\n    GRID,\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAFA,IAGYA,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAfA,eAAe;EACvB;AACJ;AACA;EAHYA,eAAe,CAAfA,eAAe;EAKvB;AACJ;AACA;EAPYA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}