@fox-dls/carousels 1.0.3 → 1.0.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/.ultra.cache.json +1 -1
- package/dist/index.esm.js +516 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +129 -119
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/tsconfig.build.json +2 -1
- package/tsconfig.json +18 -17
package/dist/index.js
CHANGED
@@ -1,10 +1,17 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
var jsxRuntime = require('react/jsx-runtime');
|
2
|
+
var React = require('react');
|
3
|
+
var styled = require('styled-components');
|
4
|
+
var SwiperCore = require('swiper');
|
5
|
+
var react = require('swiper/react');
|
6
|
+
var ButtonUnstyled = require('@mui/core/ButtonUnstyled');
|
7
|
+
var layout = require('@fox-dls/layout');
|
8
|
+
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
10
|
+
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
12
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
13
|
+
var SwiperCore__default = /*#__PURE__*/_interopDefaultLegacy(SwiperCore);
|
14
|
+
var ButtonUnstyled__default = /*#__PURE__*/_interopDefaultLegacy(ButtonUnstyled);
|
8
15
|
|
9
16
|
function _extends() {
|
10
17
|
_extends = Object.assign || function (target) {
|
@@ -48,15 +55,15 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
48
55
|
return strings;
|
49
56
|
}
|
50
57
|
|
51
|
-
var CarouselSwiper$3 = /*#__PURE__*/
|
58
|
+
var CarouselSwiper$3 = /*#__PURE__*/styled__default["default"](react.Swiper).withConfig({
|
52
59
|
displayName: "styles__CarouselSwiper",
|
53
60
|
componentId: "sc-1sue7gh-1"
|
54
61
|
})(["margin:0px !important;.swiper-wrapper{.swiper-slide{scroll-snap-align:start !important;width:auto !important;}}"]);
|
55
|
-
var CarouselPillContainer = /*#__PURE__*/
|
62
|
+
var CarouselPillContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
56
63
|
displayName: "styles__CarouselPillContainer",
|
57
64
|
componentId: "sc-1sue7gh-2"
|
58
65
|
})(["display:inline-block !important;padding-right:8px !important;padding-top:4px !important;padding-bottom:4px !important;"]);
|
59
|
-
var CarouselPill$1 = /*#__PURE__*/
|
66
|
+
var CarouselPill$1 = /*#__PURE__*/styled__default["default"](ButtonUnstyled__default["default"]).withConfig({
|
60
67
|
displayName: "styles__CarouselPill",
|
61
68
|
componentId: "sc-1sue7gh-3"
|
62
69
|
})(["-webkit-box-pack:center !important;-webkit-box-align:center !important;appearance:none !important;display:inline-flex !important;border-radius:50% !important;border:1px solid rgb(221,221,221) !important;outline:none !important;margin:0px !important;padding:0px !important;color:rgb(34,34,34) !important;cursor:pointer !important;touch-action:manipulation !important;position:relative !important;background:transparent !important;transition:-ms-transform 0.25s ease 0s,-webkit-transform 0.25s ease 0s,transform 0.25s ease 0s !important;align-items:center !important;justify-content:center !important;width:36px !important;height:36px !important;::before{content:'' !important;display:block !important;position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;width:36px !important;height:36px !important;border-radius:50% !important;border:1px solid rgb(221,221,221) !important;}"]);
|
@@ -64,16 +71,16 @@ var CarouselPill$1 = /*#__PURE__*/styled(ButtonUnstyled).withConfig({
|
|
64
71
|
var _templateObject, _templateObject2;
|
65
72
|
|
66
73
|
var _excluded$3 = ["children", "navigation", "title", "controls", "arrows"];
|
67
|
-
|
74
|
+
SwiperCore__default["default"].use([SwiperCore.Navigation]);
|
68
75
|
var PillsCarousel = function PillsCarousel(_ref) {
|
69
76
|
var children = _ref.children,
|
70
77
|
arrows = _ref.arrows,
|
71
78
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
72
79
|
|
73
|
-
var prevRef = useRef(null);
|
74
|
-
var nextRef = useRef(null);
|
80
|
+
var prevRef = React.useRef(null);
|
81
|
+
var nextRef = React.useRef(null);
|
75
82
|
|
76
|
-
var _useState = useState({
|
83
|
+
var _useState = React.useState({
|
77
84
|
progress: 0,
|
78
85
|
isBeginning: true,
|
79
86
|
isEnd: false
|
@@ -81,16 +88,16 @@ var PillsCarousel = function PillsCarousel(_ref) {
|
|
81
88
|
swiperSlides = _useState[0],
|
82
89
|
setSwiperSlides = _useState[1];
|
83
90
|
|
84
|
-
var _useState2 = useState(null),
|
91
|
+
var _useState2 = React.useState(null),
|
85
92
|
swiper = _useState2[0],
|
86
93
|
setSwiper = _useState2[1];
|
87
94
|
|
88
|
-
return jsxs("div", {
|
95
|
+
return jsxRuntime.jsxs("div", {
|
89
96
|
css: "\n display: flex !important;\n position: relative !important;\n min-width: 0px !important;\n ",
|
90
|
-
children: [jsx("div", {
|
91
|
-
css: "\n position: absolute !important;\n left: 0px !important;\n z-index: 3 !important;\n width: 65px !important;\n background: linear-gradient(\n to right,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n " + (swiperSlides.isBeginning && css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: none !important;\n visibility: hidden !important;\n "])))) + "\n ",
|
92
|
-
children: arrows && jsx(CarouselPillContainer, {
|
93
|
-
children: jsx(CarouselPill$1, {
|
97
|
+
children: [jsxRuntime.jsx("div", {
|
98
|
+
css: "\n position: absolute !important;\n left: 0px !important;\n z-index: 3 !important;\n width: 65px !important;\n background: linear-gradient(\n to right,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n " + (swiperSlides.isBeginning && styled.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: none !important;\n visibility: hidden !important;\n "])))) + "\n ",
|
99
|
+
children: arrows && jsxRuntime.jsx(CarouselPillContainer, {
|
100
|
+
children: jsxRuntime.jsx(CarouselPill$1, {
|
94
101
|
left: +true,
|
95
102
|
ref: prevRef,
|
96
103
|
"aria-label": "Previous",
|
@@ -98,18 +105,18 @@ var PillsCarousel = function PillsCarousel(_ref) {
|
|
98
105
|
onClick: function onClick() {
|
99
106
|
return swiper.slidePrev();
|
100
107
|
},
|
101
|
-
children: jsx("span", {
|
108
|
+
children: jsxRuntime.jsx("span", {
|
102
109
|
css: "\n position: relative !important;\n ",
|
103
|
-
children: jsx("svg", {
|
110
|
+
children: jsxRuntime.jsx("svg", {
|
104
111
|
viewBox: "0 0 32 32",
|
105
112
|
xmlns: "http://www.w3.org/2000/svg",
|
106
113
|
"aria-hidden": "true",
|
107
114
|
role: "presentation",
|
108
115
|
focusable: "false",
|
109
116
|
css: "\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 5.33333;\n overflow: visible;\n ",
|
110
|
-
children: jsx("g", {
|
117
|
+
children: jsxRuntime.jsx("g", {
|
111
118
|
fill: "none",
|
112
|
-
children: jsx("path", {
|
119
|
+
children: jsxRuntime.jsx("path", {
|
113
120
|
d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
|
114
121
|
}, void 0)
|
115
122
|
}, void 0)
|
@@ -117,7 +124,7 @@ var PillsCarousel = function PillsCarousel(_ref) {
|
|
117
124
|
}, void 0)
|
118
125
|
}, void 0)
|
119
126
|
}, void 0)
|
120
|
-
}, void 0), jsx(CarouselSwiper$3, _extends({}, props, {
|
127
|
+
}, void 0), jsxRuntime.jsx(CarouselSwiper$3, _extends({}, props, {
|
121
128
|
cssMode: false,
|
122
129
|
slidesPerView: "auto",
|
123
130
|
onInit: function onInit(swiper) {
|
@@ -146,18 +153,18 @@ var PillsCarousel = function PillsCarousel(_ref) {
|
|
146
153
|
isEnd: swiper.isEnd
|
147
154
|
});
|
148
155
|
},
|
149
|
-
children:
|
150
|
-
return jsx(SwiperSlide, {
|
151
|
-
children: jsx("div", {
|
156
|
+
children: React__default["default"].Children.map(children, function (child) {
|
157
|
+
return jsxRuntime.jsx(react.SwiperSlide, {
|
158
|
+
children: jsxRuntime.jsx("div", {
|
152
159
|
css: "\n display: inline-block !important;\n white-space: nowrap !important;\n padding-right: 8px !important;\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n ",
|
153
160
|
children: child
|
154
161
|
}, void 0)
|
155
162
|
}, void 0);
|
156
163
|
})
|
157
|
-
}), void 0), jsx("div", {
|
158
|
-
css: "\n -webkit-box-pack: end !important;\n position: absolute !important;\n right: 0px !important;\n z-index: 3 !important;\n width: 75px !important;\n display: flex !important;\n justify-content: flex-end !important;\n background: linear-gradient(\n to left,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n " + (swiperSlides.isEnd && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: none !important;\n visibility: hidden !important;\n "])))) + "\n ",
|
159
|
-
children: arrows && jsx(CarouselPillContainer, {
|
160
|
-
children: jsx(CarouselPill$1, {
|
164
|
+
}), void 0), jsxRuntime.jsx("div", {
|
165
|
+
css: "\n -webkit-box-pack: end !important;\n position: absolute !important;\n right: 0px !important;\n z-index: 3 !important;\n width: 75px !important;\n display: flex !important;\n justify-content: flex-end !important;\n background: linear-gradient(\n to left,\n rgb(255, 255, 255) 56.77%,\n rgba(255, 255, 255, 0) 94.47%\n ) !important;\n " + (swiperSlides.isEnd && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: none !important;\n visibility: hidden !important;\n "])))) + "\n ",
|
166
|
+
children: arrows && jsxRuntime.jsx(CarouselPillContainer, {
|
167
|
+
children: jsxRuntime.jsx(CarouselPill$1, {
|
161
168
|
right: +true,
|
162
169
|
"aria-label": "Next",
|
163
170
|
type: "button",
|
@@ -165,18 +172,18 @@ var PillsCarousel = function PillsCarousel(_ref) {
|
|
165
172
|
onClick: function onClick() {
|
166
173
|
return swiper.slideNext();
|
167
174
|
},
|
168
|
-
children: jsx("span", {
|
175
|
+
children: jsxRuntime.jsx("span", {
|
169
176
|
css: "\n position: relative !important;\n ",
|
170
|
-
children: jsx("svg", {
|
177
|
+
children: jsxRuntime.jsx("svg", {
|
171
178
|
viewBox: "0 0 32 32",
|
172
179
|
xmlns: "http://www.w3.org/2000/svg",
|
173
180
|
"aria-hidden": "true",
|
174
181
|
role: "presentation",
|
175
182
|
focusable: "false",
|
176
183
|
css: "\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 5.33333;\n overflow: visible;\n ",
|
177
|
-
children: jsx("g", {
|
184
|
+
children: jsxRuntime.jsx("g", {
|
178
185
|
fill: "none",
|
179
|
-
children: jsx("path", {
|
186
|
+
children: jsxRuntime.jsx("path", {
|
180
187
|
d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
|
181
188
|
}, void 0)
|
182
189
|
}, void 0)
|
@@ -188,62 +195,62 @@ var PillsCarousel = function PillsCarousel(_ref) {
|
|
188
195
|
}, void 0);
|
189
196
|
};
|
190
197
|
|
191
|
-
var CarouselContainer = /*#__PURE__*/
|
198
|
+
var CarouselContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
192
199
|
displayName: "styles__CarouselContainer",
|
193
200
|
componentId: "sc-dwepxh-0"
|
194
201
|
})(["position:relative !important;z-index:0 !important;"]);
|
195
|
-
var CarouselNavbar = /*#__PURE__*/
|
202
|
+
var CarouselNavbar = /*#__PURE__*/styled__default["default"].div.withConfig({
|
196
203
|
displayName: "styles__CarouselNavbar",
|
197
204
|
componentId: "sc-dwepxh-1"
|
198
205
|
})(["-webkit-box-pack:justify !important;-ms-flex-pack:justify !important;-webkit-box-align:center !important;-ms-flex-align:center !important;color:#222222 !important;display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;-webkit-align-items:center !important;align-items:center !important;-webkit-justify-content:space-between !important;justify-content:space-between !important;margin-bottom:16px !important;"]);
|
199
|
-
var NavbarTitleContainer = /*#__PURE__*/
|
206
|
+
var NavbarTitleContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
200
207
|
displayName: "styles__NavbarTitleContainer",
|
201
208
|
componentId: "sc-dwepxh-2"
|
202
209
|
})(["margin-right:24px !important;width:auto !important;"]);
|
203
|
-
var NavbarControlsContainer = /*#__PURE__*/
|
210
|
+
var NavbarControlsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
204
211
|
displayName: "styles__NavbarControlsContainer",
|
205
212
|
componentId: "sc-dwepxh-4"
|
206
213
|
})(["display:flex !important;align-items:center !important;margin-left:auto !important;"]);
|
207
|
-
var NavbarControlsQuick = /*#__PURE__*/
|
214
|
+
var NavbarControlsQuick = /*#__PURE__*/styled__default["default"].a.withConfig({
|
208
215
|
displayName: "styles__NavbarControlsQuick",
|
209
216
|
componentId: "sc-dwepxh-5"
|
210
217
|
})(["@media (max-width:744px){display:none !important;}font-size:inherit !important;font-family:inherit !important;font-style:inherit !important;font-variant:inherit !important;line-height:inherit !important;color:#222222 !important;text-decoration:underline !important;border-radius:4px !important;font-weight:600 !important;outline:none !important;"]);
|
211
|
-
var NavbarControlsSpace = /*#__PURE__*/
|
218
|
+
var NavbarControlsSpace = /*#__PURE__*/styled__default["default"].span.withConfig({
|
212
219
|
displayName: "styles__NavbarControlsSpace",
|
213
220
|
componentId: "sc-dwepxh-6"
|
214
221
|
})(["display:inline-block !important;height:32px !important;width:1px !important;margin-right:16px !important;padding:0px !important;border:none !important;"]);
|
215
|
-
var ArrowsContainer = /*#__PURE__*/
|
222
|
+
var ArrowsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
216
223
|
displayName: "styles__ArrowsContainer",
|
217
224
|
componentId: "sc-dwepxh-7"
|
218
225
|
})(["-webkit-box-align:center !important;color:rgb(34,34,34) !important;display:flex !important;align-items:center !important;margin-left:auto !important;"]);
|
219
|
-
var ArrowsFlex = /*#__PURE__*/
|
226
|
+
var ArrowsFlex = /*#__PURE__*/styled__default["default"].div.withConfig({
|
220
227
|
displayName: "styles__ArrowsFlex",
|
221
228
|
componentId: "sc-dwepxh-8"
|
222
229
|
})(["display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;"]);
|
223
|
-
var ArrowsButton = /*#__PURE__*/
|
230
|
+
var ArrowsButton = /*#__PURE__*/styled__default["default"](ButtonUnstyled__default["default"]).withConfig({
|
224
231
|
displayName: "styles__ArrowsButton",
|
225
232
|
componentId: "sc-dwepxh-9"
|
226
233
|
})(["-webkit-box-pack:center !important;-webkit-box-align:center !important;appearance:none !important;display:inline-flex !important;border-radius:50% !important;border:none !important;outline:none !important;margin:0px !important;padding:0px !important;color:rgb(34,34,34) !important;cursor:pointer !important;touch-action:manipulation !important;position:relative !important;background:transparent !important;transition:-ms-transform 0.25s ease 0s,-webkit-transform 0.25s ease 0s,transform 0.25s ease 0s !important;align-items:center !important;justify-content:center !important;width:32px !important;height:32px !important;:focus{box-shadow:none !important;}::before{content:'' !important;display:block !important;position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;width:32px !important;height:32px !important;border-radius:50% !important;background:rgb(255,255,255) !important;border:1px solid rgb(221,221,221) !important;}:disabled{opacity:0.5 !important;cursor:not-allowed !important;color:rgb(221,221,221) !important;transform:scale(1) !important;}:hover:not([disabled]){color:rgb(0,0,0) !important;transform:scale(1.04) !important;}"]);
|
227
|
-
var ArrowsDivider = /*#__PURE__*/
|
234
|
+
var ArrowsDivider = /*#__PURE__*/styled__default["default"].span.withConfig({
|
228
235
|
displayName: "styles__ArrowsDivider",
|
229
236
|
componentId: "sc-dwepxh-10"
|
230
237
|
})(["margin-left:8px !important;"]);
|
231
|
-
var ArrowsIconClip = /*#__PURE__*/
|
238
|
+
var ArrowsIconClip = /*#__PURE__*/styled__default["default"].span.withConfig({
|
232
239
|
displayName: "styles__ArrowsIconClip",
|
233
240
|
componentId: "sc-dwepxh-11"
|
234
241
|
})(["border:0px !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;height:1px !important;overflow:hidden !important;padding:0px !important;position:absolute !important;white-space:nowrap !important;width:1px !important;"]);
|
235
|
-
var ArrowsSvg = /*#__PURE__*/
|
242
|
+
var ArrowsSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
|
236
243
|
displayName: "styles__ArrowsSvg",
|
237
244
|
componentId: "sc-dwepxh-12"
|
238
245
|
})(["display:block;fill:none;height:12px;width:12px;stroke:currentcolor;stroke-width:4;overflow:visible;"]);
|
239
246
|
|
240
|
-
var CarouselSwiper$2 = /*#__PURE__*/
|
247
|
+
var CarouselSwiper$2 = /*#__PURE__*/styled__default["default"](react.Swiper).withConfig({
|
241
248
|
displayName: "styles__CarouselSwiper",
|
242
249
|
componentId: "sc-1ja5jv1-0"
|
243
250
|
})([""]);
|
244
251
|
|
245
252
|
var _excluded$2 = ["children", "navigation", "title", "controls", "onShowMore"];
|
246
|
-
|
253
|
+
SwiperCore__default["default"].use([SwiperCore.Navigation]);
|
247
254
|
var CardCarousel = function CardCarousel(_ref) {
|
248
255
|
var children = _ref.children,
|
249
256
|
navigation = _ref.navigation,
|
@@ -252,54 +259,54 @@ var CardCarousel = function CardCarousel(_ref) {
|
|
252
259
|
onShowMore = _ref.onShowMore,
|
253
260
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
254
261
|
|
255
|
-
var prevRef = useRef(null);
|
256
|
-
var nextRef = useRef(null);
|
257
|
-
return jsxs(CarouselContainer, {
|
258
|
-
children: [navigation && jsxs(CarouselNavbar, {
|
259
|
-
children: [title && jsx(NavbarTitleContainer, {
|
262
|
+
var prevRef = React.useRef(null);
|
263
|
+
var nextRef = React.useRef(null);
|
264
|
+
return jsxRuntime.jsxs(CarouselContainer, {
|
265
|
+
children: [navigation && jsxRuntime.jsxs(CarouselNavbar, {
|
266
|
+
children: [title && jsxRuntime.jsx(NavbarTitleContainer, {
|
260
267
|
children: title
|
261
|
-
}, void 0), controls && jsxs(NavbarControlsContainer, {
|
262
|
-
children: [onShowMore && jsx(NavbarControlsQuick, {
|
268
|
+
}, void 0), controls && jsxRuntime.jsxs(NavbarControlsContainer, {
|
269
|
+
children: [onShowMore && jsxRuntime.jsx(NavbarControlsQuick, {
|
263
270
|
onClick: onShowMore,
|
264
271
|
children: "Show More"
|
265
|
-
}, void 0), jsx(NavbarControlsSpace, {}, void 0), jsx(ArrowsContainer, {
|
272
|
+
}, void 0), jsxRuntime.jsx(NavbarControlsSpace, {}, void 0), jsxRuntime.jsx(ArrowsContainer, {
|
266
273
|
"aria-hidden": "false",
|
267
|
-
children: jsxs(ArrowsFlex, {
|
268
|
-
children: [jsx(ArrowsButton, {
|
274
|
+
children: jsxRuntime.jsxs(ArrowsFlex, {
|
275
|
+
children: [jsxRuntime.jsx(ArrowsButton, {
|
269
276
|
ref: prevRef,
|
270
277
|
"aria-label": "Previous",
|
271
278
|
type: "button",
|
272
|
-
children: jsxs("span", {
|
279
|
+
children: jsxRuntime.jsxs("span", {
|
273
280
|
css: "\n position: relative;\n ",
|
274
|
-
children: [jsx(ArrowsIconClip, {}, void 0), jsx(ArrowsSvg, {
|
281
|
+
children: [jsxRuntime.jsx(ArrowsIconClip, {}, void 0), jsxRuntime.jsx(ArrowsSvg, {
|
275
282
|
viewBox: "0 0 32 32",
|
276
283
|
xmlns: "http://www.w3.org/2000/svg",
|
277
284
|
"aria-hidden": "true",
|
278
285
|
role: "presentation",
|
279
286
|
focusable: "false",
|
280
|
-
children: jsx("g", {
|
287
|
+
children: jsxRuntime.jsx("g", {
|
281
288
|
fill: "none",
|
282
|
-
children: jsx("path", {
|
289
|
+
children: jsxRuntime.jsx("path", {
|
283
290
|
d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
|
284
291
|
}, void 0)
|
285
292
|
}, void 0)
|
286
293
|
}, void 0)]
|
287
294
|
}, void 0)
|
288
|
-
}, void 0), jsx(ArrowsDivider, {}, void 0), jsx(ArrowsButton, {
|
295
|
+
}, void 0), jsxRuntime.jsx(ArrowsDivider, {}, void 0), jsxRuntime.jsx(ArrowsButton, {
|
289
296
|
"aria-label": "Next",
|
290
297
|
type: "button",
|
291
298
|
ref: nextRef,
|
292
|
-
children: jsxs("span", {
|
299
|
+
children: jsxRuntime.jsxs("span", {
|
293
300
|
css: "\n position: relative;\n ",
|
294
|
-
children: [jsx(ArrowsIconClip, {}, void 0), jsx(ArrowsSvg, {
|
301
|
+
children: [jsxRuntime.jsx(ArrowsIconClip, {}, void 0), jsxRuntime.jsx(ArrowsSvg, {
|
295
302
|
viewBox: "0 0 32 32",
|
296
303
|
xmlns: "http://www.w3.org/2000/svg",
|
297
304
|
"aria-hidden": "true",
|
298
305
|
role: "presentation",
|
299
306
|
focusable: "false",
|
300
|
-
children: jsx("g", {
|
307
|
+
children: jsxRuntime.jsx("g", {
|
301
308
|
fill: "none",
|
302
|
-
children: jsx("path", {
|
309
|
+
children: jsxRuntime.jsx("path", {
|
303
310
|
d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
|
304
311
|
}, void 0)
|
305
312
|
}, void 0)
|
@@ -309,7 +316,7 @@ var CardCarousel = function CardCarousel(_ref) {
|
|
309
316
|
}, void 0)
|
310
317
|
}, void 0)]
|
311
318
|
}, void 0)]
|
312
|
-
}, void 0), jsx(CarouselSwiper$2, _extends({}, props, {
|
319
|
+
}, void 0), jsxRuntime.jsx(CarouselSwiper$2, _extends({}, props, {
|
313
320
|
onInit: function onInit(swiper) {
|
314
321
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
315
322
|
// @ts-ignore
|
@@ -322,8 +329,8 @@ var CardCarousel = function CardCarousel(_ref) {
|
|
322
329
|
swiper.navigation.init();
|
323
330
|
swiper.navigation.update(); // console.log("Swiper", swiper);
|
324
331
|
},
|
325
|
-
children:
|
326
|
-
return jsx(SwiperSlide, {
|
332
|
+
children: React__default["default"].Children.map(children, function (child) {
|
333
|
+
return jsxRuntime.jsx(react.SwiperSlide, {
|
327
334
|
children: child
|
328
335
|
}, void 0);
|
329
336
|
})
|
@@ -331,13 +338,13 @@ var CardCarousel = function CardCarousel(_ref) {
|
|
331
338
|
}, void 0);
|
332
339
|
};
|
333
340
|
|
334
|
-
var CarouselSwiper$1 = /*#__PURE__*/
|
341
|
+
var CarouselSwiper$1 = /*#__PURE__*/styled__default["default"](react.Swiper).withConfig({
|
335
342
|
displayName: "styles__CarouselSwiper",
|
336
343
|
componentId: "sc-y1spms-0"
|
337
344
|
})([".swiper-wrapper{box-sizing:inherit !important;@media (min-width:744px){scroll-padding:40px !important;}@media (min-width:1128px){--scroll-padding:max(80px,calc((100vw - 1600px) / 2)) !important;scroll-padding:var(--scroll-padding) !important;}scroll-snap-type:x mandatory !important;overflow-x:auto !important;display:flex !important;scroll-padding:24px !important;.swiper-slide{@media (min-width:744px){min-width:476px !important;max-width:588px !important;flex:1 0 calc((100% - 80px) * 0.75) !important;}@media (min-width:1128px){flex:1 0 calc(50% - 88px) !important;}margin-left:16px !important;flex:1 0 calc(100% - 84px) !important;scroll-snap-align:start !important;scroll-snap-stop:always !important;}.swiper-slide:first-of-type{@media (min-width:744px){padding-left:40px !important;min-width:calc(516px) !important;max-width:calc(628px) !important;flex:1 0 calc((100% - 80px) * 0.75 + 40px) !important;}@media (min-width:1128px){max-width:calc(588px + max(80px,(100vw - 1600px) / 2)) !important;flex:1 0 calc(50% - 8px) !important;padding-left:max(80px,(100vw - 1600px) / 2) !important;}@media (min-width:2080px){max-width:calc(588px + max(80px,(100vw - 1930px) / 2)) !important;flex:1 0 calc(50% - 8px) !important;padding-left:max(80px,(100vw - 1930px) / 2) !important;}flex:1 0 calc(100% - 84px) !important;scroll-snap-align:start !important;scroll-snap-stop:always !important;margin-left:0px !important;padding-left:24px !important;}.swiper-slide:last-of-type{@media (min-width:744px){padding-right:40px !important;min-width:calc(516px) !important;max-width:calc(628px) !important;flex:1 0 calc((100% - 80px) * 0.75 + 40px) !important;}@media (min-width:1128px){max-width:calc(588px + max(80px,(100vw - 1600px) / 2)) !important;flex:1 0 calc(50% - 8px) !important;padding-right:max(80px,(100vw - 1600px) / 2) !important;}@media (min-width:2080px){max-width:calc(588px + max(80px,(100vw - 1930px) / 2)) !important;flex:1 0 calc(50% - 8px) !important;padding-right:max(80px,(100vw - 1930px) / 2) !important;}margin-left:16px !important;flex:1 0 calc(100% - 84px) !important;scroll-snap-align:start !important;scroll-snap-stop:always !important;padding-right:24px !important;}}"]);
|
338
345
|
|
339
346
|
var _excluded$1 = ["children", "navigation", "title", "controls", "quickLink", "onShowMore"];
|
340
|
-
|
347
|
+
SwiperCore__default["default"].use([SwiperCore.Navigation]);
|
341
348
|
var FreeCarousel = function FreeCarousel(_ref) {
|
342
349
|
var children = _ref.children,
|
343
350
|
navigation = _ref.navigation,
|
@@ -346,57 +353,57 @@ var FreeCarousel = function FreeCarousel(_ref) {
|
|
346
353
|
onShowMore = _ref.onShowMore,
|
347
354
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
348
355
|
|
349
|
-
var prevRef = useRef(null);
|
350
|
-
var nextRef = useRef(null);
|
351
|
-
return jsxs(CarouselContainer, {
|
352
|
-
children: [jsx("div", {
|
356
|
+
var prevRef = React.useRef(null);
|
357
|
+
var nextRef = React.useRef(null);
|
358
|
+
return jsxRuntime.jsxs(CarouselContainer, {
|
359
|
+
children: [jsxRuntime.jsx("div", {
|
353
360
|
css: "\n @media (max-width: 744px) {\n display: none !important;\n }\n ",
|
354
|
-
children: jsx(Container, {
|
355
|
-
children: navigation && jsxs(CarouselNavbar, {
|
356
|
-
children: [title && jsx(NavbarTitleContainer, {
|
361
|
+
children: jsxRuntime.jsx(layout.Container, {
|
362
|
+
children: navigation && jsxRuntime.jsxs(CarouselNavbar, {
|
363
|
+
children: [title && jsxRuntime.jsx(NavbarTitleContainer, {
|
357
364
|
children: title
|
358
|
-
}, void 0), controls && jsxs(NavbarControlsContainer, {
|
359
|
-
children: [onShowMore && jsx(NavbarControlsQuick, {
|
365
|
+
}, void 0), controls && jsxRuntime.jsxs(NavbarControlsContainer, {
|
366
|
+
children: [onShowMore && jsxRuntime.jsx(NavbarControlsQuick, {
|
360
367
|
onClick: onShowMore,
|
361
368
|
children: "Show More"
|
362
|
-
}, void 0), jsx(NavbarControlsSpace, {}, void 0), jsx(ArrowsContainer, {
|
369
|
+
}, void 0), jsxRuntime.jsx(NavbarControlsSpace, {}, void 0), jsxRuntime.jsx(ArrowsContainer, {
|
363
370
|
"aria-hidden": "false",
|
364
|
-
children: jsxs(ArrowsFlex, {
|
365
|
-
children: [jsx(ArrowsButton, {
|
371
|
+
children: jsxRuntime.jsxs(ArrowsFlex, {
|
372
|
+
children: [jsxRuntime.jsx(ArrowsButton, {
|
366
373
|
ref: prevRef,
|
367
374
|
"aria-label": "Previous",
|
368
375
|
type: "button",
|
369
|
-
children: jsxs("span", {
|
376
|
+
children: jsxRuntime.jsxs("span", {
|
370
377
|
css: "\n position: relative;\n ",
|
371
|
-
children: [jsx(ArrowsIconClip, {}, void 0), jsx(ArrowsSvg, {
|
378
|
+
children: [jsxRuntime.jsx(ArrowsIconClip, {}, void 0), jsxRuntime.jsx(ArrowsSvg, {
|
372
379
|
viewBox: "0 0 32 32",
|
373
380
|
xmlns: "http://www.w3.org/2000/svg",
|
374
381
|
"aria-hidden": "true",
|
375
382
|
role: "presentation",
|
376
383
|
focusable: "false",
|
377
|
-
children: jsx("g", {
|
384
|
+
children: jsxRuntime.jsx("g", {
|
378
385
|
fill: "none",
|
379
|
-
children: jsx("path", {
|
386
|
+
children: jsxRuntime.jsx("path", {
|
380
387
|
d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
|
381
388
|
}, void 0)
|
382
389
|
}, void 0)
|
383
390
|
}, void 0)]
|
384
391
|
}, void 0)
|
385
|
-
}, void 0), jsx(ArrowsDivider, {}, void 0), jsx(ArrowsButton, {
|
392
|
+
}, void 0), jsxRuntime.jsx(ArrowsDivider, {}, void 0), jsxRuntime.jsx(ArrowsButton, {
|
386
393
|
"aria-label": "Next",
|
387
394
|
type: "button",
|
388
395
|
ref: nextRef,
|
389
|
-
children: jsxs("span", {
|
396
|
+
children: jsxRuntime.jsxs("span", {
|
390
397
|
css: "\n position: relative;\n ",
|
391
|
-
children: [jsx(ArrowsIconClip, {}, void 0), jsx(ArrowsSvg, {
|
398
|
+
children: [jsxRuntime.jsx(ArrowsIconClip, {}, void 0), jsxRuntime.jsx(ArrowsSvg, {
|
392
399
|
viewBox: "0 0 32 32",
|
393
400
|
xmlns: "http://www.w3.org/2000/svg",
|
394
401
|
"aria-hidden": "true",
|
395
402
|
role: "presentation",
|
396
403
|
focusable: "false",
|
397
|
-
children: jsx("g", {
|
404
|
+
children: jsxRuntime.jsx("g", {
|
398
405
|
fill: "none",
|
399
|
-
children: jsx("path", {
|
406
|
+
children: jsxRuntime.jsx("path", {
|
400
407
|
d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
|
401
408
|
}, void 0)
|
402
409
|
}, void 0)
|
@@ -408,7 +415,7 @@ var FreeCarousel = function FreeCarousel(_ref) {
|
|
408
415
|
}, void 0)]
|
409
416
|
}, void 0)
|
410
417
|
}, void 0)
|
411
|
-
}, void 0), jsx(CarouselSwiper$1, _extends({}, props, {
|
418
|
+
}, void 0), jsxRuntime.jsx(CarouselSwiper$1, _extends({}, props, {
|
412
419
|
cssMode: true,
|
413
420
|
onInit: function onInit(swiper) {
|
414
421
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
@@ -422,8 +429,8 @@ var FreeCarousel = function FreeCarousel(_ref) {
|
|
422
429
|
swiper.navigation.init();
|
423
430
|
swiper.navigation.update(); // console.log("Swiper", swiper);
|
424
431
|
},
|
425
|
-
children:
|
426
|
-
return jsx(SwiperSlide, {
|
432
|
+
children: React__default["default"].Children.map(children, function (child) {
|
433
|
+
return jsxRuntime.jsx(react.SwiperSlide, {
|
427
434
|
children: child
|
428
435
|
}, void 0);
|
429
436
|
})
|
@@ -431,63 +438,63 @@ var FreeCarousel = function FreeCarousel(_ref) {
|
|
431
438
|
}, void 0);
|
432
439
|
};
|
433
440
|
|
434
|
-
var CarouselSwiper = /*#__PURE__*/
|
441
|
+
var CarouselSwiper = /*#__PURE__*/styled__default["default"](react.Swiper).withConfig({
|
435
442
|
displayName: "styles__CarouselSwiper",
|
436
443
|
componentId: "sc-jtjv4e-1"
|
437
444
|
})(["height:100%;.swiper-pagination{.swiper-pagination-bullet-active{background-color:#fff;}.swiper-pagination-bullet-active-next{background-color:#ffffff;}.swiper-pagination-bullet{background-color:#ffffff;}}"]);
|
438
|
-
var CarouselPill = /*#__PURE__*/
|
445
|
+
var CarouselPill = /*#__PURE__*/styled__default["default"](ButtonUnstyled__default["default"]).withConfig({
|
439
446
|
displayName: "styles__CarouselPill",
|
440
447
|
componentId: "sc-jtjv4e-2"
|
441
448
|
})([":hover{border-color:rgba(0,0,0,0.08) !important;background-color:#ffffff !important;color:#000000 !important;box-shadow:0px 0px 0px 1px transparent,0px 0px 0px 4px transparent,0px 6px 16px rgb(0 0 0 / 12%) !important;-webkit-transform:scale(1.04) !important;-ms-transform:scale(1.04) !important;transform:scale(1.04) !important;}-webkit-box-pack:center !important;-ms-flex-pack:center !important;-webkit-box-align:center !important;-ms-flex-align:center !important;-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;display:-webkit-inline-box !important;display:-moz-inline-box !important;display:-ms-inline-flexbox !important;display:-webkit-inline-flex !important;display:inline-flex !important;border-radius:50% !important;border:0px !important;outline:none !important;margin:0px !important;padding:0px !important;color:#222222 !important;background-color:rgba(255,255,255,0.9) !important;cursor:pointer !important;-ms-touch-action:manipulation !important;touch-action:manipulation !important;-webkit-align-items:center !important;align-items:center !important;-webkit-justify-content:center !important;justify-content:center !important;border-style:solid !important;border-width:1px !important;background-clip:padding-box !important;border-color:rgba(0,0,0,0.08) !important;box-shadow:0px 0px 0px 1px transparent,0px 0px 0px 4px transparent,0px 2px 4px rgb(0 0 0 / 18%) !important;-webkit-transition:-webkit-transform 0.25s ease,transform 0.25s ease !important;-moz-transition:transform 0.25s ease !important;transition:-ms-transform 0.25s ease,-webkit-transform 0.25s ease,transform 0.25s ease !important;width:32px !important;height:32px !important;"]);
|
442
|
-
var CarouselPillSvg = /*#__PURE__*/
|
449
|
+
var CarouselPillSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
|
443
450
|
displayName: "styles__CarouselPillSvg",
|
444
451
|
componentId: "sc-jtjv4e-3"
|
445
452
|
})(["height:10px;width:10px;display:block;fill:currentcolor;"]);
|
446
453
|
|
447
454
|
var _excluded = ["children", "navigation", "title", "controls"];
|
448
|
-
|
455
|
+
SwiperCore__default["default"].use([SwiperCore.Navigation, SwiperCore.Pagination]);
|
449
456
|
var PaginationCarousel = function PaginationCarousel(_ref) {
|
450
457
|
var children = _ref.children,
|
451
458
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
452
459
|
|
453
|
-
var prevRef = useRef(null);
|
454
|
-
var nextRef = useRef(null);
|
455
|
-
return jsxs(Fragment, {
|
456
|
-
children: [jsx("div", {
|
460
|
+
var prevRef = React.useRef(null);
|
461
|
+
var nextRef = React.useRef(null);
|
462
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
463
|
+
children: [jsxRuntime.jsx("div", {
|
457
464
|
css: "\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n position: absolute !important;\n top: 50% !important;\n pointer-events: auto !important;\n transform: translateY(-50%) !important;\n left: 8px !important;\n animation-duration: 0.3s !important;\n animation-name: fadein !important;\n z-index: 180 !important;\n opacity: 0 !important;\n :hover {\n opacity: 1 !important;\n }\n ",
|
458
|
-
children: jsx(CarouselPill, {
|
465
|
+
children: jsxRuntime.jsx(CarouselPill, {
|
459
466
|
ref: prevRef,
|
460
|
-
children: jsx("span", {
|
467
|
+
children: jsxRuntime.jsx("span", {
|
461
468
|
css: "\n position: relative !important;\n ",
|
462
|
-
children: jsx(CarouselPillSvg, {
|
469
|
+
children: jsxRuntime.jsx(CarouselPillSvg, {
|
463
470
|
viewBox: "0 0 16 16",
|
464
471
|
role: "presentation",
|
465
472
|
"aria-hidden": "true",
|
466
473
|
focusable: "false",
|
467
|
-
children: jsx("path", {
|
474
|
+
children: jsxRuntime.jsx("path", {
|
468
475
|
d: "m10.8 16c-.4 0-.7-.1-.9-.4l-6.8-6.7c-.5-.5-.5-1.3 0-1.8l6.8-6.7c.5-.5 1.2-.5 1.7 0s .5 1.2 0 1.7l-5.8 5.9 5.8 5.9c.5.5.5 1.2 0 1.7-.2.3-.5.4-.8.4"
|
469
476
|
}, void 0)
|
470
477
|
}, void 0)
|
471
478
|
}, void 0)
|
472
479
|
}, void 0)
|
473
|
-
}, void 0), jsx("div", {
|
480
|
+
}, void 0), jsxRuntime.jsx("div", {
|
474
481
|
css: "\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n position: absolute !important;\n top: 50% !important;\n pointer-events: auto !important;\n transform: translateY(-50%) !important;\n right: 8px !important;\n animation-duration: 0.3s !important;\n animation-name: fadein !important;\n z-index: 180 !important;\n opacity: 0 !important;\n :hover {\n opacity: 1 !important;\n }\n ",
|
475
|
-
children: jsx(CarouselPill, {
|
482
|
+
children: jsxRuntime.jsx(CarouselPill, {
|
476
483
|
ref: nextRef,
|
477
|
-
children: jsx("span", {
|
484
|
+
children: jsxRuntime.jsx("span", {
|
478
485
|
css: "\n position: relative !important;\n ",
|
479
|
-
children: jsx(CarouselPillSvg, {
|
486
|
+
children: jsxRuntime.jsx(CarouselPillSvg, {
|
480
487
|
viewBox: "0 0 16 16",
|
481
488
|
role: "presentation",
|
482
489
|
"aria-hidden": "true",
|
483
490
|
focusable: "false",
|
484
|
-
children: jsx("path", {
|
491
|
+
children: jsxRuntime.jsx("path", {
|
485
492
|
d: "m5.3 16c .3 0 .6-.1.8-.4l6.8-6.7c.5-.5.5-1.3 0-1.8l-6.8-6.7c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l5.8 5.9-5.8 5.9c-.5.5-.5 1.2 0 1.7.2.3.5.4.9.4"
|
486
493
|
}, void 0)
|
487
494
|
}, void 0)
|
488
495
|
}, void 0)
|
489
496
|
}, void 0)
|
490
|
-
}, void 0), jsx(CarouselSwiper, _extends({}, props, {
|
497
|
+
}, void 0), jsxRuntime.jsx(CarouselSwiper, _extends({}, props, {
|
491
498
|
pagination: {
|
492
499
|
dynamicBullets: true
|
493
500
|
},
|
@@ -503,8 +510,8 @@ var PaginationCarousel = function PaginationCarousel(_ref) {
|
|
503
510
|
swiper.navigation.init();
|
504
511
|
swiper.navigation.update(); // console.log("Swiper", swiper);
|
505
512
|
},
|
506
|
-
children:
|
507
|
-
return
|
513
|
+
children: React__default["default"].Children.map(children, function (child) {
|
514
|
+
return React__default["default"].cloneElement(jsxRuntime.jsx(react.SwiperSlide, {
|
508
515
|
children: child
|
509
516
|
}, void 0), _extends({}, props));
|
510
517
|
})
|
@@ -512,5 +519,8 @@ var PaginationCarousel = function PaginationCarousel(_ref) {
|
|
512
519
|
}, void 0);
|
513
520
|
};
|
514
521
|
|
515
|
-
|
522
|
+
exports.CardCarousel = CardCarousel;
|
523
|
+
exports.FreeCarousel = FreeCarousel;
|
524
|
+
exports.PaginationCarousel = PaginationCarousel;
|
525
|
+
exports.PillsCarousel = PillsCarousel;
|
516
526
|
//# sourceMappingURL=index.js.map
|