@trafilea/afrodita-components 6.36.6 → 6.36.8
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 +32 -12
- package/build/index.esm.js.map +1 -1
- package/build/index.js +32 -12
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -20899,13 +20899,21 @@ 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 position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n
|
|
20902
|
+
var Container$8 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n\n ", "\n border: 1px solid red;\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\n ", "\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.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 ", "\n border: 1px solid red;\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\n ", "\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.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 ";
|
|
20906
20910
|
}, function (_a) {
|
|
20907
20911
|
var theme = _a.theme;
|
|
20908
20912
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20913
|
+
}, function (_a) {
|
|
20914
|
+
var first = _a.first;
|
|
20915
|
+
return first &&
|
|
20916
|
+
"\n margin-left: -7px;\n ";
|
|
20909
20917
|
});
|
|
20910
20918
|
var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$4;
|
|
20911
20919
|
|
|
@@ -20940,16 +20948,17 @@ var ContentGallery = function (_a) {
|
|
|
20940
20948
|
return 1.1;
|
|
20941
20949
|
}
|
|
20942
20950
|
var paddingWidth = 0;
|
|
20943
|
-
var
|
|
20951
|
+
var paddingFirstSlide = selectedImageIndex === 0 ? 15 : 0;
|
|
20952
|
+
var width = containerRef.current.offsetWidth - paddingFirstSlide;
|
|
20944
20953
|
var cssZoom = 0.8;
|
|
20945
20954
|
var cssGap = 8;
|
|
20946
20955
|
var photoSize = 375.41 * cssZoom;
|
|
20947
20956
|
var photosPerScreen = width / photoSize;
|
|
20948
|
-
var totalGap = Math.floor(photosPerScreen) * cssGap;
|
|
20957
|
+
var totalGap = Math.floor(photosPerScreen) * cssGap * 2;
|
|
20949
20958
|
return ((width + width * 0.0001 * (width > 380 ? 10 : -10) - paddingWidth - totalGap) / photoSize);
|
|
20950
20959
|
}
|
|
20951
20960
|
var slidesToShow = (_b = calcSlidesToShow()) !== null && _b !== void 0 ? _b : 1;
|
|
20952
|
-
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, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
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, first: selectedImageIndex === 0, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20953
20962
|
return afterChangeSlide({
|
|
20954
20963
|
slide: e,
|
|
20955
20964
|
contents: contents,
|
|
@@ -21102,8 +21111,10 @@ var Slider = function (_a) {
|
|
|
21102
21111
|
var Container$5 = newStyled.div({
|
|
21103
21112
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
21104
21113
|
minHeight: '100vh',
|
|
21114
|
+
height: '100%',
|
|
21105
21115
|
width: '100vw',
|
|
21106
|
-
position: '
|
|
21116
|
+
position: 'fixed',
|
|
21117
|
+
overflowY: 'scroll',
|
|
21107
21118
|
zIndex: '99999',
|
|
21108
21119
|
top: 0,
|
|
21109
21120
|
left: 0,
|
|
@@ -21113,24 +21124,33 @@ var Container$5 = newStyled.div({
|
|
|
21113
21124
|
});
|
|
21114
21125
|
var SubContainer = newStyled.div({
|
|
21115
21126
|
maxWidth: '480px',
|
|
21127
|
+
marginTop: '105px',
|
|
21116
21128
|
'@media screen and (min-width: 480px)': {
|
|
21117
21129
|
margin: '0 auto',
|
|
21118
|
-
}
|
|
21130
|
+
},
|
|
21131
|
+
'@media screen and (max-height: 640px)': {
|
|
21132
|
+
position: 'relative',
|
|
21133
|
+
},
|
|
21134
|
+
'@media screen and (min-height: 740px)': {
|
|
21135
|
+
marginTop: '0px',
|
|
21136
|
+
},
|
|
21137
|
+
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21138
|
+
position: 'relative',
|
|
21139
|
+
marginTop: '0px',
|
|
21140
|
+
},
|
|
21119
21141
|
});
|
|
21120
21142
|
var Header$1 = newStyled.div({
|
|
21121
21143
|
display: 'flex',
|
|
21122
21144
|
justifyContent: 'end',
|
|
21123
21145
|
alignItems: 'center',
|
|
21124
21146
|
color: 'white',
|
|
21125
|
-
padding: '1.2rem',
|
|
21147
|
+
padding: '50px 1.2rem 1.2rem 1.2rem',
|
|
21126
21148
|
position: 'absolute',
|
|
21149
|
+
zIndex: 4,
|
|
21127
21150
|
top: 0,
|
|
21128
21151
|
right: 0,
|
|
21129
|
-
'@media screen and (max-height:
|
|
21130
|
-
|
|
21131
|
-
},
|
|
21132
|
-
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21133
|
-
position: 'relative',
|
|
21152
|
+
'@media screen and (max-height: 740px)': {
|
|
21153
|
+
paddingTop: '1.2rem'
|
|
21134
21154
|
}
|
|
21135
21155
|
});
|
|
21136
21156
|
var IconContainer = newStyled.div({
|