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