@asantemedia-org/leybold-design-system 1.0.11 → 1.0.13
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/dist/.next/types/app/layout.d.ts +9 -0
- package/dist/.next/types/app/page.d.ts +9 -0
- package/dist/index.esm.js +855 -805
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +855 -805
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -15,6 +15,45 @@ function _extends() {
|
|
|
15
15
|
}, _extends.apply(null, arguments);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
/******************************************************************************
|
|
19
|
+
Copyright (c) Microsoft Corporation.
|
|
20
|
+
|
|
21
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
22
|
+
purpose with or without fee is hereby granted.
|
|
23
|
+
|
|
24
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
25
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
26
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
27
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
28
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
29
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
30
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
31
|
+
***************************************************************************** */
|
|
32
|
+
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
33
|
+
|
|
34
|
+
var __assign = function () {
|
|
35
|
+
__assign = Object.assign || function __assign(t) {
|
|
36
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
37
|
+
s = arguments[i];
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
39
|
+
}
|
|
40
|
+
return t;
|
|
41
|
+
};
|
|
42
|
+
return __assign.apply(this, arguments);
|
|
43
|
+
};
|
|
44
|
+
function __rest(s, e) {
|
|
45
|
+
var t = {};
|
|
46
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
47
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
48
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
49
|
+
}
|
|
50
|
+
return t;
|
|
51
|
+
}
|
|
52
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
53
|
+
var e = new Error(message);
|
|
54
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
55
|
+
};
|
|
56
|
+
|
|
18
57
|
var styles$h = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--default":"Button-module__button--default___MDa35","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--solid-red":"Button-module__button--solid-red___YPpnL","button--solid-grey":"Button-module__button--solid-grey___oRbEy","button--solid-black":"Button-module__button--solid-black___1Ma5K","button--solid-white":"Button-module__button--solid-white___bE-Z0","button--outlined-red":"Button-module__button--outlined-red___cgZXa","button--outlined-grey":"Button-module__button--outlined-grey___xWGbB","button--outlined-black":"Button-module__button--outlined-black___qfX5o","button--outlined-white":"Button-module__button--outlined-white___QLXNP","button--link-text":"Button-module__button--link-text___R2kun","button__icon":"Button-module__button__icon___hlcHo","button--link-text-alt":"Button-module__button--link-text-alt___1p7wH","button--external-link":"Button-module__button--external-link___Mhxuk","button--carousel-arrow-left":"Button-module__button--carousel-arrow-left___Wx-Jo","button--carousel-arrow-right":"Button-module__button--carousel-arrow-right___3ZtgT","button__icon__default":"Button-module__button__icon__default___0qlF1","button__icon__hover":"Button-module__button__icon__hover___3xPGT","button--extra-small":"Button-module__button--extra-small___R0QTM","button--small":"Button-module__button--small___ADJQe","button--medium":"Button-module__button--medium___ZuR4Z","button--large":"Button-module__button--large___-FaV5","button__icon--left":"Button-module__button__icon--left___wMCeH","button__icon--right":"Button-module__button__icon--right___-pGHl"};
|
|
19
58
|
|
|
20
59
|
function getDefaultExportFromCjs (x) {
|
|
@@ -92,22 +131,10 @@ function requireClassnames() {
|
|
|
92
131
|
var classnamesExports = requireClassnames();
|
|
93
132
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
94
133
|
|
|
95
|
-
/**
|
|
96
|
-
* Button variant types
|
|
97
|
-
*/
|
|
98
|
-
|
|
99
|
-
/**
|
|
100
|
-
* Icon types for button
|
|
101
|
-
*/
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* Icon position
|
|
105
|
-
*/
|
|
106
|
-
|
|
107
134
|
/**
|
|
108
135
|
* Get the icon component based on icon type
|
|
109
136
|
*/
|
|
110
|
-
|
|
137
|
+
var getIcon = function (icon) {
|
|
111
138
|
switch (icon) {
|
|
112
139
|
case "arrow-right":
|
|
113
140
|
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
@@ -129,11 +156,10 @@ const getIcon = icon => {
|
|
|
129
156
|
return null;
|
|
130
157
|
}
|
|
131
158
|
};
|
|
132
|
-
|
|
133
159
|
/**
|
|
134
160
|
* Get default icon for certain variants
|
|
135
161
|
*/
|
|
136
|
-
|
|
162
|
+
var getDefaultIcon = function (variant) {
|
|
137
163
|
switch (variant) {
|
|
138
164
|
case "link-text":
|
|
139
165
|
case "link-text-alt":
|
|
@@ -150,11 +176,10 @@ const getDefaultIcon = variant => {
|
|
|
150
176
|
return "none";
|
|
151
177
|
}
|
|
152
178
|
};
|
|
153
|
-
|
|
154
179
|
/**
|
|
155
180
|
* Map alias variants to their actual CSS class variants
|
|
156
181
|
*/
|
|
157
|
-
|
|
182
|
+
var mapVariantToClass = function (variant) {
|
|
158
183
|
switch (variant) {
|
|
159
184
|
case "outline":
|
|
160
185
|
return "outlined-red";
|
|
@@ -164,42 +189,41 @@ const mapVariantToClass = variant => {
|
|
|
164
189
|
return variant;
|
|
165
190
|
}
|
|
166
191
|
};
|
|
167
|
-
|
|
168
192
|
/**
|
|
169
193
|
* Primary UI component for user interaction
|
|
170
194
|
*/
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
195
|
+
var Button = function (_a) {
|
|
196
|
+
var _b;
|
|
197
|
+
var children = _a.children,
|
|
198
|
+
_c = _a.variant,
|
|
199
|
+
variant = _c === void 0 ? "primary" : _c,
|
|
200
|
+
_d = _a.size,
|
|
201
|
+
size = _d === void 0 ? "medium" : _d,
|
|
202
|
+
_e = _a.disabled,
|
|
203
|
+
disabled = _e === void 0 ? false : _e,
|
|
204
|
+
onClick = _a.onClick,
|
|
205
|
+
_f = _a.type,
|
|
206
|
+
type = _f === void 0 ? "button" : _f,
|
|
207
|
+
className = _a.className,
|
|
208
|
+
icon = _a.icon,
|
|
209
|
+
_g = _a.iconPosition,
|
|
210
|
+
iconPosition = _g === void 0 ? "right" : _g,
|
|
211
|
+
ariaLabel = _a.ariaLabel;
|
|
212
|
+
_a.opensInNewTab;
|
|
213
|
+
var props = __rest(_a, ["children", "variant", "size", "disabled", "onClick", "type", "className", "icon", "iconPosition", "ariaLabel", "opensInNewTab"]);
|
|
185
214
|
// Map alias variants to actual class names
|
|
186
|
-
|
|
187
|
-
|
|
215
|
+
var cssVariant = mapVariantToClass(variant);
|
|
188
216
|
// Determine the icon to display
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
217
|
+
var displayIcon = icon !== null && icon !== void 0 ? icon : getDefaultIcon(variant);
|
|
218
|
+
var iconElement = getIcon(displayIcon);
|
|
192
219
|
// Check if this is an icon-only button (carousel arrows)
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}, className);
|
|
199
|
-
const iconClasses = classNames(styles$h.button__icon, styles$h[`button__icon--${iconPosition}`]);
|
|
200
|
-
|
|
220
|
+
var isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
|
|
221
|
+
var isCarouselLeft = variant === "carousel-arrow-left";
|
|
222
|
+
var isCarouselRight = variant === "carousel-arrow-right";
|
|
223
|
+
var buttonClasses = classNames(styles$h.button, styles$h["button--".concat(cssVariant)], styles$h["button--".concat(size)], (_b = {}, _b[styles$h["button--disabled"]] = disabled, _b), className);
|
|
224
|
+
var iconClasses = classNames(styles$h.button__icon, styles$h["button__icon--".concat(iconPosition)]);
|
|
201
225
|
// Generate accessible label for icon-only buttons
|
|
202
|
-
|
|
226
|
+
var accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
|
|
203
227
|
return /*#__PURE__*/React.createElement("button", _extends({
|
|
204
228
|
type: type,
|
|
205
229
|
className: buttonClasses,
|
|
@@ -234,44 +258,61 @@ var styles$g = {"carousel":"Carousel-module__carousel___hkXkF","carousel__header
|
|
|
234
258
|
* Carousel component for displaying multiple content cards in a sliding format.
|
|
235
259
|
* Supports responsive layouts with 3 cards on desktop and 1 card on mobile.
|
|
236
260
|
*/
|
|
237
|
-
|
|
238
|
-
title,
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
261
|
+
var Carousel = function (_a) {
|
|
262
|
+
var title = _a.title,
|
|
263
|
+
subtitle = _a.subtitle,
|
|
264
|
+
buttonText = _a.buttonText,
|
|
265
|
+
buttonUrl = _a.buttonUrl,
|
|
266
|
+
cards = _a.cards,
|
|
267
|
+
_b = _a.showDots,
|
|
268
|
+
showDots = _b === void 0 ? true : _b,
|
|
269
|
+
_c = _a.showArrows,
|
|
270
|
+
showArrows = _c === void 0 ? true : _c,
|
|
271
|
+
className = _a.className;
|
|
272
|
+
var sliderRef = useRef(null);
|
|
273
|
+
var _d = useState(0),
|
|
274
|
+
currentSlide = _d[0],
|
|
275
|
+
setCurrentSlide = _d[1];
|
|
250
276
|
// Uses document.documentElement.clientWidth to work correctly in iframes (Storybook)
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
277
|
+
var _e = useState(function () {
|
|
278
|
+
if (typeof window !== 'undefined') {
|
|
279
|
+
return document.documentElement.clientWidth < 768;
|
|
280
|
+
}
|
|
281
|
+
return false;
|
|
282
|
+
}),
|
|
283
|
+
isMobile = _e[0],
|
|
284
|
+
setIsMobile = _e[1];
|
|
285
|
+
useEffect(function () {
|
|
286
|
+
var handleResize = function () {
|
|
259
287
|
setIsMobile(document.documentElement.clientWidth < 768);
|
|
260
288
|
};
|
|
261
289
|
window.addEventListener('resize', handleResize);
|
|
262
|
-
return ()
|
|
290
|
+
return function () {
|
|
291
|
+
return window.removeEventListener('resize', handleResize);
|
|
292
|
+
};
|
|
263
293
|
}, []);
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
294
|
+
var handlePrev = function () {
|
|
295
|
+
var _a;
|
|
296
|
+
return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.slickPrev();
|
|
297
|
+
};
|
|
298
|
+
var handleNext = function () {
|
|
299
|
+
var _a;
|
|
300
|
+
return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.slickNext();
|
|
301
|
+
};
|
|
302
|
+
var goToSlide = function (index) {
|
|
303
|
+
var _a;
|
|
304
|
+
return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(index);
|
|
305
|
+
};
|
|
306
|
+
var settings = {
|
|
268
307
|
dots: false,
|
|
269
308
|
infinite: true,
|
|
270
309
|
speed: 500,
|
|
271
310
|
slidesToShow: isMobile ? 1 : 3,
|
|
272
311
|
slidesToScroll: 1,
|
|
273
312
|
arrows: false,
|
|
274
|
-
beforeChange: (_, next)
|
|
313
|
+
beforeChange: function (_, next) {
|
|
314
|
+
return setCurrentSlide(next);
|
|
315
|
+
}
|
|
275
316
|
};
|
|
276
317
|
return /*#__PURE__*/React.createElement("div", {
|
|
277
318
|
className: classNames(styles$g.carousel, className)
|
|
@@ -285,7 +326,9 @@ const Carousel = ({
|
|
|
285
326
|
className: styles$g.carousel__subtitle
|
|
286
327
|
}, subtitle)), buttonText && buttonUrl && /*#__PURE__*/React.createElement(Button, {
|
|
287
328
|
variant: "outlined-black",
|
|
288
|
-
onClick: ()
|
|
329
|
+
onClick: function () {
|
|
330
|
+
return window.location.href = buttonUrl;
|
|
331
|
+
},
|
|
289
332
|
style: {
|
|
290
333
|
minWidth: '215px',
|
|
291
334
|
minHeight: '56px'
|
|
@@ -294,37 +337,43 @@ const Carousel = ({
|
|
|
294
337
|
ref: sliderRef
|
|
295
338
|
}, settings, {
|
|
296
339
|
className: styles$g.carousel__slider
|
|
297
|
-
}), cards.map((card, index)
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
340
|
+
}), cards.map(function (card, index) {
|
|
341
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
342
|
+
key: index,
|
|
343
|
+
className: styles$g.carousel__slideWrapper
|
|
344
|
+
}, /*#__PURE__*/React.createElement("a", {
|
|
345
|
+
href: card.linkUrl,
|
|
346
|
+
className: styles$g.carousel__card,
|
|
347
|
+
"aria-label": "".concat(card.title, " - ").concat(card.linkText)
|
|
348
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
349
|
+
className: styles$g.carousel__cardImageWrapper
|
|
350
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
351
|
+
src: card.imageUrl,
|
|
352
|
+
alt: card.imageAlt,
|
|
353
|
+
className: styles$g.carousel__cardImage
|
|
354
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
355
|
+
className: styles$g.carousel__cardContent
|
|
356
|
+
}, /*#__PURE__*/React.createElement("h3", {
|
|
357
|
+
className: styles$g.carousel__cardTitle
|
|
358
|
+
}, card.title), /*#__PURE__*/React.createElement(Button, {
|
|
359
|
+
variant: "link-text-alt",
|
|
360
|
+
icon: "arrow-right"
|
|
361
|
+
}, card.linkText))));
|
|
310
362
|
})), /*#__PURE__*/React.createElement("div", {
|
|
311
|
-
className: styles$g.carousel__cardContent
|
|
312
|
-
}, /*#__PURE__*/React.createElement("h3", {
|
|
313
|
-
className: styles$g.carousel__cardTitle
|
|
314
|
-
}, card.title), /*#__PURE__*/React.createElement(Button, {
|
|
315
|
-
variant: "link-text-alt",
|
|
316
|
-
icon: "arrow-right"
|
|
317
|
-
}, card.linkText)))))), /*#__PURE__*/React.createElement("div", {
|
|
318
363
|
className: styles$g.carousel__navigation
|
|
319
364
|
}, !isMobile && showDots && /*#__PURE__*/React.createElement("div", {
|
|
320
365
|
className: styles$g.carousel__dotsList
|
|
321
|
-
}, cards.map((_, index)
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
366
|
+
}, cards.map(function (_, index) {
|
|
367
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
368
|
+
key: index,
|
|
369
|
+
type: "button",
|
|
370
|
+
className: classNames(styles$g.carousel__dot, currentSlide === index && styles$g['carousel__dot--active']),
|
|
371
|
+
onClick: function () {
|
|
372
|
+
return goToSlide(index);
|
|
373
|
+
},
|
|
374
|
+
"aria-label": "Go to slide ".concat(index + 1)
|
|
375
|
+
});
|
|
376
|
+
})), showArrows && /*#__PURE__*/React.createElement("div", {
|
|
328
377
|
className: styles$g.carousel__arrows
|
|
329
378
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
330
379
|
variant: "carousel-arrow-left",
|
|
@@ -342,61 +391,59 @@ var styles$f = {"footer":"Footer-module__footer___Oavyx","footer--mobile":"Foote
|
|
|
342
391
|
/**
|
|
343
392
|
* External link icon (↗) for footer links that open in new tabs
|
|
344
393
|
*/
|
|
345
|
-
|
|
346
|
-
className,
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
394
|
+
var ExternalLinkIcon = function (_a) {
|
|
395
|
+
var className = _a.className,
|
|
396
|
+
_b = _a.size,
|
|
397
|
+
size = _b === void 0 ? 15 : _b;
|
|
398
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
399
|
+
width: size,
|
|
400
|
+
height: size,
|
|
401
|
+
viewBox: "0 0 15 15",
|
|
402
|
+
fill: "none",
|
|
403
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
404
|
+
className: className,
|
|
405
|
+
"aria-hidden": "true"
|
|
406
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
407
|
+
d: "M11.25 8.125V11.875C11.25 12.2065 11.1183 12.5245 10.8839 12.7589C10.6495 12.9933 10.3315 13.125 10 13.125H3.125C2.79348 13.125 2.47554 12.9933 2.24112 12.7589C2.0067 12.5245 1.875 12.2065 1.875 11.875V5C1.875 4.66848 2.0067 4.35054 2.24112 4.11612C2.47554 3.8817 2.79348 3.75 3.125 3.75H6.875M9.375 1.875H13.125M13.125 1.875V5.625M13.125 1.875L6.25 8.75",
|
|
408
|
+
stroke: "currentColor",
|
|
409
|
+
strokeWidth: "1.5",
|
|
410
|
+
strokeLinecap: "round",
|
|
411
|
+
strokeLinejoin: "round"
|
|
412
|
+
}));
|
|
413
|
+
};
|
|
363
414
|
|
|
364
415
|
/**
|
|
365
416
|
* Atlas Copco Group badge icon (square)
|
|
366
417
|
*/
|
|
367
|
-
|
|
368
|
-
className,
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
// TYPE DEFINITIONS
|
|
390
|
-
// =============================================================================
|
|
418
|
+
var AtlasCopcoIcon = function (_a) {
|
|
419
|
+
var className = _a.className,
|
|
420
|
+
_b = _a.size,
|
|
421
|
+
size = _b === void 0 ? 14 : _b;
|
|
422
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
423
|
+
width: size,
|
|
424
|
+
height: size,
|
|
425
|
+
viewBox: "0 0 14 14",
|
|
426
|
+
fill: "none",
|
|
427
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
428
|
+
className: className,
|
|
429
|
+
"aria-hidden": "true"
|
|
430
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
431
|
+
x: "0.5",
|
|
432
|
+
y: "0.5",
|
|
433
|
+
width: "13",
|
|
434
|
+
height: "13",
|
|
435
|
+
rx: "1.5",
|
|
436
|
+
fill: "#D9D9D9",
|
|
437
|
+
stroke: "#D9D9D9"
|
|
438
|
+
}));
|
|
439
|
+
};
|
|
391
440
|
|
|
392
441
|
// =============================================================================
|
|
393
442
|
// SOCIAL ICON COMPONENT
|
|
394
443
|
// =============================================================================
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
}) => {
|
|
399
|
-
const iconMap = {
|
|
444
|
+
var SocialIconComponent = function (_a) {
|
|
445
|
+
var platform = _a.platform;
|
|
446
|
+
var iconMap = {
|
|
400
447
|
facebook: faFacebookF,
|
|
401
448
|
x: faXTwitter,
|
|
402
449
|
linkedin: faLinkedinIn,
|
|
@@ -407,19 +454,14 @@ const SocialIconComponent = ({
|
|
|
407
454
|
icon: iconMap[platform]
|
|
408
455
|
});
|
|
409
456
|
};
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
variant = 'default'
|
|
419
|
-
}) => {
|
|
420
|
-
const baseClass = variant === 'bottom' ? styles$f.footer__bottomLink : styles$f.footer__link;
|
|
421
|
-
const linkClasses = classNames(baseClass, className);
|
|
422
|
-
const handleClick = e => {
|
|
457
|
+
var FooterLink = function (_a) {
|
|
458
|
+
var item = _a.item,
|
|
459
|
+
className = _a.className,
|
|
460
|
+
_b = _a.variant,
|
|
461
|
+
variant = _b === void 0 ? 'default' : _b;
|
|
462
|
+
var baseClass = variant === 'bottom' ? styles$f.footer__bottomLink : styles$f.footer__link;
|
|
463
|
+
var linkClasses = classNames(baseClass, className);
|
|
464
|
+
var handleClick = function (e) {
|
|
423
465
|
if (item.onClick) {
|
|
424
466
|
e.preventDefault();
|
|
425
467
|
item.onClick();
|
|
@@ -440,89 +482,71 @@ const FooterLink = ({
|
|
|
440
482
|
size: 15
|
|
441
483
|
})));
|
|
442
484
|
};
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
const FooterLinkGroup = ({
|
|
449
|
-
heading,
|
|
450
|
-
links,
|
|
451
|
-
className,
|
|
452
|
-
children
|
|
453
|
-
}) => {
|
|
485
|
+
var FooterLinkGroup = function (_a) {
|
|
486
|
+
var heading = _a.heading,
|
|
487
|
+
links = _a.links,
|
|
488
|
+
className = _a.className,
|
|
489
|
+
children = _a.children;
|
|
454
490
|
return /*#__PURE__*/React.createElement("div", {
|
|
455
491
|
className: classNames(styles$f.footer__linkGroup, className)
|
|
456
492
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
457
493
|
className: styles$f.footer__linkHeading
|
|
458
494
|
}, heading), /*#__PURE__*/React.createElement("ul", {
|
|
459
495
|
className: styles$f.footer__linkList
|
|
460
|
-
}, links.map((link, index)
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
496
|
+
}, links.map(function (link, index) {
|
|
497
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
498
|
+
key: index
|
|
499
|
+
}, /*#__PURE__*/React.createElement(FooterLink, {
|
|
500
|
+
item: link
|
|
501
|
+
}));
|
|
502
|
+
})), children);
|
|
465
503
|
};
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
// =============================================================================
|
|
470
|
-
|
|
471
|
-
const FooterSocialIcons = ({
|
|
472
|
-
links,
|
|
473
|
-
className
|
|
474
|
-
}) => {
|
|
504
|
+
var FooterSocialIcons = function (_a) {
|
|
505
|
+
var links = _a.links,
|
|
506
|
+
className = _a.className;
|
|
475
507
|
return /*#__PURE__*/React.createElement("div", {
|
|
476
508
|
className: classNames(styles$f.footer__socialIcons, className)
|
|
477
|
-
}, links.map((link, index)
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
509
|
+
}, links.map(function (link, index) {
|
|
510
|
+
return /*#__PURE__*/React.createElement("a", {
|
|
511
|
+
key: index,
|
|
512
|
+
href: link.href,
|
|
513
|
+
className: styles$f.footer__socialIcon,
|
|
514
|
+
"aria-label": link.ariaLabel,
|
|
515
|
+
target: "_blank",
|
|
516
|
+
rel: "noopener noreferrer"
|
|
517
|
+
}, /*#__PURE__*/React.createElement(SocialIconComponent, {
|
|
518
|
+
platform: link.platform
|
|
519
|
+
}));
|
|
520
|
+
}));
|
|
487
521
|
};
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
const FooterSocialIcon = ({
|
|
494
|
-
platform,
|
|
495
|
-
className
|
|
496
|
-
}) => {
|
|
497
|
-
const iconClasses = classNames(styles$f.footer__socialIcon, className);
|
|
522
|
+
var FooterSocialIcon = function (_a) {
|
|
523
|
+
var platform = _a.platform,
|
|
524
|
+
className = _a.className;
|
|
525
|
+
var iconClasses = classNames(styles$f.footer__socialIcon, className);
|
|
498
526
|
return /*#__PURE__*/React.createElement("span", {
|
|
499
527
|
className: iconClasses
|
|
500
528
|
}, /*#__PURE__*/React.createElement(SocialIconComponent, {
|
|
501
529
|
platform: platform
|
|
502
530
|
}));
|
|
503
531
|
};
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
const FooterBottom = ({
|
|
510
|
-
links,
|
|
511
|
-
copyright,
|
|
512
|
-
countrySelector,
|
|
513
|
-
className
|
|
514
|
-
}) => {
|
|
532
|
+
var FooterBottom = function (_a) {
|
|
533
|
+
var links = _a.links,
|
|
534
|
+
copyright = _a.copyright,
|
|
535
|
+
countrySelector = _a.countrySelector,
|
|
536
|
+
className = _a.className;
|
|
515
537
|
return /*#__PURE__*/React.createElement("div", {
|
|
516
538
|
className: classNames(styles$f.footer__bottom, className)
|
|
517
539
|
}, /*#__PURE__*/React.createElement("div", {
|
|
518
540
|
className: styles$f.footer__bottomLeft
|
|
519
541
|
}, /*#__PURE__*/React.createElement("div", {
|
|
520
542
|
className: styles$f.footer__bottomLinks
|
|
521
|
-
}, links.map((link, index)
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
543
|
+
}, links.map(function (link, index) {
|
|
544
|
+
return /*#__PURE__*/React.createElement(FooterLink, {
|
|
545
|
+
key: index,
|
|
546
|
+
item: link,
|
|
547
|
+
variant: "bottom"
|
|
548
|
+
});
|
|
549
|
+
})), /*#__PURE__*/React.createElement("p", {
|
|
526
550
|
className: styles$f.footer__copyright
|
|
527
551
|
}, copyright)), countrySelector && /*#__PURE__*/React.createElement("a", {
|
|
528
552
|
href: countrySelector.href || '#',
|
|
@@ -533,61 +557,61 @@ const FooterBottom = ({
|
|
|
533
557
|
icon: faGlobe
|
|
534
558
|
})), countrySelector.label));
|
|
535
559
|
};
|
|
536
|
-
|
|
537
560
|
// =============================================================================
|
|
538
561
|
// MAIN FOOTER COMPONENT
|
|
539
562
|
// =============================================================================
|
|
540
|
-
|
|
541
563
|
/**
|
|
542
564
|
* Footer component with brand identity, navigation links, social icons, and legal information.
|
|
543
565
|
* Supports two layout variants:
|
|
544
566
|
* - desktop: Logo at top, 3-column main content
|
|
545
567
|
* - mobile: Logo at bottom, stacked layout with CTA button
|
|
546
568
|
*/
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
569
|
+
var Footer = function (_a) {
|
|
570
|
+
var _b = _a.variant,
|
|
571
|
+
variant = _b === void 0 ? 'desktop' : _b,
|
|
572
|
+
logo = _a.logo,
|
|
573
|
+
motto = _a.motto,
|
|
574
|
+
atlasCopcoBadge = _a.atlasCopcoBadge,
|
|
575
|
+
quickLinks = _a.quickLinks,
|
|
576
|
+
_c = _a.quickLinksHeading,
|
|
577
|
+
quickLinksHeading = _c === void 0 ? 'Quick links' : _c,
|
|
578
|
+
contactLinks = _a.contactLinks,
|
|
579
|
+
_d = _a.contactHeading,
|
|
580
|
+
contactHeading = _d === void 0 ? 'Contact us' : _d,
|
|
581
|
+
socialLinks = _a.socialLinks,
|
|
582
|
+
contactFormButton = _a.contactFormButton,
|
|
583
|
+
bottomLinks = _a.bottomLinks,
|
|
584
|
+
copyright = _a.copyright,
|
|
585
|
+
countrySelector = _a.countrySelector,
|
|
586
|
+
className = _a.className;
|
|
587
|
+
var isMobile = variant === 'mobile';
|
|
588
|
+
var footerClasses = classNames(styles$f.footer, isMobile && styles$f['footer--mobile'], className);
|
|
589
|
+
var LogoWrapper = logo.href ? 'a' : 'div';
|
|
590
|
+
var logoProps = logo.href ? {
|
|
567
591
|
href: logo.href,
|
|
568
592
|
className: styles$f.footer__logo
|
|
569
593
|
} : {
|
|
570
594
|
className: styles$f.footer__logo
|
|
571
595
|
};
|
|
572
|
-
|
|
573
596
|
// Logo + Motto + Badge component (used in both layouts)
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
597
|
+
var LogoSection = function () {
|
|
598
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
|
|
599
|
+
src: logo.src,
|
|
600
|
+
alt: logo.alt
|
|
601
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
602
|
+
className: styles$f.footer__leftCol
|
|
603
|
+
}, /*#__PURE__*/React.createElement("h2", {
|
|
604
|
+
className: styles$f.footer__motto
|
|
605
|
+
}, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
|
|
606
|
+
className: styles$f.footer__badge
|
|
607
|
+
}, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
|
|
608
|
+
className: styles$f.footer__badgeIcon
|
|
609
|
+
}, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
|
|
610
|
+
size: 14
|
|
611
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
612
|
+
className: styles$f.footer__badgeText
|
|
613
|
+
}, atlasCopcoBadge.text))));
|
|
614
|
+
};
|
|
591
615
|
// Mobile layout: Links at top, logo/motto at bottom
|
|
592
616
|
if (isMobile) {
|
|
593
617
|
return /*#__PURE__*/React.createElement("footer", {
|
|
@@ -625,7 +649,6 @@ const Footer = ({
|
|
|
625
649
|
className: styles$f.footer__brandSection
|
|
626
650
|
}, /*#__PURE__*/React.createElement(LogoSection, null))));
|
|
627
651
|
}
|
|
628
|
-
|
|
629
652
|
// Desktop layout: Logo at top, 3-column main content
|
|
630
653
|
return /*#__PURE__*/React.createElement("footer", {
|
|
631
654
|
className: footerClasses
|
|
@@ -667,18 +690,17 @@ const Footer = ({
|
|
|
667
690
|
|
|
668
691
|
var styles$e = {"pagination":"Pagination-module__pagination___Kih79","paginationList":"Pagination-module__paginationList___-lZpm","paginationItem":"Pagination-module__paginationItem___VsGFa","pageButton":"Pagination-module__pageButton___b6UNF","pageButtonActive":"Pagination-module__pageButtonActive___D9m18","navButton":"Pagination-module__navButton___ZCIai","navIcon":"Pagination-module__navIcon___-BVJ3","navButton--previous":"Pagination-module__navButton--previous___Cy5TE","navButton--next":"Pagination-module__navButton--next___kTmgK","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
|
|
669
692
|
|
|
670
|
-
|
|
671
|
-
page,
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
const handleClick = () => {
|
|
693
|
+
var PaginationItem = function (_a) {
|
|
694
|
+
var page = _a.page,
|
|
695
|
+
isActive = _a.isActive,
|
|
696
|
+
onClick = _a.onClick,
|
|
697
|
+
className = _a.className;
|
|
698
|
+
var handleClick = function () {
|
|
677
699
|
if (!isActive) {
|
|
678
700
|
onClick(page);
|
|
679
701
|
}
|
|
680
702
|
};
|
|
681
|
-
|
|
703
|
+
var handleKeyDown = function (event) {
|
|
682
704
|
if (event.key === "Enter" || event.key === " ") {
|
|
683
705
|
event.preventDefault();
|
|
684
706
|
handleClick();
|
|
@@ -690,23 +712,22 @@ const PaginationItem = ({
|
|
|
690
712
|
type: "button",
|
|
691
713
|
onClick: handleClick,
|
|
692
714
|
onKeyDown: handleKeyDown,
|
|
693
|
-
className:
|
|
715
|
+
className: "".concat(styles$e.pageButton, " ").concat(isActive ? styles$e.pageButtonActive : "", " ").concat(className || ""),
|
|
694
716
|
"aria-current": isActive ? "page" : undefined,
|
|
695
|
-
"aria-label":
|
|
717
|
+
"aria-label": "Page ".concat(page),
|
|
696
718
|
disabled: isActive,
|
|
697
719
|
tabIndex: isActive ? -1 : 0
|
|
698
720
|
}, page));
|
|
699
721
|
};
|
|
700
722
|
|
|
701
|
-
|
|
702
|
-
label,
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
const handleKeyDown = event => {
|
|
723
|
+
var PaginationButton = function (_a) {
|
|
724
|
+
var label = _a.label,
|
|
725
|
+
disabled = _a.disabled,
|
|
726
|
+
onClick = _a.onClick,
|
|
727
|
+
direction = _a.direction,
|
|
728
|
+
className = _a.className,
|
|
729
|
+
ariaLabel = _a.ariaLabel;
|
|
730
|
+
var handleKeyDown = function (event) {
|
|
710
731
|
if (event.key === "Enter" || event.key === " ") {
|
|
711
732
|
event.preventDefault();
|
|
712
733
|
if (!disabled) {
|
|
@@ -721,7 +742,7 @@ const PaginationButton = ({
|
|
|
721
742
|
onClick: onClick,
|
|
722
743
|
onKeyDown: handleKeyDown,
|
|
723
744
|
disabled: disabled,
|
|
724
|
-
className:
|
|
745
|
+
className: "".concat(styles$e.navButton, " ").concat(styles$e["navButton--".concat(direction)], " ").concat(disabled ? styles$e.navButtonDisabled : "", " ").concat(className || ""),
|
|
725
746
|
"aria-label": ariaLabel || label,
|
|
726
747
|
tabIndex: disabled ? -1 : 0
|
|
727
748
|
}, direction === "previous" && /*#__PURE__*/React.createElement("svg", {
|
|
@@ -755,98 +776,98 @@ const PaginationButton = ({
|
|
|
755
776
|
}))));
|
|
756
777
|
};
|
|
757
778
|
|
|
758
|
-
|
|
759
|
-
className
|
|
760
|
-
}) => {
|
|
779
|
+
var PaginationEllipsis = function (_a) {
|
|
780
|
+
var className = _a.className;
|
|
761
781
|
return /*#__PURE__*/React.createElement("li", {
|
|
762
|
-
className:
|
|
782
|
+
className: "".concat(styles$e.paginationItem, " ").concat(styles$e.ellipsis),
|
|
763
783
|
"aria-hidden": "true"
|
|
764
784
|
}, /*#__PURE__*/React.createElement("span", {
|
|
765
|
-
className:
|
|
785
|
+
className: "".concat(styles$e.ellipsisText, " ").concat(className || "")
|
|
766
786
|
}, "..."));
|
|
767
787
|
};
|
|
768
788
|
|
|
769
789
|
/**
|
|
770
790
|
* Generate page numbers to display with ellipsis logic
|
|
771
791
|
*/
|
|
772
|
-
|
|
792
|
+
var generatePageNumbers = function (currentPage, totalPages, maxVisiblePages) {
|
|
773
793
|
if (totalPages <= maxVisiblePages) {
|
|
774
794
|
return Array.from({
|
|
775
795
|
length: totalPages
|
|
776
|
-
}, (_, i)
|
|
796
|
+
}, function (_, i) {
|
|
797
|
+
return i + 1;
|
|
798
|
+
});
|
|
777
799
|
}
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
800
|
+
var pages = [];
|
|
801
|
+
var halfVisible = Math.floor(maxVisiblePages / 2);
|
|
781
802
|
// Always show first page
|
|
782
803
|
pages.push(1);
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
804
|
+
var startPage = Math.max(2, currentPage - halfVisible);
|
|
805
|
+
var endPage = Math.min(totalPages - 1, currentPage + halfVisible);
|
|
786
806
|
// Adjust if we're near the start
|
|
787
807
|
if (currentPage <= halfVisible + 1) {
|
|
788
808
|
endPage = Math.min(maxVisiblePages - 1, totalPages - 1);
|
|
789
809
|
startPage = 2;
|
|
790
810
|
}
|
|
791
|
-
|
|
792
811
|
// Adjust if we're near the end
|
|
793
812
|
if (currentPage >= totalPages - halfVisible) {
|
|
794
813
|
startPage = Math.max(2, totalPages - maxVisiblePages + 2);
|
|
795
814
|
endPage = totalPages - 1;
|
|
796
815
|
}
|
|
797
|
-
|
|
798
816
|
// Add ellipsis after first page if needed
|
|
799
817
|
if (startPage > 2) {
|
|
800
818
|
pages.push("ellipsis-start");
|
|
801
819
|
}
|
|
802
|
-
|
|
803
820
|
// Add middle pages
|
|
804
|
-
for (
|
|
821
|
+
for (var i = startPage; i <= endPage; i++) {
|
|
805
822
|
pages.push(i);
|
|
806
823
|
}
|
|
807
|
-
|
|
808
824
|
// Add ellipsis before last page if needed
|
|
809
825
|
if (endPage < totalPages - 1) {
|
|
810
826
|
pages.push("ellipsis-end");
|
|
811
827
|
}
|
|
812
|
-
|
|
813
828
|
// Always show last page
|
|
814
829
|
if (totalPages > 1) {
|
|
815
830
|
pages.push(totalPages);
|
|
816
831
|
}
|
|
817
832
|
return pages;
|
|
818
833
|
};
|
|
819
|
-
|
|
820
|
-
currentPage,
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
834
|
+
var Pagination = function (_a) {
|
|
835
|
+
var currentPage = _a.currentPage,
|
|
836
|
+
totalPages = _a.totalPages,
|
|
837
|
+
onPageChange = _a.onPageChange,
|
|
838
|
+
_b = _a.maxVisiblePages,
|
|
839
|
+
maxVisiblePages = _b === void 0 ? 10 : _b,
|
|
840
|
+
_c = _a.showPrevious,
|
|
841
|
+
showPrevious = _c === void 0 ? true : _c,
|
|
842
|
+
_d = _a.showNext,
|
|
843
|
+
showNext = _d === void 0 ? true : _d,
|
|
844
|
+
_e = _a.previousLabel,
|
|
845
|
+
previousLabel = _e === void 0 ? "Previous" : _e,
|
|
846
|
+
_f = _a.nextLabel,
|
|
847
|
+
nextLabel = _f === void 0 ? "Next" : _f,
|
|
848
|
+
className = _a.className,
|
|
849
|
+
_g = _a.ariaLabel,
|
|
850
|
+
ariaLabel = _g === void 0 ? "Pagination" : _g;
|
|
851
|
+
var pageNumbers = useMemo(function () {
|
|
852
|
+
return generatePageNumbers(currentPage, totalPages, maxVisiblePages);
|
|
853
|
+
}, [currentPage, totalPages, maxVisiblePages]);
|
|
854
|
+
var handlePageChange = function (page) {
|
|
833
855
|
if (page >= 1 && page <= totalPages && page !== currentPage) {
|
|
834
856
|
onPageChange(page);
|
|
835
857
|
}
|
|
836
858
|
};
|
|
837
|
-
|
|
859
|
+
var handlePrevious = function () {
|
|
838
860
|
handlePageChange(currentPage - 1);
|
|
839
861
|
};
|
|
840
|
-
|
|
862
|
+
var handleNext = function () {
|
|
841
863
|
handlePageChange(currentPage + 1);
|
|
842
864
|
};
|
|
843
|
-
|
|
844
865
|
// Don't render if there's only one page or no pages
|
|
845
866
|
if (totalPages <= 1) {
|
|
846
867
|
return null;
|
|
847
868
|
}
|
|
848
869
|
return /*#__PURE__*/React.createElement("nav", {
|
|
849
|
-
className:
|
|
870
|
+
className: "".concat(styles$e.pagination, " ").concat(className || ""),
|
|
850
871
|
"aria-label": ariaLabel,
|
|
851
872
|
role: "navigation"
|
|
852
873
|
}, /*#__PURE__*/React.createElement("ul", {
|
|
@@ -857,10 +878,10 @@ const Pagination = ({
|
|
|
857
878
|
onClick: handlePrevious,
|
|
858
879
|
direction: "previous",
|
|
859
880
|
ariaLabel: "Go to previous page"
|
|
860
|
-
}), pageNumbers.map((page, index)
|
|
881
|
+
}), pageNumbers.map(function (page, index) {
|
|
861
882
|
if (page === "ellipsis-start" || page === "ellipsis-end") {
|
|
862
883
|
return /*#__PURE__*/React.createElement(PaginationEllipsis, {
|
|
863
|
-
key:
|
|
884
|
+
key: "ellipsis-".concat(index)
|
|
864
885
|
});
|
|
865
886
|
}
|
|
866
887
|
return /*#__PURE__*/React.createElement(PaginationItem, {
|
|
@@ -882,71 +903,76 @@ var styles$d = {"productCard":"ProductCardHorizontal-module__productCard___Nl4jK
|
|
|
882
903
|
|
|
883
904
|
var styles$c = {"imageContainer":"Image-module__imageContainer___iD5Kd","loading":"Image-module__loading___Sh1zO","image":"Image-module__image___1pa50","error":"Image-module__error___0LGZ2","skeleton":"Image-module__skeleton___0bGS6","shimmer":"Image-module__shimmer___aanrl","errorState":"Image-module__errorState___TjV-8","errorIcon":"Image-module__errorIcon___QCKvj","errorText":"Image-module__errorText___Q8pnb"};
|
|
884
905
|
|
|
885
|
-
|
|
886
|
-
src,
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
906
|
+
var Image = function (_a) {
|
|
907
|
+
var src = _a.src,
|
|
908
|
+
alt = _a.alt,
|
|
909
|
+
width = _a.width,
|
|
910
|
+
height = _a.height,
|
|
911
|
+
_b = _a.loading,
|
|
912
|
+
loading = _b === void 0 ? "lazy" : _b,
|
|
913
|
+
_c = _a.decoding,
|
|
914
|
+
decoding = _c === void 0 ? "async" : _c,
|
|
915
|
+
_d = _a.objectFit,
|
|
916
|
+
objectFit = _d === void 0 ? "cover" : _d,
|
|
917
|
+
_e = _a.objectPosition,
|
|
918
|
+
objectPosition = _e === void 0 ? "center" : _e,
|
|
919
|
+
aspectRatio = _a.aspectRatio,
|
|
920
|
+
_f = _a.isDecorative,
|
|
921
|
+
isDecorative = _f === void 0 ? false : _f,
|
|
922
|
+
fallbackSrc = _a.fallbackSrc,
|
|
923
|
+
onLoad = _a.onLoad,
|
|
924
|
+
onError = _a.onError,
|
|
925
|
+
_g = _a.className,
|
|
926
|
+
className = _g === void 0 ? "" : _g,
|
|
927
|
+
srcSet = _a.srcSet,
|
|
928
|
+
sizes = _a.sizes;
|
|
929
|
+
var _h = useState(true),
|
|
930
|
+
isLoading = _h[0],
|
|
931
|
+
setIsLoading = _h[1];
|
|
932
|
+
var _j = useState(false),
|
|
933
|
+
hasError = _j[0],
|
|
934
|
+
setHasError = _j[1];
|
|
935
|
+
var _k = useState(src),
|
|
936
|
+
currentSrc = _k[0],
|
|
937
|
+
setCurrentSrc = _k[1];
|
|
938
|
+
var handleLoad = useCallback(function () {
|
|
907
939
|
setIsLoading(false);
|
|
908
940
|
setHasError(false);
|
|
909
|
-
onLoad
|
|
941
|
+
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
910
942
|
}, [onLoad]);
|
|
911
|
-
|
|
943
|
+
var handleError = useCallback(function () {
|
|
912
944
|
setIsLoading(false);
|
|
913
945
|
setHasError(true);
|
|
914
|
-
|
|
915
946
|
// Try fallback if available and not already using it
|
|
916
947
|
if (fallbackSrc && currentSrc !== fallbackSrc) {
|
|
917
948
|
setCurrentSrc(fallbackSrc);
|
|
918
949
|
setHasError(false);
|
|
919
950
|
setIsLoading(true);
|
|
920
951
|
} else {
|
|
921
|
-
onError
|
|
952
|
+
onError === null || onError === void 0 ? void 0 : onError();
|
|
922
953
|
}
|
|
923
954
|
}, [fallbackSrc, currentSrc, onError]);
|
|
924
|
-
|
|
925
955
|
// Accessibility: decorative images should have empty alt and be hidden from screen readers
|
|
926
|
-
|
|
956
|
+
var accessibilityProps = isDecorative ? {
|
|
927
957
|
alt: "",
|
|
928
958
|
"aria-hidden": true,
|
|
929
959
|
role: "presentation"
|
|
930
960
|
} : {
|
|
931
|
-
alt
|
|
932
|
-
};
|
|
933
|
-
const containerStyle = {
|
|
934
|
-
...(aspectRatio && {
|
|
935
|
-
aspectRatio
|
|
936
|
-
}),
|
|
937
|
-
...(width && {
|
|
938
|
-
width: typeof width === "number" ? `${width}px` : width
|
|
939
|
-
}),
|
|
940
|
-
...(height && {
|
|
941
|
-
height: typeof height === "number" ? `${height}px` : height
|
|
942
|
-
})
|
|
961
|
+
alt: alt
|
|
943
962
|
};
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
963
|
+
var containerStyle = __assign(__assign(__assign({}, aspectRatio && {
|
|
964
|
+
aspectRatio: aspectRatio
|
|
965
|
+
}), width && {
|
|
966
|
+
width: typeof width === "number" ? "".concat(width, "px") : width
|
|
967
|
+
}), height && {
|
|
968
|
+
height: typeof height === "number" ? "".concat(height, "px") : height
|
|
969
|
+
});
|
|
970
|
+
var imageStyle = {
|
|
971
|
+
objectFit: objectFit,
|
|
972
|
+
objectPosition: objectPosition
|
|
947
973
|
};
|
|
948
974
|
return /*#__PURE__*/React.createElement("div", {
|
|
949
|
-
className:
|
|
975
|
+
className: "".concat(styles$c.imageContainer, " ").concat(className, " ").concat(isLoading ? styles$c.loading : "", " ").concat(hasError ? styles$c.error : ""),
|
|
950
976
|
style: containerStyle
|
|
951
977
|
}, isLoading && /*#__PURE__*/React.createElement("div", {
|
|
952
978
|
className: styles$c.skeleton,
|
|
@@ -998,25 +1024,25 @@ const Image = ({
|
|
|
998
1024
|
})));
|
|
999
1025
|
};
|
|
1000
1026
|
|
|
1001
|
-
|
|
1002
|
-
id
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1027
|
+
var ProductCardHorizontal = function (_a) {
|
|
1028
|
+
_a.id;
|
|
1029
|
+
var imageUrl = _a.imageUrl,
|
|
1030
|
+
url = _a.url,
|
|
1031
|
+
title = _a.title,
|
|
1032
|
+
description = _a.description,
|
|
1033
|
+
price = _a.price,
|
|
1034
|
+
button = _a.button,
|
|
1035
|
+
_b = _a.className,
|
|
1036
|
+
className = _b === void 0 ? "" : _b;
|
|
1011
1037
|
if (!title) {
|
|
1012
1038
|
return null;
|
|
1013
1039
|
}
|
|
1014
1040
|
return /*#__PURE__*/React.createElement("a", {
|
|
1015
1041
|
href: url,
|
|
1016
|
-
className:
|
|
1017
|
-
"aria-label":
|
|
1042
|
+
className: "".concat(styles$d.productCard, " ").concat(className),
|
|
1043
|
+
"aria-label": "View product: ".concat(title)
|
|
1018
1044
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1019
|
-
className:
|
|
1045
|
+
className: "".concat(styles$d.productWrapper, " ").concat(imageUrl ? styles$d.withImage : "")
|
|
1020
1046
|
}, imageUrl && /*#__PURE__*/React.createElement("div", {
|
|
1021
1047
|
className: styles$d.productImage
|
|
1022
1048
|
}, /*#__PURE__*/React.createElement(Image, {
|
|
@@ -1038,57 +1064,55 @@ const ProductCardHorizontal = ({
|
|
|
1038
1064
|
size: "extra-small"
|
|
1039
1065
|
}, button.label))));
|
|
1040
1066
|
};
|
|
1041
|
-
|
|
1042
1067
|
// Alias for backward compatibility
|
|
1043
|
-
|
|
1068
|
+
var ProductCardHorizontalParts = ProductCardHorizontal;
|
|
1044
1069
|
|
|
1045
1070
|
var styles$b = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l"};
|
|
1046
1071
|
|
|
1047
1072
|
// Adapter to map design system props to ProductCardHorizontalParts props
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
spare
|
|
1051
|
-
...rest
|
|
1052
|
-
} = props;
|
|
1073
|
+
var SpareCardAdapter = function (props) {
|
|
1074
|
+
var spare = props.spare,
|
|
1075
|
+
rest = __rest(props, ["spare"]);
|
|
1053
1076
|
return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
|
|
1054
|
-
url: spare
|
|
1055
|
-
title: spare
|
|
1056
|
-
description: spare
|
|
1057
|
-
price: spare
|
|
1058
|
-
imageUrl: spare
|
|
1077
|
+
url: (spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#",
|
|
1078
|
+
title: (spare === null || spare === void 0 ? void 0 : spare.name) || (spare === null || spare === void 0 ? void 0 : spare.title) || "",
|
|
1079
|
+
description: (spare === null || spare === void 0 ? void 0 : spare.description) || "",
|
|
1080
|
+
price: (spare === null || spare === void 0 ? void 0 : spare.priceValue) || (spare === null || spare === void 0 ? void 0 : spare.price) || "",
|
|
1081
|
+
imageUrl: (spare === null || spare === void 0 ? void 0 : spare["img-product"]) || (spare === null || spare === void 0 ? void 0 : spare.image) || "",
|
|
1059
1082
|
button: {
|
|
1060
1083
|
label: rest.cta || "View Product",
|
|
1061
|
-
onClick: ()
|
|
1084
|
+
onClick: function () {
|
|
1085
|
+
return window.open((spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#", "_blank");
|
|
1086
|
+
}
|
|
1062
1087
|
}
|
|
1063
1088
|
});
|
|
1064
1089
|
};
|
|
1065
|
-
|
|
1066
1090
|
// Re-export the design system component with Leybold styling
|
|
1067
|
-
|
|
1068
|
-
id,
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1091
|
+
var ProductCardDetails = function (_a) {
|
|
1092
|
+
var id = _a.id,
|
|
1093
|
+
imageUrl = _a.imageUrl,
|
|
1094
|
+
title = _a.title,
|
|
1095
|
+
description = _a.description,
|
|
1096
|
+
price = _a.price,
|
|
1097
|
+
code = _a.code,
|
|
1098
|
+
facets = _a.facets,
|
|
1099
|
+
hit = _a.hit,
|
|
1100
|
+
_b = _a.className,
|
|
1101
|
+
className = _b === void 0 ? "" : _b,
|
|
1102
|
+
ProductCardComponent = _a.ProductCardComponent;
|
|
1079
1103
|
// Build the hit object expected by ProductDetailsCard
|
|
1080
|
-
|
|
1081
|
-
id,
|
|
1082
|
-
title,
|
|
1083
|
-
description,
|
|
1084
|
-
price,
|
|
1085
|
-
code,
|
|
1104
|
+
var hitData = hit || {
|
|
1105
|
+
id: id,
|
|
1106
|
+
title: title,
|
|
1107
|
+
description: description,
|
|
1108
|
+
price: price,
|
|
1109
|
+
code: code,
|
|
1086
1110
|
image: imageUrl
|
|
1087
1111
|
};
|
|
1088
1112
|
return /*#__PURE__*/React.createElement("div", {
|
|
1089
1113
|
className: styles$b.productDetails
|
|
1090
1114
|
}, /*#__PURE__*/React.createElement(ProductDetailsCard, {
|
|
1091
|
-
className:
|
|
1115
|
+
className: "".concat(className),
|
|
1092
1116
|
title: title,
|
|
1093
1117
|
imageUrl: imageUrl,
|
|
1094
1118
|
imageAlt: title,
|
|
@@ -1101,25 +1125,23 @@ const ProductCardDetails = ({
|
|
|
1101
1125
|
|
|
1102
1126
|
// Adapter component that maps props from AlgoliaDynamicSearchRaw to ProductCardHorizontal
|
|
1103
1127
|
// AlgoliaDynamicSearchRaw passes: title, cardLink, productPrice, cta, hit (original data)
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
code
|
|
1114
|
-
} = props;
|
|
1128
|
+
var ProductCardAdapter = function (props) {
|
|
1129
|
+
var hit = props.hit,
|
|
1130
|
+
title = props.title,
|
|
1131
|
+
cardLink = props.cardLink,
|
|
1132
|
+
productPrice = props.productPrice,
|
|
1133
|
+
cta = props.cta,
|
|
1134
|
+
showProductPrice = props.showProductPrice,
|
|
1135
|
+
className = props.className,
|
|
1136
|
+
code = props.code;
|
|
1115
1137
|
console.log(props);
|
|
1116
1138
|
// Get values from direct props or fallback to hit object
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1139
|
+
var url = cardLink || (hit === null || hit === void 0 ? void 0 : hit.link) || "#";
|
|
1140
|
+
var imageUrl = "";
|
|
1141
|
+
var price = showProductPrice ? productPrice || (hit === null || hit === void 0 ? void 0 : hit.price) || "" : "";
|
|
1142
|
+
var productTitle = title || (hit === null || hit === void 0 ? void 0 : hit.title) || "";
|
|
1143
|
+
var productCode = code || (hit === null || hit === void 0 ? void 0 : hit.code) || "";
|
|
1144
|
+
var buttonLabel = cta || "View Product";
|
|
1123
1145
|
return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
|
|
1124
1146
|
imageUrl: imageUrl,
|
|
1125
1147
|
url: url,
|
|
@@ -1128,41 +1150,41 @@ const ProductCardAdapter = props => {
|
|
|
1128
1150
|
price: price,
|
|
1129
1151
|
button: {
|
|
1130
1152
|
label: buttonLabel,
|
|
1131
|
-
onClick: ()
|
|
1153
|
+
onClick: function () {
|
|
1154
|
+
return window.open(url, "_blank");
|
|
1155
|
+
}
|
|
1132
1156
|
},
|
|
1133
1157
|
className: className
|
|
1134
1158
|
});
|
|
1135
1159
|
};
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
related_products
|
|
1148
|
-
} = props;
|
|
1160
|
+
var ProductCardDetailsAdapter = function (props) {
|
|
1161
|
+
var hit = props.hit,
|
|
1162
|
+
title = props.title;
|
|
1163
|
+
props.cardLink;
|
|
1164
|
+
var productPrice = props.productPrice;
|
|
1165
|
+
props.cta;
|
|
1166
|
+
props.showProductPrice;
|
|
1167
|
+
var className = props.className,
|
|
1168
|
+
code = props.code,
|
|
1169
|
+
facets = props.facets,
|
|
1170
|
+
related_products = props.related_products;
|
|
1149
1171
|
if (!title) {
|
|
1150
1172
|
return null;
|
|
1151
1173
|
}
|
|
1152
1174
|
return /*#__PURE__*/React.createElement(ProductCardDetails, {
|
|
1153
|
-
imageUrl: hit
|
|
1175
|
+
imageUrl: (hit === null || hit === void 0 ? void 0 : hit.image) || "",
|
|
1154
1176
|
title: title,
|
|
1155
|
-
description: hit
|
|
1156
|
-
price: hit
|
|
1157
|
-
code: hit
|
|
1177
|
+
description: (hit === null || hit === void 0 ? void 0 : hit.description) || "",
|
|
1178
|
+
price: (hit === null || hit === void 0 ? void 0 : hit.price) || "" || productPrice,
|
|
1179
|
+
code: (hit === null || hit === void 0 ? void 0 : hit.code) || "" || code,
|
|
1158
1180
|
hit: hit,
|
|
1159
1181
|
className: className,
|
|
1160
1182
|
facets: facets,
|
|
1161
|
-
relatedProducts: hit
|
|
1183
|
+
relatedProducts: (hit === null || hit === void 0 ? void 0 : hit.related_products) || related_products
|
|
1162
1184
|
});
|
|
1163
1185
|
};
|
|
1164
|
-
|
|
1165
|
-
|
|
1186
|
+
var AlgoliaDynamicSearchLeybold = function (props) {
|
|
1187
|
+
var innerComponents = {
|
|
1166
1188
|
ProductCard: ProductCardAdapter,
|
|
1167
1189
|
ProductDetailsCard: ProductCardDetailsAdapter
|
|
1168
1190
|
};
|
|
@@ -1171,22 +1193,20 @@ const AlgoliaDynamicSearchLeybold = props => {
|
|
|
1171
1193
|
}));
|
|
1172
1194
|
};
|
|
1173
1195
|
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
}) => {
|
|
1196
|
+
var QrFormButtonAdapter = function (_a) {
|
|
1197
|
+
var label = _a.label,
|
|
1198
|
+
onClick = _a.onClick,
|
|
1199
|
+
_b = _a.buttonStyle,
|
|
1200
|
+
buttonStyle = _b === void 0 ? "primary" : _b,
|
|
1201
|
+
href = _a.href,
|
|
1202
|
+
target = _a.target,
|
|
1203
|
+
_c = _a.type,
|
|
1204
|
+
type = _c === void 0 ? "button" : _c,
|
|
1205
|
+
element = _a.element,
|
|
1206
|
+
pageTarget = _a["data-page_target"],
|
|
1207
|
+
className = _a.className;
|
|
1187
1208
|
// Map buttonStyle to our variant
|
|
1188
|
-
|
|
1189
|
-
|
|
1209
|
+
var variant = buttonStyle === "secondary" ? "secondary" : "primary";
|
|
1190
1210
|
// If it's an anchor element (has href or element='a'), render as link
|
|
1191
1211
|
if (element === "a" || href) {
|
|
1192
1212
|
return /*#__PURE__*/React.createElement("a", {
|
|
@@ -1205,18 +1225,19 @@ const QrFormButtonAdapter = ({
|
|
|
1205
1225
|
size: "small"
|
|
1206
1226
|
}, label));
|
|
1207
1227
|
}
|
|
1208
|
-
|
|
1209
1228
|
// Otherwise render as button
|
|
1210
1229
|
return /*#__PURE__*/React.createElement(Button, {
|
|
1211
1230
|
variant: variant,
|
|
1212
1231
|
type: type,
|
|
1213
|
-
onClick: onClick ?
|
|
1232
|
+
onClick: onClick ? function (e) {
|
|
1233
|
+
return onClick(e);
|
|
1234
|
+
} : undefined,
|
|
1214
1235
|
className: className,
|
|
1215
1236
|
"data-page_target": pageTarget,
|
|
1216
1237
|
size: "small"
|
|
1217
1238
|
}, label);
|
|
1218
1239
|
};
|
|
1219
|
-
|
|
1240
|
+
var QrFormLeybold = function (props) {
|
|
1220
1241
|
return /*#__PURE__*/React.createElement("div", {
|
|
1221
1242
|
className: "qr-journey-form-wrapper"
|
|
1222
1243
|
}, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
|
|
@@ -1226,16 +1247,17 @@ const QrFormLeybold = props => {
|
|
|
1226
1247
|
|
|
1227
1248
|
var styles$a = {"overlay":"SearchModal-module__overlay___Vbvg9","modal":"SearchModal-module__modal___1k5gO","header":"SearchModal-module__header___I79uH","title":"SearchModal-module__title___VlmEk","closeButton":"SearchModal-module__closeButton___AN0zt","content":"SearchModal-module__content___I2SdX"};
|
|
1228
1249
|
|
|
1229
|
-
|
|
1230
|
-
onClick,
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1250
|
+
var ModalCloseButton = function (_a) {
|
|
1251
|
+
var onClick = _a.onClick,
|
|
1252
|
+
_b = _a.ariaLabel,
|
|
1253
|
+
ariaLabel = _b === void 0 ? 'Close search' : _b,
|
|
1254
|
+
_c = _a.className,
|
|
1255
|
+
className = _c === void 0 ? '' : _c;
|
|
1234
1256
|
return /*#__PURE__*/React.createElement("button", {
|
|
1235
1257
|
type: "button",
|
|
1236
1258
|
onClick: onClick,
|
|
1237
1259
|
"aria-label": ariaLabel,
|
|
1238
|
-
className:
|
|
1260
|
+
className: "".concat(styles$a.closeButton, " ").concat(className)
|
|
1239
1261
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
1240
1262
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1241
1263
|
viewBox: "0 0 24 24",
|
|
@@ -1258,78 +1280,79 @@ const ModalCloseButton = ({
|
|
|
1258
1280
|
})));
|
|
1259
1281
|
};
|
|
1260
1282
|
|
|
1261
|
-
|
|
1262
|
-
isOpen,
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1283
|
+
var SearchModal = function (_a) {
|
|
1284
|
+
var isOpen = _a.isOpen,
|
|
1285
|
+
onClose = _a.onClose,
|
|
1286
|
+
_b = _a.title,
|
|
1287
|
+
title = _b === void 0 ? 'Search' : _b,
|
|
1288
|
+
children = _a.children,
|
|
1289
|
+
_c = _a.className,
|
|
1290
|
+
className = _c === void 0 ? '' : _c;
|
|
1291
|
+
var modalRef = useRef(null);
|
|
1292
|
+
var previouslyFocusedElement = useRef(null);
|
|
1293
|
+
useEffect(function () {
|
|
1271
1294
|
if (isOpen) {
|
|
1272
1295
|
// Store the previously focused element
|
|
1273
1296
|
previouslyFocusedElement.current = document.activeElement;
|
|
1274
|
-
|
|
1275
1297
|
// Focus the modal
|
|
1276
1298
|
if (modalRef.current) {
|
|
1277
1299
|
modalRef.current.focus();
|
|
1278
1300
|
}
|
|
1279
|
-
|
|
1280
1301
|
// Prevent body scroll
|
|
1281
1302
|
document.body.style.overflow = 'hidden';
|
|
1282
1303
|
} else {
|
|
1283
1304
|
// Restore body scroll
|
|
1284
1305
|
document.body.style.overflow = '';
|
|
1285
|
-
|
|
1286
1306
|
// Return focus to previously focused element
|
|
1287
1307
|
if (previouslyFocusedElement.current) {
|
|
1288
1308
|
previouslyFocusedElement.current.focus();
|
|
1289
1309
|
}
|
|
1290
1310
|
}
|
|
1291
|
-
return ()
|
|
1311
|
+
return function () {
|
|
1292
1312
|
document.body.style.overflow = '';
|
|
1293
1313
|
};
|
|
1294
1314
|
}, [isOpen]);
|
|
1295
|
-
useEffect(()
|
|
1296
|
-
|
|
1315
|
+
useEffect(function () {
|
|
1316
|
+
var handleEscape = function (event) {
|
|
1297
1317
|
if (event.key === 'Escape' && isOpen) {
|
|
1298
1318
|
onClose();
|
|
1299
1319
|
}
|
|
1300
1320
|
};
|
|
1301
1321
|
document.addEventListener('keydown', handleEscape);
|
|
1302
|
-
return ()
|
|
1322
|
+
return function () {
|
|
1323
|
+
return document.removeEventListener('keydown', handleEscape);
|
|
1324
|
+
};
|
|
1303
1325
|
}, [isOpen, onClose]);
|
|
1304
|
-
|
|
1305
1326
|
// Focus trap implementation
|
|
1306
|
-
useEffect(()
|
|
1327
|
+
useEffect(function () {
|
|
1307
1328
|
if (!isOpen || !modalRef.current) return;
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1329
|
+
var modal = modalRef.current;
|
|
1330
|
+
var focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
1331
|
+
var firstElement = focusableElements[0];
|
|
1332
|
+
var lastElement = focusableElements[focusableElements.length - 1];
|
|
1333
|
+
var handleTab = function (event) {
|
|
1313
1334
|
if (event.key !== 'Tab') return;
|
|
1314
1335
|
if (event.shiftKey) {
|
|
1315
1336
|
// Shift + Tab
|
|
1316
1337
|
if (document.activeElement === firstElement) {
|
|
1317
1338
|
event.preventDefault();
|
|
1318
|
-
lastElement
|
|
1339
|
+
lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
|
|
1319
1340
|
}
|
|
1320
1341
|
} else {
|
|
1321
1342
|
// Tab
|
|
1322
1343
|
if (document.activeElement === lastElement) {
|
|
1323
1344
|
event.preventDefault();
|
|
1324
|
-
firstElement
|
|
1345
|
+
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
1325
1346
|
}
|
|
1326
1347
|
}
|
|
1327
1348
|
};
|
|
1328
1349
|
modal.addEventListener('keydown', handleTab);
|
|
1329
|
-
return ()
|
|
1350
|
+
return function () {
|
|
1351
|
+
return modal.removeEventListener('keydown', handleTab);
|
|
1352
|
+
};
|
|
1330
1353
|
}, [isOpen]);
|
|
1331
1354
|
if (!isOpen) return null;
|
|
1332
|
-
|
|
1355
|
+
var handleOverlayClick = function (event) {
|
|
1333
1356
|
if (event.target === event.currentTarget) {
|
|
1334
1357
|
onClose();
|
|
1335
1358
|
}
|
|
@@ -1344,7 +1367,7 @@ const SearchModal = ({
|
|
|
1344
1367
|
"aria-modal": "true",
|
|
1345
1368
|
"aria-label": title,
|
|
1346
1369
|
tabIndex: -1,
|
|
1347
|
-
className:
|
|
1370
|
+
className: "".concat(styles$a.modal, " ").concat(className)
|
|
1348
1371
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1349
1372
|
className: styles$a.header
|
|
1350
1373
|
}, /*#__PURE__*/React.createElement("h2", {
|
|
@@ -1358,11 +1381,11 @@ const SearchModal = ({
|
|
|
1358
1381
|
|
|
1359
1382
|
var styles$9 = {"searchBar":"SearchBar-module__searchBar___5ak1g","inputWrapper":"SearchBar-module__inputWrapper___-4wrM","searchIcon":"SearchBar-module__searchIcon___VAuDz","searchInput":"SearchBar-module__searchInput___1K4GN","submitButton":"SearchBar-module__submitButton___DZWsQ"};
|
|
1360
1383
|
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1384
|
+
var SearchIcon = function (_a) {
|
|
1385
|
+
var _b = _a.className,
|
|
1386
|
+
className = _b === void 0 ? '' : _b;
|
|
1364
1387
|
return /*#__PURE__*/React.createElement("svg", {
|
|
1365
|
-
className:
|
|
1388
|
+
className: "".concat(styles$9.searchIcon, " ").concat(className),
|
|
1366
1389
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1367
1390
|
viewBox: "0 0 24 24",
|
|
1368
1391
|
fill: "none",
|
|
@@ -1380,15 +1403,17 @@ const SearchIcon = ({
|
|
|
1380
1403
|
}));
|
|
1381
1404
|
};
|
|
1382
1405
|
|
|
1383
|
-
|
|
1384
|
-
value,
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1406
|
+
var SearchInput = function (_a) {
|
|
1407
|
+
var value = _a.value,
|
|
1408
|
+
onChange = _a.onChange,
|
|
1409
|
+
onKeyDown = _a.onKeyDown,
|
|
1410
|
+
_b = _a.placeholder,
|
|
1411
|
+
placeholder = _b === void 0 ? 'Discover products, innovations, and resources...' : _b,
|
|
1412
|
+
_c = _a.autoFocus,
|
|
1413
|
+
autoFocus = _c === void 0 ? false : _c,
|
|
1414
|
+
_d = _a.className,
|
|
1415
|
+
className = _d === void 0 ? '' : _d;
|
|
1416
|
+
var handleChange = function (event) {
|
|
1392
1417
|
onChange(event.target.value);
|
|
1393
1418
|
};
|
|
1394
1419
|
return /*#__PURE__*/React.createElement("input", {
|
|
@@ -1399,39 +1424,43 @@ const SearchInput = ({
|
|
|
1399
1424
|
placeholder: placeholder,
|
|
1400
1425
|
autoFocus: autoFocus,
|
|
1401
1426
|
"aria-label": "Search",
|
|
1402
|
-
className:
|
|
1427
|
+
className: "".concat(styles$9.searchInput, " ").concat(className)
|
|
1403
1428
|
});
|
|
1404
1429
|
};
|
|
1405
1430
|
|
|
1406
|
-
|
|
1407
|
-
onClick,
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1431
|
+
var SearchSubmitButton = function (_a) {
|
|
1432
|
+
var onClick = _a.onClick,
|
|
1433
|
+
_b = _a.disabled,
|
|
1434
|
+
disabled = _b === void 0 ? false : _b,
|
|
1435
|
+
_c = _a.ariaLabel,
|
|
1436
|
+
ariaLabel = _c === void 0 ? 'Search' : _c,
|
|
1437
|
+
_d = _a.label,
|
|
1438
|
+
label = _d === void 0 ? 'Search' : _d,
|
|
1439
|
+
_e = _a.className,
|
|
1440
|
+
className = _e === void 0 ? '' : _e;
|
|
1413
1441
|
return /*#__PURE__*/React.createElement("button", {
|
|
1414
1442
|
type: "submit",
|
|
1415
1443
|
onClick: onClick,
|
|
1416
1444
|
disabled: disabled,
|
|
1417
1445
|
"aria-label": ariaLabel,
|
|
1418
|
-
className:
|
|
1446
|
+
className: "".concat(styles$9.submitButton, " ").concat(className)
|
|
1419
1447
|
}, label);
|
|
1420
1448
|
};
|
|
1421
1449
|
|
|
1422
|
-
|
|
1423
|
-
value,
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1450
|
+
var SearchBar = function (_a) {
|
|
1451
|
+
var value = _a.value,
|
|
1452
|
+
onChange = _a.onChange,
|
|
1453
|
+
onSubmit = _a.onSubmit,
|
|
1454
|
+
placeholder = _a.placeholder,
|
|
1455
|
+
_b = _a.autoFocus,
|
|
1456
|
+
autoFocus = _b === void 0 ? false : _b,
|
|
1457
|
+
_c = _a.className,
|
|
1458
|
+
className = _c === void 0 ? '' : _c;
|
|
1459
|
+
var handleSubmit = function (event) {
|
|
1431
1460
|
event.preventDefault();
|
|
1432
1461
|
onSubmit();
|
|
1433
1462
|
};
|
|
1434
|
-
|
|
1463
|
+
var handleKeyDown = function (event) {
|
|
1435
1464
|
if (event.key === 'Enter') {
|
|
1436
1465
|
event.preventDefault();
|
|
1437
1466
|
onSubmit();
|
|
@@ -1439,7 +1468,7 @@ const SearchBar = ({
|
|
|
1439
1468
|
};
|
|
1440
1469
|
return /*#__PURE__*/React.createElement("form", {
|
|
1441
1470
|
onSubmit: handleSubmit,
|
|
1442
|
-
className:
|
|
1471
|
+
className: "".concat(styles$9.searchBar, " ").concat(className)
|
|
1443
1472
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1444
1473
|
className: styles$9.inputWrapper
|
|
1445
1474
|
}, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement(SearchInput, {
|
|
@@ -1455,28 +1484,29 @@ const SearchBar = ({
|
|
|
1455
1484
|
|
|
1456
1485
|
var styles$8 = {"resultsCount":"ResultsCount-module__resultsCount___cNM6f"};
|
|
1457
1486
|
|
|
1458
|
-
|
|
1459
|
-
count,
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1487
|
+
var ResultsCount = function (_a) {
|
|
1488
|
+
var count = _a.count,
|
|
1489
|
+
type = _a.type,
|
|
1490
|
+
_b = _a.className,
|
|
1491
|
+
className = _b === void 0 ? '' : _b;
|
|
1492
|
+
var label = count === 1 ? type.slice(0, -1) : type;
|
|
1464
1493
|
return /*#__PURE__*/React.createElement("span", {
|
|
1465
|
-
className:
|
|
1494
|
+
className: "".concat(styles$8.resultsCount, " ").concat(className)
|
|
1466
1495
|
}, count, " ", label);
|
|
1467
1496
|
};
|
|
1468
1497
|
|
|
1469
1498
|
var styles$7 = {"seeAllButton":"SeeAllLinkButton-module__seeAllButton___eAQqJ"};
|
|
1470
1499
|
|
|
1471
|
-
|
|
1472
|
-
onClick,
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1500
|
+
var SeeAllLinkButton = function (_a) {
|
|
1501
|
+
var onClick = _a.onClick,
|
|
1502
|
+
_b = _a.label,
|
|
1503
|
+
label = _b === void 0 ? 'See all results' : _b,
|
|
1504
|
+
_c = _a.className,
|
|
1505
|
+
className = _c === void 0 ? '' : _c;
|
|
1476
1506
|
return /*#__PURE__*/React.createElement("button", {
|
|
1477
1507
|
type: "button",
|
|
1478
1508
|
onClick: onClick,
|
|
1479
|
-
className:
|
|
1509
|
+
className: "".concat(styles$7.seeAllButton, " ").concat(className)
|
|
1480
1510
|
}, label, /*#__PURE__*/React.createElement("svg", {
|
|
1481
1511
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1482
1512
|
viewBox: "0 0 24 24",
|
|
@@ -1493,17 +1523,17 @@ const SeeAllLinkButton = ({
|
|
|
1493
1523
|
|
|
1494
1524
|
var styles$6 = {"resultsColumn":"ResultsColumn-module__resultsColumn___AexF5","columnHeader":"ResultsColumn-module__columnHeader___-aUWU","columnTitle":"ResultsColumn-module__columnTitle___Gddr-","resultsList":"ResultsColumn-module__resultsList___BkEie","columnFooter":"ResultsColumn-module__columnFooter___4zJUp","loadingState":"ResultsColumn-module__loadingState___wme5F","errorState":"ResultsColumn-module__errorState___NI4fW","emptyState":"ResultsColumn-module__emptyState___tvefj","spinner":"ResultsColumn-module__spinner___hhntn"};
|
|
1495
1525
|
|
|
1496
|
-
|
|
1497
|
-
title,
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1526
|
+
var ResultsColumn = function (_a) {
|
|
1527
|
+
var title = _a.title,
|
|
1528
|
+
count = _a.count,
|
|
1529
|
+
isLoading = _a.isLoading,
|
|
1530
|
+
error = _a.error,
|
|
1531
|
+
onSeeAll = _a.onSeeAll,
|
|
1532
|
+
children = _a.children,
|
|
1533
|
+
_b = _a.className,
|
|
1534
|
+
className = _b === void 0 ? '' : _b;
|
|
1505
1535
|
return /*#__PURE__*/React.createElement("div", {
|
|
1506
|
-
className:
|
|
1536
|
+
className: "".concat(styles$6.resultsColumn, " ").concat(className)
|
|
1507
1537
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1508
1538
|
className: styles$6.columnHeader
|
|
1509
1539
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
@@ -1526,25 +1556,25 @@ const ResultsColumn = ({
|
|
|
1526
1556
|
className: styles$6.columnFooter
|
|
1527
1557
|
}, /*#__PURE__*/React.createElement(SeeAllLinkButton, {
|
|
1528
1558
|
onClick: onSeeAll,
|
|
1529
|
-
label:
|
|
1559
|
+
label: "See all ".concat(title.toLowerCase())
|
|
1530
1560
|
}))));
|
|
1531
1561
|
};
|
|
1532
1562
|
|
|
1533
1563
|
var styles$5 = {"contentCard":"ContentCardHorizontal-module__contentCard___l-Kim","contentMeta":"ContentCardHorizontal-module__contentMeta___rEW-X","contentCategory":"ContentCardHorizontal-module__contentCategory___NssVD","contentMetaText":"ContentCardHorizontal-module__contentMetaText___muYBN","contentTitle":"ContentCardHorizontal-module__contentTitle___54gEo","contentExcerpt":"ContentCardHorizontal-module__contentExcerpt___tqg1v"};
|
|
1534
1564
|
|
|
1535
|
-
|
|
1536
|
-
id
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1565
|
+
var ContentCardHorizontal = function (_a) {
|
|
1566
|
+
_a.id;
|
|
1567
|
+
var title = _a.title,
|
|
1568
|
+
url = _a.url,
|
|
1569
|
+
category = _a.category,
|
|
1570
|
+
meta = _a.meta,
|
|
1571
|
+
excerpt = _a.excerpt,
|
|
1572
|
+
_b = _a.className,
|
|
1573
|
+
className = _b === void 0 ? "" : _b;
|
|
1544
1574
|
return /*#__PURE__*/React.createElement("a", {
|
|
1545
1575
|
href: url,
|
|
1546
|
-
className:
|
|
1547
|
-
"aria-label":
|
|
1576
|
+
className: "".concat(styles$5.contentCard, " ").concat(className),
|
|
1577
|
+
"aria-label": "View content: ".concat(title)
|
|
1548
1578
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1549
1579
|
className: styles$5.contentMeta
|
|
1550
1580
|
}, category && /*#__PURE__*/React.createElement("span", {
|
|
@@ -1560,25 +1590,23 @@ const ContentCardHorizontal = ({
|
|
|
1560
1590
|
|
|
1561
1591
|
var styles$4 = {"instantResultsLayout":"InstantResults-module__instantResultsLayout___oy-o4","queryHeader":"InstantResults-module__queryHeader___Vmbul","queryText":"InstantResults-module__queryText___uVCCc","queryHighlight":"InstantResults-module__queryHighlight___C3hP1","columnsGrid":"InstantResults-module__columnsGrid___bHRUM"};
|
|
1562
1592
|
|
|
1563
|
-
|
|
1564
|
-
query,
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
const showCombinedButton = hasResults && !isLoadingProducts && !isLoadingContents;
|
|
1578
|
-
|
|
1593
|
+
var FederatedInstantResultsLayout = function (_a) {
|
|
1594
|
+
var query = _a.query,
|
|
1595
|
+
products = _a.products,
|
|
1596
|
+
contents = _a.contents,
|
|
1597
|
+
isLoadingProducts = _a.isLoadingProducts,
|
|
1598
|
+
isLoadingContents = _a.isLoadingContents,
|
|
1599
|
+
productsError = _a.productsError,
|
|
1600
|
+
contentsError = _a.contentsError,
|
|
1601
|
+
onSeeAllProducts = _a.onSeeAllProducts,
|
|
1602
|
+
onSeeAllContents = _a.onSeeAllContents,
|
|
1603
|
+
onSeeAllCombined = _a.onSeeAllCombined;
|
|
1604
|
+
var totalResults = products.length + contents.length;
|
|
1605
|
+
var hasResults = totalResults > 0;
|
|
1606
|
+
var showCombinedButton = hasResults && !isLoadingProducts && !isLoadingContents;
|
|
1579
1607
|
// Show first 3 results from each category
|
|
1580
|
-
|
|
1581
|
-
|
|
1608
|
+
var displayProducts = products.slice(0, 3);
|
|
1609
|
+
var displayContents = contents.slice(0, 3);
|
|
1582
1610
|
return /*#__PURE__*/React.createElement("div", {
|
|
1583
1611
|
className: styles$4.instantResultsLayout
|
|
1584
1612
|
}, query && /*#__PURE__*/React.createElement("div", {
|
|
@@ -1598,17 +1626,21 @@ const FederatedInstantResultsLayout = ({
|
|
|
1598
1626
|
isLoading: isLoadingProducts,
|
|
1599
1627
|
error: productsError,
|
|
1600
1628
|
onSeeAll: onSeeAllProducts
|
|
1601
|
-
}, displayProducts.map(
|
|
1602
|
-
|
|
1603
|
-
|
|
1629
|
+
}, displayProducts.map(function (product) {
|
|
1630
|
+
return /*#__PURE__*/React.createElement(ProductCardHorizontal, _extends({
|
|
1631
|
+
key: product.id
|
|
1632
|
+
}, product));
|
|
1633
|
+
})), /*#__PURE__*/React.createElement(ResultsColumn, {
|
|
1604
1634
|
title: "Content",
|
|
1605
1635
|
count: contents.length,
|
|
1606
1636
|
isLoading: isLoadingContents,
|
|
1607
1637
|
error: contentsError,
|
|
1608
1638
|
onSeeAll: onSeeAllContents
|
|
1609
|
-
}, displayContents.map(
|
|
1610
|
-
|
|
1611
|
-
|
|
1639
|
+
}, displayContents.map(function (content) {
|
|
1640
|
+
return /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({
|
|
1641
|
+
key: content.id
|
|
1642
|
+
}, content));
|
|
1643
|
+
}))));
|
|
1612
1644
|
};
|
|
1613
1645
|
|
|
1614
1646
|
var styles$3 = {"filtersPanel":"Filters-module__filtersPanel___T3SlK","filtersPanelHeader":"Filters-module__filtersPanelHeader___XOBTi","filtersPanelTitle":"Filters-module__filtersPanelTitle___Mnn10","filtersList":"Filters-module__filtersList___jPgkP","filterAccordion":"Filters-module__filterAccordion___Mf9Oe","accordionHeader":"Filters-module__accordionHeader___DtPJx","accordionTitle":"Filters-module__accordionTitle___YtHXW","accordionIcon":"Filters-module__accordionIcon___zRGrv","accordionIconExpanded":"Filters-module__accordionIconExpanded___pkkjv","accordionContent":"Filters-module__accordionContent___SqhIu","accordionSearch":"Filters-module__accordionSearch___V0A74","filterSearch":"Filters-module__filterSearch___Jc8AX","searchIcon":"Filters-module__searchIcon___pas1t","searchInput":"Filters-module__searchInput___nzOMK","clearButton":"Filters-module__clearButton___tHl6L","filterList":"Filters-module__filterList___TLqBu","filterItem":"Filters-module__filterItem___lA2rv","filterCheckbox":"Filters-module__filterCheckbox___9In3q","filterLabel":"Filters-module__filterLabel___w-M8J","filterCount":"Filters-module__filterCount___XMsmy","noResults":"Filters-module__noResults___ZdZ4V","loadingState":"Filters-module__loadingState___k6olr","spinner":"Filters-module__spinner___hvTaP","appliedFilters":"Filters-module__appliedFilters___hP4x-","appliedFiltersHeader":"Filters-module__appliedFiltersHeader___w-ZBN","appliedFiltersTitle":"Filters-module__appliedFiltersTitle___k6VbJ","appliedFiltersCount":"Filters-module__appliedFiltersCount___UQikX","clearAllButton":"Filters-module__clearAllButton___yviGV","appliedFiltersList":"Filters-module__appliedFiltersList___-fx9D","appliedFilterTag":"Filters-module__appliedFilterTag___hd5yc","tagLabel":"Filters-module__tagLabel___0ImQk","tagRemoveButton":"Filters-module__tagRemoveButton___JaA8M"};
|
|
@@ -1616,20 +1648,20 @@ var styles$3 = {"filtersPanel":"Filters-module__filtersPanel___T3SlK","filtersPa
|
|
|
1616
1648
|
/**
|
|
1617
1649
|
* FilterSearch - Search input for filtering facet values
|
|
1618
1650
|
*/
|
|
1619
|
-
|
|
1620
|
-
value,
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1651
|
+
var FilterSearch = function (_a) {
|
|
1652
|
+
var value = _a.value,
|
|
1653
|
+
onChange = _a.onChange,
|
|
1654
|
+
_b = _a.placeholder,
|
|
1655
|
+
placeholder = _b === void 0 ? "Search" : _b,
|
|
1656
|
+
className = _a.className;
|
|
1657
|
+
var handleChange = function (e) {
|
|
1626
1658
|
onChange(e.target.value);
|
|
1627
1659
|
};
|
|
1628
|
-
|
|
1660
|
+
var handleClear = function () {
|
|
1629
1661
|
onChange("");
|
|
1630
1662
|
};
|
|
1631
1663
|
return /*#__PURE__*/React.createElement("div", {
|
|
1632
|
-
className:
|
|
1664
|
+
className: "".concat(styles$3.filterSearch, " ").concat(className || "")
|
|
1633
1665
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
1634
1666
|
className: styles$3.searchIcon,
|
|
1635
1667
|
width: "16",
|
|
@@ -1680,29 +1712,28 @@ const FilterSearch = ({
|
|
|
1680
1712
|
/**
|
|
1681
1713
|
* FilterItem - Individual facet item with checkbox and count
|
|
1682
1714
|
*/
|
|
1683
|
-
|
|
1684
|
-
value,
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
const handleChange = () => {
|
|
1715
|
+
var FilterItem = function (_a) {
|
|
1716
|
+
var value = _a.value,
|
|
1717
|
+
onToggle = _a.onToggle,
|
|
1718
|
+
className = _a.className;
|
|
1719
|
+
var handleChange = function () {
|
|
1689
1720
|
onToggle(value.value);
|
|
1690
1721
|
};
|
|
1691
|
-
|
|
1722
|
+
var handleKeyDown = function (e) {
|
|
1692
1723
|
if (e.key === "Enter" || e.key === " ") {
|
|
1693
1724
|
e.preventDefault();
|
|
1694
1725
|
onToggle(value.value);
|
|
1695
1726
|
}
|
|
1696
1727
|
};
|
|
1697
1728
|
return /*#__PURE__*/React.createElement("label", {
|
|
1698
|
-
className:
|
|
1729
|
+
className: "".concat(styles$3.filterItem, " ").concat(className || ""),
|
|
1699
1730
|
onKeyDown: handleKeyDown
|
|
1700
1731
|
}, /*#__PURE__*/React.createElement("input", {
|
|
1701
1732
|
type: "checkbox",
|
|
1702
1733
|
checked: value.isRefined,
|
|
1703
1734
|
onChange: handleChange,
|
|
1704
1735
|
className: styles$3.filterCheckbox,
|
|
1705
|
-
"aria-label":
|
|
1736
|
+
"aria-label": "".concat(value.value, " (").concat(value.count, " results)")
|
|
1706
1737
|
}), /*#__PURE__*/React.createElement("span", {
|
|
1707
1738
|
className: styles$3.filterLabel
|
|
1708
1739
|
}, value.value), /*#__PURE__*/React.createElement("span", {
|
|
@@ -1713,52 +1744,54 @@ const FilterItem = ({
|
|
|
1713
1744
|
/**
|
|
1714
1745
|
* FilterAccordion - Collapsible facet section with optional search
|
|
1715
1746
|
*/
|
|
1716
|
-
|
|
1717
|
-
facet,
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1747
|
+
var FilterAccordion = function (_a) {
|
|
1748
|
+
var facet = _a.facet,
|
|
1749
|
+
isExpanded = _a.isExpanded,
|
|
1750
|
+
onToggle = _a.onToggle,
|
|
1751
|
+
onValueToggle = _a.onValueToggle,
|
|
1752
|
+
className = _a.className;
|
|
1753
|
+
var _b = useState(""),
|
|
1754
|
+
searchQuery = _b[0],
|
|
1755
|
+
setSearchQuery = _b[1];
|
|
1725
1756
|
// Filter facet values based on search query
|
|
1726
|
-
|
|
1757
|
+
var filteredValues = useMemo(function () {
|
|
1727
1758
|
if (!searchQuery.trim()) {
|
|
1728
1759
|
return facet.values;
|
|
1729
1760
|
}
|
|
1730
|
-
|
|
1731
|
-
return facet.values.filter(
|
|
1761
|
+
var query = searchQuery.toLowerCase();
|
|
1762
|
+
return facet.values.filter(function (value) {
|
|
1763
|
+
return value.value.toLowerCase().includes(query);
|
|
1764
|
+
});
|
|
1732
1765
|
}, [facet.values, searchQuery]);
|
|
1733
|
-
|
|
1766
|
+
var handleToggle = function () {
|
|
1734
1767
|
onToggle();
|
|
1735
1768
|
// Clear search when collapsing
|
|
1736
1769
|
if (isExpanded) {
|
|
1737
1770
|
setSearchQuery("");
|
|
1738
1771
|
}
|
|
1739
1772
|
};
|
|
1740
|
-
|
|
1773
|
+
var handleKeyDown = function (e) {
|
|
1741
1774
|
if (e.key === "Enter" || e.key === " ") {
|
|
1742
1775
|
e.preventDefault();
|
|
1743
1776
|
handleToggle();
|
|
1744
1777
|
}
|
|
1745
1778
|
};
|
|
1746
|
-
|
|
1779
|
+
var handleValueToggle = function (value) {
|
|
1747
1780
|
onValueToggle(facet.attribute, value);
|
|
1748
1781
|
};
|
|
1749
1782
|
return /*#__PURE__*/React.createElement("div", {
|
|
1750
|
-
className:
|
|
1783
|
+
className: "".concat(styles$3.filterAccordion, " ").concat(className || "")
|
|
1751
1784
|
}, /*#__PURE__*/React.createElement("button", {
|
|
1752
1785
|
type: "button",
|
|
1753
|
-
className:
|
|
1786
|
+
className: "".concat(styles$3.accordionHeader, " ").concat(isExpanded ? styles$3.accordionHeaderExpanded : ""),
|
|
1754
1787
|
onClick: handleToggle,
|
|
1755
1788
|
onKeyDown: handleKeyDown,
|
|
1756
1789
|
"aria-expanded": isExpanded,
|
|
1757
|
-
"aria-controls":
|
|
1790
|
+
"aria-controls": "accordion-".concat(facet.id)
|
|
1758
1791
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1759
1792
|
className: styles$3.accordionTitle
|
|
1760
1793
|
}, facet.label), /*#__PURE__*/React.createElement("svg", {
|
|
1761
|
-
className:
|
|
1794
|
+
className: "".concat(styles$3.accordionIcon, " ").concat(isExpanded ? styles$3.accordionIconExpanded : ""),
|
|
1762
1795
|
width: "16",
|
|
1763
1796
|
height: "16",
|
|
1764
1797
|
viewBox: "0 0 16 16",
|
|
@@ -1772,7 +1805,7 @@ const FilterAccordion = ({
|
|
|
1772
1805
|
strokeLinecap: "round",
|
|
1773
1806
|
strokeLinejoin: "round"
|
|
1774
1807
|
}))), isExpanded && /*#__PURE__*/React.createElement("div", {
|
|
1775
|
-
id:
|
|
1808
|
+
id: "accordion-".concat(facet.id),
|
|
1776
1809
|
className: styles$3.accordionContent
|
|
1777
1810
|
}, facet.searchable && facet.values.length > 5 && /*#__PURE__*/React.createElement("div", {
|
|
1778
1811
|
className: styles$3.accordionSearch
|
|
@@ -1782,11 +1815,13 @@ const FilterAccordion = ({
|
|
|
1782
1815
|
placeholder: "Search"
|
|
1783
1816
|
})), /*#__PURE__*/React.createElement("div", {
|
|
1784
1817
|
className: styles$3.filterList
|
|
1785
|
-
}, filteredValues.length > 0 ? filteredValues.map(
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1818
|
+
}, filteredValues.length > 0 ? filteredValues.map(function (value) {
|
|
1819
|
+
return /*#__PURE__*/React.createElement(FilterItem, {
|
|
1820
|
+
key: value.value,
|
|
1821
|
+
value: value,
|
|
1822
|
+
onToggle: handleValueToggle
|
|
1823
|
+
});
|
|
1824
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
1790
1825
|
className: styles$3.noResults
|
|
1791
1826
|
}, "No results found"))));
|
|
1792
1827
|
};
|
|
@@ -1794,24 +1829,23 @@ const FilterAccordion = ({
|
|
|
1794
1829
|
/**
|
|
1795
1830
|
* AppliedFilterTag - Individual removable filter tag/chip
|
|
1796
1831
|
*/
|
|
1797
|
-
|
|
1798
|
-
attribute,
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
const handleRemove = () => {
|
|
1832
|
+
var AppliedFilterTag = function (_a) {
|
|
1833
|
+
var attribute = _a.attribute,
|
|
1834
|
+
value = _a.value,
|
|
1835
|
+
label = _a.label,
|
|
1836
|
+
onRemove = _a.onRemove,
|
|
1837
|
+
className = _a.className;
|
|
1838
|
+
var handleRemove = function () {
|
|
1805
1839
|
onRemove(attribute, value);
|
|
1806
1840
|
};
|
|
1807
|
-
|
|
1841
|
+
var handleKeyDown = function (e) {
|
|
1808
1842
|
if (e.key === "Enter" || e.key === " ") {
|
|
1809
1843
|
e.preventDefault();
|
|
1810
1844
|
handleRemove();
|
|
1811
1845
|
}
|
|
1812
1846
|
};
|
|
1813
1847
|
return /*#__PURE__*/React.createElement("div", {
|
|
1814
|
-
className:
|
|
1848
|
+
className: "".concat(styles$3.appliedFilterTag, " ").concat(className || "")
|
|
1815
1849
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1816
1850
|
className: styles$3.tagLabel
|
|
1817
1851
|
}, label || value), /*#__PURE__*/React.createElement("button", {
|
|
@@ -1819,7 +1853,7 @@ const AppliedFilterTag = ({
|
|
|
1819
1853
|
onClick: handleRemove,
|
|
1820
1854
|
onKeyDown: handleKeyDown,
|
|
1821
1855
|
className: styles$3.tagRemoveButton,
|
|
1822
|
-
"aria-label":
|
|
1856
|
+
"aria-label": "Remove ".concat(label || value, " filter")
|
|
1823
1857
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
1824
1858
|
width: "12",
|
|
1825
1859
|
height: "12",
|
|
@@ -1839,17 +1873,16 @@ const AppliedFilterTag = ({
|
|
|
1839
1873
|
/**
|
|
1840
1874
|
* AppliedFilters - Shows all active filters as removable tags
|
|
1841
1875
|
*/
|
|
1842
|
-
|
|
1843
|
-
facets,
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
}) => {
|
|
1876
|
+
var AppliedFilters = function (_a) {
|
|
1877
|
+
var facets = _a.facets,
|
|
1878
|
+
onRemove = _a.onRemove,
|
|
1879
|
+
onClearAll = _a.onClearAll,
|
|
1880
|
+
className = _a.className;
|
|
1848
1881
|
// Extract all refined (selected) filters
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
facets.forEach(facet
|
|
1852
|
-
facet.values.forEach(value
|
|
1882
|
+
var appliedFilters = useMemo(function () {
|
|
1883
|
+
var filters = [];
|
|
1884
|
+
facets.forEach(function (facet) {
|
|
1885
|
+
facet.values.forEach(function (value) {
|
|
1853
1886
|
if (value.isRefined) {
|
|
1854
1887
|
filters.push({
|
|
1855
1888
|
attribute: facet.attribute,
|
|
@@ -1862,23 +1895,22 @@ const AppliedFilters = ({
|
|
|
1862
1895
|
});
|
|
1863
1896
|
return filters;
|
|
1864
1897
|
}, [facets]);
|
|
1865
|
-
|
|
1866
1898
|
// Don't render if no filters are applied
|
|
1867
1899
|
if (appliedFilters.length === 0) {
|
|
1868
1900
|
return null;
|
|
1869
1901
|
}
|
|
1870
|
-
|
|
1902
|
+
var handleClearAll = function () {
|
|
1871
1903
|
if (onClearAll) {
|
|
1872
1904
|
onClearAll();
|
|
1873
1905
|
} else {
|
|
1874
1906
|
// If no clearAll handler, remove each filter individually
|
|
1875
|
-
appliedFilters.forEach(filter
|
|
1907
|
+
appliedFilters.forEach(function (filter) {
|
|
1876
1908
|
onRemove(filter.attribute, filter.value);
|
|
1877
1909
|
});
|
|
1878
1910
|
}
|
|
1879
1911
|
};
|
|
1880
1912
|
return /*#__PURE__*/React.createElement("div", {
|
|
1881
|
-
className:
|
|
1913
|
+
className: "".concat(styles$3.appliedFilters, " ").concat(className || "")
|
|
1882
1914
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1883
1915
|
className: styles$3.appliedFiltersHeader
|
|
1884
1916
|
}, /*#__PURE__*/React.createElement("h4", {
|
|
@@ -1892,38 +1924,42 @@ const AppliedFilters = ({
|
|
|
1892
1924
|
"aria-label": "Clear all filters"
|
|
1893
1925
|
}, "Clear all")), /*#__PURE__*/React.createElement("div", {
|
|
1894
1926
|
className: styles$3.appliedFiltersList
|
|
1895
|
-
}, appliedFilters.map(
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1927
|
+
}, appliedFilters.map(function (filter) {
|
|
1928
|
+
return /*#__PURE__*/React.createElement(AppliedFilterTag, {
|
|
1929
|
+
key: "".concat(filter.attribute, "-").concat(filter.value),
|
|
1930
|
+
attribute: filter.attribute,
|
|
1931
|
+
value: filter.value,
|
|
1932
|
+
label: filter.label,
|
|
1933
|
+
onRemove: onRemove
|
|
1934
|
+
});
|
|
1935
|
+
})));
|
|
1902
1936
|
};
|
|
1903
1937
|
|
|
1904
1938
|
/**
|
|
1905
1939
|
* FiltersPanel - Main container for all filters
|
|
1906
1940
|
*/
|
|
1907
|
-
|
|
1908
|
-
facets,
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1941
|
+
var FiltersPanel = function (_a) {
|
|
1942
|
+
var facets = _a.facets,
|
|
1943
|
+
onFacetToggle = _a.onFacetToggle,
|
|
1944
|
+
_b = _a.isLoading,
|
|
1945
|
+
isLoading = _b === void 0 ? false : _b,
|
|
1946
|
+
className = _a.className;
|
|
1913
1947
|
// Track which accordions are expanded
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
setExpandedAccordions
|
|
1926
|
-
|
|
1948
|
+
var _c = useState(function () {
|
|
1949
|
+
// Initialize with default expanded facets
|
|
1950
|
+
var expanded = new Set();
|
|
1951
|
+
facets.forEach(function (facet) {
|
|
1952
|
+
if (facet.defaultExpanded) {
|
|
1953
|
+
expanded.add(facet.id);
|
|
1954
|
+
}
|
|
1955
|
+
});
|
|
1956
|
+
return expanded;
|
|
1957
|
+
}),
|
|
1958
|
+
expandedAccordions = _c[0],
|
|
1959
|
+
setExpandedAccordions = _c[1];
|
|
1960
|
+
var handleAccordionToggle = useCallback(function (facetId) {
|
|
1961
|
+
setExpandedAccordions(function (prev) {
|
|
1962
|
+
var next = new Set(prev);
|
|
1927
1963
|
if (next.has(facetId)) {
|
|
1928
1964
|
next.delete(facetId);
|
|
1929
1965
|
} else {
|
|
@@ -1932,16 +1968,16 @@ const FiltersPanel = ({
|
|
|
1932
1968
|
return next;
|
|
1933
1969
|
});
|
|
1934
1970
|
}, []);
|
|
1935
|
-
|
|
1971
|
+
var handleValueToggle = useCallback(function (attribute, value) {
|
|
1936
1972
|
onFacetToggle(attribute, value);
|
|
1937
1973
|
}, [onFacetToggle]);
|
|
1938
|
-
|
|
1974
|
+
var handleRemoveFilter = useCallback(function (attribute, value) {
|
|
1939
1975
|
onFacetToggle(attribute, value);
|
|
1940
1976
|
}, [onFacetToggle]);
|
|
1941
|
-
|
|
1977
|
+
var handleClearAll = useCallback(function () {
|
|
1942
1978
|
// Remove all refined facets
|
|
1943
|
-
facets.forEach(facet
|
|
1944
|
-
facet.values.forEach(value
|
|
1979
|
+
facets.forEach(function (facet) {
|
|
1980
|
+
facet.values.forEach(function (value) {
|
|
1945
1981
|
if (value.isRefined) {
|
|
1946
1982
|
onFacetToggle(facet.attribute, value.value);
|
|
1947
1983
|
}
|
|
@@ -1950,7 +1986,7 @@ const FiltersPanel = ({
|
|
|
1950
1986
|
}, [facets, onFacetToggle]);
|
|
1951
1987
|
if (isLoading) {
|
|
1952
1988
|
return /*#__PURE__*/React.createElement("div", {
|
|
1953
|
-
className:
|
|
1989
|
+
className: "".concat(styles$3.filtersPanel, " ").concat(className || "")
|
|
1954
1990
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1955
1991
|
className: styles$3.filtersPanelHeader
|
|
1956
1992
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
@@ -1965,7 +2001,7 @@ const FiltersPanel = ({
|
|
|
1965
2001
|
return null;
|
|
1966
2002
|
}
|
|
1967
2003
|
return /*#__PURE__*/React.createElement("div", {
|
|
1968
|
-
className:
|
|
2004
|
+
className: "".concat(styles$3.filtersPanel, " ").concat(className || "")
|
|
1969
2005
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1970
2006
|
className: styles$3.filtersPanelHeader
|
|
1971
2007
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
@@ -1976,28 +2012,34 @@ const FiltersPanel = ({
|
|
|
1976
2012
|
onClearAll: handleClearAll
|
|
1977
2013
|
}), /*#__PURE__*/React.createElement("div", {
|
|
1978
2014
|
className: styles$3.filtersList
|
|
1979
|
-
}, facets.map(
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
2015
|
+
}, facets.map(function (facet) {
|
|
2016
|
+
return /*#__PURE__*/React.createElement(FilterAccordion, {
|
|
2017
|
+
key: facet.id,
|
|
2018
|
+
facet: facet,
|
|
2019
|
+
isExpanded: expandedAccordions.has(facet.id),
|
|
2020
|
+
onToggle: function () {
|
|
2021
|
+
return handleAccordionToggle(facet.id);
|
|
2022
|
+
},
|
|
2023
|
+
onValueToggle: handleValueToggle
|
|
2024
|
+
});
|
|
2025
|
+
})));
|
|
1986
2026
|
};
|
|
1987
2027
|
|
|
1988
2028
|
var styles$2 = {"resultsView":"ResultsView-module__resultsView___S4Wh2","searchBarWrapper":"ResultsView-module__searchBarWrapper___XNtwR","tabsContainer":"ResultsView-module__tabsContainer___mB-Q2","tabs":"ResultsView-module__tabs___rOexd","tab":"ResultsView-module__tab___IWPLf","tabActive":"ResultsView-module__tabActive___YLWB0","tabCount":"ResultsView-module__tabCount___trVav","resultsContainer":"ResultsView-module__resultsContainer___J4URa","sidebar":"ResultsView-module__sidebar___nQq5J","mainContent":"ResultsView-module__mainContent___S9eIG","resultsList":"ResultsView-module__resultsList___8eYNX","resultsSection":"ResultsView-module__resultsSection___sCUaO","sectionTitle":"ResultsView-module__sectionTitle___mfvH3","loadingState":"ResultsView-module__loadingState___W5YXx","errorState":"ResultsView-module__errorState___UkkG-","emptyState":"ResultsView-module__emptyState___D0Iyn","spinner":"ResultsView-module__spinner___nk8E5","emptyIcon":"ResultsView-module__emptyIcon___fes8T","paginationWrapper":"ResultsView-module__paginationWrapper___mDTyl"};
|
|
1989
2029
|
|
|
1990
|
-
|
|
1991
|
-
type,
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
2030
|
+
var ResultsList = function (_a) {
|
|
2031
|
+
var type = _a.type,
|
|
2032
|
+
_b = _a.products,
|
|
2033
|
+
products = _b === void 0 ? [] : _b,
|
|
2034
|
+
_c = _a.contents,
|
|
2035
|
+
contents = _c === void 0 ? [] : _c,
|
|
2036
|
+
isLoading = _a.isLoading,
|
|
2037
|
+
error = _a.error,
|
|
2038
|
+
_d = _a.className,
|
|
2039
|
+
className = _d === void 0 ? '' : _d;
|
|
1998
2040
|
if (isLoading) {
|
|
1999
2041
|
return /*#__PURE__*/React.createElement("div", {
|
|
2000
|
-
className:
|
|
2042
|
+
className: "".concat(styles$2.loadingState, " ").concat(className)
|
|
2001
2043
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2002
2044
|
className: styles$2.spinner,
|
|
2003
2045
|
"aria-label": "Loading..."
|
|
@@ -2005,15 +2047,15 @@ const ResultsList = ({
|
|
|
2005
2047
|
}
|
|
2006
2048
|
if (error) {
|
|
2007
2049
|
return /*#__PURE__*/React.createElement("div", {
|
|
2008
|
-
className:
|
|
2050
|
+
className: "".concat(styles$2.errorState, " ").concat(className)
|
|
2009
2051
|
}, /*#__PURE__*/React.createElement("p", null, error));
|
|
2010
2052
|
}
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2053
|
+
var hasProducts = products.length > 0;
|
|
2054
|
+
var hasContents = contents.length > 0;
|
|
2055
|
+
var hasResults = hasProducts || hasContents;
|
|
2014
2056
|
if (!hasResults) {
|
|
2015
2057
|
return /*#__PURE__*/React.createElement("div", {
|
|
2016
|
-
className:
|
|
2058
|
+
className: "".concat(styles$2.emptyState, " ").concat(className)
|
|
2017
2059
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
2018
2060
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2019
2061
|
viewBox: "0 0 24 24",
|
|
@@ -2031,60 +2073,65 @@ const ResultsList = ({
|
|
|
2031
2073
|
d: "m21 21-4.35-4.35"
|
|
2032
2074
|
})), /*#__PURE__*/React.createElement("h3", null, "No results found"), /*#__PURE__*/React.createElement("p", null, "Try adjusting your search or filters to find what you're looking for."));
|
|
2033
2075
|
}
|
|
2034
|
-
|
|
2035
2076
|
// Render based on type
|
|
2036
2077
|
if (type === 'products') {
|
|
2037
2078
|
return /*#__PURE__*/React.createElement("div", {
|
|
2038
|
-
className:
|
|
2039
|
-
}, products.map(
|
|
2040
|
-
|
|
2041
|
-
|
|
2079
|
+
className: "".concat(styles$2.resultsList, " ").concat(className)
|
|
2080
|
+
}, products.map(function (product) {
|
|
2081
|
+
return /*#__PURE__*/React.createElement(ProductCardHorizontal, _extends({
|
|
2082
|
+
key: product.id
|
|
2083
|
+
}, product));
|
|
2084
|
+
}));
|
|
2042
2085
|
}
|
|
2043
2086
|
if (type === 'content') {
|
|
2044
2087
|
return /*#__PURE__*/React.createElement("div", {
|
|
2045
|
-
className:
|
|
2046
|
-
}, contents.map(
|
|
2047
|
-
|
|
2048
|
-
|
|
2088
|
+
className: "".concat(styles$2.resultsList, " ").concat(className)
|
|
2089
|
+
}, contents.map(function (content) {
|
|
2090
|
+
return /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({
|
|
2091
|
+
key: content.id
|
|
2092
|
+
}, content));
|
|
2093
|
+
}));
|
|
2049
2094
|
}
|
|
2050
|
-
|
|
2051
2095
|
// type === 'all' - Show mixed results
|
|
2052
2096
|
return /*#__PURE__*/React.createElement("div", {
|
|
2053
|
-
className:
|
|
2097
|
+
className: "".concat(styles$2.resultsList, " ").concat(className)
|
|
2054
2098
|
}, hasProducts && /*#__PURE__*/React.createElement("div", {
|
|
2055
2099
|
className: styles$2.resultsSection
|
|
2056
2100
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
2057
2101
|
className: styles$2.sectionTitle
|
|
2058
|
-
}, "Products (", products.length, ")"), products.map(
|
|
2059
|
-
|
|
2060
|
-
|
|
2102
|
+
}, "Products (", products.length, ")"), products.map(function (product) {
|
|
2103
|
+
return /*#__PURE__*/React.createElement(ProductCardHorizontal, _extends({
|
|
2104
|
+
key: product.id
|
|
2105
|
+
}, product));
|
|
2106
|
+
})), hasContents && /*#__PURE__*/React.createElement("div", {
|
|
2061
2107
|
className: styles$2.resultsSection
|
|
2062
2108
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
2063
2109
|
className: styles$2.sectionTitle
|
|
2064
|
-
}, "Content (", contents.length, ")"), contents.map(
|
|
2065
|
-
|
|
2066
|
-
|
|
2110
|
+
}, "Content (", contents.length, ")"), contents.map(function (content) {
|
|
2111
|
+
return /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({
|
|
2112
|
+
key: content.id
|
|
2113
|
+
}, content));
|
|
2114
|
+
})));
|
|
2067
2115
|
};
|
|
2068
2116
|
|
|
2069
|
-
|
|
2070
|
-
query,
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
const tabs = [{
|
|
2117
|
+
var FederatedResultsView = function (_a) {
|
|
2118
|
+
var query = _a.query,
|
|
2119
|
+
onQueryChange = _a.onQueryChange,
|
|
2120
|
+
onSearchSubmit = _a.onSearchSubmit,
|
|
2121
|
+
activeTab = _a.activeTab,
|
|
2122
|
+
onTabChange = _a.onTabChange,
|
|
2123
|
+
products = _a.products,
|
|
2124
|
+
contents = _a.contents,
|
|
2125
|
+
isLoadingProducts = _a.isLoadingProducts,
|
|
2126
|
+
isLoadingContents = _a.isLoadingContents,
|
|
2127
|
+
productsError = _a.productsError,
|
|
2128
|
+
contentsError = _a.contentsError,
|
|
2129
|
+
currentPage = _a.currentPage,
|
|
2130
|
+
totalPages = _a.totalPages,
|
|
2131
|
+
onPageChange = _a.onPageChange,
|
|
2132
|
+
facets = _a.facets,
|
|
2133
|
+
onFacetToggle = _a.onFacetToggle;
|
|
2134
|
+
var tabs = [{
|
|
2088
2135
|
id: "products",
|
|
2089
2136
|
label: "Products",
|
|
2090
2137
|
count: products.length
|
|
@@ -2093,12 +2140,11 @@ const FederatedResultsView = ({
|
|
|
2093
2140
|
label: "Content",
|
|
2094
2141
|
count: contents.length
|
|
2095
2142
|
}];
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2143
|
+
var isLoading = activeTab === "products" && isLoadingProducts || activeTab === "content" && isLoadingContents;
|
|
2144
|
+
var error = activeTab === "products" ? productsError : contentsError;
|
|
2099
2145
|
// Filter results based on active tab
|
|
2100
|
-
|
|
2101
|
-
|
|
2146
|
+
var displayProducts = activeTab === "content" ? [] : products;
|
|
2147
|
+
var displayContents = activeTab === "products" ? [] : contents;
|
|
2102
2148
|
return /*#__PURE__*/React.createElement("div", {
|
|
2103
2149
|
className: styles$2.resultsView
|
|
2104
2150
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -2113,17 +2159,21 @@ const FederatedResultsView = ({
|
|
|
2113
2159
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2114
2160
|
className: styles$2.tabs,
|
|
2115
2161
|
role: "tablist"
|
|
2116
|
-
}, tabs.map(
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2162
|
+
}, tabs.map(function (tab) {
|
|
2163
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
2164
|
+
key: tab.id,
|
|
2165
|
+
type: "button",
|
|
2166
|
+
role: "tab",
|
|
2167
|
+
"aria-selected": activeTab === tab.id,
|
|
2168
|
+
"aria-controls": "tabpanel-".concat(tab.id),
|
|
2169
|
+
onClick: function () {
|
|
2170
|
+
return onTabChange(tab.id);
|
|
2171
|
+
},
|
|
2172
|
+
className: "".concat(styles$2.tab, " ").concat(activeTab === tab.id ? styles$2.tabActive : "")
|
|
2173
|
+
}, tab.label, tab.count > 0 && /*#__PURE__*/React.createElement("span", {
|
|
2174
|
+
className: styles$2.tabCount
|
|
2175
|
+
}, tab.count));
|
|
2176
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
2127
2177
|
className: styles$2.resultsContainer
|
|
2128
2178
|
}, /*#__PURE__*/React.createElement("aside", {
|
|
2129
2179
|
className: styles$2.sidebar
|
|
@@ -2133,9 +2183,9 @@ const FederatedResultsView = ({
|
|
|
2133
2183
|
})), /*#__PURE__*/React.createElement("main", {
|
|
2134
2184
|
className: styles$2.mainContent
|
|
2135
2185
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2136
|
-
id:
|
|
2186
|
+
id: "tabpanel-".concat(activeTab),
|
|
2137
2187
|
role: "tabpanel",
|
|
2138
|
-
"aria-labelledby":
|
|
2188
|
+
"aria-labelledby": "tab-".concat(activeTab)
|
|
2139
2189
|
}, /*#__PURE__*/React.createElement(ResultsList, {
|
|
2140
2190
|
type: activeTab,
|
|
2141
2191
|
products: displayProducts,
|
|
@@ -2149,7 +2199,7 @@ const FederatedResultsView = ({
|
|
|
2149
2199
|
totalPages: totalPages,
|
|
2150
2200
|
onPageChange: onPageChange,
|
|
2151
2201
|
maxVisiblePages: 10,
|
|
2152
|
-
ariaLabel:
|
|
2202
|
+
ariaLabel: "".concat(activeTab === "products" ? "Products" : "Content", " pagination")
|
|
2153
2203
|
}))))));
|
|
2154
2204
|
};
|
|
2155
2205
|
|
|
@@ -2191,31 +2241,30 @@ var styles$1 = {"searchExperience":"FederatedSearchExperience-module__searchExpe
|
|
|
2191
2241
|
* />
|
|
2192
2242
|
* ```
|
|
2193
2243
|
*/
|
|
2194
|
-
|
|
2195
|
-
isOpen,
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
}) => {
|
|
2244
|
+
var FederatedSearchExperience = function (_a) {
|
|
2245
|
+
var isOpen = _a.isOpen,
|
|
2246
|
+
onClose = _a.onClose,
|
|
2247
|
+
query = _a.query,
|
|
2248
|
+
onQueryChange = _a.onQueryChange,
|
|
2249
|
+
onSearchSubmit = _a.onSearchSubmit,
|
|
2250
|
+
products = _a.products,
|
|
2251
|
+
contents = _a.contents,
|
|
2252
|
+
isLoadingProducts = _a.isLoadingProducts,
|
|
2253
|
+
isLoadingContents = _a.isLoadingContents,
|
|
2254
|
+
productsError = _a.productsError,
|
|
2255
|
+
contentsError = _a.contentsError,
|
|
2256
|
+
onSeeAllProducts = _a.onSeeAllProducts,
|
|
2257
|
+
onSeeAllContents = _a.onSeeAllContents,
|
|
2258
|
+
onSeeAllCombined = _a.onSeeAllCombined,
|
|
2259
|
+
activeView = _a.activeView;
|
|
2260
|
+
_a.onChangeView;
|
|
2261
|
+
var activeTab = _a.activeTab,
|
|
2262
|
+
onTabChange = _a.onTabChange,
|
|
2263
|
+
currentPage = _a.currentPage,
|
|
2264
|
+
totalPages = _a.totalPages,
|
|
2265
|
+
onPageChange = _a.onPageChange,
|
|
2266
|
+
facets = _a.facets,
|
|
2267
|
+
onFacetToggle = _a.onFacetToggle;
|
|
2219
2268
|
return /*#__PURE__*/React.createElement(SearchModal, {
|
|
2220
2269
|
isOpen: isOpen,
|
|
2221
2270
|
onClose: onClose,
|
|
@@ -2287,13 +2336,14 @@ const FederatedSearchExperience = ({
|
|
|
2287
2336
|
|
|
2288
2337
|
var styles = {"searchTrigger":"SearchTriggerButton-module__searchTrigger___PDbDB","searchIcon":"SearchTriggerButton-module__searchIcon___izByW","label":"SearchTriggerButton-module__label___mkS7T"};
|
|
2289
2338
|
|
|
2290
|
-
|
|
2291
|
-
onOpen,
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2339
|
+
var SearchTriggerButton = function (_a) {
|
|
2340
|
+
var onOpen = _a.onOpen,
|
|
2341
|
+
_b = _a.ariaLabel,
|
|
2342
|
+
ariaLabel = _b === void 0 ? 'Open search' : _b,
|
|
2343
|
+
label = _a.label,
|
|
2344
|
+
_c = _a.className,
|
|
2345
|
+
className = _c === void 0 ? '' : _c;
|
|
2346
|
+
var handleKeyDown = function (event) {
|
|
2297
2347
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
2298
2348
|
event.preventDefault();
|
|
2299
2349
|
onOpen();
|
|
@@ -2304,7 +2354,7 @@ const SearchTriggerButton = ({
|
|
|
2304
2354
|
onClick: onOpen,
|
|
2305
2355
|
onKeyDown: handleKeyDown,
|
|
2306
2356
|
"aria-label": ariaLabel,
|
|
2307
|
-
className:
|
|
2357
|
+
className: "".concat(styles.searchTrigger, " ").concat(className)
|
|
2308
2358
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
2309
2359
|
className: styles.searchIcon,
|
|
2310
2360
|
xmlns: "http://www.w3.org/2000/svg",
|