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