@trafilea/afrodita-components 6.56.0 → 6.56.1

package/build/index.d.ts

@@ -3104,6 +3104,7 @@ interface FitPredictorProps {
 }
 declare const FitPredictor: ({ onClick }: FitPredictorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+declare type ThumbnailPosition = 'vertical' | 'horizontal';
 declare type ProductGalleryProps = {
     images: ContentType[];
     selectedValue?: ContentType;
@@ -3112,7 +3113,7 @@ declare type ProductGalleryProps = {
     bottomTag?: JSX.Element;
     productImageDataTestId?: string;
     previewListDataTestId?: string;
-    thumbnailPosition?: 'vertical' | 'horizontal';
+    thumbnailPosition?: ThumbnailPosition;
     borderRadiusVariant?: boolean;
     previewImgBorderColor?: string;
     ctaText?: string;

package/build/index.esm.js

@@ -12978,11 +12978,7 @@ var ImagePreviewList = function (_a) {
         var element = document.querySelector(".imageListContainer");
         element.scrollBy(0, 200);
     };
-    return (jsxs$1(Fragment$2, { children: [jsx$1(Container$_, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
-                            arrowWidth: 0.75,
-                            arrowHeight: 1.25,
-                            arrowPadding: 1.625,
-                        }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) {
+    return (jsxs$1(Fragment$2, { children: [jsx$1(Container$_, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, adaptiveHeight: true, dots: false, slidesToShow: 4.2 }, { children: images.map(function (item, index) { return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) {
                     return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key));
                 })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
 };
@@ -14578,9 +14574,12 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
   afterZoomOut: PropTypes.func
 } : {};
 
-var Container$Z = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n  ", "\n  z-index: 0;\n  position: relative;\n  height: fit-content;\n  /* &.styleforhorizontal {\n    height: 30rem;\n  } */\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n  width: 100%;\n  max-width: max-content;\n"], ["\n  ", "\n  z-index: 0;\n  position: relative;\n  height: fit-content;\n  /* &.styleforhorizontal {\n    height: 30rem;\n  } */\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n  width: 100%;\n  max-width: max-content;\n"])), function (_a) {
+var Container$Z = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n  ", "\n  z-index: 0;\n  position: relative;\n  height: fit-content;\n  /* &.styleforhorizontal {\n    height: 30rem;\n  } */\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: ", ";\n  width: 100%;\n  max-width: max-content;\n"], ["\n  ", "\n  z-index: 0;\n  position: relative;\n  height: fit-content;\n  /* &.styleforhorizontal {\n    height: 30rem;\n  } */\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: ", ";\n  width: 100%;\n  max-width: max-content;\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant;
     return borderRadiusVariant && "border-radius: 40px;";
+}, function (_a) {
+    var position = _a.position;
+    return (position === 'horizontal' ? 'unset' : '1/2');
 });
 var TopTagContainer$7 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
@@ -14611,7 +14610,7 @@ var ImageProductSlide$1 = function (_a) {
     var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
     var source = content === null || content === void 0 ? void 0 : content.url;
     var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
-    return (jsxs$1(Container$Z, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
+    return (jsxs$1(Container$Z, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant, position: position }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
                             alt: content.alt,
                             style: { objectFit: 'cover', objectPosition: 'center' },
                             loading: 'eager',
@@ -14619,7 +14618,10 @@ var ImageProductSlide$1 = function (_a) {
                         }, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagWrapper, { children: jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
 };
 
-var Container$Y = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: minmax(6rem, max-content) 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: 100%;\n"], ["\n  display: grid;\n  grid-template-columns: minmax(6rem, max-content) 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: 100%;\n"])));
+var Container$Y = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ", ";\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: 100%;\n"], ["\n  display: grid;\n  grid-template-columns: ", ";\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: 100%;\n"])), function (_a) {
+    var thumbnailPosition = _a.thumbnailPosition;
+    return thumbnailPosition === 'horizontal' ? '1fr' : 'minmax(6rem, max-content) 1fr';
+});
 var templateObject_1$1j;
 
 var getInitialIndex = function (images, selectedValue) {
@@ -14646,7 +14648,7 @@ var ProductGallery = function (_a) {
         setActiveIndex(index);
     };
     var selectedImage = images[activeIndex];
-    return (jsxs$1(Container$Y, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
+    return (jsxs$1(Container$Y, __assign$1({ thumbnailPosition: thumbnailPosition }, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }), void 0));
 };
 
 var StyledButton$3 = newStyled(BaseButton)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });