@asante-org/leybold-design-system 1.2.0
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/README.md +163 -0
- package/dist/.next/types/app/layout.d.ts +9 -0
- package/dist/.next/types/app/page.d.ts +9 -0
- package/dist/.storybook/algoliaProvider.d.ts +42 -0
- package/dist/assets/.gitkeep +2 -0
- package/dist/assets/ai-banner-desktop.png +0 -0
- package/dist/assets/ai-banner-mobile.png +0 -0
- package/dist/assets/carousel-card.png +0 -0
- package/dist/assets/desktop-layout-alt.svg +27 -0
- package/dist/assets/desktop-layout.svg +29 -0
- package/dist/assets/globe.svg +7 -0
- package/dist/assets/language-selector-bg.png +0 -0
- package/dist/assets/leybold-footer-logo.svg +19 -0
- package/dist/assets/leybold-white.svg +19 -0
- package/dist/assets/list-card-alt.png +0 -0
- package/dist/assets/list-card.png +0 -0
- package/dist/assets/list-link-a.png +0 -0
- package/dist/assets/list-link-b.png +0 -0
- package/dist/assets/list-link-c.png +0 -0
- package/dist/assets/list-product-overlay-tip-active.svg +3 -0
- package/dist/assets/list-product-overlay-tip.svg +3 -0
- package/dist/assets/list-product.png +0 -0
- package/dist/assets/logo-example.svg +9 -0
- package/dist/assets/logo.svg +19 -0
- package/dist/assets/phone-layout.svg +14 -0
- package/dist/assets/red-tip.svg +10 -0
- package/dist/assets/search-product.png +0 -0
- package/dist/assets/tablet-layout.svg +28 -0
- package/dist/fonts/calibri.ttf +0 -0
- package/dist/fonts/calibrib.ttf +0 -0
- package/dist/fonts/calibril.ttf +0 -0
- package/dist/index.esm.js +2859 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.esm.scss +5602 -0
- package/dist/index.js +2858 -0
- package/dist/index.js.map +1 -0
- package/dist/index.scss +5602 -0
- package/dist/src/app/layout.d.ts +9 -0
- package/dist/src/app/page.d.ts +2 -0
- package/dist/src/components/AIBanner/AIBanner.d.ts +15 -0
- package/dist/src/components/AIBanner/AIBanner.stories.d.ts +7 -0
- package/dist/src/components/AIBanner/index.d.ts +2 -0
- package/dist/src/components/Button/Button.d.ts +80 -0
- package/dist/src/components/Button/Button.stories.d.ts +25 -0
- package/dist/src/components/Button/index.d.ts +2 -0
- package/dist/src/components/ContentCardHorizontal/ContentCardHorizontal.d.ts +3 -0
- package/dist/src/components/ContentCardHorizontal/ContentCardHorizontal.stories.d.ts +10 -0
- package/dist/src/components/ContentCardHorizontal/index.d.ts +2 -0
- package/dist/src/components/Filters/AppliedFilterTag.d.ts +27 -0
- package/dist/src/components/Filters/AppliedFilters.d.ts +24 -0
- package/dist/src/components/Filters/Filter.types.d.ts +204 -0
- package/dist/src/components/Filters/FilterAccordion.d.ts +6 -0
- package/dist/src/components/Filters/FilterItem.d.ts +6 -0
- package/dist/src/components/Filters/FilterSearch.d.ts +6 -0
- package/dist/src/components/Filters/Filters.stories.d.ts +24 -0
- package/dist/src/components/Filters/FiltersPanel.d.ts +10 -0
- package/dist/src/components/Filters/index.d.ts +7 -0
- package/dist/src/components/Image/Image.d.ts +4 -0
- package/dist/src/components/Image/Image.stories.d.ts +16 -0
- package/dist/src/components/Image/Image.types.d.ts +34 -0
- package/dist/src/components/Image/index.d.ts +2 -0
- package/dist/src/components/InstantResults/FederatedInstantResultsLayout.d.ts +3 -0
- package/dist/src/components/InstantResults/FederatedInstantResultsLayout.stories.d.ts +13 -0
- package/dist/src/components/InstantResults/index.d.ts +9 -0
- package/dist/src/components/LanguageSelector/LanguageSelector.d.ts +7 -0
- package/dist/src/components/LanguageSelector/LanguageSelector.stories.d.ts +32 -0
- package/dist/src/components/LanguageSelector/LanguageSelector.types.d.ts +64 -0
- package/dist/src/components/LanguageSelector/LanguageSelectorLink.d.ts +20 -0
- package/dist/src/components/LanguageSelector/LocationDropdown.d.ts +6 -0
- package/dist/src/components/LanguageSelector/LocationSelectorLink.d.ts +20 -0
- package/dist/src/components/LanguageSelector/index.d.ts +7 -0
- package/dist/src/components/Pagination/Pagination.d.ts +3 -0
- package/dist/src/components/Pagination/Pagination.stories.d.ts +16 -0
- package/dist/src/components/Pagination/Pagination.types.d.ts +98 -0
- package/dist/src/components/Pagination/PaginationButton.d.ts +3 -0
- package/dist/src/components/Pagination/PaginationEllipsis.d.ts +3 -0
- package/dist/src/components/Pagination/PaginationItem.d.ts +3 -0
- package/dist/src/components/Pagination/index.d.ts +5 -0
- package/dist/src/components/ProductCardDetails/ProductCardDetails.d.ts +4 -0
- package/dist/src/components/ProductCardDetails/ProductCardDetails.stories.d.ts +10 -0
- package/dist/src/components/ProductCardDetails/index.d.ts +2 -0
- package/dist/src/components/ProductCardHorizontal/ProductCardHorizontal.d.ts +4 -0
- package/dist/src/components/ProductCardHorizontal/ProductCardHorizontal.stories.d.ts +11 -0
- package/dist/src/components/ProductCardHorizontal/index.d.ts +2 -0
- package/dist/src/components/ProductCardVertical/ProductCardVertical.d.ts +22 -0
- package/dist/src/components/ProductCardVertical/ProductCardVertical.types.d.ts +50 -0
- package/dist/src/components/ProductCardVertical/index.d.ts +2 -0
- package/dist/src/components/ResultsColumn/ResultsColumn.d.ts +3 -0
- package/dist/src/components/ResultsColumn/index.d.ts +2 -0
- package/dist/src/components/ResultsCount/ResultsCount.d.ts +7 -0
- package/dist/src/components/ResultsCount/index.d.ts +2 -0
- package/dist/src/components/ResultsView/FederatedResultsView.d.ts +3 -0
- package/dist/src/components/ResultsView/FederatedResultsView.stories.d.ts +11 -0
- package/dist/src/components/ResultsView/ResultsList.d.ts +3 -0
- package/dist/src/components/ResultsView/index.d.ts +3 -0
- package/dist/src/components/SearchBar/SearchBar.d.ts +3 -0
- package/dist/src/components/SearchBar/SearchBar.stories.d.ts +9 -0
- package/dist/src/components/SearchBar/SearchIcon.d.ts +5 -0
- package/dist/src/components/SearchBar/SearchInput.d.ts +10 -0
- package/dist/src/components/SearchBar/SearchSubmitButton.d.ts +10 -0
- package/dist/src/components/SearchBar/index.d.ts +8 -0
- package/dist/src/components/SearchModal/ModalCloseButton.d.ts +7 -0
- package/dist/src/components/SearchModal/SearchModal.d.ts +3 -0
- package/dist/src/components/SearchModal/SearchModal.stories.d.ts +8 -0
- package/dist/src/components/SearchModal/index.d.ts +4 -0
- package/dist/src/components/SearchTriggerButton/SearchTriggerButton.d.ts +3 -0
- package/dist/src/components/SearchTriggerButton/SearchTriggerButton.stories.d.ts +8 -0
- package/dist/src/components/SearchTriggerButton/index.d.ts +2 -0
- package/dist/src/components/SeeAllLinkButton/SeeAllLinkButton.d.ts +7 -0
- package/dist/src/components/SeeAllLinkButton/index.d.ts +2 -0
- package/dist/src/experience/Carousel/Carousel.d.ts +36 -0
- package/dist/src/experience/Carousel/Carousel.stories.d.ts +7 -0
- package/dist/src/experience/Carousel/index.d.ts +2 -0
- package/dist/src/experience/Footer/Footer.d.ts +201 -0
- package/dist/src/experience/Footer/Footer.stories.d.ts +28 -0
- package/dist/src/experience/Footer/icons/AtlasCopcoIcon.d.ts +10 -0
- package/dist/src/experience/Footer/icons/ExternalLinkIcon.d.ts +10 -0
- package/dist/src/experience/Footer/icons/index.d.ts +2 -0
- package/dist/src/experience/Footer/index.d.ts +2 -0
- package/dist/src/experience/GeneratedList/GeneratedList.d.ts +40 -0
- package/dist/src/experience/GeneratedList/GeneratedList.stories.d.ts +7 -0
- package/dist/src/experience/GeneratedList/GeneratedList.types.d.ts +131 -0
- package/dist/src/experience/GeneratedList/GeneratedListExternalLink.stories.d.ts +7 -0
- package/dist/src/experience/GeneratedList/GeneratedListList.stories.d.ts +9 -0
- package/dist/src/experience/GeneratedList/GeneratedListProduct.stories.d.ts +7 -0
- package/dist/src/experience/GeneratedList/_Card.d.ts +8 -0
- package/dist/src/experience/GeneratedList/_CardMobile.d.ts +8 -0
- package/dist/src/experience/GeneratedList/_ExternalLink.d.ts +8 -0
- package/dist/src/experience/GeneratedList/_List.d.ts +8 -0
- package/dist/src/experience/GeneratedList/_Product.d.ts +9 -0
- package/dist/src/experience/GeneratedList/index.d.ts +2 -0
- package/dist/src/experience/Header/Header.d.ts +20 -0
- package/dist/src/experience/Header/Header.stories.d.ts +9 -0
- package/dist/src/experience/Header/HeaderNavButton.d.ts +9 -0
- package/dist/src/experience/Header/MegaMenu.d.ts +10 -0
- package/dist/src/experience/Header/MenuLink.d.ts +8 -0
- package/dist/src/experience/Header/MobileHeader.stories.d.ts +6 -0
- package/dist/src/experience/Header/MobileMenu.d.ts +9 -0
- package/dist/src/experience/Header/MobileNavBar.d.ts +13 -0
- package/dist/src/experience/Header/index.d.ts +6 -0
- package/dist/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.d.ts +4 -0
- package/dist/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.stories.d.ts +7 -0
- package/dist/src/experience/algolia-dynamic-search/index.d.ts +3 -0
- package/dist/src/experience/federated-search/FederatedSearchExperience.d.ts +39 -0
- package/dist/src/experience/federated-search/FederatedSearchExperience.stories.d.ts +10 -0
- package/dist/src/experience/federated-search/FederatedSearchWithAlgolia.stories.d.ts +7 -0
- package/dist/src/experience/federated-search/components/AssistanceBanner/AssistanceBanner.d.ts +22 -0
- package/dist/src/experience/federated-search/components/AssistanceBanner/AssistanceBanner.types.d.ts +29 -0
- package/dist/src/experience/federated-search/components/AssistanceBanner/AssistanceIcon.d.ts +2 -0
- package/dist/src/experience/federated-search/components/AssistanceBanner/index.d.ts +3 -0
- package/dist/src/experience/federated-search/components/FilterDrawer/FilterDrawer.d.ts +24 -0
- package/dist/src/experience/federated-search/components/FilterDrawer/FilterDrawer.types.d.ts +22 -0
- package/dist/src/experience/federated-search/components/FilterDrawer/index.d.ts +2 -0
- package/dist/src/experience/federated-search/components/TabButton/TabButton.d.ts +31 -0
- package/dist/src/experience/federated-search/components/TabButton/TabButton.types.d.ts +32 -0
- package/dist/src/experience/federated-search/components/TabButton/index.d.ts +2 -0
- package/dist/src/experience/federated-search/index.d.ts +2 -0
- package/dist/src/experience/qr-form-journey/QrFormJourney.d.ts +3 -0
- package/dist/src/experience/qr-form-journey/QrFormJourney.stories.d.ts +8 -0
- package/dist/src/experience/qr-form-journey/index.d.ts +1 -0
- package/dist/src/hooks/useFederatedSearchMock.d.ts +36 -0
- package/dist/src/index.d.ts +29 -0
- package/dist/src/stories/foundation/Buttons/ButtonComponents.d.ts +56 -0
- package/dist/src/stories/foundation/Typography/TypographyComponents.d.ts +46 -0
- package/dist/src/stories/foundation/_components/StoryLayout.d.ts +11 -0
- package/dist/src/types/buttons.d.ts +4 -0
- package/dist/src/types/cards.d.ts +50 -0
- package/dist/src/types/search.d.ts +139 -0
- package/dist/src/utils/styles/index.d.ts +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/package.json +115 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,2858 @@
|
|
|
1
|
+
import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
|
|
2
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
3
|
+
import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe, faXmark as faXmark$1 } from '@fortawesome/free-solid-svg-icons';
|
|
4
|
+
import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
|
|
5
|
+
import { faChevronRight as faChevronRight$1, faArrowUpRightFromSquare as faArrowUpRightFromSquare$1 } from '@fortawesome/pro-solid-svg-icons';
|
|
6
|
+
import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
|
|
7
|
+
|
|
8
|
+
function _extends() {
|
|
9
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
10
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
11
|
+
var t = arguments[e];
|
|
12
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
13
|
+
}
|
|
14
|
+
return n;
|
|
15
|
+
}, _extends.apply(null, arguments);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/******************************************************************************
|
|
19
|
+
Copyright (c) Microsoft Corporation.
|
|
20
|
+
|
|
21
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
22
|
+
purpose with or without fee is hereby granted.
|
|
23
|
+
|
|
24
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
25
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
26
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
27
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
28
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
29
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
30
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
31
|
+
***************************************************************************** */
|
|
32
|
+
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
33
|
+
|
|
34
|
+
var __assign = function () {
|
|
35
|
+
__assign = Object.assign || function __assign(t) {
|
|
36
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
37
|
+
s = arguments[i];
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
39
|
+
}
|
|
40
|
+
return t;
|
|
41
|
+
};
|
|
42
|
+
return __assign.apply(this, arguments);
|
|
43
|
+
};
|
|
44
|
+
function __rest(s, e) {
|
|
45
|
+
var t = {};
|
|
46
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
47
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
48
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
49
|
+
}
|
|
50
|
+
return t;
|
|
51
|
+
}
|
|
52
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
53
|
+
var e = new Error(message);
|
|
54
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
var styles$k = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","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-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"};
|
|
58
|
+
|
|
59
|
+
function getDefaultExportFromCjs (x) {
|
|
60
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
var classnames = {exports: {}};
|
|
64
|
+
|
|
65
|
+
/*!
|
|
66
|
+
Copyright (c) 2018 Jed Watson.
|
|
67
|
+
Licensed under the MIT License (MIT), see
|
|
68
|
+
http://jedwatson.github.io/classnames
|
|
69
|
+
*/
|
|
70
|
+
var hasRequiredClassnames;
|
|
71
|
+
function requireClassnames() {
|
|
72
|
+
if (hasRequiredClassnames) return classnames.exports;
|
|
73
|
+
hasRequiredClassnames = 1;
|
|
74
|
+
(function (module) {
|
|
75
|
+
/* global define */
|
|
76
|
+
|
|
77
|
+
(function () {
|
|
78
|
+
|
|
79
|
+
var hasOwn = {}.hasOwnProperty;
|
|
80
|
+
function classNames() {
|
|
81
|
+
var classes = '';
|
|
82
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
83
|
+
var arg = arguments[i];
|
|
84
|
+
if (arg) {
|
|
85
|
+
classes = appendClass(classes, parseValue(arg));
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return classes;
|
|
89
|
+
}
|
|
90
|
+
function parseValue(arg) {
|
|
91
|
+
if (typeof arg === 'string' || typeof arg === 'number') {
|
|
92
|
+
return arg;
|
|
93
|
+
}
|
|
94
|
+
if (typeof arg !== 'object') {
|
|
95
|
+
return '';
|
|
96
|
+
}
|
|
97
|
+
if (Array.isArray(arg)) {
|
|
98
|
+
return classNames.apply(null, arg);
|
|
99
|
+
}
|
|
100
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
|
|
101
|
+
return arg.toString();
|
|
102
|
+
}
|
|
103
|
+
var classes = '';
|
|
104
|
+
for (var key in arg) {
|
|
105
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
106
|
+
classes = appendClass(classes, key);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
return classes;
|
|
110
|
+
}
|
|
111
|
+
function appendClass(value, newClass) {
|
|
112
|
+
if (!newClass) {
|
|
113
|
+
return value;
|
|
114
|
+
}
|
|
115
|
+
if (value) {
|
|
116
|
+
return value + ' ' + newClass;
|
|
117
|
+
}
|
|
118
|
+
return value + newClass;
|
|
119
|
+
}
|
|
120
|
+
if (module.exports) {
|
|
121
|
+
classNames.default = classNames;
|
|
122
|
+
module.exports = classNames;
|
|
123
|
+
} else {
|
|
124
|
+
window.classNames = classNames;
|
|
125
|
+
}
|
|
126
|
+
})();
|
|
127
|
+
})(classnames);
|
|
128
|
+
return classnames.exports;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
var classnamesExports = requireClassnames();
|
|
132
|
+
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
133
|
+
|
|
134
|
+
/**
|
|
135
|
+
* Get the icon component based on icon type
|
|
136
|
+
*/
|
|
137
|
+
var getIcon = function (icon) {
|
|
138
|
+
switch (icon) {
|
|
139
|
+
case "arrow-right":
|
|
140
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
141
|
+
icon: faArrowRight
|
|
142
|
+
});
|
|
143
|
+
case "external":
|
|
144
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
145
|
+
icon: faArrowUpRightFromSquare
|
|
146
|
+
});
|
|
147
|
+
case "chevron-left":
|
|
148
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
149
|
+
icon: faChevronLeft
|
|
150
|
+
});
|
|
151
|
+
case "chevron-right":
|
|
152
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
153
|
+
icon: faChevronRight
|
|
154
|
+
});
|
|
155
|
+
default:
|
|
156
|
+
return null;
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
/**
|
|
160
|
+
* Get default icon for certain variants
|
|
161
|
+
*/
|
|
162
|
+
var getDefaultIcon = function (variant) {
|
|
163
|
+
switch (variant) {
|
|
164
|
+
case "link-text":
|
|
165
|
+
case "link-text-alt":
|
|
166
|
+
case "text":
|
|
167
|
+
// Alias
|
|
168
|
+
return "arrow-right";
|
|
169
|
+
case "external-link":
|
|
170
|
+
return "external";
|
|
171
|
+
case "carousel-arrow-left":
|
|
172
|
+
return "chevron-left";
|
|
173
|
+
case "carousel-arrow-right":
|
|
174
|
+
return "chevron-right";
|
|
175
|
+
default:
|
|
176
|
+
return "none";
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
/**
|
|
180
|
+
* Map alias variants to their actual CSS class variants
|
|
181
|
+
*/
|
|
182
|
+
var mapVariantToClass = function (variant) {
|
|
183
|
+
switch (variant) {
|
|
184
|
+
case "text":
|
|
185
|
+
return "link-text";
|
|
186
|
+
default:
|
|
187
|
+
return variant;
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
/**
|
|
191
|
+
* Primary UI component for user interaction
|
|
192
|
+
*/
|
|
193
|
+
var Button = function (_a) {
|
|
194
|
+
var _b;
|
|
195
|
+
var children = _a.children,
|
|
196
|
+
_c = _a.variant,
|
|
197
|
+
variant = _c === void 0 ? "primary" : _c,
|
|
198
|
+
_d = _a.size,
|
|
199
|
+
size = _d === void 0 ? "medium" : _d,
|
|
200
|
+
_e = _a.disabled,
|
|
201
|
+
disabled = _e === void 0 ? false : _e,
|
|
202
|
+
onClick = _a.onClick,
|
|
203
|
+
_f = _a.type,
|
|
204
|
+
type = _f === void 0 ? "button" : _f,
|
|
205
|
+
className = _a.className,
|
|
206
|
+
icon = _a.icon,
|
|
207
|
+
_g = _a.iconPosition,
|
|
208
|
+
iconPosition = _g === void 0 ? "right" : _g,
|
|
209
|
+
ariaLabel = _a.ariaLabel;
|
|
210
|
+
_a.opensInNewTab;
|
|
211
|
+
var props = __rest(_a, ["children", "variant", "size", "disabled", "onClick", "type", "className", "icon", "iconPosition", "ariaLabel", "opensInNewTab"]);
|
|
212
|
+
// Map alias variants to actual class names
|
|
213
|
+
var cssVariant = mapVariantToClass(variant);
|
|
214
|
+
// Determine the icon to display
|
|
215
|
+
var displayIcon = icon !== null && icon !== void 0 ? icon : getDefaultIcon(variant);
|
|
216
|
+
var iconElement = getIcon(displayIcon);
|
|
217
|
+
// Check if this is an icon-only button (carousel arrows)
|
|
218
|
+
var isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
|
|
219
|
+
var isCarouselLeft = variant === "carousel-arrow-left";
|
|
220
|
+
var isCarouselRight = variant === "carousel-arrow-right";
|
|
221
|
+
var buttonClasses = classNames(styles$k.button, styles$k["button--".concat(cssVariant)], styles$k["button--".concat(size)], (_b = {}, _b[styles$k["button--disabled"]] = disabled, _b), className);
|
|
222
|
+
var iconClasses = classNames(styles$k.button__icon, styles$k["button__icon--".concat(iconPosition)]);
|
|
223
|
+
// Generate accessible label for icon-only buttons
|
|
224
|
+
var accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
|
|
225
|
+
return /*#__PURE__*/React.createElement("button", _extends({
|
|
226
|
+
type: type,
|
|
227
|
+
className: buttonClasses,
|
|
228
|
+
disabled: disabled,
|
|
229
|
+
onClick: onClick,
|
|
230
|
+
"aria-label": accessibleLabel,
|
|
231
|
+
"data-force-state": props['data-force-state']
|
|
232
|
+
}, props), !isIconOnly && children, isCarouselLeft && /*#__PURE__*/React.createElement("span", {
|
|
233
|
+
className: iconClasses
|
|
234
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
235
|
+
icon: faArrowLeft,
|
|
236
|
+
className: styles$k.button__icon__default
|
|
237
|
+
}), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
238
|
+
icon: faArrowLeftLong,
|
|
239
|
+
className: styles$k.button__icon__hover
|
|
240
|
+
})), isCarouselRight && /*#__PURE__*/React.createElement("span", {
|
|
241
|
+
className: iconClasses
|
|
242
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
243
|
+
icon: faArrowRight,
|
|
244
|
+
className: styles$k.button__icon__default
|
|
245
|
+
}), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
246
|
+
icon: faArrowRightLong,
|
|
247
|
+
className: styles$k.button__icon__hover
|
|
248
|
+
})), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
|
|
249
|
+
className: iconClasses
|
|
250
|
+
}, iconElement));
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
var styles$j = {"footer":"Footer-module__footer___Oavyx","footer--mobile":"Footer-module__footer--mobile___9HQC-","footer__container":"Footer-module__footer__container___ohvnm","footer__links":"Footer-module__footer__links___DdVK8","footer__linkGroup":"Footer-module__footer__linkGroup___1B7JA","footer__linkList":"Footer-module__footer__linkList___j-DWF","footer__linkHeading":"Footer-module__footer__linkHeading___LtE6X","footer__link":"Footer-module__footer__link___G5HPW","footer__cta":"Footer-module__footer__cta___MRJLr","footer__socialIcons":"Footer-module__footer__socialIcons___j0aRp","footer__socialIcon":"Footer-module__footer__socialIcon___1uVTm","footer__countrySelector":"Footer-module__footer__countrySelector___pVtN5","footer__bottom":"Footer-module__footer__bottom___77bPL","footer__bottomLeft":"Footer-module__footer__bottomLeft___tlst1","footer__bottomLinks":"Footer-module__footer__bottomLinks___s22h7","footer__bottomLink":"Footer-module__footer__bottomLink___SLzwY","footer__copyright":"Footer-module__footer__copyright___4bZOF","footer__brandSection":"Footer-module__footer__brandSection___BBr5f","footer__logo":"Footer-module__footer__logo___mv-9M","footer__leftCol":"Footer-module__footer__leftCol___vmKNN","footer__motto":"Footer-module__footer__motto___QtB2m","footer__main":"Footer-module__footer__main___NSU9d","footer__badge":"Footer-module__footer__badge___faejb","footer__badgeIcon":"Footer-module__footer__badgeIcon___xJ519","footer__badgeText":"Footer-module__footer__badgeText___imXgG","footer__linkText":"Footer-module__footer__linkText___Gc18Z","footer__linkIcon":"Footer-module__footer__linkIcon___IZzJM","footer__countrySelectorIcon":"Footer-module__footer__countrySelectorIcon___hhEd4"};
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* External link icon (↗) for footer links that open in new tabs
|
|
257
|
+
*/
|
|
258
|
+
var ExternalLinkIcon = function (_a) {
|
|
259
|
+
var className = _a.className,
|
|
260
|
+
_b = _a.size,
|
|
261
|
+
size = _b === void 0 ? 15 : _b;
|
|
262
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
263
|
+
width: size,
|
|
264
|
+
height: size,
|
|
265
|
+
viewBox: "0 0 15 15",
|
|
266
|
+
fill: "none",
|
|
267
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
268
|
+
className: className,
|
|
269
|
+
"aria-hidden": "true"
|
|
270
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
271
|
+
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",
|
|
272
|
+
stroke: "currentColor",
|
|
273
|
+
strokeWidth: "1.5",
|
|
274
|
+
strokeLinecap: "round",
|
|
275
|
+
strokeLinejoin: "round"
|
|
276
|
+
}));
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
/**
|
|
280
|
+
* Atlas Copco Group badge icon (square)
|
|
281
|
+
*/
|
|
282
|
+
var AtlasCopcoIcon = function (_a) {
|
|
283
|
+
var className = _a.className,
|
|
284
|
+
_b = _a.size,
|
|
285
|
+
size = _b === void 0 ? 14 : _b;
|
|
286
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
287
|
+
width: size,
|
|
288
|
+
height: size,
|
|
289
|
+
viewBox: "0 0 14 14",
|
|
290
|
+
fill: "none",
|
|
291
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
292
|
+
className: className,
|
|
293
|
+
"aria-hidden": "true"
|
|
294
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
295
|
+
x: "0.5",
|
|
296
|
+
y: "0.5",
|
|
297
|
+
width: "13",
|
|
298
|
+
height: "13",
|
|
299
|
+
rx: "1.5",
|
|
300
|
+
fill: "#D9D9D9",
|
|
301
|
+
stroke: "#D9D9D9"
|
|
302
|
+
}));
|
|
303
|
+
};
|
|
304
|
+
|
|
305
|
+
// =============================================================================
|
|
306
|
+
// SOCIAL ICON COMPONENT
|
|
307
|
+
// =============================================================================
|
|
308
|
+
var SocialIconComponent = function (_a) {
|
|
309
|
+
var platform = _a.platform;
|
|
310
|
+
var iconMap = {
|
|
311
|
+
facebook: faFacebookF,
|
|
312
|
+
x: faXTwitter,
|
|
313
|
+
linkedin: faLinkedinIn,
|
|
314
|
+
youtube: faYoutube,
|
|
315
|
+
instagram: faInstagram
|
|
316
|
+
};
|
|
317
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
318
|
+
icon: iconMap[platform]
|
|
319
|
+
});
|
|
320
|
+
};
|
|
321
|
+
var FooterLink = function (_a) {
|
|
322
|
+
var item = _a.item,
|
|
323
|
+
className = _a.className,
|
|
324
|
+
_b = _a.variant,
|
|
325
|
+
variant = _b === void 0 ? 'default' : _b;
|
|
326
|
+
var baseClass = variant === 'bottom' ? styles$j.footer__bottomLink : styles$j.footer__link;
|
|
327
|
+
var linkClasses = classNames(baseClass, className);
|
|
328
|
+
var handleClick = function (e) {
|
|
329
|
+
if (item.onClick) {
|
|
330
|
+
e.preventDefault();
|
|
331
|
+
item.onClick();
|
|
332
|
+
}
|
|
333
|
+
};
|
|
334
|
+
return /*#__PURE__*/React.createElement("a", _extends({
|
|
335
|
+
href: item.href,
|
|
336
|
+
className: linkClasses,
|
|
337
|
+
onClick: item.onClick ? handleClick : undefined
|
|
338
|
+
}, item.external && {
|
|
339
|
+
target: '_blank',
|
|
340
|
+
rel: 'noopener noreferrer'
|
|
341
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
342
|
+
className: styles$j.footer__linkText
|
|
343
|
+
}, item.label), item.external && /*#__PURE__*/React.createElement("span", {
|
|
344
|
+
className: styles$j.footer__linkIcon
|
|
345
|
+
}, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
|
|
346
|
+
size: 15
|
|
347
|
+
})));
|
|
348
|
+
};
|
|
349
|
+
var FooterLinkGroup = function (_a) {
|
|
350
|
+
var heading = _a.heading,
|
|
351
|
+
links = _a.links,
|
|
352
|
+
className = _a.className,
|
|
353
|
+
children = _a.children;
|
|
354
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
355
|
+
className: classNames(styles$j.footer__linkGroup, className)
|
|
356
|
+
}, /*#__PURE__*/React.createElement("h3", {
|
|
357
|
+
className: styles$j.footer__linkHeading
|
|
358
|
+
}, heading), /*#__PURE__*/React.createElement("ul", {
|
|
359
|
+
className: styles$j.footer__linkList
|
|
360
|
+
}, links.map(function (link, index) {
|
|
361
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
362
|
+
key: index
|
|
363
|
+
}, /*#__PURE__*/React.createElement(FooterLink, {
|
|
364
|
+
item: link
|
|
365
|
+
}));
|
|
366
|
+
})), children);
|
|
367
|
+
};
|
|
368
|
+
var FooterSocialIcons = function (_a) {
|
|
369
|
+
var links = _a.links,
|
|
370
|
+
className = _a.className;
|
|
371
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
372
|
+
className: classNames(styles$j.footer__socialIcons, className)
|
|
373
|
+
}, links.map(function (link, index) {
|
|
374
|
+
return /*#__PURE__*/React.createElement("a", {
|
|
375
|
+
key: index,
|
|
376
|
+
href: link.href,
|
|
377
|
+
className: styles$j.footer__socialIcon,
|
|
378
|
+
"aria-label": link.ariaLabel,
|
|
379
|
+
target: "_blank",
|
|
380
|
+
rel: "noopener noreferrer"
|
|
381
|
+
}, /*#__PURE__*/React.createElement(SocialIconComponent, {
|
|
382
|
+
platform: link.platform
|
|
383
|
+
}));
|
|
384
|
+
}));
|
|
385
|
+
};
|
|
386
|
+
var FooterSocialIcon = function (_a) {
|
|
387
|
+
var platform = _a.platform,
|
|
388
|
+
className = _a.className;
|
|
389
|
+
var iconClasses = classNames(styles$j.footer__socialIcon, className);
|
|
390
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
391
|
+
className: iconClasses
|
|
392
|
+
}, /*#__PURE__*/React.createElement(SocialIconComponent, {
|
|
393
|
+
platform: platform
|
|
394
|
+
}));
|
|
395
|
+
};
|
|
396
|
+
var FooterBottom = function (_a) {
|
|
397
|
+
var links = _a.links,
|
|
398
|
+
copyright = _a.copyright,
|
|
399
|
+
countrySelector = _a.countrySelector,
|
|
400
|
+
className = _a.className;
|
|
401
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
402
|
+
className: classNames(styles$j.footer__bottom, className)
|
|
403
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
404
|
+
className: styles$j.footer__bottomLeft
|
|
405
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
406
|
+
className: styles$j.footer__bottomLinks
|
|
407
|
+
}, links.map(function (link, index) {
|
|
408
|
+
return /*#__PURE__*/React.createElement(FooterLink, {
|
|
409
|
+
key: index,
|
|
410
|
+
item: link,
|
|
411
|
+
variant: "bottom"
|
|
412
|
+
});
|
|
413
|
+
})), /*#__PURE__*/React.createElement("p", {
|
|
414
|
+
className: styles$j.footer__copyright
|
|
415
|
+
}, copyright)), countrySelector && /*#__PURE__*/React.createElement("a", {
|
|
416
|
+
href: countrySelector.href || '#',
|
|
417
|
+
className: styles$j.footer__countrySelector
|
|
418
|
+
}, countrySelector.showIcon !== false && /*#__PURE__*/React.createElement("span", {
|
|
419
|
+
className: styles$j.footer__countrySelectorIcon
|
|
420
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
421
|
+
icon: faGlobe
|
|
422
|
+
})), countrySelector.label));
|
|
423
|
+
};
|
|
424
|
+
// =============================================================================
|
|
425
|
+
// MAIN FOOTER COMPONENT
|
|
426
|
+
// =============================================================================
|
|
427
|
+
/**
|
|
428
|
+
* Footer component with brand identity, navigation links, social icons, and legal information.
|
|
429
|
+
* Supports two layout variants:
|
|
430
|
+
* - desktop: Logo at top, 3-column main content
|
|
431
|
+
* - mobile: Logo at bottom, stacked layout with CTA button
|
|
432
|
+
*/
|
|
433
|
+
var Footer = function (_a) {
|
|
434
|
+
var _b = _a.variant,
|
|
435
|
+
variant = _b === void 0 ? 'desktop' : _b,
|
|
436
|
+
logo = _a.logo,
|
|
437
|
+
motto = _a.motto,
|
|
438
|
+
atlasCopcoBadge = _a.atlasCopcoBadge,
|
|
439
|
+
quickLinks = _a.quickLinks,
|
|
440
|
+
_c = _a.quickLinksHeading,
|
|
441
|
+
quickLinksHeading = _c === void 0 ? 'Quick links' : _c,
|
|
442
|
+
contactLinks = _a.contactLinks,
|
|
443
|
+
_d = _a.contactHeading,
|
|
444
|
+
contactHeading = _d === void 0 ? 'Contact us' : _d,
|
|
445
|
+
socialLinks = _a.socialLinks,
|
|
446
|
+
contactFormButton = _a.contactFormButton,
|
|
447
|
+
bottomLinks = _a.bottomLinks,
|
|
448
|
+
copyright = _a.copyright,
|
|
449
|
+
countrySelector = _a.countrySelector,
|
|
450
|
+
className = _a.className;
|
|
451
|
+
var isMobile = variant === 'mobile';
|
|
452
|
+
var footerClasses = classNames(styles$j.footer, isMobile && styles$j['footer--mobile'], className);
|
|
453
|
+
var LogoWrapper = logo.href ? 'a' : 'div';
|
|
454
|
+
var logoProps = logo.href ? {
|
|
455
|
+
href: logo.href,
|
|
456
|
+
className: styles$j.footer__logo
|
|
457
|
+
} : {
|
|
458
|
+
className: styles$j.footer__logo
|
|
459
|
+
};
|
|
460
|
+
// Logo + Motto + Badge component (used in both layouts)
|
|
461
|
+
var LogoSection = function () {
|
|
462
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
|
|
463
|
+
src: logo.src,
|
|
464
|
+
alt: logo.alt
|
|
465
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
466
|
+
className: styles$j.footer__leftCol
|
|
467
|
+
}, /*#__PURE__*/React.createElement("h2", {
|
|
468
|
+
className: styles$j.footer__motto
|
|
469
|
+
}, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
|
|
470
|
+
className: styles$j.footer__badge
|
|
471
|
+
}, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
|
|
472
|
+
className: styles$j.footer__badgeIcon
|
|
473
|
+
}, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
|
|
474
|
+
size: 14
|
|
475
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
476
|
+
className: styles$j.footer__badgeText
|
|
477
|
+
}, atlasCopcoBadge.text))));
|
|
478
|
+
};
|
|
479
|
+
// Mobile layout: Links at top, logo/motto at bottom
|
|
480
|
+
if (isMobile) {
|
|
481
|
+
return /*#__PURE__*/React.createElement("footer", {
|
|
482
|
+
className: footerClasses
|
|
483
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
484
|
+
className: styles$j.footer__container
|
|
485
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
486
|
+
className: styles$j.footer__links
|
|
487
|
+
}, /*#__PURE__*/React.createElement(FooterLinkGroup, {
|
|
488
|
+
heading: quickLinksHeading,
|
|
489
|
+
links: quickLinks
|
|
490
|
+
}), /*#__PURE__*/React.createElement(FooterLinkGroup, {
|
|
491
|
+
heading: contactHeading,
|
|
492
|
+
links: contactLinks
|
|
493
|
+
})), contactFormButton && /*#__PURE__*/React.createElement("div", {
|
|
494
|
+
className: styles$j.footer__cta
|
|
495
|
+
}, /*#__PURE__*/React.createElement("a", {
|
|
496
|
+
href: contactFormButton.href,
|
|
497
|
+
style: {
|
|
498
|
+
textDecoration: 'none',
|
|
499
|
+
width: '100%'
|
|
500
|
+
}
|
|
501
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
502
|
+
variant: "primary",
|
|
503
|
+
style: {
|
|
504
|
+
width: '100%'
|
|
505
|
+
}
|
|
506
|
+
}, contactFormButton.label))), socialLinks.length > 0 && /*#__PURE__*/React.createElement(FooterSocialIcons, {
|
|
507
|
+
links: socialLinks
|
|
508
|
+
}), /*#__PURE__*/React.createElement(FooterBottom, {
|
|
509
|
+
links: bottomLinks,
|
|
510
|
+
copyright: copyright,
|
|
511
|
+
countrySelector: countrySelector
|
|
512
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
513
|
+
className: styles$j.footer__brandSection
|
|
514
|
+
}, /*#__PURE__*/React.createElement(LogoSection, null))));
|
|
515
|
+
}
|
|
516
|
+
// Desktop layout: Logo at top, 3-column main content
|
|
517
|
+
return /*#__PURE__*/React.createElement("footer", {
|
|
518
|
+
className: footerClasses
|
|
519
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
520
|
+
className: styles$j.footer__container
|
|
521
|
+
}, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
|
|
522
|
+
src: logo.src,
|
|
523
|
+
alt: logo.alt
|
|
524
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
525
|
+
className: styles$j.footer__main
|
|
526
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
527
|
+
className: styles$j.footer__leftCol
|
|
528
|
+
}, /*#__PURE__*/React.createElement("h2", {
|
|
529
|
+
className: styles$j.footer__motto
|
|
530
|
+
}, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
|
|
531
|
+
className: styles$j.footer__badge
|
|
532
|
+
}, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
|
|
533
|
+
className: styles$j.footer__badgeIcon
|
|
534
|
+
}, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
|
|
535
|
+
size: 14
|
|
536
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
537
|
+
className: styles$j.footer__badgeText
|
|
538
|
+
}, atlasCopcoBadge.text))), /*#__PURE__*/React.createElement("div", {
|
|
539
|
+
className: styles$j.footer__links
|
|
540
|
+
}, /*#__PURE__*/React.createElement(FooterLinkGroup, {
|
|
541
|
+
heading: quickLinksHeading,
|
|
542
|
+
links: quickLinks
|
|
543
|
+
}), /*#__PURE__*/React.createElement(FooterLinkGroup, {
|
|
544
|
+
heading: contactHeading,
|
|
545
|
+
links: contactLinks
|
|
546
|
+
}, socialLinks.length > 0 && /*#__PURE__*/React.createElement(FooterSocialIcons, {
|
|
547
|
+
links: socialLinks
|
|
548
|
+
})))), /*#__PURE__*/React.createElement(FooterBottom, {
|
|
549
|
+
links: bottomLinks,
|
|
550
|
+
copyright: copyright,
|
|
551
|
+
countrySelector: countrySelector
|
|
552
|
+
})));
|
|
553
|
+
};
|
|
554
|
+
|
|
555
|
+
var styles$i = {"pagination":"Pagination-module__pagination___Kih79","dividerLine":"Pagination-module__dividerLine___85LAX","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","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","navIcon":"Pagination-module__navIcon___-BVJ3","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
|
|
556
|
+
|
|
557
|
+
var PaginationItem = function (_a) {
|
|
558
|
+
var page = _a.page,
|
|
559
|
+
isActive = _a.isActive,
|
|
560
|
+
onClick = _a.onClick,
|
|
561
|
+
className = _a.className;
|
|
562
|
+
var handleClick = function () {
|
|
563
|
+
if (!isActive) {
|
|
564
|
+
onClick(page);
|
|
565
|
+
}
|
|
566
|
+
};
|
|
567
|
+
var handleKeyDown = function (event) {
|
|
568
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
569
|
+
event.preventDefault();
|
|
570
|
+
handleClick();
|
|
571
|
+
}
|
|
572
|
+
};
|
|
573
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
574
|
+
className: styles$i.paginationItem
|
|
575
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
576
|
+
type: "button",
|
|
577
|
+
onClick: handleClick,
|
|
578
|
+
onKeyDown: handleKeyDown,
|
|
579
|
+
className: "".concat(styles$i.pageButton, " ").concat(isActive ? styles$i.pageButtonActive : "", " ").concat(className || ""),
|
|
580
|
+
"aria-current": isActive ? "page" : undefined,
|
|
581
|
+
"aria-label": "Page ".concat(page),
|
|
582
|
+
disabled: isActive,
|
|
583
|
+
tabIndex: isActive ? -1 : 0
|
|
584
|
+
}, page));
|
|
585
|
+
};
|
|
586
|
+
|
|
587
|
+
var PaginationButton = function (_a) {
|
|
588
|
+
var label = _a.label,
|
|
589
|
+
disabled = _a.disabled,
|
|
590
|
+
onClick = _a.onClick,
|
|
591
|
+
direction = _a.direction,
|
|
592
|
+
className = _a.className,
|
|
593
|
+
ariaLabel = _a.ariaLabel;
|
|
594
|
+
var handleKeyDown = function (event) {
|
|
595
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
596
|
+
event.preventDefault();
|
|
597
|
+
if (!disabled) {
|
|
598
|
+
onClick();
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
};
|
|
602
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
603
|
+
className: styles$i.paginationItem
|
|
604
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
605
|
+
type: "button",
|
|
606
|
+
onClick: onClick,
|
|
607
|
+
onKeyDown: handleKeyDown,
|
|
608
|
+
disabled: disabled,
|
|
609
|
+
className: "".concat(styles$i.navButton, " ").concat(styles$i["navButton--".concat(direction)], " ").concat(disabled ? styles$i.navButtonDisabled : "", " ").concat(className || ""),
|
|
610
|
+
"aria-label": ariaLabel || label,
|
|
611
|
+
tabIndex: disabled ? -1 : 0
|
|
612
|
+
}, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
613
|
+
icon: faChevronRight$1,
|
|
614
|
+
className: styles$i.navIcon,
|
|
615
|
+
"aria-hidden": "true"
|
|
616
|
+
})));
|
|
617
|
+
};
|
|
618
|
+
|
|
619
|
+
var PaginationEllipsis = function (_a) {
|
|
620
|
+
var className = _a.className;
|
|
621
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
622
|
+
className: "".concat(styles$i.paginationItem, " ").concat(styles$i.ellipsis),
|
|
623
|
+
"aria-hidden": "true"
|
|
624
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
625
|
+
className: "".concat(styles$i.ellipsisText, " ").concat(className || "")
|
|
626
|
+
}, "..."));
|
|
627
|
+
};
|
|
628
|
+
|
|
629
|
+
/**
|
|
630
|
+
* Generate page numbers to display with ellipsis logic
|
|
631
|
+
*/
|
|
632
|
+
var generatePageNumbers = function (currentPage, totalPages, maxVisiblePages) {
|
|
633
|
+
if (totalPages <= maxVisiblePages) {
|
|
634
|
+
return Array.from({
|
|
635
|
+
length: totalPages
|
|
636
|
+
}, function (_, i) {
|
|
637
|
+
return i + 1;
|
|
638
|
+
});
|
|
639
|
+
}
|
|
640
|
+
var pages = [];
|
|
641
|
+
var halfVisible = Math.floor(maxVisiblePages / 2);
|
|
642
|
+
// Always show first page
|
|
643
|
+
pages.push(1);
|
|
644
|
+
var startPage = Math.max(2, currentPage - halfVisible);
|
|
645
|
+
var endPage = Math.min(totalPages - 1, currentPage + halfVisible);
|
|
646
|
+
// Adjust if we're near the start
|
|
647
|
+
if (currentPage <= halfVisible + 1) {
|
|
648
|
+
endPage = Math.min(maxVisiblePages - 1, totalPages - 1);
|
|
649
|
+
startPage = 2;
|
|
650
|
+
}
|
|
651
|
+
// Adjust if we're near the end
|
|
652
|
+
if (currentPage >= totalPages - halfVisible) {
|
|
653
|
+
startPage = Math.max(2, totalPages - maxVisiblePages + 2);
|
|
654
|
+
endPage = totalPages - 1;
|
|
655
|
+
}
|
|
656
|
+
// Add ellipsis after first page if needed
|
|
657
|
+
if (startPage > 2) {
|
|
658
|
+
pages.push("ellipsis-start");
|
|
659
|
+
}
|
|
660
|
+
// Add middle pages
|
|
661
|
+
for (var i = startPage; i <= endPage; i++) {
|
|
662
|
+
pages.push(i);
|
|
663
|
+
}
|
|
664
|
+
// Add ellipsis before last page if needed
|
|
665
|
+
if (endPage < totalPages - 1) {
|
|
666
|
+
pages.push("ellipsis-end");
|
|
667
|
+
}
|
|
668
|
+
// Always show last page
|
|
669
|
+
if (totalPages > 1) {
|
|
670
|
+
pages.push(totalPages);
|
|
671
|
+
}
|
|
672
|
+
return pages;
|
|
673
|
+
};
|
|
674
|
+
var Pagination = function (_a) {
|
|
675
|
+
var currentPage = _a.currentPage,
|
|
676
|
+
totalPages = _a.totalPages,
|
|
677
|
+
onPageChange = _a.onPageChange,
|
|
678
|
+
_b = _a.maxVisiblePages,
|
|
679
|
+
maxVisiblePages = _b === void 0 ? 10 : _b,
|
|
680
|
+
_c = _a.showPrevious,
|
|
681
|
+
showPrevious = _c === void 0 ? true : _c,
|
|
682
|
+
_d = _a.showNext,
|
|
683
|
+
showNext = _d === void 0 ? true : _d,
|
|
684
|
+
_e = _a.previousLabel,
|
|
685
|
+
previousLabel = _e === void 0 ? "Previous" : _e,
|
|
686
|
+
_f = _a.nextLabel,
|
|
687
|
+
nextLabel = _f === void 0 ? "Next" : _f,
|
|
688
|
+
className = _a.className,
|
|
689
|
+
_g = _a.ariaLabel,
|
|
690
|
+
ariaLabel = _g === void 0 ? "Pagination" : _g;
|
|
691
|
+
var pageNumbers = useMemo(function () {
|
|
692
|
+
return generatePageNumbers(currentPage, totalPages, maxVisiblePages);
|
|
693
|
+
}, [currentPage, totalPages, maxVisiblePages]);
|
|
694
|
+
var handlePageChange = function (page) {
|
|
695
|
+
if (page >= 1 && page <= totalPages && page !== currentPage) {
|
|
696
|
+
onPageChange(page);
|
|
697
|
+
}
|
|
698
|
+
};
|
|
699
|
+
var handlePrevious = function () {
|
|
700
|
+
handlePageChange(currentPage - 1);
|
|
701
|
+
};
|
|
702
|
+
var handleNext = function () {
|
|
703
|
+
handlePageChange(currentPage + 1);
|
|
704
|
+
};
|
|
705
|
+
// Don't render if there's only one page or no pages
|
|
706
|
+
if (totalPages <= 1) {
|
|
707
|
+
return null;
|
|
708
|
+
}
|
|
709
|
+
return /*#__PURE__*/React.createElement("nav", {
|
|
710
|
+
className: "".concat(styles$i.pagination, " ").concat(className || ""),
|
|
711
|
+
"aria-label": ariaLabel,
|
|
712
|
+
role: "navigation"
|
|
713
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
714
|
+
className: styles$i.dividerLine
|
|
715
|
+
}), /*#__PURE__*/React.createElement("ul", {
|
|
716
|
+
className: styles$i.paginationList
|
|
717
|
+
}, showPrevious && /*#__PURE__*/React.createElement(PaginationButton, {
|
|
718
|
+
label: previousLabel,
|
|
719
|
+
disabled: currentPage === 1,
|
|
720
|
+
onClick: handlePrevious,
|
|
721
|
+
direction: "previous",
|
|
722
|
+
ariaLabel: "Go to previous page"
|
|
723
|
+
}), pageNumbers.map(function (page, index) {
|
|
724
|
+
if (page === "ellipsis-start" || page === "ellipsis-end") {
|
|
725
|
+
return /*#__PURE__*/React.createElement(PaginationEllipsis, {
|
|
726
|
+
key: "ellipsis-".concat(index)
|
|
727
|
+
});
|
|
728
|
+
}
|
|
729
|
+
return /*#__PURE__*/React.createElement(PaginationItem, {
|
|
730
|
+
key: page,
|
|
731
|
+
page: page,
|
|
732
|
+
isActive: page === currentPage,
|
|
733
|
+
onClick: handlePageChange
|
|
734
|
+
});
|
|
735
|
+
}), showNext && /*#__PURE__*/React.createElement(PaginationButton, {
|
|
736
|
+
label: nextLabel,
|
|
737
|
+
disabled: currentPage === totalPages,
|
|
738
|
+
onClick: handleNext,
|
|
739
|
+
direction: "next",
|
|
740
|
+
ariaLabel: "Go to next page"
|
|
741
|
+
})));
|
|
742
|
+
};
|
|
743
|
+
|
|
744
|
+
var styles$h = {"productCard":"ProductCardHorizontal-module__productCard___Nl4jK","productWrapper":"ProductCardHorizontal-module__productWrapper___gs8fn","withImage":"ProductCardHorizontal-module__withImage___pPFw2","productTitle":"ProductCardHorizontal-module__productTitle___xBuu7","productPrice":"ProductCardHorizontal-module__productPrice___lf32A","productImage":"ProductCardHorizontal-module__productImage___sQsUO","productId":"ProductCardHorizontal-module__productId___3oOQV","productTitleDescriptionWrapper":"ProductCardHorizontal-module__productTitleDescriptionWrapper___Obv-j","productPriceCtaWrapper":"ProductCardHorizontal-module__productPriceCtaWrapper___Npkfl","productArrowIcon":"ProductCardHorizontal-module__productArrowIcon___1-A76"};
|
|
745
|
+
|
|
746
|
+
var styles$g = {"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"};
|
|
747
|
+
|
|
748
|
+
var Image = function (_a) {
|
|
749
|
+
var src = _a.src,
|
|
750
|
+
alt = _a.alt,
|
|
751
|
+
width = _a.width,
|
|
752
|
+
height = _a.height,
|
|
753
|
+
_b = _a.loading,
|
|
754
|
+
loading = _b === void 0 ? "lazy" : _b,
|
|
755
|
+
_c = _a.decoding,
|
|
756
|
+
decoding = _c === void 0 ? "async" : _c,
|
|
757
|
+
_d = _a.objectFit,
|
|
758
|
+
objectFit = _d === void 0 ? "cover" : _d,
|
|
759
|
+
_e = _a.objectPosition,
|
|
760
|
+
objectPosition = _e === void 0 ? "center" : _e,
|
|
761
|
+
aspectRatio = _a.aspectRatio,
|
|
762
|
+
_f = _a.isDecorative,
|
|
763
|
+
isDecorative = _f === void 0 ? false : _f,
|
|
764
|
+
fallbackSrc = _a.fallbackSrc,
|
|
765
|
+
onLoad = _a.onLoad,
|
|
766
|
+
onError = _a.onError,
|
|
767
|
+
_g = _a.className,
|
|
768
|
+
className = _g === void 0 ? "" : _g,
|
|
769
|
+
srcSet = _a.srcSet,
|
|
770
|
+
sizes = _a.sizes;
|
|
771
|
+
var _h = useState(true),
|
|
772
|
+
isLoading = _h[0],
|
|
773
|
+
setIsLoading = _h[1];
|
|
774
|
+
var _j = useState(false),
|
|
775
|
+
hasError = _j[0],
|
|
776
|
+
setHasError = _j[1];
|
|
777
|
+
var _k = useState(src),
|
|
778
|
+
currentSrc = _k[0],
|
|
779
|
+
setCurrentSrc = _k[1];
|
|
780
|
+
var handleLoad = useCallback(function () {
|
|
781
|
+
setIsLoading(false);
|
|
782
|
+
setHasError(false);
|
|
783
|
+
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
784
|
+
}, [onLoad]);
|
|
785
|
+
var handleError = useCallback(function () {
|
|
786
|
+
setIsLoading(false);
|
|
787
|
+
setHasError(true);
|
|
788
|
+
// Try fallback if available and not already using it
|
|
789
|
+
if (fallbackSrc && currentSrc !== fallbackSrc) {
|
|
790
|
+
setCurrentSrc(fallbackSrc);
|
|
791
|
+
setHasError(false);
|
|
792
|
+
setIsLoading(true);
|
|
793
|
+
} else {
|
|
794
|
+
onError === null || onError === void 0 ? void 0 : onError();
|
|
795
|
+
}
|
|
796
|
+
}, [fallbackSrc, currentSrc, onError]);
|
|
797
|
+
// Accessibility: decorative images should have empty alt and be hidden from screen readers
|
|
798
|
+
var accessibilityProps = isDecorative ? {
|
|
799
|
+
alt: "",
|
|
800
|
+
"aria-hidden": true,
|
|
801
|
+
role: "presentation"
|
|
802
|
+
} : {
|
|
803
|
+
alt: alt
|
|
804
|
+
};
|
|
805
|
+
var containerStyle = __assign(__assign(__assign({}, aspectRatio && {
|
|
806
|
+
aspectRatio: aspectRatio
|
|
807
|
+
}), width && {
|
|
808
|
+
width: typeof width === "number" ? "".concat(width, "px") : width
|
|
809
|
+
}), height && {
|
|
810
|
+
height: typeof height === "number" ? "".concat(height, "px") : height
|
|
811
|
+
});
|
|
812
|
+
var imageStyle = {
|
|
813
|
+
objectFit: objectFit,
|
|
814
|
+
objectPosition: objectPosition
|
|
815
|
+
};
|
|
816
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
817
|
+
className: "".concat(styles$g.imageContainer, " ").concat(className, " ").concat(isLoading ? styles$g.loading : "", " ").concat(hasError ? styles$g.error : ""),
|
|
818
|
+
style: containerStyle
|
|
819
|
+
}, isLoading && /*#__PURE__*/React.createElement("div", {
|
|
820
|
+
className: styles$g.skeleton,
|
|
821
|
+
"aria-hidden": "true"
|
|
822
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
823
|
+
className: styles$g.shimmer
|
|
824
|
+
})), hasError && !fallbackSrc ? /*#__PURE__*/React.createElement("div", {
|
|
825
|
+
className: styles$g.errorState,
|
|
826
|
+
role: "img",
|
|
827
|
+
"aria-label": alt || "Image failed to load"
|
|
828
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
829
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
830
|
+
viewBox: "0 0 24 24",
|
|
831
|
+
fill: "none",
|
|
832
|
+
stroke: "currentColor",
|
|
833
|
+
strokeWidth: "1.5",
|
|
834
|
+
strokeLinecap: "round",
|
|
835
|
+
strokeLinejoin: "round",
|
|
836
|
+
className: styles$g.errorIcon,
|
|
837
|
+
"aria-hidden": "true"
|
|
838
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
839
|
+
x: "3",
|
|
840
|
+
y: "3",
|
|
841
|
+
width: "18",
|
|
842
|
+
height: "18",
|
|
843
|
+
rx: "2",
|
|
844
|
+
ry: "2"
|
|
845
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
846
|
+
cx: "8.5",
|
|
847
|
+
cy: "8.5",
|
|
848
|
+
r: "1.5"
|
|
849
|
+
}), /*#__PURE__*/React.createElement("polyline", {
|
|
850
|
+
points: "21 15 16 10 5 21"
|
|
851
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
852
|
+
className: styles$g.errorText
|
|
853
|
+
}, "Image unavailable")) : /*#__PURE__*/React.createElement("img", _extends({
|
|
854
|
+
src: currentSrc
|
|
855
|
+
}, accessibilityProps, {
|
|
856
|
+
width: width,
|
|
857
|
+
height: height,
|
|
858
|
+
loading: loading,
|
|
859
|
+
decoding: decoding,
|
|
860
|
+
onLoad: handleLoad,
|
|
861
|
+
onError: handleError,
|
|
862
|
+
className: styles$g.image,
|
|
863
|
+
style: imageStyle,
|
|
864
|
+
srcSet: srcSet,
|
|
865
|
+
sizes: sizes
|
|
866
|
+
})));
|
|
867
|
+
};
|
|
868
|
+
|
|
869
|
+
/*!
|
|
870
|
+
* Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
|
|
871
|
+
* License - https://fontawesome.com/license (Commercial License)
|
|
872
|
+
* Copyright 2024 Fonticons, Inc.
|
|
873
|
+
*/
|
|
874
|
+
const faArrowUpRight = {
|
|
875
|
+
prefix: 'far',
|
|
876
|
+
iconName: 'arrow-up-right',
|
|
877
|
+
icon: [384, 512, [], "e09f", "M328 96c13.3 0 24 10.7 24 24l0 240c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-182.1L73 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l231-231L88 144c-13.3 0-24-10.7-24-24s10.7-24 24-24l240 0z"]
|
|
878
|
+
};
|
|
879
|
+
|
|
880
|
+
var ProductCardHorizontal = function (_a) {
|
|
881
|
+
_a.id;
|
|
882
|
+
var imageUrl = _a.imageUrl,
|
|
883
|
+
url = _a.url,
|
|
884
|
+
title = _a.title;
|
|
885
|
+
_a.description;
|
|
886
|
+
var price = _a.price,
|
|
887
|
+
productId = _a.productId,
|
|
888
|
+
button = _a.button,
|
|
889
|
+
_b = _a.className,
|
|
890
|
+
className = _b === void 0 ? "" : _b;
|
|
891
|
+
if (!title) {
|
|
892
|
+
return null;
|
|
893
|
+
}
|
|
894
|
+
return /*#__PURE__*/React.createElement("a", {
|
|
895
|
+
href: url,
|
|
896
|
+
className: "".concat(styles$h.productCard, " ").concat(className),
|
|
897
|
+
"aria-label": "View product: ".concat(title)
|
|
898
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
899
|
+
className: "".concat(styles$h.productWrapper, " ").concat(imageUrl ? styles$h.withImage : "")
|
|
900
|
+
}, imageUrl && /*#__PURE__*/React.createElement("div", {
|
|
901
|
+
className: styles$h.productImage
|
|
902
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
903
|
+
src: imageUrl,
|
|
904
|
+
alt: title
|
|
905
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
906
|
+
className: styles$h.productTitleDescriptionWrapper
|
|
907
|
+
}, /*#__PURE__*/React.createElement("h3", {
|
|
908
|
+
className: styles$h.productTitle
|
|
909
|
+
}, title), productId && /*#__PURE__*/React.createElement("p", {
|
|
910
|
+
className: styles$h.productId
|
|
911
|
+
}, productId)), /*#__PURE__*/React.createElement("div", {
|
|
912
|
+
className: styles$h.productPriceCtaWrapper
|
|
913
|
+
}, /*#__PURE__*/React.createElement("p", {
|
|
914
|
+
className: styles$h.productPrice
|
|
915
|
+
}, price || " "), button ? /*#__PURE__*/React.createElement(Button, {
|
|
916
|
+
className: styles$h.productButton,
|
|
917
|
+
onClick: button.onClick,
|
|
918
|
+
size: "extra-small"
|
|
919
|
+
}, button.label) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
920
|
+
icon: faArrowUpRight,
|
|
921
|
+
className: styles$h.productArrowIcon,
|
|
922
|
+
"aria-hidden": "true"
|
|
923
|
+
}))));
|
|
924
|
+
};
|
|
925
|
+
// Alias for backward compatibility
|
|
926
|
+
var ProductCardHorizontalParts = ProductCardHorizontal;
|
|
927
|
+
|
|
928
|
+
var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l","spareCard":"ProductCardDetails-module__spareCard___vC1Ju"};
|
|
929
|
+
|
|
930
|
+
// Adapter to map design system props to ProductCardHorizontalParts props
|
|
931
|
+
var SpareCardAdapter = function (props) {
|
|
932
|
+
var spare = props.spare,
|
|
933
|
+
rest = __rest(props, ["spare"]);
|
|
934
|
+
return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
|
|
935
|
+
className: styles$f.spareCard,
|
|
936
|
+
url: (spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#",
|
|
937
|
+
title: (spare === null || spare === void 0 ? void 0 : spare.name) || (spare === null || spare === void 0 ? void 0 : spare.title) || "",
|
|
938
|
+
description: (spare === null || spare === void 0 ? void 0 : spare.description) || "",
|
|
939
|
+
price: (spare === null || spare === void 0 ? void 0 : spare.priceValue) || (spare === null || spare === void 0 ? void 0 : spare.price) || "",
|
|
940
|
+
imageUrl: (spare === null || spare === void 0 ? void 0 : spare["img-product"]) || (spare === null || spare === void 0 ? void 0 : spare.image) || "",
|
|
941
|
+
button: {
|
|
942
|
+
label: rest.cta || "View Product",
|
|
943
|
+
onClick: function () {
|
|
944
|
+
return window.open((spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#", "_blank");
|
|
945
|
+
}
|
|
946
|
+
}
|
|
947
|
+
});
|
|
948
|
+
};
|
|
949
|
+
// Re-export the design system component with Leybold styling
|
|
950
|
+
var ProductCardDetails = function (_a) {
|
|
951
|
+
var id = _a.id,
|
|
952
|
+
imageUrl = _a.imageUrl,
|
|
953
|
+
title = _a.title,
|
|
954
|
+
description = _a.description,
|
|
955
|
+
price = _a.price,
|
|
956
|
+
code = _a.code,
|
|
957
|
+
facets = _a.facets,
|
|
958
|
+
hit = _a.hit,
|
|
959
|
+
_b = _a.className,
|
|
960
|
+
className = _b === void 0 ? "" : _b,
|
|
961
|
+
ProductCardComponent = _a.ProductCardComponent,
|
|
962
|
+
hidespares = _a.hidespares;
|
|
963
|
+
// Build the hit object expected by ProductDetailsCard
|
|
964
|
+
var hitData = hit || {
|
|
965
|
+
id: id,
|
|
966
|
+
title: title,
|
|
967
|
+
description: description,
|
|
968
|
+
price: price,
|
|
969
|
+
code: code,
|
|
970
|
+
image: imageUrl
|
|
971
|
+
};
|
|
972
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
973
|
+
className: styles$f.productDetails
|
|
974
|
+
}, /*#__PURE__*/React.createElement(ProductDetailsCard, {
|
|
975
|
+
className: "".concat(className),
|
|
976
|
+
title: title,
|
|
977
|
+
imageUrl: imageUrl,
|
|
978
|
+
imageAlt: title,
|
|
979
|
+
hit: hitData,
|
|
980
|
+
facets: facets,
|
|
981
|
+
usePlainClasses: true,
|
|
982
|
+
ProductCardComponent: ProductCardComponent || SpareCardAdapter,
|
|
983
|
+
hidespares: hidespares
|
|
984
|
+
}));
|
|
985
|
+
};
|
|
986
|
+
|
|
987
|
+
// Adapter component that maps props from AlgoliaDynamicSearchRaw to ProductCardHorizontal
|
|
988
|
+
// AlgoliaDynamicSearchRaw passes: title, cardLink, productPrice, cta, hit (original data)
|
|
989
|
+
var ProductCardAdapter = function (props) {
|
|
990
|
+
var hit = props.hit,
|
|
991
|
+
title = props.title,
|
|
992
|
+
cardLink = props.cardLink,
|
|
993
|
+
productPrice = props.productPrice,
|
|
994
|
+
cta = props.cta,
|
|
995
|
+
showProductPrice = props.showProductPrice,
|
|
996
|
+
className = props.className,
|
|
997
|
+
code = props.code;
|
|
998
|
+
console.log(props);
|
|
999
|
+
// Get values from direct props or fallback to hit object
|
|
1000
|
+
var url = cardLink || (hit === null || hit === void 0 ? void 0 : hit.link) || "#";
|
|
1001
|
+
var imageUrl = "";
|
|
1002
|
+
var price = showProductPrice ? productPrice || (hit === null || hit === void 0 ? void 0 : hit.price) || "" : "";
|
|
1003
|
+
var productTitle = title || (hit === null || hit === void 0 ? void 0 : hit.title) || "";
|
|
1004
|
+
var productCode = code || (hit === null || hit === void 0 ? void 0 : hit.code) || "";
|
|
1005
|
+
var buttonLabel = cta || "View Product";
|
|
1006
|
+
return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
|
|
1007
|
+
imageUrl: imageUrl,
|
|
1008
|
+
url: url,
|
|
1009
|
+
title: productTitle,
|
|
1010
|
+
description: productCode,
|
|
1011
|
+
price: price,
|
|
1012
|
+
button: {
|
|
1013
|
+
label: buttonLabel,
|
|
1014
|
+
onClick: function () {
|
|
1015
|
+
return window.open(url, "_blank");
|
|
1016
|
+
}
|
|
1017
|
+
},
|
|
1018
|
+
className: className
|
|
1019
|
+
});
|
|
1020
|
+
};
|
|
1021
|
+
var ProductCardDetailsAdapter = function (props) {
|
|
1022
|
+
var hit = props.hit,
|
|
1023
|
+
title = props.title;
|
|
1024
|
+
props.cardLink;
|
|
1025
|
+
var productPrice = props.productPrice;
|
|
1026
|
+
props.cta;
|
|
1027
|
+
props.showProductPrice;
|
|
1028
|
+
var className = props.className,
|
|
1029
|
+
code = props.code,
|
|
1030
|
+
facets = props.facets,
|
|
1031
|
+
related_products = props.related_products,
|
|
1032
|
+
hidespares = props.hidespares;
|
|
1033
|
+
if (!title) {
|
|
1034
|
+
return null;
|
|
1035
|
+
}
|
|
1036
|
+
return /*#__PURE__*/React.createElement(ProductCardDetails, {
|
|
1037
|
+
imageUrl: (hit === null || hit === void 0 ? void 0 : hit.image) || "",
|
|
1038
|
+
title: title,
|
|
1039
|
+
description: (hit === null || hit === void 0 ? void 0 : hit.description) || "",
|
|
1040
|
+
price: (hit === null || hit === void 0 ? void 0 : hit.price) || "" || productPrice,
|
|
1041
|
+
code: (hit === null || hit === void 0 ? void 0 : hit.code) || "" || code,
|
|
1042
|
+
hit: hit,
|
|
1043
|
+
className: className,
|
|
1044
|
+
facets: facets,
|
|
1045
|
+
relatedProducts: (hit === null || hit === void 0 ? void 0 : hit.related_products) || related_products,
|
|
1046
|
+
hidespares: hidespares
|
|
1047
|
+
});
|
|
1048
|
+
};
|
|
1049
|
+
var AlgoliaDynamicSearchLeybold = function (props) {
|
|
1050
|
+
var innerComponents = {
|
|
1051
|
+
ProductCard: ProductCardAdapter,
|
|
1052
|
+
ProductDetailsCard: ProductCardDetailsAdapter
|
|
1053
|
+
};
|
|
1054
|
+
return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
|
|
1055
|
+
innerComponents: innerComponents
|
|
1056
|
+
}));
|
|
1057
|
+
};
|
|
1058
|
+
|
|
1059
|
+
var QrFormButtonAdapter = function (_a) {
|
|
1060
|
+
var label = _a.label,
|
|
1061
|
+
onClick = _a.onClick,
|
|
1062
|
+
_b = _a.buttonStyle,
|
|
1063
|
+
buttonStyle = _b === void 0 ? "primary" : _b,
|
|
1064
|
+
href = _a.href,
|
|
1065
|
+
target = _a.target,
|
|
1066
|
+
_c = _a.type,
|
|
1067
|
+
type = _c === void 0 ? "button" : _c,
|
|
1068
|
+
element = _a.element,
|
|
1069
|
+
pageTarget = _a["data-page_target"],
|
|
1070
|
+
className = _a.className;
|
|
1071
|
+
// Map buttonStyle to our variant
|
|
1072
|
+
var variant = buttonStyle === "secondary" ? "secondary" : "primary";
|
|
1073
|
+
// If it's an anchor element (has href or element='a'), render as link
|
|
1074
|
+
if (element === "a" || href) {
|
|
1075
|
+
return /*#__PURE__*/React.createElement("a", {
|
|
1076
|
+
href: href,
|
|
1077
|
+
target: target,
|
|
1078
|
+
className: className,
|
|
1079
|
+
"data-page_target": pageTarget,
|
|
1080
|
+
onClick: onClick,
|
|
1081
|
+
style: {
|
|
1082
|
+
display: "inline-block",
|
|
1083
|
+
textDecoration: "none"
|
|
1084
|
+
}
|
|
1085
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1086
|
+
variant: variant,
|
|
1087
|
+
type: type,
|
|
1088
|
+
size: "small"
|
|
1089
|
+
}, label));
|
|
1090
|
+
}
|
|
1091
|
+
// Otherwise render as button
|
|
1092
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
1093
|
+
variant: variant,
|
|
1094
|
+
type: type,
|
|
1095
|
+
onClick: onClick ? function (e) {
|
|
1096
|
+
return onClick(e);
|
|
1097
|
+
} : undefined,
|
|
1098
|
+
className: className,
|
|
1099
|
+
"data-page_target": pageTarget,
|
|
1100
|
+
size: "small"
|
|
1101
|
+
}, label);
|
|
1102
|
+
};
|
|
1103
|
+
var QrFormLeybold = function (props) {
|
|
1104
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1105
|
+
className: "qr-journey-form-wrapper"
|
|
1106
|
+
}, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
|
|
1107
|
+
ButtonComponent: QrFormButtonAdapter
|
|
1108
|
+
})));
|
|
1109
|
+
};
|
|
1110
|
+
|
|
1111
|
+
var styles$e = {"overlay":"SearchModal-module__overlay___Vbvg9","modal":"SearchModal-module__modal___1k5gO","closeButton":"SearchModal-module__closeButton___AN0zt","closeButton__icon":"SearchModal-module__closeButton__icon___vISSw","closeButton__text":"SearchModal-module__closeButton__text___-4EH1","closeButtonDesktop":"SearchModal-module__closeButtonDesktop___Lxxb0","closeButtonMobile":"SearchModal-module__closeButtonMobile___WIIMS","stickyHeader":"SearchModal-module__stickyHeader___wp-gA","scrollableContent":"SearchModal-module__scrollableContent___lrZP3"};
|
|
1112
|
+
|
|
1113
|
+
var ModalCloseButton = function (_a) {
|
|
1114
|
+
var onClick = _a.onClick,
|
|
1115
|
+
_b = _a.ariaLabel,
|
|
1116
|
+
ariaLabel = _b === void 0 ? 'Close search' : _b,
|
|
1117
|
+
_c = _a.className,
|
|
1118
|
+
className = _c === void 0 ? '' : _c;
|
|
1119
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
1120
|
+
type: "button",
|
|
1121
|
+
onClick: onClick,
|
|
1122
|
+
"aria-label": ariaLabel,
|
|
1123
|
+
className: "".concat(styles$e.closeButton, " ").concat(className)
|
|
1124
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1125
|
+
className: styles$e.closeButton__icon
|
|
1126
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
1127
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1128
|
+
viewBox: "0 0 24 24",
|
|
1129
|
+
fill: "none",
|
|
1130
|
+
stroke: "currentColor",
|
|
1131
|
+
strokeWidth: "2",
|
|
1132
|
+
strokeLinecap: "round",
|
|
1133
|
+
strokeLinejoin: "round",
|
|
1134
|
+
"aria-hidden": "true"
|
|
1135
|
+
}, /*#__PURE__*/React.createElement("line", {
|
|
1136
|
+
x1: "18",
|
|
1137
|
+
y1: "6",
|
|
1138
|
+
x2: "6",
|
|
1139
|
+
y2: "18"
|
|
1140
|
+
}), /*#__PURE__*/React.createElement("line", {
|
|
1141
|
+
x1: "6",
|
|
1142
|
+
y1: "6",
|
|
1143
|
+
x2: "18",
|
|
1144
|
+
y2: "18"
|
|
1145
|
+
}))), /*#__PURE__*/React.createElement("span", {
|
|
1146
|
+
className: styles$e.closeButton__text
|
|
1147
|
+
}, "CLOSE X"));
|
|
1148
|
+
};
|
|
1149
|
+
|
|
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
|
+
stickyHeaderContent = _a.stickyHeaderContent;
|
|
1159
|
+
var modalRef = useRef(null);
|
|
1160
|
+
var previouslyFocusedElement = useRef(null);
|
|
1161
|
+
useEffect(function () {
|
|
1162
|
+
if (isOpen) {
|
|
1163
|
+
// Store the previously focused element
|
|
1164
|
+
previouslyFocusedElement.current = document.activeElement;
|
|
1165
|
+
// Focus the modal
|
|
1166
|
+
if (modalRef.current) {
|
|
1167
|
+
modalRef.current.focus();
|
|
1168
|
+
}
|
|
1169
|
+
// Prevent body scroll
|
|
1170
|
+
document.body.style.overflow = 'hidden';
|
|
1171
|
+
} else {
|
|
1172
|
+
// Restore body scroll
|
|
1173
|
+
document.body.style.overflow = '';
|
|
1174
|
+
// Return focus to previously focused element
|
|
1175
|
+
if (previouslyFocusedElement.current) {
|
|
1176
|
+
previouslyFocusedElement.current.focus();
|
|
1177
|
+
}
|
|
1178
|
+
}
|
|
1179
|
+
return function () {
|
|
1180
|
+
document.body.style.overflow = '';
|
|
1181
|
+
};
|
|
1182
|
+
}, [isOpen]);
|
|
1183
|
+
useEffect(function () {
|
|
1184
|
+
var handleEscape = function (event) {
|
|
1185
|
+
if (event.key === 'Escape' && isOpen) {
|
|
1186
|
+
onClose();
|
|
1187
|
+
}
|
|
1188
|
+
};
|
|
1189
|
+
document.addEventListener('keydown', handleEscape);
|
|
1190
|
+
return function () {
|
|
1191
|
+
return document.removeEventListener('keydown', handleEscape);
|
|
1192
|
+
};
|
|
1193
|
+
}, [isOpen, onClose]);
|
|
1194
|
+
// Focus trap implementation
|
|
1195
|
+
useEffect(function () {
|
|
1196
|
+
if (!isOpen || !modalRef.current) return;
|
|
1197
|
+
var modal = modalRef.current;
|
|
1198
|
+
var focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
1199
|
+
var firstElement = focusableElements[0];
|
|
1200
|
+
var lastElement = focusableElements[focusableElements.length - 1];
|
|
1201
|
+
var handleTab = function (event) {
|
|
1202
|
+
if (event.key !== 'Tab') return;
|
|
1203
|
+
if (event.shiftKey) {
|
|
1204
|
+
// Shift + Tab
|
|
1205
|
+
if (document.activeElement === firstElement) {
|
|
1206
|
+
event.preventDefault();
|
|
1207
|
+
lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
|
|
1208
|
+
}
|
|
1209
|
+
} else {
|
|
1210
|
+
// Tab
|
|
1211
|
+
if (document.activeElement === lastElement) {
|
|
1212
|
+
event.preventDefault();
|
|
1213
|
+
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
};
|
|
1217
|
+
modal.addEventListener('keydown', handleTab);
|
|
1218
|
+
return function () {
|
|
1219
|
+
return modal.removeEventListener('keydown', handleTab);
|
|
1220
|
+
};
|
|
1221
|
+
}, [isOpen]);
|
|
1222
|
+
if (!isOpen) return null;
|
|
1223
|
+
var handleOverlayClick = function (event) {
|
|
1224
|
+
if (event.target === event.currentTarget) {
|
|
1225
|
+
onClose();
|
|
1226
|
+
}
|
|
1227
|
+
};
|
|
1228
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1229
|
+
className: styles$e.overlay,
|
|
1230
|
+
onClick: handleOverlayClick,
|
|
1231
|
+
"aria-hidden": "true"
|
|
1232
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1233
|
+
ref: modalRef,
|
|
1234
|
+
role: "dialog",
|
|
1235
|
+
"aria-modal": "true",
|
|
1236
|
+
"aria-label": title,
|
|
1237
|
+
tabIndex: -1,
|
|
1238
|
+
className: "".concat(styles$e.modal, " ").concat(className)
|
|
1239
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1240
|
+
className: styles$e.stickyHeader
|
|
1241
|
+
}, /*#__PURE__*/React.createElement(ModalCloseButton, {
|
|
1242
|
+
onClick: onClose,
|
|
1243
|
+
className: styles$e.closeButtonMobile
|
|
1244
|
+
}), stickyHeaderContent), /*#__PURE__*/React.createElement("div", {
|
|
1245
|
+
className: styles$e.scrollableContent
|
|
1246
|
+
}, /*#__PURE__*/React.createElement(ModalCloseButton, {
|
|
1247
|
+
onClick: onClose,
|
|
1248
|
+
className: styles$e.closeButtonDesktop
|
|
1249
|
+
}), children)));
|
|
1250
|
+
};
|
|
1251
|
+
|
|
1252
|
+
var styles$d = {"searchBar":"SearchBar-module__searchBar___5ak1g","inputWrapper":"SearchBar-module__inputWrapper___-4wrM","searchIcon":"SearchBar-module__searchIcon___VAuDz","searchInput":"SearchBar-module__searchInput___1K4GN","clearButton":"SearchBar-module__clearButton___JQYg-","submitButton":"SearchBar-module__submitButton___DZWsQ","submitButton__text":"SearchBar-module__submitButton__text___WkUsL","submitButton__icon":"SearchBar-module__submitButton__icon___s-ltv"};
|
|
1253
|
+
|
|
1254
|
+
var SearchIcon = function (_a) {
|
|
1255
|
+
var _b = _a.className,
|
|
1256
|
+
className = _b === void 0 ? '' : _b;
|
|
1257
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
1258
|
+
className: "".concat(styles$d.searchIcon, " ").concat(className),
|
|
1259
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1260
|
+
viewBox: "0 0 24 24",
|
|
1261
|
+
fill: "none",
|
|
1262
|
+
stroke: "currentColor",
|
|
1263
|
+
strokeWidth: "2",
|
|
1264
|
+
strokeLinecap: "round",
|
|
1265
|
+
strokeLinejoin: "round",
|
|
1266
|
+
"aria-hidden": "true"
|
|
1267
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
1268
|
+
cx: "11",
|
|
1269
|
+
cy: "11",
|
|
1270
|
+
r: "8"
|
|
1271
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
1272
|
+
d: "m21 21-4.35-4.35"
|
|
1273
|
+
}));
|
|
1274
|
+
};
|
|
1275
|
+
|
|
1276
|
+
var SearchInput = function (_a) {
|
|
1277
|
+
var value = _a.value,
|
|
1278
|
+
onChange = _a.onChange,
|
|
1279
|
+
onKeyDown = _a.onKeyDown,
|
|
1280
|
+
_b = _a.placeholder,
|
|
1281
|
+
placeholder = _b === void 0 ? 'Discover products, innovations, and resources...' : _b,
|
|
1282
|
+
_c = _a.autoFocus,
|
|
1283
|
+
autoFocus = _c === void 0 ? false : _c,
|
|
1284
|
+
_d = _a.className,
|
|
1285
|
+
className = _d === void 0 ? '' : _d;
|
|
1286
|
+
var handleChange = function (event) {
|
|
1287
|
+
onChange(event.target.value);
|
|
1288
|
+
};
|
|
1289
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
1290
|
+
type: "text",
|
|
1291
|
+
value: value,
|
|
1292
|
+
onChange: handleChange,
|
|
1293
|
+
onKeyDown: onKeyDown,
|
|
1294
|
+
placeholder: placeholder,
|
|
1295
|
+
autoFocus: autoFocus,
|
|
1296
|
+
"aria-label": "Search",
|
|
1297
|
+
className: "".concat(styles$d.searchInput, " ").concat(className)
|
|
1298
|
+
});
|
|
1299
|
+
};
|
|
1300
|
+
|
|
1301
|
+
var SearchSubmitButton = function (_a) {
|
|
1302
|
+
var onClick = _a.onClick,
|
|
1303
|
+
_b = _a.disabled,
|
|
1304
|
+
disabled = _b === void 0 ? false : _b,
|
|
1305
|
+
_c = _a.ariaLabel,
|
|
1306
|
+
ariaLabel = _c === void 0 ? 'Search' : _c,
|
|
1307
|
+
_d = _a.label,
|
|
1308
|
+
label = _d === void 0 ? 'Search' : _d;
|
|
1309
|
+
_a.variant;
|
|
1310
|
+
var _f = _a.className,
|
|
1311
|
+
className = _f === void 0 ? '' : _f;
|
|
1312
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
1313
|
+
type: "submit",
|
|
1314
|
+
onClick: onClick,
|
|
1315
|
+
disabled: disabled,
|
|
1316
|
+
"aria-label": ariaLabel,
|
|
1317
|
+
className: "".concat(styles$d.submitButton, " ").concat(className)
|
|
1318
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1319
|
+
className: styles$d.submitButton__text
|
|
1320
|
+
}, label), /*#__PURE__*/React.createElement("span", {
|
|
1321
|
+
className: styles$d.submitButton__icon
|
|
1322
|
+
}, /*#__PURE__*/React.createElement(SearchIcon, null)));
|
|
1323
|
+
};
|
|
1324
|
+
|
|
1325
|
+
var SearchBar = function (_a) {
|
|
1326
|
+
var value = _a.value,
|
|
1327
|
+
onChange = _a.onChange,
|
|
1328
|
+
onSubmit = _a.onSubmit,
|
|
1329
|
+
placeholder = _a.placeholder,
|
|
1330
|
+
_b = _a.autoFocus,
|
|
1331
|
+
autoFocus = _b === void 0 ? false : _b,
|
|
1332
|
+
_c = _a.className,
|
|
1333
|
+
className = _c === void 0 ? '' : _c,
|
|
1334
|
+
_d = _a.variant,
|
|
1335
|
+
variant = _d === void 0 ? 'instant' : _d;
|
|
1336
|
+
var handleSubmit = function (event) {
|
|
1337
|
+
event.preventDefault();
|
|
1338
|
+
onSubmit();
|
|
1339
|
+
};
|
|
1340
|
+
var handleKeyDown = function (event) {
|
|
1341
|
+
if (event.key === 'Enter') {
|
|
1342
|
+
event.preventDefault();
|
|
1343
|
+
onSubmit();
|
|
1344
|
+
}
|
|
1345
|
+
};
|
|
1346
|
+
var handleClear = function () {
|
|
1347
|
+
onChange('');
|
|
1348
|
+
};
|
|
1349
|
+
var showClearButton = value.length > 0;
|
|
1350
|
+
return /*#__PURE__*/React.createElement("form", {
|
|
1351
|
+
onSubmit: handleSubmit,
|
|
1352
|
+
className: "".concat(styles$d.searchBar, " ").concat(className)
|
|
1353
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1354
|
+
className: styles$d.inputWrapper
|
|
1355
|
+
}, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement(SearchInput, {
|
|
1356
|
+
value: value,
|
|
1357
|
+
onChange: onChange,
|
|
1358
|
+
onKeyDown: handleKeyDown,
|
|
1359
|
+
placeholder: placeholder,
|
|
1360
|
+
autoFocus: autoFocus
|
|
1361
|
+
}), showClearButton && /*#__PURE__*/React.createElement("button", {
|
|
1362
|
+
type: "button",
|
|
1363
|
+
onClick: handleClear,
|
|
1364
|
+
className: styles$d.clearButton,
|
|
1365
|
+
"aria-label": "Clear search"
|
|
1366
|
+
}, "CLEAR X")), /*#__PURE__*/React.createElement(SearchSubmitButton, {
|
|
1367
|
+
onClick: onSubmit,
|
|
1368
|
+
label: "SEE ALL RESULTS",
|
|
1369
|
+
variant: variant
|
|
1370
|
+
}));
|
|
1371
|
+
};
|
|
1372
|
+
|
|
1373
|
+
var styles$c = {"contentCard":"ContentCardHorizontal-module__contentCard___l-Kim","contentCard--instant-view":"ContentCardHorizontal-module__contentCard--instant-view___4wK9-","contentExcerpt":"ContentCardHorizontal-module__contentExcerpt___tqg1v","contentCard--results-view":"ContentCardHorizontal-module__contentCard--results-view___oBP2u","contentMeta":"ContentCardHorizontal-module__contentMeta___rEW-X","contentCategory":"ContentCardHorizontal-module__contentCategory___NssVD","contentMetaText":"ContentCardHorizontal-module__contentMetaText___muYBN","contentTitle":"ContentCardHorizontal-module__contentTitle___54gEo"};
|
|
1374
|
+
|
|
1375
|
+
var ContentCardHorizontal = function (_a) {
|
|
1376
|
+
_a.id;
|
|
1377
|
+
var title = _a.title,
|
|
1378
|
+
url = _a.url,
|
|
1379
|
+
category = _a.category,
|
|
1380
|
+
meta = _a.meta,
|
|
1381
|
+
excerpt = _a.excerpt,
|
|
1382
|
+
_b = _a.className,
|
|
1383
|
+
className = _b === void 0 ? "" : _b,
|
|
1384
|
+
_c = _a.variant,
|
|
1385
|
+
variant = _c === void 0 ? "instant-view" : _c;
|
|
1386
|
+
var cardClasses = classNames(styles$c.contentCard, styles$c["contentCard--".concat(variant)], className);
|
|
1387
|
+
return /*#__PURE__*/React.createElement("a", {
|
|
1388
|
+
href: url,
|
|
1389
|
+
className: cardClasses,
|
|
1390
|
+
"aria-label": "View content: ".concat(title)
|
|
1391
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1392
|
+
className: styles$c.contentMeta
|
|
1393
|
+
}, category && /*#__PURE__*/React.createElement("span", {
|
|
1394
|
+
className: styles$c.contentCategory
|
|
1395
|
+
}, category), meta && /*#__PURE__*/React.createElement("span", {
|
|
1396
|
+
className: styles$c.contentMetaText
|
|
1397
|
+
}, meta)), /*#__PURE__*/React.createElement("h3", {
|
|
1398
|
+
className: styles$c.contentTitle
|
|
1399
|
+
}, title), excerpt && /*#__PURE__*/React.createElement("p", {
|
|
1400
|
+
className: styles$c.contentExcerpt
|
|
1401
|
+
}, excerpt));
|
|
1402
|
+
};
|
|
1403
|
+
|
|
1404
|
+
var styles$b = {"instantResultsLayout":"InstantResults-module__instantResultsLayout___oy-o4","columnsGrid":"InstantResults-module__columnsGrid___bHRUM","resultsColumn":"InstantResults-module__resultsColumn___ZBSlT","columnHeader":"InstantResults-module__columnHeader___VYYhi","showingText":"InstantResults-module__showingText___lECiA","seeAllButton":"InstantResults-module__seeAllButton___xEDAX","chevronIcon":"InstantResults-module__chevronIcon___bjb3q","resultsList":"InstantResults-module__resultsList___7s3PT","divider":"InstantResults-module__divider___Ky6zK","loadingState":"InstantResults-module__loadingState___l0fMq","errorState":"InstantResults-module__errorState___hTBbE","spinner":"InstantResults-module__spinner___85jF-"};
|
|
1405
|
+
|
|
1406
|
+
var FederatedInstantResultsLayout = function (_a) {
|
|
1407
|
+
_a.query;
|
|
1408
|
+
var products = _a.products,
|
|
1409
|
+
contents = _a.contents,
|
|
1410
|
+
isLoadingProducts = _a.isLoadingProducts,
|
|
1411
|
+
isLoadingContents = _a.isLoadingContents,
|
|
1412
|
+
productsError = _a.productsError,
|
|
1413
|
+
contentsError = _a.contentsError,
|
|
1414
|
+
onSeeAllProducts = _a.onSeeAllProducts,
|
|
1415
|
+
onSeeAllContents = _a.onSeeAllContents;
|
|
1416
|
+
_a.onSeeAllCombined;
|
|
1417
|
+
products.length + contents.length;
|
|
1418
|
+
// Show first 3 results from each category
|
|
1419
|
+
var displayProducts = products.slice(0, 3);
|
|
1420
|
+
var displayContents = contents.slice(0, 3);
|
|
1421
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1422
|
+
className: styles$b.instantResultsLayout
|
|
1423
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1424
|
+
className: styles$b.columnsGrid
|
|
1425
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1426
|
+
className: styles$b.resultsColumn
|
|
1427
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1428
|
+
className: styles$b.columnHeader
|
|
1429
|
+
}, /*#__PURE__*/React.createElement("p", {
|
|
1430
|
+
className: styles$b.showingText
|
|
1431
|
+
}, "SHOWING ", displayProducts.length, " OF ", products.length, " RESULTS"), /*#__PURE__*/React.createElement("button", {
|
|
1432
|
+
type: "button",
|
|
1433
|
+
className: styles$b.seeAllButton,
|
|
1434
|
+
onClick: onSeeAllProducts
|
|
1435
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
1436
|
+
className: styles$b.chevronIcon,
|
|
1437
|
+
width: "12",
|
|
1438
|
+
height: "6",
|
|
1439
|
+
viewBox: "0 0 12 6",
|
|
1440
|
+
fill: "none",
|
|
1441
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1442
|
+
"aria-hidden": "true"
|
|
1443
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
1444
|
+
d: "M1 1L6 5L11 1",
|
|
1445
|
+
stroke: "currentColor",
|
|
1446
|
+
strokeWidth: "2",
|
|
1447
|
+
strokeLinecap: "round",
|
|
1448
|
+
strokeLinejoin: "round"
|
|
1449
|
+
})), /*#__PURE__*/React.createElement("span", null, "See all products"))), isLoadingProducts ? /*#__PURE__*/React.createElement("div", {
|
|
1450
|
+
className: styles$b.loadingState
|
|
1451
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1452
|
+
className: styles$b.spinner,
|
|
1453
|
+
"aria-label": "Loading..."
|
|
1454
|
+
}), /*#__PURE__*/React.createElement("p", null, "Loading products...")) : productsError ? /*#__PURE__*/React.createElement("div", {
|
|
1455
|
+
className: styles$b.errorState
|
|
1456
|
+
}, /*#__PURE__*/React.createElement("p", null, productsError)) : displayProducts.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
1457
|
+
className: styles$b.resultsList
|
|
1458
|
+
}, displayProducts.map(function (product, index) {
|
|
1459
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
1460
|
+
key: product.id
|
|
1461
|
+
}, /*#__PURE__*/React.createElement(ProductCardHorizontal, product), index < displayProducts.length - 1 && /*#__PURE__*/React.createElement("hr", {
|
|
1462
|
+
className: styles$b.divider
|
|
1463
|
+
}));
|
|
1464
|
+
})) : null), /*#__PURE__*/React.createElement("div", {
|
|
1465
|
+
className: styles$b.resultsColumn
|
|
1466
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1467
|
+
className: styles$b.columnHeader
|
|
1468
|
+
}, /*#__PURE__*/React.createElement("p", {
|
|
1469
|
+
className: styles$b.showingText
|
|
1470
|
+
}, "SHOWING ", displayContents.length, " OF ", contents.length, " RESULTS"), /*#__PURE__*/React.createElement("button", {
|
|
1471
|
+
type: "button",
|
|
1472
|
+
className: styles$b.seeAllButton,
|
|
1473
|
+
onClick: onSeeAllContents
|
|
1474
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
1475
|
+
className: styles$b.chevronIcon,
|
|
1476
|
+
width: "12",
|
|
1477
|
+
height: "6",
|
|
1478
|
+
viewBox: "0 0 12 6",
|
|
1479
|
+
fill: "none",
|
|
1480
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1481
|
+
"aria-hidden": "true"
|
|
1482
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
1483
|
+
d: "M1 1L6 5L11 1",
|
|
1484
|
+
stroke: "currentColor",
|
|
1485
|
+
strokeWidth: "2",
|
|
1486
|
+
strokeLinecap: "round",
|
|
1487
|
+
strokeLinejoin: "round"
|
|
1488
|
+
})), /*#__PURE__*/React.createElement("span", null, "See all"))), isLoadingContents ? /*#__PURE__*/React.createElement("div", {
|
|
1489
|
+
className: styles$b.loadingState
|
|
1490
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1491
|
+
className: styles$b.spinner,
|
|
1492
|
+
"aria-label": "Loading..."
|
|
1493
|
+
}), /*#__PURE__*/React.createElement("p", null, "Loading content...")) : contentsError ? /*#__PURE__*/React.createElement("div", {
|
|
1494
|
+
className: styles$b.errorState
|
|
1495
|
+
}, /*#__PURE__*/React.createElement("p", null, contentsError)) : displayContents.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
1496
|
+
className: styles$b.resultsList
|
|
1497
|
+
}, displayContents.map(function (content, index) {
|
|
1498
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
1499
|
+
key: content.id
|
|
1500
|
+
}, /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
|
|
1501
|
+
variant: "instant-view"
|
|
1502
|
+
})), index < displayContents.length - 1 && /*#__PURE__*/React.createElement("hr", {
|
|
1503
|
+
className: styles$b.divider
|
|
1504
|
+
}));
|
|
1505
|
+
})) : null)));
|
|
1506
|
+
};
|
|
1507
|
+
|
|
1508
|
+
var styles$a = {"resultsCount":"ResultsCount-module__resultsCount___cNM6f"};
|
|
1509
|
+
|
|
1510
|
+
var ResultsCount = function (_a) {
|
|
1511
|
+
var count = _a.count,
|
|
1512
|
+
type = _a.type,
|
|
1513
|
+
_b = _a.className,
|
|
1514
|
+
className = _b === void 0 ? '' : _b;
|
|
1515
|
+
var label = count === 1 ? type.slice(0, -1) : type;
|
|
1516
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
1517
|
+
className: "".concat(styles$a.resultsCount, " ").concat(className)
|
|
1518
|
+
}, count, " ", label);
|
|
1519
|
+
};
|
|
1520
|
+
|
|
1521
|
+
var styles$9 = {"seeAllButton":"SeeAllLinkButton-module__seeAllButton___eAQqJ"};
|
|
1522
|
+
|
|
1523
|
+
var SeeAllLinkButton = function (_a) {
|
|
1524
|
+
var onClick = _a.onClick,
|
|
1525
|
+
_b = _a.label,
|
|
1526
|
+
label = _b === void 0 ? 'See all results' : _b,
|
|
1527
|
+
_c = _a.className,
|
|
1528
|
+
className = _c === void 0 ? '' : _c;
|
|
1529
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
1530
|
+
type: "button",
|
|
1531
|
+
onClick: onClick,
|
|
1532
|
+
className: "".concat(styles$9.seeAllButton, " ").concat(className)
|
|
1533
|
+
}, label, /*#__PURE__*/React.createElement("svg", {
|
|
1534
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1535
|
+
viewBox: "0 0 24 24",
|
|
1536
|
+
fill: "none",
|
|
1537
|
+
stroke: "currentColor",
|
|
1538
|
+
strokeWidth: "2",
|
|
1539
|
+
strokeLinecap: "round",
|
|
1540
|
+
strokeLinejoin: "round",
|
|
1541
|
+
"aria-hidden": "true"
|
|
1542
|
+
}, /*#__PURE__*/React.createElement("polyline", {
|
|
1543
|
+
points: "9 18 15 12 9 6"
|
|
1544
|
+
})));
|
|
1545
|
+
};
|
|
1546
|
+
|
|
1547
|
+
var styles$8 = {"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"};
|
|
1548
|
+
|
|
1549
|
+
var ResultsColumn = function (_a) {
|
|
1550
|
+
var title = _a.title,
|
|
1551
|
+
count = _a.count,
|
|
1552
|
+
isLoading = _a.isLoading,
|
|
1553
|
+
error = _a.error,
|
|
1554
|
+
onSeeAll = _a.onSeeAll,
|
|
1555
|
+
children = _a.children,
|
|
1556
|
+
_b = _a.className,
|
|
1557
|
+
className = _b === void 0 ? '' : _b;
|
|
1558
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1559
|
+
className: "".concat(styles$8.resultsColumn, " ").concat(className)
|
|
1560
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1561
|
+
className: styles$8.columnHeader
|
|
1562
|
+
}, /*#__PURE__*/React.createElement("h3", {
|
|
1563
|
+
className: styles$8.columnTitle
|
|
1564
|
+
}, title), !isLoading && !error && count > 0 && /*#__PURE__*/React.createElement(ResultsCount, {
|
|
1565
|
+
count: count,
|
|
1566
|
+
type: title.toLowerCase().includes('product') ? 'products' : 'content'
|
|
1567
|
+
})), isLoading && /*#__PURE__*/React.createElement("div", {
|
|
1568
|
+
className: styles$8.loadingState
|
|
1569
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1570
|
+
className: styles$8.spinner,
|
|
1571
|
+
"aria-label": "Loading..."
|
|
1572
|
+
}), /*#__PURE__*/React.createElement("p", null, "Loading ", title.toLowerCase(), "...")), error && /*#__PURE__*/React.createElement("div", {
|
|
1573
|
+
className: styles$8.errorState
|
|
1574
|
+
}, /*#__PURE__*/React.createElement("p", null, error)), !isLoading && !error && count === 0 && /*#__PURE__*/React.createElement("div", {
|
|
1575
|
+
className: styles$8.emptyState
|
|
1576
|
+
}, /*#__PURE__*/React.createElement("p", null, "No ", title.toLowerCase(), " found")), !isLoading && !error && count > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1577
|
+
className: styles$8.resultsList
|
|
1578
|
+
}, children), /*#__PURE__*/React.createElement("div", {
|
|
1579
|
+
className: styles$8.columnFooter
|
|
1580
|
+
}, /*#__PURE__*/React.createElement(SeeAllLinkButton, {
|
|
1581
|
+
onClick: onSeeAll,
|
|
1582
|
+
label: "See all ".concat(title.toLowerCase())
|
|
1583
|
+
}))));
|
|
1584
|
+
};
|
|
1585
|
+
|
|
1586
|
+
var styles$7 = {"filtersPanel":"Filters-module__filtersPanel___T3SlK","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","filterCheckboxInput":"Filters-module__filterCheckboxInput___NAcGz","filterCheckbox":"Filters-module__filterCheckbox___9In3q","filterLabel":"Filters-module__filterLabel___w-M8J","filterCount":"Filters-module__filterCount___XMsmy","filterItemMobile":"Filters-module__filterItemMobile___bqRMi","filterItemMobileRefined":"Filters-module__filterItemMobileRefined___VnLfK","filterItemDesktopNoCheckbox":"Filters-module__filterItemDesktopNoCheckbox___rX7Vy","filterItemDesktopRefined":"Filters-module__filterItemDesktopRefined___XaVGp","noResults":"Filters-module__noResults___ZdZ4V","loadingState":"Filters-module__loadingState___k6olr","spinner":"Filters-module__spinner___hvTaP","appliedFilters":"Filters-module__appliedFilters___hP4x-","appliedFiltersTitle":"Filters-module__appliedFiltersTitle___k6VbJ","appliedFiltersList":"Filters-module__appliedFiltersList___-fx9D","appliedFilterTag":"Filters-module__appliedFilterTag___hd5yc","tagLabel":"Filters-module__tagLabel___0ImQk","tagRemoveButton":"Filters-module__tagRemoveButton___JaA8M"};
|
|
1587
|
+
|
|
1588
|
+
/*!
|
|
1589
|
+
* Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
|
|
1590
|
+
* License - https://fontawesome.com/license (Commercial License)
|
|
1591
|
+
* Copyright 2024 Fonticons, Inc.
|
|
1592
|
+
*/
|
|
1593
|
+
const faMagnifyingGlass = {
|
|
1594
|
+
prefix: 'fal',
|
|
1595
|
+
iconName: 'magnifying-glass',
|
|
1596
|
+
icon: [512, 512, [128269, "search"], "f002", "M384 208A176 176 0 1 0 32 208a176 176 0 1 0 352 0zM343.3 366C307 397.2 259.7 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 51.7-18.8 99-50 135.3L507.3 484.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L343.3 366z"]
|
|
1597
|
+
};
|
|
1598
|
+
const faXmark = {
|
|
1599
|
+
prefix: 'fal',
|
|
1600
|
+
iconName: 'xmark',
|
|
1601
|
+
icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"]
|
|
1602
|
+
};
|
|
1603
|
+
|
|
1604
|
+
/**
|
|
1605
|
+
* FilterSearch - Search input for filtering facet values
|
|
1606
|
+
*/
|
|
1607
|
+
var FilterSearch = function (_a) {
|
|
1608
|
+
var value = _a.value,
|
|
1609
|
+
onChange = _a.onChange,
|
|
1610
|
+
_b = _a.placeholder,
|
|
1611
|
+
placeholder = _b === void 0 ? "Search" : _b,
|
|
1612
|
+
className = _a.className;
|
|
1613
|
+
var handleChange = function (e) {
|
|
1614
|
+
onChange(e.target.value);
|
|
1615
|
+
};
|
|
1616
|
+
var handleClear = function () {
|
|
1617
|
+
onChange("");
|
|
1618
|
+
};
|
|
1619
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1620
|
+
className: "".concat(styles$7.filterSearch, " ").concat(className || "")
|
|
1621
|
+
}, !value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
1622
|
+
icon: faMagnifyingGlass,
|
|
1623
|
+
className: styles$7.searchIcon,
|
|
1624
|
+
"aria-hidden": "true"
|
|
1625
|
+
}), /*#__PURE__*/React.createElement("input", {
|
|
1626
|
+
type: "text",
|
|
1627
|
+
value: value,
|
|
1628
|
+
onChange: handleChange,
|
|
1629
|
+
placeholder: placeholder,
|
|
1630
|
+
className: styles$7.searchInput,
|
|
1631
|
+
"aria-label": placeholder
|
|
1632
|
+
}), value && /*#__PURE__*/React.createElement("button", {
|
|
1633
|
+
type: "button",
|
|
1634
|
+
onClick: handleClear,
|
|
1635
|
+
className: styles$7.clearButton,
|
|
1636
|
+
"aria-label": "Clear search"
|
|
1637
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
1638
|
+
icon: faXmark$1
|
|
1639
|
+
})));
|
|
1640
|
+
};
|
|
1641
|
+
|
|
1642
|
+
var CheckIcon = function () {
|
|
1643
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
1644
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1645
|
+
width: "9",
|
|
1646
|
+
height: "7",
|
|
1647
|
+
viewBox: "0 0 9 7",
|
|
1648
|
+
fill: "none"
|
|
1649
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
1650
|
+
d: "M8.73456 0.104504C9.02185 0.279451 9.08614 0.615889 8.8772 0.856441L3.7342 6.77774C3.62371 6.90558 3.45294 6.98465 3.2641 6.99811C3.07525 7.01156 2.89244 6.95269 2.75984 6.84166L0.188342 4.68846C-0.0627808 4.47819 -0.0627808 4.13671 0.188342 3.92643C0.439465 3.71616 0.847289 3.71616 1.09841 3.92643L3.13753 5.63385L7.83856 0.222257C8.04749 -0.0182957 8.44929 -0.0721258 8.73658 0.102822L8.73456 0.104504Z",
|
|
1651
|
+
fill: "#E2001A"
|
|
1652
|
+
}));
|
|
1653
|
+
};
|
|
1654
|
+
/**
|
|
1655
|
+
* FilterItem - Individual facet item with checkbox and count
|
|
1656
|
+
*/
|
|
1657
|
+
var FilterItem = function (_a) {
|
|
1658
|
+
var value = _a.value,
|
|
1659
|
+
onToggle = _a.onToggle,
|
|
1660
|
+
className = _a.className,
|
|
1661
|
+
_b = _a.variant,
|
|
1662
|
+
variant = _b === void 0 ? 'desktop' : _b,
|
|
1663
|
+
_c = _a.showCheckbox,
|
|
1664
|
+
showCheckbox = _c === void 0 ? true : _c;
|
|
1665
|
+
var handleChange = function () {
|
|
1666
|
+
onToggle(value.value);
|
|
1667
|
+
};
|
|
1668
|
+
var handleKeyDown = function (e) {
|
|
1669
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
1670
|
+
e.preventDefault();
|
|
1671
|
+
onToggle(value.value);
|
|
1672
|
+
}
|
|
1673
|
+
};
|
|
1674
|
+
// Mobile variant: Plain button (no checkbox)
|
|
1675
|
+
if (variant === 'mobile') {
|
|
1676
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
1677
|
+
type: "button",
|
|
1678
|
+
className: "".concat(styles$7.filterItemMobile, " ").concat(value.isRefined ? styles$7.filterItemMobileRefined : '', " ").concat(className || ""),
|
|
1679
|
+
onClick: handleChange,
|
|
1680
|
+
onKeyDown: handleKeyDown,
|
|
1681
|
+
"aria-pressed": value.isRefined
|
|
1682
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1683
|
+
className: styles$7.filterLabel
|
|
1684
|
+
}, value.value), value.count > 0 && /*#__PURE__*/React.createElement("span", {
|
|
1685
|
+
className: styles$7.filterCount
|
|
1686
|
+
}, "(", value.count, ")"));
|
|
1687
|
+
}
|
|
1688
|
+
// Desktop without checkbox (Content tab): Plain button with red text when selected
|
|
1689
|
+
if (!showCheckbox) {
|
|
1690
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
1691
|
+
type: "button",
|
|
1692
|
+
className: "".concat(styles$7.filterItemDesktopNoCheckbox, " ").concat(value.isRefined ? styles$7.filterItemDesktopRefined : '', " ").concat(className || ""),
|
|
1693
|
+
onClick: handleChange,
|
|
1694
|
+
onKeyDown: handleKeyDown,
|
|
1695
|
+
"aria-pressed": value.isRefined
|
|
1696
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1697
|
+
className: styles$7.filterLabel
|
|
1698
|
+
}, value.value), value.count > 0 && /*#__PURE__*/React.createElement("span", {
|
|
1699
|
+
className: styles$7.filterCount
|
|
1700
|
+
}, "(", value.count, ")"));
|
|
1701
|
+
}
|
|
1702
|
+
// Desktop with checkbox (Products tab): Multi-select checkboxes
|
|
1703
|
+
return /*#__PURE__*/React.createElement("label", {
|
|
1704
|
+
className: "".concat(styles$7.filterItem, " ").concat(className || ""),
|
|
1705
|
+
onKeyDown: handleKeyDown
|
|
1706
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
1707
|
+
type: "checkbox",
|
|
1708
|
+
checked: value.isRefined,
|
|
1709
|
+
onChange: handleChange,
|
|
1710
|
+
className: styles$7.filterCheckboxInput,
|
|
1711
|
+
"aria-label": "".concat(value.value, " (").concat(value.count, " results)")
|
|
1712
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
1713
|
+
className: styles$7.filterCheckbox
|
|
1714
|
+
}, value.isRefined && /*#__PURE__*/React.createElement(CheckIcon, null)), /*#__PURE__*/React.createElement("span", {
|
|
1715
|
+
className: styles$7.filterLabel
|
|
1716
|
+
}, value.value), /*#__PURE__*/React.createElement("span", {
|
|
1717
|
+
className: styles$7.filterCount
|
|
1718
|
+
}, "(", value.count, ")"));
|
|
1719
|
+
};
|
|
1720
|
+
|
|
1721
|
+
/**
|
|
1722
|
+
* FilterAccordion - Collapsible facet section with optional search
|
|
1723
|
+
*/
|
|
1724
|
+
var FilterAccordion = function (_a) {
|
|
1725
|
+
var facet = _a.facet,
|
|
1726
|
+
isExpanded = _a.isExpanded,
|
|
1727
|
+
onToggle = _a.onToggle,
|
|
1728
|
+
onValueToggle = _a.onValueToggle,
|
|
1729
|
+
className = _a.className,
|
|
1730
|
+
_b = _a.variant,
|
|
1731
|
+
variant = _b === void 0 ? 'desktop' : _b,
|
|
1732
|
+
_c = _a.showCheckbox,
|
|
1733
|
+
showCheckbox = _c === void 0 ? true : _c;
|
|
1734
|
+
var _d = useState(""),
|
|
1735
|
+
searchQuery = _d[0],
|
|
1736
|
+
setSearchQuery = _d[1];
|
|
1737
|
+
// Filter facet values based on search query
|
|
1738
|
+
var filteredValues = useMemo(function () {
|
|
1739
|
+
if (!searchQuery.trim()) {
|
|
1740
|
+
return facet.values;
|
|
1741
|
+
}
|
|
1742
|
+
var query = searchQuery.toLowerCase();
|
|
1743
|
+
return facet.values.filter(function (value) {
|
|
1744
|
+
return value.value.toLowerCase().includes(query);
|
|
1745
|
+
});
|
|
1746
|
+
}, [facet.values, searchQuery]);
|
|
1747
|
+
var handleToggle = function () {
|
|
1748
|
+
onToggle();
|
|
1749
|
+
// Clear search when collapsing
|
|
1750
|
+
if (isExpanded) {
|
|
1751
|
+
setSearchQuery("");
|
|
1752
|
+
}
|
|
1753
|
+
};
|
|
1754
|
+
var handleKeyDown = function (e) {
|
|
1755
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
1756
|
+
e.preventDefault();
|
|
1757
|
+
handleToggle();
|
|
1758
|
+
}
|
|
1759
|
+
};
|
|
1760
|
+
var handleValueToggle = function (value) {
|
|
1761
|
+
onValueToggle(facet.attribute, value);
|
|
1762
|
+
};
|
|
1763
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1764
|
+
className: "".concat(styles$7.filterAccordion, " ").concat(className || "")
|
|
1765
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
1766
|
+
type: "button",
|
|
1767
|
+
className: "".concat(styles$7.accordionHeader, " ").concat(isExpanded ? styles$7.accordionHeaderExpanded : ""),
|
|
1768
|
+
onClick: handleToggle,
|
|
1769
|
+
onKeyDown: handleKeyDown,
|
|
1770
|
+
"aria-expanded": isExpanded,
|
|
1771
|
+
"aria-controls": "accordion-".concat(facet.id)
|
|
1772
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1773
|
+
className: styles$7.accordionTitle
|
|
1774
|
+
}, facet.label), /*#__PURE__*/React.createElement("svg", {
|
|
1775
|
+
className: "".concat(styles$7.accordionIcon, " ").concat(isExpanded ? styles$7.accordionIconExpanded : ""),
|
|
1776
|
+
width: "16",
|
|
1777
|
+
height: "16",
|
|
1778
|
+
viewBox: "0 0 16 16",
|
|
1779
|
+
fill: "none",
|
|
1780
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1781
|
+
"aria-hidden": "true"
|
|
1782
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
1783
|
+
d: "M4 6L8 10L12 6",
|
|
1784
|
+
stroke: "currentColor",
|
|
1785
|
+
strokeWidth: "2",
|
|
1786
|
+
strokeLinecap: "round",
|
|
1787
|
+
strokeLinejoin: "round"
|
|
1788
|
+
}))), isExpanded && /*#__PURE__*/React.createElement("div", {
|
|
1789
|
+
id: "accordion-".concat(facet.id),
|
|
1790
|
+
className: styles$7.accordionContent
|
|
1791
|
+
}, variant === 'desktop' && facet.searchable && facet.values.length > 5 && /*#__PURE__*/React.createElement("div", {
|
|
1792
|
+
className: styles$7.accordionSearch
|
|
1793
|
+
}, /*#__PURE__*/React.createElement(FilterSearch, {
|
|
1794
|
+
value: searchQuery,
|
|
1795
|
+
onChange: setSearchQuery,
|
|
1796
|
+
placeholder: "Search"
|
|
1797
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
1798
|
+
className: styles$7.filterList
|
|
1799
|
+
}, filteredValues.length > 0 ? filteredValues.map(function (value) {
|
|
1800
|
+
return /*#__PURE__*/React.createElement(FilterItem, {
|
|
1801
|
+
key: value.value,
|
|
1802
|
+
value: value,
|
|
1803
|
+
onToggle: handleValueToggle,
|
|
1804
|
+
variant: variant,
|
|
1805
|
+
showCheckbox: showCheckbox
|
|
1806
|
+
});
|
|
1807
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
1808
|
+
className: styles$7.noResults
|
|
1809
|
+
}, "No results found"))));
|
|
1810
|
+
};
|
|
1811
|
+
|
|
1812
|
+
/**
|
|
1813
|
+
* AppliedFilterTag - Individual removable filter tag/chip
|
|
1814
|
+
*/
|
|
1815
|
+
var AppliedFilterTag = function (_a) {
|
|
1816
|
+
var attribute = _a.attribute,
|
|
1817
|
+
value = _a.value,
|
|
1818
|
+
label = _a.label,
|
|
1819
|
+
onRemove = _a.onRemove,
|
|
1820
|
+
className = _a.className;
|
|
1821
|
+
var handleRemove = function () {
|
|
1822
|
+
onRemove(attribute, value);
|
|
1823
|
+
};
|
|
1824
|
+
var handleKeyDown = function (e) {
|
|
1825
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
1826
|
+
e.preventDefault();
|
|
1827
|
+
handleRemove();
|
|
1828
|
+
}
|
|
1829
|
+
};
|
|
1830
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1831
|
+
className: "".concat(styles$7.appliedFilterTag, " ").concat(className || "")
|
|
1832
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1833
|
+
className: styles$7.tagLabel
|
|
1834
|
+
}, label || value), /*#__PURE__*/React.createElement("button", {
|
|
1835
|
+
type: "button",
|
|
1836
|
+
onClick: handleRemove,
|
|
1837
|
+
onKeyDown: handleKeyDown,
|
|
1838
|
+
className: styles$7.tagRemoveButton,
|
|
1839
|
+
"aria-label": "Remove ".concat(label || value, " filter")
|
|
1840
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
1841
|
+
width: "10",
|
|
1842
|
+
height: "10",
|
|
1843
|
+
viewBox: "0 0 10 10",
|
|
1844
|
+
fill: "none",
|
|
1845
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1846
|
+
"aria-hidden": "true"
|
|
1847
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
1848
|
+
d: "M8 2L2 8M2 2L8 8",
|
|
1849
|
+
stroke: "currentColor",
|
|
1850
|
+
strokeWidth: "1.5",
|
|
1851
|
+
strokeLinecap: "round",
|
|
1852
|
+
strokeLinejoin: "round"
|
|
1853
|
+
}))));
|
|
1854
|
+
};
|
|
1855
|
+
|
|
1856
|
+
/**
|
|
1857
|
+
* AppliedFilters - Shows all active filters as removable tags
|
|
1858
|
+
*/
|
|
1859
|
+
var AppliedFilters = function (_a) {
|
|
1860
|
+
var facets = _a.facets,
|
|
1861
|
+
onRemove = _a.onRemove;
|
|
1862
|
+
_a.onClearAll;
|
|
1863
|
+
var className = _a.className;
|
|
1864
|
+
// Extract all refined (selected) filters
|
|
1865
|
+
var appliedFilters = useMemo(function () {
|
|
1866
|
+
var filters = [];
|
|
1867
|
+
facets.forEach(function (facet) {
|
|
1868
|
+
facet.values.forEach(function (value) {
|
|
1869
|
+
if (value.isRefined) {
|
|
1870
|
+
filters.push({
|
|
1871
|
+
attribute: facet.attribute,
|
|
1872
|
+
value: value.value,
|
|
1873
|
+
label: value.value,
|
|
1874
|
+
facetLabel: facet.label
|
|
1875
|
+
});
|
|
1876
|
+
}
|
|
1877
|
+
});
|
|
1878
|
+
});
|
|
1879
|
+
return filters;
|
|
1880
|
+
}, [facets]);
|
|
1881
|
+
// Don't render if no filters are applied
|
|
1882
|
+
if (appliedFilters.length === 0) {
|
|
1883
|
+
return null;
|
|
1884
|
+
}
|
|
1885
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1886
|
+
className: "".concat(styles$7.appliedFilters, " ").concat(className || "")
|
|
1887
|
+
}, /*#__PURE__*/React.createElement("h4", {
|
|
1888
|
+
className: styles$7.appliedFiltersTitle
|
|
1889
|
+
}, "Applied filters"), /*#__PURE__*/React.createElement("div", {
|
|
1890
|
+
className: styles$7.appliedFiltersList
|
|
1891
|
+
}, appliedFilters.map(function (filter) {
|
|
1892
|
+
return /*#__PURE__*/React.createElement(AppliedFilterTag, {
|
|
1893
|
+
key: "".concat(filter.attribute, "-").concat(filter.value),
|
|
1894
|
+
attribute: filter.attribute,
|
|
1895
|
+
value: filter.value,
|
|
1896
|
+
label: filter.label,
|
|
1897
|
+
onRemove: onRemove
|
|
1898
|
+
});
|
|
1899
|
+
})));
|
|
1900
|
+
};
|
|
1901
|
+
|
|
1902
|
+
/**
|
|
1903
|
+
* FiltersPanel - Main container for all filters
|
|
1904
|
+
*
|
|
1905
|
+
* Fully controlled component - renders based on facets prop.
|
|
1906
|
+
* When facets change (e.g., after API refetch), component re-renders with new data.
|
|
1907
|
+
* Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
|
|
1908
|
+
*/
|
|
1909
|
+
var FiltersPanel = function (_a) {
|
|
1910
|
+
var facets = _a.facets,
|
|
1911
|
+
onFacetToggle = _a.onFacetToggle,
|
|
1912
|
+
_b = _a.isLoading,
|
|
1913
|
+
isLoading = _b === void 0 ? false : _b,
|
|
1914
|
+
className = _a.className,
|
|
1915
|
+
_c = _a.variant,
|
|
1916
|
+
variant = _c === void 0 ? 'desktop' : _c,
|
|
1917
|
+
_d = _a.showCheckbox,
|
|
1918
|
+
showCheckbox = _d === void 0 ? true : _d;
|
|
1919
|
+
// Track which accordions are expanded (transient UI state)
|
|
1920
|
+
var _e = useState(function () {
|
|
1921
|
+
// Initialize with default expanded facets
|
|
1922
|
+
var expanded = new Set();
|
|
1923
|
+
facets.forEach(function (facet) {
|
|
1924
|
+
if (facet.defaultExpanded) {
|
|
1925
|
+
expanded.add(facet.id);
|
|
1926
|
+
}
|
|
1927
|
+
});
|
|
1928
|
+
return expanded;
|
|
1929
|
+
}),
|
|
1930
|
+
expandedAccordions = _e[0],
|
|
1931
|
+
setExpandedAccordions = _e[1];
|
|
1932
|
+
// Sync expansion state when facets change (e.g., new facets appear after refetch)
|
|
1933
|
+
useEffect(function () {
|
|
1934
|
+
setExpandedAccordions(function (prev) {
|
|
1935
|
+
var next = new Set(prev);
|
|
1936
|
+
// Add new facets with defaultExpanded
|
|
1937
|
+
facets.forEach(function (facet) {
|
|
1938
|
+
if (facet.defaultExpanded && !next.has(facet.id)) {
|
|
1939
|
+
next.add(facet.id);
|
|
1940
|
+
}
|
|
1941
|
+
});
|
|
1942
|
+
// Remove facets that no longer exist
|
|
1943
|
+
var currentFacetIds = new Set(facets.map(function (f) {
|
|
1944
|
+
return f.id;
|
|
1945
|
+
}));
|
|
1946
|
+
next.forEach(function (id) {
|
|
1947
|
+
if (!currentFacetIds.has(id)) {
|
|
1948
|
+
next.delete(id);
|
|
1949
|
+
}
|
|
1950
|
+
});
|
|
1951
|
+
return next;
|
|
1952
|
+
});
|
|
1953
|
+
}, [facets]);
|
|
1954
|
+
var handleAccordionToggle = useCallback(function (facetId) {
|
|
1955
|
+
setExpandedAccordions(function (prev) {
|
|
1956
|
+
var next = new Set(prev);
|
|
1957
|
+
if (next.has(facetId)) {
|
|
1958
|
+
next.delete(facetId);
|
|
1959
|
+
} else {
|
|
1960
|
+
next.add(facetId);
|
|
1961
|
+
}
|
|
1962
|
+
return next;
|
|
1963
|
+
});
|
|
1964
|
+
}, []);
|
|
1965
|
+
var handleValueToggle = useCallback(function (attribute, value) {
|
|
1966
|
+
onFacetToggle(attribute, value);
|
|
1967
|
+
}, [onFacetToggle]);
|
|
1968
|
+
var handleRemoveFilter = useCallback(function (attribute, value) {
|
|
1969
|
+
onFacetToggle(attribute, value);
|
|
1970
|
+
}, [onFacetToggle]);
|
|
1971
|
+
var handleClearAll = useCallback(function () {
|
|
1972
|
+
// Remove all refined facets
|
|
1973
|
+
facets.forEach(function (facet) {
|
|
1974
|
+
facet.values.forEach(function (value) {
|
|
1975
|
+
if (value.isRefined) {
|
|
1976
|
+
onFacetToggle(facet.attribute, value.value);
|
|
1977
|
+
}
|
|
1978
|
+
});
|
|
1979
|
+
});
|
|
1980
|
+
}, [facets, onFacetToggle]);
|
|
1981
|
+
if (isLoading) {
|
|
1982
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1983
|
+
className: "".concat(styles$7.filtersPanel, " ").concat(className || "")
|
|
1984
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1985
|
+
className: styles$7.loadingState
|
|
1986
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1987
|
+
className: styles$7.spinner
|
|
1988
|
+
}), /*#__PURE__*/React.createElement("p", null, "Loading filters...")));
|
|
1989
|
+
}
|
|
1990
|
+
if (!facets || facets.length === 0) {
|
|
1991
|
+
return null;
|
|
1992
|
+
}
|
|
1993
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1994
|
+
className: "".concat(styles$7.filtersPanel, " ").concat(className || "")
|
|
1995
|
+
}, showCheckbox && /*#__PURE__*/React.createElement(AppliedFilters, {
|
|
1996
|
+
facets: facets,
|
|
1997
|
+
onRemove: handleRemoveFilter,
|
|
1998
|
+
onClearAll: handleClearAll
|
|
1999
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
2000
|
+
className: styles$7.filtersList
|
|
2001
|
+
}, facets.map(function (facet) {
|
|
2002
|
+
return /*#__PURE__*/React.createElement(FilterAccordion, {
|
|
2003
|
+
key: facet.id,
|
|
2004
|
+
facet: facet,
|
|
2005
|
+
isExpanded: expandedAccordions.has(facet.id),
|
|
2006
|
+
onToggle: function () {
|
|
2007
|
+
return handleAccordionToggle(facet.id);
|
|
2008
|
+
},
|
|
2009
|
+
onValueToggle: handleValueToggle,
|
|
2010
|
+
variant: variant,
|
|
2011
|
+
showCheckbox: showCheckbox
|
|
2012
|
+
});
|
|
2013
|
+
})));
|
|
2014
|
+
};
|
|
2015
|
+
|
|
2016
|
+
var styles$6 = {"productCardVertical":"ProductCardVertical-module__productCardVertical___kXgmt","productCardVertical--hover":"ProductCardVertical-module__productCardVertical--hover___8Nsyp","productCardVertical__button":"ProductCardVertical-module__productCardVertical__button___oQPJG","productCardVertical--focus":"ProductCardVertical-module__productCardVertical--focus___8U57I","productCardVertical__imageWrapper":"ProductCardVertical-module__productCardVertical__imageWrapper___SgKoZ","productCardVertical__image":"ProductCardVertical-module__productCardVertical__image___kg-QU","productCardVertical__content":"ProductCardVertical-module__productCardVertical__content___sZdOs","productCardVertical__title":"ProductCardVertical-module__productCardVertical__title___PPKWb","productCardVertical__description":"ProductCardVertical-module__productCardVertical__description___Ai90p","productCardVertical__footer":"ProductCardVertical-module__productCardVertical__footer___rv6BH"};
|
|
2017
|
+
|
|
2018
|
+
/**
|
|
2019
|
+
* ProductCardVertical - Vertical product card for grid layouts
|
|
2020
|
+
*
|
|
2021
|
+
* Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
|
|
2022
|
+
* Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
|
|
2023
|
+
*
|
|
2024
|
+
* @example
|
|
2025
|
+
* ```tsx
|
|
2026
|
+
* <ProductCardVertical
|
|
2027
|
+
* title="TURBOVAC i - High vacuum turbopump"
|
|
2028
|
+
* url="/products/turbovac-i"
|
|
2029
|
+
* imageUrl="/assets/search-product.png"
|
|
2030
|
+
* productId="21312VISH"
|
|
2031
|
+
* description="Premium high-performance turbomolecular pump"
|
|
2032
|
+
* buttonLabel="BUY ONLINE"
|
|
2033
|
+
* />
|
|
2034
|
+
* ```
|
|
2035
|
+
*/
|
|
2036
|
+
var ProductCardVertical = function (_a) {
|
|
2037
|
+
var _b;
|
|
2038
|
+
var id = _a.id,
|
|
2039
|
+
title = _a.title,
|
|
2040
|
+
url = _a.url,
|
|
2041
|
+
imageUrl = _a.imageUrl;
|
|
2042
|
+
_a.productId;
|
|
2043
|
+
var description = _a.description,
|
|
2044
|
+
_c = _a.buttonLabel,
|
|
2045
|
+
buttonLabel = _c === void 0 ? 'BUY ONLINE' : _c,
|
|
2046
|
+
onButtonClick = _a.onButtonClick,
|
|
2047
|
+
className = _a.className,
|
|
2048
|
+
_d = _a.variant,
|
|
2049
|
+
variant = _d === void 0 ? 'desktop' : _d,
|
|
2050
|
+
forceState = _a["data-force-state"];
|
|
2051
|
+
var handleButtonClick = function (e) {
|
|
2052
|
+
e.preventDefault(); // Prevent card link navigation
|
|
2053
|
+
e.stopPropagation(); // Stop event bubbling
|
|
2054
|
+
onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick();
|
|
2055
|
+
};
|
|
2056
|
+
var cardClasses = classNames(styles$6.productCardVertical, styles$6["productCardVertical--".concat(variant)], (_b = {}, _b[styles$6['productCardVertical--hover']] = forceState === 'hover', _b[styles$6['productCardVertical--focus']] = forceState === 'focus', _b), className);
|
|
2057
|
+
return /*#__PURE__*/React.createElement("a", {
|
|
2058
|
+
href: url,
|
|
2059
|
+
className: cardClasses,
|
|
2060
|
+
"aria-label": "View product: ".concat(title),
|
|
2061
|
+
"data-product-id": id
|
|
2062
|
+
}, imageUrl && /*#__PURE__*/React.createElement("div", {
|
|
2063
|
+
className: styles$6.productCardVertical__imageWrapper
|
|
2064
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
2065
|
+
src: imageUrl,
|
|
2066
|
+
alt: title,
|
|
2067
|
+
className: styles$6.productCardVertical__image,
|
|
2068
|
+
objectFit: "contain",
|
|
2069
|
+
objectPosition: "center",
|
|
2070
|
+
loading: "lazy"
|
|
2071
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
2072
|
+
className: styles$6.productCardVertical__content
|
|
2073
|
+
}, /*#__PURE__*/React.createElement("h3", {
|
|
2074
|
+
className: styles$6.productCardVertical__title
|
|
2075
|
+
}, title), description && /*#__PURE__*/React.createElement("p", {
|
|
2076
|
+
className: styles$6.productCardVertical__description
|
|
2077
|
+
}, description)), /*#__PURE__*/React.createElement("button", {
|
|
2078
|
+
type: "button",
|
|
2079
|
+
onClick: handleButtonClick,
|
|
2080
|
+
className: styles$6.productCardVertical__button,
|
|
2081
|
+
"aria-label": "".concat(buttonLabel, " - ").concat(title),
|
|
2082
|
+
tabIndex: -1
|
|
2083
|
+
}, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
2084
|
+
icon: faArrowUpRightFromSquare$1,
|
|
2085
|
+
"aria-hidden": "true"
|
|
2086
|
+
})));
|
|
2087
|
+
};
|
|
2088
|
+
|
|
2089
|
+
var styles$5 = {"resultsView":"ResultsView-module__resultsView___S4Wh2","searchBarWrapper":"ResultsView-module__searchBarWrapper___XNtwR","tabsContainer":"ResultsView-module__tabsContainer___mB-Q2","tabs":"ResultsView-module__tabs___rOexd","tabSeparator":"ResultsView-module__tabSeparator___MSq9p","mobileFilterButton":"ResultsView-module__mobileFilterButton___ZrMQY","resultsContainer":"ResultsView-module__resultsContainer___J4URa","sidebar":"ResultsView-module__sidebar___nQq5J","assistanceBanner":"ResultsView-module__assistanceBanner___1r72a","mainContent":"ResultsView-module__mainContent___S9eIG","productsGrid":"ResultsView-module__productsGrid___gnAQ-","contentsList":"ResultsView-module__contentsList___tcfNG","contentDivider":"ResultsView-module__contentDivider___5n6sl","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","searchBarDesktopOnly":"ResultsView-module__searchBarDesktopOnly___dZHUw","tabsContainerDesktopOnly":"ResultsView-module__tabsContainerDesktopOnly___-MQpa"};
|
|
2090
|
+
|
|
2091
|
+
var ResultsList = function (_a) {
|
|
2092
|
+
var type = _a.type,
|
|
2093
|
+
_b = _a.products,
|
|
2094
|
+
products = _b === void 0 ? [] : _b,
|
|
2095
|
+
_c = _a.contents,
|
|
2096
|
+
contents = _c === void 0 ? [] : _c,
|
|
2097
|
+
isLoading = _a.isLoading,
|
|
2098
|
+
error = _a.error,
|
|
2099
|
+
_d = _a.className,
|
|
2100
|
+
className = _d === void 0 ? '' : _d;
|
|
2101
|
+
if (isLoading) {
|
|
2102
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2103
|
+
className: "".concat(styles$5.loadingState, " ").concat(className)
|
|
2104
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2105
|
+
className: styles$5.spinner,
|
|
2106
|
+
"aria-label": "Loading..."
|
|
2107
|
+
}), /*#__PURE__*/React.createElement("p", null, "Loading results..."));
|
|
2108
|
+
}
|
|
2109
|
+
if (error) {
|
|
2110
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2111
|
+
className: "".concat(styles$5.errorState, " ").concat(className)
|
|
2112
|
+
}, /*#__PURE__*/React.createElement("p", null, error));
|
|
2113
|
+
}
|
|
2114
|
+
var hasProducts = products.length > 0;
|
|
2115
|
+
var hasContents = contents.length > 0;
|
|
2116
|
+
var hasResults = hasProducts || hasContents;
|
|
2117
|
+
if (!hasResults) {
|
|
2118
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2119
|
+
className: "".concat(styles$5.emptyState, " ").concat(className)
|
|
2120
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
2121
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2122
|
+
viewBox: "0 0 24 24",
|
|
2123
|
+
fill: "none",
|
|
2124
|
+
stroke: "currentColor",
|
|
2125
|
+
strokeWidth: "2",
|
|
2126
|
+
strokeLinecap: "round",
|
|
2127
|
+
strokeLinejoin: "round",
|
|
2128
|
+
className: styles$5.emptyIcon
|
|
2129
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
2130
|
+
cx: "11",
|
|
2131
|
+
cy: "11",
|
|
2132
|
+
r: "8"
|
|
2133
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2134
|
+
d: "m21 21-4.35-4.35"
|
|
2135
|
+
})), /*#__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."));
|
|
2136
|
+
}
|
|
2137
|
+
// Render based on type
|
|
2138
|
+
if (type === 'products') {
|
|
2139
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2140
|
+
className: "".concat(styles$5.productsGrid, " ").concat(className)
|
|
2141
|
+
}, products.map(function (product) {
|
|
2142
|
+
return /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
|
|
2143
|
+
key: product.id
|
|
2144
|
+
}, product, {
|
|
2145
|
+
buttonLabel: "BUY ONLINE"
|
|
2146
|
+
}));
|
|
2147
|
+
}));
|
|
2148
|
+
}
|
|
2149
|
+
if (type === 'content') {
|
|
2150
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2151
|
+
className: "".concat(styles$5.contentsList, " ").concat(className)
|
|
2152
|
+
}, contents.map(function (content, index) {
|
|
2153
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
2154
|
+
key: content.id
|
|
2155
|
+
}, index > 0 && /*#__PURE__*/React.createElement("hr", {
|
|
2156
|
+
className: styles$5.contentDivider
|
|
2157
|
+
}), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
|
|
2158
|
+
variant: "results-view"
|
|
2159
|
+
})));
|
|
2160
|
+
}));
|
|
2161
|
+
}
|
|
2162
|
+
// type === 'all' - Show mixed results (not in current Figma design, but keep for compatibility)
|
|
2163
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2164
|
+
className: "".concat(styles$5.resultsList, " ").concat(className)
|
|
2165
|
+
}, hasProducts && /*#__PURE__*/React.createElement("div", {
|
|
2166
|
+
className: styles$5.resultsSection
|
|
2167
|
+
}, /*#__PURE__*/React.createElement("h3", {
|
|
2168
|
+
className: styles$5.sectionTitle
|
|
2169
|
+
}, "Products (", products.length, ")"), /*#__PURE__*/React.createElement("div", {
|
|
2170
|
+
className: styles$5.productsGrid
|
|
2171
|
+
}, products.map(function (product) {
|
|
2172
|
+
return /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
|
|
2173
|
+
key: product.id
|
|
2174
|
+
}, product, {
|
|
2175
|
+
buttonLabel: "BUY ONLINE"
|
|
2176
|
+
}));
|
|
2177
|
+
}))), hasContents && /*#__PURE__*/React.createElement("div", {
|
|
2178
|
+
className: styles$5.resultsSection
|
|
2179
|
+
}, /*#__PURE__*/React.createElement("h3", {
|
|
2180
|
+
className: styles$5.sectionTitle
|
|
2181
|
+
}, "Content (", contents.length, ")"), /*#__PURE__*/React.createElement("div", {
|
|
2182
|
+
className: styles$5.contentsList
|
|
2183
|
+
}, contents.map(function (content, index) {
|
|
2184
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
2185
|
+
key: content.id
|
|
2186
|
+
}, index > 0 && /*#__PURE__*/React.createElement("hr", {
|
|
2187
|
+
className: styles$5.contentDivider
|
|
2188
|
+
}), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
|
|
2189
|
+
variant: "results-view"
|
|
2190
|
+
})));
|
|
2191
|
+
}))));
|
|
2192
|
+
};
|
|
2193
|
+
|
|
2194
|
+
var styles$4 = {"tabButton":"TabButton-module__tabButton___cMU45","tabButton__count":"TabButton-module__tabButton__count___nlS1p","tabButton__label":"TabButton-module__tabButton__label___YGpiC","tabButton__results":"TabButton-module__tabButton__results___Nr6gr","tabButton--desktop":"TabButton-module__tabButton--desktop___fbAaC","tabButton--active":"TabButton-module__tabButton--active___gj6Jp","tabButton--mobile":"TabButton-module__tabButton--mobile___AnLwy"};
|
|
2195
|
+
|
|
2196
|
+
/**
|
|
2197
|
+
* TabButton - Tab navigation component with result counts
|
|
2198
|
+
*
|
|
2199
|
+
* Supports two layout variants:
|
|
2200
|
+
* - Desktop: Background colours, top red underline when active, rounded corners
|
|
2201
|
+
* - Mobile: Text-only with bottom border underline when active
|
|
2202
|
+
*
|
|
2203
|
+
* @example
|
|
2204
|
+
* ```tsx
|
|
2205
|
+
* // Desktop variant
|
|
2206
|
+
* <TabButton
|
|
2207
|
+
* label="WEB SHOP RESULTS"
|
|
2208
|
+
* count={542}
|
|
2209
|
+
* isActive={true}
|
|
2210
|
+
* onClick={() => setActiveTab('products')}
|
|
2211
|
+
* variant="desktop"
|
|
2212
|
+
* />
|
|
2213
|
+
*
|
|
2214
|
+
* // Mobile variant
|
|
2215
|
+
* <TabButton
|
|
2216
|
+
* label="WEB SHOP"
|
|
2217
|
+
* isActive={false}
|
|
2218
|
+
* onClick={() => setActiveTab('content')}
|
|
2219
|
+
* variant="mobile"
|
|
2220
|
+
* />
|
|
2221
|
+
* ```
|
|
2222
|
+
*/
|
|
2223
|
+
var TabButton = function (_a) {
|
|
2224
|
+
var _b;
|
|
2225
|
+
var label = _a.label,
|
|
2226
|
+
count = _a.count,
|
|
2227
|
+
isActive = _a.isActive,
|
|
2228
|
+
onClick = _a.onClick,
|
|
2229
|
+
_c = _a.variant,
|
|
2230
|
+
variant = _c === void 0 ? 'desktop' : _c,
|
|
2231
|
+
className = _a.className;
|
|
2232
|
+
var buttonClasses = classNames(styles$4.tabButton, styles$4["tabButton--".concat(variant)], (_b = {}, _b[styles$4['tabButton--active']] = isActive, _b), className);
|
|
2233
|
+
// Split label to hide " RESULTS" on mobile
|
|
2234
|
+
var labelParts = label.split(' RESULTS');
|
|
2235
|
+
var mainLabel = labelParts[0];
|
|
2236
|
+
var hasResults = labelParts.length > 1;
|
|
2237
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
2238
|
+
type: "button",
|
|
2239
|
+
role: "tab",
|
|
2240
|
+
"aria-selected": isActive,
|
|
2241
|
+
"aria-controls": "tabpanel-".concat(label.toLowerCase().replace(/\s+/g, '-')),
|
|
2242
|
+
onClick: onClick,
|
|
2243
|
+
className: buttonClasses
|
|
2244
|
+
}, count !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
2245
|
+
className: styles$4.tabButton__count
|
|
2246
|
+
}, count), ' '), /*#__PURE__*/React.createElement("span", {
|
|
2247
|
+
className: styles$4.tabButton__label
|
|
2248
|
+
}, mainLabel, hasResults && /*#__PURE__*/React.createElement("span", {
|
|
2249
|
+
className: styles$4.tabButton__results
|
|
2250
|
+
}, " RESULTS")));
|
|
2251
|
+
};
|
|
2252
|
+
|
|
2253
|
+
var AssistanceIcon = function (props) {
|
|
2254
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
2255
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2256
|
+
width: "87",
|
|
2257
|
+
height: "87",
|
|
2258
|
+
viewBox: "0 0 87 87",
|
|
2259
|
+
fill: "none"
|
|
2260
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
2261
|
+
d: "M10.875 4.83247H47.125C50.463 4.83247 53.1667 7.53564 53.1667 10.8731V39.8679C53.1667 43.2053 50.463 45.9085 47.125 45.9085H33.6068C31.6281 45.9085 29.7099 46.6032 28.1844 47.8717L19.3333 55.2412V48.3247C19.3333 46.9958 18.2458 45.9085 16.9167 45.9085H10.875C7.53698 45.9085 4.83333 43.2053 4.83333 39.8679V10.8731C4.83333 7.53564 7.53698 4.83247 10.875 4.83247ZM0 10.8731V39.8679C0 45.8783 4.86354 50.741 10.875 50.741H14.5V60.4059C14.5 61.3422 15.0437 62.203 15.8896 62.5956C16.7354 62.9883 17.7474 62.8675 18.4573 62.2634L31.2807 51.5867C31.9302 51.043 32.7609 50.741 33.6068 50.741H47.125C53.1365 50.741 58 45.8783 58 39.8679V10.8731C58 4.86268 53.1365 0 47.125 0H10.875C4.86354 0 0 4.86268 0 10.8731ZM33.8333 64.0303V58.8958L29 62.9279V64.0454C29 70.0558 33.8635 74.9184 39.875 74.9184H53.3932C54.2391 74.9184 55.0698 75.2205 55.7193 75.7641L68.5427 86.4409C69.2677 87.0449 70.2646 87.1657 71.1104 86.7731C71.9563 86.3804 72.5 85.5197 72.5 84.5834V74.9184H76.125C82.1365 74.9184 87 70.0558 87 64.0454V35.0505C87 29.0401 82.1365 24.1775 76.125 24.1775H65.25V29.0099H76.125C79.463 29.0099 82.1667 31.7131 82.1667 35.0505V64.0454C82.1667 67.3828 79.463 70.086 76.125 70.086H70.0833C68.7542 70.086 67.6667 71.1733 67.6667 72.5022V79.4187L58.8156 72.034C57.2901 70.7655 55.3719 70.0709 53.3932 70.0709H39.875C36.537 70.0709 33.8333 67.3677 33.8333 64.0303ZM29 13.2893C32.1115 13.2893 34.6188 15.8112 34.6188 18.907C34.6188 21.5951 32.9573 22.9844 31.1146 23.815C28.8943 24.8117 26.5682 27.0618 26.5682 30.203C26.5682 31.5319 27.6557 32.6192 28.9849 32.6192C30.3141 32.6192 31.4016 31.5319 31.4016 30.203C31.4016 29.6291 31.9151 28.7532 33.0781 28.2247C35.7667 27.0165 39.437 24.3134 39.437 18.907C39.437 13.1383 34.7547 8.45683 28.9849 8.45683C23.2151 8.45683 18.5328 13.1383 18.5328 18.907C18.5328 20.236 19.6203 21.3233 20.9495 21.3233C22.2786 21.3233 23.3661 20.236 23.3661 18.907C23.3813 15.8112 25.8885 13.2893 29 13.2893ZM32.0208 39.8679C32.0208 38.2067 30.6615 36.8476 29 36.8476C27.3385 36.8476 25.9792 38.2067 25.9792 39.8679C25.9792 41.5291 27.3385 42.8882 29 42.8882C30.6615 42.8882 32.0208 41.5291 32.0208 39.8679Z",
|
|
2262
|
+
fill: "#39788E"
|
|
2263
|
+
}));
|
|
2264
|
+
};
|
|
2265
|
+
|
|
2266
|
+
var styles$3 = {"assistanceBanner":"AssistanceBanner-module__assistanceBanner___b97es","assistanceBanner__icon":"AssistanceBanner-module__assistanceBanner__icon___8NzJj","assistanceBanner__title":"AssistanceBanner-module__assistanceBanner__title___Wtkkt","assistanceBanner__description":"AssistanceBanner-module__assistanceBanner__description___AjoOr","assistanceBanner__link":"AssistanceBanner-module__assistanceBanner__link___5L45N","assistanceBanner__chevron":"AssistanceBanner-module__assistanceBanner__chevron___4km-f"};
|
|
2267
|
+
|
|
2268
|
+
/**
|
|
2269
|
+
* AssistanceBanner - Help widget for search sidebar
|
|
2270
|
+
*
|
|
2271
|
+
* Displays a call-to-action for users who need assistance finding products.
|
|
2272
|
+
* Features chat icon, heading, description, and contact link with chevron.
|
|
2273
|
+
*
|
|
2274
|
+
* Desktop only - hidden on mobile to save space.
|
|
2275
|
+
*
|
|
2276
|
+
* @example
|
|
2277
|
+
* ```tsx
|
|
2278
|
+
* <AssistanceBanner
|
|
2279
|
+
* title="Need Assistance?"
|
|
2280
|
+
* description="Can't find what you're looking for? Our team is ready to help."
|
|
2281
|
+
* linkText="Contact support"
|
|
2282
|
+
* linkUrl="/contact"
|
|
2283
|
+
* />
|
|
2284
|
+
* ```
|
|
2285
|
+
*/
|
|
2286
|
+
var AssistanceBanner = function (_a) {
|
|
2287
|
+
var _b = _a.title,
|
|
2288
|
+
title = _b === void 0 ? 'Need Assistance?' : _b,
|
|
2289
|
+
_c = _a.description,
|
|
2290
|
+
description = _c === void 0 ? "Can't find what you're looking for? Our team is ready to help." : _c,
|
|
2291
|
+
_d = _a.linkText,
|
|
2292
|
+
linkText = _d === void 0 ? 'Contact support' : _d,
|
|
2293
|
+
_e = _a.linkUrl,
|
|
2294
|
+
linkUrl = _e === void 0 ? '/contact' : _e,
|
|
2295
|
+
onLinkClick = _a.onLinkClick,
|
|
2296
|
+
className = _a.className;
|
|
2297
|
+
var handleLinkClick = function (e) {
|
|
2298
|
+
if (onLinkClick) {
|
|
2299
|
+
e.preventDefault();
|
|
2300
|
+
onLinkClick();
|
|
2301
|
+
}
|
|
2302
|
+
};
|
|
2303
|
+
var bannerClasses = classNames(styles$3.assistanceBanner, className);
|
|
2304
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2305
|
+
className: bannerClasses
|
|
2306
|
+
}, /*#__PURE__*/React.createElement(AssistanceIcon, {
|
|
2307
|
+
className: styles$3.assistanceBanner__icon,
|
|
2308
|
+
"aria-hidden": "true"
|
|
2309
|
+
}), /*#__PURE__*/React.createElement("h3", {
|
|
2310
|
+
className: styles$3.assistanceBanner__title
|
|
2311
|
+
}, title), /*#__PURE__*/React.createElement("p", {
|
|
2312
|
+
className: styles$3.assistanceBanner__description
|
|
2313
|
+
}, description), /*#__PURE__*/React.createElement("a", {
|
|
2314
|
+
href: linkUrl,
|
|
2315
|
+
onClick: onLinkClick ? handleLinkClick : undefined,
|
|
2316
|
+
className: styles$3.assistanceBanner__link
|
|
2317
|
+
}, /*#__PURE__*/React.createElement("span", null, linkText), /*#__PURE__*/React.createElement("svg", {
|
|
2318
|
+
className: styles$3.assistanceBanner__chevron,
|
|
2319
|
+
width: "12",
|
|
2320
|
+
height: "6",
|
|
2321
|
+
viewBox: "0 0 12 6",
|
|
2322
|
+
fill: "none",
|
|
2323
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2324
|
+
"aria-hidden": "true"
|
|
2325
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
2326
|
+
d: "M1 1L6 5L11 1",
|
|
2327
|
+
stroke: "currentColor",
|
|
2328
|
+
strokeWidth: "2",
|
|
2329
|
+
strokeLinecap: "round",
|
|
2330
|
+
strokeLinejoin: "round"
|
|
2331
|
+
}))));
|
|
2332
|
+
};
|
|
2333
|
+
|
|
2334
|
+
var styles$2 = {"drawerOverlay":"FilterDrawer-module__drawerOverlay___P6M4y","drawerOverlay--open":"FilterDrawer-module__drawerOverlay--open___blJZo","drawerPanel":"FilterDrawer-module__drawerPanel___35h-U","drawerPanel--open":"FilterDrawer-module__drawerPanel--open___Fw1SY","drawerCloseButton":"FilterDrawer-module__drawerCloseButton___cfMmf","drawerContent":"FilterDrawer-module__drawerContent___KBff6"};
|
|
2335
|
+
|
|
2336
|
+
/**
|
|
2337
|
+
* FilterDrawer - Mobile slide-in filter panel
|
|
2338
|
+
*
|
|
2339
|
+
* Slides in from the right with a dark overlay. Used on mobile to show filters
|
|
2340
|
+
* when screen space is limited. Includes focus trap, escape key handling, and
|
|
2341
|
+
* body scroll prevention.
|
|
2342
|
+
*
|
|
2343
|
+
* Desktop: Hidden (filters shown in sidebar)
|
|
2344
|
+
* Mobile: Slide-in drawer overlay
|
|
2345
|
+
*
|
|
2346
|
+
* @example
|
|
2347
|
+
* ```tsx
|
|
2348
|
+
* <FilterDrawer
|
|
2349
|
+
* isOpen={isFilterDrawerOpen}
|
|
2350
|
+
* onClose={() => setIsFilterDrawerOpen(false)}
|
|
2351
|
+
* >
|
|
2352
|
+
* <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
|
|
2353
|
+
* </FilterDrawer>
|
|
2354
|
+
* ```
|
|
2355
|
+
*/
|
|
2356
|
+
var FilterDrawer = function (_a) {
|
|
2357
|
+
var _b, _c;
|
|
2358
|
+
var isOpen = _a.isOpen,
|
|
2359
|
+
onClose = _a.onClose,
|
|
2360
|
+
children = _a.children,
|
|
2361
|
+
className = _a.className;
|
|
2362
|
+
var drawerRef = useRef(null);
|
|
2363
|
+
var previouslyFocusedElement = useRef(null);
|
|
2364
|
+
// Focus management
|
|
2365
|
+
useEffect(function () {
|
|
2366
|
+
if (isOpen) {
|
|
2367
|
+
// Store previously focused element
|
|
2368
|
+
previouslyFocusedElement.current = document.activeElement;
|
|
2369
|
+
// Focus the drawer
|
|
2370
|
+
if (drawerRef.current) {
|
|
2371
|
+
drawerRef.current.focus();
|
|
2372
|
+
}
|
|
2373
|
+
// Prevent body scroll
|
|
2374
|
+
document.body.style.overflow = 'hidden';
|
|
2375
|
+
} else {
|
|
2376
|
+
// Restore body scroll
|
|
2377
|
+
document.body.style.overflow = '';
|
|
2378
|
+
// Return focus to previously focused element
|
|
2379
|
+
if (previouslyFocusedElement.current) {
|
|
2380
|
+
previouslyFocusedElement.current.focus();
|
|
2381
|
+
}
|
|
2382
|
+
}
|
|
2383
|
+
return function () {
|
|
2384
|
+
document.body.style.overflow = '';
|
|
2385
|
+
};
|
|
2386
|
+
}, [isOpen]);
|
|
2387
|
+
// Escape key handler
|
|
2388
|
+
useEffect(function () {
|
|
2389
|
+
var handleEscape = function (event) {
|
|
2390
|
+
if (event.key === 'Escape' && isOpen) {
|
|
2391
|
+
onClose();
|
|
2392
|
+
}
|
|
2393
|
+
};
|
|
2394
|
+
document.addEventListener('keydown', handleEscape);
|
|
2395
|
+
return function () {
|
|
2396
|
+
return document.removeEventListener('keydown', handleEscape);
|
|
2397
|
+
};
|
|
2398
|
+
}, [isOpen, onClose]);
|
|
2399
|
+
// Focus trap implementation
|
|
2400
|
+
useEffect(function () {
|
|
2401
|
+
if (!isOpen || !drawerRef.current) return;
|
|
2402
|
+
var drawer = drawerRef.current;
|
|
2403
|
+
var focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
2404
|
+
var firstElement = focusableElements[0];
|
|
2405
|
+
var lastElement = focusableElements[focusableElements.length - 1];
|
|
2406
|
+
var handleTab = function (event) {
|
|
2407
|
+
if (event.key !== 'Tab') return;
|
|
2408
|
+
if (event.shiftKey) {
|
|
2409
|
+
// Shift + Tab
|
|
2410
|
+
if (document.activeElement === firstElement) {
|
|
2411
|
+
event.preventDefault();
|
|
2412
|
+
lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
|
|
2413
|
+
}
|
|
2414
|
+
} else {
|
|
2415
|
+
// Tab
|
|
2416
|
+
if (document.activeElement === lastElement) {
|
|
2417
|
+
event.preventDefault();
|
|
2418
|
+
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
2419
|
+
}
|
|
2420
|
+
}
|
|
2421
|
+
};
|
|
2422
|
+
drawer.addEventListener('keydown', handleTab);
|
|
2423
|
+
return function () {
|
|
2424
|
+
return drawer.removeEventListener('keydown', handleTab);
|
|
2425
|
+
};
|
|
2426
|
+
}, [isOpen]);
|
|
2427
|
+
if (!isOpen) return null;
|
|
2428
|
+
var handleOverlayClick = function (event) {
|
|
2429
|
+
if (event.target === event.currentTarget) {
|
|
2430
|
+
onClose();
|
|
2431
|
+
}
|
|
2432
|
+
};
|
|
2433
|
+
var overlayClasses = classNames(styles$2.drawerOverlay, (_b = {}, _b[styles$2['drawerOverlay--open']] = isOpen, _b));
|
|
2434
|
+
var panelClasses = classNames(styles$2.drawerPanel, (_c = {}, _c[styles$2['drawerPanel--open']] = isOpen, _c), className);
|
|
2435
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2436
|
+
className: overlayClasses,
|
|
2437
|
+
onClick: handleOverlayClick,
|
|
2438
|
+
"aria-hidden": "true"
|
|
2439
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
2440
|
+
type: "button",
|
|
2441
|
+
onClick: onClose,
|
|
2442
|
+
"aria-label": "Close filters",
|
|
2443
|
+
className: styles$2.drawerCloseButton
|
|
2444
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
2445
|
+
icon: faXmark
|
|
2446
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
2447
|
+
ref: drawerRef,
|
|
2448
|
+
role: "dialog",
|
|
2449
|
+
"aria-modal": "true",
|
|
2450
|
+
"aria-label": "Filter options",
|
|
2451
|
+
tabIndex: -1,
|
|
2452
|
+
className: panelClasses
|
|
2453
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2454
|
+
className: styles$2.drawerContent
|
|
2455
|
+
}, children)));
|
|
2456
|
+
};
|
|
2457
|
+
|
|
2458
|
+
var FederatedResultsView = function (_a) {
|
|
2459
|
+
var query = _a.query,
|
|
2460
|
+
onQueryChange = _a.onQueryChange,
|
|
2461
|
+
onSearchSubmit = _a.onSearchSubmit,
|
|
2462
|
+
activeTab = _a.activeTab,
|
|
2463
|
+
onTabChange = _a.onTabChange,
|
|
2464
|
+
products = _a.products,
|
|
2465
|
+
contents = _a.contents,
|
|
2466
|
+
isLoadingProducts = _a.isLoadingProducts,
|
|
2467
|
+
isLoadingContents = _a.isLoadingContents,
|
|
2468
|
+
productsError = _a.productsError,
|
|
2469
|
+
contentsError = _a.contentsError,
|
|
2470
|
+
currentPage = _a.currentPage,
|
|
2471
|
+
totalPages = _a.totalPages,
|
|
2472
|
+
onPageChange = _a.onPageChange,
|
|
2473
|
+
facets = _a.facets,
|
|
2474
|
+
onFacetToggle = _a.onFacetToggle,
|
|
2475
|
+
isFilterDrawerOpen = _a.isFilterDrawerOpen,
|
|
2476
|
+
onFilterDrawerToggle = _a.onFilterDrawerToggle,
|
|
2477
|
+
onFilterDrawerClose = _a.onFilterDrawerClose;
|
|
2478
|
+
var isLoading = activeTab === "products" && isLoadingProducts || activeTab === "content" && isLoadingContents;
|
|
2479
|
+
var error = activeTab === "products" ? productsError : contentsError;
|
|
2480
|
+
// Filter results based on active tab
|
|
2481
|
+
var displayProducts = activeTab === "content" ? [] : products;
|
|
2482
|
+
var displayContents = activeTab === "products" ? [] : contents;
|
|
2483
|
+
// Content tab single-select handler (clears all others when selecting)
|
|
2484
|
+
var handleContentCategorySelect = useCallback(function (attribute, value) {
|
|
2485
|
+
var facet = facets.find(function (f) {
|
|
2486
|
+
return f.attribute === attribute;
|
|
2487
|
+
});
|
|
2488
|
+
if (!facet) return;
|
|
2489
|
+
// Clear ALL values in this facet first
|
|
2490
|
+
facet.values.forEach(function (v) {
|
|
2491
|
+
if (v.isRefined) {
|
|
2492
|
+
onFacetToggle(attribute, v.value); // Unselect
|
|
2493
|
+
}
|
|
2494
|
+
});
|
|
2495
|
+
// Then select the clicked value (if not already selected)
|
|
2496
|
+
var clickedValue = facet.values.find(function (v) {
|
|
2497
|
+
return v.value === value;
|
|
2498
|
+
});
|
|
2499
|
+
if (clickedValue && !clickedValue.isRefined) {
|
|
2500
|
+
onFacetToggle(attribute, value); // Select
|
|
2501
|
+
}
|
|
2502
|
+
}, [facets, onFacetToggle]);
|
|
2503
|
+
// Track if any filters applied
|
|
2504
|
+
var hasAppliedFilters = useMemo(function () {
|
|
2505
|
+
return facets.some(function (facet) {
|
|
2506
|
+
return facet.values.some(function (value) {
|
|
2507
|
+
return value.isRefined;
|
|
2508
|
+
});
|
|
2509
|
+
});
|
|
2510
|
+
}, [facets]);
|
|
2511
|
+
// Track previous filter state to detect transitions
|
|
2512
|
+
var prevHasAppliedFilters = useRef(hasAppliedFilters);
|
|
2513
|
+
// Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
|
|
2514
|
+
useEffect(function () {
|
|
2515
|
+
// Only close if we HAD filters and now have NONE (not on initial open)
|
|
2516
|
+
if (prevHasAppliedFilters.current && !hasAppliedFilters && isFilterDrawerOpen && onFilterDrawerClose) {
|
|
2517
|
+
onFilterDrawerClose();
|
|
2518
|
+
}
|
|
2519
|
+
prevHasAppliedFilters.current = hasAppliedFilters;
|
|
2520
|
+
}, [hasAppliedFilters, isFilterDrawerOpen, onFilterDrawerClose]);
|
|
2521
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2522
|
+
className: styles$5.resultsView
|
|
2523
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2524
|
+
className: "".concat(styles$5.searchBarWrapper, " ").concat(styles$5.searchBarDesktopOnly)
|
|
2525
|
+
}, /*#__PURE__*/React.createElement(SearchBar, {
|
|
2526
|
+
value: query,
|
|
2527
|
+
onChange: onQueryChange,
|
|
2528
|
+
onSubmit: onSearchSubmit,
|
|
2529
|
+
placeholder: "Refine your search...",
|
|
2530
|
+
variant: "results"
|
|
2531
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
2532
|
+
className: "".concat(styles$5.tabsContainer, " ").concat(styles$5.tabsContainerDesktopOnly)
|
|
2533
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2534
|
+
className: styles$5.tabs,
|
|
2535
|
+
role: "tablist"
|
|
2536
|
+
}, /*#__PURE__*/React.createElement(TabButton, {
|
|
2537
|
+
label: "WEB SHOP RESULTS",
|
|
2538
|
+
count: products.length,
|
|
2539
|
+
isActive: activeTab === "products",
|
|
2540
|
+
onClick: function () {
|
|
2541
|
+
return onTabChange("products");
|
|
2542
|
+
},
|
|
2543
|
+
variant: "desktop"
|
|
2544
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
2545
|
+
className: styles$5.tabSeparator
|
|
2546
|
+
}), /*#__PURE__*/React.createElement(TabButton, {
|
|
2547
|
+
label: "WEBSITE RESULTS",
|
|
2548
|
+
count: contents.length,
|
|
2549
|
+
isActive: activeTab === "content",
|
|
2550
|
+
onClick: function () {
|
|
2551
|
+
return onTabChange("content");
|
|
2552
|
+
},
|
|
2553
|
+
variant: "desktop"
|
|
2554
|
+
})), onFilterDrawerToggle && /*#__PURE__*/React.createElement("button", {
|
|
2555
|
+
type: "button",
|
|
2556
|
+
className: styles$5.mobileFilterButton,
|
|
2557
|
+
onClick: onFilterDrawerToggle
|
|
2558
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
2559
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2560
|
+
width: "15",
|
|
2561
|
+
height: "11",
|
|
2562
|
+
viewBox: "0 0 15 11",
|
|
2563
|
+
fill: "none",
|
|
2564
|
+
"aria-hidden": "true"
|
|
2565
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
2566
|
+
d: "M0 0.6875C0 0.30651 0.313477 0 0.703125 0H14.2969C14.6865 0 15 0.30651 15 0.6875C15 1.06849 14.6865 1.375 14.2969 1.375H0.703125C0.313477 1.375 0 1.06849 0 0.6875ZM2.8125 5.5C2.8125 5.11901 3.12598 4.8125 3.51562 4.8125H11.4844C11.874 4.8125 12.1875 5.11901 12.1875 5.5C12.1875 5.88099 11.874 6.1875 11.4844 6.1875H3.51562C3.12598 6.1875 2.8125 5.88099 2.8125 5.5ZM9.375 10.3125C9.375 10.6935 9.06152 11 8.67188 11H6.32812C5.93848 11 5.625 10.6935 5.625 10.3125C5.625 9.93151 5.93848 9.625 6.32812 9.625H8.67188C9.06152 9.625 9.375 9.93151 9.375 10.3125Z",
|
|
2567
|
+
fill: "currentColor"
|
|
2568
|
+
})), /*#__PURE__*/React.createElement("span", null, "Filter"))), /*#__PURE__*/React.createElement("div", {
|
|
2569
|
+
className: styles$5.resultsContainer
|
|
2570
|
+
}, /*#__PURE__*/React.createElement("aside", {
|
|
2571
|
+
className: styles$5.sidebar
|
|
2572
|
+
}, /*#__PURE__*/React.createElement(FiltersPanel, {
|
|
2573
|
+
facets: facets,
|
|
2574
|
+
onFacetToggle: activeTab === "products" ? onFacetToggle : handleContentCategorySelect,
|
|
2575
|
+
showCheckbox: activeTab === "products"
|
|
2576
|
+
}), /*#__PURE__*/React.createElement(AssistanceBanner, {
|
|
2577
|
+
className: styles$5.assistanceBanner
|
|
2578
|
+
})), /*#__PURE__*/React.createElement("main", {
|
|
2579
|
+
className: styles$5.mainContent
|
|
2580
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2581
|
+
id: "tabpanel-".concat(activeTab),
|
|
2582
|
+
role: "tabpanel",
|
|
2583
|
+
"aria-labelledby": "tab-".concat(activeTab)
|
|
2584
|
+
}, /*#__PURE__*/React.createElement(ResultsList, {
|
|
2585
|
+
type: activeTab,
|
|
2586
|
+
products: displayProducts,
|
|
2587
|
+
contents: displayContents,
|
|
2588
|
+
isLoading: isLoading,
|
|
2589
|
+
error: error
|
|
2590
|
+
}), !isLoading && !error && (displayProducts.length > 0 || displayContents.length > 0) && /*#__PURE__*/React.createElement("div", {
|
|
2591
|
+
className: styles$5.paginationWrapper
|
|
2592
|
+
}, /*#__PURE__*/React.createElement(Pagination, {
|
|
2593
|
+
currentPage: currentPage,
|
|
2594
|
+
totalPages: totalPages,
|
|
2595
|
+
onPageChange: onPageChange,
|
|
2596
|
+
maxVisiblePages: 10,
|
|
2597
|
+
showPrevious: false,
|
|
2598
|
+
ariaLabel: "".concat(activeTab === "products" ? "Products" : "Content", " pagination")
|
|
2599
|
+
}))))), onFilterDrawerClose && /*#__PURE__*/React.createElement(FilterDrawer, {
|
|
2600
|
+
isOpen: isFilterDrawerOpen || false,
|
|
2601
|
+
onClose: onFilterDrawerClose
|
|
2602
|
+
}, /*#__PURE__*/React.createElement(FiltersPanel, {
|
|
2603
|
+
facets: facets,
|
|
2604
|
+
onFacetToggle: activeTab === "products" ? onFacetToggle : handleContentCategorySelect,
|
|
2605
|
+
variant: "mobile",
|
|
2606
|
+
showCheckbox: activeTab === "products"
|
|
2607
|
+
})));
|
|
2608
|
+
};
|
|
2609
|
+
|
|
2610
|
+
var styles$1 = {"searchExperience":"FederatedSearchExperience-module__searchExperience___gug9X","searchBarSection":"FederatedSearchExperience-module__searchBarSection___f0Ykq","searchBarDesktopOnly":"FederatedSearchExperience-module__searchBarDesktopOnly___CetKZ","searchBarMobileOnly":"FederatedSearchExperience-module__searchBarMobileOnly___Ityxp","resultsHeaderMobileOnly":"FederatedSearchExperience-module__resultsHeaderMobileOnly___09ef-","tabsContainerSticky":"FederatedSearchExperience-module__tabsContainerSticky___-HdY5","tabs":"FederatedSearchExperience-module__tabs___Vatv8","tabSeparator":"FederatedSearchExperience-module__tabSeparator___AUjhW","mobileFilterButtonWrapper":"FederatedSearchExperience-module__mobileFilterButtonWrapper___JkRtk","mobileFilterButton":"FederatedSearchExperience-module__mobileFilterButton___sRc-w","filterIndicatorDot":"FederatedSearchExperience-module__filterIndicatorDot___vqVi2","instantResultsSection":"FederatedSearchExperience-module__instantResultsSection___AG3qn","fullResultsSection":"FederatedSearchExperience-module__fullResultsSection___NH16U"};
|
|
2611
|
+
|
|
2612
|
+
/**
|
|
2613
|
+
* FederatedSearchExperience - Top-level search experience component
|
|
2614
|
+
*
|
|
2615
|
+
* This component orchestrates the entire federated search experience, including:
|
|
2616
|
+
* - Modal container
|
|
2617
|
+
* - Search input
|
|
2618
|
+
* - Instant results (2-column layout)
|
|
2619
|
+
* - Full results view with tabs and filters
|
|
2620
|
+
*
|
|
2621
|
+
* The component is fully controlled and does not contain any data fetching logic.
|
|
2622
|
+
* All data and callbacks are passed in via props, making it suitable for use in AEM
|
|
2623
|
+
* where a controller layer will handle Algolia integration.
|
|
2624
|
+
*
|
|
2625
|
+
* @example
|
|
2626
|
+
* ```tsx
|
|
2627
|
+
* <FederatedSearchExperience
|
|
2628
|
+
* isOpen={isOpen}
|
|
2629
|
+
* onOpen={handleOpen}
|
|
2630
|
+
* onClose={handleClose}
|
|
2631
|
+
* query={query}
|
|
2632
|
+
* onQueryChange={setQuery}
|
|
2633
|
+
* onSearchSubmit={handleSubmit}
|
|
2634
|
+
* products={products}
|
|
2635
|
+
* contents={contents}
|
|
2636
|
+
* isLoadingProducts={isLoadingProducts}
|
|
2637
|
+
* isLoadingContents={isLoadingContents}
|
|
2638
|
+
* onSeeAllProducts={handleSeeAllProducts}
|
|
2639
|
+
* onSeeAllContents={handleSeeAllContents}
|
|
2640
|
+
* onSeeAllCombined={handleSeeAllCombined}
|
|
2641
|
+
* activeView={activeView}
|
|
2642
|
+
* onChangeView={setActiveView}
|
|
2643
|
+
* activeTab={activeTab}
|
|
2644
|
+
* onTabChange={setActiveTab}
|
|
2645
|
+
* />
|
|
2646
|
+
* ```
|
|
2647
|
+
*/
|
|
2648
|
+
var FederatedSearchExperience = function (_a) {
|
|
2649
|
+
var isOpen = _a.isOpen,
|
|
2650
|
+
onClose = _a.onClose,
|
|
2651
|
+
query = _a.query,
|
|
2652
|
+
onQueryChange = _a.onQueryChange,
|
|
2653
|
+
onSearchSubmit = _a.onSearchSubmit,
|
|
2654
|
+
products = _a.products,
|
|
2655
|
+
contents = _a.contents,
|
|
2656
|
+
isLoadingProducts = _a.isLoadingProducts,
|
|
2657
|
+
isLoadingContents = _a.isLoadingContents,
|
|
2658
|
+
productsError = _a.productsError,
|
|
2659
|
+
contentsError = _a.contentsError,
|
|
2660
|
+
onSeeAllProducts = _a.onSeeAllProducts,
|
|
2661
|
+
onSeeAllContents = _a.onSeeAllContents,
|
|
2662
|
+
onSeeAllCombined = _a.onSeeAllCombined,
|
|
2663
|
+
activeView = _a.activeView;
|
|
2664
|
+
_a.onChangeView;
|
|
2665
|
+
var activeTab = _a.activeTab,
|
|
2666
|
+
onTabChange = _a.onTabChange,
|
|
2667
|
+
currentPage = _a.currentPage,
|
|
2668
|
+
totalPages = _a.totalPages,
|
|
2669
|
+
onPageChange = _a.onPageChange,
|
|
2670
|
+
facets = _a.facets,
|
|
2671
|
+
onFacetToggle = _a.onFacetToggle,
|
|
2672
|
+
isFilterDrawerOpen = _a.isFilterDrawerOpen,
|
|
2673
|
+
onFilterDrawerToggle = _a.onFilterDrawerToggle,
|
|
2674
|
+
onFilterDrawerClose = _a.onFilterDrawerClose;
|
|
2675
|
+
// Track if any filters are active (for red dot indicator)
|
|
2676
|
+
var hasAppliedFilters = useMemo(function () {
|
|
2677
|
+
return facets.some(function (facet) {
|
|
2678
|
+
return facet.values.some(function (value) {
|
|
2679
|
+
return value.isRefined;
|
|
2680
|
+
});
|
|
2681
|
+
});
|
|
2682
|
+
}, [facets]);
|
|
2683
|
+
return /*#__PURE__*/React.createElement(SearchModal, {
|
|
2684
|
+
isOpen: isOpen,
|
|
2685
|
+
onClose: onClose,
|
|
2686
|
+
title: "Search",
|
|
2687
|
+
stickyHeaderContent: activeView === "instant" ? /*#__PURE__*/React.createElement("div", {
|
|
2688
|
+
className: styles$1.searchBarMobileOnly
|
|
2689
|
+
}, /*#__PURE__*/React.createElement(SearchBar, {
|
|
2690
|
+
value: query,
|
|
2691
|
+
onChange: onQueryChange,
|
|
2692
|
+
onSubmit: onSearchSubmit,
|
|
2693
|
+
placeholder: "Discover products, innovations, and resources...",
|
|
2694
|
+
autoFocus: true,
|
|
2695
|
+
variant: "instant"
|
|
2696
|
+
})) : activeView === "results" ? /*#__PURE__*/React.createElement("div", {
|
|
2697
|
+
className: styles$1.resultsHeaderMobileOnly
|
|
2698
|
+
}, /*#__PURE__*/React.createElement(SearchBar, {
|
|
2699
|
+
value: query,
|
|
2700
|
+
onChange: onQueryChange,
|
|
2701
|
+
onSubmit: onSearchSubmit,
|
|
2702
|
+
placeholder: "Refine your search...",
|
|
2703
|
+
variant: "results"
|
|
2704
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
2705
|
+
className: styles$1.tabsContainerSticky
|
|
2706
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2707
|
+
className: styles$1.tabs,
|
|
2708
|
+
role: "tablist"
|
|
2709
|
+
}, /*#__PURE__*/React.createElement(TabButton, {
|
|
2710
|
+
label: "WEB SHOP RESULTS",
|
|
2711
|
+
count: products.length,
|
|
2712
|
+
isActive: activeTab === "products",
|
|
2713
|
+
onClick: function () {
|
|
2714
|
+
return onTabChange("products");
|
|
2715
|
+
},
|
|
2716
|
+
variant: "mobile"
|
|
2717
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
2718
|
+
className: styles$1.tabSeparator
|
|
2719
|
+
}), /*#__PURE__*/React.createElement(TabButton, {
|
|
2720
|
+
label: "WEBSITE RESULTS",
|
|
2721
|
+
count: contents.length,
|
|
2722
|
+
isActive: activeTab === "content",
|
|
2723
|
+
onClick: function () {
|
|
2724
|
+
return onTabChange("content");
|
|
2725
|
+
},
|
|
2726
|
+
variant: "mobile"
|
|
2727
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
2728
|
+
className: styles$1.mobileFilterButtonWrapper
|
|
2729
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
2730
|
+
type: "button",
|
|
2731
|
+
className: styles$1.mobileFilterButton,
|
|
2732
|
+
onClick: onFilterDrawerToggle
|
|
2733
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
2734
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2735
|
+
width: "15",
|
|
2736
|
+
height: "11",
|
|
2737
|
+
viewBox: "0 0 15 11",
|
|
2738
|
+
fill: "none",
|
|
2739
|
+
"aria-hidden": "true"
|
|
2740
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
2741
|
+
d: "M0 0.6875C0 0.30651 0.313477 0 0.703125 0H14.2969C14.6865 0 15 0.30651 15 0.6875C15 1.06849 14.6865 1.375 14.2969 1.375H0.703125C0.313477 1.375 0 1.06849 0 0.6875ZM2.8125 5.5C2.8125 5.11901 3.12598 4.8125 3.51562 4.8125H11.4844C11.874 4.8125 12.1875 5.11901 12.1875 5.5C12.1875 5.88099 11.874 6.1875 11.4844 6.1875H3.51562C3.12598 6.1875 2.8125 5.88099 2.8125 5.5ZM9.375 10.3125C9.375 10.6935 9.06152 11 8.67188 11H6.32812C5.93848 11 5.625 10.6935 5.625 10.3125C5.625 9.93151 5.93848 9.625 6.32812 9.625H8.67188C9.06152 9.625 9.375 9.93151 9.375 10.3125Z",
|
|
2742
|
+
fill: "currentColor"
|
|
2743
|
+
})), /*#__PURE__*/React.createElement("span", null, "Filter")), hasAppliedFilters && /*#__PURE__*/React.createElement("span", {
|
|
2744
|
+
className: styles$1.filterIndicatorDot,
|
|
2745
|
+
"aria-hidden": "true"
|
|
2746
|
+
})))) : undefined
|
|
2747
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2748
|
+
className: styles$1.searchExperience
|
|
2749
|
+
}, activeView === "instant" && /*#__PURE__*/React.createElement("div", {
|
|
2750
|
+
className: "".concat(styles$1.searchBarSection, " ").concat(styles$1.searchBarDesktopOnly)
|
|
2751
|
+
}, /*#__PURE__*/React.createElement(SearchBar, {
|
|
2752
|
+
value: query,
|
|
2753
|
+
onChange: onQueryChange,
|
|
2754
|
+
onSubmit: onSearchSubmit,
|
|
2755
|
+
placeholder: "Discover products, innovations, and resources...",
|
|
2756
|
+
autoFocus: true,
|
|
2757
|
+
variant: "instant"
|
|
2758
|
+
})), activeView === "instant" && /*#__PURE__*/React.createElement("div", {
|
|
2759
|
+
className: styles$1.instantResultsSection
|
|
2760
|
+
}, query ? /*#__PURE__*/React.createElement(FederatedInstantResultsLayout, {
|
|
2761
|
+
query: query,
|
|
2762
|
+
products: products,
|
|
2763
|
+
contents: contents,
|
|
2764
|
+
isLoadingProducts: isLoadingProducts,
|
|
2765
|
+
isLoadingContents: isLoadingContents,
|
|
2766
|
+
productsError: productsError,
|
|
2767
|
+
contentsError: contentsError,
|
|
2768
|
+
onSeeAllProducts: onSeeAllProducts,
|
|
2769
|
+
onSeeAllContents: onSeeAllContents,
|
|
2770
|
+
onSeeAllCombined: onSeeAllCombined
|
|
2771
|
+
}) : /*#__PURE__*/React.createElement(React.Fragment, null)
|
|
2772
|
+
// <div className={styles.emptyState}>
|
|
2773
|
+
// <svg
|
|
2774
|
+
// xmlns="http://www.w3.org/2000/svg"
|
|
2775
|
+
// viewBox="0 0 24 24"
|
|
2776
|
+
// fill="none"
|
|
2777
|
+
// stroke="currentColor"
|
|
2778
|
+
// strokeWidth="2"
|
|
2779
|
+
// strokeLinecap="round"
|
|
2780
|
+
// strokeLinejoin="round"
|
|
2781
|
+
// className={styles.emptyIcon}
|
|
2782
|
+
// >
|
|
2783
|
+
// <circle cx="11" cy="11" r="8" />
|
|
2784
|
+
// <path d="m21 21-4.35-4.35" />
|
|
2785
|
+
// </svg>
|
|
2786
|
+
// <h3>Start searching</h3>
|
|
2787
|
+
// <p>
|
|
2788
|
+
// Search for vacuum pumps, accessories, technical documentation, and more.
|
|
2789
|
+
// </p>
|
|
2790
|
+
// </div>
|
|
2791
|
+
), activeView === "results" && /*#__PURE__*/React.createElement("div", {
|
|
2792
|
+
className: styles$1.fullResultsSection
|
|
2793
|
+
}, /*#__PURE__*/React.createElement(FederatedResultsView, {
|
|
2794
|
+
query: query,
|
|
2795
|
+
onQueryChange: onQueryChange,
|
|
2796
|
+
onSearchSubmit: onSearchSubmit,
|
|
2797
|
+
activeTab: activeTab,
|
|
2798
|
+
onTabChange: onTabChange,
|
|
2799
|
+
products: products,
|
|
2800
|
+
contents: contents,
|
|
2801
|
+
isLoadingProducts: isLoadingProducts,
|
|
2802
|
+
isLoadingContents: isLoadingContents,
|
|
2803
|
+
productsError: productsError,
|
|
2804
|
+
contentsError: contentsError,
|
|
2805
|
+
currentPage: currentPage,
|
|
2806
|
+
totalPages: totalPages,
|
|
2807
|
+
onPageChange: onPageChange,
|
|
2808
|
+
facets: facets,
|
|
2809
|
+
onFacetToggle: onFacetToggle,
|
|
2810
|
+
isFilterDrawerOpen: isFilterDrawerOpen,
|
|
2811
|
+
onFilterDrawerToggle: onFilterDrawerToggle,
|
|
2812
|
+
onFilterDrawerClose: onFilterDrawerClose
|
|
2813
|
+
}))));
|
|
2814
|
+
};
|
|
2815
|
+
|
|
2816
|
+
var styles = {"searchTrigger":"SearchTriggerButton-module__searchTrigger___PDbDB","searchIcon":"SearchTriggerButton-module__searchIcon___izByW","label":"SearchTriggerButton-module__label___mkS7T"};
|
|
2817
|
+
|
|
2818
|
+
var SearchTriggerButton = function (_a) {
|
|
2819
|
+
var onOpen = _a.onOpen,
|
|
2820
|
+
_b = _a.ariaLabel,
|
|
2821
|
+
ariaLabel = _b === void 0 ? 'Open search' : _b,
|
|
2822
|
+
label = _a.label,
|
|
2823
|
+
_c = _a.className,
|
|
2824
|
+
className = _c === void 0 ? '' : _c;
|
|
2825
|
+
var handleKeyDown = function (event) {
|
|
2826
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
2827
|
+
event.preventDefault();
|
|
2828
|
+
onOpen();
|
|
2829
|
+
}
|
|
2830
|
+
};
|
|
2831
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
2832
|
+
type: "button",
|
|
2833
|
+
onClick: onOpen,
|
|
2834
|
+
onKeyDown: handleKeyDown,
|
|
2835
|
+
"aria-label": ariaLabel,
|
|
2836
|
+
className: "".concat(styles.searchTrigger, " ").concat(className)
|
|
2837
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
2838
|
+
className: styles.searchIcon,
|
|
2839
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2840
|
+
viewBox: "0 0 24 24",
|
|
2841
|
+
fill: "none",
|
|
2842
|
+
stroke: "currentColor",
|
|
2843
|
+
strokeWidth: "2",
|
|
2844
|
+
strokeLinecap: "round",
|
|
2845
|
+
strokeLinejoin: "round",
|
|
2846
|
+
"aria-hidden": "true"
|
|
2847
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
2848
|
+
cx: "11",
|
|
2849
|
+
cy: "11",
|
|
2850
|
+
r: "8"
|
|
2851
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2852
|
+
d: "m21 21-4.35-4.35"
|
|
2853
|
+
})), label && /*#__PURE__*/React.createElement("span", {
|
|
2854
|
+
className: styles.label
|
|
2855
|
+
}, label));
|
|
2856
|
+
};
|
|
2857
|
+
|
|
2858
|
+
export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, Footer, FooterBottom, FooterLink, FooterLinkGroup, FooterSocialIcon, FooterSocialIcons, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, ProductCardVertical, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
|