@asantemedia-org/edwardsvacuum-design-system 1.6.59 → 1.6.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +67 -1
- package/dist/index.esm.css +67 -1
- package/dist/index.esm.js +174 -12
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +174 -12
- package/dist/index.js.map +1 -1
- package/dist/index.scss +67 -1
- package/dist/stories/components/Card/card.d.ts +0 -1
- package/dist/stories/components/FacetUnitSelector/FacetUnitSelector.d.ts +8 -0
- package/dist/stories/components/FacetUnitSelector/index.d.ts +1 -0
- package/dist/stories/experiences/QRFormJourney/Friendly-captcha/FriendlyCaptcha.d.ts +10 -0
- package/dist/stories/experiences/QRFormJourney/Qr-form/Qr-form.d.ts +2 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/utils/helpers/formatFacetValue.d.ts +26 -0
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -5,6 +5,7 @@ var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
|
5
5
|
var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
|
|
6
6
|
var uuid = require('uuid');
|
|
7
7
|
var reactInternationalPhone = require('react-international-phone');
|
|
8
|
+
var friendlyChallenge = require('friendly-challenge');
|
|
8
9
|
|
|
9
10
|
/******************************************************************************
|
|
10
11
|
Copyright (c) Microsoft Corporation.
|
|
@@ -165,7 +166,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
165
166
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
166
167
|
};
|
|
167
168
|
|
|
168
|
-
var styles$
|
|
169
|
+
var styles$3 = {"cmp-card":"card-module__cmp-card___45x9k","cmp-card__link":"card-module__cmp-card__link___OdszC","cmp-card__content-wrapper":"card-module__cmp-card__content-wrapper___gh335","cmp-card__content-category-wrapper":"card-module__cmp-card__content-category-wrapper___2vOjQ","cmp-card__content-category-wrapper__colour-edwards-red":"card-module__cmp-card__content-category-wrapper__colour-edwards-red___DYmt8","cmp-card__city-country":"card-module__cmp-card__city-country___dI13-","cmp-card__image-wrapper":"card-module__cmp-card__image-wrapper___IhPHw","placeholderImage":"card-module__placeholderImage___AXOh5","cmp-card--type-card-overlay":"card-module__cmp-card--type-card-overlay___344ul","cmp-card__title-wrapper":"card-module__cmp-card__title-wrapper___XHfZg","cmp-card__date":"card-module__cmp-card__date___7w-Ka","cmp-card__title":"card-module__cmp-card__title___cFKG8","cmp-card__footer":"card-module__cmp-card__footer___xcNXM","cmp-card--type-card-no-image":"card-module__cmp-card--type-card-no-image___G75ye","cmp-card--type-card-product":"card-module__cmp-card--type-card-product___IfqTr","cmp-card--type-card-product__wrapper":"card-module__cmp-card--type-card-product__wrapper___kulaR","cmp-card--type-card-product-no-image__wrapper":"card-module__cmp-card--type-card-product-no-image__wrapper___ot5Xe","cmp-card--type-card-product__image":"card-module__cmp-card--type-card-product__image___Bkb0A","cmp-card--type-card-product__meta":"card-module__cmp-card--type-card-product__meta___a7Tzc","cmp-card--type-card-product__title":"card-module__cmp-card--type-card-product__title___0JMQp","cmp-card--type-card-product__cta":"card-module__cmp-card--type-card-product__cta___qDSNo","cmp-card--type-card-product__prices":"card-module__cmp-card--type-card-product__prices___KWPS7","cmp-card--type-card-product__prices--login":"card-module__cmp-card--type-card-product__prices--login___gMhTo","show_prices":"card-module__show_prices___gjVhn","cmp-card--type-card-panel":"card-module__cmp-card--type-card-panel___95jYv","cmp-card__footer--color-malachite":"card-module__cmp-card__footer--color-malachite___jEnvy","cmp-card__footer--color-amethyst":"card-module__cmp-card__footer--color-amethyst___N55PL","cmp-card__footer--color-smokey-quartz-bright":"card-module__cmp-card__footer--color-smokey-quartz-bright___1mqyn","cmp-card__footer--color-olivine-bright":"card-module__cmp-card__footer--color-olivine-bright___O2urI","cmp-card--type-careers":"card-module__cmp-card--type-careers___Wqzcf","cmp-card--type-product_details":"card-module__cmp-card--type-product_details___vsNOc","cmp-card--type-product_details__product-info":"card-module__cmp-card--type-product_details__product-info___5L009","cmp-card--type-product_details__header":"card-module__cmp-card--type-product_details__header___Vb3-U","cmp-card--type-product_details__header__title":"card-module__cmp-card--type-product_details__header__title___4KSqX","cmp-card--type-product_details__header__product-code":"card-module__cmp-card--type-product_details__header__product-code___zf7yq","cmp-card--type-product_details__header__product-image":"card-module__cmp-card--type-product_details__header__product-image___Kyy35","cmp-card--type-product_details__spares-list":"card-module__cmp-card--type-product_details__spares-list___VQ31R","folding-spares-list":"card-module__folding-spares-list___ls5-n","folding-specification-list":"card-module__folding-specification-list___tIfSl","facet-value-list":"card-module__facet-value-list___HtnIT","facet-value-unit":"card-module__facet-value-unit___b722z","folding-specification-holder":"card-module__folding-specification-holder___OtcQQ","folding-spares-holder":"card-module__folding-spares-holder___OhMpO"};
|
|
169
170
|
|
|
170
171
|
function getDefaultExportFromCjs (x) {
|
|
171
172
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -319,15 +320,112 @@ var AccordionSection = function (_a) {
|
|
|
319
320
|
|
|
320
321
|
var placholderimg = "3697809e28f9e0fe.png";
|
|
321
322
|
|
|
322
|
-
|
|
323
|
+
/**
|
|
324
|
+
* Parses delimited facet values into a structured format
|
|
325
|
+
*
|
|
326
|
+
* Input format: "pressure_psi|2.90#pressure_inHg|5.91#pressure_bar|0.200"
|
|
327
|
+
* Where:
|
|
328
|
+
* - `#` separates different unit entries
|
|
329
|
+
* - `|` separates the unit key from the value
|
|
330
|
+
*/
|
|
331
|
+
/**
|
|
332
|
+
* Checks if a value is in the delimited facet format
|
|
333
|
+
*/
|
|
334
|
+
var isDelimitedFacetValue = function (value) {
|
|
335
|
+
if (typeof value !== 'string') return false;
|
|
336
|
+
// Must contain both # (entry separator) and | (key-value separator)
|
|
337
|
+
return value.includes('#') && value.includes('|');
|
|
338
|
+
};
|
|
339
|
+
/**
|
|
340
|
+
* Extracts the display unit from a raw key
|
|
341
|
+
* e.g., "pressure_psi" -> "psi"
|
|
342
|
+
* e.g., "volumeFlowRate_l/s" -> "l/s"
|
|
343
|
+
* e.g., "power_kW" -> "kW"
|
|
344
|
+
*/
|
|
345
|
+
var extractUnit = function (rawKey) {
|
|
346
|
+
var parts = rawKey.split('_');
|
|
347
|
+
if (parts.length > 1) {
|
|
348
|
+
// Return everything after the first underscore (handles units like "m/³h")
|
|
349
|
+
return parts.slice(1).join('_');
|
|
350
|
+
}
|
|
351
|
+
return rawKey;
|
|
352
|
+
};
|
|
353
|
+
/**
|
|
354
|
+
* Parses a delimited facet string into an array of entries
|
|
355
|
+
*/
|
|
356
|
+
var parseDelimitedFacetValue = function (value) {
|
|
357
|
+
if (!isDelimitedFacetValue(value)) {
|
|
358
|
+
return [];
|
|
359
|
+
}
|
|
360
|
+
var entries = value.split('#');
|
|
361
|
+
return entries.map(function (entry) {
|
|
362
|
+
var _a = entry.split('|'),
|
|
363
|
+
rawKey = _a[0],
|
|
364
|
+
val = _a[1];
|
|
365
|
+
if (!rawKey || val === undefined) return null;
|
|
366
|
+
return {
|
|
367
|
+
unit: extractUnit(rawKey),
|
|
368
|
+
value: val,
|
|
369
|
+
rawKey: rawKey
|
|
370
|
+
};
|
|
371
|
+
}).filter(function (entry) {
|
|
372
|
+
return entry !== null;
|
|
373
|
+
});
|
|
374
|
+
};
|
|
375
|
+
|
|
376
|
+
var styles$2 = {"facet-unit-selector":"FacetUnitSelector-module__facet-unit-selector___1Zdhx","facet-unit-selector__value":"FacetUnitSelector-module__facet-unit-selector__value___E-LAN","facet-unit-selector__unit":"FacetUnitSelector-module__facet-unit-selector__unit___TxIk7","facet-unit-selector__dropdown":"FacetUnitSelector-module__facet-unit-selector__dropdown___Xj3dK"};
|
|
377
|
+
|
|
323
378
|
// Utility function to retrieve correct SCSS module class names
|
|
324
|
-
var getStyle$
|
|
379
|
+
var getStyle$2 = function (className) {
|
|
325
380
|
if (styles$2[className]) return styles$2[className];
|
|
326
381
|
var nestedMatch = Object.keys(styles$2).find(function (key) {
|
|
327
382
|
return key.includes(className);
|
|
328
383
|
});
|
|
329
384
|
return nestedMatch ? styles$2[nestedMatch] : "";
|
|
330
385
|
};
|
|
386
|
+
var FacetUnitSelector = function (_a) {
|
|
387
|
+
var entries = _a.entries,
|
|
388
|
+
_b = _a.usePlainClasses,
|
|
389
|
+
usePlainClasses = _b === void 0 ? false : _b;
|
|
390
|
+
var _c = React.useState(0),
|
|
391
|
+
selectedIndex = _c[0],
|
|
392
|
+
setSelectedIndex = _c[1];
|
|
393
|
+
var getClassName = function (name) {
|
|
394
|
+
return usePlainClasses ? name : getStyle$2(name);
|
|
395
|
+
};
|
|
396
|
+
if (!entries || entries.length === 0) return null;
|
|
397
|
+
var selectedEntry = entries[selectedIndex];
|
|
398
|
+
var handleUnitChange = function (e) {
|
|
399
|
+
setSelectedIndex(Number(e.target.value));
|
|
400
|
+
};
|
|
401
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
402
|
+
className: getClassName("facet-unit-selector")
|
|
403
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
404
|
+
className: getClassName("facet-unit-selector__value")
|
|
405
|
+
}, selectedEntry.value), entries.length > 1 ? /*#__PURE__*/React.createElement("select", {
|
|
406
|
+
className: getClassName("facet-unit-selector__dropdown"),
|
|
407
|
+
value: selectedIndex,
|
|
408
|
+
onChange: handleUnitChange,
|
|
409
|
+
"aria-label": "Select unit"
|
|
410
|
+
}, entries.map(function (entry, index) {
|
|
411
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
412
|
+
key: entry.rawKey,
|
|
413
|
+
value: index
|
|
414
|
+
}, entry.unit);
|
|
415
|
+
})) : /*#__PURE__*/React.createElement("span", {
|
|
416
|
+
className: getClassName("facet-unit-selector__unit")
|
|
417
|
+
}, selectedEntry.unit));
|
|
418
|
+
};
|
|
419
|
+
|
|
420
|
+
var PLACEHOLDER_INDICATOR = "?placeholder-storybook";
|
|
421
|
+
// Utility function to retrieve correct SCSS module class names
|
|
422
|
+
var getStyle$1 = function (className) {
|
|
423
|
+
if (styles$3[className]) return styles$3[className];
|
|
424
|
+
var nestedMatch = Object.keys(styles$3).find(function (key) {
|
|
425
|
+
return key.includes(className);
|
|
426
|
+
});
|
|
427
|
+
return nestedMatch ? styles$3[nestedMatch] : "";
|
|
428
|
+
};
|
|
331
429
|
var cardSizeMapping = function (size) {
|
|
332
430
|
var classSrting;
|
|
333
431
|
if (size === "small") {
|
|
@@ -529,13 +627,20 @@ var ProductDetailsCard = function (_a) {
|
|
|
529
627
|
}, /*#__PURE__*/React.createElement("ul", {
|
|
530
628
|
className: getClassName("folding-specification-list")
|
|
531
629
|
}, facets && facets.map(function (facet) {
|
|
532
|
-
|
|
630
|
+
var facetValue = hit[facet.name];
|
|
631
|
+
if (!facetValue) return null;
|
|
632
|
+
// Check if value is in delimited format (e.g., "pressure_psi|2.90#pressure_bar|0.200")
|
|
633
|
+
var isDelimited = isDelimitedFacetValue(facetValue);
|
|
634
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
533
635
|
key: facet.name
|
|
534
636
|
}, /*#__PURE__*/React.createElement("strong", null, facet.label), /*#__PURE__*/React.createElement("br", null), facet.returnsHTML ? /*#__PURE__*/React.createElement("span", {
|
|
535
637
|
dangerouslySetInnerHTML: {
|
|
536
|
-
__html:
|
|
638
|
+
__html: facetValue
|
|
537
639
|
}
|
|
538
|
-
}) :
|
|
640
|
+
}) : isDelimited ? /*#__PURE__*/React.createElement(FacetUnitSelector, {
|
|
641
|
+
entries: parseDelimitedFacetValue(facetValue),
|
|
642
|
+
usePlainClasses: usePlainClasses
|
|
643
|
+
}) : facetValue);
|
|
539
644
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
540
645
|
className: getClassName("cmp-card--type-product_details__spares-list")
|
|
541
646
|
}, (hit === null || hit === void 0 ? void 0 : hit.spares) && hit.spares.length > 0 && /*#__PURE__*/React.createElement(AccordionSection, {
|
|
@@ -738,7 +843,7 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
|
|
|
738
843
|
var Component = Card$1;
|
|
739
844
|
var title = hit.title;
|
|
740
845
|
var cardStyle = "";
|
|
741
|
-
var imageUrl = hit.
|
|
846
|
+
var imageUrl = hit.image;
|
|
742
847
|
var hitUtm = new URLSearchParams({
|
|
743
848
|
utm_source: "web",
|
|
744
849
|
utm_medium: "alg",
|
|
@@ -1021,6 +1126,27 @@ var defaultQrFormTranslations = {
|
|
|
1021
1126
|
consent_requiredMessage: "Please acknowledge this consent"
|
|
1022
1127
|
};
|
|
1023
1128
|
|
|
1129
|
+
var FriendlyCaptcha = function (props) {
|
|
1130
|
+
React.useEffect(function () {
|
|
1131
|
+
console.log(props.element, "element");
|
|
1132
|
+
if (props.element) {
|
|
1133
|
+
var sdk = new friendlyChallenge.WidgetInstance(props.element, {
|
|
1134
|
+
startMode: "auto",
|
|
1135
|
+
doneCallback: function (solution) {
|
|
1136
|
+
if (props.onComplete) props.onComplete(solution);
|
|
1137
|
+
if (props.doneCallback) props.doneCallback();
|
|
1138
|
+
}
|
|
1139
|
+
});
|
|
1140
|
+
try {
|
|
1141
|
+
sdk.start();
|
|
1142
|
+
} catch (e) {
|
|
1143
|
+
console.error("FriendlyCaptcha initialization failed", e);
|
|
1144
|
+
}
|
|
1145
|
+
}
|
|
1146
|
+
}, [props.element]);
|
|
1147
|
+
return null;
|
|
1148
|
+
};
|
|
1149
|
+
|
|
1024
1150
|
var QrForm = function (props) {
|
|
1025
1151
|
var _a;
|
|
1026
1152
|
var _b = React.useState(0),
|
|
@@ -1042,8 +1168,14 @@ var QrForm = function (props) {
|
|
|
1042
1168
|
var _g = React.useState(true);
|
|
1043
1169
|
_g[0];
|
|
1044
1170
|
var setIsLoadingCountries = _g[1];
|
|
1171
|
+
var _h = React.useState(null),
|
|
1172
|
+
captchaElRef = _h[0],
|
|
1173
|
+
setCaptchaElRef = _h[1];
|
|
1045
1174
|
// Use custom Button component if provided, otherwise use default
|
|
1046
1175
|
var Button$1 = props.ButtonComponent || Button;
|
|
1176
|
+
var _j = React.useState(false),
|
|
1177
|
+
showSubmit = _j[0],
|
|
1178
|
+
setShowSubmit = _j[1];
|
|
1047
1179
|
var i18n = __assign(__assign({}, defaultQrFormTranslations), props);
|
|
1048
1180
|
var buttonProps = props;
|
|
1049
1181
|
var consentFields = ((_a = props.consents) === null || _a === void 0 ? void 0 : _a.map(function (consent, index) {
|
|
@@ -1060,13 +1192,17 @@ var QrForm = function (props) {
|
|
|
1060
1192
|
errorMessage: consent.policyMandatory ? i18n.consent_requiredMessage : ""
|
|
1061
1193
|
};
|
|
1062
1194
|
})) || [];
|
|
1195
|
+
React.useRef(null);
|
|
1063
1196
|
React.useEffect(function () {
|
|
1064
1197
|
var initialValues = {};
|
|
1065
1198
|
props.fields.forEach(function (field) {
|
|
1066
1199
|
initialValues[field.name] = field.value || '';
|
|
1067
1200
|
});
|
|
1201
|
+
initialValues['portalId'] = props.hubspotAppId;
|
|
1202
|
+
initialValues['formId'] = props.hubspotId;
|
|
1203
|
+
initialValues['isChina'] = props.isChina ? "true" : "false";
|
|
1068
1204
|
setFormValues(initialValues);
|
|
1069
|
-
}, [props.fields]);
|
|
1205
|
+
}, [props.fields, props.hubspotAppId, props.hubspotId, props.isChina]);
|
|
1070
1206
|
React.useEffect(function () {
|
|
1071
1207
|
function loadCountries() {
|
|
1072
1208
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -1393,13 +1529,13 @@ var QrForm = function (props) {
|
|
|
1393
1529
|
onClick: formNavigate,
|
|
1394
1530
|
"data-page_target": pageIndex + 1,
|
|
1395
1531
|
buttonStyle: "primary"
|
|
1396
|
-
}) : /*#__PURE__*/React.createElement(Button$1, {
|
|
1532
|
+
}) : /*#__PURE__*/React.createElement(React.Fragment, null, (!props.captchaKey || showSubmit) && /*#__PURE__*/React.createElement(Button$1, {
|
|
1397
1533
|
label: i18n === null || i18n === void 0 ? void 0 : i18n.submit,
|
|
1398
1534
|
onClick: handleSubmit,
|
|
1399
1535
|
buttonStyle: "primary",
|
|
1400
1536
|
element: "button",
|
|
1401
1537
|
type: "submit"
|
|
1402
|
-
}));
|
|
1538
|
+
})));
|
|
1403
1539
|
if (isPartial) {
|
|
1404
1540
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1405
1541
|
className: "qr-form-fields"
|
|
@@ -1433,7 +1569,7 @@ var QrForm = function (props) {
|
|
|
1433
1569
|
className: "bullet-point"
|
|
1434
1570
|
}, /*#__PURE__*/React.createElement("span", null, index + 1)), /*#__PURE__*/React.createElement("h3", null, pageTitles[index]));
|
|
1435
1571
|
}))), /*#__PURE__*/React.createElement("form", {
|
|
1436
|
-
action: "".concat(props.formAction
|
|
1572
|
+
action: "".concat(props.formAction),
|
|
1437
1573
|
onSubmit: handleSubmit
|
|
1438
1574
|
}, currentPage === 0 && /*#__PURE__*/React.createElement("section", {
|
|
1439
1575
|
key: 1,
|
|
@@ -1462,10 +1598,36 @@ var QrForm = function (props) {
|
|
|
1462
1598
|
}), renderFormSection({
|
|
1463
1599
|
pageIndex: 3,
|
|
1464
1600
|
sectionTitle: pageTitles[3]
|
|
1465
|
-
}), /*#__PURE__*/React.createElement("
|
|
1601
|
+
}), currentPage === pages.length - 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1602
|
+
id: "frc-widget",
|
|
1603
|
+
className: "vtba-friendly-captcha-react",
|
|
1604
|
+
"data-rad": "test",
|
|
1605
|
+
"data-sitekey": props.captchaKey,
|
|
1606
|
+
ref: function (el) {
|
|
1607
|
+
setCaptchaElRef(el);
|
|
1608
|
+
}
|
|
1609
|
+
}), !!props.captchaKey && captchaElRef && /*#__PURE__*/React.createElement(FriendlyCaptcha, {
|
|
1610
|
+
sitekey: props.captchaKey,
|
|
1611
|
+
doneCallback: function () {
|
|
1612
|
+
setShowSubmit(true);
|
|
1613
|
+
},
|
|
1614
|
+
element: captchaElRef
|
|
1615
|
+
})), /*#__PURE__*/React.createElement("input", {
|
|
1466
1616
|
type: "hidden",
|
|
1467
1617
|
name: "ip_location",
|
|
1468
1618
|
value: formValues.ip_location || ''
|
|
1619
|
+
}), /*#__PURE__*/React.createElement("input", {
|
|
1620
|
+
type: "hidden",
|
|
1621
|
+
name: "portalId",
|
|
1622
|
+
value: props.hubspotAppId
|
|
1623
|
+
}), /*#__PURE__*/React.createElement("input", {
|
|
1624
|
+
type: "hidden",
|
|
1625
|
+
name: "formId",
|
|
1626
|
+
value: props.hubspotId
|
|
1627
|
+
}), /*#__PURE__*/React.createElement("input", {
|
|
1628
|
+
type: "hidden",
|
|
1629
|
+
name: "isChina",
|
|
1630
|
+
value: props.isChina ? "true" : "false"
|
|
1469
1631
|
}))) : /*#__PURE__*/React.createElement("div", {
|
|
1470
1632
|
className: "qr-form-thank-you-page"
|
|
1471
1633
|
}, /*#__PURE__*/React.createElement("div", {
|