@trafilea/afrodita-components 6.27.0 → 6.27.1

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.
Files changed (6) hide show
  1. package/build/index.d.ts +6 -1
  2. package/build/index.esm.js +57 -19
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +57 -19
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -154,6 +154,7 @@ declare type IconProps$1 = {
154
154
 
155
155
  declare const Icon$1: React__default.NamedExoticComponent<IconProps$1>;
156
156
 
157
+ declare type ImgAttributes = React.ImgHTMLAttributes<HTMLImageElement>;
157
158
  declare type ImageStyleProps = {
158
159
  height?: string;
159
160
  width?: string;
@@ -167,8 +168,9 @@ declare type ImageProps = ImageStyleProps & {
167
168
  alt: string;
168
169
  srcSet?: string;
169
170
  sizes?: string;
170
- loading?: 'lazy' | 'eager';
171
171
  quality?: number;
172
+ loading?: ImgAttributes['loading'];
173
+ decoding?: ImgAttributes['decoding'];
172
174
  };
173
175
  declare const Image: React.FC<ImageProps>;
174
176
 
@@ -2395,6 +2397,7 @@ interface ProductItemSmallMobileProps extends ProductItemProps {
2395
2397
  showDiscountPercentageTag?: boolean;
2396
2398
  discountTagLoading?: boolean;
2397
2399
  discountTag?: DiscountTagProps;
2400
+ isOnViewport?: boolean;
2398
2401
  }
2399
2402
 
2400
2403
  declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React__default.FC<P>, data: ProductItemProps[]): {
@@ -2751,6 +2754,7 @@ declare type ProductGalleryProps = {
2751
2754
  withZoom?: boolean;
2752
2755
  hasToPreserveOrder?: boolean;
2753
2756
  isRatioSquare?: boolean;
2757
+ itemsOnViewport?: number;
2754
2758
  };
2755
2759
  declare const ProductGallery: React.FC<ProductGalleryProps>;
2756
2760
 
@@ -2880,6 +2884,7 @@ interface ProductGalleryMobileProps$3 {
2880
2884
  borderRadiusVariant?: boolean;
2881
2885
  selectedValue?: ContentType;
2882
2886
  hasToPreserveOrder?: boolean;
2887
+ itemsOnViewport?: number;
2883
2888
  }
2884
2889
  declare const ProductGalleryMobile: React__default.FC<ProductGalleryMobileProps$3>;
2885
2890
 
package/build/index.esm.js CHANGED
@@ -3919,12 +3919,12 @@ var buildImageUrl = function (_a) {
3919
3919
 
3920
3920
  var Img = newStyled.img(templateObject_1$21 || (templateObject_1$21 = __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; });
3921
3921
  var Image$3 = function (_a) {
3922
- 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, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
3922
+ 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"]);
3923
3923
  var config = useTheme().config;
3924
3924
  var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
3925
3925
  ? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
3926
3926
  : src;
3927
- return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
3927
+ return (jsx$1(Img, __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));
3928
3928
  };
3929
3929
  var templateObject_1$21;
3930
3930
 
@@ -6718,7 +6718,7 @@ var ProductItemMobile = function (_a) {
6718
6718
  } : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
6719
6719
  strength: -1,
6720
6720
  description: '',
6721
- } : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag;
6721
+ } : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _m = _a.isOnViewport, isOnViewport = _m === void 0 ? false : _m;
6722
6722
  var theme = useTheme();
6723
6723
  var styles = getStylesBySize$c(size);
6724
6724
  var isMobile = useWindowDimensions().isMobile;
@@ -6757,7 +6757,7 @@ var ProductItemMobile = function (_a) {
6757
6757
  return jsx(Fragment, {}, void 0);
6758
6758
  return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
6759
6759
  };
6760
- return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __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$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { 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$3, { 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$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, 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)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
6760
+ return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __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$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { 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, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", 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$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, 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)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
6761
6761
  letterSpacing: '-0.05rem',
6762
6762
  } }), 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));
6763
6763
  };
@@ -11982,9 +11982,9 @@ var Image$1 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __make
11982
11982
  var templateObject_1$17;
11983
11983
 
11984
11984
  var ImageSmallPreview = function (_a) {
11985
- 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, isRatioSquare = _a.isRatioSquare;
11985
+ 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, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
11986
11986
  var theme = useTheme();
11987
- return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
11987
+ return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
11988
11988
  };
11989
11989
 
11990
11990
  var horizontalStyles = css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
@@ -12004,8 +12004,24 @@ var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject
12004
12004
  var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
12005
12005
  var templateObject_1$16, templateObject_2$P, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$h, templateObject_8$c;
12006
12006
 
12007
+ var getLoadingProp = function (index, itemsOnViewport) {
12008
+ var loading = 'eager';
12009
+ if (itemsOnViewport) {
12010
+ var shouldApply = index < itemsOnViewport;
12011
+ loading = shouldApply ? 'eager' : 'lazy';
12012
+ }
12013
+ return loading;
12014
+ };
12015
+ var getDecodingProp = function (index, itemsOnViewport) {
12016
+ var decoding = 'auto';
12017
+ if (itemsOnViewport) {
12018
+ var shouldApply = index < itemsOnViewport;
12019
+ decoding = shouldApply ? 'sync' : 'async';
12020
+ }
12021
+ return decoding;
12022
+ };
12007
12023
  var ImagePreviewList = function (_a) {
12008
- var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
12024
+ var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare, _b = _a.itemsOnViewport, itemsOnViewport = _b === void 0 ? 0 : _b;
12009
12025
  var handleScrollVerticalPrev = function () {
12010
12026
  var element = document.querySelector(".imageListContainer");
12011
12027
  element.scrollBy(0, -200);
@@ -12018,7 +12034,9 @@ var ImagePreviewList = function (_a) {
12018
12034
  arrowWidth: 0.75,
12019
12035
  arrowHeight: 1.25,
12020
12036
  arrowPadding: 1.625,
12021
- }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __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 }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsx$1(Button$6, __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 }, 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));
12037
+ }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __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) {
12038
+ return (jsx$1(Button$6, __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));
12039
+ })) }), 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));
12022
12040
  };
