@trafilea/afrodita-components 6.56.0 → 6.56.2

package/build/index.d.ts

@@ -216,6 +216,7 @@ declare type ImageProps = ImageStyleProps & {
     quality?: number;
     loading?: ImgAttributes['loading'];
     decoding?: ImgAttributes['decoding'];
+    fallbackImg?: string;
 };
 declare const Image: React.FC<ImageProps>;
 
@@ -3104,6 +3105,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 +3114,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

@@ -3974,12 +3974,25 @@ var buildImageUrl = function (_a) {
 
 var Img$1 = newStyled.img(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
 var Image$3 = function (_a) {
-    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
-    var config = useTheme().config;
+    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, fallbackImg = _a.fallbackImg, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality", "fallbackImg"]);
+    var _e = useTheme(), config = _e.config, assets = _e.assets;
+    var _f = useState(0), errorStage = _f[0], setErrorStage = _f[1];
     var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
         ? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
         : src;
-    return (jsx$1(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
+    var handleError = function (e) {
+        var fallbackCdn = "".concat(assets.cdn, "/images/fallback_img.svg");
+        var imgElement = e.target;
+        if (errorStage === 0 && fallbackImg) {
+            imgElement.src = fallbackImg;
+            setErrorStage(1);
+        }
+        else if (errorStage <= 1) {
+            imgElement.src = fallbackCdn;
+            setErrorStage(2);
+        }
+    };
+    return (jsx$1(Img$1, __assign$1({ onError: handleError, src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
 };
 var templateObject_1$2u;
 
@@ -12978,11 +12991,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 +14587,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 +14623,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 +14631,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 +14661,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; });