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