@fox-dls/carousels 0.0.1 → 1.0.3
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/.babelrc +12 -0
- package/.eslintrc.json +35 -0
- package/.ultra.cache.json +1 -0
- package/CHANGELOG.md +18 -0
- package/{index.d.ts → dist/index.d.ts} +1 -3
- package/dist/index.js +516 -0
- package/dist/index.js.map +1 -0
- package/{lib → dist/lib}/card/index.d.ts +0 -0
- package/dist/lib/card/styles/index.d.ts +2 -0
- package/{lib → dist/lib}/free/index.d.ts +0 -0
- package/dist/lib/free/styles/index.d.ts +2 -0
- package/{lib → dist/lib}/pagination/index.d.ts +0 -0
- package/dist/lib/pagination/styles/index.d.ts +7 -0
- package/dist/lib/pills/index.d.ts +2 -0
- package/dist/lib/pills/styles/index.d.ts +7 -0
- package/{lib → dist/lib}/styles/index.d.ts +1 -1
- package/package.json +112 -9
- package/src/index.ts +7 -0
- package/src/lib/card/index.tsx +123 -0
- package/src/lib/card/styles/index.tsx +5 -0
- package/src/lib/free/index.tsx +141 -0
- package/src/lib/free/styles/index.tsx +80 -0
- package/src/lib/pagination/index.tsx +134 -0
- package/src/lib/pagination/styles/index.tsx +80 -0
- package/src/lib/pills/index.tsx +208 -0
- package/src/lib/pills/styles/index.tsx +58 -0
- package/src/lib/styles/index.tsx +168 -0
- package/tsconfig.build.json +21 -0
- package/tsconfig.json +22 -0
- package/carousels.esm.js +0 -2135
- package/carousels.umd.js +0 -591
- package/lib/buttons/index.d.ts +0 -2
- package/lib/buttons/styles/index.d.ts +0 -8
- package/lib/card/styles/index.d.ts +0 -3
- package/lib/free/styles/index.d.ts +0 -3
- package/lib/pagination/styles/index.d.ts +0 -8
package/carousels.umd.js
DELETED
@@ -1,591 +0,0 @@
|
|
1
|
-
(function (global, factory) {
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('swiper/css'), require('swiper/css/pagination'), require('react/jsx-runtime'), require('react'), require('styled-components'), require('swiper'), require('swiper/react'), require('@mui/core/ButtonUnstyled'), require('@fox-dls/layout')) :
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'swiper/css', 'swiper/css/pagination', 'react/jsx-runtime', 'react', 'styled-components', 'swiper', 'swiper/react', '@mui/core/ButtonUnstyled', '@fox-dls/layout'], factory) :
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Carousels = {}, null, null, global.jsxRuntime, global.React, global.styled, global.SwiperCore, global.react, global.ButtonUnstyled, global.layout));
|
5
|
-
})(this, (function (exports, css, pagination, jsxRuntime, React, styled, SwiperCore, react, ButtonUnstyled, layout) { 'use strict';
|
6
|
-
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
8
|
-
|
9
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
10
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
11
|
-
var SwiperCore__default = /*#__PURE__*/_interopDefaultLegacy(SwiperCore);
|
12
|
-
var ButtonUnstyled__default = /*#__PURE__*/_interopDefaultLegacy(ButtonUnstyled);
|
13
|
-
|
14
|
-
/*! *****************************************************************************
|
15
|
-
Copyright (c) Microsoft Corporation.
|
16
|
-
|
17
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
18
|
-
purpose with or without fee is hereby granted.
|
19
|
-
|
20
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
21
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
22
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
23
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
24
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
25
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
26
|
-
PERFORMANCE OF THIS SOFTWARE.
|
27
|
-
***************************************************************************** */
|
28
|
-
|
29
|
-
var __assign = function() {
|
30
|
-
__assign = Object.assign || function __assign(t) {
|
31
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
32
|
-
s = arguments[i];
|
33
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
34
|
-
}
|
35
|
-
return t;
|
36
|
-
};
|
37
|
-
return __assign.apply(this, arguments);
|
38
|
-
};
|
39
|
-
|
40
|
-
function __rest(s, e) {
|
41
|
-
var t = {};
|
42
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
43
|
-
t[p] = s[p];
|
44
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
45
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
46
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
47
|
-
t[p[i]] = s[p[i]];
|
48
|
-
}
|
49
|
-
return t;
|
50
|
-
}
|
51
|
-
|
52
|
-
function __makeTemplateObject(cooked, raw) {
|
53
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
54
|
-
return cooked;
|
55
|
-
}
|
56
|
-
|
57
|
-
/*#__PURE__*/styled__default["default"].div.withConfig({
|
58
|
-
displayName: "styles__CarouselContainer",
|
59
|
-
componentId: "sc-rauw79-0"
|
60
|
-
})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject([""], [""])));
|
61
|
-
var CarouselSwiper$3 = /*#__PURE__*/styled__default["default"](react.Swiper).withConfig({
|
62
|
-
displayName: "styles__CarouselSwiper",
|
63
|
-
componentId: "sc-rauw79-1"
|
64
|
-
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n margin: 0px !important;\n .swiper-wrapper {\n .swiper-slide {\n scroll-snap-align: start !important;\n width: auto !important;\n }\n }\n"], ["\n margin: 0px !important;\n .swiper-wrapper {\n .swiper-slide {\n scroll-snap-align: start !important;\n width: auto !important;\n }\n }\n"])));
|
65
|
-
var CarouselButtonContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
66
|
-
displayName: "styles__CarouselButtonContainer",
|
67
|
-
componentId: "sc-rauw79-2"
|
68
|
-
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: inline-block !important;\n padding-right: 8px !important;\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n"], ["\n display: inline-block !important;\n padding-right: 8px !important;\n padding-top: 4px !important;\n padding-bottom: 4px !important;\n"])));
|
69
|
-
var CarouselButton$1 = /*#__PURE__*/styled__default["default"](ButtonUnstyled__default["default"]).withConfig({
|
70
|
-
displayName: "styles__CarouselButton",
|
71
|
-
componentId: "sc-rauw79-3"
|
72
|
-
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n -webkit-box-pack: center !important;\n -webkit-box-align: center !important;\n appearance: none !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: 1px solid rgb(221, 221, 221) !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: rgb(34, 34, 34) !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n position: relative !important;\n background: transparent !important;\n transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,\n transform 0.25s ease 0s !important;\n align-items: center !important;\n justify-content: center !important;\n width: 36px !important;\n height: 36px !important;\n ::before {\n content: '' !important;\n display: block !important;\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 36px !important;\n height: 36px !important;\n border-radius: 50% !important;\n border: 1px solid rgb(221, 221, 221) !important;\n }\n"], ["\n -webkit-box-pack: center !important;\n -webkit-box-align: center !important;\n appearance: none !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: 1px solid rgb(221, 221, 221) !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: rgb(34, 34, 34) !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n position: relative !important;\n background: transparent !important;\n transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,\n transform 0.25s ease 0s !important;\n align-items: center !important;\n justify-content: center !important;\n width: 36px !important;\n height: 36px !important;\n ::before {\n content: '' !important;\n display: block !important;\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 36px !important;\n height: 36px !important;\n border-radius: 50% !important;\n border: 1px solid rgb(221, 221, 221) !important;\n }\n"])));
|
73
|
-
var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$2;
|
74
|
-
|
75
|
-
SwiperCore__default["default"].use([SwiperCore.Navigation]);
|
76
|
-
var ButtonsCarousel = function ButtonsCarousel(_a) {
|
77
|
-
var children = _a.children;
|
78
|
-
_a.navigation;
|
79
|
-
_a.title;
|
80
|
-
_a.controls;
|
81
|
-
var props = __rest(_a, ["children", "navigation", "title", "controls"]);
|
82
|
-
|
83
|
-
var prevRef = React.useRef(null);
|
84
|
-
var nextRef = React.useRef(null);
|
85
|
-
|
86
|
-
var _b = React.useState({
|
87
|
-
progress: 0,
|
88
|
-
isBeginning: true,
|
89
|
-
isEnd: false
|
90
|
-
}),
|
91
|
-
swiperSlides = _b[0],
|
92
|
-
setSwiperSlides = _b[1];
|
93
|
-
|
94
|
-
var _c = React.useState(null),
|
95
|
-
swiper = _c[0],
|
96
|
-
setSwiper = _c[1];
|
97
|
-
|
98
|
-
return jsxRuntime.jsxs("div", __assign({
|
99
|
-
css: "\n display: flex !important;\n position: relative !important;\n min-width: 0px !important;\n "
|
100
|
-
}, {
|
101
|
-
children: [jsxRuntime.jsx("div", __assign({
|
102
|
-
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_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: none !important;\n visibility: hidden !important;\n "], ["\n display: none !important;\n visibility: hidden !important;\n "])))) + "\n "
|
103
|
-
}, {
|
104
|
-
children: jsxRuntime.jsx(CarouselButtonContainer, {
|
105
|
-
children: jsxRuntime.jsx(CarouselButton$1, __assign({
|
106
|
-
left: +true,
|
107
|
-
ref: prevRef,
|
108
|
-
"aria-label": "Previous",
|
109
|
-
type: "button",
|
110
|
-
onClick: function () {
|
111
|
-
return swiper.slidePrev();
|
112
|
-
}
|
113
|
-
}, {
|
114
|
-
children: jsxRuntime.jsx("span", __assign({
|
115
|
-
css: "\n position: relative !important;\n "
|
116
|
-
}, {
|
117
|
-
children: jsxRuntime.jsx("svg", __assign({
|
118
|
-
viewBox: "0 0 32 32",
|
119
|
-
xmlns: "http://www.w3.org/2000/svg",
|
120
|
-
"aria-hidden": "true",
|
121
|
-
role: "presentation",
|
122
|
-
focusable: "false",
|
123
|
-
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 "
|
124
|
-
}, {
|
125
|
-
children: jsxRuntime.jsx("g", __assign({
|
126
|
-
fill: "none"
|
127
|
-
}, {
|
128
|
-
children: jsxRuntime.jsx("path", {
|
129
|
-
d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
|
130
|
-
}, void 0)
|
131
|
-
}), void 0)
|
132
|
-
}), void 0)
|
133
|
-
}), void 0)
|
134
|
-
}), void 0)
|
135
|
-
}, void 0)
|
136
|
-
}), void 0), jsxRuntime.jsx(CarouselSwiper$3, __assign({}, props, {
|
137
|
-
cssMode: false,
|
138
|
-
slidesPerView: "auto",
|
139
|
-
onInit: function (swiper) {
|
140
|
-
setSwiper(swiper); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
141
|
-
// @ts-ignore
|
142
|
-
// eslint-disable-next-line no-param-reassign
|
143
|
-
|
144
|
-
swiper.params.navigation.prevEl = prevRef.current; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
145
|
-
// @ts-ignore
|
146
|
-
// eslint-disable-next-line no-param-reassign
|
147
|
-
|
148
|
-
swiper.params.navigation.nextEl = nextRef.current;
|
149
|
-
swiper.navigation.init();
|
150
|
-
swiper.navigation.update();
|
151
|
-
setSwiperSlides({
|
152
|
-
progress: swiper.progress,
|
153
|
-
isBeginning: swiper.isBeginning,
|
154
|
-
isEnd: swiper.isEnd
|
155
|
-
}); // console.log("Swiper", swiper);
|
156
|
-
},
|
157
|
-
onSlideChange: function (swiper) {
|
158
|
-
// console.log("Swiper Change", swiper);
|
159
|
-
setSwiperSlides({
|
160
|
-
progress: swiper.progress,
|
161
|
-
isBeginning: swiper.isBeginning,
|
162
|
-
isEnd: swiper.isEnd
|
163
|
-
});
|
164
|
-
}
|
165
|
-
}, {
|
166
|
-
children: React__default["default"].Children.map(children, function (child) {
|
167
|
-
return jsxRuntime.jsx(react.SwiperSlide, {
|
168
|
-
children: jsxRuntime.jsx("div", __assign({
|
169
|
-
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 "
|
170
|
-
}, {
|
171
|
-
children: child
|
172
|
-
}), void 0)
|
173
|
-
}, void 0);
|
174
|
-
})
|
175
|
-
}), void 0), jsxRuntime.jsx("div", __assign({
|
176
|
-
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(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: none !important;\n visibility: hidden !important;\n "], ["\n display: none !important;\n visibility: hidden !important;\n "])))) + "\n "
|
177
|
-
}, {
|
178
|
-
children: jsxRuntime.jsx(CarouselButtonContainer, {
|
179
|
-
children: jsxRuntime.jsx(CarouselButton$1, __assign({
|
180
|
-
right: +true,
|
181
|
-
"aria-label": "Next",
|
182
|
-
type: "button",
|
183
|
-
ref: nextRef,
|
184
|
-
onClick: function () {
|
185
|
-
return swiper.slideNext();
|
186
|
-
}
|
187
|
-
}, {
|
188
|
-
children: jsxRuntime.jsx("span", __assign({
|
189
|
-
css: "\n position: relative !important;\n "
|
190
|
-
}, {
|
191
|
-
children: jsxRuntime.jsx("svg", __assign({
|
192
|
-
viewBox: "0 0 32 32",
|
193
|
-
xmlns: "http://www.w3.org/2000/svg",
|
194
|
-
"aria-hidden": "true",
|
195
|
-
role: "presentation",
|
196
|
-
focusable: "false",
|
197
|
-
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 "
|
198
|
-
}, {
|
199
|
-
children: jsxRuntime.jsx("g", __assign({
|
200
|
-
fill: "none"
|
201
|
-
}, {
|
202
|
-
children: jsxRuntime.jsx("path", {
|
203
|
-
d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
|
204
|
-
}, void 0)
|
205
|
-
}), void 0)
|
206
|
-
}), void 0)
|
207
|
-
}), void 0)
|
208
|
-
}), void 0)
|
209
|
-
}, void 0)
|
210
|
-
}), void 0)]
|
211
|
-
}), void 0);
|
212
|
-
};
|
213
|
-
var templateObject_1$4, templateObject_2$2;
|
214
|
-
|
215
|
-
var CarouselContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
216
|
-
displayName: "styles__CarouselContainer",
|
217
|
-
componentId: "sc-dwepxh-0"
|
218
|
-
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: relative !important;\n z-index: 0 !important;\n"], ["\n position: relative !important;\n z-index: 0 !important;\n"])));
|
219
|
-
var CarouselNavbar = /*#__PURE__*/styled__default["default"].div.withConfig({
|
220
|
-
displayName: "styles__CarouselNavbar",
|
221
|
-
componentId: "sc-dwepxh-1"
|
222
|
-
})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n -webkit-box-pack: justify !important;\n -ms-flex-pack: justify !important;\n -webkit-box-align: center !important;\n -ms-flex-align: center !important;\n color: #222222 !important;\n display: -webkit-box !important;\n display: -moz-box !important;\n display: -ms-flexbox !important;\n display: -webkit-flex !important;\n display: flex !important;\n -webkit-align-items: center !important;\n align-items: center !important;\n -webkit-justify-content: space-between !important;\n justify-content: space-between !important;\n margin-bottom: 16px !important;\n"], ["\n -webkit-box-pack: justify !important;\n -ms-flex-pack: justify !important;\n -webkit-box-align: center !important;\n -ms-flex-align: center !important;\n color: #222222 !important;\n display: -webkit-box !important;\n display: -moz-box !important;\n display: -ms-flexbox !important;\n display: -webkit-flex !important;\n display: flex !important;\n -webkit-align-items: center !important;\n align-items: center !important;\n -webkit-justify-content: space-between !important;\n justify-content: space-between !important;\n margin-bottom: 16px !important;\n"])));
|
223
|
-
var NavbarTitleContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
224
|
-
displayName: "styles__NavbarTitleContainer",
|
225
|
-
componentId: "sc-dwepxh-2"
|
226
|
-
})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-right: 24px !important;\n width: auto !important;\n"], ["\n margin-right: 24px !important;\n width: auto !important;\n"])));
|
227
|
-
/*#__PURE__*/styled__default["default"].div.withConfig({
|
228
|
-
displayName: "styles__NavbarTitle",
|
229
|
-
componentId: "sc-dwepxh-3"
|
230
|
-
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n @media (min-width: 744px) {\n font-size: 32px !important;\n line-height: 36px !important;\n font-weight: 800 !important;\n text-align: left !important;\n color: #222222 !important;\n margin-bottom: 15px !important;\n }\n font-size: 22px !important;\n line-height: 26px !important;\n font-weight: 600 !important;\n margin-bottom: 10px !important;\n"], ["\n @media (min-width: 744px) {\n font-size: 32px !important;\n line-height: 36px !important;\n font-weight: 800 !important;\n text-align: left !important;\n color: #222222 !important;\n margin-bottom: 15px !important;\n }\n font-size: 22px !important;\n line-height: 26px !important;\n font-weight: 600 !important;\n margin-bottom: 10px !important;\n"])));
|
231
|
-
var NavbarControlsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
232
|
-
displayName: "styles__NavbarControlsContainer",
|
233
|
-
componentId: "sc-dwepxh-4"
|
234
|
-
})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex !important;\n align-items: center !important;\n margin-left: auto !important;\n"], ["\n display: flex !important;\n align-items: center !important;\n margin-left: auto !important;\n"])));
|
235
|
-
var NavbarControlsQuick = /*#__PURE__*/styled__default["default"].a.withConfig({
|
236
|
-
displayName: "styles__NavbarControlsQuick",
|
237
|
-
componentId: "sc-dwepxh-5"
|
238
|
-
})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n @media (max-width: 744px) {\n display: none !important;\n }\n font-size: inherit !important;\n font-family: inherit !important;\n font-style: inherit !important;\n font-variant: inherit !important;\n line-height: inherit !important;\n color: #222222 !important;\n text-decoration: underline !important;\n border-radius: 4px !important;\n font-weight: 600 !important;\n outline: none !important;\n"], ["\n @media (max-width: 744px) {\n display: none !important;\n }\n font-size: inherit !important;\n font-family: inherit !important;\n font-style: inherit !important;\n font-variant: inherit !important;\n line-height: inherit !important;\n color: #222222 !important;\n text-decoration: underline !important;\n border-radius: 4px !important;\n font-weight: 600 !important;\n outline: none !important;\n"])));
|
239
|
-
var NavbarControlsSpace = /*#__PURE__*/styled__default["default"].span.withConfig({
|
240
|
-
displayName: "styles__NavbarControlsSpace",
|
241
|
-
componentId: "sc-dwepxh-6"
|
242
|
-
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: inline-block !important;\n height: 32px !important;\n width: 1px !important;\n margin-right: 16px !important;\n padding: 0px !important;\n border: none !important;\n"], ["\n display: inline-block !important;\n height: 32px !important;\n width: 1px !important;\n margin-right: 16px !important;\n padding: 0px !important;\n border: none !important;\n"])));
|
243
|
-
var ArrowsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
244
|
-
displayName: "styles__ArrowsContainer",
|
245
|
-
componentId: "sc-dwepxh-7"
|
246
|
-
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n -webkit-box-align: center !important;\n color: rgb(34, 34, 34) !important;\n display: flex !important;\n align-items: center !important;\n margin-left: auto !important;\n"], ["\n -webkit-box-align: center !important;\n color: rgb(34, 34, 34) !important;\n display: flex !important;\n align-items: center !important;\n margin-left: auto !important;\n"])));
|
247
|
-
var ArrowsFlex = /*#__PURE__*/styled__default["default"].div.withConfig({
|
248
|
-
displayName: "styles__ArrowsFlex",
|
249
|
-
componentId: "sc-dwepxh-8"
|
250
|
-
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: -webkit-box !important;\n display: -moz-box !important;\n display: -ms-flexbox !important;\n display: -webkit-flex !important;\n display: flex !important;\n"], ["\n display: -webkit-box !important;\n display: -moz-box !important;\n display: -ms-flexbox !important;\n display: -webkit-flex !important;\n display: flex !important;\n"])));
|
251
|
-
var ArrowsButton = /*#__PURE__*/styled__default["default"](ButtonUnstyled__default["default"]).withConfig({
|
252
|
-
displayName: "styles__ArrowsButton",
|
253
|
-
componentId: "sc-dwepxh-9"
|
254
|
-
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n -webkit-box-pack: center !important;\n -webkit-box-align: center !important;\n appearance: none !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: none !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: rgb(34, 34, 34) !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n position: relative !important;\n background: transparent !important;\n transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,\n transform 0.25s ease 0s !important;\n align-items: center !important;\n justify-content: center !important;\n width: 32px !important;\n height: 32px !important;\n :focus {\n box-shadow: none !important;\n }\n ::before {\n content: '' !important;\n display: block !important;\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 32px !important;\n height: 32px !important;\n border-radius: 50% !important;\n background: rgb(255, 255, 255) !important;\n border: 1px solid rgb(221, 221, 221) !important;\n }\n :disabled {\n opacity: 0.5 !important;\n cursor: not-allowed !important;\n color: rgb(221, 221, 221) !important;\n transform: scale(1) !important;\n }\n :hover:not([disabled]) {\n color: rgb(0, 0, 0) !important;\n transform: scale(1.04) !important;\n }\n"], ["\n -webkit-box-pack: center !important;\n -webkit-box-align: center !important;\n appearance: none !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: none !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: rgb(34, 34, 34) !important;\n cursor: pointer !important;\n touch-action: manipulation !important;\n position: relative !important;\n background: transparent !important;\n transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,\n transform 0.25s ease 0s !important;\n align-items: center !important;\n justify-content: center !important;\n width: 32px !important;\n height: 32px !important;\n :focus {\n box-shadow: none !important;\n }\n ::before {\n content: '' !important;\n display: block !important;\n position: absolute !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 32px !important;\n height: 32px !important;\n border-radius: 50% !important;\n background: rgb(255, 255, 255) !important;\n border: 1px solid rgb(221, 221, 221) !important;\n }\n :disabled {\n opacity: 0.5 !important;\n cursor: not-allowed !important;\n color: rgb(221, 221, 221) !important;\n transform: scale(1) !important;\n }\n :hover:not([disabled]) {\n color: rgb(0, 0, 0) !important;\n transform: scale(1.04) !important;\n }\n"])));
|
255
|
-
var ArrowsDivider = /*#__PURE__*/styled__default["default"].span.withConfig({
|
256
|
-
displayName: "styles__ArrowsDivider",
|
257
|
-
componentId: "sc-dwepxh-10"
|
258
|
-
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin-left: 8px !important;\n"], ["\n margin-left: 8px !important;\n"])));
|
259
|
-
var ArrowsIconClip = /*#__PURE__*/styled__default["default"].span.withConfig({
|
260
|
-
displayName: "styles__ArrowsIconClip",
|
261
|
-
componentId: "sc-dwepxh-11"
|
262
|
-
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n border: 0px !important;\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(100%) !important;\n clip-path: inset(100%) !important;\n height: 1px !important;\n overflow: hidden !important;\n padding: 0px !important;\n position: absolute !important;\n white-space: nowrap !important;\n width: 1px !important;\n"], ["\n border: 0px !important;\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(100%) !important;\n clip-path: inset(100%) !important;\n height: 1px !important;\n overflow: hidden !important;\n padding: 0px !important;\n position: absolute !important;\n white-space: nowrap !important;\n width: 1px !important;\n"])));
|
263
|
-
var ArrowsSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
|
264
|
-
displayName: "styles__ArrowsSvg",
|
265
|
-
componentId: "sc-dwepxh-12"
|
266
|
-
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 4;\n overflow: visible;\n"], ["\n display: block;\n fill: none;\n height: 12px;\n width: 12px;\n stroke: currentcolor;\n stroke-width: 4;\n overflow: visible;\n"])));
|
267
|
-
var templateObject_1$3, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
268
|
-
|
269
|
-
var CarouselSwiper$2 = /*#__PURE__*/styled__default["default"](react.Swiper).withConfig({
|
270
|
-
displayName: "styles__CarouselSwiper",
|
271
|
-
componentId: "sc-1ja5jv1-0"
|
272
|
-
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
|
273
|
-
var templateObject_1$2;
|
274
|
-
|
275
|
-
SwiperCore__default["default"].use([SwiperCore.Navigation]);
|
276
|
-
var CardCarousel = function CardCarousel(_a) {
|
277
|
-
var children = _a.children,
|
278
|
-
navigation = _a.navigation,
|
279
|
-
title = _a.title,
|
280
|
-
controls = _a.controls,
|
281
|
-
onShowMore = _a.onShowMore,
|
282
|
-
props = __rest(_a, ["children", "navigation", "title", "controls", "onShowMore"]);
|
283
|
-
|
284
|
-
var prevRef = React.useRef(null);
|
285
|
-
var nextRef = React.useRef(null);
|
286
|
-
return jsxRuntime.jsxs(CarouselContainer, {
|
287
|
-
children: [navigation && jsxRuntime.jsxs(CarouselNavbar, {
|
288
|
-
children: [title && jsxRuntime.jsx(NavbarTitleContainer, {
|
289
|
-
children: title
|
290
|
-
}, void 0), controls && jsxRuntime.jsxs(NavbarControlsContainer, {
|
291
|
-
children: [onShowMore && jsxRuntime.jsx(NavbarControlsQuick, __assign({
|
292
|
-
onClick: onShowMore
|
293
|
-
}, {
|
294
|
-
children: "Show More"
|
295
|
-
}), void 0), jsxRuntime.jsx(NavbarControlsSpace, {}, void 0), jsxRuntime.jsx(ArrowsContainer, __assign({
|
296
|
-
"aria-hidden": "false"
|
297
|
-
}, {
|
298
|
-
children: jsxRuntime.jsxs(ArrowsFlex, {
|
299
|
-
children: [jsxRuntime.jsx(ArrowsButton, __assign({
|
300
|
-
ref: prevRef,
|
301
|
-
"aria-label": "Previous",
|
302
|
-
type: "button"
|
303
|
-
}, {
|
304
|
-
children: jsxRuntime.jsxs("span", __assign({
|
305
|
-
css: "\n position: relative;\n "
|
306
|
-
}, {
|
307
|
-
children: [jsxRuntime.jsx(ArrowsIconClip, {}, void 0), jsxRuntime.jsx(ArrowsSvg, __assign({
|
308
|
-
viewBox: "0 0 32 32",
|
309
|
-
xmlns: "http://www.w3.org/2000/svg",
|
310
|
-
"aria-hidden": "true",
|
311
|
-
role: "presentation",
|
312
|
-
focusable: "false"
|
313
|
-
}, {
|
314
|
-
children: jsxRuntime.jsx("g", __assign({
|
315
|
-
fill: "none"
|
316
|
-
}, {
|
317
|
-
children: jsxRuntime.jsx("path", {
|
318
|
-
d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
|
319
|
-
}, void 0)
|
320
|
-
}), void 0)
|
321
|
-
}), void 0)]
|
322
|
-
}), void 0)
|
323
|
-
}), void 0), jsxRuntime.jsx(ArrowsDivider, {}, void 0), jsxRuntime.jsx(ArrowsButton, __assign({
|
324
|
-
"aria-label": "Next",
|
325
|
-
type: "button",
|
326
|
-
ref: nextRef
|
327
|
-
}, {
|
328
|
-
children: jsxRuntime.jsxs("span", __assign({
|
329
|
-
css: "\n position: relative;\n "
|
330
|
-
}, {
|
331
|
-
children: [jsxRuntime.jsx(ArrowsIconClip, {}, void 0), jsxRuntime.jsx(ArrowsSvg, __assign({
|
332
|
-
viewBox: "0 0 32 32",
|
333
|
-
xmlns: "http://www.w3.org/2000/svg",
|
334
|
-
"aria-hidden": "true",
|
335
|
-
role: "presentation",
|
336
|
-
focusable: "false"
|
337
|
-
}, {
|
338
|
-
children: jsxRuntime.jsx("g", __assign({
|
339
|
-
fill: "none"
|
340
|
-
}, {
|
341
|
-
children: jsxRuntime.jsx("path", {
|
342
|
-
d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
|
343
|
-
}, void 0)
|
344
|
-
}), void 0)
|
345
|
-
}), void 0)]
|
346
|
-
}), void 0)
|
347
|
-
}), void 0)]
|
348
|
-
}, void 0)
|
349
|
-
}), void 0)]
|
350
|
-
}, void 0)]
|
351
|
-
}, void 0), jsxRuntime.jsx(CarouselSwiper$2, __assign({}, props, {
|
352
|
-
onInit: function (swiper) {
|
353
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
354
|
-
// @ts-ignore
|
355
|
-
// eslint-disable-next-line no-param-reassign
|
356
|
-
swiper.params.navigation.prevEl = prevRef.current; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
357
|
-
// @ts-ignore
|
358
|
-
// eslint-disable-next-line no-param-reassign
|
359
|
-
|
360
|
-
swiper.params.navigation.nextEl = nextRef.current;
|
361
|
-
swiper.navigation.init();
|
362
|
-
swiper.navigation.update(); // console.log("Swiper", swiper);
|
363
|
-
}
|
364
|
-
}, {
|
365
|
-
children: React__default["default"].Children.map(children, function (child) {
|
366
|
-
return jsxRuntime.jsx(react.SwiperSlide, {
|
367
|
-
children: child
|
368
|
-
}, void 0);
|
369
|
-
})
|
370
|
-
}), void 0)]
|
371
|
-
}, void 0);
|
372
|
-
};
|
373
|
-
|
374
|
-
var CarouselSwiper$1 = /*#__PURE__*/styled__default["default"](react.Swiper).withConfig({
|
375
|
-
displayName: "styles__CarouselSwiper",
|
376
|
-
componentId: "sc-y1spms-0"
|
377
|
-
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n .swiper-wrapper {\n box-sizing: inherit !important;\n @media (min-width: 744px) {\n scroll-padding: 40px !important;\n }\n @media (min-width: 1128px) {\n --scroll-padding: max(80px, calc((100vw - 1600px) / 2)) !important;\n scroll-padding: var(--scroll-padding) !important;\n }\n scroll-snap-type: x mandatory !important;\n overflow-x: auto !important;\n display: flex !important;\n scroll-padding: 24px !important;\n\n .swiper-slide {\n @media (min-width: 744px) {\n min-width: 476px !important;\n max-width: 588px !important;\n flex: 1 0 calc((100% - 80px) * 0.75) !important;\n }\n @media (min-width: 1128px) {\n flex: 1 0 calc(50% - 88px) !important;\n }\n\n margin-left: 16px !important;\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n }\n .swiper-slide:first-of-type {\n @media (min-width: 744px) {\n padding-left: 40px !important;\n min-width: calc(516px) !important;\n max-width: calc(628px) !important;\n flex: 1 0 calc((100% - 80px) * 0.75 + 40px) !important;\n }\n @media (min-width: 1128px) {\n max-width: calc(588px + max(80px, (100vw - 1600px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-left: max(80px, (100vw - 1620px) / 2) !important;\n }\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n margin-left: 0px !important;\n padding-left: 24px !important;\n }\n .swiper-slide:last-of-type {\n @media (min-width: 744px) {\n padding-right: 40px !important;\n min-width: calc(516px) !important;\n max-width: calc(628px) !important;\n flex: 1 0 calc((100% - 80px) * 0.75 + 40px) !important;\n }\n @media (min-width: 1128px) {\n max-width: calc(588px + max(80px, (100vw - 1620px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-right: max(80px, (100vw - 1600px) / 2) !important;\n }\n margin-left: 16px !important;\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n padding-right: 24px !important;\n }\n }\n"], ["\n .swiper-wrapper {\n box-sizing: inherit !important;\n @media (min-width: 744px) {\n scroll-padding: 40px !important;\n }\n @media (min-width: 1128px) {\n --scroll-padding: max(80px, calc((100vw - 1600px) / 2)) !important;\n scroll-padding: var(--scroll-padding) !important;\n }\n scroll-snap-type: x mandatory !important;\n overflow-x: auto !important;\n display: flex !important;\n scroll-padding: 24px !important;\n\n .swiper-slide {\n @media (min-width: 744px) {\n min-width: 476px !important;\n max-width: 588px !important;\n flex: 1 0 calc((100% - 80px) * 0.75) !important;\n }\n @media (min-width: 1128px) {\n flex: 1 0 calc(50% - 88px) !important;\n }\n\n margin-left: 16px !important;\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n }\n .swiper-slide:first-of-type {\n @media (min-width: 744px) {\n padding-left: 40px !important;\n min-width: calc(516px) !important;\n max-width: calc(628px) !important;\n flex: 1 0 calc((100% - 80px) * 0.75 + 40px) !important;\n }\n @media (min-width: 1128px) {\n max-width: calc(588px + max(80px, (100vw - 1600px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-left: max(80px, (100vw - 1620px) / 2) !important;\n }\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n margin-left: 0px !important;\n padding-left: 24px !important;\n }\n .swiper-slide:last-of-type {\n @media (min-width: 744px) {\n padding-right: 40px !important;\n min-width: calc(516px) !important;\n max-width: calc(628px) !important;\n flex: 1 0 calc((100% - 80px) * 0.75 + 40px) !important;\n }\n @media (min-width: 1128px) {\n max-width: calc(588px + max(80px, (100vw - 1620px) / 2)) !important;\n flex: 1 0 calc(50% - 8px) !important;\n padding-right: max(80px, (100vw - 1600px) / 2) !important;\n }\n margin-left: 16px !important;\n flex: 1 0 calc(100% - 84px) !important;\n scroll-snap-align: start !important;\n scroll-snap-stop: always !important;\n padding-right: 24px !important;\n }\n }\n"])));
|
378
|
-
var templateObject_1$1;
|
379
|
-
|
380
|
-
SwiperCore__default["default"].use([SwiperCore.Navigation]);
|
381
|
-
var FreeCarousel = function FreeCarousel(_a) {
|
382
|
-
var children = _a.children,
|
383
|
-
navigation = _a.navigation,
|
384
|
-
title = _a.title,
|
385
|
-
controls = _a.controls;
|
386
|
-
_a.quickLink;
|
387
|
-
var onShowMore = _a.onShowMore,
|
388
|
-
props = __rest(_a, ["children", "navigation", "title", "controls", "quickLink", "onShowMore"]);
|
389
|
-
|
390
|
-
var prevRef = React.useRef(null);
|
391
|
-
var nextRef = React.useRef(null);
|
392
|
-
return jsxRuntime.jsxs(CarouselContainer, {
|
393
|
-
children: [jsxRuntime.jsx("div", __assign({
|
394
|
-
css: "\n @media (max-width: 744px) {\n display: none !important;\n }\n "
|
395
|
-
}, {
|
396
|
-
children: jsxRuntime.jsx(layout.Container, {
|
397
|
-
children: navigation && jsxRuntime.jsxs(CarouselNavbar, {
|
398
|
-
children: [title && jsxRuntime.jsx(NavbarTitleContainer, {
|
399
|
-
children: title
|
400
|
-
}, void 0), controls && jsxRuntime.jsxs(NavbarControlsContainer, {
|
401
|
-
children: [onShowMore && jsxRuntime.jsx(NavbarControlsQuick, __assign({
|
402
|
-
onClick: onShowMore
|
403
|
-
}, {
|
404
|
-
children: "Show More"
|
405
|
-
}), void 0), jsxRuntime.jsx(NavbarControlsSpace, {}, void 0), jsxRuntime.jsx(ArrowsContainer, __assign({
|
406
|
-
"aria-hidden": "false"
|
407
|
-
}, {
|
408
|
-
children: jsxRuntime.jsxs(ArrowsFlex, {
|
409
|
-
children: [jsxRuntime.jsx(ArrowsButton, __assign({
|
410
|
-
ref: prevRef,
|
411
|
-
"aria-label": "Previous",
|
412
|
-
type: "button"
|
413
|
-
}, {
|
414
|
-
children: jsxRuntime.jsxs("span", __assign({
|
415
|
-
css: "\n position: relative;\n "
|
416
|
-
}, {
|
417
|
-
children: [jsxRuntime.jsx(ArrowsIconClip, {}, void 0), jsxRuntime.jsx(ArrowsSvg, __assign({
|
418
|
-
viewBox: "0 0 32 32",
|
419
|
-
xmlns: "http://www.w3.org/2000/svg",
|
420
|
-
"aria-hidden": "true",
|
421
|
-
role: "presentation",
|
422
|
-
focusable: "false"
|
423
|
-
}, {
|
424
|
-
children: jsxRuntime.jsx("g", __assign({
|
425
|
-
fill: "none"
|
426
|
-
}, {
|
427
|
-
children: jsxRuntime.jsx("path", {
|
428
|
-
d: "m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932"
|
429
|
-
}, void 0)
|
430
|
-
}), void 0)
|
431
|
-
}), void 0)]
|
432
|
-
}), void 0)
|
433
|
-
}), void 0), jsxRuntime.jsx(ArrowsDivider, {}, void 0), jsxRuntime.jsx(ArrowsButton, __assign({
|
434
|
-
"aria-label": "Next",
|
435
|
-
type: "button",
|
436
|
-
ref: nextRef
|
437
|
-
}, {
|
438
|
-
children: jsxRuntime.jsxs("span", __assign({
|
439
|
-
css: "\n position: relative;\n "
|
440
|
-
}, {
|
441
|
-
children: [jsxRuntime.jsx(ArrowsIconClip, {}, void 0), jsxRuntime.jsx(ArrowsSvg, __assign({
|
442
|
-
viewBox: "0 0 32 32",
|
443
|
-
xmlns: "http://www.w3.org/2000/svg",
|
444
|
-
"aria-hidden": "true",
|
445
|
-
role: "presentation",
|
446
|
-
focusable: "false"
|
447
|
-
}, {
|
448
|
-
children: jsxRuntime.jsx("g", __assign({
|
449
|
-
fill: "none"
|
450
|
-
}, {
|
451
|
-
children: jsxRuntime.jsx("path", {
|
452
|
-
d: "m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932"
|
453
|
-
}, void 0)
|
454
|
-
}), void 0)
|
455
|
-
}), void 0)]
|
456
|
-
}), void 0)
|
457
|
-
}), void 0)]
|
458
|
-
}, void 0)
|
459
|
-
}), void 0)]
|
460
|
-
}, void 0)]
|
461
|
-
}, void 0)
|
462
|
-
}, void 0)
|
463
|
-
}), void 0), jsxRuntime.jsx(CarouselSwiper$1, __assign({}, props, {
|
464
|
-
cssMode: true,
|
465
|
-
onInit: function (swiper) {
|
466
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
467
|
-
// @ts-ignore
|
468
|
-
// eslint-disable-next-line no-param-reassign
|
469
|
-
swiper.params.navigation.prevEl = prevRef.current; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
470
|
-
// @ts-ignore
|
471
|
-
// eslint-disable-next-line no-param-reassign
|
472
|
-
|
473
|
-
swiper.params.navigation.nextEl = nextRef.current;
|
474
|
-
swiper.navigation.init();
|
475
|
-
swiper.navigation.update(); // console.log("Swiper", swiper);
|
476
|
-
}
|
477
|
-
}, {
|
478
|
-
children: React__default["default"].Children.map(children, function (child) {
|
479
|
-
return jsxRuntime.jsx(react.SwiperSlide, {
|
480
|
-
children: child
|
481
|
-
}, void 0);
|
482
|
-
})
|
483
|
-
}), void 0)]
|
484
|
-
}, void 0);
|
485
|
-
};
|
486
|
-
|
487
|
-
/*#__PURE__*/styled__default["default"].div.withConfig({
|
488
|
-
displayName: "styles__CarouselContainer",
|
489
|
-
componentId: "sc-jtjv4e-0"
|
490
|
-
})(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
491
|
-
var CarouselSwiper = /*#__PURE__*/styled__default["default"](react.Swiper).withConfig({
|
492
|
-
displayName: "styles__CarouselSwiper",
|
493
|
-
componentId: "sc-jtjv4e-1"
|
494
|
-
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n .swiper-pagination {\n .swiper-pagination-bullet-active {\n background-color: #fff;\n }\n .swiper-pagination-bullet-active-next {\n background-color: #ffffff;\n }\n .swiper-pagination-bullet {\n background-color: #ffffff;\n }\n }\n"], ["\n height: 100%;\n .swiper-pagination {\n .swiper-pagination-bullet-active {\n background-color: #fff;\n }\n .swiper-pagination-bullet-active-next {\n background-color: #ffffff;\n }\n .swiper-pagination-bullet {\n background-color: #ffffff;\n }\n }\n"])));
|
495
|
-
var CarouselButton = /*#__PURE__*/styled__default["default"](ButtonUnstyled__default["default"]).withConfig({
|
496
|
-
displayName: "styles__CarouselButton",
|
497
|
-
componentId: "sc-jtjv4e-2"
|
498
|
-
})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n :hover {\n border-color: rgba(0, 0, 0, 0.08) !important;\n background-color: #ffffff !important;\n color: #000000 !important;\n box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,\n 0px 6px 16px rgb(0 0 0 / 12%) !important;\n -webkit-transform: scale(1.04) !important;\n -ms-transform: scale(1.04) !important;\n transform: scale(1.04) !important;\n }\n\n -webkit-box-pack: center !important;\n -ms-flex-pack: center !important;\n -webkit-box-align: center !important;\n -ms-flex-align: center !important;\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n appearance: none !important;\n display: -webkit-inline-box !important;\n display: -moz-inline-box !important;\n display: -ms-inline-flexbox !important;\n display: -webkit-inline-flex !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: 0px !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: #222222 !important;\n background-color: rgba(255, 255, 255, 0.9) !important;\n cursor: pointer !important;\n -ms-touch-action: manipulation !important;\n touch-action: manipulation !important;\n -webkit-align-items: center !important;\n align-items: center !important;\n -webkit-justify-content: center !important;\n justify-content: center !important;\n border-style: solid !important;\n border-width: 1px !important;\n background-clip: padding-box !important;\n border-color: rgba(0, 0, 0, 0.08) !important;\n box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,\n 0px 2px 4px rgb(0 0 0 / 18%) !important;\n -webkit-transition: -webkit-transform 0.25s ease, transform 0.25s ease !important;\n -moz-transition: transform 0.25s ease !important;\n transition: -ms-transform 0.25s ease, -webkit-transform 0.25s ease,\n transform 0.25s ease !important;\n width: 32px !important;\n height: 32px !important;\n"], ["\n :hover {\n border-color: rgba(0, 0, 0, 0.08) !important;\n background-color: #ffffff !important;\n color: #000000 !important;\n box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,\n 0px 6px 16px rgb(0 0 0 / 12%) !important;\n -webkit-transform: scale(1.04) !important;\n -ms-transform: scale(1.04) !important;\n transform: scale(1.04) !important;\n }\n\n -webkit-box-pack: center !important;\n -ms-flex-pack: center !important;\n -webkit-box-align: center !important;\n -ms-flex-align: center !important;\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n appearance: none !important;\n display: -webkit-inline-box !important;\n display: -moz-inline-box !important;\n display: -ms-inline-flexbox !important;\n display: -webkit-inline-flex !important;\n display: inline-flex !important;\n border-radius: 50% !important;\n border: 0px !important;\n outline: none !important;\n margin: 0px !important;\n padding: 0px !important;\n color: #222222 !important;\n background-color: rgba(255, 255, 255, 0.9) !important;\n cursor: pointer !important;\n -ms-touch-action: manipulation !important;\n touch-action: manipulation !important;\n -webkit-align-items: center !important;\n align-items: center !important;\n -webkit-justify-content: center !important;\n justify-content: center !important;\n border-style: solid !important;\n border-width: 1px !important;\n background-clip: padding-box !important;\n border-color: rgba(0, 0, 0, 0.08) !important;\n box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,\n 0px 2px 4px rgb(0 0 0 / 18%) !important;\n -webkit-transition: -webkit-transform 0.25s ease, transform 0.25s ease !important;\n -moz-transition: transform 0.25s ease !important;\n transition: -ms-transform 0.25s ease, -webkit-transform 0.25s ease,\n transform 0.25s ease !important;\n width: 32px !important;\n height: 32px !important;\n"])));
|
499
|
-
var CarouselButtonSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
|
500
|
-
displayName: "styles__CarouselButtonSvg",
|
501
|
-
componentId: "sc-jtjv4e-3"
|
502
|
-
})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 10px;\n width: 10px;\n display: block;\n fill: currentcolor;\n"], ["\n height: 10px;\n width: 10px;\n display: block;\n fill: currentcolor;\n"])));
|
503
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
504
|
-
|
505
|
-
SwiperCore__default["default"].use([SwiperCore.Navigation, SwiperCore.Pagination]);
|
506
|
-
var PaginationCarousel = function PaginationCarousel(_a) {
|
507
|
-
var children = _a.children;
|
508
|
-
_a.navigation;
|
509
|
-
_a.title;
|
510
|
-
_a.controls;
|
511
|
-
var props = __rest(_a, ["children", "navigation", "title", "controls"]);
|
512
|
-
|
513
|
-
var prevRef = React.useRef(null);
|
514
|
-
var nextRef = React.useRef(null);
|
515
|
-
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
516
|
-
children: [jsxRuntime.jsx("div", __assign({
|
517
|
-
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 "
|
518
|
-
}, {
|
519
|
-
children: jsxRuntime.jsx(CarouselButton, __assign({
|
520
|
-
ref: prevRef
|
521
|
-
}, {
|
522
|
-
children: jsxRuntime.jsx("span", __assign({
|
523
|
-
css: "\n position: relative !important;\n "
|
524
|
-
}, {
|
525
|
-
children: jsxRuntime.jsx(CarouselButtonSvg, __assign({
|
526
|
-
viewBox: "0 0 16 16",
|
527
|
-
role: "presentation",
|
528
|
-
"aria-hidden": "true",
|
529
|
-
focusable: "false"
|
530
|
-
}, {
|
531
|
-
children: jsxRuntime.jsx("path", {
|
532
|
-
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"
|
533
|
-
}, void 0)
|
534
|
-
}), void 0)
|
535
|
-
}), void 0)
|
536
|
-
}), void 0)
|
537
|
-
}), void 0), jsxRuntime.jsx("div", __assign({
|
538
|
-
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 "
|
539
|
-
}, {
|
540
|
-
children: jsxRuntime.jsx(CarouselButton, __assign({
|
541
|
-
ref: nextRef
|
542
|
-
}, {
|
543
|
-
children: jsxRuntime.jsx("span", __assign({
|
544
|
-
css: "\n position: relative !important;\n "
|
545
|
-
}, {
|
546
|
-
children: jsxRuntime.jsx(CarouselButtonSvg, __assign({
|
547
|
-
viewBox: "0 0 16 16",
|
548
|
-
role: "presentation",
|
549
|
-
"aria-hidden": "true",
|
550
|
-
focusable: "false"
|
551
|
-
}, {
|
552
|
-
children: jsxRuntime.jsx("path", {
|
553
|
-
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"
|
554
|
-
}, void 0)
|
555
|
-
}), void 0)
|
556
|
-
}), void 0)
|
557
|
-
}), void 0)
|
558
|
-
}), void 0), jsxRuntime.jsx(CarouselSwiper, __assign({}, props, {
|
559
|
-
pagination: {
|
560
|
-
dynamicBullets: true
|
561
|
-
},
|
562
|
-
onInit: function (swiper) {
|
563
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
564
|
-
// @ts-ignore
|
565
|
-
// eslint-disable-next-line no-param-reassign
|
566
|
-
swiper.params.navigation.prevEl = prevRef.current; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
567
|
-
// @ts-ignore
|
568
|
-
// eslint-disable-next-line no-param-reassign
|
569
|
-
|
570
|
-
swiper.params.navigation.nextEl = nextRef.current;
|
571
|
-
swiper.navigation.init();
|
572
|
-
swiper.navigation.update(); // console.log("Swiper", swiper);
|
573
|
-
}
|
574
|
-
}, {
|
575
|
-
children: React__default["default"].Children.map(children, function (child) {
|
576
|
-
return jsxRuntime.jsx(react.SwiperSlide, {
|
577
|
-
children: child
|
578
|
-
}, void 0);
|
579
|
-
})
|
580
|
-
}), void 0)]
|
581
|
-
}, void 0);
|
582
|
-
};
|
583
|
-
|
584
|
-
exports.ButtonsCarousel = ButtonsCarousel;
|
585
|
-
exports.CardCarousel = CardCarousel;
|
586
|
-
exports.FreeCarousel = FreeCarousel;
|
587
|
-
exports.PaginationCarousel = PaginationCarousel;
|
588
|
-
|
589
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
590
|
-
|
591
|
-
}));
|
package/lib/buttons/index.d.ts
DELETED
@@ -1,8 +0,0 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
import { Swiper } from 'swiper/react';
|
3
|
-
export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
4
|
-
export declare const CarouselSwiper: import("styled-components").StyledComponent<import("react").FunctionComponent<Swiper>, any, {}, never>;
|
5
|
-
export declare const CarouselButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
6
|
-
export declare const CarouselButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<any, keyof import("@mui/core/ButtonUnstyled").ButtonUnstyledOwnProps> & {
|
7
|
-
component?: import("react").ElementType<any> | undefined;
|
8
|
-
}, string | number | symbol> & import("react").RefAttributes<any>>, any, any, never>;
|