12023
12041
 
12024
12042
  var ProgressContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
@@ -13711,7 +13729,9 @@ var ImageProductSlide$1 = function (_a) {
13711
13729
  return (jsxs$1(Container$O, __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: {
13712
13730
  alt: content.alt,
13713
13731
  style: { objectFit: 'cover', objectPosition: 'center' },
13714
- }, 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", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, 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));
13732
+ loading: 'eager',
13733
+ decoding: 'sync',
13734
+ }, 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$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, 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));
13715
13735
  };
13716
13736
 
13717
13737
  var Container$N = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
@@ -13725,8 +13745,8 @@ var getInitialIndex = function (images, selectedValue) {
13725
13745
  return 0;
13726
13746
  };
13727
13747
  var ProductGallery = function (_a) {
13728
- var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? true : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e, _f = _a.hasToPreserveOrder, hasToPreserveOrder = _f === void 0 ? false : _f, isRatioSquare = _a.isRatioSquare;
13729
- var _g = useState(getInitialIndex(images, selectedValue)), activeIndex = _g[0], setActiveIndex = _g[1];
13748
+ var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? true : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e, _f = _a.hasToPreserveOrder, hasToPreserveOrder = _f === void 0 ? false : _f, isRatioSquare = _a.isRatioSquare, _g = _a.itemsOnViewport, itemsOnViewport = _g === void 0 ? 6 : _g;
13749
+ var _h = useState(getInitialIndex(images, selectedValue)), activeIndex = _h[0], setActiveIndex = _h[1];
13730
13750
  useEffect(function () {
13731
13751
  if (selectedValue && !hasToPreserveOrder) {
13732
13752
  var index = images.indexOf(selectedValue);
@@ -13741,7 +13761,7 @@ var ProductGallery = function (_a) {
13741
13761
  setActiveIndex(index);
13742
13762
  };
13743
13763
  var selectedImage = images[activeIndex];
13744
- return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, 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));
13764
+ return (jsxs$1(Container$N, { 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));
13745
13765
  };
13746
13766
 
13747
13767
  var getStylesBySize$8 = function (size) {
@@ -14145,12 +14165,24 @@ var settings$1 = {
14145
14165
  slidesToScroll: 1,
14146
14166
  initialSlide: 0,
14147
14167
  };
14168
+ var getImageAttributes = function (idx, itemsOnViewport, imgAttributes) {
14169
+ if (itemsOnViewport) {
14170
+ // add loading and decoding attributes if enabled
14171
+ // to speed up the loading of the images
14172
+ var shouldApply = idx < itemsOnViewport;
14173
+ var loading = shouldApply ? 'eager' : 'lazy';
14174
+ var decoding = shouldApply ? 'sync' : 'async';
14175
+ imgAttributes.loading = loading;
14176
+ imgAttributes.decoding = decoding;
14177
+ }
14178
+ return imgAttributes;
14179
+ };
14148
14180
  var ImageProductSlide = function (_a) {
14149
- var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue, onChange = _a.onChange;
14181
+ var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue, onChange = _a.onChange, _c = _a.itemsOnViewport, itemsOnViewport = _c === void 0 ? 0 : _c;
14150
14182
  var slick = useRef(null);
14151
14183
  var sliderWrapper = useRef(null);
14152
14184
  useRef(null);
14153
- var _c = useState(false); _c[0]; var setIsPlaying = _c[1];
14185
+ var _d = useState(false); _d[0]; var setIsPlaying = _d[1];
14154
14186
  usePreventVerticalScroll(sliderWrapper);
14155
14187
  var onButtonClick = useCallback(function (i) {
14156
14188
  var _a;
@@ -14188,21 +14220,27 @@ var ImageProductSlide = function (_a) {
14188
14220
  var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
14189
14221
  autoplay ? _playVideo() : _stopVideo();
14190
14222
  onChange === null || onChange === void 0 ? void 0 : onChange(e);
14191
- } }, settings$1, { nextArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
14223
+ } }, settings$1, { nextArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content, idx) {
14192
14224
  var _a;
14193
14225
  var source = content === null || content === void 0 ? void 0 : content.url;
14194
14226
  var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
14195
- return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
14227
+ // default imgAttributes
14228
+ var imgAttributes = {
14229
+ alt: content.alt,
14230
+ width: '100%',
14231
+ height: '510px',
14232
+ };
14233
+ return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
14196
14234
  }) }), void 0) }), void 0)] }, void 0));
14197
14235
  };
14198
14236
  var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$k, templateObject_6$i;
14199
14237
 
14200
14238
  var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
14201
14239
  var ProductGalleryMobile = function (_a) {
14202
- var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
14203
- var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
14240
+ var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
14241
+ var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
14204
14242
  var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
14205
- return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
14243
+ return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
14206
14244
  };
14207
14245
  var templateObject_1$T;
14208
14246