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