@semcore/carousel 3.50.0-prerelease.0 → 3.50.0-prerelease.4
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.
- package/lib/cjs/Carousel.js +178 -165
- package/lib/cjs/Carousel.js.map +1 -1
- package/lib/cjs/Carousel.types.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/carousel.shadow.css +46 -44
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +5 -4
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/cjs/translations/de.json +1 -3
- package/lib/cjs/translations/en.json +1 -3
- package/lib/cjs/translations/es.json +1 -3
- package/lib/cjs/translations/fr.json +1 -3
- package/lib/cjs/translations/it.json +1 -3
- package/lib/cjs/translations/ja.json +1 -3
- package/lib/cjs/translations/ko.json +1 -3
- package/lib/cjs/translations/nl.json +1 -3
- package/lib/cjs/translations/pl.json +1 -3
- package/lib/cjs/translations/pt.json +1 -3
- package/lib/cjs/translations/sv.json +1 -3
- package/lib/cjs/translations/tr.json +1 -3
- package/lib/cjs/translations/vi.json +1 -3
- package/lib/cjs/translations/zh.json +1 -3
- package/lib/es6/Carousel.js +162 -152
- package/lib/es6/Carousel.js.map +1 -1
- package/lib/es6/Carousel.types.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/carousel.shadow.css +46 -44
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/translations/de.json +1 -3
- package/lib/es6/translations/en.json +1 -3
- package/lib/es6/translations/es.json +1 -3
- package/lib/es6/translations/fr.json +1 -3
- package/lib/es6/translations/it.json +1 -3
- package/lib/es6/translations/ja.json +1 -3
- package/lib/es6/translations/ko.json +1 -3
- package/lib/es6/translations/nl.json +1 -3
- package/lib/es6/translations/pl.json +1 -3
- package/lib/es6/translations/pt.json +1 -3
- package/lib/es6/translations/sv.json +1 -3
- package/lib/es6/translations/tr.json +1 -3
- package/lib/es6/translations/vi.json +1 -3
- package/lib/es6/translations/zh.json +1 -3
- package/lib/esm/Carousel.mjs +160 -148
- package/lib/esm/index.mjs +0 -1
- package/lib/esm/style/carousel.shadow.css +46 -44
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/esm/translations/de.json.mjs +1 -3
- package/lib/esm/translations/en.json.mjs +1 -3
- package/lib/esm/translations/es.json.mjs +1 -3
- package/lib/esm/translations/fr.json.mjs +1 -3
- package/lib/esm/translations/it.json.mjs +1 -3
- package/lib/esm/translations/ja.json.mjs +1 -3
- package/lib/esm/translations/ko.json.mjs +1 -3
- package/lib/esm/translations/nl.json.mjs +1 -3
- package/lib/esm/translations/pl.json.mjs +1 -3
- package/lib/esm/translations/pt.json.mjs +1 -3
- package/lib/esm/translations/sv.json.mjs +1 -3
- package/lib/esm/translations/tr.json.mjs +1 -3
- package/lib/esm/translations/vi.json.mjs +1 -3
- package/lib/esm/translations/zh.json.mjs +1 -3
- package/lib/types/Carousel.d.ts +1 -1
- package/lib/types/Carousel.types.d.ts +12 -4
- package/lib/types/translations/__intergalactic-dynamic-locales.d.ts +0 -28
- package/package.json +8 -8
- package/src/style/carousel.shadow.css +11 -11
- package/lib/esm/Carousel.types.mjs +0 -1
package/lib/esm/Carousel.mjs
CHANGED
|
@@ -3,51 +3,55 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
3
3
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
4
4
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
5
5
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
6
|
-
import
|
|
6
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
7
7
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
8
9
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
-
import { sstyled
|
|
10
|
-
import {
|
|
10
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
11
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
12
|
+
import React from "react";
|
|
11
13
|
import Button from "@semcore/button";
|
|
12
|
-
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
13
|
-
import { findAllComponents } from "@semcore/core/lib/utils/findComponent";
|
|
14
|
-
import logger from "@semcore/core/lib/utils/logger";
|
|
15
|
-
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
16
|
-
import ChevronLeft from "@semcore/icon/ChevronLeft/l";
|
|
17
|
-
import ChevronRight from "@semcore/icon/ChevronRight/l";
|
|
18
14
|
import Modal from "@semcore/modal";
|
|
19
|
-
import
|
|
15
|
+
import { Flex, Box } from "@semcore/flex-box";
|
|
16
|
+
import ChevronRight from "@semcore/icon/ChevronRight/l";
|
|
17
|
+
import ChevronLeft from "@semcore/icon/ChevronLeft/l";
|
|
18
|
+
import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
|
|
19
|
+
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
20
20
|
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
21
|
+
import logger from "@semcore/utils/lib/logger";
|
|
22
|
+
import { findAllComponents } from "@semcore/utils/lib/findComponent";
|
|
23
|
+
import { createBreakpoints } from "@semcore/breakpoints";
|
|
24
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
21
25
|
/*!__reshadow-styles__:"./style/carousel.shadow.css"*/
|
|
22
26
|
var style = (
|
|
23
27
|
/*__reshadow_css_start__*/
|
|
24
28
|
(sstyled.insert(
|
|
25
29
|
/*__inner_css_start__*/
|
|
26
|
-
'.
|
|
30
|
+
'.___SCarousel_1a2c8_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_1a2c8_gg_{display:flex;transition:transform var(--duration_1a2c8) ease-in-out}.___SContentBox_1a2c8_gg_,.___SModalBox_1a2c8_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px))}.___SContentBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after,.___SModalBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}@supports (color:color(display-p3 0 0 0)){.___SContentBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after,.___SModalBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SContentBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after,.___SModalBox_1a2c8_gg_:has(.___SItem_1a2c8_gg_.__keyboardFocused_1a2c8_gg_):after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SModalContainer_1a2c8_gg_{display:flex;transition:transform var(--duration_1a2c8) ease-in-out}.___SItem_1a2c8_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1a2c8);border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px));overflow:hidden;outline:0}.___SItem_1a2c8_gg_.__zoomIn_1a2c8_gg_{cursor:zoom-in}.___SItem_1a2c8_gg_.__zoomOut_1a2c8_gg_{cursor:zoom-out}.___SIndicators_1a2c8_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_1a2c8_gg_.__keyboardFocused_1a2c8_gg_:after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px);top:0;left:3px}@supports (color:color(display-p3 0 0 0)){.___SIndicators_1a2c8_gg_.__keyboardFocused_1a2c8_gg_:after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SIndicators_1a2c8_gg_.__keyboardFocused_1a2c8_gg_:after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SIndicator_1a2c8_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385));opacity:var(--intergalactic-disabled-opacity, 0.4);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@supports (color:color(display-p3 0 0 0)){.___SIndicator_1a2c8_gg_{background-color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SIndicator_1a2c8_gg_{background-color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}@media (hover:hover){.___SIndicator_1a2c8_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.4))}}.___SIndicator_1a2c8_gg_.__active_1a2c8_gg_{opacity:1}.___SIndicator_1a2c8_gg_.__inverted_1a2c8_gg_{background-color:var(--intergalactic-icon-primary-invert, rgba(253, 255, 254, 0.808))}@supports (color:color(display-p3 0 0 0)){.___SIndicator_1a2c8_gg_.__inverted_1a2c8_gg_{background-color:var(--intergalactic-icon-primary-invert, rgba(253, 255, 254, 0.808))}@media (color-gamut:p3){.___SIndicator_1a2c8_gg_.__inverted_1a2c8_gg_{background-color:var(--intergalactic-icon-primary-invert, color(display-p3 0.99189 0.99995 0.99683 / 0.808))}}}.___SNext_1a2c8_gg_,.___SPrev_1a2c8_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, rgba(0, 4, 1, 0.526))}.___SNext_1a2c8_gg_ .___SNextButton_1a2c8_gg_ span:has(>svg:only-child),.___SNext_1a2c8_gg_ .___SPrevButton_1a2c8_gg_ span:has(>svg:only-child),.___SPrev_1a2c8_gg_ .___SNextButton_1a2c8_gg_ span:has(>svg:only-child),.___SPrev_1a2c8_gg_ .___SPrevButton_1a2c8_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)}.___SNextButton_1a2c8_gg_:focus-visible,.___SPrevButton_1a2c8_gg_:focus-visible{box-shadow:none}.___SNextButton_1a2c8_gg_:focus-visible:after,.___SPrevButton_1a2c8_gg_:focus-visible:after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px;border-radius:var(--intergalactic-control-rounded, 6px)}@supports (color:color(display-p3 0 0 0)){.___SNextButton_1a2c8_gg_:focus-visible:after,.___SPrevButton_1a2c8_gg_:focus-visible:after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SNextButton_1a2c8_gg_:focus-visible:after,.___SPrevButton_1a2c8_gg_:focus-visible:after{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SPrev_1a2c8_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_1a2c8_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_1a2c8_gg_.__disabled_1a2c8_gg_,.___SPrev_1a2c8_gg_.__disabled_1a2c8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1a2c8_gg_{transition:none}}',
|
|
27
31
|
/*__inner_css_end__*/
|
|
28
|
-
"
|
|
32
|
+
"1a2c8_gg_"
|
|
29
33
|
), /*__reshadow_css_end__*/
|
|
30
34
|
{
|
|
31
|
-
"__SCarousel": "
|
|
32
|
-
"__SContainer": "
|
|
33
|
-
"--duration": "--
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"_active": "
|
|
43
|
-
"_inverted": "
|
|
44
|
-
"__SPrev": "
|
|
45
|
-
"__SNext": "
|
|
46
|
-
"_disabled": "
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"__SPrevButton": "
|
|
50
|
-
"__SNextButton": "
|
|
35
|
+
"__SCarousel": "___SCarousel_1a2c8_gg_",
|
|
36
|
+
"__SContainer": "___SContainer_1a2c8_gg_",
|
|
37
|
+
"--duration": "--duration_1a2c8",
|
|
38
|
+
"__SModalContainer": "___SModalContainer_1a2c8_gg_",
|
|
39
|
+
"__SItem": "___SItem_1a2c8_gg_",
|
|
40
|
+
"--transform": "--transform_1a2c8",
|
|
41
|
+
"_zoomIn": "__zoomIn_1a2c8_gg_",
|
|
42
|
+
"_zoomOut": "__zoomOut_1a2c8_gg_",
|
|
43
|
+
"__SIndicators": "___SIndicators_1a2c8_gg_",
|
|
44
|
+
"_keyboardFocused": "__keyboardFocused_1a2c8_gg_",
|
|
45
|
+
"__SIndicator": "___SIndicator_1a2c8_gg_",
|
|
46
|
+
"_active": "__active_1a2c8_gg_",
|
|
47
|
+
"_inverted": "__inverted_1a2c8_gg_",
|
|
48
|
+
"__SPrev": "___SPrev_1a2c8_gg_",
|
|
49
|
+
"__SNext": "___SNext_1a2c8_gg_",
|
|
50
|
+
"_disabled": "__disabled_1a2c8_gg_",
|
|
51
|
+
"__SContentBox": "___SContentBox_1a2c8_gg_",
|
|
52
|
+
"__SModalBox": "___SModalBox_1a2c8_gg_",
|
|
53
|
+
"__SPrevButton": "___SPrevButton_1a2c8_gg_",
|
|
54
|
+
"__SNextButton": "___SNextButton_1a2c8_gg_"
|
|
51
55
|
})
|
|
52
56
|
);
|
|
53
57
|
var MAP_TRANSFORM = {
|
|
@@ -60,18 +64,20 @@ var BreakPoints = createBreakpoints(media);
|
|
|
60
64
|
var isSmallScreen = function isSmallScreen2(index) {
|
|
61
65
|
return index === 1;
|
|
62
66
|
};
|
|
63
|
-
var CarouselRoot = /* @__PURE__ */
|
|
67
|
+
var CarouselRoot = /* @__PURE__ */ function(_Component) {
|
|
68
|
+
_inherits(CarouselRoot2, _Component);
|
|
69
|
+
var _super = _createSuper(CarouselRoot2);
|
|
64
70
|
function CarouselRoot2(props) {
|
|
65
|
-
var
|
|
71
|
+
var _ref20, _props$index;
|
|
66
72
|
var _this;
|
|
67
73
|
_classCallCheck(this, CarouselRoot2);
|
|
68
|
-
_this =
|
|
69
|
-
_defineProperty(_this, "defaultItemsCount", 0);
|
|
70
|
-
_defineProperty(_this, "refCarousel", /* @__PURE__ */ React.createRef());
|
|
71
|
-
_defineProperty(_this, "refContainer", /* @__PURE__ */ React.createRef());
|
|
72
|
-
_defineProperty(_this, "refModalContainer", /* @__PURE__ */ React.createRef());
|
|
73
|
-
_defineProperty(_this, "_touchStartCoord", -1);
|
|
74
|
-
_defineProperty(_this, "handlerKeyDown", function(e) {
|
|
74
|
+
_this = _super.call(this, props);
|
|
75
|
+
_defineProperty(_assertThisInitialized(_this), "defaultItemsCount", 0);
|
|
76
|
+
_defineProperty(_assertThisInitialized(_this), "refCarousel", /* @__PURE__ */ React.createRef());
|
|
77
|
+
_defineProperty(_assertThisInitialized(_this), "refContainer", /* @__PURE__ */ React.createRef());
|
|
78
|
+
_defineProperty(_assertThisInitialized(_this), "refModalContainer", /* @__PURE__ */ React.createRef());
|
|
79
|
+
_defineProperty(_assertThisInitialized(_this), "_touchStartCoord", -1);
|
|
80
|
+
_defineProperty(_assertThisInitialized(_this), "handlerKeyDown", function(e) {
|
|
75
81
|
var firstSlide = 1;
|
|
76
82
|
var lastSlide = _this.state.items.length + 1;
|
|
77
83
|
switch (e.key) {
|
|
@@ -105,7 +111,7 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
105
111
|
_this.handleToggleZoomModal();
|
|
106
112
|
}
|
|
107
113
|
});
|
|
108
|
-
_defineProperty(_this, "toggleItem", function(item) {
|
|
114
|
+
_defineProperty(_assertThisInitialized(_this), "toggleItem", function(item) {
|
|
109
115
|
var removeItem = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
110
116
|
_this.setState(function(prevState) {
|
|
111
117
|
var newItems = removeItem ? prevState.items.filter(function(element) {
|
|
@@ -119,7 +125,7 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
119
125
|
_this.defaultItemsCount++;
|
|
120
126
|
}
|
|
121
127
|
});
|
|
122
|
-
_defineProperty(_this, "transformContainer", function() {
|
|
128
|
+
_defineProperty(_assertThisInitialized(_this), "transformContainer", function() {
|
|
123
129
|
var transform = _this.state.selectedIndex * -1 * 100;
|
|
124
130
|
if (_this.refContainer.current) {
|
|
125
131
|
_this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
|
|
@@ -128,7 +134,7 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
128
134
|
_this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
|
|
129
135
|
}
|
|
130
136
|
});
|
|
131
|
-
_defineProperty(_this, "getDirection", function(currentIndex, nextIndex) {
|
|
137
|
+
_defineProperty(_assertThisInitialized(_this), "getDirection", function(currentIndex, nextIndex) {
|
|
132
138
|
var bounded = _this.asProps.bounded;
|
|
133
139
|
if (bounded) {
|
|
134
140
|
return currentIndex < nextIndex ? "right" : "left";
|
|
@@ -155,7 +161,7 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
155
161
|
var left = tmpArr.indexOf(nextIndex);
|
|
156
162
|
return left - tmpCurrentIndex < 0 ? "left" : "right";
|
|
157
163
|
});
|
|
158
|
-
_defineProperty(_this, "slideToValue", function(nextIndex) {
|
|
164
|
+
_defineProperty(_assertThisInitialized(_this), "slideToValue", function(nextIndex) {
|
|
159
165
|
var selectedIndex = _this.state.selectedIndex;
|
|
160
166
|
var direction = selectedIndex < nextIndex ? "right" : "left";
|
|
161
167
|
var diff = Math.abs(selectedIndex - nextIndex);
|
|
@@ -164,7 +170,7 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
164
170
|
diff--;
|
|
165
171
|
}
|
|
166
172
|
});
|
|
167
|
-
_defineProperty(_this, "transformItem", function(direction) {
|
|
173
|
+
_defineProperty(_assertThisInitialized(_this), "transformItem", function(direction) {
|
|
168
174
|
var bounded = _this.asProps.bounded;
|
|
169
175
|
var _this$state = _this.state, items = _this$state.items, selectedIndex = _this$state.selectedIndex;
|
|
170
176
|
var maxIndexIndicator = items.length - 1;
|
|
@@ -207,12 +213,12 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
207
213
|
return;
|
|
208
214
|
}
|
|
209
215
|
});
|
|
210
|
-
_defineProperty(_this, "bindHandlerClick", function(direction) {
|
|
216
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(direction) {
|
|
211
217
|
return function() {
|
|
212
218
|
_this.transformItem(direction);
|
|
213
219
|
};
|
|
214
220
|
});
|
|
215
|
-
_defineProperty(_this, "bindHandlerClickIndicator", function(value) {
|
|
221
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerClickIndicator", function(value) {
|
|
216
222
|
return function() {
|
|
217
223
|
var _this$state2 = _this.state, selectedIndex = _this$state2.selectedIndex, items = _this$state2.items;
|
|
218
224
|
if (!_this.isControlled && value !== selectedIndex) {
|
|
@@ -222,10 +228,10 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
222
228
|
_this.handlers.index(value);
|
|
223
229
|
};
|
|
224
230
|
});
|
|
225
|
-
_defineProperty(_this, "handlerTouchStart", function(e) {
|
|
231
|
+
_defineProperty(_assertThisInitialized(_this), "handlerTouchStart", function(e) {
|
|
226
232
|
_this._touchStartCoord = e.changedTouches[0].clientX;
|
|
227
233
|
});
|
|
228
|
-
_defineProperty(_this, "handlerTouchEnd", function(e) {
|
|
234
|
+
_defineProperty(_assertThisInitialized(_this), "handlerTouchEnd", function(e) {
|
|
229
235
|
var touchEndCoord = e.changedTouches[0].clientX;
|
|
230
236
|
var delta = touchEndCoord - _this._touchStartCoord;
|
|
231
237
|
if (delta > 50) {
|
|
@@ -234,18 +240,16 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
234
240
|
_this.transformItem("right");
|
|
235
241
|
}
|
|
236
242
|
});
|
|
237
|
-
_defineProperty(_this, "handleToggleZoomModal", function() {
|
|
243
|
+
_defineProperty(_assertThisInitialized(_this), "handleToggleZoomModal", function() {
|
|
238
244
|
_this.setState(function(prevState) {
|
|
239
245
|
return {
|
|
240
246
|
isOpenZoom: !prevState.isOpenZoom
|
|
241
247
|
};
|
|
242
248
|
}, function() {
|
|
243
|
-
|
|
244
|
-
_this.transformContainer();
|
|
245
|
-
}
|
|
249
|
+
_this.state.isOpenZoom && _this.transformContainer();
|
|
246
250
|
});
|
|
247
251
|
});
|
|
248
|
-
_defineProperty(_this, "bindHandlerKeydownControl", function(direction) {
|
|
252
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerKeydownControl", function(direction) {
|
|
249
253
|
return function(e) {
|
|
250
254
|
if (e.key === "Enter" || e.key === " ") {
|
|
251
255
|
e.preventDefault();
|
|
@@ -257,22 +261,21 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
257
261
|
_this.state = {
|
|
258
262
|
items: [],
|
|
259
263
|
isOpenZoom: false,
|
|
260
|
-
selectedIndex: (
|
|
264
|
+
selectedIndex: (_ref20 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref20 !== void 0 ? _ref20 : 0
|
|
261
265
|
};
|
|
262
266
|
return _this;
|
|
263
267
|
}
|
|
264
|
-
|
|
265
|
-
return _createClass(CarouselRoot2, [{
|
|
268
|
+
_createClass(CarouselRoot2, [{
|
|
266
269
|
key: "uncontrolledProps",
|
|
267
270
|
value: function uncontrolledProps() {
|
|
268
271
|
var _this2 = this;
|
|
269
272
|
return {
|
|
270
273
|
index: [null, function(_index) {
|
|
271
274
|
var _this2$refCarousel$cu;
|
|
272
|
-
(_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0
|
|
275
|
+
(_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0 ? void 0 : _this2$refCarousel$cu.blur();
|
|
273
276
|
setTimeout(function() {
|
|
274
277
|
var _this2$refCarousel$cu2;
|
|
275
|
-
(_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0
|
|
278
|
+
(_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 ? void 0 : _this2$refCarousel$cu2.focus();
|
|
276
279
|
}, 0);
|
|
277
280
|
}]
|
|
278
281
|
};
|
|
@@ -318,7 +321,7 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
318
321
|
}
|
|
319
322
|
}, {
|
|
320
323
|
key: "getItemProps",
|
|
321
|
-
value: function getItemProps(
|
|
324
|
+
value: function getItemProps(props, index) {
|
|
322
325
|
var zoom = this.asProps.zoom;
|
|
323
326
|
var isCurrent = this.isSelected(index);
|
|
324
327
|
return {
|
|
@@ -342,10 +345,10 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
342
345
|
disabled = selectedIndex === 0;
|
|
343
346
|
}
|
|
344
347
|
return {
|
|
345
|
-
|
|
346
|
-
|
|
348
|
+
onClick: this.bindHandlerClick("left"),
|
|
349
|
+
onKeyDown: this.bindHandlerKeydownControl("left"),
|
|
347
350
|
disabled,
|
|
348
|
-
|
|
351
|
+
label: getI18nText("prev"),
|
|
349
352
|
"aria-controls": "igc-".concat(uid, "-carousel")
|
|
350
353
|
};
|
|
351
354
|
}
|
|
@@ -359,10 +362,10 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
359
362
|
disabled = selectedIndex === items.length - 1;
|
|
360
363
|
}
|
|
361
364
|
return {
|
|
362
|
-
|
|
363
|
-
|
|
365
|
+
onClick: this.bindHandlerClick("right"),
|
|
366
|
+
onKeyDown: this.bindHandlerKeydownControl("right"),
|
|
364
367
|
disabled,
|
|
365
|
-
|
|
368
|
+
label: getI18nText("next"),
|
|
366
369
|
"aria-controls": "igc-".concat(uid, "-carousel")
|
|
367
370
|
};
|
|
368
371
|
}
|
|
@@ -373,15 +376,14 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
373
376
|
var items = this.state.items;
|
|
374
377
|
var getI18nText = this.asProps.getI18nText;
|
|
375
378
|
return {
|
|
376
|
-
|
|
379
|
+
items: items.map(function(item, key) {
|
|
377
380
|
return {
|
|
378
381
|
active: _this4.isSelected(key),
|
|
379
382
|
onClick: _this4.bindHandlerClickIndicator(key),
|
|
380
383
|
key
|
|
381
384
|
};
|
|
382
385
|
}),
|
|
383
|
-
|
|
384
|
-
"tabIndex": 0,
|
|
386
|
+
role: "tablist",
|
|
385
387
|
"aria-label": getI18nText("slides")
|
|
386
388
|
};
|
|
387
389
|
}
|
|
@@ -391,7 +393,7 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
391
393
|
var isCurrent = this.isSelected(index);
|
|
392
394
|
var getI18nText = this.asProps.getI18nText;
|
|
393
395
|
return {
|
|
394
|
-
|
|
396
|
+
role: "tab",
|
|
395
397
|
"aria-selected": isCurrent,
|
|
396
398
|
"aria-controls": "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
|
|
397
399
|
"aria-label": getI18nText("slide", {
|
|
@@ -432,22 +434,21 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
432
434
|
}, {
|
|
433
435
|
key: "renderModal",
|
|
434
436
|
value: function renderModal(isSmall, ComponentItems) {
|
|
435
|
-
var _ref = this.asProps,
|
|
437
|
+
var _ref = this.asProps, _ref10, _this5 = this;
|
|
436
438
|
var SModalContainer = Box;
|
|
437
439
|
var SModalBox = Box;
|
|
438
|
-
var SImageBoxContainer = Box;
|
|
439
440
|
var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, zoomWidth = _this$asProps3.zoomWidth;
|
|
440
441
|
var isOpenZoom = this.state.isOpenZoom;
|
|
441
|
-
return
|
|
442
|
+
return _ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(Modal, _ref10.cn("Modal", {
|
|
442
443
|
"visible": isOpenZoom,
|
|
443
444
|
"onClose": this.handleToggleZoomModal,
|
|
444
445
|
"ghost": true,
|
|
445
446
|
"closable": !isSmall
|
|
446
|
-
}), /* @__PURE__ */ React.createElement(Flex,
|
|
447
|
+
}), /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
|
|
447
448
|
"direction": isSmall ? "column" : "row"
|
|
448
449
|
}), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Prev, {
|
|
449
450
|
inverted: true
|
|
450
|
-
}), /* @__PURE__ */ React.createElement(
|
|
451
|
+
}), /* @__PURE__ */ React.createElement(SModalBox, _ref10.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref10.cn("SModalContainer", _objectSpread({}, assignProps({
|
|
451
452
|
"aria-live": "polite",
|
|
452
453
|
"use:duration": "".concat(duration, "ms"),
|
|
453
454
|
"ref": this.refModalContainer,
|
|
@@ -464,7 +465,7 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
464
465
|
zoomOut: true,
|
|
465
466
|
transform: _this5.isSelected(i) ? _this5.getTransform() : void 0
|
|
466
467
|
}));
|
|
467
|
-
})))
|
|
468
|
+
}))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
|
|
468
469
|
"justifyContent": "center",
|
|
469
470
|
"mt": 2
|
|
470
471
|
}), /* @__PURE__ */ React.createElement(Carousel.Prev, {
|
|
@@ -480,37 +481,40 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
480
481
|
}, {
|
|
481
482
|
key: "render",
|
|
482
483
|
value: function render() {
|
|
483
|
-
var _ref2 = this.asProps,
|
|
484
|
+
var _ref2 = this.asProps, _ref11, _this6 = this;
|
|
484
485
|
var SCarousel = Box;
|
|
485
|
-
var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, uid = _this$asProps4.uid, hasZoom = _this$asProps4.zoom, ariaLabel = _this$asProps4["aria-label"],
|
|
486
|
+
var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, uid = _this$asProps4.uid, hasZoom = _this$asProps4.zoom, ariaLabel = _this$asProps4["aria-label"], ariaRoledescription = _this$asProps4["aria-roledescription"], indicators = _this$asProps4.indicators;
|
|
486
487
|
var ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
|
|
487
488
|
var Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
|
|
488
|
-
return
|
|
489
|
+
return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref11.cn("SCarousel", _objectSpread({}, assignProps({
|
|
489
490
|
"role": "region",
|
|
490
|
-
"
|
|
491
|
+
"roledescription": "carousel",
|
|
491
492
|
"onKeyDown": this.handlerKeyDown,
|
|
492
493
|
"onTouchStart": this.handlerTouchStart,
|
|
493
494
|
"onTouchEnd": this.handlerTouchEnd,
|
|
494
495
|
"ref": this.refCarousel,
|
|
495
|
-
"id": "igc-".concat(uid, "-carousel")
|
|
496
|
-
|
|
496
|
+
"id": "igc-".concat(uid, "-carousel"),
|
|
497
|
+
"aria-roledescription": ariaRoledescription
|
|
498
|
+
}, _ref2))), Controls.length === 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, _ref11.cn("Flex", {}), /* @__PURE__ */ React.createElement(Carousel.Prev, null), /* @__PURE__ */ React.createElement(Carousel.ContentBox, null, /* @__PURE__ */ React.createElement(Carousel.Container, {
|
|
497
499
|
"aria-label": ariaLabel
|
|
498
|
-
}, /* @__PURE__ */ React.createElement(Children,
|
|
500
|
+
}, /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})))), /* @__PURE__ */ React.createElement(Carousel.Next, null)), indicators === "default" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null), indicators === "preview" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null, function() {
|
|
499
501
|
return ComponentItems.map(function(item, index) {
|
|
500
502
|
return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({}, item.props, {
|
|
501
503
|
key: item.key,
|
|
502
|
-
w:
|
|
503
|
-
|
|
504
|
+
w: 100,
|
|
505
|
+
h: 100,
|
|
506
|
+
"aria-roledescription": "slide",
|
|
504
507
|
active: _this6.isSelected(index),
|
|
505
508
|
onClick: _this6.bindHandlerClickIndicator(index)
|
|
506
509
|
}));
|
|
507
510
|
});
|
|
508
|
-
})) : /* @__PURE__ */ React.createElement(Children,
|
|
511
|
+
})) : /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref11.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, function(mediaIndex) {
|
|
509
512
|
return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
|
|
510
513
|
})));
|
|
511
514
|
}
|
|
512
515
|
}]);
|
|
513
|
-
|
|
516
|
+
return CarouselRoot2;
|
|
517
|
+
}(Component);
|
|
514
518
|
_defineProperty(CarouselRoot, "displayName", "Carousel");
|
|
515
519
|
_defineProperty(CarouselRoot, "defaultProps", {
|
|
516
520
|
defaultIndex: 0,
|
|
@@ -523,43 +527,43 @@ _defineProperty(CarouselRoot, "defaultProps", {
|
|
|
523
527
|
});
|
|
524
528
|
_defineProperty(CarouselRoot, "style", style);
|
|
525
529
|
_defineProperty(CarouselRoot, "enhance", enhance);
|
|
526
|
-
function
|
|
527
|
-
var _ref3 = arguments[0],
|
|
530
|
+
var Container = function Container2(props) {
|
|
531
|
+
var _ref3 = arguments[0], _ref12;
|
|
528
532
|
var SContainer = Box;
|
|
529
533
|
var styles = props.styles, duration = props.duration;
|
|
530
|
-
return
|
|
534
|
+
return _ref12 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainer, _ref12.cn("SContainer", _objectSpread({}, assignProps({
|
|
531
535
|
"use:duration": "".concat(duration, "ms"),
|
|
532
536
|
"aria-live": "polite"
|
|
533
537
|
}, _ref3))));
|
|
534
|
-
}
|
|
535
|
-
function
|
|
536
|
-
var _ref4 = arguments[0],
|
|
538
|
+
};
|
|
539
|
+
var ContentBox = function ContentBox2(props) {
|
|
540
|
+
var _ref4 = arguments[0], _ref13;
|
|
537
541
|
var SContentBox = Box;
|
|
538
542
|
var styles = props.styles;
|
|
539
|
-
return
|
|
540
|
-
}
|
|
541
|
-
var Item = /* @__PURE__ */
|
|
543
|
+
return _ref13 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref13.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
|
|
544
|
+
};
|
|
545
|
+
var Item = /* @__PURE__ */ function(_Component2) {
|
|
546
|
+
_inherits(Item2, _Component2);
|
|
547
|
+
var _super2 = _createSuper(Item2);
|
|
542
548
|
function Item2() {
|
|
543
549
|
var _this7;
|
|
544
550
|
_classCallCheck(this, Item2);
|
|
545
551
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
546
552
|
args[_key] = arguments[_key];
|
|
547
553
|
}
|
|
548
|
-
_this7 =
|
|
549
|
-
_defineProperty(_this7, "refItem", /* @__PURE__ */ React.createRef());
|
|
554
|
+
_this7 = _super2.call.apply(_super2, [this].concat(args));
|
|
555
|
+
_defineProperty(_assertThisInitialized(_this7), "refItem", /* @__PURE__ */ React.createRef());
|
|
556
|
+
_defineProperty(_assertThisInitialized(_this7), "keepFocusTimeout", void 0);
|
|
550
557
|
return _this7;
|
|
551
558
|
}
|
|
552
|
-
|
|
553
|
-
return _createClass(Item2, [{
|
|
559
|
+
_createClass(Item2, [{
|
|
554
560
|
key: "componentDidMount",
|
|
555
561
|
value: function componentDidMount() {
|
|
556
562
|
var _this$props = this.props, toggleItem = _this$props.toggleItem, transform = _this$props.transform;
|
|
557
563
|
var refItem = this.refItem.current;
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
});
|
|
562
|
-
}
|
|
564
|
+
toggleItem && refItem && toggleItem({
|
|
565
|
+
node: refItem
|
|
566
|
+
});
|
|
563
567
|
if (transform && refItem) {
|
|
564
568
|
refItem.style.transform = "translateX(".concat(transform, "%)");
|
|
565
569
|
}
|
|
@@ -569,28 +573,43 @@ var Item = /* @__PURE__ */ (function(_Component2) {
|
|
|
569
573
|
value: function componentWillUnmount() {
|
|
570
574
|
var toggleItem = this.props.toggleItem;
|
|
571
575
|
var refItem = this.refItem.current;
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
}
|
|
576
|
+
toggleItem && refItem && toggleItem({
|
|
577
|
+
node: refItem
|
|
578
|
+
}, true);
|
|
579
|
+
clearTimeout(this.keepFocusTimeout);
|
|
577
580
|
}
|
|
578
581
|
}, {
|
|
579
582
|
key: "componentDidUpdate",
|
|
580
583
|
value: function componentDidUpdate(prevProps) {
|
|
584
|
+
var _this8 = this;
|
|
585
|
+
clearTimeout(this.keepFocusTimeout);
|
|
581
586
|
var transform = this.props.transform;
|
|
582
587
|
var refItem = this.refItem.current;
|
|
583
588
|
if (prevProps.transform !== transform && refItem) {
|
|
584
589
|
refItem.style.transform = "translateX(".concat(transform, "%)");
|
|
585
590
|
}
|
|
591
|
+
if (this.props.current) {
|
|
592
|
+
this.keepFocusTimeout = setTimeout(function() {
|
|
593
|
+
var _document$activeEleme;
|
|
594
|
+
if (document.activeElement !== refItem && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.dataset.carousel) === (refItem === null || refItem === void 0 ? void 0 : refItem.dataset.carousel)) {
|
|
595
|
+
refItem === null || refItem === void 0 ? void 0 : refItem.focus();
|
|
596
|
+
}
|
|
597
|
+
}, 100);
|
|
598
|
+
}
|
|
599
|
+
if (prevProps.isOpenZoom === true && this.props.isOpenZoom === false && this.props.current && !this.props.zoomOut) {
|
|
600
|
+
this.keepFocusTimeout = setTimeout(function() {
|
|
601
|
+
var _this8$refItem$curren;
|
|
602
|
+
(_this8$refItem$curren = _this8.refItem.current) === null || _this8$refItem$curren === void 0 ? void 0 : _this8$refItem$curren.focus();
|
|
603
|
+
}, 200);
|
|
604
|
+
}
|
|
586
605
|
}
|
|
587
606
|
}, {
|
|
588
607
|
key: "render",
|
|
589
608
|
value: function render() {
|
|
590
|
-
var _ref5 = this.asProps,
|
|
609
|
+
var _ref5 = this.asProps, _ref14;
|
|
591
610
|
var _this$props2 = this.props, styles = _this$props2.styles, index = _this$props2.index, uid = _this$props2.uid, current = _this$props2.current, zoomIn = _this$props2.zoomIn, onToggleZoomModal = _this$props2.onToggleZoomModal;
|
|
592
611
|
var SItem = Box;
|
|
593
|
-
return
|
|
612
|
+
return _ref14 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SItem, _ref14.cn("SItem", _objectSpread({}, assignProps({
|
|
594
613
|
"ref": this.refItem,
|
|
595
614
|
"role": "tabpanel",
|
|
596
615
|
"data-carousel": "igc-".concat(uid, "-carousel"),
|
|
@@ -602,69 +621,62 @@ var Item = /* @__PURE__ */ (function(_Component2) {
|
|
|
602
621
|
}, _ref5))));
|
|
603
622
|
}
|
|
604
623
|
}]);
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
624
|
+
return Item2;
|
|
625
|
+
}(Component);
|
|
626
|
+
_defineProperty(Item, "enhance", [keyboardFocusEnhance(false)]);
|
|
627
|
+
var Prev = function Prev2(props) {
|
|
628
|
+
var _ref6 = arguments[0], _ref15;
|
|
608
629
|
var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top = props.top, top = _props$top === void 0 ? 0 : _props$top, inverted = props.inverted;
|
|
609
630
|
var SPrev = Box;
|
|
610
631
|
var SPrevButton = Button;
|
|
611
|
-
return
|
|
632
|
+
return _ref15 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPrev, _ref15.cn("SPrev", _objectSpread({}, assignProps({
|
|
612
633
|
"top": top
|
|
613
|
-
}, _ref6))), children ? /* @__PURE__ */ React.createElement(Children,
|
|
634
|
+
}, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref15.cn("SPrevButton", {
|
|
614
635
|
"addonLeft": ChevronLeft,
|
|
615
636
|
"aria-label": label,
|
|
616
637
|
"theme": inverted ? "invert" : "muted",
|
|
617
638
|
"use": "tertiary",
|
|
618
|
-
"size": "l"
|
|
619
|
-
"innerOutline": true
|
|
639
|
+
"size": "l"
|
|
620
640
|
})));
|
|
621
|
-
}
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
var _ref7 = arguments[0], _ref14;
|
|
641
|
+
};
|
|
642
|
+
var Next = function Next2(props) {
|
|
643
|
+
var _ref7 = arguments[0], _ref16;
|
|
625
644
|
var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top2 = props.top, top = _props$top2 === void 0 ? 0 : _props$top2, inverted = props.inverted;
|
|
626
645
|
var SNext = Box;
|
|
627
646
|
var SNextButton = Button;
|
|
628
|
-
return
|
|
647
|
+
return _ref16 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SNext, _ref16.cn("SNext", _objectSpread({}, assignProps({
|
|
629
648
|
"top": top
|
|
630
|
-
}, _ref7))), children ? /* @__PURE__ */ React.createElement(Children,
|
|
649
|
+
}, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref16.cn("SNextButton", {
|
|
631
650
|
"addonLeft": ChevronRight,
|
|
632
651
|
"aria-label": label,
|
|
633
652
|
"theme": inverted ? "invert" : "muted",
|
|
634
653
|
"use": "tertiary",
|
|
635
|
-
"size": "l"
|
|
636
|
-
"innerOutline": true
|
|
654
|
+
"size": "l"
|
|
637
655
|
})));
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
var
|
|
642
|
-
var items = _ref19.items, styles = _ref19.styles, Children = _ref19.Children, inverted = _ref19.inverted;
|
|
656
|
+
};
|
|
657
|
+
var Indicators = function Indicators2(_ref21) {
|
|
658
|
+
var _ref8 = arguments[0], _ref18;
|
|
659
|
+
var items = _ref21.items, styles = _ref21.styles, Children = _ref21.Children, inverted = _ref21.inverted;
|
|
643
660
|
var SIndicators = Box;
|
|
644
661
|
if (Children.origin) {
|
|
645
|
-
var
|
|
646
|
-
return
|
|
647
|
-
"innerOffset": true
|
|
648
|
-
}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})));
|
|
662
|
+
var _ref17;
|
|
663
|
+
return _ref17 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref17.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
|
|
649
664
|
}
|
|
650
|
-
return
|
|
651
|
-
"invertOutline": inverted
|
|
652
|
-
}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
|
|
665
|
+
return _ref18 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref18.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
|
|
653
666
|
return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
|
|
654
667
|
key: index
|
|
655
668
|
}, item, {
|
|
656
669
|
inverted
|
|
657
670
|
}));
|
|
658
671
|
}));
|
|
659
|
-
}
|
|
660
|
-
;
|
|
661
|
-
function
|
|
662
|
-
var _ref9 = arguments[0],
|
|
663
|
-
var styles =
|
|
672
|
+
};
|
|
673
|
+
Indicators.enhance = [keyboardFocusEnhance()];
|
|
674
|
+
var Indicator = function Indicator2(_ref22) {
|
|
675
|
+
var _ref9 = arguments[0], _ref19;
|
|
676
|
+
var styles = _ref22.styles, Children = _ref22.Children;
|
|
664
677
|
var SIndicator = Box;
|
|
665
|
-
return
|
|
666
|
-
}
|
|
667
|
-
;
|
|
678
|
+
return _ref19 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref19.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref19.cn("Children", {})));
|
|
679
|
+
};
|
|
668
680
|
var Carousel = createComponent(CarouselRoot, {
|
|
669
681
|
Container,
|
|
670
682
|
ContentBox,
|