@trafilea/afrodita-components 6.36.8 → 6.36.10
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 +21 -15
- package/build/index.esm.js.map +1 -1
- package/build/index.js +21 -15
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -20899,21 +20899,17 @@ var afterChangeSlide = function (_a) {
|
|
|
20899
20899
|
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
20900
|
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
20901
|
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
|
|
20902
|
+
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
20903
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20904
20904
|
return borderRadiusVariant &&
|
|
20905
20905
|
"\n border-radius: 40px;\n ";
|
|
20906
|
-
}, function (_a) {
|
|
20907
|
-
var first = _a.first;
|
|
20908
|
-
return first &&
|
|
20909
|
-
"\n padding-left: 15px;\n ";
|
|
20910
20906
|
}, function (_a) {
|
|
20911
20907
|
var theme = _a.theme;
|
|
20912
20908
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20913
20909
|
}, function (_a) {
|
|
20914
|
-
var
|
|
20915
|
-
return
|
|
20916
|
-
"\n
|
|
20910
|
+
var lastImage = _a.lastImage;
|
|
20911
|
+
return lastImage &&
|
|
20912
|
+
"\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n ";
|
|
20917
20913
|
});
|
|
20918
20914
|
var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$4;
|
|
20919
20915
|
|
|
@@ -20948,17 +20944,17 @@ var ContentGallery = function (_a) {
|
|
|
20948
20944
|
return 1.1;
|
|
20949
20945
|
}
|
|
20950
20946
|
var paddingWidth = 0;
|
|
20951
|
-
var paddingFirstSlide =
|
|
20947
|
+
var paddingFirstSlide = 15;
|
|
20952
20948
|
var width = containerRef.current.offsetWidth - paddingFirstSlide;
|
|
20953
20949
|
var cssZoom = 0.8;
|
|
20954
20950
|
var cssGap = 8;
|
|
20955
20951
|
var photoSize = 375.41 * cssZoom;
|
|
20956
20952
|
var photosPerScreen = width / photoSize;
|
|
20957
|
-
var totalGap = Math.floor(photosPerScreen) * cssGap * 2;
|
|
20953
|
+
var totalGap = Math.floor(photosPerScreen) * cssGap * 2.4;
|
|
20958
20954
|
return ((width + width * 0.0001 * (width > 380 ? 10 : -10) - paddingWidth - totalGap) / photoSize);
|
|
20959
20955
|
}
|
|
20960
20956
|
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,
|
|
20957
|
+
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
20958
|
return afterChangeSlide({
|
|
20963
20959
|
slide: e,
|
|
20964
20960
|
contents: contents,
|
|
@@ -21134,6 +21130,19 @@ var SubContainer = newStyled.div({
|
|
|
21134
21130
|
'@media screen and (min-height: 740px)': {
|
|
21135
21131
|
marginTop: '0px',
|
|
21136
21132
|
},
|
|
21133
|
+
'@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)': {
|
|
21134
|
+
'@media': {
|
|
21135
|
+
marginTop: '40px',
|
|
21136
|
+
}
|
|
21137
|
+
},
|
|
21138
|
+
'@media not all and (min-resolution:.001dpcm)': {
|
|
21139
|
+
'@supports (-webkit-appearance:none) and (stroke-color:transparent)': {
|
|
21140
|
+
marginTop: '40px',
|
|
21141
|
+
},
|
|
21142
|
+
'@supports (-webkit-appearance:none) and (not (stroke-color:transparent))': {
|
|
21143
|
+
marginTop: '40px',
|
|
21144
|
+
},
|
|
21145
|
+
},
|
|
21137
21146
|
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21138
21147
|
position: 'relative',
|
|
21139
21148
|
marginTop: '0px',
|
|
@@ -21144,14 +21153,11 @@ var Header$1 = newStyled.div({
|
|
|
21144
21153
|
justifyContent: 'end',
|
|
21145
21154
|
alignItems: 'center',
|
|
21146
21155
|
color: 'white',
|
|
21147
|
-
padding: '
|
|
21156
|
+
padding: '1.2rem',
|
|
21148
21157
|
position: 'absolute',
|
|
21149
21158
|
zIndex: 4,
|
|
21150
21159
|
top: 0,
|
|
21151
21160
|
right: 0,
|
|
21152
|
-
'@media screen and (max-height: 740px)': {
|
|
21153
|
-
paddingTop: '1.2rem'
|
|
21154
|
-
}
|
|
21155
21161
|
});
|
|
21156
21162
|
var IconContainer = newStyled.div({
|
|
21157
21163
|
backgroundColor: '#E5E5E5',
|