@trafilea/afrodita-components 6.20.0 → 6.21.1

package/build/index.d.ts

@@ -3676,11 +3676,38 @@ declare type VideoProps = {
 } & DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
 declare const Video: React.FC<VideoProps>;
 
+declare type ImagesSliderConfig = {
+    width: string;
+    height: string;
+    borderRadius: string;
+    spacesBetweenImages: string;
+};
+declare type ThumbnailSettings = {
+    swipeToSlide: boolean;
+    focusOnSelect: boolean;
+    infinite: boolean;
+    centerPadding: string;
+    slidesToShow: number;
+    speed: number;
+    arrows: boolean;
+    responsive: Responsive[];
+};
+declare type Responsive = {
+    breakpoint: number;
+    settings: {
+        slidesToShow: number;
+        slidesToScroll?: number;
+        centerMode?: boolean;
+    };
+};
+
 declare type ProductGalleryMobileProps = {
     images: ContentType[];
     topTag?: JSX.Element;
     bottomTag?: JSX.Element;
     productImageDataTestId?: string;
+    imagesSliderConfig?: ImagesSliderConfig;
+    thumbnailSettings?: ThumbnailSettings;
 };
 declare const ProductGalleryMobileV4: React__default.FC<ProductGalleryMobileProps>;
 

package/build/index.esm.js

@@ -20156,43 +20156,6 @@ var Spinner = function (_a) {
     return (jsx$1(Container$5, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
 };
 
-var Container$4 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
-var SliderContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n\n  .slick-slide {\n    position: relative;\n    aspect-ratio: ", ";\n  }\n\n  .slick-arrow {\n    cursor: pointer;\n    position: absolute;\n    top: 45%;\n    z-index: 1;\n    display: block !important;\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: 5px;\n  }\n\n  .slick-next {\n    right: 5px;\n  }\n\n  .slick-dots {\n    bottom: 15px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    text-align: center;\n    width: 100%;\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.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: rgba(27, 25, 25, 0.5);\n    border-radius: 20px;\n    content: ' ';\n    display: block;\n    height: 8px;\n    left: 0;\n    margin: 5px;\n    position: absolute;\n    top: 0;\n    width: 8px;\n    opacity: 1;\n  }\n\n  .slick-dots li.slick-active button:before {\n    background-color: #fff;\n    opacity: 1;\n    width: 12px;\n    height: 12px;\n    top: -1px;\n  }\n\n  .slick-dots li:not(.slick-active) button:before {\n    border: 1px solid hsla(0, 0%, 100%, 0.6);\n  }\n"], ["\n  ", "\n  position: relative;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n\n  .slick-slide {\n    position: relative;\n    aspect-ratio: ", ";\n  }\n\n  .slick-arrow {\n    cursor: pointer;\n    position: absolute;\n    top: 45%;\n    z-index: 1;\n    display: block !important;\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: 5px;\n  }\n\n  .slick-next {\n    right: 5px;\n  }\n\n  .slick-dots {\n    bottom: 15px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    text-align: center;\n    width: 100%;\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.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: rgba(27, 25, 25, 0.5);\n    border-radius: 20px;\n    content: ' ';\n    display: block;\n    height: 8px;\n    left: 0;\n    margin: 5px;\n    position: absolute;\n    top: 0;\n    width: 8px;\n    opacity: 1;\n  }\n\n  .slick-dots li.slick-active button:before {\n    background-color: #fff;\n    opacity: 1;\n    width: 12px;\n    height: 12px;\n    top: -1px;\n  }\n\n  .slick-dots li:not(.slick-active) button:before {\n    border: 1px solid hsla(0, 0%, 100%, 0.6);\n  }\n"])), function (_a) {
-    var borderRadiusVariant = _a.borderRadiusVariant;
-    return borderRadiusVariant &&
-        "\n    border-radius: 40px;\n  ";
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.component.slideNavigation.slideDots.selectedDotColor;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.component.gallery.aspectRatio;
-});
-var TopTagContainer$2 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  position: absolute;\n  left: 0px;\n  top: 21px;\n"], ["\n  position: absolute;\n  left: 0px;\n  top: 21px;\n"])));
-var BottomTagContainer$2 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
-var NavButtonContainer = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  height: 36px;\n  width: 36px;\n  background-color: ", " !important;\n  border-radius: 500px;\n"], ["\n  height: 36px;\n  width: 36px;\n  background-color: ", " !important;\n  border-radius: 500px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.shades.white.color;
-});
-var Button = newStyled.button(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 3px 8px;\n  z-index: 5;\n  height: 36px !important;\n  cursor: pointer;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 3px 8px;\n  z-index: 5;\n  height: 36px !important;\n  cursor: pointer;\n"])));
-var SliderThumbnail = newStyled(Slider)(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  margin-top: 16px;\n  padding-left: 16px;\n  & .slick-slide {\n    img {\n      overflow: hidden;\n    }\n  }\n  & .slick-current {\n    img {\n      border: 2px solid ", ";\n    }\n  }\n"], ["\n  margin-top: 16px;\n  padding-left: 16px;\n  & .slick-slide {\n    img {\n      overflow: hidden;\n    }\n  }\n  & .slick-current {\n    img {\n      border: 2px solid ", ";\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.pallete.primary.color;
-});
-var StyledImage = newStyled(Image$3)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  aspect-ratio: ", ";\n"], ["\n  width: 100%;\n  height: 100%;\n  aspect-ratio: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.component.gallery.aspectRatio;
-});
-var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  padding-right: 12px;\n  aspect-ratio: ", ";\n"], ["\n  padding-right: 12px;\n  aspect-ratio: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.component.gallery.aspectRatio;
-});
-var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  aspect-ratio: ", ";\n"], ["\n  aspect-ratio: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.component.gallery.aspectRatio;
-});
-var templateObject_1$5, templateObject_2$5, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10$1;
-
 var SETTINGS = {
     infinite: false,
     speed: 200,
@@ -20236,12 +20199,50 @@ var THUMBNAIL_SETTINGS = {
             },
         },
     ],
