@alfalab/core-components-gallery 7.2.3 → 7.3.0

package/esm/components/header-mobile/index.css

@@ -1,7 +1,7 @@
 :root {
     --color-static-neutral-0-inverted: #262629;
 }
-.gallery__headerMobile_1k9pz {
+.gallery__headerMobile_2zyga {
     position: relative;
     height: 72px;
     z-index: 3;
@@ -10,21 +10,21 @@
     justify-content: space-between;
     align-items: center;
 }
-.gallery__headerMobile_1k9pz.gallery__video_1k9pz {
+.gallery__headerMobile_2zyga.gallery__video_2zyga {
         position: absolute;
         width: 100%;
         background-color: var(--color-static-neutral-0-inverted);
         transition: transform 0.3s ease-in-out;
     }
-.gallery__hide_1k9pz {
+.gallery__hide_2zyga {
     transform: translateY(-96px);
 }
-.gallery__leftButton_1k9pz,
-.gallery__rightButtons_1k9pz {
+.gallery__leftButton_2zyga,
+.gallery__rightButtons_2zyga {
     display: flex;
     align-items: center;
 }
-.gallery__description_1k9pz {
+.gallery__description_2zyga {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);

package/esm/components/header-mobile/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"headerMobile":"gallery__headerMobile_1k9pz","video":"gallery__video_1k9pz","hide":"gallery__hide_1k9pz","rightButtons":"gallery__rightButtons_1k9pz","description":"gallery__description_1k9pz"};
+var styles = {"headerMobile":"gallery__headerMobile_2zyga","video":"gallery__video_2zyga","hide":"gallery__hide_2zyga","rightButtons":"gallery__rightButtons_2zyga","description":"gallery__description_2zyga"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/image-preview/Component.js

@@ -4,6 +4,7 @@ import { useFocus } from '@alfalab/hooks';
 import { PREVIEW_VIDEO_MULTIPLIER, PREVIEW_HEIGHT_MOBILE, PREVIEW_HEIGHT_DESKTOP, PREVIEW_WIDTH_MOBILE, PREVIEW_WIDTH_DESKTOP } from '../../constants.js';
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
+import 'tslib';
 import { NoImagePaths } from './paths.js';
 import styles from './index.module.css.js';
 
@@ -71,7 +72,7 @@ var ImagePreview = function (_a) {
         }
         if (isVideo(image.src)) {
             return (React.createElement("div", { className: cn(styles.preview, styles.image, (_c = {},
-                    _c[styles.loading] = !meta,
+                    _c[styles.loading] = !(meta === null || meta === void 0 ? void 0 : meta.loaded),
                     _c[styles.mobile] = isMobile,
                     _c)) },
                 React.createElement("canvas", { className: cn(styles.canvasPreview, (_d = {}, _d[styles.mobile] = isMobile, _d)), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })));

package/esm/components/image-preview/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n    type FC,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport cn from 'classnames';\n\nimport { useFocus } from '@alfalab/hooks';\n\nimport {\n    PREVIEW_HEIGHT_DESKTOP,\n    PREVIEW_HEIGHT_MOBILE,\n    PREVIEW_VIDEO_MULTIPLIER,\n    PREVIEW_WIDTH_DESKTOP,\n    PREVIEW_WIDTH_MOBILE,\n} from '../../constants';\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage } from '../../types';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { NoImagePaths } from './paths';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    image: GalleryImage;\n    index: number;\n    active?: boolean;\n    onSelect: (index: number) => void;\n    className: string;\n};\n\nexport const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {\n    const { imagesMeta, view } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n\n    const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;\n    const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        const video = imagesMeta[index]?.player?.current;\n        const context = canvas?.getContext('2d');\n        const drawPreview = () => {\n            if (video) {\n                context?.drawImage(\n                    video,\n                    0,\n                    0,\n                    video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,\n                    video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,\n                );\n            }\n        };\n\n        drawPreview();\n\n        if (isVideo(image.src)) {\n            video?.addEventListener('canplay', drawPreview);\n        }\n\n        return () => {\n            if (isVideo(image.src)) {\n                video?.removeEventListener('canplay', drawPreview);\n            }\n        };\n    }, [image.src, imagesMeta, index]);\n\n    const handleClick = () => {\n        onSelect(index);\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            onSelect(index);\n        }\n    };\n\n    const handleDragStart: MouseEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n    };\n\n    const [focused] = useFocus(ref, 'keyboard');\n\n    const meta = imagesMeta[index];\n\n    const isBroken = Boolean(meta?.broken);\n\n    const renderPreview = () => {\n        if (isBroken) {\n            return (\n                <div\n                    className={cn(\n                        styles.preview,\n                        { [styles.mobile]: isMobile, [styles.active]: active },\n                        styles.brokenImageWrapper,\n                    )}\n                >\n                    <div className={cn(styles.brokenIcon)}>\n                        <svg\n                            xmlns='http://www.w3.org/2000/svg'\n                            width={previewWidth}\n                            height={previewHeight}\n                            viewBox={`${isMobile ? -6 : 0} ${\n                                isMobile ? -12 : 0\n                            } ${previewWidth} ${previewHeight}`}\n                            fill='none'\n                        >\n                            <rect fill='none' />\n                            <path\n                                fillRule='evenodd'\n                                clipRule='evenodd'\n                                d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}\n                                fill='#89898A'\n                            />\n                            <path\n                                d={\n                                    isMobile\n                                        ? NoImagePaths.mobileTriangle\n                                        : NoImagePaths.triangleImage\n                                }\n                                fill='#89898A'\n                            />\n                        </svg>\n                    </div>\n                </div>\n            );\n        }\n\n        if (image.previewSrc) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <img src={image.previewSrc} alt={getImageAlt(image, index)} />\n                </div>\n            );\n        }\n\n        if (isVideo(image.src)) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <canvas\n                        className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}\n                        data-testid='canvas'\n                        width={previewWidth}\n                        height={previewHeight}\n                        ref={canvasRef}\n                    />\n                </div>\n            );\n        }\n\n        return (\n            <div\n                className={cn(styles.preview, styles.image, {\n                    [styles.loading]: !meta,\n                    [styles.mobile]: isMobile,\n                })}\n            >\n                <img src={image.src} alt={getImageAlt(image, index)} />\n            </div>\n        );\n    };\n\n    return (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.active]: active,\n                    [styles.focused]: focused,\n                    [styles.mobile]: isMobile,\n                },\n                className,\n            )}\n            onClick={handleClick}\n            role='button'\n            onKeyDown={handleKeyDown}\n            onMouseDown={handleDragStart}\n            tabIndex={0}\n            ref={ref}\n            aria-label={`Перейти к ${index + 1} элементу`}\n        >\n            {renderPreview()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n    type FC,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport cn from 'classnames';\n\nimport { useFocus } from '@alfalab/hooks';\n\nimport {\n    PREVIEW_HEIGHT_DESKTOP,\n    PREVIEW_HEIGHT_MOBILE,\n    PREVIEW_VIDEO_MULTIPLIER,\n    PREVIEW_WIDTH_DESKTOP,\n    PREVIEW_WIDTH_MOBILE,\n} from '../../constants';\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage } from '../../types';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { NoImagePaths } from './paths';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    image: GalleryImage;\n    index: number;\n    active?: boolean;\n    onSelect: (index: number) => void;\n    className: string;\n};\n\nexport const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {\n    const { imagesMeta, view } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n\n    const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;\n    const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        const video = imagesMeta[index]?.player?.current;\n        const context = canvas?.getContext('2d');\n        const drawPreview = () => {\n            if (video) {\n                context?.drawImage(\n                    video,\n                    0,\n                    0,\n                    video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,\n                    video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,\n                );\n            }\n        };\n\n        drawPreview();\n\n        if (isVideo(image.src)) {\n            video?.addEventListener('canplay', drawPreview);\n        }\n\n        return () => {\n            if (isVideo(image.src)) {\n                video?.removeEventListener('canplay', drawPreview);\n            }\n        };\n    }, [image.src, imagesMeta, index]);\n\n    const handleClick = () => {\n        onSelect(index);\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            onSelect(index);\n        }\n    };\n\n    const handleDragStart: MouseEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n    };\n\n    const [focused] = useFocus(ref, 'keyboard');\n\n    const meta = imagesMeta[index];\n\n    const isBroken = Boolean(meta?.broken);\n\n    const renderPreview = () => {\n        if (isBroken) {\n            return (\n                <div\n                    className={cn(\n                        styles.preview,\n                        { [styles.mobile]: isMobile, [styles.active]: active },\n                        styles.brokenImageWrapper,\n                    )}\n                >\n                    <div className={cn(styles.brokenIcon)}>\n                        <svg\n                            xmlns='http://www.w3.org/2000/svg'\n                            width={previewWidth}\n                            height={previewHeight}\n                            viewBox={`${isMobile ? -6 : 0} ${\n                                isMobile ? -12 : 0\n                            } ${previewWidth} ${previewHeight}`}\n                            fill='none'\n                        >\n                            <rect fill='none' />\n                            <path\n                                fillRule='evenodd'\n                                clipRule='evenodd'\n                                d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}\n                                fill='#89898A'\n                            />\n                            <path\n                                d={\n                                    isMobile\n                                        ? NoImagePaths.mobileTriangle\n                                        : NoImagePaths.triangleImage\n                                }\n                                fill='#89898A'\n                            />\n                        </svg>\n                    </div>\n                </div>\n            );\n        }\n\n        if (image.previewSrc) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <img src={image.previewSrc} alt={getImageAlt(image, index)} />\n                </div>\n            );\n        }\n\n        if (isVideo(image.src)) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta?.loaded,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <canvas\n                        className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}\n                        data-testid='canvas'\n                        width={previewWidth}\n                        height={previewHeight}\n                        ref={canvasRef}\n                    />\n                </div>\n            );\n        }\n\n        return (\n            <div\n                className={cn(styles.preview, styles.image, {\n                    [styles.loading]: !meta,\n                    [styles.mobile]: isMobile,\n                })}\n            >\n                <img src={image.src} alt={getImageAlt(image, index)} />\n            </div>\n        );\n    };\n\n    return (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.active]: active,\n                    [styles.focused]: focused,\n                    [styles.mobile]: isMobile,\n                },\n                className,\n            )}\n            onClick={handleClick}\n            role='button'\n            onKeyDown={handleKeyDown}\n            onMouseDown={handleDragStart}\n            tabIndex={0}\n            ref={ref}\n            aria-label={`Перейти к ${index + 1} элементу`}\n        >\n            {renderPreview()}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAmCO,IAAM,YAAY,GAAc,UAAC,EAAqD,EAAA;;AAAnD,IAAA,IAAA,KAAK,WAAA,EAAE,EAAA,GAAA,EAAA,CAAA,MAAc,EAAd,MAAM,mBAAG,KAAK,GAAA,EAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA;IACjF,IAAA,EAAA,GAAuB,UAAU,CAAC,cAAc,CAAC,EAA/C,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAA+B;AAEvD,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;IAElC,IAAM,YAAY,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;IAC5E,IAAM,aAAa,GAAG,QAAQ,GAAG,qBAAqB,GAAG,sBAAsB;AAE/E,IAAA,IAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC;AACxC,IAAA,IAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC;AAEjD,IAAA,SAAS,CAAC,YAAA;;AACN,QAAA,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAChC,QAAA,IAAM,KAAK,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO;AAChD,QAAA,IAAM,OAAO,GAAG,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,UAAU,CAAC,IAAI,CAAC;AACxC,QAAA,IAAM,WAAW,GAAG,YAAA;YAChB,IAAI,KAAK,EAAE;gBACP,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,CACd,KAAK,EACL,CAAC,EACD,CAAC,EACD,KAAK,CAAC,UAAU,GAAG,wBAAwB,EAC3C,KAAK,CAAC,WAAW,GAAG,wBAAwB,CAC/C;;AAET,SAAC;AAED,QAAA,WAAW,EAAE;AAEb,QAAA,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACpB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC;;QAGnD,OAAO,YAAA;AACH,YAAA,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBACpB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC;;AAE1D,SAAC;KACJ,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AAElC,IAAA,IAAM,WAAW,GAAG,YAAA;QAChB,QAAQ,CAAC,KAAK,CAAC;AACnB,KAAC;IAED,IAAM,aAAa,GAAyB,UAAC,KAAK,EAAA;AAC9C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACvB,QAAQ,CAAC,KAAK,CAAC;;AAEvB,KAAC;IAED,IAAM,eAAe,GAAsC,UAAC,CAAC,EAAA;QACzD,CAAC,CAAC,cAAc,EAAE;AACtB,KAAC;IAEM,IAAA,OAAO,GAAI,QAAQ,CAAC,GAAG,EAAE,UAAU,CAAC,CAAA,CAAA,CAA7B;AAEd,IAAA,IAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC;AAE9B,IAAA,IAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,MAAM,CAAC;AAEtC,IAAA,IAAM,aAAa,GAAG,YAAA;;QAClB,IAAI,QAAQ,EAAE;YACV,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,OAAO,GACZ,EAAA,GAAA,EAAA,EAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,QAAQ,EAAE,EAAC,CAAA,MAAM,CAAC,MAAM,CAAG,GAAA,MAAM,EACpD,EAAA,GAAA,MAAM,CAAC,kBAAkB,CAC5B,EAAA;AAED,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAA;oBACjC,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,EAAG,CAAA,MAAA,CAAA,QAAQ,GAAG,EAAE,GAAG,CAAC,cACzB,QAAQ,GAAG,GAAG,GAAG,CAAC,EAAA,GAAA,CAAA,CAAA,MAAA,CAClB,YAAY,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,aAAa,CAAE,EACnC,IAAI,EAAC,MAAM,EAAA;wBAEX,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA;wBACpB,KACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC,WAAW,GAAG,YAAY,CAAC,SAAS,EAC/D,IAAI,EAAC,SAAS,EAChB,CAAA;wBACF,KACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EACG;kCACM,YAAY,CAAC;AACf,kCAAE,YAAY,CAAC,aAAa,EAEpC,IAAI,EAAC,SAAS,EAChB,CAAA,CACA,CACJ,CACJ;;AAId,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;AAClB,YAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;AACtC,oBAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,CAAC,IAAI;AACvB,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;AAC3B,oBAAA,EAAA,EAAA,EAAA;AAEF,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,CAAC,UAAU,EAAE,GAAG,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EAAI,CAAA,CAC5D;;AAId,QAAA,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACpB,YAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;AACtC,oBAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,EAAC,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,MAAM,CAAA;AAC/B,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;AAC3B,oBAAA,EAAA,EAAA,EAAA;AAEF,gBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,GAAI,EAAA,GAAA,EAAA,EAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,QAAQ,EAAG,EAAA,EAAA,EAAA,aAAA,EACtD,QAAQ,EACpB,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,EACrB,GAAG,EAAE,SAAS,EAChB,CAAA,CACA;;AAId,QAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;AACtC,gBAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,CAAC,IAAI;AACvB,gBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;AAC3B,gBAAA,EAAA,EAAA,EAAA;AAEF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EAAI,CAAA,CACrD;AAEd,KAAC;IAED,QACI,6BACI,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAEZ,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,YAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;AAE7B,YAAA,EAAA,GAAA,SAAS,CACZ,EACD,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,GAAG,gBACI,oDAAa,CAAA,MAAA,CAAA,KAAK,GAAG,CAAC,sDAAW,EAE5C,EAAA,aAAa,EAAE,CACd;AAEd;;;;"}

