@trafilea/afrodita-components 5.0.0-beta.251 → 5.0.0-beta.252
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.esm.js +8 -10
- package/build/index.esm.js.map +1 -1
- package/build/index.js +8 -10
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -10010,7 +10010,7 @@ var ImagePreviewList = function (_a) {
|
|
|
10010
10010
|
arrowWidth: 0.75,
|
|
10011
10011
|
arrowHeight: 1.25,
|
|
10012
10012
|
arrowPadding: 1.625,
|
|
10013
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.alt.includes('-video') ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : 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 (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.alt.includes('-video') ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10013
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(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 (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(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));
|
|
10014
10014
|
};
|
|
10015
10015
|
var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$w;
|
|
10016
10016
|
|
|
@@ -11613,7 +11613,7 @@ var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
|
|
|
11613
11613
|
var TopTagContainer$3 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11614
11614
|
var BottomTagContainer$3 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11615
11615
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
11616
|
-
var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height:
|
|
11616
|
+
var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
11617
11617
|
var VideoTag$1 = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n gap: 8px;\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 display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
11618
11618
|
var Text$7 = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
11619
11619
|
var ImageProductWithTags$1 = function (_a) {
|
|
@@ -13796,17 +13796,15 @@ var ImageProductWithTags = function (_a) {
|
|
|
13796
13796
|
}, [images, selectedValue]);
|
|
13797
13797
|
return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
13798
13798
|
var _a;
|
|
13799
|
+
var activeSlide = images[e];
|
|
13799
13800
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13800
|
-
|
|
13801
|
-
|
|
13802
|
-
var autoplay = urlParams.get('autoplay') === '1';
|
|
13803
|
-
var vwoIndex = Number(urlParams.get('vwo-index'));
|
|
13804
|
-
e == vwoIndex && autoplay ? _playVideo() : _stopVideo();
|
|
13801
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13802
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
13805
13803
|
} }, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13806
13804
|
var _a, _b;
|
|
13807
|
-
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(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), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(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')) && (
|
|
13808
|
-
|
|
13809
|
-
|
|
13805
|
+
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(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), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(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')) && (jsxs$1(Video, { children: [jsx$1("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), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
13806
|
+
isPlaying ? _stopVideo() : _playVideo();
|
|
13807
|
+
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
13810
13808
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13811
13809
|
};
|
|
13812
13810
|
function usePreventVerticalScroll(ref, dragThreshold) {
|