@semcore/carousel 16.1.13 → 17.0.0-prerelease.17

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 (20) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +4 -4
  3. package/lib/cjs/Carousel.js +536 -553
  4. package/lib/cjs/Carousel.js.map +1 -1
  5. package/lib/cjs/Carousel.types.js.map +1 -1
  6. package/lib/cjs/index.js +4 -4
  7. package/lib/cjs/index.js.map +1 -1
  8. package/lib/cjs/translations/__intergalactic-dynamic-locales.js +16 -16
  9. package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
  10. package/lib/es6/Carousel.js +527 -544
  11. package/lib/es6/Carousel.js.map +1 -1
  12. package/lib/es6/Carousel.types.js.map +1 -1
  13. package/lib/es6/translations/__intergalactic-dynamic-locales.js +15 -15
  14. package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
  15. package/lib/esm/Carousel.mjs +518 -481
  16. package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +1 -1
  17. package/lib/types/Carousel.types.d.ts +2 -11
  18. package/package.json +9 -8
  19. package/src/Carousel.tsx +15 -15
  20. package/src/Carousel.types.ts +2 -8
package/lib/cjs/Carousel.js CHANGED
@@ -1,98 +1,86 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports["default"] = void 0;
7
+ exports.default = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
- var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
14
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
15
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
10
  var _core = require("@semcore/core");
17
- var _breakpoints = require("@semcore/breakpoints");
11
+ var _baseComponents = require("@semcore/base-components");
18
12
  var _button = _interopRequireDefault(require("@semcore/button"));
19
13
  var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
20
14
  var _findComponent = require("@semcore/core/lib/utils/findComponent");
21
15
  var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
22
16
  var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
23
- var _flexBox = require("@semcore/flex-box");
24
17
  var _l = _interopRequireDefault(require("@semcore/icon/ChevronLeft/l"));
25
18
  var _l2 = _interopRequireDefault(require("@semcore/icon/ChevronRight/l"));
26
19
  var _modal = _interopRequireDefault(require("@semcore/modal"));
27
20
  var _react = _interopRequireDefault(require("react"));
28
21
  var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
29
22
  /*!__reshadow-styles__:"./style/carousel.shadow.css"*/
30
- var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SCarousel_10z0a_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_10z0a_gg_{display:flex;transition:transform var(--duration_10z0a) ease-in-out}.___SContentBox_10z0a_gg_,.___SIndicator_10z0a_gg_,.___SModalBox_10z0a_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_10z0a_gg_:has(.___SItem_10z0a_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:\"\";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SImageBoxContainer_10z0a_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SImageBoxContainer_10z0a_gg_:has(.___SItem_10z0a_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:\"\";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SImageBoxContainer_10z0a_gg_ .___SItem_10z0a_gg_:focus-visible{outline:0}.___SModalContainer_10z0a_gg_{display:flex;transition:transform var(--duration_10z0a) ease-in-out}.___SItem_10z0a_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_10z0a);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_10z0a_gg_>img{display:block}.___SItem_10z0a_gg_.__zoomIn_10z0a_gg_{cursor:zoom-in}.___SItem_10z0a_gg_.__zoomOut_10z0a_gg_{cursor:zoom-out}.___SIndicators_10z0a_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_10z0a_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}.___SIndicator_10z0a_gg_[aria-roledescription=slide]{width:100px;height:100px}@media (hover:hover){.___SIndicator_10z0a_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_10z0a_gg_.__active_10z0a_gg_{opacity:1}.___SIndicator_10z0a_gg_.__inverted_10z0a_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_10z0a_gg_,.___SPrev_10z0a_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_10z0a_gg_ .___SNextButton_10z0a_gg_ span:has(>svg:only-child),.___SNext_10z0a_gg_ .___SPrevButton_10z0a_gg_ span:has(>svg:only-child),.___SPrev_10z0a_gg_ .___SNextButton_10z0a_gg_ span:has(>svg:only-child),.___SPrev_10z0a_gg_ .___SPrevButton_10z0a_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SPrev_10z0a_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_10z0a_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_10z0a_gg_.__disabled_10z0a_gg_,.___SPrev_10z0a_gg_.__disabled_10z0a_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_10z0a_gg_{transition:none}}", /*__inner_css_end__*/"10z0a_gg_"),
23
+ const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SCarousel_13vnn_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_13vnn_gg_{display:flex;transition:transform var(--duration_13vnn) ease-in-out}.___SContentBox_13vnn_gg_,.___SIndicator_13vnn_gg_,.___SModalBox_13vnn_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_13vnn_gg_:has(.___SItem_13vnn_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:\"\";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SImageBoxContainer_13vnn_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SImageBoxContainer_13vnn_gg_:has(.___SItem_13vnn_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:\"\";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SImageBoxContainer_13vnn_gg_ .___SItem_13vnn_gg_:focus-visible{outline:0}.___SModalContainer_13vnn_gg_{display:flex;transition:transform var(--duration_13vnn) ease-in-out}.___SItem_13vnn_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_13vnn);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_13vnn_gg_>img{display:block}.___SItem_13vnn_gg_.__zoomIn_13vnn_gg_{cursor:zoom-in}.___SItem_13vnn_gg_.__zoomOut_13vnn_gg_{cursor:zoom-out}.___SIndicators_13vnn_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_13vnn_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}.___SIndicator_13vnn_gg_[aria-roledescription=slide]{width:100px;height:100px}@media (hover:hover){.___SIndicator_13vnn_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_13vnn_gg_.__active_13vnn_gg_{opacity:1}.___SIndicator_13vnn_gg_.__inverted_13vnn_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_13vnn_gg_,.___SPrev_13vnn_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_13vnn_gg_ .___SNextButton_13vnn_gg_ span:has(>svg:only-child),.___SNext_13vnn_gg_ .___SPrevButton_13vnn_gg_ span:has(>svg:only-child),.___SPrev_13vnn_gg_ .___SNextButton_13vnn_gg_ span:has(>svg:only-child),.___SPrev_13vnn_gg_ .___SPrevButton_13vnn_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SPrev_13vnn_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_13vnn_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_13vnn_gg_.__disabled_13vnn_gg_,.___SPrev_13vnn_gg_.__disabled_13vnn_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_13vnn_gg_{transition:none}}", /*__inner_css_end__*/"13vnn_gg_"),
31
24
  /*__reshadow_css_end__*/
