@alfalab/core-components-gallery 1.1.0 → 1.2.0

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 (74) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/Component.js +5 -5
  3. package/dist/components/header/Component.js +7 -4
  4. package/dist/components/header/buttons.js +1 -1
  5. package/dist/components/header/index.css +3 -3
  6. package/dist/components/header/index.js +1 -1
  7. package/dist/components/header-info-block/Component.js +1 -1
  8. package/dist/components/header-info-block/index.css +5 -5
  9. package/dist/components/image-preview/Component.js +1 -1
  10. package/dist/components/image-preview/index.css +13 -12
  11. package/dist/components/image-viewer/component.js +11 -4
  12. package/dist/components/image-viewer/index.css +19 -20
  13. package/dist/components/image-viewer/index.js +2 -2
  14. package/dist/components/image-viewer/slide.js +1 -1
  15. package/dist/components/index.js +2 -2
  16. package/dist/components/navigation-bar/Component.js +1 -1
  17. package/dist/components/navigation-bar/index.css +6 -6
  18. package/dist/cssm/Component.js +2 -2
  19. package/dist/cssm/components/header/Component.js +5 -2
  20. package/dist/cssm/components/image-preview/index.module.css +1 -0
  21. package/dist/cssm/components/image-viewer/component.js +9 -2
  22. package/dist/cssm/components/image-viewer/index.module.css +0 -1
  23. package/dist/cssm/components/image-viewer/slide.js +2 -4
  24. package/dist/cssm/types.d.ts +1 -0
  25. package/dist/esm/Component.js +5 -5
  26. package/dist/esm/components/header/Component.js +7 -4
  27. package/dist/esm/components/header/buttons.js +1 -1
  28. package/dist/esm/components/header/index.css +3 -3
  29. package/dist/esm/components/header/index.js +1 -1
  30. package/dist/esm/components/header-info-block/Component.js +1 -1
  31. package/dist/esm/components/header-info-block/index.css +5 -5
  32. package/dist/esm/components/image-preview/Component.js +1 -1
  33. package/dist/esm/components/image-preview/index.css +13 -12
  34. package/dist/esm/components/image-viewer/component.js +11 -4
  35. package/dist/esm/components/image-viewer/index.css +19 -20
  36. package/dist/esm/components/image-viewer/index.js +2 -2
  37. package/dist/esm/components/image-viewer/slide.js +1 -1
  38. package/dist/esm/components/index.js +2 -2
  39. package/dist/esm/components/navigation-bar/Component.js +1 -1
  40. package/dist/esm/components/navigation-bar/index.css +6 -6
  41. package/dist/esm/index.css +3 -3
  42. package/dist/esm/index.js +2 -2
  43. package/dist/esm/{slide-cafe0061.d.ts → slide-c6c2a8da.d.ts} +0 -0
  44. package/dist/esm/{slide-cafe0061.js → slide-c6c2a8da.js} +3 -5
  45. package/dist/esm/{tslib.es6-da013922.d.ts → tslib.es6-5424b006.d.ts} +0 -0
  46. package/dist/esm/{tslib.es6-da013922.js → tslib.es6-5424b006.js} +0 -0
  47. package/dist/esm/types.d.ts +1 -0
  48. package/dist/index.css +3 -3
  49. package/dist/index.js +2 -2
  50. package/dist/modern/Component.js +4 -4
  51. package/dist/modern/components/header/Component.js +4 -2
  52. package/dist/modern/components/header/index.css +3 -3
  53. package/dist/modern/components/header-info-block/Component.js +1 -1
  54. package/dist/modern/components/header-info-block/index.css +5 -5
  55. package/dist/modern/components/image-preview/Component.js +1 -1
  56. package/dist/modern/components/image-preview/index.css +13 -12
  57. package/dist/modern/components/image-viewer/component.js +9 -3
  58. package/dist/modern/components/image-viewer/index.css +19 -20
  59. package/dist/modern/components/image-viewer/index.js +1 -1
  60. package/dist/modern/components/image-viewer/slide.js +1 -1
  61. package/dist/modern/components/index.js +1 -1
  62. package/dist/modern/components/navigation-bar/Component.js +1 -1
  63. package/dist/modern/components/navigation-bar/index.css +6 -6
  64. package/dist/modern/index.css +3 -3
  65. package/dist/modern/index.js +1 -1
  66. package/dist/modern/{slide-db4a1a0f.d.ts → slide-cbb4ff18.d.ts} +0 -0
  67. package/dist/modern/{slide-db4a1a0f.js → slide-cbb4ff18.js} +3 -5
  68. package/dist/modern/types.d.ts +1 -0
  69. package/dist/{slide-dea55470.d.ts → slide-a45fd2cc.d.ts} +0 -0
  70. package/dist/{slide-dea55470.js → slide-a45fd2cc.js} +3 -5
  71. package/dist/{tslib.es6-24a89a0d.d.ts → tslib.es6-36496c07.d.ts} +0 -0
  72. package/dist/{tslib.es6-24a89a0d.js → tslib.es6-36496c07.js} +0 -0
  73. package/dist/types.d.ts +1 -0
  74. package/package.json +2 -2
