@trafilea/afrodita-components 5.0.0-beta.196 → 5.0.0-beta.197

package/build/index.js

@@ -12168,6 +12168,17 @@ var formatPrice = function (value, _a) {
     }).format(valueToFormat);
 };
 
+var getSrcSet = function (imgLink) {
+    var breakpoints = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        breakpoints[_i - 1] = arguments[_i];
+    }
+    return breakpoints
+        .reduce(function (prev, curr) { return "".concat(prev, " ").concat(imgLink, " ").concat(curr, "w,"); }, '')
+        .slice(0, -1)
+        .trimStart();
+};
+
 /* eslint-disable no-param-reassign */
 var index$1 = function (breakpoints) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -12670,8 +12681,8 @@ var templateObject_1$L, templateObject_2$v, templateObject_3$s, templateObject_4
 
 var Img = newStyled.img(templateObject_1$K || (templateObject_1$K = __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 = function (_a) {
-    var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
-    return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
+    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, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
+    return (jsxRuntime.jsx(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
 };
 var templateObject_1$K;
 
@@ -12901,7 +12912,7 @@ var ProductItemMobile = function (_a) {
         return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
     };
     var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
-    return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
+    return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
 };
 var templateObject_1$D, templateObject_2$q, templateObject_3$n, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5;
 
@@ -18529,6 +18540,7 @@ exports.Totals = Totals;
 exports.TrackingProgress = TrackingProgress;
 exports.decimalFormat = decimalFormat;
 exports.formatPrice = formatPrice;
+exports.getSrcSet = getSrcSet;
 exports.isEmail = isEmail;
 exports.isEmpty = isEmpty;
 exports.isNumber = isNumber$1;