@trafilea/afrodita-components 6.36.9 → 6.36.11
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 +28 -15
- package/build/index.esm.js.map +1 -1
- package/build/index.js +28 -15
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -20882,38 +20882,39 @@ var _playVideo = function () {
|
|
|
20882
20882
|
_sendCommandToIframe('playVideo');
|
|
20883
20883
|
};
|
|
20884
20884
|
|
|
20885
|
+
function closeZoom() {
|
|
20886
|
+
var closeButton = document.querySelectorAll('.iiz__btn.iiz__close.iiz__close--visible')[0];
|
|
20887
|
+
if (closeButton) {
|
|
20888
|
+
closeButton.click();
|
|
20889
|
+
}
|
|
20890
|
+
}
|
|
20891
|
+
|
|
20885
20892
|
var afterChangeSlide = function (_a) {
|
|
20886
20893
|
var _b;
|
|
20887
|
-
var slide = _a.slide, contents = _a.contents, setSelectedImageIndex = _a.setSelectedImageIndex,
|
|
20894
|
+
var slide = _a.slide, contents = _a.contents, setSelectedImageIndex = _a.setSelectedImageIndex, onChange = _a.onChange;
|
|
20888
20895
|
var activeSlide = contents[slide];
|
|
20889
20896
|
// If autoplay is true and iframe is the active slide, play the video
|
|
20890
20897
|
var autoplay = (_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _b === void 0 ? void 0 : _b.includes('autoplay=1');
|
|
20891
20898
|
autoplay ? _playVideo() : _stopVideo();
|
|
20892
|
-
if (setArrowsVisible) {
|
|
20893
|
-
setArrowsVisible(false);
|
|
20894
|
-
}
|
|
20895
20899
|
setSelectedImageIndex(Math.round(slide));
|
|
20896
20900
|
onChange === null || onChange === void 0 ? void 0 : onChange(slide);
|
|
20901
|
+
closeZoom();
|
|
20897
20902
|
};
|
|
20898
20903
|
|
|
20899
20904
|
var TopTagContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
20900
20905
|
var TopRightTagContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
20901
20906
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20902
|
-
var Container$8 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n\n
|
|
20907
|
+
var Container$8 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"], ["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"])), function (_a) {
|
|
20903
20908
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20904
20909
|
return borderRadiusVariant &&
|
|
20905
20910
|
"\n border-radius: 40px;\n ";
|
|
20906
|
-
}, function (_a) {
|
|
20907
|
-
var first = _a.first;
|
|
20908
|
-
return first &&
|
|
20909
|
-
"\n padding-left: 15px;\n ";
|
|
20910
20911
|
}, function (_a) {
|
|
20911
20912
|
var theme = _a.theme;
|
|
20912
20913
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20913
20914
|
}, function (_a) {
|
|
20914
|
-
var
|
|
20915
|
-
return
|
|
20916
|
-
"\n
|
|
20915
|
+
var lastImage = _a.lastImage;
|
|
20916
|
+
return lastImage &&
|
|
20917
|
+
"\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n ";
|
|
20917
20918
|
});
|
|
20918
20919
|
var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$4;
|
|
20919
20920
|
|
|
@@ -20948,7 +20949,7 @@ var ContentGallery = function (_a) {
|
|
|
20948
20949
|
return 1.1;
|
|
20949
20950
|
}
|
|
20950
20951
|
var paddingWidth = 0;
|
|
20951
|
-
var paddingFirstSlide =
|
|
20952
|
+
var paddingFirstSlide = 15;
|
|
20952
20953
|
var width = containerRef.current.offsetWidth - paddingFirstSlide;
|
|
20953
20954
|
var cssZoom = 0.8;
|
|
20954
20955
|
var cssGap = 8;
|
|
@@ -20958,7 +20959,7 @@ var ContentGallery = function (_a) {
|
|
|
20958
20959
|
return ((width + width * 0.0001 * (width > 380 ? 10 : -10) - paddingWidth - totalGap) / photoSize);
|
|
20959
20960
|
}
|
|
20960
20961
|
var slidesToShow = (_b = calcSlidesToShow()) !== null && _b !== void 0 ? _b : 1;
|
|
20961
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' }, "data-testid": "mobile-gallery-content-gallery-custom-click" }, { children: contents.map(function (content, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsx$1(Container$8, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant,
|
|
20962
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' }, "data-testid": "mobile-gallery-content-gallery-custom-click" }, { children: contents.map(function (content, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsx$1(Container$8, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, lastImage: selectedImageIndex === contents.length - 1, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20962
20963
|
return afterChangeSlide({
|
|
20963
20964
|
slide: e,
|
|
20964
20965
|
contents: contents,
|
|
@@ -21030,7 +21031,6 @@ var MainContent = function (_a) {
|
|
|
21030
21031
|
slide: e,
|
|
21031
21032
|
contents: contents,
|
|
21032
21033
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
21033
|
-
setArrowsVisible: setArrowsVisible,
|
|
21034
21034
|
onChange: onChange,
|
|
21035
21035
|
});
|
|
21036
21036
|
} }, settings, { nextArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }), void 0)) : undefined, prevArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0)) : undefined, ref: slick }, { children: contents.map(function (content, idx) {
|
|
@@ -21134,6 +21134,19 @@ var SubContainer = newStyled.div({
|
|
|
21134
21134
|
'@media screen and (min-height: 740px)': {
|
|
21135
21135
|
marginTop: '0px',
|
|
21136
21136
|
},
|
|
21137
|
+
'@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)': {
|
|
21138
|
+
'@media': {
|
|
21139
|
+
marginTop: '40px !important',
|
|
21140
|
+
},
|
|
21141
|
+
},
|
|
21142
|
+
'@media not all and (min-resolution:.001dpcm)': {
|
|
21143
|
+
'@supports (-webkit-appearance:none) and (stroke-color:transparent)': {
|
|
21144
|
+
marginTop: '40px !important',
|
|
21145
|
+
},
|
|
21146
|
+
'@supports (-webkit-appearance:none) and (not (stroke-color:transparent))': {
|
|
21147
|
+
marginTop: '40px !important',
|
|
21148
|
+
},
|
|
21149
|
+
},
|
|
21137
21150
|
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21138
21151
|
position: 'relative',
|
|
21139
21152
|
marginTop: '0px',
|