@@ -36,7 +36,8 @@ var ImageViewer = function () {
36
36
  var rightArrowFocused = hooks.useFocus(rightArrowRef, 'keyboard')[0];
37
37
  var swiper = getSwiper();
38
38
  var handleSlideChange = React.useCallback(function () {
39
- setCurrentSlideIndex((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) || initialSlide);
39
+ var _a;
40
+ setCurrentSlideIndex((_a = swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) !== null && _a !== void 0 ? _a : initialSlide);
40
41
  }, [setCurrentSlideIndex, swiper, initialSlide]);
41
42
  var handlePrevClick = function () {
42
43
  slidePrev();
@@ -80,6 +81,9 @@ var ImageViewer = function () {
80
81
  return ({
81
82
  slidesPerView: 1,
82
83
  effect: 'fade',
84
+ fadeEffect: {
85
+ crossFade: true,
86
+ },
83
87
  className: cn__default['default'](styles__default['default'].swiper, (_a = {}, _a[styles__default['default'].hidden] = fullScreen, _a)),
84
88
  controller: { control: swiper },
85
89
  a11y: {
@@ -110,7 +114,10 @@ var ImageViewer = function () {
110
114
  var imageHeight = (meta === null || meta === void 0 ? void 0 : meta.height) || 1;
111
115
  var imageAspectRatio = imageWidth / imageHeight;
112
116
  var slideVisible = index === currentSlideIndex;
113
- return (React__default['default'].createElement(react.SwiperSlide, { key: utils_utils.getImageKey(image, index), style: { pointerEvents: slideVisible ? 'auto' : 'none' } }, function (_a) {
117
+ return (React__default['default'].createElement(react.SwiperSlide, { key: utils_utils.getImageKey(image, index), style: {
118
+ pointerEvents: slideVisible ? 'auto' : 'none',
119
+ transitionProperty: 'opacity',
120
+ } }, function (_a) {
114
121
  var isActive = _a.isActive;
115
122
  return (React__default['default'].createElement(components_imageViewer_slide.Slide, { isActive: isActive, swiperAspectRatio: swiperAspectRatio, image: image, swiperHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, handleLoad: handleLoad, handleLoadError: handleLoadError }));
116
123
  }));
@@ -59,7 +59,6 @@
59
59
  align-items: center;
60
60
  width: 100%;
61
61
  height: 100%;
62
- transition: opacity 0.15s ease-in-out;
63
62
  }
64
63
  .slideLoading {
65
64
  /* TODO: цвета нет в палитре */
@@ -33,13 +33,11 @@ var Slide = function (_a) {
33
33
  };
34
34
  var SlideInner = function (_a) {
35
35
  var _b;
36
- var children = _a.children, active = _a.active, broken = _a.broken, loading = _a.loading, withPlaceholder = _a.withPlaceholder;
36
+ var children = _a.children, broken = _a.broken, loading = _a.loading, withPlaceholder = _a.withPlaceholder;
37
37
  var content = broken ? (React__default['default'].createElement("div", { className: styles__default['default'].brokenImgWrapper },
38
38
  React__default['default'].createElement("div", { className: styles__default['default'].brokenImgIcon }),
39
39
  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);
40
- return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].slide, (_b = {}, _b[styles__default['default'].slideLoading] = loading, _b)), style: {
41
- opacity: Number(active),
42
- } }, withPlaceholder ? React__default['default'].createElement("div", { className: styles__default['default'].placeholder }, content) : content));
40
+ return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].slide, (_b = {}, _b[styles__default['default'].slideLoading] = loading, _b)) }, withPlaceholder ? React__default['default'].createElement("div", { className: styles__default['default'].placeholder }, content) : content));
43
41
  };
44
42
 
45
43
  exports.Slide = Slide;
@@ -3,6 +3,7 @@ type GalleryImage = {
3
3
  name?: string;
4
4
  previewSrc?: string;
5
5
  alt?: string;
6
+ canDownload?: boolean;
6
7
  };
7
8
  type ImageMeta = {
8
9
  width: number;
@@ -9,7 +9,7 @@ import './utils/split-filename.js';
9
9
  import './utils/utils.js';
10
10
  import '@alfalab/core-components-typography/dist/esm';
11
11
  import './components/header-info-block/Component.js';
12
- import './tslib.es6-da013922.js';
12
+ import './tslib.es6-5424b006.js';
13
13
  import '@alfalab/core-components-icon-button/dist/esm';
14
14
  import '@alfalab/core-components-tooltip/dist/esm';
15
15
  import '@alfalab/icons-glyph/PointerDownMIcon';
@@ -24,10 +24,10 @@ import 'element-closest';
24
24
  import 'swiper/swiper.min.css';
25
25
  import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
26
26
  import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
27
- import './slide-cafe0061.js';
27
+ import './slide-c6c2a8da.js';
28
28
  import { ImageViewer } from './components/image-viewer/component.js';
29
29
 
30
- var styles = {"container":"gallery__container_th1rc","modal":"gallery__modal_th1rc"};
30
+ var styles = {"container":"gallery__container_hrh6l","modal":"gallery__modal_hrh6l"};
31
31
  require('./index.css')
32
32
 
33
33
  var Backdrop = function () { return null; };
@@ -79,7 +79,7 @@ var Gallery = function (_a) {
79
79
  }
80
80
  };
81
81
  var handleKeyDown = useCallback(function (event) {
82
- if (fullScreen) {
82
+ if (!open || fullScreen) {
83
83
  return;
84
84
  }
85
85
  switch (event.key) {
@@ -90,7 +90,7 @@ var Gallery = function (_a) {
90
90
  slideNext();
91
91
  break;
92
92
  }
93
- }, [fullScreen, slideNext, slidePrev]);
93
+ }, [fullScreen, open, slideNext, slidePrev]);
94
94
  useEffect(function () {
95
95
  document.addEventListener('keydown', handleKeyDown);
96
96
  return function () {
@@ -4,7 +4,7 @@ import '../../utils/split-filename.js';
4
4
  import { isSmallImage } from '../../utils/utils.js';
5
5
  import '@alfalab/core-components-typography/dist/esm';
6
6
  import { HeaderInfoBlock } from '../header-info-block/Component.js';
7
- import '../../tslib.es6-da013922.js';
7
+ import '../../tslib.es6-5424b006.js';
8
8
  import '@alfalab/core-components-icon-button/dist/esm';
9
9
  import '@alfalab/core-components-tooltip/dist/esm';
10
10
  import '@alfalab/icons-glyph/PointerDownMIcon';
@@ -13,11 +13,12 @@ import '@alfalab/icons-glyph/ArrowsInwardMIcon';
13
13
  import '@alfalab/icons-glyph/CrossMIcon';
14
14
  import { ExitFullscreen, Fullscreen, Download, Exit } from './buttons.js';
15
15
 
16
- var styles = {"component":"gallery__component_lb1bj","buttons":"gallery__buttons_lb1bj"};
16
+ var styles = {"component":"gallery__component_3knbd","buttons":"gallery__buttons_3knbd"};
17
17
  require('./index.css')
18
18
 
19
19
  var Header = function () {
20
- var _a = useContext(GalleryContext), currentSlideIndex = _a.currentSlideIndex, singleSlide = _a.singleSlide, images = _a.images, fullScreen = _a.fullScreen, getCurrentImageMeta = _a.getCurrentImageMeta, getCurrentImage = _a.getCurrentImage, setFullScreen = _a.setFullScreen, onClose = _a.onClose;
20
+ var _a;
21
+ var _b = useContext(GalleryContext), currentSlideIndex = _b.currentSlideIndex, singleSlide = _b.singleSlide, images = _b.images, fullScreen = _b.fullScreen, getCurrentImageMeta = _b.getCurrentImageMeta, getCurrentImage = _b.getCurrentImage, setFullScreen = _b.setFullScreen, onClose = _b.onClose;
21
22
  var toggleFullScreenButton = useRef(null);
22
23
  var closeFullScreen = function () {
23
24
  setFullScreen(false);
@@ -31,12 +32,14 @@ var Header = function () {
31
32
  }
32
33
  }, [fullScreen]);
33
34
  var currentImage = getCurrentImage();
35
+ var canDownload = (_a = currentImage === null || currentImage === void 0 ? void 0 : currentImage.canDownload) !== null && _a !== void 0 ? _a : true;
34
36
  var filename = (currentImage === null || currentImage === void 0 ? void 0 : currentImage.name) || '';
35
37
  var description = singleSlide
36
38
  ? ''
37
39
  : "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 " + (currentSlideIndex + 1) + " \u0438\u0437 " + images.length;
38
40
  var meta = getCurrentImageMeta();
39
41
  var showFullScreenButton = !isSmallImage(meta) && !(meta === null || meta === void 0 ? void 0 : meta.broken);
42
+ var showDownloadButton = !(meta === null || meta === void 0 ? void 0 : meta.broken) && canDownload;
40
43
  var renderToggleFullScreenButton = function () {
41
44
  return fullScreen ? (React.createElement(ExitFullscreen, { onClick: closeFullScreen, buttonRef: toggleFullScreenButton })) : (React.createElement(Fullscreen, { onClick: openFullScreen, buttonRef: toggleFullScreenButton }));
42
45
  };
@@ -44,7 +47,7 @@ var Header = function () {
44
47
  React.createElement(HeaderInfoBlock, { filename: filename, description: description }),
45
48
  React.createElement("div", { className: styles.buttons },
46
49
  showFullScreenButton && renderToggleFullScreenButton(),
47
- !(meta === null || meta === void 0 ? void 0 : meta.broken) && (React.createElement(Download, { href: currentImage === null || currentImage === void 0 ? void 0 : currentImage.src, download: currentImage === null || currentImage === void 0 ? void 0 : currentImage.name })),
50
+ showDownloadButton && (React.createElement(Download, { href: currentImage === null || currentImage === void 0 ? void 0 : currentImage.src, download: currentImage === null || currentImage === void 0 ? void 0 : currentImage.name })),
48
51
  React.createElement(Exit, { onClick: onClose }))));
49
52
  };
50
53
 
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { a as __rest, _ as __assign } from '../../tslib.es6-da013922.js';
2
+ import { a as __rest, _ as __assign } from '../../tslib.es6-5424b006.js';
3
3
  import { IconButton } from '@alfalab/core-components-icon-button/dist/esm';
4
4
  import { Tooltip } from '@alfalab/core-components-tooltip/dist/esm';
5
5
  import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
@@ -1,4 +1,4 @@
1
- /* hash: lb1bj */
1
+ /* hash: 3knbd */
2
2
  :root {
3
3
  --color-light-bg-tertiary-inverted: #3c4c5d;
4
4
  }
@@ -15,7 +15,7 @@
15
15
  --gap-xl: 24px;
16
16
  --gap-2xl: 32px;
17
17
  }
18
- .gallery__component_lb1bj {
18
+ .gallery__component_3knbd {
19
19
  display: flex;
20
20
  justify-content: space-between;
21
21
  flex-shrink: 0;
@@ -24,7 +24,7 @@
24
24
  background-color: var(--color-light-bg-tertiary-inverted);
25
25
  box-sizing: border-box;
26
26
  }
27
- .gallery__buttons_lb1bj {
27
+ .gallery__buttons_3knbd {
28
28
  display: flex;
29
29
  padding-left: var(--gap-2xl);
30
30
  }
@@ -4,7 +4,7 @@ import '../../utils/split-filename.js';
4
4
  import '../../utils/utils.js';
5
5
  import '@alfalab/core-components-typography/dist/esm';
6
6
  import '../header-info-block/Component.js';
7
- import '../../tslib.es6-da013922.js';
7
+ import '../../tslib.es6-5424b006.js';
8
8
  import '@alfalab/core-components-icon-button/dist/esm';
9
9
  import '@alfalab/core-components-tooltip/dist/esm';
10
10
  import '@alfalab/icons-glyph/PointerDownMIcon';
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { splitFilename } from '../../utils/split-filename.js';
3
3
  import { Typography } from '@alfalab/core-components-typography/dist/esm';
4
4
 
5
- var styles = {"info":"gallery__info_189iu","filenameHead":"gallery__filenameHead_189iu","filenameContainer":"gallery__filenameContainer_189iu","description":"gallery__description_189iu"};
5
+ var styles = {"info":"gallery__info_1sn36","filenameHead":"gallery__filenameHead_1sn36","filenameContainer":"gallery__filenameContainer_1sn36","description":"gallery__description_1sn36"};
6
6
  require('./index.css')
7
7
 
8
8
  var HeaderInfoBlock = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 189iu */
1
+ /* hash: 1sn36 */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -10,24 +10,24 @@
10
10
  :root {
11
11
  --gap-2xs: 4px;
12
12
  }
13
- .gallery__info_189iu {
13
+ .gallery__info_1sn36 {
14
14
  height: 100%;
15
15
  display: flex;
16
16
  flex-direction: column;
17
17
  justify-content: center;
18
18
  overflow: hidden;
19
19
  }
20
- .gallery__filenameHead_189iu {
20
+ .gallery__filenameHead_1sn36 {
21
21
  display: inline;
22
22
  text-overflow: ellipsis;
23
23
  overflow: hidden;
24
24
  white-space: nowrap;
25
25
  }
26
- .gallery__filenameContainer_189iu {
26
+ .gallery__filenameContainer_1sn36 {
27
27
  overflow: hidden;
28
28
  display: inline-flex;
29
29
  }
30
- .gallery__description_189iu {
30
+ .gallery__description_1sn36 {
31
31
  display: inline;
32
32
  text-overflow: ellipsis;
33
33
  overflow: hidden;
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { useFocus } from '@alfalab/hooks';
4
4
  import { GalleryContext } from '../../context.js';
5
5
 
6
- var styles = {"component":"gallery__component_7nabl","active":"gallery__active_7nabl","image":"gallery__image_7nabl","preview":"gallery__preview_7nabl","loading":"gallery__loading_7nabl","brokenImageWrapper":"gallery__brokenImageWrapper_7nabl","brokenIcon":"gallery__brokenIcon_7nabl","focused":"gallery__focused_7nabl"};
6
+ var styles = {"component":"gallery__component_s0unj","active":"gallery__active_s0unj","image":"gallery__image_s0unj","preview":"gallery__preview_s0unj","loading":"gallery__loading_s0unj","brokenImageWrapper":"gallery__brokenImageWrapper_s0unj","brokenIcon":"gallery__brokenIcon_s0unj","focused":"gallery__focused_s0unj"};
7
7
  require('./index.css')
8
8
 
9
9
  var ImagePreview = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 7nabl */
1
+ /* hash: s0unj */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-border-key-inverted: #fff;
@@ -25,21 +25,22 @@
25
25
  :root {
26
26
  --gallery-broken-image-icon: url('https://alfabank.st/icons/art_no-image_s.svg');
27
27
  }
28
- .gallery__component_7nabl {
28
+ .gallery__component_s0unj {
29
29
  display: flex;
30
30
  padding: var(--gap-2xs);
31
31
  border: 2px solid rgba(0, 0, 0, 0);
32
32
  border-radius: var(--border-radius-l);
33
33
  overflow: hidden;
34
34
  transition: border 0.15s ease-in-out;
35
+ outline: none;
35
36
  }
36
- .gallery__active_7nabl {
37
+ .gallery__active_s0unj {
37
38
  border-color: var(--color-light-border-key-inverted)
38
39
  }
39
- .gallery__active_7nabl > .gallery__image_7nabl {
40
+ .gallery__active_s0unj > .gallery__image_s0unj {
40
41
  opacity: 0.7;
41
42
  }
42
- .gallery__preview_7nabl {
43
+ .gallery__preview_s0unj {
43
44
  width: 56px;
44
45
  height: 56px;
45
46
  flex-shrink: 0;
@@ -48,37 +49,37 @@
48
49
  -webkit-user-select: none;
49
50
  user-select: none;
50
51
  }
51
- .gallery__image_7nabl {
52
+ .gallery__image_s0unj {
52
53
  background-color: var(--color-light-bg-primary);
53
54
  background-size: cover;
54
55
  background-repeat: no-repeat;
55
56
  background-position: center;
56
57
  transition: opacity 0.15s ease-in-out
57
58
  }
58
- .gallery__image_7nabl:hover {
59
+ .gallery__image_s0unj:hover {
59
60
  opacity: 0.7;
60
61
  }
61
- .gallery__loading_7nabl {
62
+ .gallery__loading_s0unj {
62
63
  /* TODO: цвета нет в палитре */
63
64
  background-color: #e9eaeb;
64
65
  }
65
- .gallery__brokenImageWrapper_7nabl {
66
+ .gallery__brokenImageWrapper_s0unj {
66
67
  display: flex;
67
68
  justify-content: center;
68
69
  align-items: center;
69
70
  background-color: var(--color-light-bg-primary)
70
71
  }
71
- .gallery__brokenImageWrapper_7nabl:hover {
72
+ .gallery__brokenImageWrapper_s0unj:hover {
72
73
  opacity: 0.7;
73
74
  }
74
- .gallery__brokenIcon_7nabl {
75
+ .gallery__brokenIcon_s0unj {
75
76
  width: 40px;
76
77
  height: 40px;
77
78
  background-image: var(--gallery-broken-image-icon);
78
79
  background-size: contain;
79
80
  background-repeat: no-repeat;
80
81
  }
81
- .gallery__focused_7nabl {
82
+ .gallery__focused_s0unj {
82
83
  outline: 2px solid var(--focus-color);
83
84
  outline-offset: 2px;
84
85
  }
@@ -4,14 +4,14 @@ import { useFocus } from '@alfalab/hooks';
4
4
  import { GalleryContext } from '../../context.js';
5
5
  import { getImageAlt, getImageKey } from '../../utils/utils.js';
6
6
  import '@alfalab/core-components-typography/dist/esm';
7
- import { _ as __assign } from '../../tslib.es6-da013922.js';
7
+ import { _ as __assign } from '../../tslib.es6-5424b006.js';
8
8
  import SwiperCore, { EffectFade, A11y, Controller } from 'swiper';
9
9
  import { Swiper, SwiperSlide } from 'swiper/react';
10
10
  import elementClosest from 'element-closest';
11
11
  import 'swiper/swiper.min.css';
12
12
  import { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
13
13
  import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
14
- import { s as styles, S as Slide } from '../../slide-cafe0061.js';
14
+ import { s as styles, S as Slide } from '../../slide-c6c2a8da.js';
15
15
 
16
16
  SwiperCore.use([EffectFade, A11y, Controller]);
17
17
  var ImageViewer = function () {
@@ -23,7 +23,8 @@ var ImageViewer = function () {
23
23
  var rightArrowFocused = useFocus(rightArrowRef, 'keyboard')[0];
24
24
  var swiper = getSwiper();
25
25
  var handleSlideChange = useCallback(function () {
26
- setCurrentSlideIndex((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) || initialSlide);
26
+ var _a;
27
+ setCurrentSlideIndex((_a = swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) !== null && _a !== void 0 ? _a : initialSlide);
27
28
  }, [setCurrentSlideIndex, swiper, initialSlide]);
28
29
  var handlePrevClick = function () {
29
30
  slidePrev();
@@ -67,6 +68,9 @@ var ImageViewer = function () {
67
68
  return ({
68
69
  slidesPerView: 1,
69
70
  effect: 'fade',
71
+ fadeEffect: {
72
+ crossFade: true,
73
+ },
70
74
  className: cn(styles.swiper, (_a = {}, _a[styles.hidden] = fullScreen, _a)),
71
75
  controller: { control: swiper },
72
76
  a11y: {
@@ -97,7 +101,10 @@ var ImageViewer = function () {
97
101
  var imageHeight = (meta === null || meta === void 0 ? void 0 : meta.height) || 1;
98
102
  var imageAspectRatio = imageWidth / imageHeight;
99
103
  var slideVisible = index === currentSlideIndex;
100
- return (React.createElement(SwiperSlide, { key: getImageKey(image, index), style: { pointerEvents: slideVisible ? 'auto' : 'none' } }, function (_a) {
104
+ return (React.createElement(SwiperSlide, { key: getImageKey(image, index), style: {
105
+ pointerEvents: slideVisible ? 'auto' : 'none',
106
+ transitionProperty: 'opacity',
107
+ } }, function (_a) {
101
108
  var isActive = _a.isActive;
102
109
  return (React.createElement(Slide, { isActive: isActive, swiperAspectRatio: swiperAspectRatio, image: image, swiperHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, handleLoad: handleLoad, handleLoadError: handleLoadError }));
103
110
  }));
@@ -1,4 +1,4 @@
1
- /* hash: hfnrp */
1
+ /* hash: 8d9io */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-border-link: #007aff;
@@ -29,14 +29,14 @@
29
29
  :root {
30
30
  --gallery-broken-image-icon: url('https://alfabank.st/icons/art_no-image_s.svg');
31
31
  }
32
- .gallery__component_hfnrp {
32
+ .gallery__component_8d9io {
33
33
  display: flex;
34
34
  flex-grow: 1;
35
35
  justify-content: center;
36
36
  align-items: center;
37
37
  background-color: var(--color-light-bg-primary-inverted-alpha-50);
38
38
  }
39
- .gallery__swiper_hfnrp {
39
+ .gallery__swiper_8d9io {
40
40
  display: flex;
41
41
  width: 100%;
42
42
  height: 100%;
@@ -46,28 +46,27 @@
46
46
  padding: var(--gap-2xl) var(--gap-m);
47
47
  box-sizing: border-box;
48
48
  }
49
- .gallery__singleSlide_hfnrp .gallery__swiper_hfnrp {
49
+ .gallery__singleSlide_8d9io .gallery__swiper_8d9io {
50
50
  max-height: calc(100vh - 80px);
51
51
  padding: var(--gap-2xl);
52
52
  }
53
- .gallery__hidden_hfnrp {
53
+ .gallery__hidden_8d9io {
54
54
  display: none;
55
55
  }
56
- .gallery__slide_hfnrp {
56
+ .gallery__slide_8d9io {
57
57
  position: relative;
58
58
  display: flex;
59
59
  justify-content: center;
60
60
  align-items: center;
61
61
  width: 100%;
62
62
  height: 100%;
63
- transition: opacity 0.15s ease-in-out;
64
63
  }
65
- .gallery__slideLoading_hfnrp {
64
+ .gallery__slideLoading_8d9io {
66
65
  /* TODO: цвета нет в палитре */
67
66
  background-color: #e9eaeb;
68
67
  border-radius: var(--border-radius-m);
69
68
  }
70
- .gallery__image_hfnrp {
69
+ .gallery__image_8d9io {
71
70
  width: 0;
72
71
  height: 0;
73
72
  -webkit-user-select: none;
@@ -75,7 +74,7 @@
75
74
  background-color: var(--color-light-bg-primary);
76
75
  border-radius: var(--border-radius-m);
77
76
  }
78
- .gallery__smallImage_hfnrp {
77
+ .gallery__smallImage_8d9io {
79
78
  position: relative;
80
79
  width: auto;
81
80
  height: auto;
@@ -83,15 +82,15 @@
83
82
  user-select: none;
84
83
  background-color: var(--color-light-bg-primary);
85
84
  }
86
- .gallery__verticalImageFit_hfnrp {
85
+ .gallery__verticalImageFit_8d9io {
87
86
  width: auto;
88
87
  height: 100%;
89
88
  }
90
- .gallery__horizontalImageFit_hfnrp {
89
+ .gallery__horizontalImageFit_8d9io {
91
90
  width: 100%;
92
91
  height: auto;
93
92
  }
94
- .gallery__arrow_hfnrp {
93
+ .gallery__arrow_8d9io {
95
94
  display: flex;
96
95
  flex-direction: column;
97
96
  justify-content: center;
@@ -104,17 +103,17 @@
104
103
  transition: background-color 0.15s ease-in-out;
105
104
  outline: none
106
105
  }
107
- .gallery__arrow_hfnrp:hover {
106
+ .gallery__arrow_8d9io:hover {
108
107
  background-color: var(--color-light-bg-primary-inverted-alpha-10);
109
108
  }
110
- .gallery__arrow_hfnrp:active {
109
+ .gallery__arrow_8d9io:active {
111
110
  background-color: var(--color-light-bg-primary-inverted-alpha-20);
112
111
  }
113
- .gallery__focused_hfnrp {
112
+ .gallery__focused_8d9io {
114
113
  outline: 2px solid var(--focus-color);
115
114
  outline-offset: 2px;
116
115
  }
117
- .gallery__placeholder_hfnrp {
116
+ .gallery__placeholder_8d9io {
118
117
  display: flex;
119
118
  justify-content: center;
120
119
  align-items: center;
@@ -123,7 +122,7 @@
123
122
  border-radius: var(--border-radius-m);
124
123
  background-color: var(--color-light-bg-primary);
125
124
  }
126
- .gallery__brokenImgWrapper_hfnrp {
125
+ .gallery__brokenImgWrapper_8d9io {
127
126
  position: relative;
128
127
  display: flex;
129
128
  flex-direction: column;
@@ -131,7 +130,7 @@
131
130
  width: 150px;
132
131
  text-align: center;
133
132
  }
134
- .gallery__brokenImgIcon_hfnrp {
133
+ .gallery__brokenImgIcon_8d9io {
135
134
  width: 80px;
136
135
  height: 80px;
137
136
  margin-bottom: var(--gap-2xs);
@@ -139,7 +138,7 @@
139
138
  background-size: contain;
140
139
  background-repeat: no-repeat;
141
140
  }
142
- .gallery__fullScreenImage_hfnrp {
141
+ .gallery__fullScreenImage_8d9io {
143
142
  width: 100%;
144
143
  height: auto;
145
144
  background-color: var(--color-light-bg-primary);
@@ -4,12 +4,12 @@ import '@alfalab/hooks';
4
4
  import '../../context.js';
5
5
  import '../../utils/utils.js';
6
6
  import '@alfalab/core-components-typography/dist/esm';
7
- import '../../tslib.es6-da013922.js';
7
+ import '../../tslib.es6-5424b006.js';
8
8
  import 'swiper';
9
9
  import 'swiper/react';
10
10
  import 'element-closest';
11
11
  import 'swiper/swiper.min.css';
12
12
  import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
13
13
  import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
14
- import '../../slide-cafe0061.js';
14
+ import '../../slide-c6c2a8da.js';
15
15
  export { ImageViewer } from './component.js';
@@ -2,4 +2,4 @@ import 'react';
2
2
  import 'classnames';
3
3
  import '../../utils/utils.js';
4
4
  import '@alfalab/core-components-typography/dist/esm';
5
- export { S as Slide } from '../../slide-cafe0061.js';
5
+ export { S as Slide } from '../../slide-c6c2a8da.js';
@@ -8,7 +8,7 @@ import '../utils/split-filename.js';
8
8
  import '../utils/utils.js';
9
9
  import '@alfalab/core-components-typography/dist/esm';
10
10
  import './header-info-block/Component.js';
11
- import '../tslib.es6-da013922.js';
11
+ import '../tslib.es6-5424b006.js';
12
12
  import '@alfalab/core-components-icon-button/dist/esm';
13
13
  import '@alfalab/core-components-tooltip/dist/esm';
14
14
  import '@alfalab/icons-glyph/PointerDownMIcon';
@@ -23,5 +23,5 @@ import 'element-closest';
23
23
  import 'swiper/swiper.min.css';
24
24
  import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
25
25
  import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
26
- import '../slide-cafe0061.js';
26
+ import '../slide-c6c2a8da.js';
27
27
  export { ImageViewer } from './image-viewer/component.js';
@@ -5,7 +5,7 @@ import { GalleryContext } from '../../context.js';
5
5
  import { ImagePreview } from '../image-preview/Component.js';
6
6
  import { getImageKey } from '../../utils/utils.js';
7
7
 
8
- var styles = {"component":"gallery__component_pmo4k","preview":"gallery__preview_pmo4k"};
8
+ var styles = {"component":"gallery__component_1yma8","preview":"gallery__preview_1yma8"};
9
9
  require('./index.css')
10
10
 
11
11
  var MIN_SCROLL_STEP = 24;
@@ -1,4 +1,4 @@
1
- /* hash: pmo4k */
1
+ /* hash: 1yma8 */
2
2
  :root {
3
3
  --color-light-bg-tertiary-inverted: #3c4c5d;
4
4
  }
@@ -14,7 +14,7 @@
14
14
  --gap-3xs: 2px;
15
15
  --gap-xl: 24px;
16
16
  }
17
- .gallery__component_pmo4k {
17
+ .gallery__component_1yma8 {
18
18
  display: flex;
19
19
  flex-wrap: nowrap;
20
20
  align-content: center;
@@ -27,16 +27,16 @@
27
27
  background-color: var(--color-light-bg-tertiary-inverted);
28
28
  scrollbar-width: none
29
29
  }
30
- .gallery__component_pmo4k::-webkit-scrollbar {
30
+ .gallery__component_1yma8::-webkit-scrollbar {
31
31
  display: none;
32
32
  }
33
- .gallery__preview_pmo4k {
33
+ .gallery__preview_1yma8 {
34
34
  flex-shrink: 0;
35
35
  margin: 0 var(--gap-3xs)
36
36
  }
37
- .gallery__preview_pmo4k:first-child {
37
+ .gallery__preview_1yma8:first-child {
38
38
  margin-left: auto;
39
39
  }
40
- .gallery__preview_pmo4k:last-child {
40
+ .gallery__preview_1yma8:last-child {
41
41
  margin-right: auto;
42
42
  }
@@ -1,4 +1,4 @@
1
- /* hash: th1rc */
1
+ /* hash: hrh6l */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -7,14 +7,14 @@
7
7
 
8
8
  /* Hard up */
9
9
  }
10
- .gallery__container_th1rc {
10
+ .gallery__container_hrh6l {
11
11
  display: flex;
12
12
  flex-direction: column;
13
13
  justify-content: space-between;
14
14
  height: 100%;
15
15
  width: 100%;
16
16
  }
17
- .gallery__modal_th1rc {
17
+ .gallery__modal_hrh6l {
18
18
  flex-grow: 1;
19
19
  width: 100%;
20
20
  background: transparent;
package/dist/esm/index.js CHANGED
@@ -9,7 +9,7 @@ import './utils/split-filename.js';
9
9
  import './utils/utils.js';
10
10
  import '@alfalab/core-components-typography/dist/esm';
11
11
  import './components/header-info-block/Component.js';
12
- import './tslib.es6-da013922.js';
12
+ import './tslib.es6-5424b006.js';
13
13
  import '@alfalab/core-components-icon-button/dist/esm';
14
14
  import '@alfalab/core-components-tooltip/dist/esm';
15
15
  import '@alfalab/icons-glyph/PointerDownMIcon';
@@ -24,6 +24,6 @@ import 'element-closest';
24
24
  import 'swiper/swiper.min.css';
25
25
  import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
26
26
  import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
27
- import './slide-cafe0061.js';
27
+ import './slide-c6c2a8da.js';
28
28
  import './components/image-viewer/component.js';
29
29
  export { Gallery } from './Component.js';