@trafilea/afrodita-components 5.0.0-beta.271 → 5.0.0-beta.272
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/build/index.css +1 -1
- package/build/index.d.ts +2 -1
- package/build/index.esm.css +1 -1
- package/build/index.esm.js +23 -21
- package/build/index.esm.js.map +1 -1
- package/build/index.js +23 -21
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4985,8 +4985,8 @@ var TAGS = {
|
|
|
4985
4985
|
display2: newStyled.h2(templateObject_5$l || (templateObject_5$l = __makeTemplateObject([""], [""]))),
|
|
4986
4986
|
heading1: newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTemplateObject([""], [""]))),
|
|
4987
4987
|
heading2: newStyled.h2(templateObject_7$c || (templateObject_7$c = __makeTemplateObject([""], [""]))),
|
|
4988
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4989
|
-
heading4: newStyled.h4(templateObject_9$
|
|
4988
|
+
heading3: newStyled.h3(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject([""], [""]))),
|
|
4989
|
+
heading4: newStyled.h4(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject([""], [""]))),
|
|
4990
4990
|
heading5: newStyled.h5(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject([""], [""]))),
|
|
4991
4991
|
heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
|
|
4992
4992
|
heading7: newStyled.h1(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -5110,7 +5110,7 @@ var DEFAULTS = {
|
|
|
5110
5110
|
size: 'regular',
|
|
5111
5111
|
},
|
|
5112
5112
|
};
|
|
5113
|
-
var templateObject_1$1v, templateObject_2$_, templateObject_3$O, templateObject_4$y, templateObject_5$l, templateObject_6$j, templateObject_7$c, templateObject_8$
|
|
5113
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$O, templateObject_4$y, templateObject_5$l, templateObject_6$j, templateObject_7$c, templateObject_8$8, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1;
|
|
5114
5114
|
|
|
5115
5115
|
var ButtonsContainer = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
5116
5116
|
var inline = _a.inline;
|
|
@@ -5749,7 +5749,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5749
5749
|
};
|
|
5750
5750
|
var templateObject_1$1l;
|
|
5751
5751
|
|
|
5752
|
-
var Button$
|
|
5752
|
+
var Button$5 = newStyled.button(function () { return ({
|
|
5753
5753
|
background: 'transparent',
|
|
5754
5754
|
border: 'none',
|
|
5755
5755
|
cursor: 'pointer',
|
|
@@ -5761,7 +5761,7 @@ var Direction;
|
|
|
5761
5761
|
})(Direction || (Direction = {}));
|
|
5762
5762
|
var ArrowButton$1 = function (_a) {
|
|
5763
5763
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
5764
|
-
return (jsxRuntime.jsx(Button$
|
|
5764
|
+
return (jsxRuntime.jsx(Button$5, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
|
|
5765
5765
|
};
|
|
5766
5766
|
|
|
5767
5767
|
function _defineProperty(obj, key, value) {
|
|
@@ -10063,14 +10063,14 @@ var Container$Y = newStyled.div(templateObject_3$J || (templateObject_3$J = __ma
|
|
|
10063
10063
|
var position = _a.position;
|
|
10064
10064
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10065
10065
|
});
|
|
10066
|
-
var Button$
|
|
10066
|
+
var Button$4 = newStyled.button(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
10067
10067
|
var ImagePreviewList = function (_a) {
|
|
10068
10068
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10069
10069
|
return (jsxRuntime.jsx(Container$Y, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
10070
10070
|
arrowWidth: 0.75,
|
|
10071
10071
|
arrowHeight: 1.25,
|
|
10072
10072
|
arrowPadding: 1.625,
|
|
10073
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$
|
|
10073
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10074
10074
|
};
|
|
10075
10075
|
var templateObject_1$1j, templateObject_2$T, templateObject_3$J, templateObject_4$w;
|
|
10076
10076
|
|
|
@@ -12844,7 +12844,7 @@ var BaseInput = function (_a) {
|
|
|
12844
12844
|
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
12845
12845
|
};
|
|
12846
12846
|
|
|
12847
|
-
var Button$
|
|
12847
|
+
var Button$3 = function (_a) {
|
|
12848
12848
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
12849
12849
|
if (variant === 'primary') {
|
|
12850
12850
|
return jsxRuntime.jsx(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -12875,7 +12875,7 @@ var Custom = function (_a) {
|
|
|
12875
12875
|
text: text,
|
|
12876
12876
|
disabled: rest.disabled,
|
|
12877
12877
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12878
|
-
return (jsxRuntime.jsx(Container$I, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$
|
|
12878
|
+
return (jsxRuntime.jsx(Container$I, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12879
12879
|
};
|
|
12880
12880
|
var templateObject_1$10, templateObject_2$I;
|
|
12881
12881
|
|
|
@@ -13085,13 +13085,13 @@ var SectionDetails = newStyled.p(templateObject_7$9 || (templateObject_7$9 = __m
|
|
|
13085
13085
|
})
|
|
13086
13086
|
: '';
|
|
13087
13087
|
});
|
|
13088
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
13088
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
13089
13089
|
var DeliveryDetails = function (_a) {
|
|
13090
13090
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
13091
13091
|
var theme = useTheme();
|
|
13092
13092
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.375 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.375 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.375 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
13093
13093
|
};
|
|
13094
|
-
var templateObject_1$T, templateObject_2$C, templateObject_3$x, templateObject_4$o, templateObject_5$f, templateObject_6$e, templateObject_7$9, templateObject_8$
|
|
13094
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$x, templateObject_4$o, templateObject_5$f, templateObject_6$e, templateObject_7$9, templateObject_8$7;
|
|
13095
13095
|
|
|
13096
13096
|
var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
13097
13097
|
var Text$4 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
@@ -13227,8 +13227,8 @@ var ReviewContainer$1 = newStyled.div(templateObject_4$k || (templateObject_4$k
|
|
|
13227
13227
|
var DateText$1 = newStyled.span(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13228
13228
|
var VariantText = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13229
13229
|
var ReviewerName$1 = newStyled.h2(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
13230
|
-
var ReviewTitle$1 = newStyled.h3(templateObject_8$
|
|
13231
|
-
var ReviewDescription$1 = newStyled.p(templateObject_9$
|
|
13230
|
+
var ReviewTitle$1 = newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13231
|
+
var ReviewDescription$1 = newStyled.p(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n white-space: pre-wrap;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n white-space: pre-wrap;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13232
13232
|
var ImagesContainer = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
13233
13233
|
var Images = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
13234
13234
|
var ImageSpace = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
@@ -13243,7 +13243,7 @@ var Review$1 = function (_a) {
|
|
|
13243
13243
|
var theme = useTheme();
|
|
13244
13244
|
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$2, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13245
13245
|
};
|
|
13246
|
-
var templateObject_1$M, templateObject_2$w, templateObject_3$t, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$8, templateObject_8$
|
|
13246
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$t, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$8, templateObject_8$6, templateObject_9$4, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
13247
13247
|
|
|
13248
13248
|
var List = newStyled.ul(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
13249
13249
|
var Item$1 = newStyled.li(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
@@ -13750,14 +13750,14 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13750
13750
|
},
|
|
13751
13751
|
}); });
|
|
13752
13752
|
|
|
13753
|
-
var Button$
|
|
13753
|
+
var Button$2 = newStyled.button(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
13754
13754
|
right: ['1rem', '7.75rem'],
|
|
13755
13755
|
top: ['0.75rem', '0.75rem'],
|
|
13756
13756
|
}));
|
|
13757
13757
|
var ClearButton = function (_a) {
|
|
13758
13758
|
var onClick = _a.onClick;
|
|
13759
13759
|
var theme = useTheme();
|
|
13760
|
-
return (jsxRuntime.jsx(Button$
|
|
13760
|
+
return (jsxRuntime.jsx(Button$2, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13761
13761
|
};
|
|
13762
13762
|
var templateObject_1$x;
|
|
13763
13763
|
|
|
@@ -13911,6 +13911,8 @@ var VideoOverlay$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = _
|
|
|
13911
13911
|
var Video = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
13912
13912
|
var VideoTag = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
13913
13913
|
var Text$3 = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13914
|
+
var NavButtonContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n height: 80px;\n width: 40px;\n background-color: ", ";\n"], ["\n height: 80px;\n width: 40px;\n background-color: ", ";\n"])), function (props) { return (props.navArrowBackground ? 'rgba(0,0,0,0.1) !important' : ''); });
|
|
13915
|
+
var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n margin: 20px 0;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n margin: 20px 0;\n cursor: pointer;\n"])));
|
|
13914
13916
|
var settings = {
|
|
13915
13917
|
dots: true,
|
|
13916
13918
|
infinite: false,
|
|
@@ -13920,7 +13922,7 @@ var settings = {
|
|
|
13920
13922
|
initialSlide: 0,
|
|
13921
13923
|
};
|
|
13922
13924
|
var ImageProductWithTags = function (_a) {
|
|
13923
|
-
var images = _a.images, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
13925
|
+
var images = _a.images, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue, navArrowBackground = _a.navArrowBackground;
|
|
13924
13926
|
var slick = React$2.useRef(null);
|
|
13925
13927
|
var sliderWrapper = React$2.useRef(null);
|
|
13926
13928
|
var iframeRef = React$2.useRef(null);
|
|
@@ -13961,7 +13963,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13961
13963
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13962
13964
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13963
13965
|
autoplay ? _playVideo() : _stopVideo();
|
|
13964
|
-
} }, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13966
|
+
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer, __assign$1({ navArrowBackground: navArrowBackground }, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929", opacity: 0.5 }, void 0) }, void 0) }), void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, __assign$1({ navArrowBackground: navArrowBackground }, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929", opacity: 0.5 }, void 0) }, void 0) }), void 0), ref: slick }, { children: images.map(function (image) {
|
|
13965
13967
|
var _a, _b;
|
|
13966
13968
|
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
13967
13969
|
isPlaying ? _stopVideo() : _playVideo();
|
|
@@ -14003,12 +14005,12 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14003
14005
|
};
|
|
14004
14006
|
}, [preventTouch, ref, touchStart]);
|
|
14005
14007
|
}
|
|
14006
|
-
var templateObject_1$w, templateObject_2$l, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
14008
|
+
var templateObject_1$w, templateObject_2$l, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$3;
|
|
14007
14009
|
|
|
14008
14010
|
var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14009
14011
|
var ProductGalleryMobile = function (_a) {
|
|
14010
|
-
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14011
|
-
return (jsxRuntime.jsx(Container$n, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
14012
|
+
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.navArrowBackground, navArrowBackground = _c === void 0 ? false : _c;
|
|
14013
|
+
return (jsxRuntime.jsx(Container$n, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue, navArrowBackground: navArrowBackground }, void 0) }, void 0));
|
|
14012
14014
|
};
|
|
14013
14015
|
var templateObject_1$v;
|
|
14014
14016
|
|