-};
+};
+
+var Container$4 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var SliderContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n\n  .slick-slide {\n    position: relative;\n  }\n\n  .slick-arrow {\n    cursor: pointer;\n    position: absolute;\n    top: 45%;\n    z-index: 1;\n    display: block !important;\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: 5px;\n  }\n\n  .slick-next {\n    right: 5px;\n  }\n\n  .slick-dots {\n    bottom: 15px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    text-align: center;\n    width: 100%;\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.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: rgba(27, 25, 25, 0.5);\n    border-radius: 20px;\n    content: ' ';\n    display: block;\n    height: 8px;\n    left: 0;\n    margin: 5px;\n    position: absolute;\n    top: 0;\n    width: 8px;\n    opacity: 1;\n  }\n\n  .slick-dots li.slick-active button:before {\n    background-color: #fff;\n    opacity: 1;\n    width: 12px;\n    height: 12px;\n    top: -1px;\n  }\n\n  .slick-dots li:not(.slick-active) button:before {\n    border: 1px solid hsla(0, 0%, 100%, 0.6);\n  }\n"], ["\n  ", "\n  position: relative;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n\n  .slick-slide {\n    position: relative;\n  }\n\n  .slick-arrow {\n    cursor: pointer;\n    position: absolute;\n    top: 45%;\n    z-index: 1;\n    display: block !important;\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: 5px;\n  }\n\n  .slick-next {\n    right: 5px;\n  }\n\n  .slick-dots {\n    bottom: 15px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    text-align: center;\n    width: 100%;\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.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: rgba(27, 25, 25, 0.5);\n    border-radius: 20px;\n    content: ' ';\n    display: block;\n    height: 8px;\n    left: 0;\n    margin: 5px;\n    position: absolute;\n    top: 0;\n    width: 8px;\n    opacity: 1;\n  }\n\n  .slick-dots li.slick-active button:before {\n    background-color: #fff;\n    opacity: 1;\n    width: 12px;\n    height: 12px;\n    top: -1px;\n  }\n\n  .slick-dots li:not(.slick-active) button:before {\n    border: 1px solid hsla(0, 0%, 100%, 0.6);\n  }\n"])), function (_a) {
+    var borderRadiusVariant = _a.borderRadiusVariant;
+    return borderRadiusVariant &&
+        "\n    border-radius: 40px;\n  ";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.slideNavigation.slideDots.selectedDotColor;
+});
+var TopTagContainer$2 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  position: absolute;\n  left: 0px;\n  top: 21px;\n"], ["\n  position: absolute;\n  left: 0px;\n  top: 21px;\n"])));
+var BottomTagContainer$2 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
+var NavButtonContainer = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  height: 36px;\n  width: 36px;\n  background-color: ", " !important;\n  border-radius: 500px;\n"], ["\n  height: 36px;\n  width: 36px;\n  background-color: ", " !important;\n  border-radius: 500px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.shades.white.color;
+});
+var Button = newStyled.button(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 3px 8px;\n  z-index: 5;\n  height: 36px !important;\n  cursor: pointer;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 3px 8px;\n  z-index: 5;\n  height: 36px !important;\n  cursor: pointer;\n"])));
+var SliderThumbnail = newStyled(Slider)(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  margin-top: 16px;\n  padding-left: 16px;\n  & .slick-slide {\n    img {\n      overflow: hidden;\n    }\n  }\n  & .slick-current {\n    img {\n      border: 2px solid ", ";\n    }\n  }\n\n  .slick-track {\n    display: flex;\n  }\n"], ["\n  margin-top: 16px;\n  padding-left: 16px;\n  & .slick-slide {\n    img {\n      overflow: hidden;\n    }\n  }\n  & .slick-current {\n    img {\n      border: 2px solid ", ";\n    }\n  }\n\n  .slick-track {\n    display: flex;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.pallete.primary.color;
+});
+var StyledImage = newStyled(Image$3)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var paddingRight = _a.paddingRight;
+    return paddingRight || '12px';
+});
+var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  object-fit: cover;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n"], ["\n  object-fit: cover;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n"])), function (_a) {
+    var width = _a.width, theme = _a.theme;
+    return width || theme.component.gallery.thumbnail.mobile.width;
+}, function (_a) {
+    var height = _a.height, theme = _a.theme;
+    return height || theme.component.gallery.thumbnail.mobile.height;
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius || '0px';
+});
+var templateObject_1$5, templateObject_2$5, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10$1;
+
 var ProductGalleryMobileV4 = function (_a) {
-    var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId;
-    var _b = useTheme$1(), colors = _b.colors; _b.component;
-    var _c = useState(undefined), nav1 = _c[0], setNav1 = _c[1];
-    var _d = useState(undefined), nav2 = _d[0], setNav2 = _d[1];
+    var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings;
+    var colors = useTheme$1().colors;
+    var _b = useState(undefined), nav1 = _b[0], setNav1 = _b[1];
+    var _c = useState(undefined), nav2 = _c[0], setNav2 = _c[1];
     var slick = useRef(null);
     var thumbnailRef = useRef(null);
     var sliderWrapper = useRef(null);
@@ -20256,9 +20257,9 @@ var ProductGalleryMobileV4 = function (_a) {
     return (jsx$1(Container$4, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
                         var url = _a.url, key = _a.key, alt = _a.alt;
                         return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight }, void 0), jsx$1(TopTagContainer$2, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
-                    }) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, THUMBNAIL_SETTINGS, { lazyLoad: "progressive" }, { children: images.map(function (_a) {
+                    }) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
                         var url = _a.url, key = _a.key, alt = _a.alt;
-                        return (jsx$1(SlideItem, { children: jsx$1(ThumbnailImage, { alt: "".concat(alt, "-thumbnail"), src: url, objectFit: "cover", width: theme.component.gallery.thumbnail.mobile.width, height: theme.component.gallery.thumbnail.mobile.height }, void 0) }, key));
+                        return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig), void 0) }), key));
                     }) }), void 0)] }), void 0) }), void 0));
 };