32
25
  {
33
- "__SCarousel": "___SCarousel_10z0a_gg_",
34
- "__SContainer": "___SContainer_10z0a_gg_",
35
- "--duration": "--duration_10z0a",
36
- "__SContentBox": "___SContentBox_10z0a_gg_",
37
- "__SModalBox": "___SModalBox_10z0a_gg_",
38
- "__SIndicator": "___SIndicator_10z0a_gg_",
39
- "__SItem": "___SItem_10z0a_gg_",
40
- "__SModalContainer": "___SModalContainer_10z0a_gg_",
41
- "_zoomIn": "__zoomIn_10z0a_gg_",
42
- "_zoomOut": "__zoomOut_10z0a_gg_",
43
- "__SIndicators": "___SIndicators_10z0a_gg_",
44
- "_active": "__active_10z0a_gg_",
45
- "_inverted": "__inverted_10z0a_gg_",
46
- "__SPrev": "___SPrev_10z0a_gg_",
47
- "__SNext": "___SNext_10z0a_gg_",
48
- "_disabled": "__disabled_10z0a_gg_",
49
- "__SImageBoxContainer": "___SImageBoxContainer_10z0a_gg_",
50
- "--transform": "--transform_10z0a",
51
- "__SPrevButton": "___SPrevButton_10z0a_gg_",
52
- "__SNextButton": "___SNextButton_10z0a_gg_"
26
+ "__SCarousel": "___SCarousel_13vnn_gg_",
27
+ "__SContainer": "___SContainer_13vnn_gg_",
28
+ "--duration": "--duration_13vnn",
29
+ "__SContentBox": "___SContentBox_13vnn_gg_",
30
+ "__SModalBox": "___SModalBox_13vnn_gg_",
31
+ "__SIndicator": "___SIndicator_13vnn_gg_",
32
+ "__SItem": "___SItem_13vnn_gg_",
33
+ "__SModalContainer": "___SModalContainer_13vnn_gg_",
34
+ "_zoomIn": "__zoomIn_13vnn_gg_",
35
+ "_zoomOut": "__zoomOut_13vnn_gg_",
36
+ "__SIndicators": "___SIndicators_13vnn_gg_",
37
+ "_active": "__active_13vnn_gg_",
38
+ "_inverted": "__inverted_13vnn_gg_",
39
+ "__SPrev": "___SPrev_13vnn_gg_",
40
+ "__SNext": "___SNext_13vnn_gg_",
41
+ "_disabled": "__disabled_13vnn_gg_",
42
+ "__SImageBoxContainer": "___SImageBoxContainer_13vnn_gg_",
43
+ "--transform": "--transform_13vnn",
44
+ "__SPrevButton": "___SPrevButton_13vnn_gg_",
45
+ "__SNextButton": "___SNextButton_13vnn_gg_"
53
46
  });
