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