@alfalab/core-components-gallery 5.0.14 → 5.1.0

package/modern/components/navigation-bar/Component.js

@@ -4,9 +4,10 @@ import { getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import 'classnames';
 import '@alfalab/hooks';
+import '../image-preview/paths.js';
 import { ImagePreview } from '../image-preview/Component.js';
 
-var styles = {"component":"gallery__component_1cwt9","preview":"gallery__preview_1cwt9"};
+var styles = {"component":"gallery__component_8hmyo","preview":"gallery__preview_8hmyo"};
 require('./index.css')
 
 const MIN_SCROLL_STEP = 24;

package/modern/components/navigation-bar/index.css

@@ -1,4 +1,4 @@
-/* hash: 9tfiq */
+/* hash: wr7qj */
 :root {
     --color-light-bg-tertiary-inverted: #3c4c5d;
 }
@@ -14,7 +14,7 @@
     --gap-3xs: 2px;
     --gap-xl: 24px;
 }
-.gallery__component_1cwt9 {
+.gallery__component_8hmyo {
     display: flex;
     flex-wrap: nowrap;
     align-content: center;
@@ -27,16 +27,16 @@
     background-color: var(--color-light-bg-tertiary-inverted);
     scrollbar-width: none
 }
-.gallery__component_1cwt9::-webkit-scrollbar {
+.gallery__component_8hmyo::-webkit-scrollbar {
         display: none;
     }
-.gallery__preview_1cwt9 {
+.gallery__preview_8hmyo {
     flex-shrink: 0;
     margin: 0 var(--gap-3xs)
 }
-.gallery__preview_1cwt9:first-child {
+.gallery__preview_8hmyo:first-child {
         margin-left: auto;
     }
-.gallery__preview_1cwt9:last-child {
+.gallery__preview_8hmyo:last-child {
         margin-right: auto;
     }

package/modern/components/navigation-bar/index.js

@@ -4,5 +4,6 @@ import '../../utils/utils.js';
 import '../../utils/constants.js';
 import 'classnames';
 import '@alfalab/hooks';
+import '../image-preview/paths.js';
 import '../image-preview/Component.js';
 export { NavigationBar } from './Component.js';

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 65joz */
+/* hash: tjf2d */
 :root {
 
     /* Hard */
@@ -7,14 +7,14 @@
 
     /* Hard up */
 }
-.gallery__container_144rv {
+.gallery__container_m1gpb {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
     width: 100%;
 }
-.gallery__modal_144rv {
+.gallery__modal_m1gpb {
     flex-grow: 1;
     width: 100%;
     height: 100%;

package/modern/index.js

@@ -6,6 +6,7 @@ export { PLACEHOLDER_HEIGHT, PLACEHOLDER_WIDTH, getImageAlt, getImageKey, isSmal
 export { TestIds } from './utils/constants.js';
 import 'classnames';
 import '@alfalab/hooks';
+import './components/image-preview/paths.js';
 import './components/image-preview/Component.js';
 import './components/navigation-bar/Component.js';
 import '@alfalab/core-components-typography/modern';
@@ -23,7 +24,8 @@ import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import './slide-ab2afafa.js';
+import './components/image-viewer/paths.js';
+import './slide-b5114cdc.js';
 import 'swiper/swiper.min.css';
 import './components/image-viewer/component.js';
 export { Gallery } from './Component.js';

package/modern/{slide-ab2afafa.js → slide-b5114cdc.js}

@@ -3,13 +3,18 @@ import { isSmallImage, getImageAlt } from './utils/utils.js';
 import { TestIds } from './utils/constants.js';
 import cn from 'classnames';
 import { Typography } from '@alfalab/core-components-typography/modern';
+import { NoImagePaths } from './components/image-viewer/paths.js';
 
-var styles = {"component":"gallery__component_w33ts","swiper":"gallery__swiper_w33ts","singleSlide":"gallery__singleSlide_w33ts","hidden":"gallery__hidden_w33ts","slide":"gallery__slide_w33ts","slideLoading":"gallery__slideLoading_w33ts","image":"gallery__image_w33ts","smallImage":"gallery__smallImage_w33ts","verticalImageFit":"gallery__verticalImageFit_w33ts","horizontalImageFit":"gallery__horizontalImageFit_w33ts","arrow":"gallery__arrow_w33ts","focused":"gallery__focused_w33ts","placeholder":"gallery__placeholder_w33ts","brokenImgWrapper":"gallery__brokenImgWrapper_w33ts","brokenImgIcon":"gallery__brokenImgIcon_w33ts","fullScreenImage":"gallery__fullScreenImage_w33ts"};
+var styles = {"component":"gallery__component_1klum","swiper":"gallery__swiper_1klum","singleSlide":"gallery__singleSlide_1klum","hidden":"gallery__hidden_1klum","slide":"gallery__slide_1klum","slideLoading":"gallery__slideLoading_1klum","image":"gallery__image_1klum","smallImage":"gallery__smallImage_1klum","verticalImageFit":"gallery__verticalImageFit_1klum","horizontalImageFit":"gallery__horizontalImageFit_1klum","arrow":"gallery__arrow_1klum","focused":"gallery__focused_1klum","placeholder":"gallery__placeholder_1klum","brokenImgWrapper":"gallery__brokenImgWrapper_1klum","brokenImgIcon":"gallery__brokenImgIcon_1klum","fullScreenImage":"gallery__fullScreenImage_1klum"};
 require('./components/image-viewer/index.css')
 
 const SlideInner = ({ children, broken, loading, withPlaceholder }) => {
     const content = broken ? (React.createElement("div", { className: styles.brokenImgWrapper },
-        React.createElement("div", { className: styles.brokenImgIcon }),
+        React.createElement("div", { className: styles.brokenImgIcon },
+            React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '80', height: '80', viewBox: '0 0 80 80', fill: 'none' },
+                React.createElement("rect", { width: '80', height: '80', fill: 'none' }),
+                React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: NoImagePaths.baseImage, fill: '#DBDEE1' }),
+                React.createElement("path", { d: NoImagePaths.triangleImage, fill: '#DBDEE1' }))),
         React.createElement(Typography.Text, { view: 'primary-small', color: 'secondary' }, "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435"))) : (children);
     return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading }) }, withPlaceholder ? React.createElement("div", { className: styles.placeholder }, content) : content));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-gallery",
-    "version": "5.0.14",
+    "version": "5.1.0",
     "description": "",
     "keywords": [],
     "license": "MIT",

package/{slide-a531584e.js → slide-403f6a83.js}

@@ -5,20 +5,25 @@ var utils_utils = require('./utils/utils.js');
 var utils_constants = require('./utils/constants.js');
 var cn = require('classnames');
 var coreComponentsTypography = require('@alfalab/core-components-typography');
+var components_imageViewer_paths = require('./components/image-viewer/paths.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"gallery__component_w33ts","swiper":"gallery__swiper_w33ts","singleSlide":"gallery__singleSlide_w33ts","hidden":"gallery__hidden_w33ts","slide":"gallery__slide_w33ts","slideLoading":"gallery__slideLoading_w33ts","image":"gallery__image_w33ts","smallImage":"gallery__smallImage_w33ts","verticalImageFit":"gallery__verticalImageFit_w33ts","horizontalImageFit":"gallery__horizontalImageFit_w33ts","arrow":"gallery__arrow_w33ts","focused":"gallery__focused_w33ts","placeholder":"gallery__placeholder_w33ts","brokenImgWrapper":"gallery__brokenImgWrapper_w33ts","brokenImgIcon":"gallery__brokenImgIcon_w33ts","fullScreenImage":"gallery__fullScreenImage_w33ts"};
+var styles = {"component":"gallery__component_1klum","swiper":"gallery__swiper_1klum","singleSlide":"gallery__singleSlide_1klum","hidden":"gallery__hidden_1klum","slide":"gallery__slide_1klum","slideLoading":"gallery__slideLoading_1klum","image":"gallery__image_1klum","smallImage":"gallery__smallImage_1klum","verticalImageFit":"gallery__verticalImageFit_1klum","horizontalImageFit":"gallery__horizontalImageFit_1klum","arrow":"gallery__arrow_1klum","focused":"gallery__focused_1klum","placeholder":"gallery__placeholder_1klum","brokenImgWrapper":"gallery__brokenImgWrapper_1klum","brokenImgIcon":"gallery__brokenImgIcon_1klum","fullScreenImage":"gallery__fullScreenImage_1klum"};
 require('./components/image-viewer/index.css')
 
 var SlideInner = function (_a) {
     var _b;
     var children = _a.children, broken = _a.broken, loading = _a.loading, withPlaceholder = _a.withPlaceholder;
     var content = broken ? (React__default['default'].createElement("div", { className: styles.brokenImgWrapper },
-        React__default['default'].createElement("div", { className: styles.brokenImgIcon }),
+        React__default['default'].createElement("div", { className: styles.brokenImgIcon },
+            React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '80', height: '80', viewBox: '0 0 80 80', fill: 'none' },
+                React__default['default'].createElement("rect", { width: '80', height: '80', fill: 'none' }),
+                React__default['default'].createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: components_imageViewer_paths.NoImagePaths.baseImage, fill: '#DBDEE1' }),
+                React__default['default'].createElement("path", { d: components_imageViewer_paths.NoImagePaths.triangleImage, fill: '#DBDEE1' }))),
         React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-small', color: 'secondary' }, "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435"))) : (children);
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles.slide, (_b = {}, _b[styles.slideLoading] = loading, _b)) }, withPlaceholder ? React__default['default'].createElement("div", { className: styles.placeholder }, content) : content));
 };