54
- var MAP_TRANSFORM = {
47
+ const MAP_TRANSFORM = {
55
48
  ArrowLeft: 'left',
56
49
  ArrowRight: 'right'
57
50
  };
58
- var enhance = [(0, _uniqueID["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)];
59
- var media = ['(min-width: 481px)', '(max-width: 480px)'];
60
- var BreakPoints = (0, _breakpoints.createBreakpoints)(media);
61
- var isSmallScreen = function isSmallScreen(index) {
62
- return index === 1;
63
- };
64
- var CarouselRoot = /*#__PURE__*/function (_Component) {
65
- function CarouselRoot(props) {
66
- var _ref18, _props$index;
67
- var _this;
68
- (0, _classCallCheck2["default"])(this, CarouselRoot);
69
- _this = (0, _callSuper2["default"])(this, CarouselRoot, [props]);
70
- (0, _defineProperty2["default"])(_this, "defaultItemsCount", 0);
71
- (0, _defineProperty2["default"])(_this, "refCarousel", /*#__PURE__*/_react["default"].createRef());
72
- (0, _defineProperty2["default"])(_this, "refContainer", /*#__PURE__*/_react["default"].createRef());
73
- (0, _defineProperty2["default"])(_this, "refModalContainer", /*#__PURE__*/_react["default"].createRef());
74
- (0, _defineProperty2["default"])(_this, "_touchStartCoord", -1);
75
- (0, _defineProperty2["default"])(_this, "handlerKeyDown", function (e) {
76
- var firstSlide = 1;
77
- var lastSlide = _this.state.items.length + 1;
51
+ const enhance = [(0, _uniqueID.default)(), (0, _i18nEnhance.default)(_intergalacticDynamicLocales.localizedMessages)];
52
+ const media = ['(min-width: 481px)', '(max-width: 480px)'];
53
+ const BreakPoints = (0, _baseComponents.createBreakpoints)(media);
54
+ const isSmallScreen = index => index === 1;
55
+ class CarouselRoot extends _core.Component {
56
+ constructor(props) {
57
+ super(props);
58
+ (0, _defineProperty2.default)(this, "defaultItemsCount", 0);
59
+ (0, _defineProperty2.default)(this, "refCarousel", /*#__PURE__*/_react.default.createRef());
60
+ (0, _defineProperty2.default)(this, "refContainer", /*#__PURE__*/_react.default.createRef());
61
+ (0, _defineProperty2.default)(this, "refModalContainer", /*#__PURE__*/_react.default.createRef());
62
+ (0, _defineProperty2.default)(this, "_touchStartCoord", -1);
63
+ (0, _defineProperty2.default)(this, "handlerKeyDown", e => {
64
+ const firstSlide = 1;
65
+ const lastSlide = this.state.items.length + 1;
78
66
  switch (e.key) {
79
67
  case 'ArrowLeft':
80
68
  case 'ArrowRight':
81
69
  {
82
70
  e.preventDefault();
83
- _this.transformItem(MAP_TRANSFORM[e.key]);
71
+ this.transformItem(MAP_TRANSFORM[e.key]);
84
72
  break;
85
73
  }
86
74
  case 'Home':
87
75
  {
88
76
  e.preventDefault();
89
- _this.slideToValue(firstSlide);
77
+ this.slideToValue(firstSlide);
90
78
  break;
91
79
  }
92
80
  case 'End':
93
81
  {
94
82
  e.preventDefault();
95
- _this.slideToValue(lastSlide);
83
+ this.slideToValue(lastSlide);
96
84
  break;
97
85
  }
98
86
  }
@@ -100,51 +88,50 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
100
88
  // like home or end
101
89
  if (e.key === 'ArrowLeft') {
102
90
  e.preventDefault();
103
- _this.slideToValue(firstSlide);
91
+ this.slideToValue(firstSlide);
104
92
  } else if (e.key === 'ArrowRight') {
105
93
  e.preventDefault();
106
- _this.slideToValue(lastSlide);
94
+ this.slideToValue(lastSlide);
107
95
  }
108
96
  }
109
97
  if ((e.key === 'Enter' || e.key === ' ') && e.target instanceof HTMLDivElement && e.target.role === 'tabpanel') {
110
- _this.handleToggleZoomModal();
98
+ this.handleToggleZoomModal();
111
99
  }
112
100
  });
113
- (0, _defineProperty2["default"])(_this, "toggleItem", function (item) {
114
- var removeItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
115
- _this.setState(function (prevState) {
116
- var newItems = removeItem ? prevState.items.filter(function (element) {
117
- return element.node !== item.node;
118
- }) : [].concat((0, _toConsumableArray2["default"])(prevState.items), [item]);
101
+ (0, _defineProperty2.default)(this, "toggleItem", (item, removeItem = false) => {
102
+ this.setState(prevState => {
103
+ const newItems = removeItem ? prevState.items.filter(element => element.node !== item.node) : [...prevState.items, item];
119
104
  return {
120
105
  items: newItems
121
106
  };
122
107
  });
123
108
  if (!removeItem) {
124
- _this.defaultItemsCount++;
109
+ this.defaultItemsCount++;
125
110
  }
126
111
  });
127
- (0, _defineProperty2["default"])(_this, "transformContainer", function () {
128
- var transform = _this.state.selectedIndex * -1 * 100;
129
- if (_this.refContainer.current) {
130
- _this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
112
+ (0, _defineProperty2.default)(this, "transformContainer", () => {
113
+ const transform = this.state.selectedIndex * -1 * 100;
114
+ if (this.refContainer.current) {
115
+ this.refContainer.current.style.transform = `translateX(${transform}%)`;
131
116
  }
132
- if (_this.refModalContainer.current) {
133
- _this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
117
+ if (this.refModalContainer.current) {
118
+ this.refModalContainer.current.style.transform = `translateX(${transform}%)`;
134
119
  }
135
120
  });
136
- (0, _defineProperty2["default"])(_this, "getDirection", function (currentIndex, nextIndex) {
137
- var bounded = _this.asProps.bounded;
121
+ (0, _defineProperty2.default)(this, "getDirection", (currentIndex, nextIndex) => {
122
+ const {
123
+ bounded
124
+ } = this.asProps;
138
125
  if (bounded) {
139
126
  return currentIndex < nextIndex ? 'right' : 'left';
140
127
  }
141
- var items = _this.state.items;
142
- var listIndex = items.map(function (_, ind) {
143
- return ind;
144
- });
145
- var tmpArr = (0, _toConsumableArray2["default"])(listIndex);
146
- var minTmpArr = tmpArr[0];
147
- var maxTmpArr = tmpArr[tmpArr.length - 1];
128
+ const {
129
+ items
130
+ } = this.state;
131
+ const listIndex = items.map((_, ind) => ind);
132
+ const tmpArr = [...listIndex];
133
+ const minTmpArr = tmpArr[0];
134
+ const maxTmpArr = tmpArr[tmpArr.length - 1];
148
135
  if (tmpArr.length === 2) {
149
136
  return currentIndex < nextIndex ? 'right' : 'left';
150
137
  }
@@ -156,401 +143,383 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
156
143
  tmpArr.shift();
157
144
  tmpArr.push(minTmpArr);
158
145
  }
159
- var tmpCurrentIndex = tmpArr.indexOf(currentIndex);
160
- var left = tmpArr.indexOf(nextIndex);
146
+ const tmpCurrentIndex = tmpArr.indexOf(currentIndex);
147
+ const left = tmpArr.indexOf(nextIndex);
161
148
  return left - tmpCurrentIndex < 0 ? 'left' : 'right';
162
149
  });
163
- (0, _defineProperty2["default"])(_this, "slideToValue", function (nextIndex) {
164
- var selectedIndex = _this.state.selectedIndex;
165
- var direction = selectedIndex < nextIndex ? 'right' : 'left';
166
- var diff = Math.abs(selectedIndex - nextIndex);
150
+ (0, _defineProperty2.default)(this, "slideToValue", nextIndex => {
151
+ const {
152
+ selectedIndex
153
+ } = this.state;
154
+ const direction = selectedIndex < nextIndex ? 'right' : 'left';
155
+ let diff = Math.abs(selectedIndex - nextIndex);
167
156
  while (diff > 0) {
168
- _this.transformItem(direction);
157
+ this.transformItem(direction);
169
158
  diff--;
170
159
  }
171
160
  });
172
- (0, _defineProperty2["default"])(_this, "transformItem", function (direction) {
173
- var bounded = _this.asProps.bounded;
174
- var _this$state = _this.state,
175
- items = _this$state.items,
176
- selectedIndex = _this$state.selectedIndex;
177
- var maxIndexIndicator = items.length - 1;
161
+ (0, _defineProperty2.default)(this, "transformItem", direction => {
162
+ const {
163
+ bounded
164
+ } = this.asProps;
165
+ const {
166
+ items,
167
+ selectedIndex
168
+ } = this.state;
169
+ const maxIndexIndicator = items.length - 1;
178
170
  if (direction === 'right') {
179
171
  if (bounded && selectedIndex === maxIndexIndicator) {
180
- _this.handlers.index(maxIndexIndicator);
172
+ this.handlers.index(maxIndexIndicator);
181
173
  return;
182
174
  }
183
- if (_this.isControlled) {
184
- _this.handlers.index(selectedIndex === maxIndexIndicator ? 0 : selectedIndex + 1);
175
+ if (this.isControlled) {
176
+ this.handlers.index(selectedIndex === maxIndexIndicator ? 0 : selectedIndex + 1);
185
177
  return;
186
178
  }
187
- _this.setState(function (prevState) {
188
- return {
189
- selectedIndex: prevState.selectedIndex + 1
190
- };
191
- }, function () {
192
- _this.transformContainer();
193
- _this.handlers.index(_this.getIndex());
179
+ this.setState(prevState => ({
180
+ selectedIndex: prevState.selectedIndex + 1
181
+ }), () => {
182
+ this.transformContainer();
183
+ this.handlers.index(this.getIndex());
194
184
  });
195
185
  return;
196
186
  }
197
187
  if (direction === 'left') {
198
188
  if (bounded && selectedIndex === 0) {
199
- _this.handlers.index(0);
189
+ this.handlers.index(0);
200
190
  return;
201
191
  }
202
- if (_this.isControlled) {
203
- _this.handlers.index(selectedIndex === 0 ? maxIndexIndicator : selectedIndex - 1);
192
+ if (this.isControlled) {
193
+ this.handlers.index(selectedIndex === 0 ? maxIndexIndicator : selectedIndex - 1);
204
194
  return;
205
195
  }
206
- _this.setState(function (prevState) {
207
- return {
208
- selectedIndex: prevState.selectedIndex - 1
209
- };
210
- }, function () {
211
- _this.transformContainer();
212
- _this.handlers.index(_this.getIndex());
196
+ this.setState(prevState => ({
197
+ selectedIndex: prevState.selectedIndex - 1
198
+ }), () => {
199
+ this.transformContainer();
200
+ this.handlers.index(this.getIndex());
213
201
  });
214
202
  return;
215
203
  }
216
204
  });
217
- (0, _defineProperty2["default"])(_this, "bindHandlerClick", function (direction) {
218
- return function () {
219
- _this.transformItem(direction);
205
+ (0, _defineProperty2.default)(this, "bindHandlerClick", direction => {
206
+ return () => {
207
+ this.transformItem(direction);
220
208
  };
221
209
  });
222
- (0, _defineProperty2["default"])(_this, "bindHandlerClickIndicator", function (value) {
223
- return function () {
224
- var _this$state2 = _this.state,
225
- selectedIndex = _this$state2.selectedIndex,
226
- items = _this$state2.items;
227
- if (!_this.isControlled && value !== selectedIndex) {
228
- var newValueIndex = Math.floor(selectedIndex / items.length) * items.length + value;
229
- _this.slideToValue(newValueIndex);
210
+ (0, _defineProperty2.default)(this, "bindHandlerClickIndicator", value => {
211
+ return () => {
212
+ const {
213
+ selectedIndex,
214
+ items
215
+ } = this.state;
216
+ if (!this.isControlled && value !== selectedIndex) {
217
+ const newValueIndex = Math.floor(selectedIndex / items.length) * items.length + value;
218
+ this.slideToValue(newValueIndex);
230
219
  }
231
- _this.handlers.index(value);
220
+ this.handlers.index(value);
232
221
  };
233
222
  });
234
- (0, _defineProperty2["default"])(_this, "handlerTouchStart", function (e) {
235
- _this._touchStartCoord = e.changedTouches[0].clientX;
223
+ (0, _defineProperty2.default)(this, "handlerTouchStart", e => {
224
+ this._touchStartCoord = e.changedTouches[0].clientX;
236
225
  });
237
- (0, _defineProperty2["default"])(_this, "handlerTouchEnd", function (e) {
238
- var touchEndCoord = e.changedTouches[0].clientX;
239
- var delta = touchEndCoord - _this._touchStartCoord;
226
+ (0, _defineProperty2.default)(this, "handlerTouchEnd", e => {
227
+ const touchEndCoord = e.changedTouches[0].clientX;
228
+ const delta = touchEndCoord - this._touchStartCoord;
240
229
  if (delta > 50) {
241
- _this.transformItem('left');
230
+ this.transformItem('left');
242
231
  } else if (delta < -50) {
243
- _this.transformItem('right');
232
+ this.transformItem('right');
244
233
  }
245
234
  });
246
- (0, _defineProperty2["default"])(_this, "handleToggleZoomModal", function () {
247
- _this.setState(function (prevState) {
235
+ (0, _defineProperty2.default)(this, "handleToggleZoomModal", () => {
236
+ this.setState(prevState => {
248
237
  return {
249
238
  isOpenZoom: !prevState.isOpenZoom
250
239
  };
251
- }, function () {
252
- if (_this.state.isOpenZoom) {
253
- _this.transformContainer();
240
+ }, () => {
241
+ if (this.state.isOpenZoom) {
242
+ this.transformContainer();
254
243
  }
255
244
  });
256
245
  });
257
- (0, _defineProperty2["default"])(_this, "bindHandlerKeydownControl", function (direction) {
258
- return function (e) {
259
- if (e.key === 'Enter' || e.key === ' ') {
260
- e.preventDefault();
261
- _this.bindHandlerClick(direction)();
262
- }
263
- };
246
+ (0, _defineProperty2.default)(this, "bindHandlerKeydownControl", direction => e => {
247
+ if (e.key === 'Enter' || e.key === ' ') {
248
+ e.preventDefault();
249
+ this.bindHandlerClick(direction)();
250
+ }
264
251
  });
265
- _this.isControlled = props.index !== undefined;
266
- _this.state = {
252
+ this.isControlled = props.index !== undefined;
253
+ this.state = {
267
254
  items: [],
268
255
  isOpenZoom: false,
269
- selectedIndex: (_ref18 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref18 !== void 0 ? _ref18 : 0
256
+ selectedIndex: props.index ?? props.defaultIndex ?? 0
270
257
  };
271
- return _this;
272
258
  }
273
- (0, _inherits2["default"])(CarouselRoot, _Component);
274
- return (0, _createClass2["default"])(CarouselRoot, [{
275
- key: "uncontrolledProps",
276
- value: function uncontrolledProps() {
277
- var _this2 = this;
278
- return {
279
- index: [null, function (_index) {
280
- var _this2$refCarousel$cu;
281
- (_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0 || _this2$refCarousel$cu.blur();
282
- setTimeout(function () {
283
- var _this2$refCarousel$cu2;
284
- (_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 || _this2$refCarousel$cu2.focus();
285
- }, 0);
286
- }]
287
- };
288
- }
289
- }, {
290
- key: "componentDidMount",
291
- value: function componentDidMount() {
292
- var selectedIndex = this.state.selectedIndex;
293
- if (selectedIndex !== 0) {
294
- if (selectedIndex < 0 || selectedIndex >= this.defaultItemsCount) {
295
- _logger["default"].warn(true, "You couldn't use value for the `index` or `defaultIndex` not from `Item's` length range.", CarouselRoot.displayName);
296
- this.setState({
297
- selectedIndex: 0
298
- });
299
- } else {
300
- this.transformContainer();
301
- }
302
- }
303
- var deprecatedComponents = (0, _findComponent.findAllComponents)(this.asProps.Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
304
- _logger["default"].warn(deprecatedComponents.length > 0, 'Please, try to remove `Prev`, `Next`, `Indicators` and other children components from your Carousel, except only `Item` elements.', CarouselRoot.displayName);
305
- }
306
- }, {
307
- key: "componentDidUpdate",
308
- value: function componentDidUpdate(prevProps) {
309
- var _this3 = this;
310
- var index = this.asProps.index;
311
- if (prevProps.index !== index && this.isControlled && index !== undefined) {
259
+ uncontrolledProps() {
260
+ return {
261
+ index: [null, _index => {
262
+ this.refCarousel.current?.blur();
263
+ setTimeout(() => {
264
+ this.refCarousel.current?.focus();
265
+ }, 0);
266
+ }]
267
+ };
268
+ }
269
+ componentDidMount() {
270
+ const {
271
+ selectedIndex
272
+ } = this.state;
273
+ if (selectedIndex !== 0) {
274
+ if (selectedIndex < 0 || selectedIndex >= this.defaultItemsCount) {
275
+ _logger.default.warn(true, `You couldn't use value for the \`index\` or \`defaultIndex\` not from \`Item's\` length range.`, CarouselRoot.displayName);
312
276
  this.setState({
313
- selectedIndex: index
314
- }, function () {
315
- return _this3.transformContainer();
277
+ selectedIndex: 0
316
278
  });
279
+ } else {
280
+ this.transformContainer();
317
281
  }
318
282
  }
319
- }, {
320
- key: "getContainerProps",
321
- value: function getContainerProps() {
322
- var duration = this.asProps.duration;
323
- return {
324
- ref: this.refContainer,
325
- duration: duration
326
- };
327
- }
328
- }, {
329
- key: "getItemProps",
330
- value: function getItemProps(_props, index) {
331
- var zoom = this.asProps.zoom;
332
- var isCurrent = this.isSelected(index);
333
- return {
334
- toggleItem: this.toggleItem,
335
- uid: this.asProps.uid,
336
- index: index,
337
- current: isCurrent,
338
- zoomIn: zoom,
339
- onToggleZoomModal: this.handleToggleZoomModal,
340
- transform: isCurrent ? this.getTransform() : undefined,
341
- isOpenZoom: this.state.isOpenZoom
342
- };
343
- }
344
- }, {
345
- key: "getPrevProps",
346
- value: function getPrevProps() {
347
- var _this$asProps = this.asProps,
348
- bounded = _this$asProps.bounded,
349
- getI18nText = _this$asProps.getI18nText,
350
- uid = _this$asProps.uid;
351
- var _this$state3 = this.state,
352
- items = _this$state3.items,
353
- selectedIndex = _this$state3.selectedIndex;
354
- var disabled = false;
355
- if (items.length && bounded) {
356
- disabled = selectedIndex === 0;
357
- }
358
- return {
359
- 'onClick': this.bindHandlerClick('left'),
360
- 'onKeyDown': this.bindHandlerKeydownControl('left'),
361
- disabled: disabled,
362
- 'label': getI18nText('prev'),
363
- 'aria-controls': "igc-".concat(uid, "-carousel")
364
- };
365
- }
366
- }, {
367
- key: "getNextProps",
368
- value: function getNextProps() {
369
- var _this$asProps2 = this.asProps,
370
- bounded = _this$asProps2.bounded,
371
- getI18nText = _this$asProps2.getI18nText,
372
- uid = _this$asProps2.uid;
373
- var _this$state4 = this.state,
374
- items = _this$state4.items,
375
- selectedIndex = _this$state4.selectedIndex;
376
- var disabled = false;
377
- if (items.length && bounded) {
378
- disabled = selectedIndex === items.length - 1;
379
- }
380
- return {
381
- 'onClick': this.bindHandlerClick('right'),
382
- 'onKeyDown': this.bindHandlerKeydownControl('right'),
383
- disabled: disabled,
384
- 'label': getI18nText('next'),
385
- 'aria-controls': "igc-".concat(uid, "-carousel")
386
- };
283
+ const deprecatedComponents = (0, _findComponent.findAllComponents)(this.asProps.Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
284
+ _logger.default.warn(deprecatedComponents.length > 0, 'Please, try to remove `Prev`, `Next`, `Indicators` and other children components from your Carousel, except only `Item` elements.', CarouselRoot.displayName);
285
+ }
286
+ componentDidUpdate(prevProps) {
287
+ const {
288
+ index
289
+ } = this.asProps;
290
+ if (prevProps.index !== index && this.isControlled && index !== undefined) {
291
+ this.setState({
292
+ selectedIndex: index
293
+ }, () => this.transformContainer());
387
294
  }
388
- }, {
389
- key: "getIndicatorsProps",
390
- value: function getIndicatorsProps() {
391
- var _this4 = this;
392
- var items = this.state.items;
393
- var getI18nText = this.asProps.getI18nText;
394
- return {
395
- 'items': items.map(function (_item, key) {
396
- return {
397
- active: _this4.isSelected(key),
398
- onClick: _this4.bindHandlerClickIndicator(key),
399
- key: key
400
- };
401
- }),
402
- 'role': 'tablist',
403
- 'tabIndex': 0,
404
- 'aria-label': getI18nText('slides')
405
- };
295
+ }
296
+ getContainerProps() {
297
+ const {
298
+ duration
299
+ } = this.asProps;
300
+ return {
301
+ ref: this.refContainer,
302
+ duration
303
+ };
304
+ }
305
+ getItemProps(_props, index) {
306
+ const {
307
+ zoom
308
+ } = this.asProps;
309
+ const isCurrent = this.isSelected(index);
310
+ return {
311
+ toggleItem: this.toggleItem,
312
+ uid: this.asProps.uid,
313
+ index,
314
+ current: isCurrent,
315
+ zoomIn: zoom,
316
+ onToggleZoomModal: this.handleToggleZoomModal,
317
+ transform: isCurrent ? this.getTransform() : undefined,
318
+ isOpenZoom: this.state.isOpenZoom
319
+ };
320
+ }
321
+ getPrevProps() {
322
+ const {
323
+ bounded,
324
+ getI18nText,
325
+ uid
326
+ } = this.asProps;
327
+ const {
328
+ items,
329
+ selectedIndex
330
+ } = this.state;
331
+ let disabled = false;
332
+ if (items.length && bounded) {
333
+ disabled = selectedIndex === 0;
406
334
  }
407
- }, {
408
- key: "getIndicatorProps",
409
- value: function getIndicatorProps(_, index) {
410
- var isCurrent = this.isSelected(index);
411
- var getI18nText = this.asProps.getI18nText;
412
- return {
413
- 'role': 'tab',
414
- 'aria-selected': isCurrent,
415
- 'aria-controls': "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
416
- 'aria-label': getI18nText('slide', {
417
- slideNumber: index + 1
418
- })
419
- };
335
+ return {
336
+ 'onClick': this.bindHandlerClick('left'),
337
+ 'onKeyDown': this.bindHandlerKeydownControl('left'),
338
+ disabled,
339
+ 'label': getI18nText('prev'),
340
+ 'aria-controls': `igc-${uid}-carousel`
341
+ };
342
+ }
343
+ getNextProps() {
344
+ const {
345
+ bounded,
346
+ getI18nText,
347
+ uid
348
+ } = this.asProps;
349
+ const {
350
+ items,
351
+ selectedIndex
352
+ } = this.state;
353
+ let disabled = false;
354
+ if (items.length && bounded) {
355
+ disabled = selectedIndex === items.length - 1;
420
356
  }
421
- }, {
422
- key: "getTransform",
423
- value: function getTransform() {
424
- var _this$state5 = this.state,
425
- items = _this$state5.items,
426
- selectedIndex = _this$state5.selectedIndex;
427
- var direction = selectedIndex > 0 ? 1 : -1;
428
- var count = items.length === 0 ? 0 : Math.floor(selectedIndex / items.length) * direction;
429
- var transform = selectedIndex > 0 && selectedIndex < items.length ? 0 : 100 * direction * count * items.length;
430
- return transform;
357
+ return {
358
+ 'onClick': this.bindHandlerClick('right'),
359
+ 'onKeyDown': this.bindHandlerKeydownControl('right'),
360
+ disabled,
361
+ 'label': getI18nText('next'),
362
+ 'aria-controls': `igc-${uid}-carousel`
363
+ };
364
+ }
365
+ getIndicatorsProps() {
366
+ const {
367
+ items
368
+ } = this.state;
369
+ const {
370
+ getI18nText
371
+ } = this.asProps;
372
+ return {
373
+ 'items': items.map((_item, key) => ({
374
+ active: this.isSelected(key),
375
+ onClick: this.bindHandlerClickIndicator(key),
376
+ key
377
+ })),
378
+ 'role': 'tablist',
379
+ 'tabIndex': 0,
380
+ 'aria-label': getI18nText('slides')
381
+ };
382
+ }
383
+ getIndicatorProps(_, index) {
384
+ const isCurrent = this.isSelected(index);
385
+ const {
386
+ getI18nText
387
+ } = this.asProps;
388
+ return {
389
+ 'role': 'tab',
390
+ 'aria-selected': isCurrent,
391
+ 'aria-controls': `igc-${this.asProps.uid}-carousel-item-${index}`,
392
+ 'aria-label': getI18nText('slide', {
393
+ slideNumber: index + 1
394
+ })
395
+ };
396
+ }
397
+ getTransform() {
398
+ const {
399
+ items,
400
+ selectedIndex
401
+ } = this.state;
402
+ const direction = selectedIndex > 0 ? 1 : -1;
403
+ const count = items.length === 0 ? 0 : Math.floor(selectedIndex / items.length) * direction;
404
+ const transform = selectedIndex > 0 && selectedIndex < items.length ? 0 : 100 * direction * count * items.length;
405
+ return transform;
406
+ }
407
+ getIndex() {
408
+ const {
409
+ items,
410
+ selectedIndex
411
+ } = this.state;
412
+ if (items.length === 0) {
413
+ return 0;
431
414
  }
432
- }, {
433
- key: "getIndex",
434
- value: function getIndex() {
435
- var _this$state6 = this.state,
436
- items = _this$state6.items,
437
- selectedIndex = _this$state6.selectedIndex;
438
- if (items.length === 0) {
439
- return 0;
440
- }
441
- if (selectedIndex >= 0) {
442
- return selectedIndex % items.length;
443
- }
444
- return (items.length + selectedIndex % items.length) % items.length;
415
+ if (selectedIndex >= 0) {
416
+ return selectedIndex % items.length;
445
417
  }
446
- }, {
447
- key: "isSelected",
448
- value: function isSelected(index) {
449
- var items = this.state.items;
450
- if (items.length === 0) {
451
- return true;
452
- }
453
- return index === this.getIndex();
418
+ return (items.length + selectedIndex % items.length) % items.length;
419
+ }
420
+ isSelected(index) {
421
+ const {
422
+ items
423
+ } = this.state;
424
+ if (items.length === 0) {
425
+ return true;
454
426
  }
455
- }, {
456
- key: "renderModal",
457
- value: function renderModal(isSmall, ComponentItems) {
458
- var _ref = this.asProps,
459
- _ref0,
460
- _this5 = this;
461
- var SModalContainer = _flexBox.Box;
462
- var SModalBox = _flexBox.Box;
463
- var SImageBoxContainer = _flexBox.Box;
464
- var _this$asProps3 = this.asProps,
465
- styles = _this$asProps3.styles,
466
- uid = _this$asProps3.uid,
467
- duration = _this$asProps3.duration,
468
- zoomWidth = _this$asProps3.zoomWidth;
469
- var isOpenZoom = this.state.isOpenZoom;
470
- return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_modal["default"], _ref0.cn("Modal", {
471
- "visible": isOpenZoom,
472
- "onClose": this.handleToggleZoomModal,
473
- "ghost": true,
474
- "closable": !isSmall
475
- }), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref0.cn("Flex", {
476
- "direction": isSmall ? 'column' : 'row'
477
- }), !isSmall && /*#__PURE__*/_react["default"].createElement(Carousel.Prev, {
478
- inverted: true
479
- }), /*#__PURE__*/_react["default"].createElement(SImageBoxContainer, _ref0.cn("SImageBoxContainer", {}), /*#__PURE__*/_react["default"].createElement(SModalBox, _ref0.cn("SModalBox", {}), /*#__PURE__*/_react["default"].createElement(SModalContainer, _ref0.cn("SModalContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
427
+ return index === this.getIndex();
428
+ }
429
+ renderModal(isSmall, ComponentItems) {
430
+ var _ref = this.asProps,
431
+ _ref0;
432
+ const SModalContainer = _baseComponents.Box;
433
+ const SModalBox = _baseComponents.Box;
434
+ const SImageBoxContainer = _baseComponents.Box;
435
+ const {
436
+ styles,
437
+ uid,
438
+ duration,
439
+ zoomWidth
440
+ } = this.asProps;
441
+ const {
442
+ isOpenZoom
443
+ } = this.state;
444
+ return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_modal.default, _ref0.cn("Modal", {
445
+ "visible": isOpenZoom,
446
+ "onClose": this.handleToggleZoomModal,
447
+ "ghost": true,
448
+ "closable": !isSmall
449
+ }), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref0.cn("Flex", {
450
+ "direction": isSmall ? 'column' : 'row'
451
+ }), !isSmall && /*#__PURE__*/_react.default.createElement(Carousel.Prev, {
452
+ inverted: true
453
+ }), /*#__PURE__*/_react.default.createElement(SImageBoxContainer, _ref0.cn("SImageBoxContainer", {}), /*#__PURE__*/_react.default.createElement(SModalBox, _ref0.cn("SModalBox", {}), /*#__PURE__*/_react.default.createElement(SModalContainer, _ref0.cn("SModalContainer", {
454
+ ...(0, _core.assignProps)({
480
455
  "aria-live": 'polite',
481
- "use:duration": "".concat(duration, "ms"),
456
+ "use:duration": `${duration}ms`,
482
457
  "ref": this.refModalContainer,
483
458
  "use:w": undefined,
484
459
  "wMax": zoomWidth
485
- }, _ref))), ComponentItems.map(function (item, i) {
486
- return /*#__PURE__*/_react["default"].createElement(Carousel.Item, (0, _extends2["default"])({}, item.props, {
487
- key: item.key,
488
- uid: uid,
489
- index: i,
490
- current: _this5.isSelected(i),
491
- toggleItem: undefined,
492
- zoom: true,
493
- zoomOut: true,
494
- transform: _this5.isSelected(i) ? _this5.getTransform() : undefined
495
- }));
496
- })))), isSmall ? /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref0.cn("Flex", {
497
- "justifyContent": 'center',
498
- "mt": 2
499
- }), /*#__PURE__*/_react["default"].createElement(Carousel.Prev, {
500
- inverted: true
501
- }), /*#__PURE__*/_react["default"].createElement(Carousel.Next, {
502
- inverted: true
503
- })) : /*#__PURE__*/_react["default"].createElement(Carousel.Next, {
504
- inverted: true
505
- })), !isSmall && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, {
506
- inverted: true
460
+ }, _ref)
461
+ }), ComponentItems.map((item, i) => {
462
+ return /*#__PURE__*/_react.default.createElement(Carousel.Item, (0, _extends2.default)({}, item.props, {
463
+ key: item.key,
464
+ uid: uid,
465
+ index: i,
466
+ current: this.isSelected(i),
467
+ toggleItem: undefined,
468
+ zoom: true,
469
+ zoomOut: true,
470
+ transform: this.isSelected(i) ? this.getTransform() : undefined
507
471
  }));
508
- }
509
- }, {
510
- key: "render",
511
- value: function render() {
512
- var _ref2 = this.asProps,
513
- _ref1,
514
- _this6 = this;
515
- var SCarousel = _flexBox.Box;
516
- var _this$asProps4 = this.asProps,
517
- styles = _this$asProps4.styles,
518
- Children = _this$asProps4.Children,
519
- uid = _this$asProps4.uid,
520
- hasZoom = _this$asProps4.zoom,
521
- ariaLabel = _this$asProps4['aria-label'],
522
- indicators = _this$asProps4.indicators,
523
- getI18nText = _this$asProps4.getI18nText;
524
- var ComponentItems = (0, _findComponent.findAllComponents)(Children, ['Carousel.Item']);
525
- var Controls = (0, _findComponent.findAllComponents)(Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
526
- return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCarousel, _ref1.cn("SCarousel", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
472
+ })))), isSmall ? /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref0.cn("Flex", {
473
+ "justifyContent": 'center',
474
+ "mt": 2
475
+ }), /*#__PURE__*/_react.default.createElement(Carousel.Prev, {
476
+ inverted: true
477
+ }), /*#__PURE__*/_react.default.createElement(Carousel.Next, {
478
+ inverted: true
479
+ })) : /*#__PURE__*/_react.default.createElement(Carousel.Next, {
480
+ inverted: true
481
+ })), !isSmall && /*#__PURE__*/_react.default.createElement(Carousel.Indicators, {
482
+ inverted: true
483
+ }));
484
+ }
485
+ render() {
486
+ var _ref2 = this.asProps,
487
+ _ref1;
488
+ const SCarousel = _baseComponents.Box;
489
+ const {
490
+ styles,
491
+ Children,
492
+ uid,
493
+ zoom: hasZoom,
494
+ 'aria-label': ariaLabel,
495
+ indicators,
496
+ getI18nText
497
+ } = this.asProps;
498
+ const ComponentItems = (0, _findComponent.findAllComponents)(Children, ['Carousel.Item']);
499
+ const Controls = (0, _findComponent.findAllComponents)(Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
500
+ return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SCarousel, _ref1.cn("SCarousel", {
501
+ ...(0, _core.assignProps)({
527
502
  "role": 'region',
528
503
  "aria-roledescription": getI18nText('Carousel:aria-roledescription'),
529
504
  "onKeyDown": this.handlerKeyDown,
530
505
  "onTouchStart": this.handlerTouchStart,
531
506
  "onTouchEnd": this.handlerTouchEnd,
532
507
  "ref": this.refCarousel,
533
- "id": "igc-".concat(uid, "-carousel")
534
- }, _ref2))), Controls.length === 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref1.cn("Flex", {}), /*#__PURE__*/_react["default"].createElement(Carousel.Prev, null), /*#__PURE__*/_react["default"].createElement(Carousel.ContentBox, null, /*#__PURE__*/_react["default"].createElement(Carousel.Container, {
535
- "aria-label": ariaLabel
536
- }, /*#__PURE__*/_react["default"].createElement(Children, _ref1.cn("Children", {})))), /*#__PURE__*/_react["default"].createElement(Carousel.Next, null)), indicators === 'default' && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, null), indicators === 'preview' && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, null, function () {
537
- return ComponentItems.map(function (item, index) {
538
- return /*#__PURE__*/_react["default"].createElement(Carousel.Indicator, (0, _extends2["default"])({}, item.props, {
539
- key: item.key,
540
- w: undefined,
541
- "aria-roledescription": getI18nText('Carousel.Indicator:aria-roledescription'),
542
- active: _this6.isSelected(index),
543
- onClick: _this6.bindHandlerClickIndicator(index)
544
- }));
545
- });
546
- })) : /*#__PURE__*/_react["default"].createElement(Children, _ref1.cn("Children", {})), hasZoom && /*#__PURE__*/_react["default"].createElement(BreakPoints, _ref1.cn("BreakPoints", {}), /*#__PURE__*/_react["default"].createElement(BreakPoints.Context.Consumer, null, function (mediaIndex) {
547
- return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
548
- })));
549
- }
550
- }]);
551
- }(_core.Component);
552
- (0, _defineProperty2["default"])(CarouselRoot, "displayName", 'Carousel');
553
- (0, _defineProperty2["default"])(CarouselRoot, "defaultProps", {
508
+ "id": `igc-${uid}-carousel`
509
+ }, _ref2)
510
+ }), Controls.length === 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref1.cn("Flex", {}), /*#__PURE__*/_react.default.createElement(Carousel.Prev, null), /*#__PURE__*/_react.default.createElement(Carousel.ContentBox, null, /*#__PURE__*/_react.default.createElement(Carousel.Container, {
511
+ "aria-label": ariaLabel
512
+ }, /*#__PURE__*/_react.default.createElement(Children, _ref1.cn("Children", {})))), /*#__PURE__*/_react.default.createElement(Carousel.Next, null)), indicators === 'default' && /*#__PURE__*/_react.default.createElement(Carousel.Indicators, null), indicators === 'preview' && /*#__PURE__*/_react.default.createElement(Carousel.Indicators, null, () => ComponentItems.map((item, index) => /*#__PURE__*/_react.default.createElement(Carousel.Indicator, (0, _extends2.default)({}, item.props, {
513
+ key: item.key,
514
+ w: undefined,
515
+ "aria-roledescription": getI18nText('Carousel.Indicator:aria-roledescription'),
516
+ active: this.isSelected(index),
517
+ onClick: this.bindHandlerClickIndicator(index)
518
+ }))))) : /*#__PURE__*/_react.default.createElement(Children, _ref1.cn("Children", {})), hasZoom && /*#__PURE__*/_react.default.createElement(BreakPoints, _ref1.cn("BreakPoints", {}), /*#__PURE__*/_react.default.createElement(BreakPoints.Context.Consumer, null, mediaIndex => this.renderModal(isSmallScreen(mediaIndex), ComponentItems))));
519
+ }
520
+ }
521
+ (0, _defineProperty2.default)(CarouselRoot, "displayName", 'Carousel');
522
+ (0, _defineProperty2.default)(CarouselRoot, "defaultProps", {
554
523
  defaultIndex: 0,
555
524
  duration: 350,
556
525
  step: 100,
@@ -559,187 +528,201 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
559
528
  locale: 'en',
560
529
  indicators: 'default'
561
530
  });
562
- (0, _defineProperty2["default"])(CarouselRoot, "style", style);
563
- (0, _defineProperty2["default"])(CarouselRoot, "enhance", enhance);
564
- var Container = function Container(props) {
531
+ (0, _defineProperty2.default)(CarouselRoot, "style", style);
532
+ (0, _defineProperty2.default)(CarouselRoot, "enhance", enhance);
533
+ function Container(props) {
565
534
  var _ref3 = arguments[0],
566
535
  _ref10;
567
- var SContainer = _flexBox.Box;
568
- var styles = props.styles,
569
- duration = props.duration;
570
- return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref10.cn("SContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
571
- "use:duration": "".concat(duration, "ms"),
572
- "aria-live": 'polite'
573
- }, _ref3))));
574
- };
575
- var ContentBox = function ContentBox(props) {
536
+ const SContainer = _baseComponents.Box;
537
+ const {
538
+ styles,
539
+ duration
540
+ } = props;
541
+ return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SContainer, _ref10.cn("SContainer", {
542
+ ...(0, _core.assignProps)({
543
+ "use:duration": `${duration}ms`,
544
+ "aria-live": 'polite'
545
+ }, _ref3)
546
+ }));
547
+ }
548
+ function ContentBox(props) {
576
549
  var _ref4 = arguments[0],
577
550
  _ref11;
578
- var SContentBox = _flexBox.Box;
579
- var styles = props.styles;
580
- return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContentBox, _ref11.cn("SContentBox", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref4))));
581
- };
582
- var Item = /*#__PURE__*/function (_Component2) {
583
- function Item() {
584
- var _this7;
585
- (0, _classCallCheck2["default"])(this, Item);
586
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
587
- args[_key] = arguments[_key];
588
- }
589
- _this7 = (0, _callSuper2["default"])(this, Item, [].concat(args));
590
- (0, _defineProperty2["default"])(_this7, "refItem", /*#__PURE__*/_react["default"].createRef());
591
- return _this7;
551
+ const SContentBox = _baseComponents.Box;
552
+ const {
553
+ styles
554
+ } = props;
555
+ return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SContentBox, _ref11.cn("SContentBox", {
556
+ ...(0, _core.assignProps)({}, _ref4)
557
+ }));
558
+ }
559
+ class Item extends _core.Component {
560
+ constructor(...args) {
561
+ super(...args);
562
+ (0, _defineProperty2.default)(this, "refItem", /*#__PURE__*/_react.default.createRef());
592
563
  }
593
- (0, _inherits2["default"])(Item, _Component2);
594
- return (0, _createClass2["default"])(Item, [{
595
- key: "componentDidMount",
596
- value: function componentDidMount() {
597
- var _this$props = this.props,
598
- toggleItem = _this$props.toggleItem,
599
- transform = _this$props.transform;
600
- var refItem = this.refItem.current;
601
- if (toggleItem && refItem) {
602
- toggleItem({
603
- node: refItem
604
- });
605
- }
606
- if (transform && refItem) {
607
- refItem.style.transform = "translateX(".concat(transform, "%)");
608
- }
564
+ componentDidMount() {
565
+ const {
566
+ toggleItem,
567
+ transform
568
+ } = this.props;
569
+ const refItem = this.refItem.current;
570
+ if (toggleItem && refItem) {
571
+ toggleItem({
572
+ node: refItem
573
+ });
609
574
  }
610
- }, {
611
- key: "componentWillUnmount",
612
- value: function componentWillUnmount() {
613
- var toggleItem = this.props.toggleItem;
614
- var refItem = this.refItem.current;
615
- if (toggleItem && refItem) {
616
- toggleItem({
617
- node: refItem
618
- }, true);
619
- }
575
+ if (transform && refItem) {
576
+ refItem.style.transform = `translateX(${transform}%)`;
620
577
  }
621
- }, {
622
- key: "componentDidUpdate",
623
- value: function componentDidUpdate(prevProps) {
624
- var transform = this.props.transform;
625
- var refItem = this.refItem.current;
626
- if (prevProps.transform !== transform && refItem) {
627
- refItem.style.transform = "translateX(".concat(transform, "%)");
628
- }
578
+ }
579
+ componentWillUnmount() {
580
+ const {
581
+ toggleItem
582
+ } = this.props;
583
+ const refItem = this.refItem.current;
584
+ if (toggleItem && refItem) {
585
+ toggleItem({
586
+ node: refItem
587
+ }, true);
629
588
  }
630
- }, {
631
- key: "render",
632
- value: function render() {
633
- var _ref5 = this.asProps,
634
- _ref12;
635
- var _this$props2 = this.props,
636
- styles = _this$props2.styles,
637
- index = _this$props2.index,
638
- uid = _this$props2.uid,
639
- current = _this$props2.current,
640
- zoomIn = _this$props2.zoomIn,
641
- onToggleZoomModal = _this$props2.onToggleZoomModal;
642
- var SItem = _flexBox.Box;
643
- return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItem, _ref12.cn("SItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
589
+ }
590
+ componentDidUpdate(prevProps) {
591
+ const transform = this.props.transform;
592
+ const refItem = this.refItem.current;
593
+ if (prevProps.transform !== transform && refItem) {
594
+ refItem.style.transform = `translateX(${transform}%)`;
595
+ }
596
+ }
597
+ render() {
598
+ var _ref5 = this.asProps,
599
+ _ref12;
600
+ const {
601
+ styles,
602
+ index,
603
+ uid,
604
+ current,
605
+ zoomIn,
606
+ onToggleZoomModal
607
+ } = this.props;
608
+ const SItem = _baseComponents.Box;
609
+ return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItem, _ref12.cn("SItem", {
610
+ ...(0, _core.assignProps)({
644
611
  "ref": this.refItem,
645
612
  "role": 'tabpanel',
646
- "data-carousel": "igc-".concat(uid, "-carousel"),
647
- "id": "igc-".concat(uid, "-carousel-item-").concat(index),
613
+ "data-carousel": `igc-${uid}-carousel`,
614
+ "id": `igc-${uid}-carousel-item-${index}`,
648
615
  "aria-current": current,
649
616
  "use:tabIndex": current ? 0 : -1,
650
617
  "onClick": zoomIn ? onToggleZoomModal : undefined,
651
618
  "zoomIn": zoomIn
652
- }, _ref5))));
653
- }
654
- }]);
655
- }(_core.Component);
656
- var Prev = function Prev(props) {
619
+ }, _ref5)
620
+ }));
621
+ }
622
+ }
623
+ function Prev(props) {
657
624
  var _ref6 = arguments[0],
658
625
  _ref13;
659
- var styles = props.styles,
660
- children = props.children,
661
- Children = props.Children,
662
- label = props.label,
663
- _props$top = props.top,
664
- top = _props$top === void 0 ? 0 : _props$top,
665
- inverted = props.inverted;
666
- var SPrev = _flexBox.Box;
667
- var SPrevButton = _button["default"];
668
- return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPrev, _ref13.cn("SPrev", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
669
- "top": top
670
- }, _ref6))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SPrevButton, _ref13.cn("SPrevButton", {
671
- "addonLeft": _l["default"],
626
+ const {
627
+ styles,
628
+ children,
629
+ Children,
630
+ label,
631
+ top = 0,
632
+ inverted
633
+ } = props;
634
+ const SPrev = _baseComponents.Box;
635
+ const SPrevButton = _button.default;
636
+ return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPrev, _ref13.cn("SPrev", {
637
+ ...(0, _core.assignProps)({
638
+ "top": top
639
+ }, _ref6)
640
+ }), children ? /*#__PURE__*/_react.default.createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/_react.default.createElement(SPrevButton, _ref13.cn("SPrevButton", {
641
+ "addonLeft": _l.default,
672
642
  "aria-label": label,
673
643
  "theme": inverted ? 'invert' : 'muted',
674
644
  "use": 'tertiary',
675
645
  "size": 'l',
676
646
  "innerOutline": true
677
647
  })));
678
- };
679
- var Next = function Next(props) {
648
+ }
649
+ ;
650
+ function Next(props) {
680
651
  var _ref7 = arguments[0],
681
652
  _ref14;
682
- var styles = props.styles,
683
- children = props.children,
684
- Children = props.Children,
685
- label = props.label,
686
- _props$top2 = props.top,
687
- top = _props$top2 === void 0 ? 0 : _props$top2,
688
- inverted = props.inverted;
689
- var SNext = _flexBox.Box;
690
- var SNextButton = _button["default"];
691
- return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SNext, _ref14.cn("SNext", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
692
- "top": top
693
- }, _ref7))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref14.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SNextButton, _ref14.cn("SNextButton", {
694
- "addonLeft": _l2["default"],
653
+ const {
654
+ styles,
655
+ children,
656
+ Children,
657
+ label,
658
+ top = 0,
659
+ inverted
660
+ } = props;
661
+ const SNext = _baseComponents.Box;
662
+ const SNextButton = _button.default;
663
+ return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SNext, _ref14.cn("SNext", {
664
+ ...(0, _core.assignProps)({
665
+ "top": top
666
+ }, _ref7)
667
+ }), children ? /*#__PURE__*/_react.default.createElement(Children, _ref14.cn("Children", {})) : /*#__PURE__*/_react.default.createElement(SNextButton, _ref14.cn("SNextButton", {
668
+ "addonLeft": _l2.default,
695
669
  "aria-label": label,
696
670
  "theme": inverted ? 'invert' : 'muted',
697
671
  "use": 'tertiary',
698
672
  "size": 'l',
699
673
  "innerOutline": true
700
674
  })));
701
- };
702
- var Indicators = function Indicators(_ref19) {
675
+ }
676
+ ;
677
+ function Indicators({
678
+ items,
679
+ styles,
680
+ Children,
681
+ inverted
682
+ }) {
703
683
  var _ref8 = arguments[0],
704
684
  _ref16;
705
- var items = _ref19.items,
706
- styles = _ref19.styles,
707
- Children = _ref19.Children,
708
- inverted = _ref19.inverted;
709
- var SIndicators = _flexBox.Box;
685
+ const SIndicators = _baseComponents.Box;
710
686
  if (Children.origin) {
711
687
  var _ref15;
712
- return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref15.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
713
- "innerOffset": true
714
- }, _ref8))), /*#__PURE__*/_react["default"].createElement(Children, _ref15.cn("Children", {})));
688
+ return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SIndicators, _ref15.cn("SIndicators", {
689
+ ...(0, _core.assignProps)({
690
+ "innerOffset": true
691
+ }, _ref8)
692
+ }), /*#__PURE__*/_react.default.createElement(Children, _ref15.cn("Children", {})));
715
693
  }
716
- return _ref16 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref16.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
717
- "invertOutline": inverted
718
- }, _ref8))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
719
- return /*#__PURE__*/_react["default"].createElement(Carousel.Indicator, (0, _extends2["default"])({
720
- key: index
721
- }, item, {
722
- inverted: inverted
723
- }));
724
- }));
725
- };
726
- var Indicator = function Indicator(_ref20) {
694
+ return _ref16 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SIndicators, _ref16.cn("SIndicators", {
695
+ ...(0, _core.assignProps)({
696
+ "invertOutline": inverted
697
+ }, _ref8)
698
+ }), items?.map((item, index) => /*#__PURE__*/_react.default.createElement(Carousel.Indicator, (0, _extends2.default)({
699
+ key: index
700
+ }, item, {
701
+ inverted: inverted
702
+ }))));
703
+ }
704
+ ;
705
+ function Indicator({
706
+ styles,
707
+ Children,
708
+ inverted
709
+ }) {
727
710
  var _ref9 = arguments[0],
728
711
  _ref17;
729
- var styles = _ref20.styles,
730
- Children = _ref20.Children,
731
- inverted = _ref20.inverted;
732
- var SIndicator = _flexBox.Box;
733
- return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicator, _ref17.cn("SIndicator", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref9))), /*#__PURE__*/_react["default"].createElement(Children, _ref17.cn("Children", {})));
734
- };
735
- var Carousel = (0, _core.createComponent)(CarouselRoot, {
736
- Container: Container,
737
- ContentBox: ContentBox,
738
- Indicators: Indicators,
739
- Indicator: Indicator,
740
- Item: Item,
741
- Prev: Prev,
742
- Next: Next
712
+ const SIndicator = _baseComponents.Box;
713
+ return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SIndicator, _ref17.cn("SIndicator", {
714
+ ...(0, _core.assignProps)({}, _ref9)
715
+ }), /*#__PURE__*/_react.default.createElement(Children, _ref17.cn("Children", {})));
716
+ }
717
+ ;
718
+ const Carousel = (0, _core.createComponent)(CarouselRoot, {
719
+ Container,
720
+ ContentBox,
721
+ Indicators,
722
+ Indicator,
723
+ Item,
724
+ Prev,
725
+ Next
743
726
  });
744
- var _default = exports["default"] = Carousel;
727
+ var _default = exports.default = Carousel;
745
728
  //# sourceMappingURL=Carousel.js.map