@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.js
CHANGED
|
@@ -20925,13 +20925,21 @@ var afterChangeSlide = function (_a) {
|
|
|
20925
20925
|
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'); });
|
|
20926
20926
|
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"])));
|
|
20927
20927
|
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"])));
|
|
20928
|
-
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
|
|
20928
|
+
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) {
|
|
20929
20929
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20930
20930
|
return borderRadiusVariant &&
|
|
20931
20931
|
"\n border-radius: 40px;\n ";
|
|
20932
|
+
}, function (_a) {
|
|
20933
|
+
var first = _a.first;
|
|
20934
|
+
return first &&
|
|
20935
|
+
"\n padding-left: 15px;\n ";
|
|
20932
20936
|
}, function (_a) {
|
|
20933
20937
|
var theme = _a.theme;
|
|
20934
20938
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20939
|
+
}, function (_a) {
|
|
20940
|
+
var first = _a.first;
|
|
20941
|
+
return first &&
|
|
20942
|
+
"\n margin-left: -7px;\n ";
|
|
20935
20943
|
});
|
|
20936
20944
|
var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$4;
|
|
20937
20945
|
|
|
@@ -20966,16 +20974,17 @@ var ContentGallery = function (_a) {
|
|
|
20966
20974
|
return 1.1;
|
|
20967
20975
|
}
|
|
20968
20976
|
var paddingWidth = 0;
|
|
20969
|
-
var
|
|
20977
|
+
var paddingFirstSlide = selectedImageIndex === 0 ? 15 : 0;
|
|
20978
|
+
var width = containerRef.current.offsetWidth - paddingFirstSlide;
|
|
20970
20979
|
var cssZoom = 0.8;
|
|
20971
20980
|
var cssGap = 8;
|
|
20972
20981
|
var photoSize = 375.41 * cssZoom;
|
|
20973
20982
|
var photosPerScreen = width / photoSize;
|
|
20974
|
-
var totalGap = Math.floor(photosPerScreen) * cssGap;
|
|
20983
|
+
var totalGap = Math.floor(photosPerScreen) * cssGap * 2;
|
|
20975
20984
|
return ((width + width * 0.0001 * (width > 380 ? 10 : -10) - paddingWidth - totalGap) / photoSize);
|
|
20976
20985
|
}
|
|
20977
20986
|
var slidesToShow = (_b = calcSlidesToShow()) !== null && _b !== void 0 ? _b : 1;
|
|
20978
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("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 (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsxRuntime.jsx(Container$8, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20987
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("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 (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsxRuntime.jsx(Container$8, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, first: selectedImageIndex === 0, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20979
20988
|
return afterChangeSlide({
|
|
20980
20989
|
slide: e,
|
|
20981
20990
|
contents: contents,
|
|
@@ -21128,8 +21137,10 @@ var Slider = function (_a) {
|
|
|
21128
21137
|
var Container$5 = newStyled.div({
|
|
21129
21138
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
21130
21139
|
minHeight: '100vh',
|
|
21140
|
+
height: '100%',
|
|
21131
21141
|
width: '100vw',
|
|
21132
|
-
position: '
|
|
21142
|
+
position: 'fixed',
|
|
21143
|
+
overflowY: 'scroll',
|
|
21133
21144
|
zIndex: '99999',
|
|
21134
21145
|
top: 0,
|
|
21135
21146
|
left: 0,
|
|
@@ -21139,24 +21150,33 @@ var Container$5 = newStyled.div({
|
|
|
21139
21150
|
});
|
|
21140
21151
|
var SubContainer = newStyled.div({
|
|
21141
21152
|
maxWidth: '480px',
|
|
21153
|
+
marginTop: '105px',
|
|
21142
21154
|
'@media screen and (min-width: 480px)': {
|
|
21143
21155
|
margin: '0 auto',
|
|
21144
|
-
}
|
|
21156
|
+
},
|
|
21157
|
+
'@media screen and (max-height: 640px)': {
|
|
21158
|
+
position: 'relative',
|
|
21159
|
+
},
|
|
21160
|
+
'@media screen and (min-height: 740px)': {
|
|
21161
|
+
marginTop: '0px',
|
|
21162
|
+
},
|
|
21163
|
+
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21164
|
+
position: 'relative',
|
|
21165
|
+
marginTop: '0px',
|
|
21166
|
+
},
|
|
21145
21167
|
});
|
|
21146
21168
|
var Header$1 = newStyled.div({
|
|
21147
21169
|
display: 'flex',
|
|
21148
21170
|
justifyContent: 'end',
|
|
21149
21171
|
alignItems: 'center',
|
|
21150
21172
|
color: 'white',
|
|
21151
|
-
padding: '1.2rem',
|
|
21173
|
+
padding: '50px 1.2rem 1.2rem 1.2rem',
|
|
21152
21174
|
position: 'absolute',
|
|
21175
|
+
zIndex: 4,
|
|
21153
21176
|
top: 0,
|
|
21154
21177
|
right: 0,
|
|
21155
|
-
'@media screen and (max-height:
|
|
21156
|
-
|
|
21157
|
-
},
|
|
21158
|
-
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21159
|
-
position: 'relative',
|
|
21178
|
+
'@media screen and (max-height: 740px)': {
|
|
21179
|
+
paddingTop: '1.2rem'
|
|
21160
21180
|
}
|
|
21161
21181
|
});
|
|
21162
21182
|
var IconContainer = newStyled.div({
|