package/esm/components/image-preview/index.css

@@ -1,7 +1,7 @@
 :root {
     --color-light-status-info: #2288fa;
     --color-static-neutral-100-inverted: #1c1c1e;
-    --color-static-neutral-300-inverted: #29292c;
+    --color-static-neutral-translucent-100-inverted: rgba(214, 214, 229, 0.07);
 }
 :root {
     --border-radius-8: 8px;
@@ -10,23 +10,23 @@
 :root {
     --focus-color: var(--color-light-status-info);
 }
-.gallery__component_8gxye {
+.gallery__component_1p08d {
     display: flex;
     z-index: 3;
     overflow: hidden;
     transition: border 0.15s ease-in-out;
     outline: none;
 }
-.gallery__component_8gxye .gallery__image_8gxye {
+.gallery__component_1p08d .gallery__image_1p08d {
         opacity: 0.3;
     }
-.gallery__component_8gxye.gallery__mobile_8gxye {
+.gallery__component_1p08d.gallery__mobile_1p08d {
         padding: 0;
     }
-.gallery__active_8gxye > .gallery__image_8gxye {
+.gallery__active_1p08d > .gallery__image_1p08d {
         opacity: 1;
     }
-.gallery__preview_8gxye {
+.gallery__preview_1p08d {
     width: 56px;
     height: 56px;
     flex-shrink: 0;
@@ -36,15 +36,15 @@
        -moz-user-select: none;
             user-select: none;
 }
-.gallery__preview_8gxye.gallery__mobile_8gxye {
+.gallery__preview_1p08d.gallery__mobile_1p08d {
         width: 46px;
         height: 46px;
         border-radius: var(--border-radius-8);
     }
-.gallery__image_8gxye {
+.gallery__image_1p08d {
     transition: opacity 0.15s ease-in-out;
 }
-.gallery__image_8gxye > img {
+.gallery__image_1p08d > img {
         display: block;
         width: 100%;
         height: 100%;
@@ -54,36 +54,36 @@
         overflow: clip;
         overflow-clip-margin: border-box;
     }
-.gallery__image_8gxye:hover {
+.gallery__image_1p08d:hover {
         opacity: 0.7;
     }
-.gallery__loading_8gxye {
+.gallery__loading_1p08d {
     background-color: var(--color-static-neutral-100-inverted);
 }
-.gallery__loading_8gxye .gallery__active_8gxye {
-        background-color: var(--color-static-neutral-300-inverted);
+.gallery__loading_1p08d .gallery__active_1p08d {
+        background-color: var(--color-static-neutral-translucent-100-inverted);
     }
-.gallery__brokenImageWrapper_8gxye {
+.gallery__brokenImageWrapper_1p08d {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-static-neutral-300-inverted);
+    background-color: var(--color-static-neutral-translucent-100-inverted);
     opacity: 0.3;
 }
-.gallery__brokenImageWrapper_8gxye.gallery__active_8gxye {
+.gallery__brokenImageWrapper_1p08d.gallery__active_1p08d {
         opacity: 1;
     }
-.gallery__brokenIcon_8gxye {
+.gallery__brokenIcon_1p08d {
     width: 40px;
     height: 40px;
 }
-.gallery__focused_8gxye {
+.gallery__focused_1p08d {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.gallery__canvasPreview_8gxye {
+.gallery__canvasPreview_1p08d {
     border-radius: var(--border-radius-12);
 }
-.gallery__canvasPreview_8gxye.gallery__mobile_8gxye {
+.gallery__canvasPreview_1p08d.gallery__mobile_1p08d {
         border-radius: var(--border-radius-8);
     }

package/esm/components/image-preview/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"gallery__component_8gxye","image":"gallery__image_8gxye","mobile":"gallery__mobile_8gxye","active":"gallery__active_8gxye","preview":"gallery__preview_8gxye","loading":"gallery__loading_8gxye","brokenImageWrapper":"gallery__brokenImageWrapper_8gxye","brokenIcon":"gallery__brokenIcon_8gxye","focused":"gallery__focused_8gxye","canvasPreview":"gallery__canvasPreview_8gxye"};
+var styles = {"component":"gallery__component_1p08d","image":"gallery__image_1p08d","mobile":"gallery__mobile_1p08d","active":"gallery__active_1p08d","preview":"gallery__preview_1p08d","loading":"gallery__loading_1p08d","brokenImageWrapper":"gallery__brokenImageWrapper_1p08d","brokenIcon":"gallery__brokenIcon_1p08d","focused":"gallery__focused_1p08d","canvasPreview":"gallery__canvasPreview_1p08d"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/image-preview/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-preview/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    z-index: 3;\n    overflow: hidden;\n    transition: border 0.15s ease-in-out;\n    outline: none;\n\n    & .image {\n        opacity: 0.3;\n    }\n\n    &.mobile {\n        padding: 0;\n    }\n}\n\n.active {\n    & > .image {\n        opacity: 1;\n    }\n}\n\n.preview {\n    width: 56px;\n    height: 56px;\n    flex-shrink: 0;\n    border-radius: var(--border-radius-12);\n    cursor: pointer;\n    user-select: none;\n\n    &.mobile {\n        width: 46px;\n        height: 46px;\n        border-radius: var(--border-radius-8);\n    }\n}\n\n.image {\n    transition: opacity 0.15s ease-in-out;\n\n    & > img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        object-fit: cover;\n        overflow: clip;\n        overflow-clip-margin: border-box;\n    }\n\n    &:hover {\n        opacity: 0.7;\n    }\n}\n\n.loading {\n    background-color: var(--color-static-neutral-100-inverted);\n\n    & .active {\n        background-color: var(--color-static-neutral-300-inverted);\n    }\n}\n\n.brokenImageWrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: var(--color-static-neutral-300-inverted);\n    opacity: 0.3;\n\n    &.active {\n        opacity: 1;\n    }\n}\n\n.brokenIcon {\n    width: 40px;\n    height: 40px;\n}\n\n.focused {\n    @mixin focus-outline;\n}\n\n.canvasPreview {\n    border-radius: var(--border-radius-12);\n\n    &.mobile {\n        border-radius: var(--border-radius-8);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,wBAAwB,CAAC,SAAS,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,YAAY,CAAC,2BAA2B,CAAC,SAAS,CAAC,wBAAwB,CAAC,eAAe,CAAC,8BAA8B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-preview/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    z-index: 3;\n    overflow: hidden;\n    transition: border 0.15s ease-in-out;\n    outline: none;\n\n    & .image {\n        opacity: 0.3;\n    }\n\n    &.mobile {\n        padding: 0;\n    }\n}\n\n.active {\n    & > .image {\n        opacity: 1;\n    }\n}\n\n.preview {\n    width: 56px;\n    height: 56px;\n    flex-shrink: 0;\n    border-radius: var(--border-radius-12);\n    cursor: pointer;\n    user-select: none;\n\n    &.mobile {\n        width: 46px;\n        height: 46px;\n        border-radius: var(--border-radius-8);\n    }\n}\n\n.image {\n    transition: opacity 0.15s ease-in-out;\n\n    & > img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        object-fit: cover;\n        overflow: clip;\n        overflow-clip-margin: border-box;\n    }\n\n    &:hover {\n        opacity: 0.7;\n    }\n}\n\n.loading {\n    background-color: var(--color-static-neutral-100-inverted);\n\n    & .active {\n        background-color: var(--color-static-neutral-translucent-100-inverted);\n    }\n}\n\n.brokenImageWrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: var(--color-static-neutral-translucent-100-inverted);\n    opacity: 0.3;\n\n    &.active {\n        opacity: 1;\n    }\n}\n\n.brokenIcon {\n    width: 40px;\n    height: 40px;\n}\n\n.focused {\n    @mixin focus-outline;\n}\n\n.canvasPreview {\n    border-radius: var(--border-radius-12);\n\n    &.mobile {\n        border-radius: var(--border-radius-8);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,wBAAwB,CAAC,SAAS,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,YAAY,CAAC,2BAA2B,CAAC,SAAS,CAAC,wBAAwB,CAAC,eAAe,CAAC,8BAA8B,CAAC;;;;"}

package/esm/components/image-viewer/hooks.js

@@ -22,8 +22,9 @@ var useHandleImageViewer = function () {
         var isArrow = ((_a = leftArrowRef.current) === null || _a === void 0 ? void 0 : _a.contains(eventTarget)) ||
             ((_b = rightArrowRef.current) === null || _b === void 0 ? void 0 : _b.contains(eventTarget));
         var isPlaceholder = Boolean(eventTarget.closest(".".concat(styles.placeholder)));
-        var isImg = eventTarget.tagName === 'IMG';
-        if (!isImg && !isPlaceholder && !isArrow && !isMobile) {
+        var isContentArea = Boolean(eventTarget.closest('[data-content-area]'));
+        // Закрываем галерею только при клике вне элементов контента и только на desktop
+        if (!isPlaceholder && !isArrow && !isContentArea && !isMobile) {
             onClose();
         }
     }, [isMobile, onClose]);

package/esm/components/image-viewer/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/components/image-viewer/hooks.ts"],"sourcesContent":["import {\n    type MouseEventHandler,\n    type SyntheticEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport elementClosest from 'element-closest';\n\nimport { GalleryContext } from '../../context';\n\nimport styles from './index.module.css';\n\nexport const useHandleImageViewer = () => {\n    const { view, onClose, setImageMeta } = useContext(GalleryContext);\n\n    const leftArrowRef = useRef<HTMLDivElement>(null);\n    const rightArrowRef = useRef<HTMLDivElement>(null);\n\n    const isMobile = view === 'mobile';\n\n    const handleLoad = (event: SyntheticEvent<HTMLImageElement>, index: number) => {\n        const target = event.currentTarget;\n\n        const { naturalWidth, naturalHeight } = target;\n\n        setImageMeta({ width: naturalWidth, height: naturalHeight }, index);\n    };\n\n    const handleLoadError = (index: number) => {\n        setImageMeta({ width: 0, height: 0, broken: true }, index);\n    };\n\n    const handleWrapperClick = useCallback<MouseEventHandler>(\n        (event) => {\n            const eventTarget = event.target as HTMLElement;\n\n            const isArrow =\n                leftArrowRef.current?.contains(eventTarget) ||\n                rightArrowRef.current?.contains(eventTarget);\n\n            const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));\n\n            const isImg = eventTarget.tagName === 'IMG';\n\n            if (!isImg && !isPlaceholder && !isArrow && !isMobile) {\n                onClose();\n            }\n        },\n        [isMobile, onClose],\n    );\n\n    useEffect(() => {\n        elementClosest(window);\n    }, []);\n\n    return {\n        handleLoad,\n        handleLoadError,\n        handleWrapperClick,\n        isMobile,\n        leftArrowRef,\n        rightArrowRef,\n    };\n};\n"],"names":[],"mappings":";;;;;AAca,IAAA,oBAAoB,GAAG,YAAA;AAC1B,IAAA,IAAA,EAAkC,GAAA,UAAU,CAAC,cAAc,CAAC,EAA1D,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,kBAA+B;AAElE,IAAA,IAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,IAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,IAAM,UAAU,GAAG,UAAC,KAAuC,EAAE,KAAa,EAAA;AACtE,QAAA,IAAM,MAAM,GAAG,KAAK,CAAC,aAAa;QAE1B,IAAA,YAAY,GAAoB,MAAM,CAAA,YAA1B,EAAE,aAAa,GAAK,MAAM,CAAA,aAAX;AAEnC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,KAAa,EAAA;AAClC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAG,WAAW,CAClC,UAAC,KAAK,EAAA;;AACF,QAAA,IAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,IAAM,OAAO,GACT,CAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,CAAC,WAAW,CAAC;aAC3C,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,WAAW,CAAC,CAAA;AAEhD,QAAA,IAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,GAAA,CAAA,MAAA,CAAI,MAAM,CAAC,WAAW,CAAE,CAAC,CAAC;AAE5E,QAAA,IAAM,KAAK,GAAG,WAAW,CAAC,OAAO,KAAK,KAAK;AAE3C,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACnD,YAAA,OAAO,EAAE;;AAEjB,KAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACtB;AAED,IAAA,SAAS,CAAC,YAAA;QACN,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;AACH,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,kBAAkB,EAAA,kBAAA;AAClB,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAA,aAAA;KAChB;AACL;;;;"}
+{"version":3,"file":"hooks.js","sources":["../../../src/components/image-viewer/hooks.ts"],"sourcesContent":["import {\n    type MouseEventHandler,\n    type SyntheticEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport elementClosest from 'element-closest';\n\nimport { GalleryContext } from '../../context';\n\nimport styles from './index.module.css';\n\nexport const useHandleImageViewer = () => {\n    const { view, onClose, setImageMeta } = useContext(GalleryContext);\n\n    const leftArrowRef = useRef<HTMLDivElement>(null);\n    const rightArrowRef = useRef<HTMLDivElement>(null);\n\n    const isMobile = view === 'mobile';\n\n    const handleLoad = (event: SyntheticEvent<HTMLImageElement>, index: number) => {\n        const target = event.currentTarget;\n\n        const { naturalWidth, naturalHeight } = target;\n\n        setImageMeta({ width: naturalWidth, height: naturalHeight }, index);\n    };\n\n    const handleLoadError = (index: number) => {\n        setImageMeta({ width: 0, height: 0, broken: true }, index);\n    };\n\n    const handleWrapperClick = useCallback<MouseEventHandler>(\n        (event) => {\n            const eventTarget = event.target as HTMLElement;\n\n            const isArrow =\n                leftArrowRef.current?.contains(eventTarget) ||\n                rightArrowRef.current?.contains(eventTarget);\n\n            const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));\n\n            const isContentArea = Boolean(eventTarget.closest('[data-content-area]'));\n\n            // Закрываем галерею только при клике вне элементов контента и только на desktop\n            if (!isPlaceholder && !isArrow && !isContentArea && !isMobile) {\n                onClose();\n            }\n        },\n        [isMobile, onClose],\n    );\n\n    useEffect(() => {\n        elementClosest(window);\n    }, []);\n\n    return {\n        handleLoad,\n        handleLoadError,\n        handleWrapperClick,\n        isMobile,\n        leftArrowRef,\n        rightArrowRef,\n    };\n};\n"],"names":[],"mappings":";;;;;AAca,IAAA,oBAAoB,GAAG,YAAA;AAC1B,IAAA,IAAA,EAAkC,GAAA,UAAU,CAAC,cAAc,CAAC,EAA1D,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,kBAA+B;AAElE,IAAA,IAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,IAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,IAAM,UAAU,GAAG,UAAC,KAAuC,EAAE,KAAa,EAAA;AACtE,QAAA,IAAM,MAAM,GAAG,KAAK,CAAC,aAAa;QAE1B,IAAA,YAAY,GAAoB,MAAM,CAAA,YAA1B,EAAE,aAAa,GAAK,MAAM,CAAA,aAAX;AAEnC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,KAAa,EAAA;AAClC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAG,WAAW,CAClC,UAAC,KAAK,EAAA;;AACF,QAAA,IAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,IAAM,OAAO,GACT,CAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,CAAC,WAAW,CAAC;aAC3C,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,WAAW,CAAC,CAAA;AAEhD,QAAA,IAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,GAAA,CAAA,MAAA,CAAI,MAAM,CAAC,WAAW,CAAE,CAAC,CAAC;QAE5E,IAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;;AAGzE,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,EAAE;AAC3D,YAAA,OAAO,EAAE;;AAEjB,KAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACtB;AAED,IAAA,SAAS,CAAC,YAAA;QACN,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;AACH,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,kBAAkB,EAAA,kBAAA;AAClB,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAA,aAAA;KAChB;AACL;;;;"}

package/esm/components/image-viewer/index.css

@@ -3,7 +3,6 @@
     --color-static-neutral-0-inverted: #262629;
     --color-static-neutral-0-inverted-hover: #2f2f32;
     --color-static-neutral-0-inverted-press: #353539;
-    --color-static-neutral-300-inverted: #29292c;
     --color-static-neutral-translucent-100-inverted: rgba(214, 214, 229, 0.07);
     --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
 }
@@ -20,7 +19,7 @@
 :root {
     --focus-color: var(--color-light-status-info);
 }
-.gallery__component_j553i {
+.gallery__component_15cn9 {
     display: flex;
     flex-grow: 1;
     justify-content: center;
@@ -88,7 +87,7 @@
         z-index: -1000;
     }
 
-    .gallery__swiperFrame_j553i {
+    .gallery__swiperFrame_15cn9 {
         display: flex;
         flex: 1 1 0;
         min-width: 0;
@@ -100,17 +99,17 @@
         box-sizing: border-box;
     }
 
-        .gallery__swiperFrame_j553i.gallery__mobile_j553i {
+        .gallery__swiperFrame_15cn9.gallery__mobile_15cn9 {
             max-height: calc(100vh - 210px);
             max-height: calc(100dvh - 210px);
         }
 
-        .gallery__swiperFrame_j553i.gallery__mobileVideo_j553i {
+        .gallery__swiperFrame_15cn9.gallery__mobileVideo_15cn9 {
             max-height: 100vh;
             max-height: 100dvh;
         }
 
-    .gallery__fullScreenFrame_j553i {
+    .gallery__fullScreenFrame_15cn9 {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -123,7 +122,7 @@
         overflow: hidden;
     }
 
-    .gallery__hiddenFrame_j553i {
+    .gallery__hiddenFrame_15cn9 {
         flex: 0 0 0;
         width: 0;
         height: 0;
@@ -131,16 +130,16 @@
         overflow: hidden;
     }
 
-    .gallery__swiper_j553i {
+    .gallery__swiper_15cn9 {
         width: 100%;
         height: 100%;
     }
 
-    .gallery__hidden_j553i {
+    .gallery__hidden_15cn9 {
         display: none;
     }
 
-    .gallery__singleSlideContainer_j553i {
+    .gallery__singleSlideContainer_15cn9 {
         display: flex;
         width: 100%;
         height: 100%;
@@ -148,22 +147,22 @@
 
         max-height: calc(100vh - 80px);
         max-height: calc(100dvh - 80px);
-        padding: var(--gap-32);
+        padding: var(--gap-0) var(--gap-32) var(--gap-32);
         box-sizing: border-box;
     }
 
-        .gallery__singleSlideContainer_j553i.gallery__mobile_j553i {
+        .gallery__singleSlideContainer_15cn9.gallery__mobile_15cn9 {
             max-height: calc(100vh - 174px);
             max-height: calc(100dvh - 174px);
             padding: 0;
         }
 
-        .gallery__singleSlideContainer_j553i.gallery__mobileVideo_j553i {
+        .gallery__singleSlideContainer_15cn9.gallery__mobileVideo_15cn9 {
             max-height: 100vh;
             max-height: 100dvh;
         }
 
-    .gallery__slide_j553i {
+    .gallery__slide_15cn9 {
         position: relative;
         display: flex;
         justify-content: center;
@@ -172,17 +171,17 @@
         height: 100%;
     }
 
-    .gallery__slideLoading_j553i {
+    .gallery__slideLoading_15cn9 {
         background-color: var(--color-static-neutral-translucent-100-inverted);
         border-radius: var(--border-radius-8);
     }
 
-    .gallery__spinner_j553i {
+    .gallery__spinner_15cn9 {
         position: absolute;
         color: var(--color-static-neutral-translucent-1300-inverted);
     }
 
-    .gallery__image_j553i {
+    .gallery__image_15cn9 {
         width: auto;
         height: auto;
         max-width: 100%;
@@ -195,11 +194,11 @@
         border-radius: var(--border-radius-8);
     }
 
-        .gallery__image_j553i.gallery__mobile_j553i {
+        .gallery__image_15cn9.gallery__mobile_15cn9 {
             border-radius: var(--border-radius-0);
         }
 
-    .gallery__smallImage_j553i {
+    .gallery__smallImage_15cn9 {
         position: relative;
         width: auto;
         height: auto;
@@ -212,17 +211,17 @@
                 user-select: none;
     }
 
-    .gallery__verticalImageFit_j553i {
+    .gallery__verticalImageFit_15cn9 {
         width: auto;
         height: 100%;
     }
 
-    .gallery__horizontalImageFit_j553i {
+    .gallery__horizontalImageFit_15cn9 {
         width: 100%;
         height: auto;
     }
 
-    .gallery__fullScreenMedia_j553i {
+    .gallery__fullScreenMedia_15cn9 {
         width: 100%;
         height: 100%;
         max-width: 100%;
@@ -232,7 +231,7 @@
         border-radius: var(--border-radius-0);
     }
 
-    .gallery__arrow_j553i {
+    .gallery__arrow_15cn9 {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -246,30 +245,30 @@
         outline: none;
     }
 
-        .gallery__arrow_j553i:hover {
+        .gallery__arrow_15cn9:hover {
             background-color: var(--color-static-neutral-0-inverted-hover);
         }
 
-        .gallery__arrow_j553i:active {
+        .gallery__arrow_15cn9:active {
             background-color: var(--color-static-neutral-0-inverted-press);
         }
 
-    .gallery__focused_j553i {
+    .gallery__focused_15cn9 {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
     }
 
-    .gallery__placeholder_j553i {
+    .gallery__placeholder_15cn9 {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 100%;
         height: 100%;
         border-radius: var(--border-radius-8);
-        background-color: var(--color-static-neutral-300-inverted);
+        background-color: var(--color-static-neutral-translucent-100-inverted);
     }
 
-    .gallery__brokenImgWrapper_j553i {
+    .gallery__brokenImgWrapper_15cn9 {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -278,13 +277,13 @@
         text-align: center;
     }
 
-    .gallery__brokenImgIcon_j553i {
+    .gallery__brokenImgIcon_15cn9 {
         width: 80px;
         height: 80px;
         margin-bottom: var(--gap-4);
     }
 
-    .gallery__fullScreenVideo_j553i {
+    .gallery__fullScreenVideo_15cn9 {
         width: 100%;
         height: 100%;
         max-height: none;

package/esm/components/image-viewer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"gallery__component_j553i","swiperFrame":"gallery__swiperFrame_j553i","mobile":"gallery__mobile_j553i","mobileVideo":"gallery__mobileVideo_j553i","fullScreenFrame":"gallery__fullScreenFrame_j553i","hiddenFrame":"gallery__hiddenFrame_j553i","swiper":"gallery__swiper_j553i","hidden":"gallery__hidden_j553i","singleSlideContainer":"gallery__singleSlideContainer_j553i","slide":"gallery__slide_j553i","slideLoading":"gallery__slideLoading_j553i","spinner":"gallery__spinner_j553i","image":"gallery__image_j553i","smallImage":"gallery__smallImage_j553i","verticalImageFit":"gallery__verticalImageFit_j553i","horizontalImageFit":"gallery__horizontalImageFit_j553i","fullScreenMedia":"gallery__fullScreenMedia_j553i","arrow":"gallery__arrow_j553i","focused":"gallery__focused_j553i","placeholder":"gallery__placeholder_j553i","brokenImgWrapper":"gallery__brokenImgWrapper_j553i","brokenImgIcon":"gallery__brokenImgIcon_j553i","fullScreenVideo":"gallery__fullScreenVideo_j553i"};
+var styles = {"component":"gallery__component_15cn9","swiperFrame":"gallery__swiperFrame_15cn9","mobile":"gallery__mobile_15cn9","mobileVideo":"gallery__mobileVideo_15cn9","fullScreenFrame":"gallery__fullScreenFrame_15cn9","hiddenFrame":"gallery__hiddenFrame_15cn9","swiper":"gallery__swiper_15cn9","hidden":"gallery__hidden_15cn9","singleSlideContainer":"gallery__singleSlideContainer_15cn9","slide":"gallery__slide_15cn9","slideLoading":"gallery__slideLoading_15cn9","spinner":"gallery__spinner_15cn9","image":"gallery__image_15cn9","smallImage":"gallery__smallImage_15cn9","verticalImageFit":"gallery__verticalImageFit_15cn9","horizontalImageFit":"gallery__horizontalImageFit_15cn9","fullScreenMedia":"gallery__fullScreenMedia_15cn9","arrow":"gallery__arrow_15cn9","focused":"gallery__focused_15cn9","placeholder":"gallery__placeholder_15cn9","brokenImgWrapper":"gallery__brokenImgWrapper_15cn9","brokenImgIcon":"gallery__brokenImgIcon_15cn9","fullScreenVideo":"gallery__fullScreenVideo_15cn9"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/image-viewer/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-viewer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    min-height: 0;\n    background-color: var(--color-static-neutral-0-inverted);\n\n    /* swiper/swiper.css; */\n    :global(.swiper) {\n        margin-left: auto;\n        margin-right: auto;\n        position: relative;\n        overflow: hidden;\n        list-style: none;\n        padding: 0;\n        z-index: 1;\n        display: block;\n    }\n    :global(.swiper-wrapper) {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n        display: flex;\n        transition-property: transform;\n        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n        box-sizing: content-box;\n    }\n    :global(.swiper-android) :global(.swiper-slide),\n    :global(.swiper-ios) :global(.swiper-slide),\n    :global(.swiper-wrapper) {\n        transform: translate3d(0, 0, 0);\n    }\n    :global(.swiper-horizontal) {\n        touch-action: pan-y;\n    }\n    :global(.swiper-slide) {\n        flex-shrink: 0;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition-property: transform;\n        display: block;\n    }\n    :global(.swiper-slide-invisible-blank) {\n        visibility: hidden;\n    }\n    :global(.swiper-autoheight),\n    :global(.swiper-autoheight) :global(.swiper-slide) {\n        height: auto;\n    }\n    :global(.swiper-autoheight) :global(.swiper-wrapper) {\n        align-items: flex-start;\n        transition-property: transform, height;\n    }\n    :global(.swiper-backface-hidden) :global(.swiper-slide) {\n        transform: translateZ(0);\n        backface-visibility: hidden;\n    }\n\n    /* swiper/modules/a11y.css */\n    :global(.swiper) :global(.swiper-notification) {\n        position: absolute;\n        left: 0;\n        top: 0;\n        pointer-events: none;\n        opacity: 0;\n        z-index: -1000;\n    }\n\n    .swiperFrame {\n        display: flex;\n        flex: 1 1 0;\n        min-width: 0;\n        height: 100%;\n        min-height: 0;\n\n        /* 168px - высота хэдера и футера */\n        max-height: calc(100vh - 168px);\n        max-height: calc(100dvh - 168px);\n        padding: var(--gap-32) var(--gap-16);\n        box-sizing: border-box;\n\n        &.mobile {\n            max-height: calc(100vh - 210px);\n            max-height: calc(100dvh - 210px);\n        }\n\n        &.mobileVideo {\n            max-height: 100vh;\n            max-height: 100dvh;\n        }\n    }\n\n    .fullScreenFrame {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        max-height: none;\n        min-height: 0;\n        padding: var(--gap-0);\n        box-sizing: border-box;\n        overflow: hidden;\n    }\n\n    .hiddenFrame {\n        flex: 0 0 0;\n        width: 0;\n        height: 0;\n        padding: var(--gap-0);\n        overflow: hidden;\n    }\n\n    .swiper {\n        width: 100%;\n        height: 100%;\n    }\n\n    .hidden {\n        display: none;\n    }\n\n    .singleSlideContainer {\n        display: flex;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n\n        max-height: calc(100vh - 80px);\n        max-height: calc(100dvh - 80px);\n        padding: var(--gap-32);\n        box-sizing: border-box;\n\n        &.mobile {\n            max-height: calc(100vh - 174px);\n            max-height: calc(100dvh - 174px);\n            padding: 0;\n        }\n\n        &.mobileVideo {\n            max-height: 100vh;\n            max-height: 100dvh;\n        }\n    }\n\n    .slide {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n    }\n\n    .slideLoading {\n        background-color: var(--color-static-neutral-translucent-100-inverted);\n        border-radius: var(--border-radius-8);\n    }\n\n    .spinner {\n        position: absolute;\n        color: var(--color-static-neutral-translucent-1300-inverted);\n    }\n\n    .image {\n        width: auto;\n        height: auto;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        user-select: none;\n        border-radius: var(--border-radius-8);\n\n        &.mobile {\n            border-radius: var(--border-radius-0);\n        }\n    }\n\n    .smallImage {\n        position: relative;\n        width: auto;\n        height: auto;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        user-select: none;\n    }\n\n    .verticalImageFit {\n        width: auto;\n        height: 100%;\n    }\n\n    .horizontalImageFit {\n        width: 100%;\n        height: auto;\n    }\n\n    .fullScreenMedia {\n        width: 100%;\n        height: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        border-radius: var(--border-radius-0);\n    }\n\n    .arrow {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        flex-shrink: 0;\n        width: 96px;\n        height: 100%;\n        cursor: pointer;\n        color: var(--color-static-neutral-translucent-1300-inverted);\n        transition: background-color 0.15s ease-in-out;\n        outline: none;\n\n        &:hover {\n            background-color: var(--color-static-neutral-0-inverted-hover);\n        }\n\n        &:active {\n            background-color: var(--color-static-neutral-0-inverted-press);\n        }\n    }\n\n    .focused {\n        @mixin focus-outline;\n    }\n\n    .placeholder {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        border-radius: var(--border-radius-8);\n        background-color: var(--color-static-neutral-300-inverted);\n    }\n\n    .brokenImgWrapper {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 150px;\n        text-align: center;\n    }\n\n    .brokenImgIcon {\n        width: 80px;\n        height: 80px;\n        margin-bottom: var(--gap-4);\n    }\n\n    .fullScreenVideo {\n        width: 100%;\n        height: 100%;\n        max-height: none;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,aAAa,CAAC,4BAA4B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,aAAa,CAAC,4BAA4B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,OAAO,CAAC,sBAAsB,CAAC,cAAc,CAAC,6BAA6B,CAAC,SAAS,CAAC,wBAAwB,CAAC,OAAO,CAAC,sBAAsB,CAAC,YAAY,CAAC,2BAA2B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,OAAO,CAAC,sBAAsB,CAAC,SAAS,CAAC,wBAAwB,CAAC,aAAa,CAAC,4BAA4B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,eAAe,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-viewer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    min-height: 0;\n    background-color: var(--color-static-neutral-0-inverted);\n\n    /* swiper/swiper.css; */\n    :global(.swiper) {\n        margin-left: auto;\n        margin-right: auto;\n        position: relative;\n        overflow: hidden;\n        list-style: none;\n        padding: 0;\n        z-index: 1;\n        display: block;\n    }\n    :global(.swiper-wrapper) {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n        display: flex;\n        transition-property: transform;\n        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n        box-sizing: content-box;\n    }\n    :global(.swiper-android) :global(.swiper-slide),\n    :global(.swiper-ios) :global(.swiper-slide),\n    :global(.swiper-wrapper) {\n        transform: translate3d(0, 0, 0);\n    }\n    :global(.swiper-horizontal) {\n        touch-action: pan-y;\n    }\n    :global(.swiper-slide) {\n        flex-shrink: 0;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition-property: transform;\n        display: block;\n    }\n    :global(.swiper-slide-invisible-blank) {\n        visibility: hidden;\n    }\n    :global(.swiper-autoheight),\n    :global(.swiper-autoheight) :global(.swiper-slide) {\n        height: auto;\n    }\n    :global(.swiper-autoheight) :global(.swiper-wrapper) {\n        align-items: flex-start;\n        transition-property: transform, height;\n    }\n    :global(.swiper-backface-hidden) :global(.swiper-slide) {\n        transform: translateZ(0);\n        backface-visibility: hidden;\n    }\n\n    /* swiper/modules/a11y.css */\n    :global(.swiper) :global(.swiper-notification) {\n        position: absolute;\n        left: 0;\n        top: 0;\n        pointer-events: none;\n        opacity: 0;\n        z-index: -1000;\n    }\n\n    .swiperFrame {\n        display: flex;\n        flex: 1 1 0;\n        min-width: 0;\n        height: 100%;\n        min-height: 0;\n\n        /* 168px - высота хэдера и футера */\n        max-height: calc(100vh - 168px);\n        max-height: calc(100dvh - 168px);\n        padding: var(--gap-32) var(--gap-16);\n        box-sizing: border-box;\n\n        &.mobile {\n            max-height: calc(100vh - 210px);\n            max-height: calc(100dvh - 210px);\n        }\n\n        &.mobileVideo {\n            max-height: 100vh;\n            max-height: 100dvh;\n        }\n    }\n\n    .fullScreenFrame {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        max-height: none;\n        min-height: 0;\n        padding: var(--gap-0);\n        box-sizing: border-box;\n        overflow: hidden;\n    }\n\n    .hiddenFrame {\n        flex: 0 0 0;\n        width: 0;\n        height: 0;\n        padding: var(--gap-0);\n        overflow: hidden;\n    }\n\n    .swiper {\n        width: 100%;\n        height: 100%;\n    }\n\n    .hidden {\n        display: none;\n    }\n\n    .singleSlideContainer {\n        display: flex;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n\n        max-height: calc(100vh - 80px);\n        max-height: calc(100dvh - 80px);\n        padding: var(--gap-0) var(--gap-32) var(--gap-32);\n        box-sizing: border-box;\n\n        &.mobile {\n            max-height: calc(100vh - 174px);\n            max-height: calc(100dvh - 174px);\n            padding: 0;\n        }\n\n        &.mobileVideo {\n            max-height: 100vh;\n            max-height: 100dvh;\n        }\n    }\n\n    .slide {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n    }\n\n    .slideLoading {\n        background-color: var(--color-static-neutral-translucent-100-inverted);\n        border-radius: var(--border-radius-8);\n    }\n\n    .spinner {\n        position: absolute;\n        color: var(--color-static-neutral-translucent-1300-inverted);\n    }\n\n    .image {\n        width: auto;\n        height: auto;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        user-select: none;\n        border-radius: var(--border-radius-8);\n\n        &.mobile {\n            border-radius: var(--border-radius-0);\n        }\n    }\n\n    .smallImage {\n        position: relative;\n        width: auto;\n        height: auto;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        user-select: none;\n    }\n\n    .verticalImageFit {\n        width: auto;\n        height: 100%;\n    }\n\n    .horizontalImageFit {\n        width: 100%;\n        height: auto;\n    }\n\n    .fullScreenMedia {\n        width: 100%;\n        height: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        border-radius: var(--border-radius-0);\n    }\n\n    .arrow {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        flex-shrink: 0;\n        width: 96px;\n        height: 100%;\n        cursor: pointer;\n        color: var(--color-static-neutral-translucent-1300-inverted);\n        transition: background-color 0.15s ease-in-out;\n        outline: none;\n\n        &:hover {\n            background-color: var(--color-static-neutral-0-inverted-hover);\n        }\n\n        &:active {\n            background-color: var(--color-static-neutral-0-inverted-press);\n        }\n    }\n\n    .focused {\n        @mixin focus-outline;\n    }\n\n    .placeholder {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        border-radius: var(--border-radius-8);\n        background-color: var(--color-static-neutral-translucent-100-inverted);\n    }\n\n    .brokenImgWrapper {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 150px;\n        text-align: center;\n    }\n\n    .brokenImgIcon {\n        width: 80px;\n        height: 80px;\n        margin-bottom: var(--gap-4);\n    }\n\n    .fullScreenVideo {\n        width: 100%;\n        height: 100%;\n        max-height: none;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,aAAa,CAAC,4BAA4B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,aAAa,CAAC,4BAA4B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,OAAO,CAAC,sBAAsB,CAAC,cAAc,CAAC,6BAA6B,CAAC,SAAS,CAAC,wBAAwB,CAAC,OAAO,CAAC,sBAAsB,CAAC,YAAY,CAAC,2BAA2B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,OAAO,CAAC,sBAAsB,CAAC,SAAS,CAAC,wBAAwB,CAAC,aAAa,CAAC,4BAA4B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,eAAe,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC;;;;"}

package/esm/components/image-viewer/single.js

@@ -2,6 +2,7 @@ import React, { useContext, useRef } from 'react';
 import cn from 'classnames';
 import { GalleryContext } from '../../context.js';
 import { isVideo } from '../../utils/utils.js';
+import 'tslib';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import styles from './index.module.css.js';

package/esm/components/image-viewer/single.js.map

@@ -1 +1 @@
-{"version":3,"file":"single.js","sources":["../../../src/components/image-viewer/single.tsx"],"sourcesContent":["import React, { type FC, useContext, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport styles from './index.module.css';\n\nexport const Single: FC = () => {\n    const { fullScreen, currentSlideIndex, getCurrentImage, getCurrentImageMeta } =\n        useContext(GalleryContext);\n\n    const { handleWrapperClick, isMobile } = useHandleImageViewer();\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const currentImage = getCurrentImage();\n    const currentImageMeta = getCurrentImageMeta();\n\n    if (!currentImage) return null;\n\n    const imageWidth = currentImageMeta?.width || 1;\n    const imageHeight = currentImageMeta?.height || 1;\n\n    const imageAspectRatio = imageWidth / imageHeight;\n\n    const wrapperRect = wrapperRef.current?.getBoundingClientRect();\n\n    const wrapperAspectRatio = (wrapperRect?.width || 1) / (wrapperRect?.height || 1);\n\n    return (\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n        <div className={styles.component} onClick={handleWrapperClick}>\n            {fullScreen && !isVideo(currentImage?.src) ? (\n                <div className={styles.fullScreenFrame}>\n                    <Slide\n                        isActive={true}\n                        containerAspectRatio={wrapperAspectRatio}\n                        image={currentImage}\n                        containerHeight={wrapperRect?.height || 0}\n                        meta={currentImageMeta}\n                        index={currentSlideIndex}\n                        imageAspectRatio={imageAspectRatio}\n                        slideVisible={false}\n                        fullScreen={true}\n                    />\n                </div>\n            ) : (\n                <div\n                    className={cn(styles.singleSlideContainer, {\n                        [styles.mobile]: isMobile,\n                        [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n                    })}\n                    ref={wrapperRef}\n                >\n                    <Slide\n                        isActive={true}\n                        containerAspectRatio={wrapperAspectRatio}\n                        image={currentImage}\n                        containerHeight={wrapperRect?.height || 0}\n                        meta={currentImageMeta}\n                        index={currentSlideIndex}\n                        imageAspectRatio={imageAspectRatio}\n                        slideVisible={true}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"single.js","sources":["../../../src/components/image-viewer/single.tsx"],"sourcesContent":["import React, { type FC, useContext, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport styles from './index.module.css';\n\nexport const Single: FC = () => {\n    const { fullScreen, currentSlideIndex, getCurrentImage, getCurrentImageMeta } =\n        useContext(GalleryContext);\n\n    const { handleWrapperClick, isMobile } = useHandleImageViewer();\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const currentImage = getCurrentImage();\n    const currentImageMeta = getCurrentImageMeta();\n\n    if (!currentImage) return null;\n\n    const imageWidth = currentImageMeta?.width || 1;\n    const imageHeight = currentImageMeta?.height || 1;\n\n    const imageAspectRatio = imageWidth / imageHeight;\n\n    const wrapperRect = wrapperRef.current?.getBoundingClientRect();\n\n    const wrapperAspectRatio = (wrapperRect?.width || 1) / (wrapperRect?.height || 1);\n\n    return (\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n        <div className={styles.component} onClick={handleWrapperClick}>\n            {fullScreen && !isVideo(currentImage?.src) ? (\n                <div className={styles.fullScreenFrame}>\n                    <Slide\n                        isActive={true}\n                        containerAspectRatio={wrapperAspectRatio}\n                        image={currentImage}\n                        containerHeight={wrapperRect?.height || 0}\n                        meta={currentImageMeta}\n                        index={currentSlideIndex}\n                        imageAspectRatio={imageAspectRatio}\n                        slideVisible={false}\n                        fullScreen={true}\n                    />\n                </div>\n            ) : (\n                <div\n                    className={cn(styles.singleSlideContainer, {\n                        [styles.mobile]: isMobile,\n                        [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n                    })}\n                    ref={wrapperRef}\n                >\n                    <Slide\n                        isActive={true}\n                        containerAspectRatio={wrapperAspectRatio}\n                        image={currentImage}\n                        containerHeight={wrapperRect?.height || 0}\n                        meta={currentImageMeta}\n                        index={currentSlideIndex}\n                        imageAspectRatio={imageAspectRatio}\n                        slideVisible={true}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/esm/components/image-viewer/slide.js

@@ -5,6 +5,7 @@ import { TypographyText } from '@alfalab/core-components-typography/esm';
 import { GalleryContext } from '../../context.js';
 import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
+import 'tslib';
 import { useHandleImageViewer } from './hooks.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
@@ -22,7 +23,7 @@ var SlideInner = function (_a) {
         React.createElement(TypographyText, { view: 'primary-small', color: 'static-secondary-light' },
             "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C ",
             isVideoView ? 'видео' : 'изображение'))) : (children);
-    return (React.createElement("div", { className: cn(styles.slide, (_b = {}, _b[styles.slideLoading] = loading, _b)) },
+    return (React.createElement("div", { className: cn(styles.slide, (_b = {}, _b[styles.slideLoading] = loading && !isVideoView, _b)) },
         broken ? React.createElement("div", { className: styles.placeholder }, content) : content,
         React.createElement(Spinner, { className: styles.spinner, preset: 48, visible: loading })));
 };
@@ -53,7 +54,7 @@ var Slide = function (_a) {
                 _c[styles.fullScreenMedia] = fullScreen,
                 _c[styles.verticalImageFit] = verticalImageFit,
                 _c[styles.horizontalImageFit] = horizontalImageFit,
-                _c)), onLoad: function (event) { return handleLoad(event, index); }, onError: function () { return handleLoadError(index); }, style: imageStyle, "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
+                _c)), onLoad: function (event) { return handleLoad(event, index); }, onError: function () { return handleLoadError(index); }, style: imageStyle, "data-content-area": 'true', "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
 };
 
 export { Slide };