@gem-sdk/components 3.0.19 → 3.0.21

package/dist/cjs/hero-banner/components/HeroBannerItem.liquid.js

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var Row_liquid=require("../../grid/components/row/Row.liquid.js"),core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),AdaptiveImage_liquid=require("../../image/components/AdaptiveImage.liquid.js"),HTML5Embed_liquid=require("../../video/components/HTML5Embed.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),helpers$1=require("../../image/common/helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),LiteYouTubeEmbed_liquid=require("../../video/components/LiteYouTubeEmbed.liquid.js"),helpers$3=require("../../video/common/helpers.js"),helpers$2=require("../../grid/components/row/common/helpers.js");const HeroBannerItem=e=>{let{enableLazyLoadImage:s=!0,setting:t,styles:l,children:a,builderProps:r,rawChildren:i}=e,{layout:o,verticalAlign:d,enableParallax:m,alt:c,title:u,preload:y}=t??{},{background:n,overlayColor:p,verticalGutter:g,sizeSetting:b,contentWidth:C,hoverEffect:h,contentPosition1Col:v,contentPosition2Col:q}=l??{},S=!y&&s,I=helpers.getAspectRatioSettings(t?.ratioOptions,t?.aspectRatio),f=helpers.getResponsiveSetting(n||{}).desktop,$=system.createStyle({...styles.getContainerStyle(l,t)}),k=system.createClass({...classes.getContainerClasses(t,l)}),B=system.createStyle({...styles.getOverlayStyle(l)}),j=system.createClass({...classes.getOverlayClasses(l)}),R=system.createStyle({...styles.getRowStyle(l)}),w=system.createClass({...classes.getRowClasses(l,t)}),_=system.createStyle({...styles.getAdaptiveStyle(l)}),A=system.createClass({...classes.getAdaptivePictureClasses()}),H=system.createClass({...classes.getAdaptiveClasses()}),L=system.createClass({...classes.getBackgroundClasses(h,S)}),V=system.createStyle({...helpers.getBackgroundImageHeroBanner(n,S,!1),...styles.getBackgroundStyle(l,m,"")}),E=system.createClass({...classes.getContainBackgroundClasses()}),N=system.createStyle({...styles.getContainBackgroundStyle(l)}),T=system.createClass({...classes.getHtml5VideoClasses(t?.aspectRatio,!1)}),z=system.createStyle({...styles.getYoutubeIframeStyle(I)}),Y=system.createClass({...classes.getWrapperYoutubeClasses()}),x=system.createStyle({...styles.getHtml5VideoStyle(I)}),O=system.createClass({...classes.getIframeYoutubeClasses()}),M=e=>system.createClass({...classes.getLazyBackgroundClasses(e)}),D=()=>{if(!(n?.desktop?.preload||n?.tablet?.preload||n?.mobile?.preload))return core.DEVICES.map(e=>system.If(helpers.getEnableBgImageByDevice(e,n),NextImage_liquid.default({src:helpers$1.getImageSrc(core.getResponsiveValueByScreen(helpers.getBgImage(n),e),e),alt:c,title:u,className:M(e),isDisableAspectStyle:!0,enableLazyLoadImage:s}))).join("")},W=()=>{if(!helpers.showVideoType(n))return;if(helpers$2.isRenderHtmlVideo(n))return HTML5Embed_liquid.default({uid:r?.uid,muted:!0,loop:f?.loop,controls:!1,autoplay:!0,src:f?.videoHtml5||"",title:"Video",style:x,className:T});let e=f?.video??"",s=helpers$3.getYoutubeVideoId(e),t=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(f?.type==="video"&&f?.videoType==="youtube"&&s&&helpers$3.youtubeVideoRegex.test(e))return LiteYouTubeEmbed_liquid.default({uid:r?.uid,id:s,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:f?.lazyLoad??!0,preload:!0,style:z,wrapperClass:Y,iframeClass:O})};return core.template`
-  <div class="${k}" style="${$}">
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var Row_liquid=require("../../grid/components/row/Row.liquid.js"),core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),AdaptiveImage_liquid=require("../../image/components/AdaptiveImage.liquid.js"),HTML5Embed_liquid=require("../../video/components/HTML5Embed.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),helpers$1=require("../../image/common/helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),LiteYouTubeEmbed_liquid=require("../../video/components/LiteYouTubeEmbed.liquid.js"),helpers$3=require("../../video/common/helpers.js"),helpers$2=require("../../grid/components/row/common/helpers.js"),constants=require("../../image/constants.js");const HeroBannerItem=e=>{let{enableLazyLoadImage:s=!0,setting:t,styles:l,children:a,builderProps:r,rawChildren:i}=e,{layout:o,verticalAlign:c,enableParallax:m,alt:d,title:u,preload:n}=t??{},{background:y,overlayColor:g,verticalGutter:p,sizeSetting:C,contentWidth:h,hoverEffect:q,contentPosition1Col:v,contentPosition2Col:b}=l??{},S=!n&&s,I=helpers.getAspectRatioSettings(t?.ratioOptions,t?.aspectRatio),f=helpers.getResponsiveSetting(y||{}).desktop,$=system.createStyle({...styles.getContainerStyle(l,t)}),R=system.createClass({...classes.getContainerClasses(t,l)}),B=system.createStyle({...styles.getOverlayStyle(l)}),j=system.createClass({...classes.getOverlayClasses(l)}),k=system.createStyle({...styles.getRowStyle(l)}),_=system.createClass({...classes.getRowClasses(l,t)}),A=system.createStyle({...styles.getAdaptiveStyle(l)}),w=system.createClass({...classes.getAdaptivePictureClasses()}),H=system.createClass({...classes.getAdaptiveClasses()}),T=system.createClass({...classes.getBackgroundClasses(q,S)}),V=system.createStyle({...helpers.getBackgroundImageHeroBanner(y,S,!1),...styles.getBackgroundStyle(l,m,"")}),E=system.createClass({...classes.getContainBackgroundClasses()}),L=system.createStyle({...styles.getContainBackgroundStyle(l)}),N=system.createClass({...classes.getHtml5VideoClasses(t?.aspectRatio,!1)}),Y=system.createStyle({...styles.getYoutubeIframeStyle(I)}),O=system.createClass({...classes.getWrapperYoutubeClasses()}),x=system.createStyle({...styles.getHtml5VideoStyle(I)}),z=system.createClass({...classes.getIframeYoutubeClasses()}),D=e=>system.createClass({...classes.getLazyBackgroundClasses(e)}),M=()=>{if(!n)return core.DEVICES.map(e=>system.If(helpers.getEnableBgImageByDevice(e,y),NextImage_liquid.default({src:helpers$1.getImageSrc(core.getResponsiveValueByScreen(helpers.getBgImage(y),e),e),alt:d,title:u,className:D(e),isDisableAspectStyle:!0,enableLazyLoadImage:s}))).join("")},P=()=>{if(!helpers.showVideoType(y))return;if(helpers$2.isRenderHtmlVideo(y))return HTML5Embed_liquid.default({uid:r?.uid,muted:!0,loop:f?.loop,controls:!1,autoplay:!0,src:f?.videoHtml5||"",title:"Video",style:x,className:N});let e=f?.video??"",s=helpers$3.getYoutubeVideoId(e),t=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(f?.type==="video"&&f?.videoType==="youtube"&&s&&helpers$3.youtubeVideoRegex.test(e))return LiteYouTubeEmbed_liquid.default({uid:r?.uid,id:s,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:f?.lazyLoad??!0,preload:!0,style:Y,wrapperClass:O,iframeClass:z})};return core.template`
+  <div class="${R}" style="${$}">
       <div
         aria-label="Background Image"
         role="banner"
         class="${E}"
-        style="${N}"
+        style="${L}"
       >
-        <div class="${L}" style="${V}">
-          ${D()}
-          ${W()}
+        <div class="${T}" style="${V}">
+          ${M()}
+          ${P()}
         </div>
-        ${system.If(!!p,core.template`<div aria-label="Overlay" role="banner" class="${j}" style="${B}"> </div>`)}
+        ${system.If(!!g,core.template`<div aria-label="Overlay" role="banner" class="${j}" style="${B}"> </div>`)}
       </div>
-      ${Row_liquid.default({className:w,style:R,setting:{layout:o,horizontalAlign:helpers.horizontalAlign(o,v,q),verticalAlign:d},styles:{verticalGutter:g,width:helpers.getWidth(C),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:a,rawChildren:i})}
-        ${AdaptiveImage_liquid.default({pictureClass:A,srcSet:helpers.getBgImage(n),className:H,aspectRatio:core.getAspectRatioGlobalSize(b),style:_,alt:c,title:u,enableLazyLoadImage:S,fallbackImg:helpers.fallbackImg})}
+      ${Row_liquid.default({className:_,style:k,setting:{layout:o,horizontalAlign:helpers.horizontalAlign(o,v,b),verticalAlign:c},styles:{verticalGutter:p,width:helpers.getWidth(h),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:a,rawChildren:i})}
+        ${AdaptiveImage_liquid.default({pictureClass:w,srcSet:helpers.getBgImage(y),className:H,...n&&constants.PRIORITY_LOAD_ATTRS,aspectRatio:core.getAspectRatioGlobalSize(C),style:A,alt:d,title:u,enableLazyLoadImage:s,fallbackImg:helpers.fallbackImg})}
   </div>
 `};exports.default=HeroBannerItem;

package/dist/cjs/image/common/attrs.js

@@ -1 +1 @@
-"use strict";var constant=require("../../constant.js"),helpers=require("./helpers.js"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js");const getContainerAttrs=(e,t)=>({...e,...t&&{"data-id":t}}),getLinkWrapperAttrs=({urlData:e,imageLink:t,title:r,isLiquid:s=!1})=>{let a=s?{...e,...t?.noFollow&&{rel:"nofollow"},title:r}:{setting:e,title:r};return t?.type!=="go-to-sales-page"?t?.link?a:{}:s?{href:constant.HREF_TO_SALES_PAGE,target:"_self"}:{setting:{href:constant.HREF_TO_SALES_PAGE,target:"_self"}}},getImageLiquidAttrs=({pageContext:e,enableLazyLoadImage:t=!1})=>({...e&&{pageContext:e},...t&&{enableLazyLoadImage:t}}),getAdaptiveImageAttrs=({styles:e,setting:t,mode:r,isLiquid:s})=>{let{alt:a,srcSet:i,priority:g,qualityPercent:l,qualityType:p}=t??{},o=helpers.getAspectRatio({styles:e,setting:t}),n=()=>{helpers$1.handleClickLink(t?.imageLink,r)},c={loading:"eager",fetchpriority:"high",priority:g},A=i?.desktop?.backupFileKey?helpers.getNewBackupFileKey(i?.desktop?.backupFileKey??"",i?.desktop?.src??""):"",u=s?helpers.getImageSrc({src:i?.desktop?.src,backupFileKey:A,backupFilePath:i?.desktop?.backupFilePath,storage:i?.desktop?.storage}):i?.desktop?.src??"",h=g?{}:{"base-src":u??"","quality-type":helpers.safeStringify(p),"quality-percent":helpers.safeStringify(l)};return{pictureClass:"gp-contents",...a&&{alt:a},...i&&{srcSet:i},...g&&c,...h,...e?.objectFit&&{layout:e.objectFit},onClick:n,aspectRatio:o}},getNextImageAttrs=({styles:e,setting:t})=>{let{objectFit:r}=e??{},{vw:s,alt:a,title:i,quality:g,priority:l,isNotLazyload:p,qualityType:o,qualityPercent:n}=t??{},c=helpers.getAspectRatio({styles:e,setting:t});return{...t?.image,...s&&{vw:s},...a&&{alt:a},...i&&{title:i},...g&&{quality:g},...l&&{priority:l},isNotLazyload:p,setting:{aspectRatio:c,layout:r,qualityType:o,qualityPercent:n}}},getNextImageLiquidAttrs=e=>{let{srcset:t,setting:r,storage:s,baseSrc:a,priority:i,customAttrs:g,width:l=2237,height:p=1678,isNotLazyload:o,backupFileKey:n,backupFilePath:c,srcIsLiquidCode:A,enableLazyLoadImage:u,alt:h,title:E,src:I=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SRC,sizes:y=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SIZES}=e,d=!o&&u&&!i,_=()=>{let e=n?helpers.getNewBackupFileKey(n??"",I):"",r=A?a:helpers.getImageSrc({src:I,backupFileKey:e,backupFilePath:c,storage:s}),g=A?I:helpers.getSrcSet(e??"",s??"THEME",I),l={sizes:"100vw",src:helpers.IMAGE_PLACEHOLDER,...r&&!i?{"base-src":r}:{},...r?{"data-src":r}:{},...g?{"data-srcset":g}:{}},p={sizes:y,src:r??"",isNotLazyload:"true",srcset:t??"",...r&&!i?{"base-src":r}:{},...i?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",...d?l:p}},L=()=>{let{qualityPercent:e,qualityType:t}=r??{},s=!i&&t&&e?{"quality-type":helpers.safeStringify(t),"quality-percent":helpers.safeStringify(e)}:{"quality-type":"","quality-percent":""};return{...h&&{alt:h},...E&&{title:E},width:l,height:p,draggable:"false",...s}};return system.createAttr({...g,...L(),..._()})},getNextImageReactAttrs=e=>{let{width:t=helpers.NEXT_IMAGE_CONFIG.DEFAULT_WIDTH_PROPS,height:r=helpers.NEXT_IMAGE_CONFIG.DEFAULT_HEIGHT_PROPS,quality:s,priority:a,isNotLazyload:i,enableLazyLoadImage:g,base64:l=helpers.IMAGE_PLACEHOLDER,alt:p=helpers.NEXT_IMAGE_CONFIG.DEFAULT_ALT,src:o=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SRC}=e,n=!i&&g&&!a,c=()=>{let e={loading:"lazy",placeholder:"blur",...l&&{blurDataURL:l}},t={loading:"eager",fetchpriority:"high"};return{...n?e:t}},A=()=>({src:o,alt:p,width:t,height:r,quality:s}),u=A(),h=system.createAttr(c());return{...u,...h}};exports.getAdaptiveImageAttrs=getAdaptiveImageAttrs,exports.getContainerAttrs=getContainerAttrs,exports.getImageLiquidAttrs=getImageLiquidAttrs,exports.getLinkWrapperAttrs=getLinkWrapperAttrs,exports.getNextImageAttrs=getNextImageAttrs,exports.getNextImageLiquidAttrs=getNextImageLiquidAttrs,exports.getNextImageReactAttrs=getNextImageReactAttrs;
+"use strict";var constant=require("../../constant.js"),helpers=require("./helpers.js"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),constants=require("../constants.js");const getContainerAttrs=(e,t)=>({...e,...t&&{"data-id":t}}),getLinkWrapperAttrs=({urlData:e,imageLink:t,title:r,isLiquid:s=!1})=>{let a=s?{...e,...t?.noFollow&&{rel:"nofollow"},title:r}:{setting:e,title:r};return t?.type!=="go-to-sales-page"?t?.link?a:{}:s?{href:constant.HREF_TO_SALES_PAGE,target:"_self"}:{setting:{href:constant.HREF_TO_SALES_PAGE,target:"_self"}}},getImageLiquidAttrs=({pageContext:e,enableLazyLoadImage:t=!1})=>({...e&&{pageContext:e},...t&&{enableLazyLoadImage:t}}),getAdaptiveImageAttrs=({styles:e,setting:t,mode:r,isLiquid:s})=>{let{alt:a,srcSet:i,priority:l,qualityPercent:g,qualityType:p}=t??{},n=helpers.getAspectRatio({styles:e,setting:t}),o=()=>{helpers$1.handleClickLink(t?.imageLink,r)},c=i?.desktop?.backupFileKey?helpers.getNewBackupFileKey(i?.desktop?.backupFileKey??"",i?.desktop?.src??""):"",A=s?helpers.getImageSrc({src:i?.desktop?.src,backupFileKey:c,backupFilePath:i?.desktop?.backupFilePath,storage:i?.desktop?.storage}):i?.desktop?.src??"",u=l?{}:{"base-src":A??"","quality-type":helpers.safeStringify(p),"quality-percent":helpers.safeStringify(g)};return{pictureClass:"gp-contents",...a&&{alt:a},...i&&{srcSet:i},...l&&constants.PRIORITY_LOAD_ATTRS,...u,...e?.objectFit&&{layout:e.objectFit},onClick:o,aspectRatio:n}},getNextImageAttrs=({styles:e,setting:t})=>{let{objectFit:r}=e??{},{vw:s,alt:a,title:i,quality:l,priority:g,isNotLazyload:p,qualityType:n,qualityPercent:o}=t??{},c=helpers.getAspectRatio({styles:e,setting:t});return{...t?.image,...s&&{vw:s},...a&&{alt:a},...i&&{title:i},...l&&{quality:l},...g&&{priority:g},isNotLazyload:p,setting:{aspectRatio:c,layout:r,qualityType:n,qualityPercent:o}}},getNextImageLiquidAttrs=e=>{let{srcset:t,setting:r,storage:s,baseSrc:a,priority:i,customAttrs:l,width:g=2237,height:p=1678,isNotLazyload:n,backupFileKey:o,backupFilePath:c,srcIsLiquidCode:A,enableLazyLoadImage:u,alt:h,title:I,src:y=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SRC,sizes:E=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SIZES}=e,_=!n&&u&&!i,d=()=>{let e=o?helpers.getNewBackupFileKey(o??"",y):"",r=A?a:helpers.getImageSrc({src:y,backupFileKey:e,backupFilePath:c,storage:s}),l=A?y:helpers.getSrcSet(e??"",s??"THEME",y),n={sizes:"100vw",src:helpers.createBlurDataURL(g,p),...r&&!i?{"base-src":r}:{},...r?{"data-src":r}:{},...l?{"data-srcset":l}:{}},u={sizes:E,src:r??"",isNotLazyload:"true",srcset:t??"",...r&&!i?{"base-src":r}:{},...i?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",..._?n:u}},L=()=>{let{qualityPercent:e,qualityType:t}=r??{},s=!i&&t&&e?{"quality-type":helpers.safeStringify(t),"quality-percent":helpers.safeStringify(e)}:{"quality-type":"","quality-percent":""};return{...h&&{alt:h},...I&&{title:I},width:g,height:p,draggable:"false",...s}};return system.createAttr({...l,...L(),...d()})},getNextImageReactAttrs=e=>{let{width:t=helpers.NEXT_IMAGE_CONFIG.DEFAULT_WIDTH_PROPS,height:r=helpers.NEXT_IMAGE_CONFIG.DEFAULT_HEIGHT_PROPS,quality:s,priority:a,isNotLazyload:i,enableLazyLoadImage:l,base64:g=helpers.IMAGE_PLACEHOLDER,alt:p=helpers.NEXT_IMAGE_CONFIG.DEFAULT_ALT,src:n=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SRC}=e,o=!i&&l&&!a,c=()=>{let e={loading:"lazy",placeholder:"blur",...g&&{blurDataURL:g}},t={loading:"eager",fetchpriority:"high"};return{...o?e:t}},A=()=>({src:n,alt:p,width:t,height:r,quality:s}),u=A(),h=system.createAttr(c());return{...u,...h}};exports.getAdaptiveImageAttrs=getAdaptiveImageAttrs,exports.getContainerAttrs=getContainerAttrs,exports.getImageLiquidAttrs=getImageLiquidAttrs,exports.getLinkWrapperAttrs=getLinkWrapperAttrs,exports.getNextImageAttrs=getNextImageAttrs,exports.getNextImageLiquidAttrs=getNextImageLiquidAttrs,exports.getNextImageReactAttrs=getNextImageReactAttrs;

package/dist/cjs/image/constants.js

@@ -0,0 +1 @@
+"use strict";const PRIORITY_LOAD_ATTRS={loading:"eager",fetchpriority:"high",priority:!0};exports.PRIORITY_LOAD_ATTRS=PRIORITY_LOAD_ATTRS;

package/dist/cjs/product/components/product-images-v2/ProductImagesV2.liquid.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),common=require("./common/common.js"),FeatureImageWithGallery_liquid=require("./components/feature-gallery/FeatureImageWithGallery.liquid.js"),GalleryCarousel_liquid=require("./components/gallery-carousel/GalleryCarousel.liquid.js"),GalleryGrid_liquid=require("./components/gallery-grid/GalleryGrid.liquid.js"),helpers=require("../../../helpers.js"),productGallery=require("./common/productGallery.js"),getProductImagesClassName=require("./composables/getProductImagesClassName.js"),getProductImagesStyles=require("./composables/getProductImagesStyles.js"),system=require("@gem-sdk/system"),getBorderActiveCss=require("./common/getBorderActiveCss.js"),_function=require("../../helpers/function.js");const ProductImages=e=>{let t=common.setDefaultWhenUndefineSetting(e),{setting:s,styles:r,builderProps:a,style:i}=t,{rawChildren:o,pageContext:l}=e,{enableLazyLoadImage:d}=l??{},u={...s,...r},c=`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),common=require("./common/common.js"),FeatureImageWithGallery_liquid=require("./components/feature-gallery/FeatureImageWithGallery.liquid.js"),GalleryCarousel_liquid=require("./components/gallery-carousel/GalleryCarousel.liquid.js"),GalleryGrid_liquid=require("./components/gallery-grid/GalleryGrid.liquid.js"),helpers=require("../../../helpers.js"),productGallery=require("./common/productGallery.js"),getProductImagesClassName=require("./composables/getProductImagesClassName.js"),getProductImagesStyles=require("./composables/getProductImagesStyles.js"),system=require("@gem-sdk/system"),getBorderActiveCss=require("./common/getBorderActiveCss.js"),_function=require("../../helpers/function.js");const ProductImages=e=>{let t=common.setDefaultWhenUndefineSetting(e),{setting:s,styles:r,builderProps:i,style:a}=t,{rawChildren:o,pageContext:l}=e,{enableLazyLoadImage:d}=l??{},u={...s,...r},c=`
     {
-      "id":${JSON.stringify(a?.uid)},
+      "id":${JSON.stringify(i?.uid)},
       "pageContext": ${JSON.stringify(l)},
       "setting":${JSON.stringify(s)},
       "styles":${JSON.stringify(r)},
@@ -9,19 +9,19 @@
       "collectionUrl": {{ collection.url | json | escape }},
       "collection": {{ collection | json | escape}}
     }
-  `,p=system.createAttr({"section-id":"{{section.id}}","data-id":`${a?.uid}`}),n=system.createAttr({"data-only-image":system.LiquidIf("product.media.size > 1","false","true")}),{wrapperClasses:g,productImagesGalleryClasses:m}=getProductImagesClassName.getProductImagesClassName(e),y=system.createClass({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),f=system.createClass({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:I,wrapContainerStyleOnlyOneImage:$,galleryImageStyle:h}=getProductImagesStyles.getProductImagesStyles(u),{isOnlyFeatureAllDevices:S}=common.getConditionRenderGalleryImages(u?.position),q=productGallery.getShapeByLayout({shape:u.shape,shapeForBottom:u.shapeForBottom,shapeFor1Col:u.shapeFor1Col,shapeFor2Col:u.shapeFor2Col,shapeForFtOnly:u.shapeForFtOnly,shapeForInsideBottom:u.shapeForInsideBottom??productGallery.sizeSettingDefaultForNewLayout,shapeForInside:u.shapeForInside??productGallery.sizeSettingDefaultForNewLayout},u.position),C=common.getStyleInsideLayout(u.position,q,u?.spacing),G=()=>core.template`
-      ${core.WrapRenderChildren({uid:a?.uid||"",customProps:o?.[0].customProps},o?.map(e=>{if(e)return core.template`${core.RenderChildren({...e,isInsideProductImage:!0,imageData:{imageShape:r?.ftShape,imageAlign:r?.align,imageLayout:r?.position},dotData:{dotSize:s?.ftDotSize,dotGapToCarousel:s?.ftDotGapToCarousel,dotStyle:s?.ftDotStyle}})}`}))}
-    `,v=()=>core.template`
+  `,p=system.createAttr({"section-id":"{{section.id}}","data-id":`${i?.uid}`}),{isOnlyFeatureAllDevices:m,isRenderGalleryGrid:n}=common.getConditionRenderGalleryImages(u?.position),g=n?{}:system.createAttr({"data-only-image":system.LiquidIf("product.media.size > 1","false","true")}),{wrapperClasses:y,productImagesGalleryClasses:f}=getProductImagesClassName.getProductImagesClassName(e),I=system.createClass({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),$=system.createClass({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:h,wrapContainerStyleOnlyOneImage:S,galleryImageStyle:q}=getProductImagesStyles.getProductImagesStyles(u),C=productGallery.getShapeByLayout({shape:u.shape,shapeForBottom:u.shapeForBottom,shapeFor1Col:u.shapeFor1Col,shapeFor2Col:u.shapeFor2Col,shapeForFtOnly:u.shapeForFtOnly,shapeForInsideBottom:u.shapeForInsideBottom??productGallery.sizeSettingDefaultForNewLayout,shapeForInside:u.shapeForInside??productGallery.sizeSettingDefaultForNewLayout},u.position),G=common.getStyleInsideLayout(u.position,C,u?.spacing),v=()=>core.template`
+      ${core.WrapRenderChildren({uid:i?.uid||"",customProps:o?.[0].customProps},o?.map(e=>{if(e)return core.template`${core.RenderChildren({...e,isInsideProductImage:!0,imageData:{imageShape:r?.ftShape,imageAlign:r?.align,imageLayout:r?.position},dotData:{dotSize:s?.ftDotSize,dotGapToCarousel:s?.ftDotGapToCarousel,dotStyle:s?.ftDotStyle}})}`}))}
+    `,j=()=>core.template`
       <div
-        class="${m}"
-        style="${_function.getStyleOfObject(h)}"
-        ${{...n}}
+        class="${f}"
+        style="${_function.getStyleOfObject(q)}"
+        ${{...g}}
       >
-        ${GalleryCarousel_liquid.default({builderPropUID:`gp-gallery-${a?.uid}`,...u,enableLazyLoadImage:d})}
-        ${GalleryGrid_liquid.default({builderPropUID:a?.uid,wrapperStyle:{...C},children:G(),...u,enableLazyLoadImage:d})}
+        ${system.LiquidIf("product.media.size > 1",GalleryCarousel_liquid.default({builderPropUID:`gp-gallery-${i?.uid}`,...u,enableLazyLoadImage:d}))}
+        ${system.If(n,GalleryGrid_liquid.default({builderPropUID:i?.uid,wrapperStyle:{...G},children:v(),...u,enableLazyLoadImage:d}))}
       </div>
-    `,j=()=>s?.borderActive?.border!=="none";return core.template`
-  ${system.If(j(),`<style>${getBorderActiveCss.getBorderActiveCss({settings:u,uid:a?.uid,type:"Liquid"})}</style>`)}
+    `,P=()=>s?.borderActive?.border!=="none";return core.template`
+  ${system.If(P(),system.LiquidIf("product.media.size > 1",`<style>${getBorderActiveCss.getBorderActiveCss({settings:u,uid:i?.uid,type:"Liquid"})}</style>`),"")}
   ${system.Liquid(`
     {% assign featured_image = product.featured_image %}
     ${system.LiquidIf("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
@@ -29,15 +29,15 @@
     <gp-product-images
       gp-data='${c}'
       ${{...p}}
-      style="${{...i}}"
-      class="${g}"
+      style="${{...a}}"
+      class="${y}"
     >
       <div
-        class="${system.LiquidIf("product.media.size > 1",`${y}`,`${f}`)}"
-        style="${system.LiquidIf("product.media.size > 1",_function.getStyleOfObject(I),_function.getStyleOfObject($))}"
+        class="${system.LiquidIf("product.media.size > 1",`${I}`,`${$}`)}"
+        style="${system.LiquidIf("product.media.size > 1",_function.getStyleOfObject(h),_function.getStyleOfObject(S))}"
       >
-        ${FeatureImageWithGallery_liquid.default({builderPropUID:`gp-carousel-${a?.uid}`,...u,children:G(),enableLazyLoadImage:d})}
-        ${system.If(!S,system.LiquidIf("product.media.size > 1",v()))}
+        ${FeatureImageWithGallery_liquid.default({builderPropUID:`gp-carousel-${i?.uid}`,...u,children:v(),enableLazyLoadImage:d})}
+        ${system.If(!m,j())}
       </div>
     </gp-product-images>
     ${system.If(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-product-images-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-product-images-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/esm/hero-banner/components/HeroBannerItem.liquid.js

@@ -1,18 +1,18 @@
-import e from"../../grid/components/row/Row.liquid.js";import{template as o,getAspectRatioGlobalSize as s,DEVICES as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import{createStyle as r,createClass as a,If as l}from"@gem-sdk/system";import m from"../../image/components/AdaptiveImage.liquid.js";import p from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as d,getOverlayStyle as n,getRowStyle as c,getAdaptiveStyle as u,getBackgroundStyle as f,getContainBackgroundStyle as y,getYoutubeIframeStyle as v,getHtml5VideoStyle as b}from"../common/styles.js";import{getContainerClasses as g,getOverlayClasses as $,getRowClasses as j,getAdaptivePictureClasses as h,getAdaptiveClasses as k,getBackgroundClasses as w,getContainBackgroundClasses as I,getHtml5VideoClasses as N,getWrapperYoutubeClasses as q,getIframeYoutubeClasses as H,getLazyBackgroundClasses as L}from"../common/classes.js";import{getAspectRatioSettings as z,getBackgroundImageHeroBanner as B,horizontalAlign as C,getWidth as R,getBgImage as A,fallbackImg as T,getEnableBgImageByDevice as x,showVideoType as E,getResponsiveSetting as O}from"../common/helpers.js";import{getImageSrc as S}from"../../image/common/helpers.js";import V from"../../image/components/NextImage.liquid.js";import D from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as M,youtubeVideoRegex as W}from"../../video/common/helpers.js";import{isRenderHtmlVideo as Y}from"../../grid/components/row/common/helpers.js";let HeroBannerItem=F=>{let{enableLazyLoadImage:G=!0,setting:J,styles:K,children:P,builderProps:Q,rawChildren:U}=F,{layout:X,verticalAlign:Z,enableParallax:_,alt:ee,title:eo,preload:es}=J??{},{background:et,overlayColor:ei,verticalGutter:er,sizeSetting:ea,contentWidth:el,hoverEffect:em,contentPosition1Col:ep,contentPosition2Col:ed}=K??{},en=!es&&G,ec=z(J?.ratioOptions,J?.aspectRatio),eu=O(et||{}).desktop,ef=r({...d(K,J)}),ey=a({...g(J,K)}),ev=r({...n(K)}),eb=a({...$(K)}),eg=r({...c(K)}),e$=a({...j(K,J)}),ej=r({...u(K)}),eh=a({...h()}),ek=a({...k()}),ew=a({...w(em,en)}),eI=r({...B(et,en,!1),...f(K,_,"")}),eN=a({...I()}),eq=r({...y(K)}),eH=a({...N(J?.aspectRatio,!1)}),eL=r({...v(ec)}),ez=a({...q()}),eB=r({...b(ec)}),eC=a({...H()}),eR=e=>a({...L(e)}),eA=()=>{if(!(et?.desktop?.preload||et?.tablet?.preload||et?.mobile?.preload))return t.map(e=>l(x(e,et),V({src:S(i(A(et),e),e),alt:ee,title:eo,className:eR(e),isDisableAspectStyle:!0,enableLazyLoadImage:G}))).join("")},eT=()=>{if(!E(et))return;if(Y(et))return p({uid:Q?.uid,muted:!0,loop:eu?.loop,controls:!1,autoplay:!0,src:eu?.videoHtml5||"",title:"Video",style:eB,className:eH});let e=eu?.video??"",o=M(e),s=`&loop=false&playlist=${o}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(eu?.type==="video"&&eu?.videoType==="youtube"&&o&&W.test(e))return D({uid:Q?.uid,id:o,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:s,adNetwork:!1,noCookie:!0,muted:!0,lazy:eu?.lazyLoad??!0,preload:!0,style:eL,wrapperClass:ez,iframeClass:eC})};return o`
-  <div class="${ey}" style="${ef}">
+import e from"../../grid/components/row/Row.liquid.js";import{template as o,getAspectRatioGlobalSize as s,DEVICES as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import{createStyle as r,createClass as m,If as a}from"@gem-sdk/system";import l from"../../image/components/AdaptiveImage.liquid.js";import p from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as n,getOverlayStyle as d,getRowStyle as c,getAdaptiveStyle as u,getBackgroundStyle as f,getContainBackgroundStyle as y,getYoutubeIframeStyle as v,getHtml5VideoStyle as g}from"../common/styles.js";import{getContainerClasses as j,getOverlayClasses as $,getRowClasses as b,getAdaptivePictureClasses as h,getAdaptiveClasses as k,getBackgroundClasses as w,getContainBackgroundClasses as N,getHtml5VideoClasses as q,getWrapperYoutubeClasses as H,getIframeYoutubeClasses as I,getLazyBackgroundClasses as B}from"../common/classes.js";import{getAspectRatioSettings as C,getBackgroundImageHeroBanner as R,horizontalAlign as z,getWidth as A,getBgImage as L,fallbackImg as T,getEnableBgImageByDevice as x,showVideoType as E,getResponsiveSetting as O}from"../common/helpers.js";import{getImageSrc as S}from"../../image/common/helpers.js";import V from"../../image/components/NextImage.liquid.js";import D from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as M,youtubeVideoRegex as W}from"../../video/common/helpers.js";import{isRenderHtmlVideo as Y}from"../../grid/components/row/common/helpers.js";import{PRIORITY_LOAD_ATTRS as F}from"../../image/constants.js";let HeroBannerItem=G=>{let{enableLazyLoadImage:J=!0,setting:K,styles:P,children:Q,builderProps:U,rawChildren:X}=G,{layout:Z,verticalAlign:_,enableParallax:ee,alt:eo,title:es,preload:et}=K??{},{background:ei,overlayColor:er,verticalGutter:em,sizeSetting:ea,contentWidth:el,hoverEffect:ep,contentPosition1Col:en,contentPosition2Col:ed}=P??{},ec=!et&&J,eu=C(K?.ratioOptions,K?.aspectRatio),ef=O(ei||{}).desktop,ey=r({...n(P,K)}),ev=m({...j(K,P)}),eg=r({...d(P)}),ej=m({...$(P)}),e$=r({...c(P)}),eb=m({...b(P,K)}),eh=r({...u(P)}),ek=m({...h()}),ew=m({...k()}),eN=m({...w(ep,ec)}),eq=r({...R(ei,ec,!1),...f(P,ee,"")}),eH=m({...N()}),eI=r({...y(P)}),eB=m({...q(K?.aspectRatio,!1)}),eC=r({...v(eu)}),eR=m({...H()}),ez=r({...g(eu)}),eA=m({...I()}),eL=e=>m({...B(e)}),eT=()=>{if(!et)return t.map(e=>a(x(e,ei),V({src:S(i(L(ei),e),e),alt:eo,title:es,className:eL(e),isDisableAspectStyle:!0,enableLazyLoadImage:J}))).join("")},ex=()=>{if(!E(ei))return;if(Y(ei))return p({uid:U?.uid,muted:!0,loop:ef?.loop,controls:!1,autoplay:!0,src:ef?.videoHtml5||"",title:"Video",style:ez,className:eB});let e=ef?.video??"",o=M(e),s=`&loop=false&playlist=${o}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(ef?.type==="video"&&ef?.videoType==="youtube"&&o&&W.test(e))return D({uid:U?.uid,id:o,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:s,adNetwork:!1,noCookie:!0,muted:!0,lazy:ef?.lazyLoad??!0,preload:!0,style:eC,wrapperClass:eR,iframeClass:eA})};return o`
+  <div class="${ev}" style="${ey}">
       <div
         aria-label="Background Image"
         role="banner"
-        class="${eN}"
-        style="${eq}"
+        class="${eH}"
+        style="${eI}"
       >
-        <div class="${ew}" style="${eI}">
-          ${eA()}
+        <div class="${eN}" style="${eq}">
           ${eT()}
+          ${ex()}
         </div>
-        ${l(!!ei,o`<div aria-label="Overlay" role="banner" class="${eb}" style="${ev}"> </div>`)}
+        ${a(!!er,o`<div aria-label="Overlay" role="banner" class="${ej}" style="${eg}"> </div>`)}
       </div>
-      ${e({className:e$,style:eg,setting:{layout:X,horizontalAlign:C(X,ep,ed),verticalAlign:Z},styles:{verticalGutter:er,width:R(el),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:P,rawChildren:U})}
-        ${m({pictureClass:eh,srcSet:A(et),className:ek,aspectRatio:s(ea),style:ej,alt:ee,title:eo,enableLazyLoadImage:en,fallbackImg:T})}
+      ${e({className:eb,style:e$,setting:{layout:Z,horizontalAlign:z(Z,en,ed),verticalAlign:_},styles:{verticalGutter:em,width:A(el),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:Q,rawChildren:X})}
+        ${l({pictureClass:ek,srcSet:L(ei),className:ew,...et&&F,aspectRatio:s(ea),style:eh,alt:eo,title:es,enableLazyLoadImage:J,fallbackImg:T})}
   </div>
 `};export{HeroBannerItem as default};

package/dist/esm/image/common/attrs.js

@@ -1 +1 @@
-import{HREF_TO_SALES_PAGE as t}from"../../constant.js";import{getAspectRatio as e,getNewBackupFileKey as r,getImageSrc as a,safeStringify as s,NEXT_IMAGE_CONFIG as i,getSrcSet as g,IMAGE_PLACEHOLDER as l}from"./helpers.js";import{createAttr as o}from"@gem-sdk/system";import{handleClickLink as p}from"../../helpers.js";let getContainerAttrs=(t,e)=>({...t,...e&&{"data-id":e}}),getLinkWrapperAttrs=({urlData:e,imageLink:r,title:a,isLiquid:s=!1})=>{let i=s?{...e,...r?.noFollow&&{rel:"nofollow"},title:a}:{setting:e,title:a};return r?.type!=="go-to-sales-page"?r?.link?i:{}:s?{href:t,target:"_self"}:{setting:{href:t,target:"_self"}}},getImageLiquidAttrs=({pageContext:t,enableLazyLoadImage:e=!1})=>({...t&&{pageContext:t},...e&&{enableLazyLoadImage:e}}),getAdaptiveImageAttrs=({styles:t,setting:i,mode:g,isLiquid:l})=>{let{alt:o,srcSet:n,priority:c,qualityPercent:u,qualityType:d}=i??{},y=e({styles:t,setting:i}),A=()=>{p(i?.imageLink,g)},m={loading:"eager",fetchpriority:"high",priority:c},k=n?.desktop?.backupFileKey?r(n?.desktop?.backupFileKey??"",n?.desktop?.src??""):"",h=l?a({src:n?.desktop?.src,backupFileKey:k,backupFilePath:n?.desktop?.backupFilePath,storage:n?.desktop?.storage}):n?.desktop?.src??"",L=c?{}:{"base-src":h??"","quality-type":s(d),"quality-percent":s(u)};return{pictureClass:"gp-contents",...o&&{alt:o},...n&&{srcSet:n},...c&&m,...L,...t?.objectFit&&{layout:t.objectFit},onClick:A,aspectRatio:y}},getNextImageAttrs=({styles:t,setting:r})=>{let{objectFit:a}=t??{},{vw:s,alt:i,title:g,quality:l,priority:o,isNotLazyload:p,qualityType:n,qualityPercent:c}=r??{},u=e({styles:t,setting:r});return{...r?.image,...s&&{vw:s},...i&&{alt:i},...g&&{title:g},...l&&{quality:l},...o&&{priority:o},isNotLazyload:p,setting:{aspectRatio:u,layout:a,qualityType:n,qualityPercent:c}}},getNextImageLiquidAttrs=t=>{let{srcset:e,setting:p,storage:n,baseSrc:c,priority:u,customAttrs:d,width:y=2237,height:A=1678,isNotLazyload:m,backupFileKey:k,backupFilePath:h,srcIsLiquidCode:L,enableLazyLoadImage:F,alt:b,title:f,src:I=i.DEFAULT_SRC,sizes:q=i.DEFAULT_SIZES}=t,E=!m&&F&&!u,T=()=>{let t=k?r(k??"",I):"",s=L?c:a({src:I,backupFileKey:t,backupFilePath:h,storage:n}),i=L?I:g(t??"",n??"THEME",I),o={sizes:"100vw",src:l,...s&&!u?{"base-src":s}:{},...s?{"data-src":s}:{},...i?{"data-srcset":i}:{}},p={sizes:q,src:s??"",isNotLazyload:"true",srcset:e??"",...s&&!u?{"base-src":s}:{},...u?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",...E?o:p}},_=()=>{let{qualityPercent:t,qualityType:e}=p??{},r=!u&&e&&t?{"quality-type":s(e),"quality-percent":s(t)}:{"quality-type":"","quality-percent":""};return{...b&&{alt:b},...f&&{title:f},width:y,height:A,draggable:"false",...r}};return o({...d,..._(),...T()})},getNextImageReactAttrs=t=>{let{width:e=i.DEFAULT_WIDTH_PROPS,height:r=i.DEFAULT_HEIGHT_PROPS,quality:a,priority:s,isNotLazyload:g,enableLazyLoadImage:p,base64:n=l,alt:c=i.DEFAULT_ALT,src:u=i.DEFAULT_SRC}=t,d=!g&&p&&!s,y=()=>{let t={loading:"lazy",placeholder:"blur",...n&&{blurDataURL:n}},e={loading:"eager",fetchpriority:"high"};return{...d?t:e}},A=()=>({src:u,alt:c,width:e,height:r,quality:a}),m=A(),k=o(y());return{...m,...k}};export{getAdaptiveImageAttrs,getContainerAttrs,getImageLiquidAttrs,getLinkWrapperAttrs,getNextImageAttrs,getNextImageLiquidAttrs,getNextImageReactAttrs};
+import{HREF_TO_SALES_PAGE as t}from"../../constant.js";import{getAspectRatio as e,getNewBackupFileKey as r,getImageSrc as a,safeStringify as s,NEXT_IMAGE_CONFIG as i,getSrcSet as l,createBlurDataURL as o,IMAGE_PLACEHOLDER as g}from"./helpers.js";import{createAttr as p}from"@gem-sdk/system";import{handleClickLink as n}from"../../helpers.js";import{PRIORITY_LOAD_ATTRS as c}from"../constants.js";let getContainerAttrs=(t,e)=>({...t,...e&&{"data-id":e}}),getLinkWrapperAttrs=({urlData:e,imageLink:r,title:a,isLiquid:s=!1})=>{let i=s?{...e,...r?.noFollow&&{rel:"nofollow"},title:a}:{setting:e,title:a};return r?.type!=="go-to-sales-page"?r?.link?i:{}:s?{href:t,target:"_self"}:{setting:{href:t,target:"_self"}}},getImageLiquidAttrs=({pageContext:t,enableLazyLoadImage:e=!1})=>({...t&&{pageContext:t},...e&&{enableLazyLoadImage:e}}),getAdaptiveImageAttrs=({styles:t,setting:i,mode:l,isLiquid:o})=>{let{alt:g,srcSet:p,priority:u,qualityPercent:d,qualityType:m}=i??{},A=e({styles:t,setting:i}),y=()=>{n(i?.imageLink,l)},k=p?.desktop?.backupFileKey?r(p?.desktop?.backupFileKey??"",p?.desktop?.src??""):"",L=o?a({src:p?.desktop?.src,backupFileKey:k,backupFilePath:p?.desktop?.backupFilePath,storage:p?.desktop?.storage}):p?.desktop?.src??"",F=u?{}:{"base-src":L??"","quality-type":s(m),"quality-percent":s(d)};return{pictureClass:"gp-contents",...g&&{alt:g},...p&&{srcSet:p},...u&&c,...F,...t?.objectFit&&{layout:t.objectFit},onClick:y,aspectRatio:A}},getNextImageAttrs=({styles:t,setting:r})=>{let{objectFit:a}=t??{},{vw:s,alt:i,title:l,quality:o,priority:g,isNotLazyload:p,qualityType:n,qualityPercent:c}=r??{},u=e({styles:t,setting:r});return{...r?.image,...s&&{vw:s},...i&&{alt:i},...l&&{title:l},...o&&{quality:o},...g&&{priority:g},isNotLazyload:p,setting:{aspectRatio:u,layout:a,qualityType:n,qualityPercent:c}}},getNextImageLiquidAttrs=t=>{let{srcset:e,setting:g,storage:n,baseSrc:c,priority:u,customAttrs:d,width:m=2237,height:A=1678,isNotLazyload:y,backupFileKey:k,backupFilePath:L,srcIsLiquidCode:F,enableLazyLoadImage:b,alt:f,title:h,src:I=i.DEFAULT_SRC,sizes:q=i.DEFAULT_SIZES}=t,E=!y&&b&&!u,T=()=>{let t=k?r(k??"",I):"",s=F?c:a({src:I,backupFileKey:t,backupFilePath:L,storage:n}),i=F?I:l(t??"",n??"THEME",I),g={sizes:"100vw",src:o(m,A),...s&&!u?{"base-src":s}:{},...s?{"data-src":s}:{},...i?{"data-srcset":i}:{}},p={sizes:q,src:s??"",isNotLazyload:"true",srcset:e??"",...s&&!u?{"base-src":s}:{},...u?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",...E?g:p}},_=()=>{let{qualityPercent:t,qualityType:e}=g??{},r=!u&&e&&t?{"quality-type":s(e),"quality-percent":s(t)}:{"quality-type":"","quality-percent":""};return{...f&&{alt:f},...h&&{title:h},width:m,height:A,draggable:"false",...r}};return p({...d,..._(),...T()})},getNextImageReactAttrs=t=>{let{width:e=i.DEFAULT_WIDTH_PROPS,height:r=i.DEFAULT_HEIGHT_PROPS,quality:a,priority:s,isNotLazyload:l,enableLazyLoadImage:o,base64:n=g,alt:c=i.DEFAULT_ALT,src:u=i.DEFAULT_SRC}=t,d=!l&&o&&!s,m=()=>{let t={loading:"lazy",placeholder:"blur",...n&&{blurDataURL:n}},e={loading:"eager",fetchpriority:"high"};return{...d?t:e}},A=()=>({src:u,alt:c,width:e,height:r,quality:a}),y=A(),k=p(m());return{...y,...k}};export{getAdaptiveImageAttrs,getContainerAttrs,getImageLiquidAttrs,getLinkWrapperAttrs,getNextImageAttrs,getNextImageLiquidAttrs,getNextImageReactAttrs};

package/dist/esm/image/constants.js

@@ -0,0 +1 @@
+let PRIORITY_LOAD_ATTRS={loading:"eager",fetchpriority:"high",priority:!0};export{PRIORITY_LOAD_ATTRS};

package/dist/esm/product/components/product-images-v2/ProductImagesV2.liquid.js

@@ -1,7 +1,7 @@
-import{template as e,isLocalEnv as o,baseAssetURL as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{getSettingPreloadData as c}from"../../../helpers.js";import{getShapeByLayout as u,sizeSettingDefaultForNewLayout as n}from"./common/productGallery.js";import{getProductImagesClassName as g}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as f}from"./composables/getProductImagesStyles.js";import{createAttr as $,LiquidIf as y,createClass as h,If as S,Liquid as j}from"@gem-sdk/system";import{getBorderActiveCss as v}from"./common/getBorderActiveCss.js";import{getStyleOfObject as F}from"../../helpers/function.js";let ProductImages=I=>{let P=p(I),{setting:C,styles:G,builderProps:D,style:b}=P,{rawChildren:O,pageContext:_}=I,{enableLazyLoadImage:z}=_??{},N={...C,...G},A=`
+import{template as e,isLocalEnv as o,baseAssetURL as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{getSettingPreloadData as c}from"../../../helpers.js";import{getShapeByLayout as u,sizeSettingDefaultForNewLayout as n}from"./common/productGallery.js";import{getProductImagesClassName as g}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as f}from"./composables/getProductImagesStyles.js";import{createAttr as $,LiquidIf as y,createClass as h,If as S,Liquid as j}from"@gem-sdk/system";import{getBorderActiveCss as v}from"./common/getBorderActiveCss.js";import{getStyleOfObject as F}from"../../helpers/function.js";let ProductImages=I=>{let P=p(I),{setting:C,styles:G,builderProps:D,style:b}=P,{rawChildren:z,pageContext:O}=I,{enableLazyLoadImage:_}=O??{},N={...C,...G},A=`
     {
       "id":${JSON.stringify(D?.uid)},
-      "pageContext": ${JSON.stringify(_)},
+      "pageContext": ${JSON.stringify(O)},
       "setting":${JSON.stringify(C)},
       "styles":${JSON.stringify(G)},
       "productUrl":{{product.url | json | escape}},
@@ -9,19 +9,19 @@ import{template as e,isLocalEnv as o,baseAssetURL as r,WrapRenderChildren as s,R
       "collectionUrl": {{ collection.url | json | escape }},
       "collection": {{ collection | json | escape}}
     }
-  `,B=$({"section-id":"{{section.id}}","data-id":`${D?.uid}`}),U=$({"data-only-image":y("product.media.size > 1","false","true")}),{wrapperClasses:k,productImagesGalleryClasses:q}=g(I),E=h({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),J=h({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:w,wrapContainerStyleOnlyOneImage:T,galleryImageStyle:x}=f(N),{isOnlyFeatureAllDevices:L}=i(N?.position),M=u({shape:N.shape,shapeForBottom:N.shapeForBottom,shapeFor1Col:N.shapeFor1Col,shapeFor2Col:N.shapeFor2Col,shapeForFtOnly:N.shapeForFtOnly,shapeForInsideBottom:N.shapeForInsideBottom??n,shapeForInside:N.shapeForInside??n},N.position),R=a(N.position,M,N?.spacing),V=()=>e`
-      ${s({uid:D?.uid||"",customProps:O?.[0].customProps},O?.map(o=>{if(o)return e`${t({...o,isInsideProductImage:!0,imageData:{imageShape:G?.ftShape,imageAlign:G?.align,imageLayout:G?.position},dotData:{dotSize:C?.ftDotSize,dotGapToCarousel:C?.ftDotGapToCarousel,dotStyle:C?.ftDotStyle}})}`}))}
-    `,W=()=>e`
+  `,B=$({"section-id":"{{section.id}}","data-id":`${D?.uid}`}),{isOnlyFeatureAllDevices:U,isRenderGalleryGrid:k}=i(N?.position),q=k?{}:$({"data-only-image":y("product.media.size > 1","false","true")}),{wrapperClasses:E,productImagesGalleryClasses:J}=g(I),w=h({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),T=h({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:x,wrapContainerStyleOnlyOneImage:L,galleryImageStyle:M}=f(N),R=u({shape:N.shape,shapeForBottom:N.shapeForBottom,shapeFor1Col:N.shapeFor1Col,shapeFor2Col:N.shapeFor2Col,shapeForFtOnly:N.shapeForFtOnly,shapeForInsideBottom:N.shapeForInsideBottom??n,shapeForInside:N.shapeForInside??n},N.position),V=a(N.position,R,N?.spacing),W=()=>e`
+      ${s({uid:D?.uid||"",customProps:z?.[0].customProps},z?.map(o=>{if(o)return e`${t({...o,isInsideProductImage:!0,imageData:{imageShape:G?.ftShape,imageAlign:G?.align,imageLayout:G?.position},dotData:{dotSize:C?.ftDotSize,dotGapToCarousel:C?.ftDotGapToCarousel,dotStyle:C?.ftDotStyle}})}`}))}
+    `,H=()=>e`
       <div
-        class="${q}"
-        style="${F(x)}"
-        ${{...U}}
+        class="${J}"
+        style="${F(M)}"
+        ${{...q}}
       >
-        ${d({builderPropUID:`gp-gallery-${D?.uid}`,...N,enableLazyLoadImage:z})}
-        ${m({builderPropUID:D?.uid,wrapperStyle:{...R},children:V(),...N,enableLazyLoadImage:z})}
+        ${y("product.media.size > 1",d({builderPropUID:`gp-gallery-${D?.uid}`,...N,enableLazyLoadImage:_}))}
+        ${S(k,m({builderPropUID:D?.uid,wrapperStyle:{...V},children:W(),...N,enableLazyLoadImage:_}))}
       </div>
-    `,H=()=>C?.borderActive?.border!=="none";return e`
-  ${S(H(),`<style>${v({settings:N,uid:D?.uid,type:"Liquid"})}</style>`)}
+    `,K=()=>C?.borderActive?.border!=="none";return e`
+  ${S(K(),y("product.media.size > 1",`<style>${v({settings:N,uid:D?.uid,type:"Liquid"})}</style>`),"")}
   ${j(`
     {% assign featured_image = product.featured_image %}
     ${y("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
@@ -30,14 +30,14 @@ import{template as e,isLocalEnv as o,baseAssetURL as r,WrapRenderChildren as s,R
       gp-data='${A}'
       ${{...B}}
       style="${{...b}}"
-      class="${k}"
+      class="${E}"
     >
       <div
-        class="${y("product.media.size > 1",`${E}`,`${J}`)}"
-        style="${y("product.media.size > 1",F(w),F(T))}"
+        class="${y("product.media.size > 1",`${w}`,`${T}`)}"
+        style="${y("product.media.size > 1",F(x),F(L))}"
       >
-        ${l({builderPropUID:`gp-carousel-${D?.uid}`,...N,children:V(),enableLazyLoadImage:z})}
-        ${S(!L,y("product.media.size > 1",W()))}
+        ${l({builderPropUID:`gp-carousel-${D?.uid}`,...N,children:W(),enableLazyLoadImage:_})}
+        ${S(!U,H())}
       </div>
     </gp-product-images>
     ${S(o,`<script ${c('class="gps-link" delay',"src")}="{{ 'gp-product-images-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${c('class="gps-link" delay',"src")}="${r}/assets-v2/gp-product-images-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",