npm - @alfalab/core-components-gallery - Versions diffs - 7.2.0 → 7.2.1-alfasans - Mend

@alfalab/core-components-gallery 7.2.0 → 7.2.1-alfasans

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/modern/components/bottom-button/index.css CHANGED Viewed

@@ -3,20 +3,20 @@
     --color-static-neutral-translucent-500-inverted-hover: rgba(233, 233, 250, 0.37);
     --color-static-neutral-translucent-500-inverted-press: rgba(238, 238, 254, 0.46);
 }
-.gallery__component_1111w {
+.gallery__component_12iyi {
     background-color: var(--color-static-neutral-translucent-500-inverted);
 }
-.gallery__component_1111w:hover {
+.gallery__component_12iyi:hover {
         background-color: var(--color-static-neutral-translucent-500-inverted-hover);
     }
-.gallery__component_1111w:active {
+.gallery__component_12iyi:active {
         background-color: var(--color-static-neutral-translucent-500-inverted-press);
     }
-.gallery__component_1111w {
+.gallery__component_12iyi {
     transition: transform 1s ease-in-out;
     will-change: transform;
 }
-.gallery__notVisible_1111w {
+.gallery__notVisible_12iyi {
     transform: translateY(250%);
 }

package/modern/components/bottom-button/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"component":"gallery__component_1111w","notVisible":"gallery__notVisible_1111w"};
+const styles = {"component":"gallery__component_12iyi","notVisible":"gallery__notVisible_12iyi"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/buttons/index.css CHANGED Viewed

@@ -8,19 +8,19 @@
     --gap-2xl: 32px;
     --gap-32: var(--gap-2xl);
 }
-.gallery__buttons_wuul2 {
+.gallery__buttons_17zvp {
     display: flex;
     padding-left: var(--gap-32);
 }
-.gallery__buttons_wuul2 path {
+.gallery__buttons_17zvp path {
         color: var(--color-static-neutral-translucent-1300-inverted);
     }
-.gallery__iconButton_wuul2 path {
+.gallery__iconButton_17zvp path {
         color: var(--color-static-neutral-100);
     }
-.gallery__iconButton_wuul2:hover path {
+.gallery__iconButton_17zvp:hover path {
         color: var(--color-static-neutral-100-hover);
     }
-.gallery__iconButton_wuul2:active path {
+.gallery__iconButton_17zvp:active path {
         color: var(--color-static-neutral-100-press);
     }

package/modern/components/buttons/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"iconButton":"gallery__iconButton_wuul2"};
+const styles = {"iconButton":"gallery__iconButton_17zvp"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/header/index.css CHANGED Viewed

@@ -4,7 +4,7 @@
     --gap-16: var(--gap-m);
     --gap-32: var(--gap-2xl);
 }
-.gallery__header_1ncrn {
+.gallery__header_c4i7e {
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;

package/modern/components/header/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"header":"gallery__header_1ncrn"};
+const styles = {"header":"gallery__header_c4i7e"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/header-info-block/index.css CHANGED Viewed

@@ -2,24 +2,24 @@
     --gap-2xs: 4px;
     --gap-4: var(--gap-2xs);
 }
-.gallery__info_67sij {
+.gallery__info_2l9no {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     overflow: hidden;
 }
-.gallery__filenameHead_67sij {
+.gallery__filenameHead_2l9no {
     display: inline;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }
-.gallery__filenameContainer_67sij {
+.gallery__filenameContainer_2l9no {
     overflow: hidden;
     display: inline-flex;
 }
-.gallery__description_67sij {
+.gallery__description_2l9no {
     display: inline;
     text-overflow: ellipsis;
     overflow: hidden;

package/modern/components/header-info-block/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"info":"gallery__info_67sij","filenameHead":"gallery__filenameHead_67sij","filenameContainer":"gallery__filenameContainer_67sij","description":"gallery__description_67sij"};
+const styles = {"info":"gallery__info_2l9no","filenameHead":"gallery__filenameHead_2l9no","filenameContainer":"gallery__filenameContainer_2l9no","description":"gallery__description_2l9no"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/header-mobile/index.css CHANGED Viewed

@@ -1,7 +1,7 @@
 :root {
     --color-static-neutral-0-inverted: #262629;
 }
-.gallery__headerMobile_t1ge4 {
+.gallery__headerMobile_9pe0x {
     position: relative;
     height: 72px;
     z-index: 3;
@@ -10,21 +10,21 @@
     justify-content: space-between;
     align-items: center;
 }
-.gallery__headerMobile_t1ge4.gallery__video_t1ge4 {
+.gallery__headerMobile_9pe0x.gallery__video_9pe0x {
         position: absolute;
         width: 100%;
         background-color: var(--color-static-neutral-0-inverted);
         transition: transform 0.3s ease-in-out;
     }
-.gallery__hide_t1ge4 {
+.gallery__hide_9pe0x {
     transform: translateY(-96px);
 }
-.gallery__leftButton_t1ge4,
-.gallery__rightButtons_t1ge4 {
+.gallery__leftButton_9pe0x,
+.gallery__rightButtons_9pe0x {
     display: flex;
     align-items: center;
 }
-.gallery__description_t1ge4 {
+.gallery__description_9pe0x {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);

package/modern/components/header-mobile/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"headerMobile":"gallery__headerMobile_t1ge4","video":"gallery__video_t1ge4","hide":"gallery__hide_t1ge4","rightButtons":"gallery__rightButtons_t1ge4","description":"gallery__description_t1ge4"};
+const styles = {"headerMobile":"gallery__headerMobile_9pe0x","video":"gallery__video_9pe0x","hide":"gallery__hide_9pe0x","rightButtons":"gallery__rightButtons_9pe0x","description":"gallery__description_9pe0x"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/image-preview/index.css CHANGED Viewed

@@ -12,23 +12,23 @@
 :root {
     --focus-color: var(--color-light-status-info);
 }
-.gallery__component_14mo1 {
+.gallery__component_1pxtz {
     display: flex;
     z-index: 3;
     overflow: hidden;
     transition: border 0.15s ease-in-out;
     outline: none;
 }
-.gallery__component_14mo1 .gallery__image_14mo1 {
+.gallery__component_1pxtz .gallery__image_1pxtz {
         opacity: 0.3;
     }
-.gallery__component_14mo1.gallery__mobile_14mo1 {
+.gallery__component_1pxtz.gallery__mobile_1pxtz {
         padding: 0;
     }
-.gallery__active_14mo1 > .gallery__image_14mo1 {
+.gallery__active_1pxtz > .gallery__image_1pxtz {
         opacity: 1;
     }
-.gallery__preview_14mo1 {
+.gallery__preview_1pxtz {
     width: 56px;
     height: 56px;
     flex-shrink: 0;
@@ -38,15 +38,15 @@
        -moz-user-select: none;
             user-select: none;
 }
-.gallery__preview_14mo1.gallery__mobile_14mo1 {
+.gallery__preview_1pxtz.gallery__mobile_1pxtz {
         width: 46px;
         height: 46px;
         border-radius: var(--border-radius-8);
     }
-.gallery__image_14mo1 {
+.gallery__image_1pxtz {
     transition: opacity 0.15s ease-in-out;
 }
-.gallery__image_14mo1 > img {
+.gallery__image_1pxtz > img {
         display: block;
         width: 100%;
         height: 100%;
@@ -56,36 +56,36 @@
         overflow: clip;
         overflow-clip-margin: border-box;
     }
-.gallery__image_14mo1:hover {
+.gallery__image_1pxtz:hover {
         opacity: 0.7;
     }
-.gallery__loading_14mo1 {
+.gallery__loading_1pxtz {
     background-color: var(--color-static-neutral-100-inverted);
 }
-.gallery__loading_14mo1 .gallery__active_14mo1 {
+.gallery__loading_1pxtz .gallery__active_1pxtz {
         background-color: var(--color-static-neutral-300-inverted);
     }
-.gallery__brokenImageWrapper_14mo1 {
+.gallery__brokenImageWrapper_1pxtz {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--color-static-neutral-300-inverted);
     opacity: 0.3;
 }
-.gallery__brokenImageWrapper_14mo1.gallery__active_14mo1 {
+.gallery__brokenImageWrapper_1pxtz.gallery__active_1pxtz {
         opacity: 1;
     }
-.gallery__brokenIcon_14mo1 {
+.gallery__brokenIcon_1pxtz {
     width: 40px;
     height: 40px;
 }
-.gallery__focused_14mo1 {
+.gallery__focused_1pxtz {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.gallery__canvasPreview_14mo1 {
+.gallery__canvasPreview_1pxtz {
     border-radius: var(--border-radius-12);
 }
-.gallery__canvasPreview_14mo1.gallery__mobile_14mo1 {
+.gallery__canvasPreview_1pxtz.gallery__mobile_1pxtz {
         border-radius: var(--border-radius-8);
     }

package/modern/components/image-preview/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"component":"gallery__component_14mo1","image":"gallery__image_14mo1","mobile":"gallery__mobile_14mo1","active":"gallery__active_14mo1","preview":"gallery__preview_14mo1","loading":"gallery__loading_14mo1","brokenImageWrapper":"gallery__brokenImageWrapper_14mo1","brokenIcon":"gallery__brokenIcon_14mo1","focused":"gallery__focused_14mo1","canvasPreview":"gallery__canvasPreview_14mo1"};
+const styles = {"component":"gallery__component_1pxtz","image":"gallery__image_1pxtz","mobile":"gallery__mobile_1pxtz","active":"gallery__active_1pxtz","preview":"gallery__preview_1pxtz","loading":"gallery__loading_1pxtz","brokenImageWrapper":"gallery__brokenImageWrapper_1pxtz","brokenIcon":"gallery__brokenIcon_1pxtz","focused":"gallery__focused_1pxtz","canvasPreview":"gallery__canvasPreview_1pxtz"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/image-viewer/index.css CHANGED Viewed

@@ -24,7 +24,7 @@
 :root {
     --focus-color: var(--color-light-status-info);
 }
-.gallery__component_1ef1i {
+.gallery__component_xdq4y {
     display: flex;
     flex-grow: 1;
     justify-content: center;
@@ -92,9 +92,10 @@
         z-index: -1000;
     }
-    .gallery__swiperFrame_1ef1i {
+    .gallery__swiperFrame_xdq4y {
         display: flex;
-        width: 100%;
+        flex: 1 1 0;
+        min-width: 0;
         height: 100%;
         min-height: 0;
         max-height: calc(100vh - 168px);
@@ -103,17 +104,17 @@
         box-sizing: border-box;
     }
-        .gallery__swiperFrame_1ef1i.gallery__mobile_1ef1i {
+        .gallery__swiperFrame_xdq4y.gallery__mobile_xdq4y {
             max-height: calc(100vh - 210px);
             max-height: calc(100dvh - 210px);
         }
-        .gallery__swiperFrame_1ef1i.gallery__mobileVideo_1ef1i {
+        .gallery__swiperFrame_xdq4y.gallery__mobileVideo_xdq4y {
             max-height: 100vh;
             max-height: 100dvh;
         }
-    .gallery__fullScreenFrame_1ef1i {
+    .gallery__fullScreenFrame_xdq4y {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -126,7 +127,7 @@
         overflow: hidden;
     }
-    .gallery__hiddenFrame_1ef1i {
+    .gallery__hiddenFrame_xdq4y {
         flex: 0 0 0;
         width: 0;
         height: 0;
@@ -134,16 +135,16 @@
         overflow: hidden;
     }
-    .gallery__swiper_1ef1i {
+    .gallery__swiper_xdq4y {
         width: 100%;
         height: 100%;
     }
-    .gallery__hidden_1ef1i {
+    .gallery__hidden_xdq4y {
         display: none;
     }
-    .gallery__singleSlideContainer_1ef1i {
+    .gallery__singleSlideContainer_xdq4y {
         display: flex;
         width: 100%;
         height: 100%;
@@ -155,18 +156,18 @@
         box-sizing: border-box;
     }
-        .gallery__singleSlideContainer_1ef1i.gallery__mobile_1ef1i {
+        .gallery__singleSlideContainer_xdq4y.gallery__mobile_xdq4y {
             max-height: calc(100vh - 174px);
             max-height: calc(100dvh - 174px);
             padding: 0;
         }
-        .gallery__singleSlideContainer_1ef1i.gallery__mobileVideo_1ef1i {
+        .gallery__singleSlideContainer_xdq4y.gallery__mobileVideo_xdq4y {
             max-height: 100vh;
             max-height: 100dvh;
         }
-    .gallery__slide_1ef1i {
+    .gallery__slide_xdq4y {
         position: relative;
         display: flex;
         justify-content: center;
@@ -175,17 +176,17 @@
         height: 100%;
     }
-    .gallery__slideLoading_1ef1i {
+    .gallery__slideLoading_xdq4y {
         background-color: var(--color-static-neutral-translucent-100-inverted);
         border-radius: var(--border-radius-8);
     }
-    .gallery__spinner_1ef1i {
+    .gallery__spinner_xdq4y {
         position: absolute;
         color: var(--color-static-neutral-translucent-1300-inverted);
     }
-    .gallery__image_1ef1i {
+    .gallery__image_xdq4y {
         width: auto;
         height: auto;
         max-width: 100%;
@@ -198,11 +199,11 @@
         border-radius: var(--border-radius-8);
     }
-        .gallery__image_1ef1i.gallery__mobile_1ef1i {
+        .gallery__image_xdq4y.gallery__mobile_xdq4y {
             border-radius: var(--border-radius-0);
         }
-    .gallery__smallImage_1ef1i {
+    .gallery__smallImage_xdq4y {
         position: relative;
         width: auto;
         height: auto;
@@ -215,17 +216,17 @@
                 user-select: none;
     }
-    .gallery__verticalImageFit_1ef1i {
+    .gallery__verticalImageFit_xdq4y {
         width: auto;
         height: 100%;
     }
-    .gallery__horizontalImageFit_1ef1i {
+    .gallery__horizontalImageFit_xdq4y {
         width: 100%;
         height: auto;
     }
-    .gallery__fullScreenMedia_1ef1i {
+    .gallery__fullScreenMedia_xdq4y {
         width: 100%;
         height: 100%;
         max-width: 100%;
@@ -235,7 +236,7 @@
         border-radius: var(--border-radius-0);
     }
-    .gallery__arrow_1ef1i {
+    .gallery__arrow_xdq4y {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -249,20 +250,20 @@
         outline: none;
     }
-        .gallery__arrow_1ef1i:hover {
+        .gallery__arrow_xdq4y:hover {
             background-color: var(--color-static-neutral-0-inverted-hover);
         }
-        .gallery__arrow_1ef1i:active {
+        .gallery__arrow_xdq4y:active {
             background-color: var(--color-static-neutral-0-inverted-press);
         }
-    .gallery__focused_1ef1i {
+    .gallery__focused_xdq4y {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
     }
-    .gallery__placeholder_1ef1i {
+    .gallery__placeholder_xdq4y {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -272,7 +273,7 @@
         background-color: var(--color-static-neutral-300-inverted);
     }
-    .gallery__brokenImgWrapper_1ef1i {
+    .gallery__brokenImgWrapper_xdq4y {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -281,13 +282,13 @@
         text-align: center;
     }
-    .gallery__brokenImgIcon_1ef1i {
+    .gallery__brokenImgIcon_xdq4y {
         width: 80px;
         height: 80px;
         margin-bottom: var(--gap-4);
     }
-    .gallery__fullScreenVideo_1ef1i {
+    .gallery__fullScreenVideo_xdq4y {
         width: 100%;
         height: 100%;
         max-height: none;

package/modern/components/image-viewer/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"component":"gallery__component_1ef1i","swiperFrame":"gallery__swiperFrame_1ef1i","mobile":"gallery__mobile_1ef1i","mobileVideo":"gallery__mobileVideo_1ef1i","fullScreenFrame":"gallery__fullScreenFrame_1ef1i","hiddenFrame":"gallery__hiddenFrame_1ef1i","swiper":"gallery__swiper_1ef1i","hidden":"gallery__hidden_1ef1i","singleSlideContainer":"gallery__singleSlideContainer_1ef1i","slide":"gallery__slide_1ef1i","slideLoading":"gallery__slideLoading_1ef1i","spinner":"gallery__spinner_1ef1i","image":"gallery__image_1ef1i","smallImage":"gallery__smallImage_1ef1i","verticalImageFit":"gallery__verticalImageFit_1ef1i","horizontalImageFit":"gallery__horizontalImageFit_1ef1i","fullScreenMedia":"gallery__fullScreenMedia_1ef1i","arrow":"gallery__arrow_1ef1i","focused":"gallery__focused_1ef1i","placeholder":"gallery__placeholder_1ef1i","brokenImgWrapper":"gallery__brokenImgWrapper_1ef1i","brokenImgIcon":"gallery__brokenImgIcon_1ef1i","fullScreenVideo":"gallery__fullScreenVideo_1ef1i"};
+const styles = {"component":"gallery__component_xdq4y","swiperFrame":"gallery__swiperFrame_xdq4y","mobile":"gallery__mobile_xdq4y","mobileVideo":"gallery__mobileVideo_xdq4y","fullScreenFrame":"gallery__fullScreenFrame_xdq4y","hiddenFrame":"gallery__hiddenFrame_xdq4y","swiper":"gallery__swiper_xdq4y","hidden":"gallery__hidden_xdq4y","singleSlideContainer":"gallery__singleSlideContainer_xdq4y","slide":"gallery__slide_xdq4y","slideLoading":"gallery__slideLoading_xdq4y","spinner":"gallery__spinner_xdq4y","image":"gallery__image_xdq4y","smallImage":"gallery__smallImage_xdq4y","verticalImageFit":"gallery__verticalImageFit_xdq4y","horizontalImageFit":"gallery__horizontalImageFit_xdq4y","fullScreenMedia":"gallery__fullScreenMedia_xdq4y","arrow":"gallery__arrow_xdq4y","focused":"gallery__focused_xdq4y","placeholder":"gallery__placeholder_xdq4y","brokenImgWrapper":"gallery__brokenImgWrapper_xdq4y","brokenImgIcon":"gallery__brokenImgIcon_xdq4y","fullScreenVideo":"gallery__fullScreenVideo_xdq4y"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/image-viewer/index.module.css.js.map CHANGED Viewed

	@@ -1 +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 width: ~~100%;\~~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,eAAe,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;;;;"}
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,eAAe,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/modern/components/image-viewer/slide.js CHANGED Viewed

@@ -31,6 +31,7 @@ const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image,
     const small = isSmallImage(meta);
     const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;
     const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;
+    const imageStyle = fullScreen || !containerHeight ? undefined : { maxHeight: `${containerHeight}px` };
     const handleImageRef = useCallback((node) => {
         if (node?.complete && node.naturalWidth > 0 && !meta) {
             handleLoad({ currentTarget: node }, index);
@@ -48,7 +49,7 @@ const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image,
                 [styles.fullScreenMedia]: fullScreen,
                 [styles.verticalImageFit]: verticalImageFit,
                 [styles.horizontalImageFit]: horizontalImageFit,
-            }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: fullScreen ? undefined : { maxHeight: `${containerHeight}px` }, "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
+            }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: imageStyle, "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
 };
 export { Slide };

package/modern/components/image-viewer/slide.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n active: boolean;\n broken: boolean;\n loading: boolean;\n children: ReactNode;\n isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n const content = broken ? (\n <div className={styles.brokenImgWrapper}>\n <div className={styles.brokenImgIcon}>\n <svg\n xmlns='http://www.w3.org/2000/svg'\n width='80'\n height='80'\n viewBox='0 0 80 80'\n fill='none'\n >\n <rect width='80' height='80' fill='none' />\n <path\n fillRule='evenodd'\n clipRule='evenodd'\n d={NoImagePaths.baseImage}\n fill='#89898A'\n />\n <path d={NoImagePaths.triangleImage} fill='#89898A' />\n </svg>\n </div>\n\n <TypographyText view='primary-small' color='static-secondary-light'>\n Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n </TypographyText>\n </div>\n ) : (\n children\n );\n\n return (\n <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n {broken ? <div className={styles.placeholder}>{content}</div> : content}\n <Spinner className={styles.spinner} preset={48} visible={loading} />\n </div>\n );\n};\n\ntype SlideProps = {\n isActive: boolean;\n image: GalleryImage;\n meta?: ImageMeta;\n containerAspectRatio: number;\n imageAspectRatio: number;\n index: number;\n containerHeight: number;\n slideVisible: boolean;\n fullScreen?: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n isActive,\n meta,\n containerAspectRatio,\n imageAspectRatio,\n image,\n index,\n containerHeight,\n slideVisible,\n fullScreen,\n}) => {\n const { view } = useContext(GalleryContext);\n const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n const broken = Boolean(meta?.broken);\n const small = isSmallImage(meta);\n const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n\n const handleImageRef = useCallback(\n (node: HTMLImageElement \| null) => {\n if (node?.complete && node.naturalWidth > 0 && !meta) {\n handleLoad(\n { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,\n index,\n );\n }\n },\n [handleLoad, index, meta],\n );\n\n if (isVideo(image.src)) {\n return (\n <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n <Video\n url={image.src}\n index={index}\n isActive={isActive}\n className={cn({ [styles.fullScreenMedia]: fullScreen })}\n />\n </SlideInner>\n );\n }\n\n return (\n <SlideInner active={isActive} broken={broken} loading={!meta}>\n <img\n ref={handleImageRef}\n src={image.src}\n alt={getImageAlt(image, index)}\n className={cn({\n [styles.smallImage]: small,\n [styles.image]: !small && meta,\n [styles.mobile]: view === 'mobile',\n [styles.fullScreenMedia]: fullScreen,\n [styles.verticalImageFit]: verticalImageFit,\n [styles.horizontalImageFit]: horizontalImageFit,\n })}\n onLoad={(event) => handleLoad(event, index)}\n onError={() => handleLoadError(index)}\n style={~~fullScreen ? undefined : { maxHeight: `${containerHeight~~}~~px` }}~~\n data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n />\n </SlideInner>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAwBA,MAAM,UAAU,GAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,KAAI;AACnF,IAAA,MAAM,OAAO,GAAG,MAAM,IAClB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA;AACnC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;AAChC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EAAA;gBAEX,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAG,CAAA;AAC3C,gBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,YAAY,CAAC,SAAS,EACzB,IAAI,EAAC,SAAS,EAChB,CAAA;gBACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,IAAI,EAAC,SAAS,EAAG,CAAA,CACpD,CACJ;QAEN,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,wBAAwB,EAAA;;AACzC,YAAA,WAAW,GAAG,OAAO,GAAG,aAAa,CAC9C,CACf,KAEN,QAAQ,CACX;AAED,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAG,OAAO,EAAE,CAAC,EAAA;AAC/D,QAAA,MAAM,GAAG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,OAAO,CAAO,GAAG,OAAO;AACvE,QAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAI,CAAA,CAClE;AAEd,CAAC;AAcY,MAAA,KAAK,GAAmB,CAAC,EAClC,QAAQ,EACR,IAAI,EACJ,oBAAoB,EACpB,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,eAAe,EACf,YAAY,EACZ,UAAU,GACb,KAAI;IACD,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;IAC3C,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,oBAAoB,EAAE;IAE9D,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;AACpC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC;IAChC,MAAM,gBAAgB,GAAG,CAAC,KAAK,IAAI,oBAAoB,GAAG,gBAAgB;IAC1E,MAAM,kBAAkB,GAAG,CAAC,KAAK,IAAI,oBAAoB,IAAI,gBAAgB;~~AAE7E~~,IAAA,MAAM,cAAc,GAAG,WAAW,CAC9B,CAAC,IAA6B,KAAI;AAC9B,QAAA,IAAI,IAAI,EAAE,QAAQ,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE;YAClD,UAAU,CACN,EAAE,aAAa,EAAE,IAAI,EAA4C,EACjE,KAAK,CACR;;KAER,EACD,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,CAC5B;AAED,IAAA,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACpB,QAAA,QACI,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,IAAI,EAAA;AAC3E,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,UAAU,EAAE,CAAC,EACzD,CAAA,CACO;;AAIrB,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,IAAI,EAAA;QACxD,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EAC9B,SAAS,EAAE,EAAE,CAAC;AACV,gBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,KAAK;gBAC1B,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,KAAK,IAAI,IAAI;AAC9B,gBAAA,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;AAClC,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,UAAU;AACpC,gBAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,gBAAgB;AAC3C,gBAAA,CAAC,MAAM,CAAC,kBAAkB,GAAG,kBAAkB;~~aAClD~~,CAAC,EACF,MAAM,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,EAC3C,OAAO,EAAE,MAAM,eAAe,CAAC,KAAK,CAAC,EACrC,KAAK,EAAE,UAAU,~~GAAG~~,~~SAAS~~,~~GAAG,EAAE,SAAS,EAAE,CAAA,EAAG,eAAe,CAAA,~~EAAA,~~CAAI,EAAE,EAAA,cAAA,EACvD,~~YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,SAAS,~~EAAA,CAC~~/D,CACO;AAErB;;;;"}
1	+ {"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n active: boolean;\n broken: boolean;\n loading: boolean;\n children: ReactNode;\n isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n const content = broken ? (\n <div className={styles.brokenImgWrapper}>\n <div className={styles.brokenImgIcon}>\n <svg\n xmlns='http://www.w3.org/2000/svg'\n width='80'\n height='80'\n viewBox='0 0 80 80'\n fill='none'\n >\n <rect width='80' height='80' fill='none' />\n <path\n fillRule='evenodd'\n clipRule='evenodd'\n d={NoImagePaths.baseImage}\n fill='#89898A'\n />\n <path d={NoImagePaths.triangleImage} fill='#89898A' />\n </svg>\n </div>\n\n <TypographyText view='primary-small' color='static-secondary-light'>\n Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n </TypographyText>\n </div>\n ) : (\n children\n );\n\n return (\n <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n {broken ? <div className={styles.placeholder}>{content}</div> : content}\n <Spinner className={styles.spinner} preset={48} visible={loading} />\n </div>\n );\n};\n\ntype SlideProps = {\n isActive: boolean;\n image: GalleryImage;\n meta?: ImageMeta;\n containerAspectRatio: number;\n imageAspectRatio: number;\n index: number;\n containerHeight: number;\n slideVisible: boolean;\n fullScreen?: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n isActive,\n meta,\n containerAspectRatio,\n imageAspectRatio,\n image,\n index,\n containerHeight,\n slideVisible,\n fullScreen,\n}) => {\n const { view } = useContext(GalleryContext);\n const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n const broken = Boolean(meta?.broken);\n const small = isSmallImage(meta);\n const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n const imageStyle =\n fullScreen \|\| !containerHeight ? undefined : { maxHeight: `${containerHeight}px` };\n\n const handleImageRef = useCallback(\n (node: HTMLImageElement \| null) => {\n if (node?.complete && node.naturalWidth > 0 && !meta) {\n handleLoad(\n { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,\n index,\n );\n }\n },\n [handleLoad, index, meta],\n );\n\n if (isVideo(image.src)) {\n return (\n <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n <Video\n url={image.src}\n index={index}\n isActive={isActive}\n className={cn({ [styles.fullScreenMedia]: fullScreen })}\n />\n </SlideInner>\n );\n }\n\n return (\n <SlideInner active={isActive} broken={broken} loading={!meta}>\n <img\n ref={handleImageRef}\n src={image.src}\n alt={getImageAlt(image, index)}\n className={cn({\n [styles.smallImage]: small,\n [styles.image]: !small && meta,\n [styles.mobile]: view === 'mobile',\n [styles.fullScreenMedia]: fullScreen,\n [styles.verticalImageFit]: verticalImageFit,\n [styles.horizontalImageFit]: horizontalImageFit,\n })}\n onLoad={(event) => handleLoad(event, index)}\n onError={() => handleLoadError(index)}\n style={imageStyle}\n data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n />\n </SlideInner>\n );\n};\n"],"names":[],"mappings":"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"}

package/modern/components/image-viewer/video/index.css CHANGED Viewed

@@ -7,7 +7,7 @@
     --border-radius-0: 0;
     --border-radius-24: var(--border-radius-3xl);
 }
-.gallery__videoWrapper_1ogqj {
+.gallery__videoWrapper_1ipf9 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -17,17 +17,17 @@
     min-height: 0;
     position: relative;
 }
-.gallery__video_1ogqj {
+.gallery__video_1ipf9 {
     max-width: 100%;
     max-height: 100%;
     -o-object-fit: contain;
        object-fit: contain;
     border-radius: var(--border-radius-24);
 }
-.gallery__mobile_1ogqj {
+.gallery__mobile_1ipf9 {
     border-radius: var(--border-radius-0);
 }
-.gallery__videoButton_1ogqj {
+.gallery__videoButton_1ipf9 {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -35,13 +35,13 @@
     z-index: 1;
     color: green;
 }
-.gallery__icon_1ogqj {
+.gallery__icon_1ipf9 {
     color: var(--color-static-neutral-0);
 }
-.gallery__iconShape_1ogqj {
+.gallery__iconShape_1ipf9 {
     fill: var(--color-static-neutral-translucent-700);
 }
-.gallery__bottomButton_1ogqj {
+.gallery__bottomButton_1ipf9 {
     position: absolute;
     bottom: 48px;
     left: 32px;

package/modern/components/image-viewer/video/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"videoWrapper":"gallery__videoWrapper_1ogqj","video":"gallery__video_1ogqj","mobile":"gallery__mobile_1ogqj","videoButton":"gallery__videoButton_1ogqj","icon":"gallery__icon_1ogqj","iconShape":"gallery__iconShape_1ogqj","bottomButton":"gallery__bottomButton_1ogqj"};
+const styles = {"videoWrapper":"gallery__videoWrapper_1ipf9","video":"gallery__video_1ipf9","mobile":"gallery__mobile_1ipf9","videoButton":"gallery__videoButton_1ipf9","icon":"gallery__icon_1ipf9","iconShape":"gallery__iconShape_1ipf9","bottomButton":"gallery__bottomButton_1ipf9"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map