@trafilea/afrodita-components 5.0.0-beta.225 → 5.0.0-beta.226

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.js CHANGED
@@ -5588,15 +5588,12 @@ var formatPrice = function (value, _a) {
5588
5588
  }).format(valueToFormat);
5589
5589
  };
5590
5590
 
5591
- var getSrcSet = function (imgLink) {
5592
- var breakpoints = [];
5593
- for (var _i = 1; _i < arguments.length; _i++) {
5594
- breakpoints[_i - 1] = arguments[_i];
5595
- }
5596
- return breakpoints
5597
- .reduce(function (prev, curr) { return "".concat(prev, " ").concat(imgLink, " ").concat(curr, "w,"); }, '')
5598
- .slice(0, -1)
5599
- .trimStart();
5591
+ var DEFAULT_SHOGUN_RESOLUTIONS = [180, 360, 720, 900, 1080, 1200, 1920, 2048];
5592
+ var getSrcSet = function (imgLink, widthUnits) {
5593
+ if (widthUnits === void 0) { widthUnits = DEFAULT_SHOGUN_RESOLUTIONS; }
5594
+ return Array.isArray(widthUnits)
5595
+ ? widthUnits.reduce(function (prev, curr) { return "".concat(prev).concat(imgLink, " ").concat(curr, "w,"); }, '').slice(0, -1)
5596
+ : DEFAULT_SHOGUN_RESOLUTIONS.reduce(function (prev, curr) { return "".concat(prev).concat(imgLink, " ").concat(curr, "w,"); }, '').slice(0, -1);
5600
5597
  };
5601
5598
 
5602
5599
  /* eslint-disable no-param-reassign */
@@ -5694,9 +5691,9 @@ var Image$2 = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __make
5694
5691
  : 'inherit';
5695
5692
  });
5696
5693
  var ImageSmallPreview = function (_a) {
5697
- var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
5694
+ var imageUrl = _a.imageUrl, _b = _a.imageSizes, imageSizes = _b === void 0 ? '65w' : _b, alt = _a.alt, _c = _a.selected, selected = _c === void 0 ? false : _c, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
5698
5695
  var theme = useTheme();
5699
- return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
5696
+ return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, [180, 360, 720]), sizes: imageSizes, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
5700
5697
  };
5701
5698
  var templateObject_1$1h;
5702
5699
 
@@ -13155,6 +13152,9 @@ var BottomTagContainer$2 = newStyled.div(templateObject_6$7 || (templateObject_6
13155
13152
  return style.width;
13156
13153
  });
13157
13154
  var MarginTopContainer = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
13155
+ var DEFAULT_SIZES = '(min-width: 1201px) 262w, (max-width: 1200px) and (min-width: 481px) 205w, (max-width: 480px) 45vw';
13156
+ var DEFAULT_WIDTH_PROD_IMG = '205px';
13157
+ var DEFAULT_HEIGHT_PROD_IMG = '274px';
13158
13158
  var ProductItemMobile = function (_a) {
13159
13159
  var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.colorPicker, colorPicker = _d === void 0 ? {
13160
13160
  display: false,
@@ -13183,7 +13183,7 @@ var ProductItemMobile = function (_a) {
13183
13183
  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));
13184
13184
  };
13185
13185
  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)); };
13186
- 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)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), showBNPL && (jsx(BuyNowPayLater, { installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0))] }, 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));
13186
+ 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, 900, 1080]), alt: image.alt, width: image.width || DEFAULT_WIDTH_PROD_IMG, height: image.height || DEFAULT_HEIGHT_PROD_IMG, sizes: image.sizes || DEFAULT_SIZES }, 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, 900, 1080]), alt: image.alt, width: (styles === null || styles === void 0 ? void 0 : styles.width) || DEFAULT_WIDTH_PROD_IMG, height: (styles === null || styles === void 0 ? void 0 : styles.height) || DEFAULT_HEIGHT_PROD_IMG, sizes: image.sizes || DEFAULT_SIZES }, void 0)), !!imageHover && (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, [180, 360, 720, 900, 1080]), loading: "lazy", alt: imageHover.alt, sizes: imageHover.sizes || DEFAULT_SIZES, width: (styles === null || styles === void 0 ? void 0 : styles.width) || DEFAULT_WIDTH_PROD_IMG, height: (styles === null || styles === void 0 ? void 0 : styles.height) || DEFAULT_HEIGHT_PROD_IMG }, void 0))] }), 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)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), showBNPL && (jsx(BuyNowPayLater, { installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0))] }, 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));
13187
13187
  };
13188
13188
  var templateObject_1$E, templateObject_2$q, templateObject_3$n, templateObject_4$e, templateObject_5$8, templateObject_6$7, templateObject_7$5;
13189
13189